/* ===== CSS TRỤC KHÁCH HÀNG — tách từ cây dev v3.41 (app.css 623–933, mobile.css 352–466) ===== */
/* UI2 23/09 — G7-UI2 (hoà vỏ v4, TGĐ 23/09): hai lượt sửa cơ giới trên TOÀN TỆP này —
   (1) mọi "font-size: Npx" cứng đổi sang var(--fs-xs/sm/md/lg/xl/num) theo thang vỏ v4
   (≤11.5→xs · 12–13.5→sm · 14–15→md · 16→lg · 20→xl · số lớn thẻ→num; 17/18px làm tròn theo
   ngữ cảnh gần nhất, xem UI-DACTA-CRM-V4.md §3 quyết định 4); KHÔNG đổi font-size trong lời
   chú thích (trích dẫn app.css) — chỉ đổi khai báo CSS thật.
   (2) mọi mã hex vàng/cam cứng (#8A5A05 #9a6a00 #FDF7E8 #EBD3A0 #fff2c9 #fff5e6 #fff8f0 #fff0e0
   #ffe49a #fffaf0 #fdf3e3 #f0c47a #92600a #b26a00 và rgba(217,138,0,…) tương đương) đổi sang
   var(--warn) + color-mix(in srgb, var(--warn) 12%, #fff) [nền] · 40% transparent [viền] ·
   70% var(--ink) [chữ] (quyết định 6); giữ nguyên var(--danger)/var(--success)/var(--primary*). */
.cs-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cs-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.cs-bar input { min-width: 230px; }
.cs-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-ok { color: var(--success); font-weight: 600; }
.cs-thieu { color: var(--danger); font-weight: 600; }
/* Ba nhánh ngoại lệ bàn giao — màu KHÁC NHAU vì chúng cần xử lý khác nhau, không phải để cho đẹp:
   a = chưa có tiền (chặn bàn giao) · b = tiền đã về, chờ chứng từ · c = tiền đủ, khách xin dời. */
.cs-nl { display: inline-block; padding: 2px 8px; border-radius: 11px; font-size: var(--fs-sm); font-weight: 600; border: 1px solid; }
.cs-nl-a { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 36%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.cs-nl-b { color: color-mix(in srgb, var(--warn) 70%, var(--ink)); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 12%, #fff); }
.cs-nl-c { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 34%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.cs-tt { display: inline-block; padding: 2px 8px; border-radius: 11px; font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--line); background: var(--primary-soft); }
.cs-tt-nhap { color: var(--ink-3); }
.cs-tt-daDoiChieu, .cs-tt-dangXuLy { color: color-mix(in srgb, var(--warn) 70%, var(--ink)); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 12%, #fff); }
.cs-tt-daPhatHanh, .cs-tt-daGiaiNgan { color: var(--success); border-color: color-mix(in srgb, var(--success) 34%, transparent); background: color-mix(in srgb, var(--success) 8%, transparent); }
.cs-tt-huy, .cs-tt-tuChoi { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 36%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); text-decoration: line-through; }
.cs-ul { margin: 4px 0 0 18px; }
.cs-ul li { margin: 3px 0; font-size: var(--fs-sm); }
.cs-hd { display: flex; gap: 22px; flex-wrap: wrap; padding: 10px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.cs-ck { display: block; margin: 4px 0; font-size: var(--fs-sm); cursor: pointer; }
.cs-ck input { margin-right: 6px; }
/* Ô trường bị khoá vì phân quyền — trông rõ là "không xem được", KHÔNG trông như ô trống chờ nhập. */
.cs-khoa { padding: 7px 9px; border: 1px dashed var(--line); border-radius: 6px; color: var(--ink-3); font-size: var(--fs-sm); background: var(--primary-soft); }

/* v3.25 — phạm vi "cần-mới-được-biết" trên trang Khách hàng */
.cs-pv { margin: 8px 0 10px; padding: 8px 10px; border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent); border-radius: 0 4px 4px 0; font-size: var(--fs-sm); line-height: 1.55; }
/* .card b mặc định 22px + display:block (dòng 42) — trong băng phạm vi phải trả về chữ thường */
.cs-pv b { font-size: inherit; display: inline; font-weight: 700; }
.cs-pv .hint { margin-top: 4px; display: block; }
.cs-cd { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--primary) 12%, transparent); white-space: nowrap; }
.cs-cd-off { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-3); }
/* Dòng căn ngoài phạm vi công đoạn của khối — mờ đi nhưng KHÔNG giấu, để người dùng biết
   căn đó tồn tại và hiểu vì sao mình không mở được. */
tr.cs-mo > td { opacity: .62; }
tr.cs-mo:hover > td { opacity: .85; }

/* v3.27 — dải ảnh hiện trạng bàn giao trong tab Khách hàng (bản để-bàn).
   Ảnh chụp từ điện thoại, xem lại trên máy tính; bấm mở ảnh gốc ở tab mới. */
/* ---------- v3.30 — BẢNG HÀNH TRÌNH KHÁCH HÀNG (bảy ô từ trái qua phải) ---------- */
/* Cuộn NGANG trong hộp của nó, không đẩy cả trang trượt ngang. Cột hẹp cố định để bảy giai
   đoạn luôn đứng cạnh nhau theo đúng thứ tự thời gian — đó là toàn bộ ý nghĩa của bảng này. */
/* UI2 23/09 — GỠ: ".cs-bang { display:flex; … }" (khung cuộn ngang bảy ô của bố cục v3.30 cũ) TRÙNG
   TÊN với ".cs-bang" MỚI trong hợp đồng G7-UI2 (bảng dữ liệu CRM chuẩn, <table class="cs-bang">
   — xem UI-DACTA-CRM-V4.md §3 hợp đồng lớp "Bảng"); display:flex trên một <table> sẽ vỡ layout
   bảng. Đã soát: KHÔNG còn chỗ nào trong js/*.js phát ra class="cs-bang" trần (bố cục hành trình
   khách hàng hiện dùng PA·3 .cs3-*, xem ui-khachhang.js) nên gỡ AN TOÀN, không mất kiểu đang dùng.
   Quy tắc MỚI cho ".cs-bang" (bảng dữ liệu) đặt ở khối "LỚP MỚI theo hợp đồng" cuối tệp. */
.cs-cot { flex: 0 0 232px; display: flex; flex-direction: column; background: var(--primary-soft);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cs-cot.rong { opacity: .62; }
.cs-cot-h { padding: 9px 10px 8px; background: #fff; border-bottom: 1px solid var(--line); }
/* Vạch tiến trình: đậm dần từ trái sang phải để mắt đọc được chiều đi mà không cần bảy màu. */
.cs-cot-h { border-top: 3px solid var(--brand); }
.cs-cot:nth-child(1) .cs-cot-h { border-top-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.cs-cot:nth-child(2) .cs-cot-h { border-top-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.cs-cot:nth-child(3) .cs-cot-h { border-top-color: color-mix(in srgb, var(--brand) 48%, transparent); }
.cs-cot:nth-child(4) .cs-cot-h { border-top-color: color-mix(in srgb, var(--brand) 62%, transparent); }
.cs-cot:nth-child(5) .cs-cot-h { border-top-color: color-mix(in srgb, var(--brand) 78%, transparent); }
.cs-cot:nth-child(6) .cs-cot-h { border-top-color: var(--brand); }
.cs-cot:nth-child(7) .cs-cot-h { border-top-color: var(--success); }
.cs-cot-t { font-weight: 800; font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; }
.cs-dem { margin-left: auto; font-variant-numeric: tabular-nums; background: var(--primary-soft);
  border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; font-size: var(--fs-sm); font-weight: 700; }
.cs-cot-m { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.35; margin-top: 3px; }
.cs-cot-k { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* UI2 23/09 — ĐỔI TÊN: ".cs-khoi" (chip "khối phụ trách" trên thẻ hành trình/bước) TRÙNG TÊN với
   lớp ".cs-khoi" MỚI trong hợp đồng G7-UI2 (khối NỘI DUNG thay ".card", xem UI-DACTA-CRM-V4.md §3
   quyết định 2) — nếu giữ tên cũ, quy tắc mới (nền trắng/viền/bo 8px/đệm 12px/margin-bottom 12px)
   sẽ đè lên chip nhỏ này qua cascade và làm vỡ layout. Đổi chip cũ sang ".cs-khoi-tag" (KIỂU GIỮ
   NGUYÊN, chỉ đổi tên) — NGOÀI VÙNG: js/ui-khachhang.js còn nhiều chỗ <span class="cs-khoi"> /
   "cs-khoi toi"> (grep `<span class="cs-khoi` — số dòng đổi liên tục vì thợ JS đang sửa song
   song) cần đổi theo sang "cs-khoi-tag" — báo Opus 4.8 (thợ JS)/Fable trước khi tích hợp. */
.cs-khoi-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 1px 6px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--primary-soft); color: var(--ink-3); }
.cs-khoi-tag.toi { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.cs-cot-b { padding: 8px; display: flex; flex-direction: column; gap: 7px; max-height: 62vh; overflow-y: auto; }
.cs-cot-rong { font-size: var(--fs-sm); color: var(--ink-3); text-align: center; padding: 12px 4px; }

.cs-the { background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 9px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.cs-the:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(0, 0, 0, .07); }
.cs-the.mo { opacity: .55; cursor: default; }
.cs-the.mo:hover { border-color: var(--line); box-shadow: none; }
.cs-the-t { font-weight: 700; font-size: var(--fs-sm); line-height: 1.25; }
.cs-the-c { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 1px; font-weight: 600; }
.cs-the-s { font-size: var(--fs-xs); margin-top: 5px; line-height: 1.4; }
.cs-the-s .hint { font-size: var(--fs-xs); }
/* v3.31 — thẻ đang nằm ở bàn KHỐI MÌNH: viền cam + dòng việc. Sự bàn giao giữa các khối phải
   nhìn thấy được ngay trên bảng, không cần mở từng thẻ. */
.cs-the.luot { border-color: var(--warn); box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); }
.cs-luot { margin-top: 6px; font-size: var(--fs-xs); font-weight: 700; color: color-mix(in srgb, var(--warn) 70%, var(--ink));
  background: color-mix(in srgb, var(--warn) 12%, #fff); border-radius: 6px; padding: 3px 7px; line-height: 1.35; }

/* v3.30 — nút "‹ Quay lại" đứng đầu mọi hàng tab (thanh tab chính và tab con trục Khách hàng).
   Để MỜ chứ không ẩn khi chưa có gì để quay về: nút nhảy chỗ mỗi lần đổi tab còn khó dùng hơn. */
.nav-back { font-weight: 700; font-size: var(--fs-sm); padding: 5px 10px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: var(--link); cursor: pointer; flex: 0 0 auto; }
.nav-back:hover:not([disabled]) { border-color: var(--brand); color: var(--brand); }
.nav-back[disabled] { opacity: .38; cursor: default; }

/* ---------- Bảng "trọn một quy trình" trong hộp thoại ---------- */
/* .dlg-b là lưới HAI CỘT (dòng ~163) — mọi thứ thả vào đó tự chia đôi. Một QUY TRÌNH thì phải
   đọc thành một mạch dọc, nên ba khối này chiếm trọn bề ngang. */
.cs-ht-hd, .cs-ht-thanh, .cs-buoc { grid-column: 1 / -1; }
.cs-ht-hd { padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.cs-ht-thanh { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin: 10px 0 14px; }
/* Ô ngang = TAB bấm được. Ô ĐANG MỞ tô đậm; ô đã qua có dấu ✔ và chữ xanh; chấm • đánh dấu
   giai đoạn THẬT của căn (có thể khác ô đang mở, vì người dùng bấm xem bước nào cũng được). */
.cs-ht-o { font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--primary-soft); color: var(--ink-3); white-space: nowrap;
  cursor: pointer; font-family: inherit; transition: border-color .12s, color .12s; }
.cs-ht-o:hover { border-color: var(--brand); color: var(--brand); }
.cs-ht-o.xong { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.cs-ht-o.mo { border-color: var(--brand); background: var(--brand); color: #fff; }
.cs-ht-o.mo:hover { color: #fff; }
.cs-ht-now { opacity: .8; }
.cs-ht-mui { color: var(--ink-3); font-weight: 700; }

/* Thân MỘT giai đoạn */
.cs-gd { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; background: #fff; }
.cs-gd-h { font-family: inherit; font-weight: 800; font-size: var(--fs-lg); margin-bottom: 8px; }
.cs-gd-mt { font-size: var(--fs-md); color: var(--ink-2); background: var(--primary-soft); border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0; padding: 8px 12px; margin-bottom: 10px; }
.cs-gd-so { font-size: var(--fs-md); font-weight: 700; margin: 4px 0 10px; }
.cs-gd-k { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* v3.31 — hàng "nhãn : giá trị" trong panel bước (mỗi bước hiện nội dung của chính nó) */
.cs-gd-r { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-md); }
.cs-gd-r:last-child { border-bottom: 0; }
.cs-gd-n { flex: 0 0 132px; color: var(--ink-3); font-size: var(--fs-sm); padding-top: 1px; }
.cs-gd-v { flex: 1; min-width: 0; }
/* nút chuyển tiếp ở chân hộp + trạng thái CHỜ (chưa đủ điều kiện) */
.cs-tiep { font-weight: 800; }
.cs-cho { display: inline-flex; align-items: center; font-size: var(--fs-sm); font-weight: 600; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 8px; padding: 7px 12px; }
.cs-ht-nhac { font-size: var(--fs-sm); color: var(--ink-3); background: var(--primary-soft); border-radius: 8px; padding: 7px 11px; margin-top: 10px; }
.cuon-ngang { overflow-x: auto; }
table.cs-dot { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 460px; }
table.cs-dot th { background: var(--primary-soft); text-align: left; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-3); padding: 7px 10px; border-bottom: 1px solid var(--line); }
table.cs-dot td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }

.cs-buoc { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.cs-buoc-i { flex: 0 0 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-sm); font-weight: 800; border: 1.5px solid var(--line); color: var(--ink-3); }
.cs-buoc.xong .cs-buoc-i { border-color: var(--success); color: #fff; background: var(--success); }
.cs-buoc.dang .cs-buoc-i { border-color: var(--brand); color: var(--brand); }
.cs-buoc.chua { opacity: .68; }
.cs-buoc-n { min-width: 0; flex: 1; }
.cs-buoc-t { font-weight: 700; font-size: var(--fs-sm); }
.cs-dang { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); border: 1px solid var(--brand);
  border-radius: 9px; padding: 0 6px; margin-left: 4px; }
.cs-buoc-th { font-size: var(--fs-sm); color: var(--danger); margin-top: 4px; font-weight: 600; }
.cs-buoc-k { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.cs-anh { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.cs-anh img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); display: block; background: var(--primary-soft); }
.cs-anh a:hover img { border-color: var(--brand); }
.cs-canh { border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-weight: 600;
  background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.cs-canh.nhe { background: color-mix(in srgb, var(--warn) 12%, #fff); color: color-mix(in srgb, var(--warn) 70%, var(--ink)); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* ============================================================
   v3.33 — HÀNH TRÌNH KHÁCH HÀNG bố cục PA·3 (TGĐ chốt 25/08):
   mục lục dọc trái theo chặng + vùng phải C·2 bảng sổ / C·3 hàng tiến trình.
   Dùng biến theme (--brand đổi giữa đỏ/navy) — không nền cứng.
   ============================================================ */
.cs3 { display: flex; align-items: stretch; min-height: 340px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cs3-trai { width: 232px; flex: none; border-right: 1px solid var(--line); padding: 10px 8px 12px; background: var(--primary-soft); }
.cs3-nhom { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 12px 8px 4px; }
.cs3-nhom:first-child { margin-top: 0; }
.cs3-muc { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.cs3-muc:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.cs3-muc.on { background: var(--brand); color: #fff; }
.cs3-dem { margin-left: auto; font-size: var(--fs-xs); background: color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.cs3-muc.on .cs3-dem { background: rgba(255, 255, 255, .25); color: #fff; }
.cs3-canh { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); flex: none; }
.cs3-muc.on .cs3-canh { background: #fff; }
.cs3-phai { flex: 1; min-width: 0; padding: 10px 14px 14px; }
.cs3-dau { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cs3-khoi { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cs3-kieu { margin-left: auto; display: inline-flex; gap: 4px; }
.cs3-kieu button { font-size: var(--fs-sm); padding: 3px 10px; }

/* C·2 — bảng sổ */
.cs-b2 { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: 8px; }
.cs-b2 th { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 7px 8px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.cs-b2 td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cs-b2 tbody tr { cursor: pointer; }
.cs-b2 tbody tr:hover td { background: var(--primary-soft); }
.cs-b2 tbody tr.luot td { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.cs-b2 .kten { font-weight: 700; white-space: nowrap; }
.cs-b2 .kcan { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.cs-b2 .cs-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-b2 tfoot td { border-top: 2px solid var(--line); padding: 8px; }
.cs-up-do td { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.cs-up-vang { color: color-mix(in srgb, var(--warn) 70%, var(--ink)); font-size: var(--fs-sm); }

/* C·3 — hàng hồ sơ + dải đợt */
.cs3-ds { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cs3-hang { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; cursor: pointer; background: #fff; }
.cs3-hang:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.cs3-hang.luot { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.cs3-hang.mo { opacity: .6; }
.cs3-ht { width: 195px; flex: none; }
.cs3-ht .ten { font-weight: 700; font-size: var(--fs-sm); }
.cs3-hg { flex: 1; min-width: 0; }
.cs3-hp { flex: none; max-width: 300px; text-align: right; font-size: var(--fs-sm); }
.cs3-so { font-weight: 800; font-variant-numeric: tabular-nums; }
.cs3-day { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cs3-dot { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px 2px 4px; white-space: nowrap; }
.cs3-dot i { font-style: normal; width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); background: var(--primary-soft); color: var(--ink-3); }
.cs3-dot.done { border-color: color-mix(in srgb, var(--success) 32%, transparent); color: var(--success); }
.cs3-dot.done i { background: var(--success); color: #fff; }
.cs3-dot.miss { border-color: color-mix(in srgb, var(--danger) 32%, transparent); color: var(--danger); font-weight: 700; }
.cs3-dot.miss i { background: var(--danger); color: #fff; }
.cs3-tt { font-size: var(--fs-sm); }

/* chip nhắc dùng chung */
.cs-chip { display: inline-block; font-size: var(--fs-xs); font-weight: 700; border-radius: 999px; padding: 1px 8px; margin-left: 5px; }
.cs-chip.do { background: color-mix(in srgb, var(--danger) 9%, transparent); color: var(--danger); }
.cs-chip.cam { background: color-mix(in srgb, var(--warn) 12%, #fff); color: color-mix(in srgb, var(--warn) 70%, var(--ink)); }

@media (max-width: 860px) {
  .cs3 { flex-direction: column; }
  .cs3-trai { width: auto; border-right: none; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 2px; }
  .cs3-nhom { flex-basis: 100%; margin: 6px 6px 2px; }
  .cs3-hang { flex-wrap: wrap; }
  .cs3-hp { text-align: left; }
}

/* v3.33 — bộ tìm khách/căn chính xác khi RÁP CĂN + tiêu đề cột sắp xếp được + STT */
.cs-kp-ds { max-height: 210px; overflow: auto; }
.cs-kp-o { padding: 6px 9px; border: 1px solid var(--line); border-top: none; cursor: pointer; font-size: var(--fs-sm); background: #fff; }
.cs-kp-o:first-child { border-top: 1px solid var(--line); border-radius: 6px 6px 0 0; }
.cs-kp-o:last-child { border-radius: 0 0 6px 6px; }
.cs-kp-o:hover { background: var(--primary-soft); }
.cs-kp-bo { font-size: var(--fs-xs); padding: 1px 7px; }
.th-sx { cursor: pointer; user-select: none; white-space: nowrap; }

/* v3.39 — bảng chọn Xuất phiếu Đặt cọc (3 form Word) */
.cs-dcflow { font-size: var(--fs-sm); color: var(--ink-2); background: var(--primary-soft); border-radius: 8px; padding: 9px 11px; margin-bottom: 12px; line-height: 1.5; }
.cs-dclist { display: flex; flex-direction: column; gap: 9px; }
.cs-dcform { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; }
.cs-dcform:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.cs-dcform.sau { opacity: .82; }
.cs-dcform.sau:hover { opacity: 1; }
.cs-dcic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xl); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.cs-dctx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-dctx b { font-size: var(--fs-md); }
.cs-dctx small { font-size: var(--fs-sm); color: var(--ink-3); }
.cs-dcgo { flex: 0 0 auto; color: var(--brand); font-size: var(--fs-xl); font-weight: 700; }
.cs-dcform[disabled] { opacity: .55; cursor: default; }

/* v3.39 — bản xem trước + sửa phiếu (kiểm tra trước khi in) */
.cs-pdc-canh { background: color-mix(in srgb, var(--warn) 12%, #fff); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); color: color-mix(in srgb, var(--warn) 70%, var(--ink)); border-radius: 8px; padding: 9px 11px; margin-bottom: 11px; font-size: var(--fs-sm); }
.cs-pdc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
@media (max-width: 640px) { .cs-pdc-grid { grid-template-columns: 1fr; } }
.cs-pdc-o { display: flex; flex-direction: column; gap: 3px; }
.cs-pdc-nhan { font-size: var(--fs-sm); color: var(--ink-2); }
.cs-pdc-da { color: color-mix(in srgb, var(--warn) 70%, var(--ink)); font-style: normal; font-size: var(--fs-xs); font-weight: 700; }
.cs-pdc-in { border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font-size: var(--fs-sm); font-family: inherit; background: #fff; }
.cs-pdc-in.tien { text-align: right; font-variant-numeric: tabular-nums; }
.cs-pdc-in.doi { border-color: var(--brand); background: color-mix(in srgb, var(--warn) 8%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 15%, transparent); }
.cs-pdc-ls { margin-top: 12px; }
.cs-pdc-ls > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--primary); }
.cs-pdc-lslist { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.cs-pdc-lg { font-size: var(--fs-sm); border-left: 3px solid var(--line); padding: 3px 0 3px 9px; }
.cs-pdc-lg .cu { color: var(--ink-3); text-decoration: line-through; }
.cs-pdc-lg .moi { color: var(--success); font-weight: 700; }
/* v3.39b — dựng CẢ FORM đã điền trong app (xem tổng thể + sửa tại chỗ) */
.cs-pdc-note { font-size: var(--fs-sm); color: var(--ink-2); background: var(--primary-soft); border-radius: 8px; padding: 9px 11px; margin-bottom: 11px; line-height: 1.5; }
.cs-pdc-vd { background: color-mix(in srgb, var(--warn) 12%, #fff); padding: 0 4px; border-radius: 3px; font-weight: 700; }
.pdc-doc { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px 26px; max-height: 62vh; overflow: auto; font-family: 'Times New Roman', 'Times', serif; font-size: var(--fs-sm); color: #111; line-height: 1.55; }
.pdc-doc p { margin: 5px 0; }
.pdc-doc .pdc-p.giua { text-align: center; }
.pdc-doc .pdc-p.dam { font-weight: 700; }
.pdc-doc .pdc-tbl { border-collapse: collapse; width: 100%; margin: 9px 0; }
.pdc-doc .pdc-tbl td { border: 1px solid #444; padding: 5px 8px; vertical-align: top; font-size: var(--fs-sm); }
.pdc-val { background: color-mix(in srgb, var(--warn) 12%, #fff); border-radius: 3px; padding: 0 3px; font-weight: 700; outline: none; cursor: text; }
.pdc-val.tien { white-space: nowrap; }
.pdc-val:focus { background: color-mix(in srgb, var(--warn) 24%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.pdc-val.doi { background: color-mix(in srgb, var(--warn) 18%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 40%, transparent); }
.pdc-val:empty { display: inline-block; min-width: 60px; border-bottom: 1px dashed #aaa; background: color-mix(in srgb, var(--warn) 6%, #fff); }
.pdc-val.trong { background: transparent; }

/* v3.40 — luồng Đặt cọc 4 bước tuần tự có khoá */
.cs-step { display: flex; gap: 11px; padding: 10px 0; border-top: 1px dashed var(--line); }
.cs-step:first-child { border-top: none; }
.cs-step-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); font-weight: 700; }
.cs-step.done .cs-step-ic { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.cs-step.cur .cs-step-ic { background: var(--brand); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.cs-step.lock .cs-step-ic { background: var(--primary-soft); color: var(--ink-3); }
.cs-step-b { flex: 1 1 auto; min-width: 0; }
.cs-step-t { font-size: var(--fs-sm); color: var(--ink); }
.cs-step.lock .cs-step-t { color: var(--ink-3); }
.cs-step.cur .cs-step-t { font-weight: 600; }
.cs-step-a { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: var(--fs-sm); color: var(--ink-3); }
.cs-step-x { margin-top: 5px; font-size: var(--fs-sm); }
.cs-step-x.cs-ok { color: var(--success); }
.th-sx:hover { color: var(--brand); }
.cs3-stt { flex: none; width: 26px; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }

/* v3.34 — phiếu đề nghị theo biểu mẫu Kế toán + khu chữ ký số */
.px-to { font-family: 'Times New Roman', serif; font-size: var(--fs-sm); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; background: #fff; color: #111; }
.px-to > div { margin: 3px 0; }
.px-tieude { text-align: center; font-size: var(--fs-lg); font-weight: 800; margin: 6px 0 10px; }
.px-bang { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: var(--fs-sm); }
.px-bang td, .px-bang th { border: 1px solid #333; padding: 4px 8px; }
.px-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.px-kykhu { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.px-oky { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; text-align: center; min-width: 128px; flex: 1; background: #fff; }
.px-oky img { height: 46px; max-width: 120px; object-fit: contain; }
.px-oky-t { font-size: var(--fs-xs); font-weight: 700; color: #555; margin-bottom: 4px; }
.px-oky-ten { font-size: var(--fs-sm); font-weight: 700; }
.px-oky.trong { border-style: dashed; }
.px-oky-cho { color: #aaa; font-size: var(--fs-sm); margin: 12px 0; }

/* v3.35 — khối PIC (người phụ trách khách hàng) trong form thêm/sửa khách */
.cs-pic { margin-top: 4px; padding: 9px 12px; background: var(--primary-soft); border-radius: 9px; font-size: var(--fs-sm); }

/* ----- mobile ----- */
.mb-bghead { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 800;
  color: var(--msub); text-transform: none; margin: 16px 2px 8px; }
.mb-bghead span { background: var(--msurf2); border: 1px solid var(--mbd); border-radius: 10px;
  padding: 1px 8px; font-size: var(--fs-sm); }
.mb-bghead.nay { color: var(--mbrand); }
.mb-bghead.tre { color: var(--mred); }
.mb-bghead2 { font-size: var(--fs-md); font-weight: 800; color: var(--mink); margin-bottom: 10px; }

.mb-bgcard { padding: 13px 14px; }
.mb-bgtop { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.mb-bgso { font-size: var(--fs-lg); font-weight: 800; color: var(--mink); letter-spacing: .2px; }
.mb-bgsub { font-size: var(--fs-sm); color: var(--msub); margin-top: 4px; line-height: 1.45; }
.mb-bgsub.loi, .mb-bgcard .loi, .mb-bgrow .loi { color: var(--mred); font-weight: 700; }
.mb-bgrow .ok, .mb-bgps .ok { color: var(--mok); font-weight: 700; }

.mb-bgchip { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 800; padding: 4px 10px; border-radius: 12px;
  border: 1px solid var(--mbd); background: var(--msurf2); color: var(--msub); }
.mb-bgchip.ok { background: color-mix(in srgb, var(--mok) 15%, transparent); color: var(--mok);
  border-color: color-mix(in srgb, var(--mok) 40%, transparent); }
.mb-bgchip.no { background: color-mix(in srgb, var(--mred) 13%, transparent); color: var(--mred);
  border-color: color-mix(in srgb, var(--mred) 38%, transparent); }
.mb-bgchip.nl { background: color-mix(in srgb, var(--mwarn) 16%, transparent); color: var(--mwarn);
  border-color: color-mix(in srgb, var(--mwarn) 42%, transparent); }

.mb-card.ok { border-left: 5px solid var(--mok); }
.mb-bgrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed var(--mline); font-size: var(--fs-sm); color: var(--msub); }
.mb-bgrow:last-child { border-bottom: 0; }
.mb-bgrow b { color: var(--mink); text-align: right; font-weight: 700; }

/* Gọi / nhắn: hai nút cạnh nhau, đủ to để bấm khi đang cầm hồ sơ tay kia */
.mb-bgcall { display: flex; gap: 9px; margin-top: 12px; }
.mb-bgcall .mb-bigbtn { justify-content: center; text-decoration: none; font-weight: 800; }
.mb-bgcall .mb-bigbtn:first-child { flex: 2; }
.mb-bgcall .mb-bigbtn.ph { flex: 1; }

.mb-bgps { border: 1px solid var(--mbd); border-radius: 12px; padding: 11px 12px;
  background: var(--msurf2); margin-bottom: 9px; }
.mb-bgps:last-child { margin-bottom: 0; }
.mb-bgps .mb-bgtop span { font-size: var(--fs-sm); font-weight: 800; }

/* Dải ảnh: ô vuông cuộn ngang — không xuống dòng, để một căn 12 ảnh vẫn gọn một hàng */
.mb-bganh { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch; }
.mb-bganh img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--mbd); display: block; background: var(--msurf2); }
.mb-bganh .o { position: relative; flex: 0 0 auto; }
.mb-bganh .o button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px;
  border-radius: 50%; border: 0; background: var(--mred); color: #fff; font-size: var(--fs-md);
  line-height: 1; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.mb-bganh.sua:empty { display: none; }

.mb-bgnut { display: flex; gap: 9px; margin-top: 10px; }
.mb-bgnut .mb-bigbtn, .mb-bgnut .mb-cta { flex: 1; justify-content: center; text-align: center;
  margin: 0; cursor: pointer; }

.mb-bgcanh { border-radius: 12px; padding: 11px 12px; font-size: var(--fs-sm); line-height: 1.5;
  margin-bottom: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--mred) 12%, transparent); color: var(--mred);
  border: 1px solid color-mix(in srgb, var(--mred) 35%, transparent); }
.mb-bgcanh.nhe { background: color-mix(in srgb, var(--mwarn) 14%, transparent); color: var(--mwarn);
  border-color: color-mix(in srgb, var(--mwarn) 38%, transparent); }

/* Tấm trượt xác nhận — phủ TRONG #mbApp, không phủ cả trang (bản để-bàn vẫn dùng dialog riêng) */
.mb-bgsheet { position: absolute; inset: 0; z-index: 60; display: flex; align-items: flex-end;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.mb-bgbox { width: 100%; max-height: 88%; overflow-y: auto; background: var(--msurf);
  border-radius: 18px 18px 0 0; padding: 18px 16px max(18px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0,0,0,.28); }

/* v3.35 — bảng chọn khi bấm nút ＋ (Thêm việc / Thêm khách). Trượt lên từ đáy, phủ TRONG #mbApp,
   ngay trên thanh dưới nên nút ＋ vẫn thấy được và không xê dịch. */
.mb-sheet-huy:active { background: var(--mbd); }

/* v3.35 — thanh tìm khách (tên · điện thoại · căn cước), dùng ở màn Khách */
#mbApp .mb-search { display: flex; align-items: center; gap: 8px; margin: 2px 2px 12px; padding: 0 12px;
  background: var(--msurf2); border: 1.5px solid var(--mbd); border-radius: 13px; }
#mbApp .mb-search:focus-within { border-color: var(--mbrand); }
#mbApp .mb-search-ic { flex: none; font-size: var(--fs-md); opacity: .7; }
#mbApp .mb-search-inp { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--mink);
  font-size: var(--fs-lg); font-family: inherit; padding: 13px 0; outline: none; }
#mbApp .mb-search-inp::placeholder { color: var(--msub); }
#mbApp .mb-search-x { flex: none; border: 0; background: transparent; color: var(--msub); font-size: var(--fs-md);
  padding: 6px 2px; cursor: pointer; line-height: 1; }

/* v3.35 — gộp thông tin phụ khi thêm khách trên điện thoại (nhập nhanh: chỉ tên + SĐT bắt buộc lộ) */
#mbApp .mb-them { margin: 2px 0 10px; }
#mbApp .mb-them > summary { cursor: pointer; list-style: none; padding: 11px 14px; border-radius: 12px;
  background: var(--msurf); border: 1px solid var(--mbd); color: var(--mbrand); font-weight: 700; font-size: var(--fs-md); }
#mbApp .mb-them > summary::-webkit-details-marker { display: none; }
#mbApp .mb-them > summary::after { content: " ▾"; }
#mbApp .mb-them[open] > summary::after { content: " ▴"; }
#mbApp .mb-them[open] > summary { border-radius: 12px 12px 0 0; }

/* ===== tích hợp 17/09 ===== */
.sk-ok{color:var(--ok,#186b4c)} .sk-canh{color:var(--warn)} .sk-loi{color:var(--danger,#b3261e)}
.cs-ld{display:flex;gap:10px;flex-wrap:wrap} .cs-ldo{flex:1 1 170px;border:1px solid var(--line);border-radius:10px;padding:10px 12px} .cs-ldo-v{font-size:var(--fs-xl);font-weight:700}

/* ===== demo 17/09 đợt 2 (§6.8) — KHÔNG GIAN DỰ ÁN · NHÃN KHÁCH · XEM ĐỦ · ĐÔN ĐỐC ===== */
/* Băng "đang đứng trong dự án nào": người dùng phải đọc được vì sao danh sách trước mắt ngắn
   hơn họ nghĩ — vì đang ở trong một dự án, không phải vì hệ thống mất dữ liệu. */
.cs-da-bang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 10px;
  padding: 8px 10px; border-left: 3px solid var(--brand); background: var(--primary-soft); border-radius: 0 8px 8px 0; }
.cs-da-bang b { font-size: inherit; display: inline; font-weight: 800; }
.cs-da-bang .hint { display: inline; }

/* Thẻ dự án — lưới tự xếp, hẹp cố định để bảy con số giai đoạn đọc được theo cột. */
.cs-da-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.cs-da-the { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff;
  display: flex; flex-direction: column; gap: 6px; }
.cs-da-the:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(0, 0, 0, .07); }
/* Dự án ngoài phân công: mờ nhưng KHÔNG giấu — giấu hẳn là người ta đi hỏi vòng quanh, mà mỗi
   lần hỏi vòng quanh là một lần dữ liệu khách được đọc lên ngoài phần mềm. */
.cs-da-the.mo { opacity: .6; background: var(--primary-soft); }
.cs-da-the.mo:hover { border-color: var(--line); box-shadow: none; }
.cs-da-t { font-weight: 800; font-size: var(--fs-md); line-height: 1.25; }
.cs-da-s { font-size: var(--fs-sm); color: var(--ink-2); }
.cs-da-luoi { display: flex; flex-wrap: wrap; gap: 4px; }
.cs-da-gd { display: inline-flex; align-items: baseline; gap: 4px; font-size: var(--fs-xs); padding: 2px 7px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--primary-soft); }
.cs-da-gd i { font-style: normal; color: var(--ink-3); }
.cs-da-gd b { font-size: var(--fs-sm); display: inline; font-variant-numeric: tabular-nums; }
.cs-da-gd.khong { opacity: .5; }
.cs-da-tien { font-size: var(--fs-sm); }
.cs-da-luot { font-size: var(--fs-xs); font-weight: 700; color: color-mix(in srgb, var(--warn) 70%, var(--ink)); }
.cs-da-nut { margin-top: auto; padding-top: 4px; }

/* Nhãn khách (thân quen · mua sỉ · giới thiệu) — do máy chủ đặt, client chỉ vẽ. Ba màu khác nhau
   vì ba nhãn dẫn tới ba cách chăm sóc khác nhau, không phải để cho đẹp. */
.cs-nhan { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: var(--fs-xs); font-weight: 700;
  border: 1px solid var(--line); background: var(--primary-soft); color: var(--ink-2); white-space: nowrap; }
.cs-nhan-thanQuen { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 34%, transparent); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.cs-nhan-muaSi { color: color-mix(in srgb, var(--warn) 70%, var(--ink)); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 12%, #fff); }
.cs-nhan-gioiThieu { color: var(--success); border-color: color-mix(in srgb, var(--success) 34%, transparent); background: color-mix(in srgb, var(--success) 8%, transparent); }
.cs-mua { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid var(--line); background: var(--primary-soft); }
.cs-mua-daMua { color: var(--success); border-color: color-mix(in srgb, var(--success) 34%, transparent); }
.cs-mua-daHuy { color: var(--danger); text-decoration: line-through; }
.cs-kh-ten { text-decoration: none; }
.cs-kh-ten:hover { text-decoration: underline; }

/* Hồ sơ khách 360° — lưới ô đọc, không phải ô nhập. */
.cs-hs-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; }
.cs-hs-o { border-bottom: 1px dashed var(--line); padding-bottom: 4px; font-size: var(--fs-sm); }
.cs-hs-o .hint { display: block; font-size: var(--fs-xs); }
tr.cs-hs-can { cursor: pointer; }
tr.cs-hs-can:hover { background: var(--primary-soft); }

/* Xem đủ giấy tờ: viền cảnh báo + đồng hồ đếm ngược. Hộp này cố ý KHÔNG trông như phần còn lại
   của hồ sơ — nó là một lần mở cửa có ghi vết, không phải một ô dữ liệu bình thường. */
.cs-xemdu { border: 2px solid var(--warn); border-radius: 10px; padding: 10px 12px; margin-top: 8px;
  background: color-mix(in srgb, var(--warn) 7%, transparent); }
.cs-xemdu-h { font-weight: 800; font-size: var(--fs-sm); margin-bottom: 8px; color: color-mix(in srgb, var(--warn) 70%, var(--ink)); }
.cs-xemdu-h b { font-size: inherit; display: inline; font-variant-numeric: tabular-nums; }

/* Đôn đốc thu tiền — màn trong phần mềm (số điện thoại khách không tải về thành tệp). */
.cs-donDoc tr.cs-dd-qua td { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.cs-dd-den { color: color-mix(in srgb, var(--warn) 70%, var(--ink)); font-weight: 600; }
.cs-donDoc a[href^="tel:"] { font-weight: 700; text-decoration: none; }
.cs-donDoc a[href^="tel:"]:hover { text-decoration: underline; }
.cs-da-ngoai { margin-top: 10px; }
.cs-da-ngoai > summary { cursor: pointer; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-2); padding: 6px 0; }

/* đợt 2 17/09 — màn Biểu mẫu (js/ui-bieumau.js): vỏ app đặt `.card b { font-size:22px; display:block }` cho số
   điều hành; trong màn biểu mẫu chữ đậm chỉ là nhấn mạnh trong câu → trả về cỡ chữ thường, cùng dòng. */
.bm-goc b { font-size: inherit; display: inline; }

/* ============================================================
   demo 17/09 đợt 2 (§11.3) — MÀN BẢNG HÀNG DỰ ÁN (JS-BH).
   Bảng hàng = danh mục sản phẩm (thông số kỹ thuật + giá niêm yết). Hộp nạp dùng lại khung
   .dlg-* và bảng .cs-b2 dùng chung; dưới đây chỉ là phần riêng của màn ánh xạ cột.
   ============================================================ */
/* Lưới ánh xạ cột: mỗi trường hệ thống một ô chọn cột. Tự xuống hàng ở màn hẹp. */
.cs-bh-anhxa { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 12px; margin: 6px 0 12px; }
.cs-bh-ax { display: flex; flex-direction: column; gap: 3px; }
.cs-bh-ax label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.cs-bh-ax select { width: 100%; }
/* Chip "giữ giá" cạnh kết quả một dòng căn đã cọc/ký — nói rõ bảng hàng KHÔNG đè giá đã thoả thuận. */
.cs-bh-giu { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 1px 7px; border-radius: 10px;
  color: color-mix(in srgb, var(--warn) 70%, var(--ink)); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
/* Dòng lỗi trong bảng xem trước — không nạp. */
tr.cs-bh-loi td { background: color-mix(in srgb, var(--danger) 6%, transparent); }
/* Bảng tổng hợp theo tòa + lịch sử nạp: dùng nền tiêu đề mềm cho dễ đọc trên màn rộng. */
table.cs-bh-tom th, table.cs-bh-ls th { background: var(--primary-soft); text-align: left; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); padding: 7px 10px; border-bottom: 1px solid var(--line); }
table.cs-bh-tom td, table.cs-bh-ls td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* đợt 2 — chữ đậm trong câu chú thích (.hint) của mọi thẻ trục Khách hàng: vỏ đặt `.card b` 22px/block cho
   số điều hành, nhưng trong .hint chữ đậm chỉ là nhấn mạnh → trả về cỡ thường, cùng dòng (màn Bảng hàng, Biểu mẫu…). */
.card .hint b { font-size: inherit; display: inline; }

/* ============================================================
   G7-CSS 23/09 — KIỂU CHO TRỤC KHÁCH HÀNG (chỉ tệp này).
   Gồm: (1) kiểu còn thiếu cho lớp G4b/G7-A JS đã dùng (Hồ sơ vay·giải ngân, sổ giao dịch, KPI gọn),
   (2) lớp hợp đồng mới cho điều hướng nhóm + lọc/phân trang. Dùng biến theme sẵn có trong tệp
   (--primary · --brand · --line · --ink-* · --danger · --success · --warn · --primary-soft, color-mix) — không
   thêm mã màu cứng mới ngoài các mã hex đã dùng trong tệp này (vd #fff cho nền thẻ).
   ============================================================ */

/* UI2 23/09 — GỠ điều hướng nhóm cũ ".cs-nhom-tabs/.cs-nhom/.cs-nhom-h/.cs-nhom-b" (5 hàng dọc,
   L4/S2 trong UI-DACTA-CRM-V4.md) — JS không còn dùng theo quyết định thiết kế §3.1: điều hướng
   CRM nay hai tầng NGANG kế thừa ".nav-la" có sẵn của vỏ v4 (cùng kiểu tab "Quy trình"), xem khối
   ".cs-nav" ở phần "LỚP MỚI theo hợp đồng" cuối tệp. NGOÀI VÙNG: js/ui-khachhang.js còn phát ra
   markup "cs-nhom-tabs/cs-nhom/cs-nhom-h/cs-nhom-b" (dòng ~157–167) — thợ JS (Opus 4.8) cần đổi
   sang <nav class="cs-nav"><div class="nav-la cs-nav-nhom">…</div><div class="nav-la cs-nav-man">…
   </div></nav> theo đúng hợp đồng; tới lúc đó nav CRM tạm KHÔNG có kiểu (ngoaiVung, không phải lỗi
   CSS — hai gói JS/CSS chạy song song theo phân vùng §4). */

/* ---- Lọc/phân trang dùng chung cho các màn danh sách trục Khách hàng. ---- */
.cs-loc-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 10px; }
.cs-loc-bar input, .cs-loc-bar select { min-width: 180px; }
.cs-phan-trang { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: var(--fs-sm); color: var(--ink-3); }
.cs-phan-trang b { font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---- G7-A (§16.3.5) — KPI gọn một hàng (js/kh-ui-saoke.js: .cs-kpi-gon/.cs-kpi-o/.cs-kpi-nhan). ---- */
.cs-kpi-gon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cs-kpi-gon .ghost { margin-left: auto; }
.cs-kpi-o, .cs-kpi-gon-o { display: inline-flex; align-items: baseline; gap: 4px; font-size: var(--fs-sm); }
.cs-kpi-o b, .cs-kpi-gon-o b { font-variant-numeric: tabular-nums; }
.cs-kpi-nhan { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---- G4b (§16.3.1–.4) — Hồ sơ vay & giải ngân (js/ui-khachhang.js: csManVay/csVayKhoi/csVayDotThan). ---- */
.cs-bang-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-bang-cuon table { min-width: max-content; }
table.cs-vay-cho, table.cs-vay-dot, table.cs-vay-bang { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.cs-vay-cho { min-width: 760px; }
table.cs-vay-dot { min-width: 680px; }
table.cs-vay-bang { min-width: 620px; }
table.cs-vay-cho th, table.cs-vay-dot th, table.cs-vay-bang th {
  background: var(--primary-soft); text-align: left; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-3); padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.cs-vay-cho td, table.cs-vay-dot td, table.cs-vay-bang td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Thẻ ngân hàng/hợp đồng/hạn mức của một hồ sơ vay: lưới hàng "nhãn : giá trị" (.cs-gd-r sẵn có)
   xếp 2 cột ở màn rộng để đọc nhanh, gãy về 1 cột khi màn hẹp (điện thoại) mới đủ chỗ cho nhãn. */
.cs-vay-the { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-bottom: 6px; }
@media (max-width: 760px) { .cs-vay-the { grid-template-columns: 1fr; } }
.cs-vay-tong td { border-top: 2px solid var(--line); background: var(--primary-soft); font-weight: 700; }
.cs-vay-khoi { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 10px 0; background: #fff; }
.cs-vay-nk { margin-top: 8px; }
.cs-vay-nk > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--primary); }
/* Chip "đủ"/"đã quyết miễn" — biến thể xanh còn thiếu (do/cam đã có ở trên); + xám cho ghi chú mềm
   "khác lịch CRM" khi tệp nạp lệch ngày/số với CRM nhưng không phải lỗi cần chặn. */
.cs-chip.xanh { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); }
.cs-chip-xam, .cs-chip.xam { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-3); }

/* ---- G7-A (§16.3.5 · MONEY-02) — sổ giao dịch (js/kh-ui-saoke.js). ---- */
.sk-mota { white-space: normal; overflow-wrap: anywhere; word-break: break-word; max-width: 48ch; }
.sk-tien { font-variant-numeric: tabular-nums; font-weight: 600; }
.sk-ungvien { display: flex; flex-direction: column; gap: 6px; }
.sk-ungvien-hang { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sk-ungvien-mt { flex: 1 1 auto; min-width: 0; }
.sk-ungvien-nut { min-width: 120px; min-height: 40px; white-space: nowrap; }
.sk-daghi { margin: 10px 0; }
/* Dòng đã đảo (giao dịch bị đảo/huỷ) làm mờ để phân biệt với dòng còn hiệu lực, KHÔNG ẩn — vẫn
   phải đọc được số cũ khi cần đối chiếu. JS thực tế gắn lớp .sk-daghi-dao lên <tr>; giữ thêm bí
   danh .sk-dao để khớp đúng tên nêu trong đặc tả nếu có chỗ dùng lớp ngắn này. */
tr.sk-daghi-dao, tr.sk-dao { opacity: .55; }
tr.sk-daghi-dao .sk-tien, tr.sk-dao .sk-tien { text-decoration: line-through; }

@media (max-width: 1024px) {
  /* 761–1024px (Fold mở, mô phỏng ~884×900): bảng vẫn giữ MỘT hàng tiêu đề, không xuống dòng —
     phần tràn do .cs-bang-cuon cuộn ngang lo, không phải do tiêu đề gãy dòng làm bảng cao lên.
     .cs-vay-the vẫn 2 cột ở khoảng này, chỉ gãy 1 cột dưới 760px (điện thoại thật sự hẹp). */
  table.cs-vay-cho th, table.cs-vay-dot th, table.cs-vay-bang th { white-space: nowrap; }
  .cs-loc-bar input, .cs-loc-bar select { min-width: 150px; }
}

/* ============================================================
   UI2 23/09 — G7-UI2 LỚP MỚI THEO HỢP ĐỒNG (hoà vỏ v4, UI-DACTA-CRM-V4.md §3 quyết định 1–6).
   Gốc CRM luôn bọc trong .cs-goc (container query cho bảng/nav gọn theo khu giữa, KHÔNG theo màn
   hình — khu giữa v4 có rail trái + cột phải nên hẹp hơn viewport nhiều, xem L5/S3); điều hướng
   hai tầng .cs-nav kế thừa .nav-la sẵn có của app.css (không định nghĩa lại màu/kiểu nút — chỉ
   chỉnh chỗ căn trái thay vì căn giữa cho hợp CRM); khối nội dung .cs-khoi thay .card (S1); tiêu đề
   khối .cs-h; bảng dữ liệu .cs-bang + cột phụ .cs-cot-phu/.cs-o-phu gập gọn dưới 900px (khu giữa).
   ============================================================ */
.cs-goc { container-type: inline-size; min-width: 0; }
.cs-nav { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
/* app.css .nav-la vốn CĂN GIỮA (mẹo B3, tab hàng đầu app); điều hướng CRM hai tầng cần CĂN TRÁI
   để nhóm/màn luôn bắt đầu từ mép trái — đè margin:auto tự động của hai đầu. */
.cs-nav .nav-la > button:first-child { margin-left: 0; }
.cs-nav .nav-la > button:last-child { margin-right: 0; }
/* Tầng 1 (nhóm) đậm hơn tầng 2 (màn) để mắt phân biệt hai tầng dù cùng kế thừa .nav-la. */
.cs-nav-nhom button { font-weight: 700; }
.cs-nav-man button { font-size: var(--fs-sm); padding: 4px 10px; }
/* .cs-khoi = khối NỘI DUNG CRM (thay .card — .card của app.css là THẺ SỐ dashboard, viền trái
   xanh 4px + số 22px, sai ngữ nghĩa cho bảng/khối chữ thường, xem S1). Thẻ SỐ thật (KPI đầu trang)
   VẪN dùng .cards > .card của app.css, không đổi. */
.cs-khoi { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 12px; min-width: 0; }
.cs-h { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.cs-h .hint { font-weight: 400; }
/* .cs-bang = bảng dữ liệu CRM chuẩn (thay tên ".cs-bang" cũ đã gỡ ở trên — xem chú thích gỡ). */
.cs-bang th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); background: var(--primary-soft); }
.cs-o-phu { display: none; color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; overflow-wrap: anywhere; }
/* Khu giữa < 900px (rail 216 + cột phải 322 mở, xem L5/S3): ẩn cột phụ trong bảng, gộp vào dòng
   .cs-o-phu dưới ô chính; cột thao tác xếp dọc-đầy-chiều-rộng để dễ chạm, không cuộn ngang ẩn nút. */
@container (max-width: 900px) {
  .cs-goc .cs-cot-phu { display: none; }
  .cs-goc .cs-o-phu { display: block; }
  .cs-goc td.acts { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
  .cs-goc td.acts button { width: 100%; }
}
/* Nút "Chờ tôi xử lý" (nhóm Tổng quan) trùng khối "CHỜ TÔI XỬ LÝ" của cột phải v4 khi cột phải
   đang mở (L6/S5) — ẩn đúng lúc đó; cột phải đóng/ẩn (≤1180px hoặc right-hide) thì hiện lại. */
body.shell-v4:not(.right-hide) .cs-nut-cho-toi { display: none; }
/* .cs-kpi-gon (dải KPI gọn một hàng, G7-A): chữ nhãn theo --fs-sm, số theo --fs-md đậm — đồng bộ
   thang chữ vỏ v4 (trước đó .cs-kpi-o/.cs-kpi-gon-o dùng var(--fs-sm) chung cho cả nhãn lẫn số). */
.cs-kpi-gon-o b, .cs-kpi-o b { font-size: var(--fs-md); font-weight: 700; }

/* UI-KH-01: vỏ gọn của trục Khách hàng; mọi màu theo theme hiện hành. */
.cs-goc .cs-kh01-dau { padding: 10px 14px 8px; }
.cs-goc .cs-kh01-dau .cs-h { margin-bottom: 6px; }
.cs-goc .cs-kh01-dau .cs-da-bang { margin: 5px 0 7px; }
.cs-goc .cs-kh01-dau .cs-pv { margin: 6px 0; }
.cs-goc .cs-kh01-ld { border-block: 1px solid var(--line); padding: 6px 0; }
.cs-goc .cs-kh01-ld .cs-ldo + .cs-ldo { border-left: 1px solid var(--line); }
.cs-goc .cs-kh01-them { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 7px; }
.cs-goc .cs-kh01-them summary { cursor: pointer; padding: 7px 10px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 700; }
.cs-goc .cs-kh01-them-noi { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 6px 0; }
.cs-goc .cs-kh01-dau .cs-nav { margin: 5px 0 3px; gap: 0; }
.cs-goc .cs-kh01-dau .cs-nav .nav-la { justify-content: flex-start; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: thin; }
.cs-goc .cs-kh01-dau .cs-nav button { white-space: nowrap; min-height: 44px; flex: 0 0 auto; }
.cs-goc .cs-kh01-dau .cs-nav-nhom { border-bottom: 1px solid var(--line); }
.cs-goc .cs-kh01-dau .cs-nav-nhom button { border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; padding: 8px 11px; }
.cs-goc .cs-kh01-dau .cs-nav-nhom button:hover { background: var(--primary-soft); }
.cs-goc .cs-kh01-dau .cs-nav-nhom button.on { border-radius: 0; background: transparent; box-shadow: inset 0 -2px 0 var(--primary); color: var(--primary); font-weight: 700; }
.cs-goc .cs-kh01-dau .cs-nav-man { padding-top: 4px; }
.cs-goc .cs-kh01-dau .cs-nav-man button { border: 1px solid transparent; border-radius: 8px; background: transparent; box-shadow: none; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; padding: 6px 10px; }
.cs-goc .cs-kh01-dau .cs-nav-man button:hover { background: var(--primary-soft); }
.cs-goc .cs-kh01-dau .cs-nav-man button.on { border: 1px solid var(--line); border-radius: 8px; background: var(--primary-soft); box-shadow: none; color: var(--primary); }
.cs-goc .cs-kh01-dau .cs-nav button:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.cs-goc .cs-kh01-tienich { margin: 2px 0 0; justify-content: flex-end; }
.cs-goc .cs-kh01-man { background: transparent; border: 0; padding: 0; }
.cs-goc .cs-kh01-man h4 { margin: 0; font-size: var(--fs-md); color: var(--ink); }
.cs-goc .cs-kh01-tong, .cs-goc .cs-kh01-ds { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 10px; }
.cs-goc .cs-kh01-tong { display: grid; grid-template-columns: minmax(0, 1fr) minmax(185px, 220px); margin-bottom: 10px; }
.cs-goc .cs-kh01-bieudo { padding: 12px 14px; min-width: 0; }
.cs-goc .cs-kh01-td, .cs-goc .cs-kh01-ds-dau { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 15px; }
.cs-goc .cs-kh01-doi, .cs-goc .cs-kh01-loc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-goc .cs-kh01-doi button, .cs-goc .cs-kh01-loc button { font-size: var(--fs-xs); padding: 5px 9px; min-height: 32px; }
.cs-goc .cs-kh01-doi button.on, .cs-goc .cs-kh01-loc button.on { color: var(--brand); border-color: var(--brand); background: var(--primary-soft); font-weight: 700; }
.cs-goc .cs-kh01-bieu { display: grid; gap: 5px; margin-top: 12px; }
.cs-goc .cs-kh01-bh { display: grid; grid-template-columns: minmax(95px, 160px) minmax(60px, 1fr) minmax(42px, auto); gap: 9px; align-items: center; min-height: 27px; font-size: var(--fs-xs); }
.cs-goc .cs-kh01-bh > span:first-child { overflow-wrap: anywhere; }
.cs-goc .cs-kh01-bh b { font-variant-numeric: tabular-nums; text-align: right; font-size: var(--fs-xs); white-space: nowrap; }
.cs-goc .cs-kh01-track { display: block; height: 12px; background: var(--primary-soft); border-radius: 4px; overflow: hidden; }
.cs-goc .cs-kh01-track i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.cs-goc .cs-kh01-chuy { border-left: 1px solid var(--line); padding: 12px; min-width: 0; }
.cs-goc .cs-kh01-chuy h4 { margin-bottom: 8px; }
.cs-goc .cs-kh01-chuy > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.cs-goc .cs-kh01-chuy b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.cs-goc .cs-kh01-chuy button { display: block; width: 100%; text-align: left; margin-top: 6px; }
.cs-goc .cs-kh01-ds { padding: 0 14px 10px; }
.cs-goc .cs-kh01-ds-dau { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cs-goc .cs-kh01-ds-dau .hint { margin: 2px 0 0; }
.cs-goc .cs-kh01-ds-dau small { color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; }
.cs-goc .cs-kh01-loc input { min-width: 120px; width: 170px; max-width: 100%; font-size: var(--fs-sm); }
.cs-goc .cs-kh01-moi { padding-top: 6px; }
.cs-goc .cs-kh01-hang-dau, .cs-goc .cs-kh01-duan { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.3fr) minmax(110px, .8fr) minmax(105px, auto); gap: 14px; align-items: center; }
.cs-goc .cs-kh01-hang-dau { padding: 9px 0 3px; font-size: var(--fs-xs); color: var(--ink-2); }
.cs-goc .cs-kh01-duan { border-bottom: 1px solid var(--line); padding: 7px 0; min-height: 54px; }
.cs-goc .cs-kh01-duan:last-child { border-bottom: 0; }
.cs-goc .cs-kh01-ten, .cs-goc .cs-kh01-phan, .cs-goc .cs-kh01-chiso { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: var(--fs-sm); }
.cs-goc .cs-kh01-ten b { overflow-wrap: anywhere; }
.cs-goc .cs-kh01-phan .hint { font-size: var(--fs-xs); line-height: 1.35; }
.cs-goc .cs-kh01-phan { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 3px 6px; }
.cs-goc .cs-kh01-phan > .cs-kh01-phanbo { flex: 1 1 90px; }
.cs-goc .cs-kh01-thieu { color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; }
.cs-goc .cs-kh01-gd-detail { font-size: var(--fs-xs); color: var(--ink-2); }
.cs-goc .cs-kh01-gd-detail summary { cursor: pointer; color: var(--primary); font-weight: 700; white-space: nowrap; }
.cs-goc .cs-kh01-gd-detail[open] { flex-basis: 100%; }
.cs-goc .cs-kh01-gd-detail span { display: block; padding: 4px 0; }
.cs-goc .cs-kh01-chiso { color: var(--ink-2); font-size: var(--fs-xs); }
.cs-goc .cs-kh01-phanbo { display: flex; gap: 0; width: 100%; height: 9px; border-radius: 4px; overflow: hidden; background: var(--primary-soft); }
.cs-goc .cs-kh01-phanbo i { display: block; height: 100%; min-width: 0; background: color-mix(in srgb, var(--brand) 25%, var(--primary-soft)); }
.cs-goc .cs-kh01-phanbo .cs-kh01-gd-1 { background: color-mix(in srgb, var(--brand) 40%, var(--primary-soft)); }
.cs-goc .cs-kh01-phanbo .cs-kh01-gd-2 { background: color-mix(in srgb, var(--brand) 58%, var(--primary-soft)); }
.cs-goc .cs-kh01-phanbo .cs-kh01-gd-3 { background: color-mix(in srgb, var(--brand) 75%, var(--primary-soft)); }
.cs-goc .cs-kh01-phanbo .cs-kh01-gd-4 { background: var(--brand); }
.cs-goc .cs-kh01-phanbo .cs-kh01-gd-5 { background: color-mix(in srgb, var(--brand) 60%, var(--success)); }
.cs-goc .cs-kh01-phanbo .cs-kh01-gd-6 { background: var(--success); }
.cs-goc .cs-kh01-mo { text-align: right; }
.cs-goc .cs-kh01-mo button { white-space: nowrap; }
.cs-goc .cs-kh01-chuapc { background: var(--primary-soft); }
.cs-goc .cs-kh01-chuapc .cs-kh01-mo { text-align: left; }
.cs-goc .cs-kh01-canh { margin: 8px 0; padding: 7px 10px; border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.cs-goc .cs-kh01-rong { margin: 0; padding: 20px 0; }
.cs-goc .cs-kh01-phu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 7px 10px; margin: 5px 0 10px; border: 1px solid var(--line); border-radius: 7px; font-size: var(--fs-xs); }
.cs-goc .cs-kh01-phu .cs-kh01-phanbo { flex: 1 1 160px; }
.cs-goc .cs-kh01-phu .hint { flex-basis: 100%; }
/* Mọi màn con kế thừa nhịp gọn; cảnh báo và nút nghiệp vụ vẫn hiển thị. */
.cs-goc > .cs-khoi:not(.cs-kh01-dau):not(.cs-kh01-man) { padding: 14px 18px; }
.cs-goc > .cs-khoi .cs-bar { gap: 7px; }
.cs-goc > .cs-khoi table td, .cs-goc > .cs-khoi table th { padding-top: 7px; padding-bottom: 7px; }
@container (max-width: 700px) {
  .cs-goc .cs-kh01-tong { grid-template-columns: 1fr; }
  .cs-goc .cs-kh01-chuy { border-left: 0; border-top: 1px solid var(--line); }
  .cs-goc .cs-kh01-hang-dau { display: none; }
  .cs-goc .cs-kh01-duan { grid-template-columns: minmax(0, 1fr) minmax(100px, 1fr); gap: 8px 12px; }
  .cs-goc .cs-kh01-mo { text-align: left; }
}
@container (max-width: 500px) {
  .cs-goc .cs-kh01-duan { grid-template-columns: 1fr; }
  .cs-goc .cs-kh01-loc, .cs-goc .cs-kh01-loc input { width: 100%; }
  .cs-goc .cs-kh01-bh { grid-template-columns: minmax(80px, 110px) minmax(45px, 1fr) minmax(35px, auto); gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .cs-goc .cs-kh01-track i { transition: none; } }