/* ============================================================
   Hợp đồng ON-TRADE — giao diện tab Sale + hộp việc Trade
   MagnoliaX DS v2 "Monday", KHOANH VÙNG trong .ctx.

   Vì sao khoanh vùng: :root của app vẫn là bộ token CŨ (accent amber #f59e0b,
   --bg/--bg-card...) và chưa migrate sang DS v2. Ghi đè :root ở đây là đổi màu
   toàn bộ 20+ workspace trong một commit lẽ ra chỉ thêm một tab.
   → Token DS v2 khai TRONG .ctx, mọi thứ ngoài .ctx không suy suyển.

   Luật DS đã áp: 1 primary #0073EA · màu = trạng thái · radius 4/8/99 ·
   spacing thang 4px · tabular-nums cho số · KHÔNG emoji (icon line SVG, sprite
   do ct-ui.js chèn) · pill tô đầy nền · bảng kiểu .board.
   ============================================================ */

.ctx {
  --ct-bg: #F6F7FB; --ct-surface: #FFFFFF; --ct-surface-2: #F5F6F8; --ct-surface-3: #EBECF0;
  --ct-text: #323338; --ct-muted: #676879; --ct-soft: #9699A6; --ct-on: #FFFFFF;
  --ct-primary: #0073EA; --ct-primary-hover: #0060B9; --ct-primary-soft: #CCE5FF;
  --ct-ring: rgba(0,115,234,.30);
  --ct-done: #00C875; --ct-done-bg: #E5F9F0;
  --ct-working: #FDAB3D; --ct-working-bg: #FFF4E5;
  --ct-stuck: #E2445C; --ct-stuck-bg: #FCE8EB;
  --ct-info: #579BFC; --ct-info-bg: #E9F2FF;
  --ct-dark: #333333; --ct-dark-bg: #EDEDEF;
  --ct-border: #E6E9EF; --ct-border-2: #D0D4E4;
  --ct-r-sm: 4px; --ct-r: 8px; --ct-r-pill: 99px;
  --ct-sh-sm: 0 1px 2px rgba(0,0,0,.04);
  --ct-sh-md: 0 4px 12px rgba(0,0,0,.08);
  --ct-sh-lg: 0 8px 24px rgba(0,0,0,.12);

  /* Public Sans đứng đầu (đã verify subset tiếng Việt), Be Vietnam Pro / Figtree
     đỡ phía sau, cuối cùng là font hệ thống — KHÔNG nạp webfont từ CDN vì repo
     này cố ý không có thẻ https:// nào. */
  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--ct-text);
}
.ctx :where(b, strong) { font-weight: 700; }

/* ── Icon ─────────────────────────────────────────────────────────────────── */
.ctx .ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ctx .ic.s14 { width: 14px; height: 14px; }
.ctx .ic.s18 { width: 18px; height: 18px; }
.ctx .ic.s20 { width: 20px; height: 20px; }
.ctx .ic.s28 { width: 28px; height: 28px; }

/* ── Nút ──────────────────────────────────────────────────────────────────── */
.ctx .ct-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 8px 16px; border-radius: var(--ct-r); border: 1px solid var(--ct-border-2);
  background: var(--ct-surface); color: var(--ct-text);
  font: inherit; font-weight: 700; font-size: 13px; line-height: 1.2;
  cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s;
}
.ctx .ct-btn:hover:not(:disabled) { background: var(--ct-surface-2); }
.ctx .ct-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ct-ring); }
.ctx .ct-btn:disabled { opacity: .5; cursor: not-allowed; }
.ctx .ct-btn.primary { background: var(--ct-primary); border-color: var(--ct-primary); color: var(--ct-on); }
.ctx .ct-btn.primary:hover:not(:disabled) { background: var(--ct-primary-hover); border-color: var(--ct-primary-hover); }
.ctx .ct-btn.danger { background: var(--ct-surface); border-color: var(--ct-stuck); color: var(--ct-stuck); }
.ctx .ct-btn.danger:hover:not(:disabled) { background: var(--ct-stuck-bg); }
.ctx .ct-btn.ghost { background: transparent; border-color: transparent; color: var(--ct-muted); }
.ctx .ct-btn.ghost:hover:not(:disabled) { background: var(--ct-surface-3); color: var(--ct-text); }
.ctx .ct-btn.sm { padding: 5px 10px; font-size: 12px; }
/* Nút quay lại danh sách: đây là lối RA DUY NHẤT khỏi màn chi tiết nên phải thấy được
   ngay — kiểu "ghost sm" cũ (không nền, không viền, chữ xám, cỡ nhỏ nhất) lẫn hẳn vào
   nền. Nhưng vẫn để nền NHẠT chứ không tô đặc: nút xanh đặc duy nhất trên màn phải là
   "Lưu & hoàn tất", hai nút cùng đặc thì không biết đâu là hành động chính (DS v2 —
   một primary duy nhất). */
.ctx .ct-btn.ct-back {
  padding: 9px 16px; font-size: 13.5px;
  color: var(--ct-primary); background: var(--ct-info-bg); border-color: #BBD9FE;
}
.ctx .ct-btn.ct-back:hover:not(:disabled) { background: var(--ct-primary-soft); border-color: var(--ct-primary); }

/* ── Pill trạng thái (tô đầy nền, luôn có chữ) ────────────────────────────── */
.ctx .ct-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--ct-r-pill);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}

/* ── Khối chọn khuôn hợp đồng ─────────────────────────────────────────────── */
.ctx .ct-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; }
.ctx .ct-card {
  text-align: left; padding: 16px; border: 1px solid var(--ct-border);
  border-radius: var(--ct-r); background: var(--ct-surface); box-shadow: var(--ct-sh-sm);
  cursor: pointer; font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.ctx .ct-card:hover { border-color: var(--ct-primary); box-shadow: var(--ct-sh-md); transform: translateY(-1px); }
.ctx .ct-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ct-ring); }
.ctx .ct-card .h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.ctx .ct-card .h .bx {
  width: 28px; height: 28px; border-radius: var(--ct-r-sm); display: grid; place-items: center;
  background: var(--ct-primary-soft); color: var(--ct-primary-hover);
}
.ctx .ct-card .sub { color: var(--ct-muted); font-size: 12.5px; line-height: 1.5; }
.ctx .ct-card .go { margin-top: auto; color: var(--ct-primary); font-weight: 700; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 4px; }

/* ── Danh sách hợp đồng của outlet ────────────────────────────────────────── */
.ctx .ct-list { display: flex; flex-direction: column; gap: 8px; }
.ctx .ct-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border: 1px solid var(--ct-border); border-radius: var(--ct-r);
  background: var(--ct-surface); box-shadow: var(--ct-sh-sm);
}
.ctx .ct-item:hover { border-color: var(--ct-border-2); }
.ctx .ct-item .meta { flex: 1; min-width: 0; }
.ctx .ct-item .ttl { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctx .ct-item .sub { color: var(--ct-muted); font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ── Thanh tiêu đề khối ───────────────────────────────────────────────────── */
.ctx .ct-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ctx .ct-bar .sp { margin-left: auto; }
.ctx .ct-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ct-muted); margin: 0;
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.ctx .ctf-g {
  background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: var(--ct-r);
  padding: 16px; margin-bottom: 12px; box-shadow: var(--ct-sh-sm);
}
.ctx .ctf-gt { margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--ct-muted); }
.ctx .ctf-gn { margin: 0 0 12px; font-size: 12.5px; color: var(--ct-muted); line-height: 1.5; }
.ctx .ctf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.ctx .ctf-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ctx .ctf-lb { font-size: 12px; font-weight: 700; color: var(--ct-text); }
.ctx .ctf-req { color: var(--ct-stuck); margin-left: 2px; }
.ctx .ctf-in {
  width: 100%; box-sizing: border-box; padding: 8px 12px;
  border: 1px solid var(--ct-border-2); border-radius: var(--ct-r-sm);
  background: var(--ct-surface); color: var(--ct-text);
  font: inherit; font-size: 13.5px; transition: border-color .12s, box-shadow .12s;
}
.ctx textarea.ctf-in { resize: vertical; line-height: 1.5; }
.ctx .ctf-in:focus { outline: none; border-color: var(--ct-primary); box-shadow: 0 0 0 3px var(--ct-ring); }
.ctx .ctf-in:disabled { background: var(--ct-surface-2); color: var(--ct-muted); cursor: default; }
.ctx .ctf-num { text-align: right; font-variant-numeric: tabular-nums; }
.ctx .ctf-hint { font-size: 11.5px; color: var(--ct-soft); line-height: 1.45; }
.ctx .ctf-derived:not(:empty) { font-size: 12px; font-weight: 700; color: var(--ct-primary); }
.ctx .ctf-f.miss .ctf-in { border-color: var(--ct-stuck); background: var(--ct-stuck-bg); }
.ctx .ctf-f.miss .ctf-lb { color: var(--ct-stuck); }

/* ── Bảng (kiểu .board) ───────────────────────────────────────────────────── */
.ctx .ctf-tbl, .ctx .ct-board { width: 100%; border-collapse: collapse; font-size: 13px; }
.ctx .ctf-tbl th, .ctx .ct-board th {
  text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: var(--ct-muted);
  border-bottom: 1px solid var(--ct-border); background: var(--ct-surface-2);
}
.ctx .ctf-tbl td, .ctx .ct-board td { padding: 8px 12px; border-bottom: 1px solid var(--ct-border); }
.ctx .ct-board tbody tr:hover { background: var(--ct-surface-2); }
.ctx .ctf-tbl .n, .ctx .ct-board .n { text-align: right; font-variant-numeric: tabular-nums; }
.ctx .ctf-tbl .q { width: 128px; }
.ctx .ctf-tbl tfoot td { border-bottom: none; background: var(--ct-surface-2); }

/* ── Băng thông báo ───────────────────────────────────────────────────────── */
.ctx .ct-note {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--ct-r); font-size: 13px; line-height: 1.5;
  border: 1px solid transparent; margin-bottom: 12px;
}
.ctx .ct-note.info { background: var(--ct-info-bg); border-color: #BBD9FE; color: #14418A; }
.ctx .ct-note.warn { background: var(--ct-working-bg); border-color: #F8DCB0; color: #8A5A08; }
.ctx .ct-note.bad { background: var(--ct-stuck-bg); border-color: #F5C2CB; color: #9B1F31; }
.ctx .ct-note.good { background: var(--ct-done-bg); border-color: #A9E9CC; color: #0A6E45; }
.ctx .ct-note b { font-weight: 700; }

.ctx .ct-empty { padding: 32px 16px; text-align: center; color: var(--ct-muted); font-size: 13px; }
.ctx .ct-empty .ic { color: var(--ct-soft); margin-bottom: 8px; }

/* ── Thanh hành động dính đáy ─────────────────────────────────────────────── */
.ctx .ct-actions {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: 4px; padding: 12px 0;
  background: var(--ct-bg);
  border-top: 1px solid var(--ct-border);
  box-shadow: 0 -8px 16px -12px rgba(0,0,0,.25);
}
/* Chừa chỗ để dòng cuối của bảng/form không bị thanh hành động che khi cuộn tới đáy. */
.ctx > .ct-actions:last-child { margin-bottom: 0; }

/* ── Lịch sử ──────────────────────────────────────────────────────────────── */
.ctx .ct-hist { margin-top: 8px; font-size: 12.5px; }
.ctx .ct-hist summary { cursor: pointer; color: var(--ct-muted); font-weight: 700; }
.ctx .ct-hist ul { margin: 8px 0 0; padding-left: 16px; color: var(--ct-text); }
.ctx .ct-hist li { margin-bottom: 4px; line-height: 1.5; }
.ctx .ct-hist .t { color: var(--ct-soft); font-variant-numeric: tabular-nums; }

/* ── Cửa sổ xem trước ─────────────────────────────────────────────────────── */
.ctm-wrap { position: fixed; inset: 0; z-index: 12000; display: flex; }
.ctm-wrap[hidden] { display: none; }
.ctm-back { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
.ctm-card {
  position: relative; margin: auto; width: min(96vw, 900px); max-height: 92vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-top: 3px solid #0073EA; overflow: hidden;
  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif;
}
.ctm-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid #E6E9EF; background: #fff; flex: none;
}
.ctm-title { font-weight: 700; font-size: 14px; color: #323338; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctm-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ctm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; border: 1px solid #D0D4E4; background: #fff;
  font-family: inherit; font-size: 13px; font-weight: 700; color: #323338; cursor: pointer;
}
.ctm-btn:hover:not(:disabled) { background: #F5F6F8; }
.ctm-btn:disabled { opacity: .5; cursor: not-allowed; }
.ctm-btn.primary { background: #0073EA; border-color: #0073EA; color: #fff; }
.ctm-btn.primary:hover:not(:disabled) { background: #0060B9; }
.ctm-x { border: none; background: none; font-size: 18px; line-height: 1; color: #676879;
  cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.ctm-x:hover { background: #EBECF0; color: #323338; }
.ctm-body { overflow: auto; padding: 24px 32px; background: #fff; }
/* Bản xem trước hợp đồng đã cắt sẵn thành trang A4 (CT.render.paginate) → nền xám để
   thấy rõ mép tờ giấy. Các popup đối chiếu dùng chung .ctm-body nhưng không có
   .ctp-page nên không dính. */
.ctm-body:has(.ctp-page) { padding: 16px; background: #ECEEF3; }
body.ctm-open { overflow: hidden; }

@media print {
  body.ctm-open > *:not(.ctm-wrap) { display: none !important; }
  .ctm-wrap, .ctm-card { position: static; inset: auto; max-height: none; box-shadow: none; border: none; }
  .ctm-back, .ctm-head { display: none !important; }
  /* Phải nhắc lại cả bộ chọn :has — nó "nặng" hơn .ctm-body trần nên nếu không kể ra
     thì bấm Ctrl+P ngay trên bản xem trước sẽ in kèm nền xám và lề 16px thừa. */
  .ctm-body, .ctm-body:has(.ctp-page) { overflow: visible; padding: 0; background: #fff; }
}

@media (max-width: 760px) {
  .ctx .ctf-grid > .ctf-f { grid-column: span 12 !important; }
  .ctx .ct-item { flex-wrap: wrap; }
  .ctm-body { padding: 16px; }
}

/* ── Thanh "Lấy từ Chương trình đề xuất" (màn duyệt của Trade) ────────────── */
.ctx .ct-sync {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 12px;
  border: 1px solid transparent; border-radius: var(--ct-r-sm);
  font-size: 12.5px; line-height: 1.45;
}
.ctx .ct-sync > .ic { flex: none; }
.ctx .ct-sync .tx { flex: 1; min-width: 220px; }
.ctx .ct-sync .tx i { display: block; font-style: normal; font-weight: 700; margin-top: 2px; }
.ctx .ct-sync .tx i:empty { display: none; }
.ctx .ct-sync .ct-btn { flex: none; background: var(--ct-surface); }
.ctx .ct-sync.info { background: var(--ct-info-bg); border-color: #BBD9FE; color: #14418A; }
.ctx .ct-sync.warn { background: var(--ct-working-bg); border-color: #F8DCB0; color: #8A5A08; }
.ctx .ct-sync.good { background: var(--ct-done-bg); border-color: #A9E9CC; color: #0A6E45; }

/* ── Bảng đối chiếu Hợp đồng ↔ Chương trình đề xuất ───────────────────────
   Khối này nằm trong cửa sổ xem trước (.ctm-card) — cửa sổ đó gắn thẳng vào <body>,
   NGOÀI .ctx nên không thấy biến token; giống mọi luật .ctm-* ở trên, màu viết thẳng
   hex. Font cũng phải khai lại: .ctp-doc quanh nó đang là Times New Roman của bản in. */
.ctcmp { font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif;
  font-size: 13px; line-height: 1.5; color: #323338; }
.ctcmp .ctcmp-h { margin: 20px 0 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: #676879; }
.ctcmp .ctcmp-note { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid transparent; }
.ctcmp .ctcmp-note.info { background: #E9F2FF; border-color: #BBD9FE; color: #14418A; }
.ctcmp .ctcmp-note.warn { background: #FFF4E5; border-color: #F8DCB0; color: #8A5A08; }
.ctcmp .ctcmp-t { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 4px; }
.ctcmp .ctcmp-t th { text-align: left; padding: 8px 10px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: #676879;
  background: #F5F6F8; border-bottom: 1px solid #E6E9EF; }
.ctcmp .ctcmp-t td { padding: 8px 10px; border-bottom: 1px solid #E6E9EF; vertical-align: top; }
.ctcmp .ctcmp-t .n { text-align: right; font-variant-numeric: tabular-nums; }
.ctcmp .ctcmp-t tr.hi td { background: #E9F2FF; }
.ctcmp .ctcmp-em { color: #9699A6; font-style: italic; }
.ctcmp .ctcmp-v { display: inline-block; padding: 2px 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ctcmp .ctcmp-v.ok { background: #E5F9F0; color: #0A6E45; }
.ctcmp .ctcmp-v.gap { background: #FFF4E5; color: #8A5A08; }
.ctcmp .ctcmp-v.diff { background: #FCE8EB; color: #9B1F31; }
.ctcmp .ctcmp-v.na { background: #EDEDEF; color: #676879; }
.ctcmp .ctcmp-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px; color: #676879; font-size: 12px; }
.ctcmp .ctcmp-pill { display: inline-block; padding: 2px 10px; border-radius: 99px;
  background: #EDEDEF; color: #676879; font-size: 11px; font-weight: 700; }
.ctcmp .ctcmp-more { margin-top: 16px; font-size: 12.5px; }
.ctcmp .ctcmp-more summary { cursor: pointer; color: #676879; font-weight: 700; }
.ctcmp .ctcmp-more ul { margin: 8px 0 0; padding-left: 16px; }
.ctcmp .ctcmp-more li { margin-bottom: 4px; }

/* ── Ô kiểu bảng nhiều dòng (Bảng giá niêm yết) ───────────────────────────── */
.ctx .ctf-rows { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.ctx .ctf-rows th {
  text-align: left; padding: 6px 8px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: var(--ct-muted);
  background: var(--ct-surface-2); border-bottom: 1px solid var(--ct-border);
}
.ctx .ctf-rows td { padding: 4px 4px; border-bottom: 1px solid var(--ct-border); vertical-align: middle; }
.ctx .ctf-rows td:first-child { padding-left: 0; }
.ctx .ctf-rows th.x, .ctx .ctf-rows td.x { width: 34px; padding-right: 0; text-align: center; }
.ctx .ctf-rows .ctf-in { padding: 6px 10px; font-size: 13px; }
.ctx .ctf-rowdel {
  border: none; background: none; cursor: pointer; color: var(--ct-soft);
  font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: var(--ct-r-sm);
}
.ctx .ctf-rowdel:hover { background: var(--ct-stuck-bg); color: var(--ct-stuck); }
.ctx .ctf-f.miss .ctf-rows th { color: var(--ct-stuck); }

/* ── Hộp thoại báo kết quả (CT.ui.notify) ─────────────────────────────────────
   Gắn thẳng vào <body> nên NGOÀI .ctx → không với tới var(--ct-*), phải ghi hex.
   Cùng ngôn ngữ với .ctm-* (modal xem trước): nền trắng, viền trên 3px theo trạng
   thái, icon trong ô bo tròn, KHÔNG emoji. */
.ctd-wrap { position: fixed; inset: 0; z-index: 12100; display: flex; }
.ctd-wrap[hidden] { display: none; }
.ctd-back { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.ctd-card {
  position: relative; margin: auto; width: min(94vw, 460px);
  background: #fff; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.20);
  border-top: 3px solid #0073EA; padding: 24px 24px 16px;
  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif;
  color: #323338; font-size: 14px;
}
.ctd-card.good { border-top-color: #00C875; }
.ctd-card.warn { border-top-color: #FDAB3D; }
.ctd-card.bad  { border-top-color: #E2445C; }
.ctd-x {
  position: absolute; top: 8px; right: 8px; border: none; background: none;
  font-size: 16px; line-height: 1; color: #676879; cursor: pointer;
  padding: 6px 8px; border-radius: 4px;
}
.ctd-x:hover { background: #EBECF0; color: #323338; }
.ctd-x .ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
.ctd-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px; margin-bottom: 12px;
  background: #E9F2FF; color: #0073EA;
}
.ctd-card.good .ctd-ico { background: #E5F9F0; color: #00A560; }
.ctd-card.warn .ctd-ico { background: #FFF4E5; color: #B4740B; }
.ctd-card.bad  .ctd-ico { background: #FCE8EB; color: #E2445C; }
.ctd-ico .ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.ctd-t { font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.ctd-m { color: #676879; font-size: 13.5px; line-height: 1.5; }
.ctd-m p { margin: 0; }
.ctd-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0 0; }
.ctd-kv dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: #9699A6; align-self: center; }
.ctd-kv dd { margin: 0; color: #323338; font-weight: 700; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; }
.ctd-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.ctd-btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 8px 14px; border-radius: 8px; border: 1px solid #D0D4E4; background: #fff;
  font: inherit; font-size: 13px; font-weight: 700; color: #323338; cursor: pointer;
}
.ctd-btn .ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ctd-btn:hover:not(:disabled) { background: #F5F6F8; }
.ctd-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,115,234,.30); }
.ctd-btn:disabled { opacity: .5; cursor: not-allowed; }
.ctd-btn.primary { background: #0073EA; border-color: #0073EA; color: #fff; }
.ctd-btn.primary:hover:not(:disabled) { background: #0060B9; border-color: #0060B9; }
@media print { .ctd-wrap { display: none !important; } }

/* ══ BIÊN BẢN BÀN GIAO & CAM KẾT TẠM THỜI ═══════════════════════════════════
   Màn điền của public/js/tos/handover.js. Panel gắn thẳng vào <body> nên phải mang
   class .ctx để với tới token DS v2 khai ở đầu file này.

   z-index 11800 — THẤP HƠN .ctm-wrap (12000): bấm "Xem trước" trong panel này sẽ mở
   cửa sổ đọc văn bản, nó phải nằm TRÊN. Để bằng hoặc cao hơn là bản xem trước chui
   xuống dưới và người dùng tưởng nút hỏng. */
.bbp-wrap { position: fixed; inset: 0; z-index: 11800; display: flex; }
.bbp-wrap[hidden] { display: none; }
.bbp-back { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
.bbp-card {
  position: relative; margin: auto; width: min(96vw, 940px); max-height: 94vh;
  display: flex; flex-direction: column;
  background: var(--ct-surface); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-top: 3px solid var(--ct-primary); overflow: hidden;
  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif;
}
.bbp-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex: none;
  border-bottom: 1px solid var(--ct-border); background: var(--ct-surface);
}
.bbp-title { flex: 1; min-width: 0; font-size: 14px; color: var(--ct-text); line-height: 1.4; }
.bbp-title b { display: block; font-weight: 700; }
.bbp-sub { display: block; font-size: 12.5px; color: var(--ct-muted); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbp-x { border: none; background: none; font-size: 18px; line-height: 1; color: var(--ct-muted);
  cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.bbp-x:hover { background: var(--ct-surface-3); color: var(--ct-text); }
.bbp-note { margin: 12px 16px 0; flex: none; }
.bbp-body { overflow: auto; padding: 16px; background: var(--ct-bg); }
/* Chân panel dính đáy: form dài hơn màn hình, nút Lưu mà trôi lên trên thì người điền
   phải cuộn ngược cả trang mới bấm được — đo trên form 22 ô + 2 bảng. */
.bbp-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none;
  padding: 12px 16px; border-top: 1px solid var(--ct-border); background: var(--ct-surface);
}
.bbp-foot .sp { flex: 1; }
body.bbp-open { overflow: hidden; }

/* Thanh "Lấy từ Chương trình đề xuất" đặt trong nhóm bảng thiết bị. */
.ctx .bbp-sync { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.ctx .bbp-synchint { font-size: 12px; color: var(--ct-muted); line-height: 1.45; flex: 1; min-width: 220px; }

/* Dòng "hạng mục khác" — ô nhập nằm THẲNG trong bảng nên phải bỏ viền kép và ghim
   bề rộng ô ĐVT, nếu không ô 2 ký tự chiếm bằng cột Hạng mục. */
.ctx .ctf-tbl tr.ctf-oth td { background: var(--ct-surface-2); }
.ctx .ctf-tbl tr.ctf-oth .ctf-in { padding: 6px 10px; font-size: 13px; }
.ctx .ctf-oth-unit { max-width: 92px; }

/* Dải "Tổng giá trị bàn giao (A + B)" — con số sắp in ra tờ giấy đem ký, nên để đậm
   và có nền riêng, không lẫn vào hai bảng bên trên. */
.ctx .ctf-grand {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 8px;
  background: var(--ct-primary-soft); border: 1px solid #BBD9FE;
}
.ctx .ctf-grand span { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: #14418A; }
.ctx .ctf-grand b { font-size: 20px; font-weight: 800; color: #14418A;
  font-variant-numeric: tabular-nums; }
.ctx .ctf-grand i { flex-basis: 100%; font-style: normal; font-size: 12.5px; color: #14418A; }

@media print { .bbp-wrap { display: none !important; } }

/* ══ BIÊN BẢN — phía SALE (js/tos/handover-sale.js) ═════════════════════════
   Hai chỗ dùng: khối trong modal "Sửa visit" (#ws-handover-body) và ruột 2 thẻ ở
   Bàn làm việc (#blv-ct-body / #blv-hd-body). Cả hai đều NGOÀI .ctx nên không với
   tới token --ct-* khai ở đầu file → màu ghi thẳng, đúng bộ status của DS v2
   (primary #0073EA · done #00C875 · working #FDAB3D · stuck #E2445C).
   Radius 4/8/99 · thang spacing 4px · số tabular-nums. */
.hds-box {
  border: 1px solid #E6E9EF; border-radius: 8px; background: #fff; padding: 16px;
  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif;
  color: #323338;
}
.hds-t { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: #676879; }
.hds-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.hds-sub { font-size: 12.5px; color: #676879; line-height: 1.5; margin-top: 4px; }
.hds-note { font-size: 12.5px; line-height: 1.5; margin-top: 8px; padding: 8px 12px;
  border-radius: 8px; background: #E9F2FF; border: 1px solid #BBD9FE; color: #14418A; }
.hds-note.bad { background: #FCE8EB; border-color: #F5C2CB; color: #9B1F31; }
.hds-pill { display: inline-block; padding: 2px 10px; border-radius: 99px;
  font-size: 11px; font-weight: 700; white-space: nowrap; }
.hds-clock { font-size: 12px; font-weight: 700; color: #676879; font-variant-numeric: tabular-nums; }
.hds-clock.warn { color: #B4730F; }
.hds-clock.bad { color: #E2445C; }
.hds-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.hds-in { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid #D0D4E4;
  border-radius: 4px; font: inherit; font-size: 13px; color: #323338; background: #fff; }
.hds-in:focus { outline: none; border-color: #0073EA; box-shadow: 0 0 0 3px rgba(0,115,234,.3); }
.hds-btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 8px 14px; border-radius: 8px; border: 1px solid #D0D4E4; background: #fff;
  font: inherit; font-size: 13px; font-weight: 700; color: #323338; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.hds-btn:hover:not(:disabled) { background: #F5F6F8; }
.hds-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,115,234,.3); }
.hds-btn:disabled { opacity: .5; cursor: not-allowed; }
.hds-btn.pri { background: #0073EA; border-color: #0073EA; color: #fff; }
.hds-btn.pri:hover:not(:disabled) { background: #0060B9; border-color: #0060B9; }
.hds-btn.ok { background: #fff; border-color: #00C875; color: #018F55; }
.hds-btn.ok:hover:not(:disabled) { background: #E5F9F0; }
.hds-btn.warn { background: #fff; border-color: #E2445C; color: #E2445C; }
.hds-btn.warn:hover:not(:disabled) { background: #FCE8EB; }
.hds-load, .hds-empty { font-size: 12.5px; color: #676879; line-height: 1.55; padding: 12px 0; }

/* Ruột 2 thẻ ở Bàn làm việc — mỗi outlet một dòng, không kẻ khung nặng. */
.hds-list { display: flex; flex-direction: column; gap: 8px; }
.hds-row { border: 1px solid #E6E9EF; border-left: 3px solid #0073EA; border-radius: 8px;
  padding: 10px 12px; background: #fff; }
.hds-row-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: #323338; }
.hds-row .hds-acts { margin-top: 8px; }
.hds-row .hds-btn { padding: 6px 12px; font-size: 12px; }

/* ══ BIÊN BẢN — hộp yêu cầu Sale gửi, trong tab Hợp đồng của Trade OS ═══════
   Khối này CÓ class .ctx nên dùng được token --ct-*. */
.ctx.bb-reqbox { margin-bottom: 12px; }
.ctx .bb-rq-load, .ctx .bb-rq-empty {
  border: 1px solid var(--ct-border); border-radius: 8px; background: var(--ct-surface);
  padding: 14px 16px; font-size: 12.5px; color: var(--ct-muted); line-height: 1.55;
}
.ctx .bb-rq-hd { display: flex; align-items: center; gap: 8px; font-size: 13px;
  font-weight: 700; color: var(--ct-text); margin: 0 0 8px; }
.ctx .bb-rq-n { display: inline-block; min-width: 20px; text-align: center; padding: 1px 8px;
  border-radius: 99px; background: var(--ct-stuck); color: #fff; font-size: 11.5px;
  font-weight: 700; font-variant-numeric: tabular-nums; }
.ctx .bb-rq-tb { width: 100%; border-collapse: collapse; font-size: 12.5px;
  background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: 8px; overflow: hidden; }
.ctx .bb-rq-tb th { text-align: left; padding: 8px 12px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: var(--ct-muted);
  background: var(--ct-surface-2); border-bottom: 1px solid var(--ct-border); }
.ctx .bb-rq-tb td { padding: 8px 12px; border-bottom: 1px solid var(--ct-border); vertical-align: top; }
.ctx .bb-rq-tb tr:last-child td { border-bottom: none; }
.ctx .bb-rq-tb tbody tr:hover { background: #F4F6FF; }
.ctx .bb-rq-tb .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctx .bb-rq-why { max-width: 260px; color: var(--ct-muted); }