/* ══════════════ LUẬT MÀU — Sếp chốt 28/09/2026: "nhân viên thấy rối vì nhiều màu" ══════════════
   ⭐ CHỈ CÓ 3 MÀU MANG NGHĨA, học một lần dùng cả hệ thống:
        🔴 --err  = việc CẦN LÀM / quá hạn / còn nợ
        🟡 --warn = ĐANG DỞ (hàng trên đường, chờ duyệt, tiền về chưa gán đơn)
        🟢 --ok   = XONG (đã giao, đã thu đủ, đã duyệt)
   ⭐ VÀNG THƯƠNG HIỆU (--brand) KHÔNG phải màu nghĩa — chỉ dùng cho 4 chỗ:
        nút hành động chính · mục menu đang mở · tab đang mở · link bấm được.
   ⚠ ĐỪNG tô vàng tiêu đề mục, nhãn, số liệu — trước 28/09 làm vậy nên một màn hình có tới
     5 thứ vàng, mắt không biết nhìn đâu trước. Muốn làm nổi thì dùng CỠ CHỮ và KHOẢNG TRẮNG,
     không dùng thêm màu.
   ⚠ Thêm màu mới = phải sửa cả 2 bảng màu (tối + sáng). Cân nhắc rất kỹ. */
:root{
  /* KAMTRADING / BIGMAN GLASS — dark theme (vàng #FDD504 · than #16181d · trắng) */
  --bg:#16181d; --panel:#1f2228; --panel-2:#24272e; --topbar:#0d0e11;
  --ink:#f0f0f0; --muted:#9aa3af; --line:#313640; --line-2:#3c424d;
  --brand:#FDD504; --brand-d:#e0bd00; --on-brand:#161616;
  --warn:#fbbf24; --warn-bg:#3a2f12; --warn-line:#7c5e16;
  --err:#f87171;  --err-bg:#3a1d1d;  --err-line:#7f2d2d;
  --ok:#4ade80;   --ok-bg:#16301f;   --ok-line:#2c6b41;
  /* Thanh tab con trong thương vụ — TRUNG TÍNH (đổi 28/09/2026 theo luật màu ở trên).
     Bản neon xanh lá (19/09) làm nền: nó là màu thứ 5 trên cùng một màn hình, lại dễ đọc
     nhầm thành "đã xong" (--ok cũng xanh lá). Nay tab đang mở là THẺ SÁNG CHỮ ĐEN — nổi bằng
     ĐỘ TƯƠNG PHẢN chứ không bằng màu, nên nhìn phát biết ngay mà không tốn thêm một quy ước. */
  --tvn:#e9edf3; --tvn-nen:#1b1e24; --tvn-vien:#343a45; --tvn-chu:#aab3bf; --tvn-hover:#2a2f38;
  /* Mấy màu trước đây GHI CỨNG rải rác — gom thành biến để bảng màu SÁNG đổi được (v1.53.0).
     ⚠ Thêm màu mới thì phải khai ở CẢ HAI bảng, nếu không nền sáng sẽ thủng một mảng đen. */
  --lien-ket:#FDD504;   /* màu chữ LINK — nền tối thì vàng đọc tốt, nền sáng phải đổi */
  --o-nen:#13151a;      /* nền ô nhập */
  --nut-hover:#2e323b;  /* nút thường khi rê chuột */
  --side-chu:#d3d7de;   /* chữ mục menu trái */
  --dam-chu:#fff;       /* chữ trên nền đậm (đầu menu, thanh trên) */
  --dao:#16181d;        /* chữ trên nền ĐẢO (tab con đang mở) */
  --anh-nen:#0d0e11;    /* nền ô ảnh đính kèm */
  --khoa-nen:#2a2113;   /* dòng bảng bị khóa */
  --callout-nen:#152a2e; --callout-vien:#1f4a52;
  --tdo-cham-nen:#3a3208;   /* chấm bước ĐANG làm trên thanh tiến độ */
  --vien-mo:rgba(255,255,255,.35);
  /* VÀNG dùng làm MÀU CHỮ + nền khi RÊ CHUỘT (30/09/2026). Nền tối: vàng sáng đọc tốt.
     ⚠ Chữ #FDD504 trên nền sáng gần như vô hình (Sếp bắt 30/09: "hover nền vàng chữ vàng không
     thấy rõ") → bảng sáng đổi sang VÀNG ĐẬM. Viền/nền nút vẫn dùng --brand như cũ. */
  --brand-chu:#FDD504;
  --hover-nen:rgba(253,213,4,.14);
  /* chiều cao 1 dòng NHÃN của ô nhập — mọi ô dùng chung nên ô nhập luôn thẳng hàng */
  --cao-nhan:19px;
}

/* ══════════════ 🌗 BẢNG MÀU NỀN SÁNG (v1.53.0 · 28/09/2026) ══════════════
   Sếp 28/09: *"nhân viên thấy rối khi nhiều màu sắc, nền sáng có đỡ rối không"*.
   Làm dạng CHỌN THEO TỪNG NGƯỜI (`users.giao_dien`) — ai quen nền tối giữ nguyên, ai thích
   sáng thì bật; không ép cả nhà đổi theo một người.
   ⭐ Chỉ đổi BIẾN, không đổi một dòng bố cục nào — nhờ vậy mọi màn hình cũ tự sáng theo.
   ⭐ Vàng thương hiệu GIỮ NGUYÊN #FDD504 (chữ đen trên vàng vẫn đọc tốt trên nền sáng),
     còn 3 màu nghĩa phải ĐẬM hơn bản tối: xanh/đỏ/vàng nhạt trên nền trắng là không đọc nổi. */
html[data-nen="sang"]{
  --bg:#f3f5f8; --panel:#ffffff; --panel-2:#eef1f6; --topbar:#ffffff;
  --ink:#1c2330; --muted:#5a6473; --line:#dfe3ea; --line-2:#c6ccd8;
  --brand:#FDD504; --brand-d:#e0bd00; --on-brand:#161616;
  --warn:#9a5b00; --warn-bg:#fff5e0; --warn-line:#f0c46a;
  --err:#b42318;  --err-bg:#fdeceb;  --err-line:#f2b5ae;
  --ok:#137a3f;   --ok-bg:#e8f7ee;   --ok-line:#9fdcb6;
  --tvn:#1c2330; --tvn-nen:#eef1f6; --tvn-vien:#dfe3ea; --tvn-chu:#5a6473; --tvn-hover:#e2e6ee;
  /* ⚠ Link KHÔNG để vàng trên nền trắng — chữ vàng trên nền sáng gần như không đọc nổi
     (bắt được lúc soi ảnh chụp 28/09/2026). Xanh dương là quy ước link ai cũng hiểu, và nó
     KHÔNG phải màu nghĩa nên không phá luật 3 màu. */
  --lien-ket:#15539e;
  --o-nen:#ffffff; --nut-hover:#e8ecf3; --side-chu:#3c4757; --dam-chu:#1c2330; --dao:#ffffff;
  --anh-nen:#eef1f6; --khoa-nen:#fff6e0;
  --callout-nen:#eaf4ff; --callout-vien:#c3dbf7;
  --tdo-cham-nen:#fff3c4;
  --vien-mo:rgba(0,0,0,.18);
  --brand-chu:#7a5a00;   /* vàng đậm: đọc rõ trên trắng/xám, vẫn ra "màu vàng thương hiệu" */
  --hover-nen:#e2e6ee;   /* rê chuột = nền XÁM (Sếp 30/09/2026), không phải vàng nhạt */
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45}
a{color:var(--lien-ket);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px;margin:0 0 16px}
h2{font-size:16px;margin:0 0 12px}

/* Topbar */
.topbar{display:flex;align-items:center;gap:16px;background:var(--topbar);color:var(--dam-chu);padding:10px 18px;flex-wrap:wrap;border-bottom:2px solid var(--brand)}
.brand a{display:flex;align-items:center;gap:8px;color:var(--dam-chu);font-weight:700;font-size:17px}
.brand img{height:30px;width:auto;display:block}
.brand span{font-weight:400;opacity:.7;font-size:13px}
.menu{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.menu a{color:var(--side-chu);padding:6px 10px;border-radius:6px;transition:background .12s,color .12s}
.menu a:hover{background:var(--hover-nen);color:var(--brand-chu);text-decoration:none}
/* Trang ĐANG XEM: nền vàng + gạch chân đậm (khác hẳn hover mờ) để định vị rõ */
.menu a.active{background:var(--brand);color:var(--on-brand);font-weight:700;
  border-radius:6px 6px 0 0;box-shadow:inset 0 -4px 0 rgba(0,0,0,.5)}
.menu a.active:hover{background:var(--brand);color:var(--on-brand)}
/* Dropdown ⬇ Excel */
.dropdown{position:relative}
.dropdown .drop-toggle{display:inline-block;color:var(--side-chu);padding:6px 10px;border-radius:6px;cursor:pointer;user-select:none}
.dropdown:hover .drop-toggle{background:var(--hover-nen);color:var(--brand-chu)}
.drop-menu{display:none;position:absolute;right:0;top:100%;margin-top:4px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:8px;padding:8px;min-width:250px;z-index:60;
  box-shadow:0 10px 28px rgba(0,0,0,.45)}
.dropdown:hover .drop-menu{display:block}
.drop-item{display:block;padding:8px 10px;color:var(--ink);border-radius:6px;font-size:14px}
.drop-item:hover{background:var(--panel-2);text-decoration:none}
.drop-form{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.drop-title{font-weight:600;font-size:13px;margin-bottom:8px;color:var(--ink)}
.drop-form label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:12px;color:var(--muted)}
.drop-form input{width:150px;padding:4px 6px;font-size:13px}
.drop-form .btn-block{margin-top:6px}
.user{display:flex;align-items:center;gap:10px;font-size:13px}
.who{opacity:.95}
.role{font-style:normal;font-size:11px;padding:1px 6px;border-radius:10px;background:rgba(253,213,4,.18);color:var(--brand-chu)}
.btn-logout{color:var(--dam-chu);border:1px solid var(--vien-mo);padding:4px 10px;border-radius:6px}
.btn-logout:hover{border-color:var(--brand);color:var(--brand-chu);text-decoration:none}

/* ⭐ BỀ NGANG NỘI DUNG (nới 24/08/2026 theo Sếp: "còn dư màn hình").
   Menu trái đã ăn 292px, nội dung cũ dừng ở 1120/1560px nên màn 1920 còn thừa một khoảng
   trống to bên phải. Nay giới hạn theo `min(px, 100%)`: màn rộng thì giãn ra, màn hẹp
   (laptop 14", máy bảng) vẫn co đúng như cũ — KHÔNG sinh thanh cuộn ngang.
   ⚠ Đừng bỏ hẳn giới hạn: bảng thì càng rộng càng tốt, nhưng đoạn văn dài quá 1500px là
   mắt phải quét ngang cả gang tay, đọc mệt hơn hẳn. */
.container{max-width:min(1400px, 100%);margin:22px auto;padding:0 22px}
/* Trang nhiều cột (tồn kho / lịch sử nhập / bảng kê / hồ sơ khách) cần rộng hơn cho tên SP & NCC */
.container.wide{max-width:min(1840px, 100%)}
/* Trang đăng nhập vẫn gọn ở giữa */
.container.narrow{max-width:460px}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:24px}

/* Flash */
.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px;border:1px solid}
.flash-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.flash-error{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}
.flash-warn,.flash-info{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
.card-h{color:var(--muted);font-size:13px}
.card-v{font-size:24px;font-weight:700;margin-top:4px}
.card-warn{border-color:var(--warn-line);background:var(--warn-bg)}

/* Panels & tables */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:18px}
.panel-warn{border-color:var(--warn-line);background:var(--warn-bg)}
.hidden{display:none}
.thuform{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.thuform input,.thuform select{padding:5px 7px}
details>summary.btn{display:inline-block;list-style:none;cursor:pointer}
details>summary.btn::-webkit-details-marker{display:none}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:780px){.grid-2{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:14px}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.02em}
.r{text-align:right}.c{text-align:center}.nowrap{white-space:nowrap}
.muted{color:var(--muted)}
/* ⚠ TÊN CŨ GÂY NHẦM: `.warn-txt` thực ra là ĐỎ (nó có từ đầu, hàng trăm chỗ đang dùng — đừng
   đổi màu nó). Từ 22/08/2026 dùng 2 tên nói đúng nghĩa cho QUY ƯỚC MÀU CỦA TIỀN:
   `.do-txt` = đỏ (khách còn nợ) · `.vang-txt` = vàng (tiền đã về mà chưa gán vào đơn nào). */
.warn-txt{color:var(--err);font-weight:700}
.do-txt{color:var(--err);font-weight:700}
.vang-txt{color:var(--warn);font-weight:700}
.ok-txt{color:var(--ok);font-weight:700}
.kv td{border:none;padding:3px 6px}
.kv td:first-child{color:var(--muted);width:140px}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--panel-2)}
tr.locked{background:var(--khoa-nen)}
tr.row-hl{background:rgba(253,213,4,.10)}

/* Forms */
label{display:block;margin-bottom:10px;font-size:13px;color:var(--muted)}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;font-size:15px;background:var(--o-nen);color:var(--ink);font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px rgba(253,213,4,.2)}
input::placeholder,textarea::placeholder{color:#6b7280}
textarea{resize:vertical}
/* Chống nền TRẮNG do trình duyệt tự-điền (autofill) ghi đè -> ép về nền tối */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
input:-webkit-autofill:active,select:-webkit-autofill,textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--o-nen) inset;
  box-shadow:0 0 0 1000px var(--o-nen) inset;
  caret-color:var(--ink);
  transition:background-color 9999s ease-in-out 0s}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end}
@media(max-width:680px){.row2,.row3,.row4{grid-template-columns:1fr}}
.filterbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.filterbar input,.filterbar select{width:auto}
.grow{flex:1}
.hint{color:var(--muted);font-size:12px;margin-top:8px}

/* ══════════════ HỒ SƠ KHÁCH — chia VÙNG (21/08/2026) ══════════════
   Trước đây mọi ô nhập tự đặt style inline (flex-column + font 13px) nên mỗi hàng một kiểu,
   ô tiền lệch hẳn so với ô ngày và ghi chú. Nay gom về 2 lớp dùng chung: `.o` cho 1 ô nhập,
   `.hang-nhap` cho hàng nhiều ô + nút. Sửa canh hàng thì sửa ĐÚNG CHỖ NÀY. */
.vung-tieu-de{margin:0 0 10px;font-size:15px;padding-bottom:8px;
  border-bottom:2px solid var(--brand)}
/* ⚠ Tiêu đề mục CỐ Ý không tô vàng nữa (28/09/2026): một trang hồ sơ có tới 8-10 mục, tô
   vàng hết thì cái vàng của NÚT BẤM mất thiêng. Phân cấp bằng cỡ chữ + gạch chân mảnh. */
.vung-muc{margin:16px 0 8px;font-size:13px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;font-weight:700}
.vung-muc:first-of-type{margin-top:10px}

/* 1 ô nhập: nhãn trên, ô dưới, chú thích dưới cùng — chiều cao ô luôn bằng nhau */
.o{display:flex;flex-direction:column;font-size:13px;color:var(--muted);margin-bottom:10px;
  line-height:var(--cao-nhan)}
.o > input,.o > select{height:38px;box-sizing:border-box}
.o > .hint{margin-top:3px;line-height:1.4}
/* Chú thích ĐI KÈM NHÃN phải bọc trong <span class="nhan">, nếu không nó thành một dòng riêng
   (mọi con của flex-column đều là block) -> nhãn cao 2 dòng -> ô nhập tụt xuống lệch hàng bên. */
.o > .nhan{display:block}
.o > .nhan .hint{display:inline;margin:0;line-height:inherit}
/* ⚠⚠ ĐỪNG THỬ SỬA BẰNG `display:inline` (đã thử 28/08/2026, vô ích): `.o` là flex-column nên
   MỌI con của nó — kể cả text trần — đều thành flex item, tức block. Viết
   `<label class="o">Hạn <span>gõ liền…</span>` là CHẮC CHẮN 2 dòng, không CSS nào cứu được.
   Muốn chú thích nằm cùng dòng với tên ô thì phải BỌC CẢ HAI trong một `.nhan` như trên.
   Vì sao phải 1 dòng: `.hang-nhap` canh TỪ ĐỈNH -> nhãn 2 dòng là ô nhập tụt xuống, cả hàng
   lệch nhau và nút bấm trơ ra (Sếp bắt được ở form "Ghi nhanh một việc"). */
.o-chon{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);
  margin:10px 0}
.o-chon input[type=checkbox]{width:auto;margin-top:3px;flex:0 0 auto}
/* Hàng nhiều ô tick nằm cạnh nhau (VD: cách ký hợp đồng) — xuống dòng gọn trên màn hẹp */
.hang-tick{display:flex;flex-wrap:wrap;gap:6px 22px;margin:4px 0 2px}
.hang-tick .o-chon{margin:4px 0;flex:1 1 240px}

/* Hàng nhập nhiều ô + nút bấm: canh TỪ ĐỈNH.
   Trước dùng `align-items:end`: ô nào có chú thích DƯỚI ô nhập thì bị đẩy lên cao hơn ô bên cạnh
   đúng bằng chiều cao dòng chú thích -> hàng "Số tiền / Ngày nhận / Ghi chú" lệch nhau.
   Nay canh đỉnh: nhãn ô nào cũng 1 dòng (--cao-nhan) nên các ô nhập tự thẳng hàng,
   còn nút thì tụt xuống đúng 1 dòng nhãn để ngang bằng ô nhập. */
.hang-nhap{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.hang-nhap .o{flex:1 1 160px;margin-bottom:0}
.hang-nhap .btn{height:38px;flex:0 0 auto;margin-top:var(--cao-nhan)}

/* Khối TỔNG THƯƠNG VỤ trong vùng ④: đứng ngang hàng với các ô nhập bên cạnh.
   Giá CÓ VAT ẩn mặc định (.tv-an) — bấm nút mới hiện, tránh nhìn nhầm số phải thu. */
.o-tong{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--panel-2);
  min-height:38px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.o-tong b{color:var(--ink);font-size:15px}
.o-tong .btn{margin-top:2px}
.tv-an{display:none}

/* Ô ghi chú NGẮN nhưng xuống dòng được (v1.50.1): cao bằng đúng ô nhập thường (38px) để
   không làm lệch hàng `.hang-nhap`, gõ Shift+Enter thì tự cao dần. */
.o > textarea.gc{height:38px;min-height:38px;max-height:132px;padding:8px 10px;
  line-height:1.35;resize:vertical;overflow-y:auto}
/* Chỗ HIỂN THỊ lại ghi chú phải giữ nguyên chỗ xuống dòng, không thì gõ 3 dòng mà đọc ra
   một dòng dính liền. */
.gc-hien{white-space:pre-wrap}

/* Ghi chú: rộng hết panel + cao hẳn — sale hay dán nguyên đoạn chat Zalo vào */
.ghi-chu-to{min-height:200px;line-height:1.5;font-size:14px}

/* Lưới ảnh đính kèm: thumbnail xem được ngay, khỏi tải về mới biết là ảnh gì */
.anh-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;
  margin-top:10px}
.anh-o{margin:0;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column}
.anh-o img{width:100%;height:120px;object-fit:cover;display:block;background:var(--anh-nen)}
.anh-o figcaption{padding:7px 8px;display:flex;flex-direction:column;gap:2px;font-size:11.5px}
.anh-ten{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anh-nut{display:flex;gap:6px;margin-top:4px}
.note{font-size:13px;margin:-4px 0 10px;min-height:16px}
.note-ok{color:var(--ok)}
.note-err{color:var(--err);font-weight:600}
fieldset.ncc{border:1px solid var(--line);border-radius:8px;padding:8px 12px 2px;margin:4px 0 12px}
fieldset.ncc legend{font-size:12px;color:var(--muted);padding:0 6px}

/* Buttons */
.btn{display:inline-block;padding:8px 14px;border-radius:8px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);cursor:pointer;font-size:14px}
.btn:hover{background:var(--nut-hover);text-decoration:none}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700}
.btn-primary:hover{background:var(--brand-d)}
.btn-warn{background:transparent;border-color:var(--err-line);color:var(--err)}
.btn-warn:hover{background:var(--err-bg)}
.btn-danger{background:#d83a3a;border-color:#d83a3a;color:#fff;font-weight:700}
.btn-danger:hover{background:#c42f2f}
/* Thanh menu nhảy vùng: nút tự co theo chữ, KHÔNG chia đều như .btn-row.
   Dùng .btn-row cho 7 mục thì mỗi nút chỉ còn ~60px, chữ tiếng Việt vỡ dọc từng chữ một. */
.thanh-menu{display:flex;flex-wrap:wrap;gap:8px}
.thanh-menu .btn{white-space:nowrap}

/* hàng 2 nút Duyệt / Hủy — kích thước đồng nhất */
.btn-row{display:flex;gap:12px;max-width:520px}
.btn-row .btn{flex:1;margin-top:8px;text-align:center}
.btn-sm{padding:4px 10px;font-size:13px}
.btn-lg{padding:11px 22px;font-size:16px;margin-top:8px}
.btn-block{width:100%}
.actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-top:8px}
/* Báo "đã lưu" NỔI ở góc — vì từ 22/08/2026 bấm Lưu xong trang giữ nguyên chỗ đang cuộn,
   nếu chỉ báo ở đầu trang thì người đang sửa ở giữa trang không thấy gì, tưởng chưa lưu. */
.toast-luu{position:fixed;top:14px;right:16px;z-index:60;max-width:380px;
  padding:10px 14px;border-radius:10px;border:1px solid var(--ok-line);background:var(--ok-bg);
  color:var(--ink);font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.35);
  animation:toast-vao .18s ease-out}
.toast-luu.toast-err{border-color:var(--err-line);background:var(--err-bg)}
.toast-luu.toast-warn{border-color:var(--warn-line);background:var(--warn-bg)}
@keyframes toast-vao{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* About / lịch sử phiên bản */
.credit{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;
  border:1px solid var(--brand);border-radius:8px;background:rgba(253,213,4,.07)}
.credit-main{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.credit-label{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.credit-name{color:var(--brand-chu);font-size:16px}
.credit-note{flex-basis:100%;font-size:13px}
.changelog{display:flex;flex-direction:column;gap:14px}
.ver-block{margin:0}
.ver-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ver-tag{background:var(--brand);color:var(--on-brand);font-weight:700;font-size:13px;padding:2px 10px;border-radius:12px}
.ver-items{margin:0;padding-left:20px}
.ver-items li{margin:4px 0}

.sku-inline{display:flex;gap:6px;align-items:center;margin:0}
.sku-inline input{padding:4px 8px;font-size:13px}
td .sku-inline .btn-sm{white-space:nowrap}
.sku-view{display:flex;gap:8px;align-items:center}
.sku-view .sku-txt{width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sku-view .btn-sm{padding:2px 10px;font-size:12px;opacity:.6;flex:none;min-width:48px;text-align:center}
.sku-view .btn-sm:hover{opacity:1}
.sku-inline input{width:100px}
/* số 'Đang giữ' bấm được -> xem đơn nháp đang tạm khóa mã đó */
.giu-link{color:var(--warn);font-weight:700;text-decoration:underline dotted;cursor:pointer}
.giu-link:hover{color:var(--brand-chu)}
/* cột SKU Sapo rộng CỐ ĐỊNH để text + nút Gán/Sửa luôn thẳng 1 cột */
th.sku-col,td.sku-col{width:184px;min-width:184px}
/* cột Nhà cung cấp rộng, tên nằm 1 hàng */
th.ncc-col,td.ncc-col{white-space:nowrap;min-width:300px}
/* cột Số HĐ = cột MST (thu nhỏ), số hóa đơn nằm 1 hàng */
th.hd-col,td.hd-col,th.mst-col,td.mst-col{white-space:nowrap;width:110px;min-width:110px}
/* cột Tên hàng nới rộng */
th.ten-col,td.ten-col{min-width:320px}

/* Badges */
.badge{font-size:12px;padding:2px 8px;border-radius:10px;font-weight:600}
.badge-NHAP,.badge-CHO_DUYET{background:var(--warn-bg);color:var(--warn)}
.badge-DA_DUYET{background:var(--ok-bg);color:var(--ok)}
.badge-HUY{background:var(--err-bg);color:var(--err)}

/* Login */
.login-wrap{display:flex;justify-content:center;align-items:center;min-height:75vh}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px;width:340px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.login-logo{display:block;margin:0 auto 14px;max-width:240px;width:80%;height:auto}
.login-card h1{text-align:center;color:var(--brand-chu);margin-bottom:2px}
.login-card .sub{text-align:center;color:var(--muted);margin:0 0 20px}

/* Hướng dẫn */
ol.steps{margin:0;padding-left:20px}
ol.steps li{margin:7px 0}
.callout{background:var(--callout-nen);border:1px solid var(--callout-vien);border-radius:8px;padding:10px 14px;margin-top:10px}
.callout-warn{background:var(--warn-bg);border-color:var(--warn-line)}
.panel ul{margin:6px 0;padding-left:20px}
.panel ul li{margin:5px 0}

/* ══════════════════════════════════════════════════════════════════════════
   MENU TRÁI (sidebar) — v1.11.0, thay thanh ngang cũ
   Gom theo chức năng: Xuất hóa đơn · Khách hàng · Công nợ · Kho · Báo cáo · Quản trị.
   Các lớp .topbar/.menu bên trên giờ KHÔNG dùng nữa (giữ lại phòng khi cần lùi).
   ══════════════════════════════════════════════════════════════════════════ */
/* Bề rộng menu: 224 -> 292px (rộng thêm 30%, 21/08/2026 theo yêu cầu) cho thoáng chữ.
   Mọi thứ bên trong đo theo biến này nên chỉ cần sửa ĐÚNG MỘT chỗ. Bản thu gọn giữ 60px. */
:root{ --side-w:292px; --side-gon:60px; }
html.side-gon{ --side-w:var(--side-gon); }

.shell{display:flex;min-height:100vh;align-items:stretch}

.side{
  width:var(--side-w);flex:0 0 var(--side-w);background:var(--topbar);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden;transition:width .14s ease,flex-basis .14s ease}
.side:hover{overflow-y:auto}
.side::-webkit-scrollbar{width:8px}
.side::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}

/* Đầu sidebar: logo + nút thu gọn */
/* align-items:flex-start — dưới logo nay có 2 dòng tên hệ thống, canh giữa thì nút thu gọn
   bị đẩy xuống lệch hẳn so với logo. */
.s-dau{display:flex;align-items:flex-start;gap:8px;padding:12px 10px 10px 14px;
  border-bottom:1px solid var(--line);min-height:56px}
.s-brand{flex:1;display:block;min-width:0}
.s-brand > a{display:block}
.s-brand img{height:26px;width:auto;display:block}
/* Tên hệ thống dưới logo — phân biệt Kế toán / CRM khi mở 2 tab cạnh nhau.
   MỘT HÀNG: letter-spacing để 0 và nowrap, vì "HỆ THỐNG CRM QUẢN LÝ KHÁCH HÀNG" là
   31 ký tự — giãn chữ thêm chút nữa là tràn khỏi bề rộng menu. */
.s-he-thong{display:block;margin-top:5px;color:var(--dam-chu);font-size:11.5px;font-weight:700;
  letter-spacing:0;line-height:1.3;text-transform:uppercase;white-space:nowrap;cursor:default}
.s-he-thong b{color:var(--brand);font-weight:700}
html.side-gon .s-he-thong{display:none}
.s-thugon{background:transparent;border:1px solid var(--line-2);color:var(--muted);
  width:24px;height:24px;border-radius:6px;cursor:pointer;line-height:1;flex:0 0 auto;
  font-size:15px;display:flex;align-items:center;justify-content:center}
.s-thugon:hover{color:var(--brand);border-color:var(--brand)}
html.side-gon .s-thugon{transform:rotate(180deg)}
html.side-gon .s-brand img{height:22px}

.s-nav{flex:1;padding:8px 8px 14px;overflow-y:auto;overflow-x:hidden}
.s-day{border-top:1px solid var(--line);padding:8px;position:relative}

/* ⭐ CHÂN MENU THU GỌN ĐƯỢC (24/08/2026) — bên Kế toán menu dài, chân trang ăn mất chỗ của
   việc chính. Thu gọn = 4 mục co thành MỘT HÀNG ICON, vẫn bấm được đủ, chỉ mất chữ.
   ⚠ Cố ý KHÔNG ẩn hẳn mục nào: nút biến mất là người dùng đi tìm, còn tệ hơn menu dài. */
.s-chan-nut{position:absolute;top:-11px;right:10px;z-index:2;
  width:26px;height:20px;border-radius:6px;cursor:pointer;line-height:1;
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
  display:flex;align-items:center;justify-content:center;padding:0}
.s-chan-nut:hover{color:var(--brand-chu);border-color:var(--brand)}
.s-chan-mui{font-size:15px;line-height:1;transition:transform .15s}
html.chan-gon .s-chan-mui{transform:rotate(180deg)}
html.chan-gon .s-day{display:flex;align-items:center;gap:2px;padding:6px 4px}
html.chan-gon .s-day .s-chu,
html.chan-gon .s-day .role{display:none}
html.chan-gon .s-day .s-muc,
html.chan-gon .s-day .s-ai{flex:1 1 0;justify-content:center;padding:8px 0;margin:0}
html.chan-gon .s-day .s-ai{gap:0}
/* Menu đã thu gọn hẳn (icon-only) thì nút này thừa — ẩn đi cho khỏi rối. */
html.side-gon .s-chan-nut{display:none}
html.side-gon.chan-gon .s-day{display:block}
html.side-gon.chan-gon .s-day .s-muc,
html.side-gon.chan-gon .s-day .s-ai{flex:none;padding:9px 0}

/* Tiêu đề nhóm */
.s-nhom{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:14px 10px 6px;white-space:nowrap;overflow:hidden}
html.side-gon .s-nhom{
  font-size:0;padding:10px 10px 4px;border-top:1px solid var(--line);margin-top:6px}

/* 1 mục menu */
.s-muc{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;
  color:var(--side-chu);font-size:14px;white-space:nowrap;overflow:hidden;
  background:transparent;border:0;width:100%;text-align:left;cursor:pointer;font-family:inherit}
.s-muc + .s-muc{margin-top:1px}
.s-muc:hover{background:var(--hover-nen);color:var(--brand-chu);text-decoration:none}
.s-muc.active{background:var(--brand);color:var(--on-brand);font-weight:700}
.s-muc.active:hover{background:var(--brand);color:var(--on-brand)}
.s-icon{flex:0 0 20px;width:20px;text-align:center;font-size:15px;line-height:1}
.s-chu{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
html.side-gon .s-chu,
html.side-gon .s-mui{display:none}
html.side-gon .s-muc{justify-content:center;padding:9px 0}

/* Số đếm trên menu (đơn chờ duyệt / khách phải chạm lại) */
.s-so{flex:0 0 auto;min-width:20px;text-align:center;font-size:11px;font-weight:700;
  padding:1px 6px;border-radius:10px;background:var(--panel-2);color:var(--muted)}
.s-so-gap{background:var(--warn-bg);color:var(--warn)}
.s-muc.active .s-so{background:rgba(0,0,0,.18);color:var(--on-brand)}
/* Thu gọn: số đếm thành chấm nhỏ góc icon, vẫn thấy là "có việc" */
html.side-gon .s-so{position:absolute;margin:-14px 0 0 16px;min-width:0;padding:0;
  width:8px;height:8px;border-radius:50%;font-size:0;background:var(--warn)}
html.side-gon .s-muc{position:relative}

/* Khối "Tải Excel" bung ra */
.s-xo-hop{display:none;padding:6px 8px 8px 10px}
.s-xo.mo .s-xo-hop{display:block}
.s-xo.mo .s-mui{transform:rotate(180deg);display:inline-block}
.s-mui{color:var(--muted);font-size:11px}
.s-con{display:block;padding:6px 8px;color:var(--ink);border-radius:6px;font-size:13px}
.s-con:hover{background:var(--panel-2);text-decoration:none}
.s-form{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.s-form-t{font-weight:600;font-size:12px;margin-bottom:6px;color:var(--ink)}
.s-form label{display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-bottom:5px;font-size:11px;color:var(--muted)}
.s-form input{width:105px;padding:3px 5px;font-size:12px}
html.side-gon .s-xo-hop{display:none !important}

/* Người dùng + đăng xuất ở đáy */
.s-ai{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:13px;color:var(--ink)}
/* Dòng người dùng là LINK đổi mật khẩu (24/08/2026) — gợi ý bằng chữ nhỏ, hiện khi rê chuột
   để lúc bình thường menu vẫn gọn. */
.s-doi-mk{display:block;font-size:11px;color:var(--muted);margin-top:1px;opacity:0;
  transition:opacity .12s}
.s-ai:hover .s-doi-mk{opacity:1}
html.chan-gon .s-doi-mk{display:none}
.s-ai .role{margin-left:6px}
.s-thoat{color:var(--muted)}
.s-thoat:hover{background:var(--err-bg);color:var(--err)}

/* Cột nội dung bên phải */
.cot-chinh{flex:1;min-width:0;display:flex;flex-direction:column}
/* ⚠ width:100% BẮT BUỘC: `.cot-chinh` là flex DỌC, mà con flex có margin auto ngang thì CO
   THEO NỘI DUNG -> tab hồ sơ nào ít chữ (📎 Chứng từ, 📋 Việc) là cả trang hẹp lại, bấm qua
   lại thấy khung phình/co (Sếp bắt được 17/09/2026). Có width thì max-width vẫn chặn trần. */
.cot-chinh .container{margin-top:22px;width:100%}
.cot-chinh .foot{margin-top:auto}

/* Thanh trên cùng — CHỈ hiện trên điện thoại/màn hẹp */
.thanh-mobile{display:none;align-items:center;gap:10px;background:var(--topbar);
  padding:8px 14px;border-bottom:2px solid var(--brand);position:sticky;top:0;z-index:30}
.tm-logo{height:22px;width:auto}
.man-che{display:none}

@media (max-width:900px){
  .thanh-mobile{display:flex}
  .side{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);
    transition:transform .16s ease;width:250px;flex-basis:250px}
  .side.mo{transform:translateX(0)}
  .man-che.hien{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:35}
  .container{padding:0 14px;margin-top:16px}
  html.side-gon .s-chu{display:inline}   /* trên mobile luôn hiện chữ đầy đủ */
  html.side-gon .s-muc{justify-content:flex-start;padding:7px 10px}
  html.side-gon .s-nhom{font-size:11px;padding:14px 10px 6px}
}

/* In ấn: giấu hẳn menu (2 trang in hóa đơn vốn đứng riêng, đây là phòng xa) */
@media print{
  .side,.thanh-mobile,.man-che,.foot{display:none !important}
  .shell{display:block}
}

/* ══════════════ POPUP TÓM TẮT HỒ SƠ KHÁCH (22/08/2026) ══════════════
   Bấm 📋 Xem hồ sơ ở danh sách khách -> <dialog> nạp mảnh crm_tom_tat.html.
   Chia NHÓM có tiêu đề chứ không đổ một cột dài — đó chính là thứ Sếp yêu cầu:
   nhìn phát biết khách đang ở bước nào, tiền tới đâu, hàng đi chưa. */
.tt-hop{width:min(900px,94vw);max-height:88vh;padding:0;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);color:var(--ink);overflow:hidden}
.tt-hop::backdrop{background:rgba(0,0,0,.55)}
#tomTatRuot{max-height:88vh;overflow-y:auto;padding:18px 20px 22px}
.tt-dong{position:absolute;top:8px;right:10px;z-index:2;border:none;background:transparent;
  color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:6px 8px}
.tt-dong:hover{color:var(--ink)}

/* Chừa chỗ cho nút ✕ ở góc phải — không chừa thì nút "Mở hồ sơ đầy đủ" nằm chồng lên nó */
.tt-dau{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;padding-right:34px;
  border-bottom:2px solid var(--brand);padding-bottom:10px;margin-bottom:4px}
.tt-ten{margin:0 0 4px;font-size:19px}
.tt-phu{font-size:13px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tt-dau .btn{margin-left:auto}

.tt-nhom{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  background:var(--panel-2)}
.tt-nhom-h{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:8px}
.tt-ghi{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.tt-ghichu{margin:0;font-size:13px;line-height:1.55;white-space:pre-wrap}

/* Việc còn lại: gạch đầu dòng có màu theo mức khẩn — đỏ là phải làm hôm nay */
.tt-viec{margin:0;padding-left:18px;font-size:13.5px;line-height:1.75}
.tt-viec .tt-err{color:var(--err);font-weight:700}
.tt-viec .tt-warn{color:var(--warn)}
.tt-viec .tt-ok{color:var(--muted)}

/* Chuỗi bước của thương vụ: bước xong ✓ xanh, bước chưa tới thì mờ */
.tt-buoc{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;
  font-size:13px;counter-reset:b}
.tt-buoc li{flex:1 1 190px;border:1px solid var(--line);border-radius:8px;padding:6px 9px;
  background:var(--panel)}
.tt-buoc li::before{margin-right:6px;font-weight:700}
.tt-buoc li.xong::before{content:"✅";}
.tt-buoc li.chua::before{content:"⬜";}
.tt-buoc li.chua{opacity:.62}
.tt-buoc li .muted{display:block;font-size:11.5px;margin-left:22px}

/* Lưới ô số liệu: nhãn nhỏ trên, số to dưới */
.tt-o-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.tt-o{border:1px solid var(--line);border-radius:8px;padding:6px 9px;background:var(--panel)}
.tt-o span{display:block;font-size:11.5px;color:var(--muted)}
.tt-o span i{font-style:normal;opacity:.8}
.tt-o b{font-size:15px}

.tt-bang{font-size:13px}
.tt-bang td,.tt-bang th{padding:5px 8px}

.tt-chan{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--line)}

@media (max-width:640px){
  .tt-buoc li{flex:1 1 100%}
  #tomTatRuot{padding:14px}
}

/* Hồ sơ của sale khác: form bị khóa -> làm MỜ cho thấy rõ là không thao tác được.
   Chỉ là phần NHÌN; việc khóa thật do JS đặt `disabled`, và máy chủ chặn lần cuối. */
.chi-xem{opacity:.5}
.chi-xem input,.chi-xem select,.chi-xem textarea,.chi-xem button{cursor:not-allowed}

/* Bảng người dùng: ô sửa họ tên tại chỗ + ô chọn người bàn giao khi xóa */
.hang-ten{display:flex;gap:6px;align-items:center;margin:0}
.hang-ten input{min-width:150px;height:30px;padding:2px 8px}
.chon-nho{height:28px;padding:0 6px;font-size:12px;width:auto;max-width:190px}

/* ═══════════ THANH TIẾN ĐỘ THƯƠNG VỤ (22/08/2026) ═══════════
   Vẽ cho `crm.cac_buoc()` — macro ở `templates/_thanh_tien_do.html`.
   Dùng ở: hồ sơ khách (trên cùng), popup tóm tắt, và bản tí hon trong danh sách khách.
   ⚠ Thanh KHÔNG bao giờ được làm vỡ bố cục trang: 8 bước cần ~780px, hẹp hơn thì
   `.tdo-boc` tự cuộn NGANG trong lòng nó, không đẩy cả bảng ra ngoài màn hình. */
.tdo-khung{border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:10px 12px 6px;margin:10px 0 14px}
.tdo-dau{font-size:13.5px;margin-bottom:2px}
.tdo-dau b{font-size:14px}
.tdo-nay{color:var(--brand-chu)}
.tdo-boc{overflow-x:auto;padding:10px 2px 4px}
.tdo{display:flex;list-style:none;margin:0;padding:0;min-width:780px}
.tdo-b{flex:1 1 0;position:relative;text-align:center;padding:0 4px}
/* Đường nối nằm SAU chấm (z-index 0) và vẽ về bên TRÁI của chấm hiện tại */
.tdo-noi{position:absolute;top:16px;left:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.tdo-b:first-child .tdo-noi{display:none}
.tdo-b.xong .tdo-noi{background:var(--ok)}
.tdo-cham{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:var(--panel-2);
  font-size:16px;line-height:1}
/* Số thứ tự 1..8 (24/08/2026): huy hiệu nhỏ đè lên góc trái-trên của chấm — nhìn thanh là
   biết đang ở bước mấy mà không phải đếm bằng mắt. Đặt z-index trên chấm, không đẩy layout. */
.tdo-so{position:absolute;z-index:2;top:-4px;left:50%;margin-left:-27px;
  min-width:17px;height:17px;padding:0 3px;border-radius:9px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
  font-size:11px;font-weight:700;line-height:15px;text-align:center}
.tdo-b.xong .tdo-so{border-color:var(--ok);color:var(--ok)}
.tdo-b.dang .tdo-so{border-color:var(--brand);color:var(--brand-chu)}
.tdo-b.tam .tdo-so{border-color:var(--warn);color:var(--warn)}
.tdo-b.canh-bao .tdo-so{border-color:var(--err);color:var(--err)}
.tdo-ten{display:block;font-size:13px;font-weight:600;margin-top:6px}
.tdo-ghi{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.tdo-b.xong .tdo-cham{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.tdo-b.dang .tdo-cham{border-color:var(--brand);background:var(--tdo-cham-nen);color:var(--brand-chu);
  box-shadow:0 0 0 4px rgba(253,213,4,.18)}
.tdo-b.dang .tdo-ten{color:var(--brand-chu)}
.tdo-b.canh-bao .tdo-cham{border-color:var(--err);background:var(--err-bg);color:var(--err);
  box-shadow:0 0 0 4px rgba(248,113,113,.14)}
.tdo-b.canh-bao .tdo-ghi{color:var(--err)}
.tdo-b.chua .tdo-ten{font-weight:400;color:var(--muted)}
/* Bước bị NHẢY CÓC: gạch đứt + mờ hẳn — cho thấy "không dùng", khác hẳn "còn thiếu" */
.tdo-b.bo-qua{opacity:.45}
.tdo-b.bo-qua .tdo-cham{border-style:dashed}
.tdo-b.bo-qua .tdo-ten{font-weight:400;text-decoration:line-through}

/* Bản TÍ HON trong bảng danh sách khách: 8 vạch, rê chuột hiện đủ chữ */
.tdo-vach{display:inline-flex;gap:3px;margin-top:5px;cursor:help}
.tdo-vach i{display:block;width:13px;height:7px;border-radius:2px;background:var(--line-2)}
.tdo-vach i.xong{background:var(--ok)}
.tdo-vach i.dang{background:var(--brand)}
.tdo-vach i.canh-bao{background:var(--err)}
.tdo-vach i.bo-qua{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}

@media (max-width:900px){
  .tdo{min-width:700px}
  .tdo-ten{font-size:12px}
}

/* ═══════════ DÒNG THỜI GIAN THƯƠNG VỤ — vùng ⑦ (22/08/2026) ═══════════
   Trộn lần chạm khách (💬) với mốc sổ sách (💰 tiền · 🧾 đơn · ✍ hợp đồng · 📦 giao).
   Dựng bởi `crm.dong_thoi_gian()`. Cột ngày cố định để mắt dò theo hàng dọc. */
.dtg{list-style:none;margin:8px 0 0;padding:0;border-left:2px solid var(--line);
  margin-left:6px}
.dtg li{display:flex;gap:10px;align-items:baseline;padding:5px 0 5px 12px;position:relative;
  font-size:14px}
.dtg li::before{content:"";position:absolute;left:-5px;top:12px;width:8px;height:8px;
  border-radius:50%;background:var(--line-2)}
.dtg-ngay{flex:0 0 82px;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.dtg-icon{flex:0 0 18px;text-align:center}
.dtg-chu{flex:1;min-width:0}
/* Tiền là mốc quan trọng nhất của thương vụ -> nổi hẳn lên */
.dtg-tien::before{background:var(--ok)}
.dtg-tien .dtg-chu{color:var(--ok);font-weight:600}
.dtg-don::before{background:var(--brand)}
.dtg-hop_dong::before{background:var(--brand)}
.dtg-giao::before{background:var(--brand)}
.dtg-cham_soc::before{background:var(--line-2)}
/* Cấn trừ = phân bổ tiền có sẵn, KHÔNG phải tiền mới về -> để nhạt hơn mốc 💰 tiền về */
.dtg-tien_gan::before{background:var(--ok-line)}
.dtg-tien_gan .dtg-chu{color:var(--muted)}

/* ⭐ QUY ƯỚC MÀU CỦA TIỀN (Sếp chốt 22/08/2026) — áp cho thanh tiến độ lẫn cột tiền:
   🟢 xanh = đã thu đủ · 🔴 đỏ = đã gán đơn mà còn phải thu · 🟡 vàng = tiền đã về nhưng
   CHƯA gán vào đơn nào (khách trả trước). Vàng là "đang dở", KHÔNG phải lỗi. */
.tdo-b.tam .tdo-cham{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.tdo-b.tam .tdo-ten{color:var(--warn)}
.tdo-b.tam .tdo-ghi{color:var(--warn)}
.tdo-vach i.tam{background:var(--warn)}

/* ═══════════ CO/GIÃN CỘT BẢNG KHÁCH HÀNG (Sếp 22/08/2026) ═══════════
   Tên khách là thứ mắt tìm đầu tiên -> cho rộng hẳn. 3 cột tiền chỉ cần vừa con số:
   `width:1%` + `nowrap` là mẹo chuẩn để trình duyệt co cột về đúng bề ngang nội dung,
   phần dư trả hết cho cột tên. */
.col-kh{min-width:200px}
.col-tien{width:1%;white-space:nowrap;padding-left:6px;padding-right:8px}

/* ═══════════ NÚT "❓ Hướng dẫn" CẠNH TIÊU ĐỀ VÙNG (22/08/2026) ═══════════
   Phần giải thích dài dọn vào popup cho màn hình gọn, nhưng người mới vẫn đọc được
   cách dùng ngay tại chỗ. Nút đẩy sát mép phải bằng margin-left:auto. */
.vung-co-nut{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nut-hd{margin-left:auto;font-weight:600}
.hd-ruot{max-height:88vh;overflow-y:auto;padding:18px 20px 22px}
.hd-ds{margin:6px 0 0;padding-left:20px}
.hd-ds li{margin-bottom:5px}
.hd-canh{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:var(--warn-bg);
  border:1px solid var(--warn-line);font-size:13.5px}
/* Bảng giải nghĩa từng ô: cột trái là TÊN Ô -> giữ hẹp và không xuống dòng */
.hd-bang td:first-child{width:150px;white-space:nowrap;vertical-align:top;color:var(--brand-chu)}
.hd-bang td{border-bottom:1px solid var(--line);padding:7px 8px;font-size:13.5px}

/* ═══════ TAB THƯƠNG VỤ (v1.43.0 · 26/08/2026) ═══════
   Mỗi khách nhiều thương vụ, mỗi cái một tab ở vùng ④. Tab chỉ dành cho thương vụ CHƯA
   XONG — xong rồi thì nằm trong khối <details> 📦 bên dưới. */
.tv-tab-thanh{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.tv-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;
  background:var(--panel-2,transparent);border:1px solid var(--line);border-radius:9px;
  padding:8px 14px;color:var(--ink);font-size:13.5px;text-align:left;min-width:150px}
.tv-tab:hover{border-color:var(--brand)}
/* Tab đang mở: viền + gạch chân màu thương hiệu, đủ rõ để nhìn lướt biết mình đang ở đâu */
.tv-tab.hien{border-color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}
.tv-tab .muted{font-size:12px}
.tv-tab-tien{font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
/* 4 ô số của riêng một thương vụ (giá trị · đã thu · còn lại · hóa đơn) */
.tv-tien{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin:12px 0 14px;padding:12px;border:1px solid var(--line);border-radius:9px}
.tv-tien > div{display:flex;flex-direction:column;gap:2px}
.tv-tien b{font-size:16px;font-variant-numeric:tabular-nums}
.tv-tien .muted{font-size:12px}
/* Nút trong vùng thương vụ: chữ dài ("💾 Lưu thương vụ") bị bó thành 3 dòng vì `.btn-row`
   cho phép co — giữ nút trên MỘT dòng. */
#vung-thuongvu .btn-row .btn{white-space:nowrap;flex:0 0 auto}

/* ═══════════ THANH TAB CHA CỦA HỒ SƠ KHÁCH (v1.46.0 · 28/08/2026) ═══════════
   Sếp: "màn hình CRM chỉnh lại cho trực quan — dùng từng tab mỗi vùng, tab nhiều thương vụ
   trong 1 khách là TAB CON". Hai cấp tab phải NHÌN KHÁC HẲN nhau, nếu không người dùng tưởng
   đang đứng cùng một hàng: tab CHA gạch chân đậm chạy ngang cả trang, tab CON (`.tv-tab`)
   là các thẻ vuông có viền.
   ⚠ Ẩn/hiện CHỈ có hiệu lực khi <html> mang class `crm-co-tab` — class đó do JS gắn. Không
   JS thì không khối nào bị ẩn, trang lùi về dạng cuộn dài như trước chứ KHÔNG trắng trang. */
.crm-tabs{display:flex;flex-wrap:wrap;gap:2px;margin:14px 0 0;
  border-bottom:2px solid var(--line-2)}
.crm-tab{appearance:none;background:transparent;border:0;border-bottom:3px solid transparent;
  margin-bottom:-2px;padding:10px 16px;cursor:pointer;color:var(--muted);font-size:15px;
  font-weight:600;display:flex;align-items:center;gap:7px;white-space:nowrap;border-radius:8px 8px 0 0}
.crm-tab:hover{color:var(--ink);background:var(--panel-2)}
.crm-tab.hien{color:var(--brand-chu);border-bottom-color:var(--brand)}
.crm-tab-so{display:inline-block;min-width:20px;padding:1px 6px;border-radius:10px;
  background:var(--line-2);color:var(--ink);font-size:12px;font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums}
.crm-tab.hien .crm-tab-so{background:var(--brand);color:var(--on-brand)}
html.crm-co-tab [data-vung]{display:none}
html.crm-co-tab [data-vung].hien{display:block}

/* ═══════════ TAB CON CỦA MỘT THƯƠNG VỤ (v1.49.0 · 17/09/2026) ═══════════
   CẤP 3 — phải nhìn KHÁC cả `.crm-tab` (gạch chân ngang trang) lẫn `.tv-tab` (thẻ có viền):
   một DẢI nút liền nhau trên nền tối, nút đang mở nền vàng thương hiệu.
   ⚠ Cùng luật an toàn với tab cha: CHỈ ẩn khi <html> có `crm-co-tab` (JS gắn). */
/* ⭐ Sếp chốt 18/09/2026: 6 tab con tô XANH cho nổi bật, khác hẳn màu vàng thương hiệu của
   tab cha + thẻ thương vụ — nhìn lướt là biết mình đang ở cấp nào. */
.tvn-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 14px;padding:5px;
  background:var(--tvn-nen);border:1px solid var(--tvn-vien);border-radius:10px}
.tvn-tab{appearance:none;border:0;background:transparent;color:var(--tvn-chu);cursor:pointer;
  padding:8px 14px;border-radius:7px;font-size:14px;font-weight:600;white-space:nowrap;
  display:flex;align-items:center;gap:6px}
.tvn-tab:hover{color:var(--ink);background:var(--tvn-hover)}
.tvn-tab.hien{background:var(--tvn);color:var(--dao);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tvn-tab.hien .crm-tab-so{background:var(--dao);color:var(--tvn)}
.tvn-dau{font-size:13px;line-height:1}
html.crm-co-tab .tvn-ruot{display:none}
html.crm-co-tab .tvn-ruot.hien{display:block}
/* ➡ Nút "tới chỗ làm" của một việc (v1.50.0) — nút thường, chỉ đậm chữ; màu để dành cho
   trạng thái (luật màu 28/09/2026). */
.btn-di{font-weight:700;margin-left:8px;white-space:nowrap}
.btn-di:hover{border-color:var(--brand);color:var(--brand-chu)}
.cho-lam{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px;
  padding:10px 12px;border:1px solid var(--tvn-vien);background:var(--tvn-nen);border-radius:9px}
/* Nhãn "thuộc thương vụ nào" trong danh sách chứng từ / việc của cả hồ sơ */
.tep-tv{display:inline-block;margin-top:2px;padding:1px 7px;border-radius:9px;font-size:12px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink)}

/* 🧾 Bảng sản phẩm — ô nhập nằm TRONG ô bảng nên bỏ viền dày, giữ chiều cao đều */
.sp-bang input{height:34px;padding:4px 8px;font-size:14px}
.sp-bang input.r{text-align:right}
.sp-bang td{vertical-align:middle}
.sp-bang tfoot td{border-bottom:0;padding-top:6px}
.sp-tt,.sp-hang,.sp-vat,.sp-tong{font-variant-numeric:tabular-nums;white-space:nowrap}

/* 🛒 Hiện trạng lô hàng — sale nhìn chỗ này để hẹn khách, nên chữ TO */
.hang-hien{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--panel-2)}
.hang-dau{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hang-icon{font-size:30px;line-height:1}
.hang-ten{font-size:18px}
.hang-ngay{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end}
.hang-ngay b{font-size:18px}
.hang-buoc{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:12px 0 0;padding:0}
.hang-buoc li{flex:1 1 120px;padding:6px 8px;border-radius:7px;font-size:13px;text-align:center;
  border:1px dashed var(--line-2);color:var(--muted)}
.hang-buoc li span{margin-right:4px}
/* 29/09/2026: ngày lô hàng TỚI từng chặng, nằm ngay dưới tên chặng */
.hang-buoc-ngay{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--muted)}
.hang-buoc li.xong{border-style:solid;border-color:var(--ok-line);background:var(--ok-bg);color:var(--ink)}
.hang-buoc li.dang{border-style:solid;border-color:var(--brand);color:var(--ink);font-weight:700;
  box-shadow:0 0 0 2px rgba(253,213,4,.18)}

/* 🛒 v1.54.0 — MỖI LÔ ĐẶT HÀNG một thẻ (thương vụ nhiều mã đặt ở nhiều nơi). Chỉ dùng biến
   màu có sẵn — LUẬT MÀU đầu file: không đẻ màu mới, nổi bằng viền + khoảng trắng. */
.lo-the{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:14px}
.lo-qt{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line-2)}
/* 💰 v1.54.0 — kế toán xác nhận dòng sale báo tiền ngay trong bảng: ô nhỏ, một hàng */
.dt-xn{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin:2px 0}
.dt-xn input,.dt-xn select{height:32px;padding:4px 8px;font-size:13px}

/* 🚚 Tổng giao hàng: trạng thái + 4 con số */
.giao-tong{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(4,minmax(110px,1fr));
  gap:10px;padding:12px;border:1px solid var(--line);border-radius:9px;align-items:center}
.giao-tong > div{display:flex;flex-direction:column;gap:2px}
.giao-tong b{font-size:16px;font-variant-numeric:tabular-nums}
.giao-tong .muted{font-size:12px}
.giao-tt{flex-direction:row !important;align-items:center;gap:6px !important;font-size:15px}
.giao-xong b{color:var(--ok)}
.giao-dang b{color:var(--brand-chu)}
.dot-nhan{display:flex;gap:6px;align-items:center}
.dot-nhan input{width:120px;height:32px;padding:4px 8px;font-size:13px}
@media(max-width:780px){
  .giao-tong{grid-template-columns:1fr 1fr}
  .giao-tt{grid-column:1 / -1}
  .hang-ngay{margin-left:0;align-items:flex-start}
}
@media(max-width:680px){
  .crm-tabs{gap:0}
  .crm-tab{padding:9px 11px;font-size:14px}
}


/* ── HÀNG Ô LỌC (trang /don) ───────────────────────────────────────────
   Trước đây mỗi ô lọc mang một inline-style riêng (flex-direction:column,
   min-width khác nhau) còn 2 nút dùng .btn-sm cao ~26px đứng cạnh input
   cao 38px → cả hàng so le, nhãn mỗi ô một độ cao.
   Gom lại: nhãn cùng một dòng 16px, MỌI ô điều khiển và nút ép đúng
   --loc-cao nên đáy và đỉnh đều thẳng hàng. */
.loc-hang{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin-bottom:14px}
.loc-o{display:flex;flex-direction:column;gap:4px;min-width:0}
.loc-o>span{font-size:12px;line-height:16px;color:var(--muted);font-weight:600;
  letter-spacing:.2px;white-space:nowrap}
.loc-hang input,.loc-hang select{width:100%;height:var(--loc-cao,38px);
  padding:0 10px;font-size:14px}
.loc-hang .btn{height:var(--loc-cao,38px);padding:0 14px;font-size:13px;
  display:inline-flex;align-items:center;white-space:nowrap}
.loc-hang .loc-info{height:var(--loc-cao,38px);display:flex;align-items:center;font-size:13px}
/* Bề ngang từng ô: đặt ở đây thay vì inline để sửa một chỗ là xong.
   ⚠ Tiền tố PHẢI là `lo-`, KHÔNG được dùng `.o-tong`/`.o-kh`: `.o-tong` đã là
   khối tổng tiền có viền + nền riêng của form bán hàng — đặt trùng tên thì ô lọc
   ăn luôn cái viền đó, phình ra và lệch hẳn khỏi hàng (đã dính thật 15/09/2026).
   Ô "Tổng tiền" phải rộng 220px, hẹp hơn là nuốt mất gợi ý "vd 2000000 hoặc >2000000". */
.loc-o.lo-kh{width:200px}
.loc-o.lo-sapo{width:150px}
.loc-o.lo-tt{width:150px}
.loc-o.lo-thu{width:160px}
.loc-o.lo-tong{width:220px}
/* Dòng "Khớp … đơn" đẩy sang phải bằng margin-left:auto, KHÔNG dùng <span class="grow">:
   grow là một ô flex thật, hàng chật một chút là nó đẩy dòng thông tin xuống hàng dưới. */
.loc-hang .loc-info{margin-left:auto}
@media(max-width:680px){
  .loc-o{flex:1 1 46%;width:auto}
  .loc-hang .loc-info{margin-left:0}
}

/* ═══════ 🌅 HÔM NAY CỦA TÔI (v1.53.0 · 28/09/2026) ═══════
   4 ô số bấm được, rồi 3 khối việc. Màu theo LUẬT MÀU ở đầu file: đỏ = có việc phải làm,
   vàng = đang chờ mình, còn lại xám. */
.hn-dau{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.hn-so{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.hn-o{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:132px;
  padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  color:var(--ink);text-decoration:none}
.hn-o:hover{border-color:var(--brand);text-decoration:none}
.hn-o b{font-size:24px;font-variant-numeric:tabular-nums;line-height:1.1}
.hn-o span{font-size:12px;color:var(--muted);text-align:center}
.hn-o.hn-do{border-color:var(--err-line);background:var(--err-bg)}
.hn-o.hn-do b{color:var(--err)}
.hn-o.hn-vang{border-color:var(--warn-line);background:var(--warn-bg)}
.hn-o.hn-vang b{color:var(--warn)}
@media(max-width:780px){.hn-so{margin-left:0}.hn-o{flex:1 1 42%;min-width:0}}

/* "⋯ Bộ lọc khác" — gấp mấy mục ít dùng để menu sale ngắn lại (v1.53.0) */
.s-them{margin:2px 0 6px}
.s-them > summary{list-style:none;cursor:pointer;padding:7px 12px;margin:0 8px;
  color:var(--muted);font-size:13px;border-radius:8px}
.s-them > summary::-webkit-details-marker{display:none}
.s-them > summary:hover{background:var(--panel-2);color:var(--ink)}
.s-them[open] > summary{color:var(--ink)}
html.side-gon .s-them > summary{font-size:0;text-align:center}
html.side-gon .s-them > summary::after{content:"⋯";font-size:15px}

/* ⭐⭐ NỀN SÁNG CHỈ ÁP CHO VÙNG LÀM VIỆC — CỘT MENU TRÁI GIỮ NGUYÊN NỀN TỐI (Sếp chốt 30/09/2026).
   Bản 28/09 cho cả menu sáng theo: rê chuột ra nền vàng nhạt + chữ vàng trên nền trắng, không
   đọc nổi; logo KAMTRADING chữ trắng cũng phải vá riêng một dải tối. Nay khai lại TOÀN BỘ bảng
   màu tối ngay trên `.side` (+ thanh trên điện thoại, cùng mang logo) — biến CSS kế thừa theo
   cây nên mọi thứ bên trong menu tự về đúng màu bản tối, không phải vá từng mục.
   ⚠ Thêm biến màu mới mà menu có dùng thì khai thêm ở đây, không thì menu thủng một chỗ sáng. */
html[data-nen="sang"] .side,
html[data-nen="sang"] .thanh-mobile{
  --bg:#16181d; --panel:#1f2228; --panel-2:#24272e; --topbar:#0d0e11;
  --ink:#f0f0f0; --muted:#9aa3af; --line:#313640; --line-2:#3c424d;
  --warn:#fbbf24; --warn-bg:#3a2f12; --warn-line:#7c5e16;
  --err:#f87171;  --err-bg:#3a1d1d;  --err-line:#7f2d2d;
  --ok:#4ade80;   --ok-bg:#16301f;   --ok-line:#2c6b41;
  --lien-ket:#FDD504; --o-nen:#13151a; --nut-hover:#2e323b; --side-chu:#d3d7de;
  --dam-chu:#fff; --dao:#16181d; --vien-mo:rgba(255,255,255,.35);
  --brand-chu:#FDD504; --hover-nen:rgba(253,213,4,.14);
  color-scheme:dark;
}

/* 🌗 Nút đổi nền Sáng / Tối ở chân menu (v1.53.0) — mỗi người một kiểu, lưu theo tài khoản */
.s-nen{display:flex;gap:6px;padding:6px 10px 2px}
.s-nen button{flex:1;padding:5px 8px;border-radius:7px;border:1px solid var(--line-2);
  background:var(--panel-2);color:var(--muted);font-size:12px;cursor:pointer;font-family:inherit}
.s-nen button.dang{background:var(--brand);border-color:var(--brand);color:var(--on-brand);
  font-weight:700}
html.side-gon .s-nen{flex-direction:column;padding:6px 6px 2px}
html.side-gon .s-nen button{font-size:0;padding:5px 0}
html.side-gon .s-nen button::after{font-size:13px}
html.side-gon .s-nen button[value="toi"]::after{content:"🌙"}
html.side-gon .s-nen button[value="sang"]::after{content:"☀"}

/* ══════════════ 🏢 QUẢN TRỊ NỘI BỘ — quantri.kamtrading.vn (v1.60.0 · 08/10/2026) ══════════════
   Quỹ chi Linh ghi HẰNG NGÀY trên điện thoại → nút chọn là CHIP to, bấm một phát (không bắt mở
   ô sổ xuống). Chip đang chọn dùng vàng thương hiệu = "đang chọn" (cùng vai với tab đang mở),
   KHÔNG phải màu nghĩa — đúng LUẬT MÀU đầu file. Chỉ dùng biến màu có sẵn → nền sáng tự đúng. */
.qt-dau{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.qt-dau h1{margin-right:auto}
.qt-thang{display:flex;align-items:center;gap:8px;white-space:nowrap}
.qt-chon-quy select{height:34px}
.qt-h2{font-size:16px;margin:0 0 10px}
.qt-h3{font-size:14px;margin:14px 0 6px;color:var(--muted)}
.qt-nhan-nhom{font-size:13px;color:var(--muted);margin:6px 0 4px}
.qt-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.qt-chip{position:relative;cursor:pointer}
.qt-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.qt-chip span{display:inline-block;padding:9px 14px;border:1px solid var(--line-2);border-radius:20px;
  background:var(--panel-2);font-size:14px;line-height:1.2;user-select:none}
.qt-chip:hover span{background:var(--nut-hover)}
.qt-chip input:checked + span{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700}
.qt-chip input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.qt-loai .qt-chip span{padding:10px 18px;font-weight:600}
.qt-rong{flex:3 1 280px !important}
.qt-nut-ghi{width:100%;max-width:420px}
.qt-nut-hang{display:flex;gap:10px;margin-top:6px}
.qt-tick{display:flex;align-items:center;gap:6px;font-size:14px;margin-top:var(--cao-nhan, 20px);white-space:nowrap}
.qt-thieu{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.qt-ngay{padding:10px 14px}
.qt-ngay-dau{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.qt-bang td{vertical-align:top}
.qt-bang tr:last-child td{border-bottom:0}
.qt-nd{font-size:13px;color:var(--muted);margin-top:2px}
.qt-anh-o,.qt-thao-tac{width:1%;white-space:nowrap}
.qt-thao-tac form{display:inline}
.qt-tong td{font-weight:700;border-top:2px solid var(--line-2)}
.qt-cuon{overflow-x:auto}
@media (max-width:640px){
  .qt-tach{grid-template-columns:1fr}
  /* 4 thẻ số tiền xếp 1 cột chiếm nửa màn hình điện thoại -> lưới 2 cột, chữ nhỏ lại */
  .qt-cards{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
  .qt-cards .card{padding:10px}
  .qt-cards .card-v{font-size:19px}
  .qt-cards .muted{font-size:12px}
  .qt-chip span{padding:10px 12px}
  .qt-bang td{padding:7px 4px}
}