/* Kiểu dáng riêng của Dashboard Quản Lý Bán Hàng (DBBH).
   Bộ biến màu và phần khung/đăng nhập nằm trong <style> của index.html — file này
   chỉ lo phần NỘI DUNG các tab (thẻ số, biểu đồ, bảng, bộ lọc).
   29/08/2026: thay da theo chuẩn "Kho liên kết ĐVP" — biến cũ (--teal, --xam…)
   nay là bí danh trỏ vào bộ chuẩn (--t600, --muc2…), khai ở index.html.
   Bản cũ: ban-cu-thay-da/bh-truoc-thay-da.css · bảng màu: MAU-NHAN-DIEN.md.

   LUẬT MÀU (CHUAN-GIAO-DIEN.md mục 1): đơn sắc teal. Màu chỉ dùng để BÁO TRẠNG
   THÁI cần xử lý (đỏ/cam/vàng). Nhiều đối tượng cùng loại thì chung một tông,
   phân biệt bằng icon + tên in đậm — cấp mỗi người một màu riêng đã bị Sếp chê
   "củ chuối" ngày 29/07/2026, phải gỡ hết.
   Ngoại lệ DUY NHẤT: hệ màu của biểu đồ (--bd1..--bd6) — cột chồng mà cùng tông
   thì không đọc được. Hệ này không được tràn ra bảng. */

:root{
  /* Dải màu riêng cho biểu đồ, đi từ teal đậm sang cam — cùng gia đình nhận
     diện ĐVP, không phải cầu vồng ngẫu nhiên. */
  --bd1:#067686; --bd2:#2b98a5; --bd3:#6fbcc2; --bd4:#f9a41c; --bd5:#dd8b05;
  --bd6:#a8724a; --bd7:#8fa3ad; --bd8:#c9d6db;
  --luoi:#e8eef0;
}

/* ── Lưới bố cục ─────────────────────────────────────────────────────────
   Tận dụng tối đa khung nhìn (yêu cầu của Sếp): thẻ tự co theo bề rộng thật,
   không khoá số cột cứng. minmax(min(...,100%),1fr) là để trên màn 390px thẻ
   không bị đẩy rộng hơn màn hình gây cuộn ngang. */
.luoi{display:grid;gap:13px}
.luoi.the6{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.luoi.g2{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.luoi.g3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}

/* ── Thẻ số lớn ─────────────────────────────────────────────────────────── */
.so-lon{background:#fff;border:1px solid var(--vien);border-radius:15px;
  padding:14px 16px;border-top:3px solid var(--teal);box-shadow:var(--b1)}
.so-lon .nhan{font-size:12px;color:var(--xam);text-transform:uppercase;
  letter-spacing:.3px;font-weight:600}
.so-lon .gia-tri{font-size:26px;font-weight:800;color:var(--teal-dam);
  line-height:1.2;margin:3px 0 2px;word-break:break-word}
.so-lon .phu{font-size:12px;color:var(--xam);line-height:1.4}
/* Thẻ cần chú ý (Công nợ) — cam, vì đây là số PHẢI đọc kèm chú thích. */
.so-lon.canh{border-top-color:var(--cam)}
.so-lon.canh .gia-tri{color:var(--cam-dam)}

/* ── Chú thích trung thực ────────────────────────────────────────────────
   Luật riêng của dự án (CHUAN-GIAO-DIEN.md mục 4): số suy đoán phải TỰ KHAI là
   suy đoán, và mọi tỉ lệ phải kèm tử số + mẫu số. Khối này in thường trực,
   KHÔNG được thu gọn hay giấu sau nút bấm. */
.that-tha{margin-top:13px;padding:11px 13px;border-radius:9px;font-size:12.5px;
  line-height:1.55;background:var(--vang);border-left:3px solid var(--cam);color:#6d4a00}
.that-tha b{color:#4a3200}
.that-tha ul{margin:6px 0 0;padding-left:19px}
.that-tha li{margin:3px 0}

/* ── Bảng dữ liệu ────────────────────────────────────────────────────────
   table-layout:fixed + % cột đặt sẵn. KHÔNG để auto: một ô gộp "không có dữ
   liệu" sẽ kéo lệch cả cột khi bảng có hàng nghìn dòng (CHUAN-GIAO-DIEN mục 2). */
.cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.bh{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13.5px}
table.bh th,table.bh td{padding:8px 9px;text-align:right;
  border-bottom:1px solid var(--vien);vertical-align:top}
table.bh th{background:var(--t50);color:var(--teal-dam);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.2px;font-weight:700;
  position:sticky;top:0;z-index:1}
table.bh td{overflow:hidden;text-overflow:ellipsis}
table.bh .trai{text-align:left}
/* Tên/mục chính in đậm để rà mắt nhanh (mục 2.2). */
table.bh .ten{font-weight:700;color:var(--muc)}
table.bh tbody tr:nth-child(even){background:#fafcfc}
table.bh tbody tr:hover{background:var(--t50)}
table.bh tr.tong td{border-top:2px solid var(--teal);font-weight:800;
  background:var(--t50);color:var(--teal-dam)}
/* Chữ dài do người dùng nhập: kẹp 2 dòng + tooltip title. Không kẹp thì dòng
   cao vọt và bảng nhấp nhô (mục 2.3). */
.kep2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35}
.trong{color:var(--xam);font-style:italic}

/* Mỗi bảng một min-width riêng: table-layout:fixed + width:100% trên màn 375px
   sẽ bóp mỗi cột còn ~12px, chữ nát. Có min-width thì .cuon mới cứu được (mục 2.5). */
table.bh.w-top{min-width:660px}
/* Bảng KPI có tới 8 cột cố định + n cột loại giá, mà cột tiền phải chứa được số
   13 chữ số kiểu "13.574.384.377đ". Ở 1080px các cột tiền bị cắt cụt giữa số
   ("5.043.217…") — nhìn ảnh chụp mới phát hiện. Nới lên 1380px rồi để .cuon lo
   phần cuộn ngang; con số bị cắt là giấu dữ liệu của Sếp, không chấp nhận được. */
table.bh.w-kpi{min-width:1380px}

/* ── Biểu đồ tự vẽ bằng SVG ──────────────────────────────────────────────
   Không thêm thư viện (ràng buộc dự án) — vẽ tay theo lối /doanh-thu/. */
.bd{width:100%;height:auto;display:block}
.bd-cuon{overflow-x:auto}
.chu-giai{display:flex;flex-wrap:wrap;gap:5px 15px;margin-top:9px;font-size:12.5px}
.chu-giai span{display:inline-flex;align-items:center;gap:5px}
.o-mau{width:11px;height:11px;border-radius:3px;flex:none}

/* ── Bộ lọc ──────────────────────────────────────────────────────────────── */
.thanh-loc{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.o-loc{display:flex;flex-direction:column;gap:4px}
.o-loc label{font-size:11.5px;font-weight:700;color:var(--xam);text-transform:uppercase}
.o-loc input,.o-loc select{padding:8px 10px;border:1.5px solid var(--vien);
  border-radius:10px;outline:none;background:#fff;
  transition:border-color .18s var(--nhip),box-shadow .18s var(--nhip)}
.o-loc input:focus,.o-loc select:focus{border-color:var(--t500);
  box-shadow:0 0 0 4px rgba(11,143,161,.13)}
.nut-p{padding:8px 14px;border:1.5px solid var(--teal);background:#fff;color:var(--teal);
  border-radius:10px;font-weight:700;font-size:13.5px;display:inline-flex;
  align-items:center;gap:7px;
  transition:background .18s var(--nhip),transform .18s var(--nhip),border-color .18s}
.nut-p:hover{background:var(--t50);transform:translateY(-1px)}
/* Nút hành động chính mang màu NHẤN cam — mỗi khung nhìn chỉ 1 nút (chuẩn 1B).
   Chữ nâu sẫm #40260a trên nền cam để đạt tương phản ≥ 4.5:1. */
.nut-p.chinh{background:var(--cam);color:#40260a;border-color:var(--cam);
  box-shadow:0 4px 14px -4px rgba(249,164,28,.7)}
.nut-p.chinh:hover{background:var(--cam-dam);border-color:var(--cam-dam)}
.nut-p.nhe{border-color:var(--vien);color:var(--xam);font-weight:600}
.nut-p.nhe:hover{background:#f5f7f8}
.nut-p:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* Nhóm nút chọn chiều gom nhóm (tab Nhân sự). Dạng phân đoạn liền khối để
   thấy rõ "chỉ chọn được một". */
/* 29/08: đổi sang kiểu máng segmented của chuẩn Kho liên kết — cùng hình thức
   với dãy tab chính, nút đang chọn là thẻ TRẮNG nổi lên. */
.nhom-chieu{display:inline-flex;background:#eaf0f2;border-radius:12px;padding:3px;
  gap:3px;flex-wrap:wrap}
.nhom-chieu button{background:transparent;border:none;border-radius:10px;
  padding:8px 14px;font-weight:600;font-size:13px;color:var(--muc2);
  transition:color .18s,background .18s var(--nhip)}
.nhom-chieu button:hover{background:rgba(255,255,255,.65)}
.nhom-chieu button.chon{background:#fff;color:var(--teal-dam);font-weight:700;
  box-shadow:var(--b1)}

/* ── Ô tích chọn nhiều giá trị ───────────────────────────────────────────
   CHUAN-GIAO-DIEN mục 3: KHÔNG làm thành thẻ. Một khung viền bao ngoài, các
   dòng ngăn bằng kẻ 1px. Dòng đang chọn chỉ cần nền teal rất nhạt + tên đậm
   màu teal, không cần viền dày (đổi kiểu này từng giảm dòng 74px → 47px). */
.khung-tich{border:1.5px solid var(--vien);border-radius:12px;overflow:hidden;background:#fff}
.khung-tich .dong{display:flex;align-items:center;gap:9px;padding:8px 12px;
  border-bottom:1px solid var(--vien);cursor:pointer;font-size:13.5px}
.khung-tich .dong:last-child{border-bottom:none}
.khung-tich .dong:hover{background:#f5fafb}
.khung-tich .dong.chon{background:var(--t50)}
.khung-tich .dong.chon .nh{font-weight:700;color:var(--teal-dam)}
.khung-tich input[type=checkbox]{width:16px;height:16px;accent-color:var(--teal);flex:none;margin:0}
.khung-tich .nh{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.khung-tich .dem{font-size:11.5px;color:var(--xam);flex:none}

/* ── Chip / huy hiệu ─────────────────────────────────────────────────────── */
.chip{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11.5px;
  font-weight:700;background:var(--t50);color:var(--teal-dam)}
.chip.tt{background:var(--do-nhat);color:#a12727}      /* trạng thái cần xử lý */
.chip.tc{background:var(--cam-nhat);color:#7a5300}
.chip.ok{background:var(--xanh-nhat);color:#116040}    /* BANHANG.SOATSHIP — TRÒN SỐ = OK */
/* BANHANG.SOATSHIP — vạch ngăn phần ĐỐI SOÁT ship, dưới các bảng Giao Vận hiện có */
.ds-vach{margin-top:24px;padding:10px 16px;border-radius:10px;background:var(--teal);
  color:#fff;font-weight:800;font-size:13.5px}
.ds-vach2{margin:16px 0 8px;padding:8px 14px;border-radius:10px;background:var(--t50);
  color:var(--teal-dam);font-weight:800;font-size:12.5px;border:1px solid var(--teal)}
.dang-tai{padding:26px;text-align:center;color:var(--xam);font-size:13.5px}

/* ══════════════════════════════════════════════════════════════════════════
   TASK 8 — TAB KIỂM SOÁT GIÁ VÀ TAB KIỂM SOÁT ĐIỂM
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Thẻ cờ bấm được ─────────────────────────────────────────────────────
   Mỗi cờ là một nút bấm ra bảng chi tiết. Dùng <button> thật chứ không phải
   <div onclick> để bàn phím Tab tới được và trình đọc màn hình đọc ra.
   Màu chỉ để BÁO MỨC (đỏ/cam/vàng) — đúng luật màu mục 1 CHUAN-GIAO-DIEN. */
.luoi.co{grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr))}
.the-co{background:#fff;border:1px solid var(--vien);border-radius:15px;
  padding:13px 15px;border-top:3px solid var(--xam);text-align:left;
  font-family:inherit;font-size:inherit;cursor:pointer;box-shadow:var(--b1);
  transition:transform .22s var(--nhip),box-shadow .22s var(--nhip),
  border-color .22s var(--nhip);
  display:flex;flex-direction:column;gap:2px;width:100%}
/* Thẻ bấm được: nhấc −3px như ô vuông của chuẩn (hiệu ứng 2, mục 8) */
.the-co:hover{border-color:var(--teal);transform:translateY(-3px);
  box-shadow:0 2px 5px -1px rgba(16,38,46,.06), 0 16px 28px -12px rgba(6,118,134,.35)}
.the-co.dang{border-color:var(--teal);background:var(--t50);
  box-shadow:0 0 0 2px rgba(6,118,134,.16)}
.the-co .dau{display:flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:700;color:var(--muc);line-height:1.3}
.the-co .dau .bi{font-size:14px;flex:none}
.the-co .so{font-size:25px;font-weight:800;line-height:1.15;margin:2px 0}
.the-co .phu{font-size:11.5px;color:var(--xam);line-height:1.4}
/* Ba mức cờ — thống nhất với chip trạng thái. */
.the-co.m-do{border-top-color:var(--do)}      .the-co.m-do .so{color:#b8302f}
.the-co.m-cam{border-top-color:var(--cam)}    .the-co.m-cam .so{color:var(--cam-dam)}
.the-co.m-vang{border-top-color:#e0c250}      .the-co.m-vang .so{color:#8a6d00}
/* Cờ đang tắt (cờ vàng ẩn mặc định): vẫn thấy con số nhưng nhạt đi, kèm nhãn
   "đang ẩn" — KHÔNG được giấu hẳn, giấu là Sếp tưởng không có vi phạm. */
.the-co.tat{opacity:.62;border-top-style:dashed;background:#fbfcfc}
.the-co .nhan-an{font-size:10.5px;font-weight:700;color:var(--xam);
  background:#eef1f3;border-radius:9px;padding:1px 7px;align-self:flex-start;margin-top:3px}
/* Cờ chưa kiểm được vì thiếu khai báo (diem-nhom-cam). Phải khác hẳn cờ = 0
   thật, nếu không Sếp đọc "0" thành "không có vi phạm". */
.the-co.chua-khai{border-top-color:var(--xam);border-style:dashed;background:#fbfbfa}
.the-co.chua-khai .so{color:var(--xam);font-size:19px}

/* ── Ô tiền để RIÊNG (giá ngoại lệ) ──────────────────────────────────────
   721,6 triệu của `gia-ngoai-le` là GIÁ TRỊ ĐƠN CHỜ DUYỆT, không phải tiền
   mất. Quyết định đã chốt: không cộng gộp vào tổng thiệt hại. Ô này cố ý
   trình bày khác hẳn ô tổng thiệt hại để mắt không gộp hai con số lại. */
.hai-o{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.o-tien{border-radius:15px;padding:14px 16px;border:1px solid var(--vien);background:#fff;
  box-shadow:var(--b1)}
.o-tien .nh{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.o-tien .gt{font-size:27px;font-weight:800;line-height:1.2;margin:3px 0}
.o-tien .gg{font-size:12px;line-height:1.45}
.o-tien.mat{border-left:4px solid var(--do);background:#fef7f7}
.o-tien.mat .nh{color:#a12727} .o-tien.mat .gt{color:#b8302f} .o-tien.mat .gg{color:#8d4444}
.o-tien.cho{border-left:4px solid var(--cam);background:#fffaf0}
.o-tien.cho .nh{color:#7a5300} .o-tien.cho .gt{color:var(--cam-dam)} .o-tien.cho .gg{color:#7a5300}

/* ── Nhóm nút chuyển chuẩn so giá ────────────────────────────────────────
   Dùng lại hình thức .nhom-chieu để người dùng nhận ra ngay "chỉ chọn một". */
.thanh-cong-cu{display:flex;gap:11px 15px;align-items:center;flex-wrap:wrap;margin-top:11px}

/* ── Bảng chi tiết cờ ────────────────────────────────────────────────────
   Cắt cụt số tiền là giấu dữ liệu của Sếp (bài học Task 7 khi nhìn ảnh chụp).
   Bản cũ 11 cột / 1620px: ở 1460px cột cuối «Bộ phận ĐH» bị đẩy khuất mép phải
   — nhìn ảnh chụp mới thấy, phép đo cột vẫn báo lệch 0px vì các dòng đều khuất
   giống nhau.
   08/09 Sếp chốt gộp còn 9 cột (giá chuẩn xuống dưới giá bán, bộ phận ĐH xuống
   dưới nhân viên) ⇒ hạ min-width để màn 1440px xem TRỌN, không phải cuộn ngang
   nữa. 390px vẫn để .cuon lo cuộn như mọi bảng khác.
   ⚠ ĐO THẬT rồi mới chốt số, đừng suy từ 1440: ở màn 1440px khung `.cuon` chỉ
   còn 1071px (thẻ .the + lề trang ăn mất 369px). Lượt đầu đặt 1180px vẫn cuộn
   ngang — chỉ lộ ra khi hỏi scrollWidth/clientWidth của ĐÚNG khung .cuon.
   1060 là mức thấp nhất còn nuôi đủ 6 cột không co được (ngày · số CT · mã hàng
   · 3 cột tiền) theo số đo canvas — xuống nữa là cắt cụt tiền hoặc bẻ đôi mã. */
table.bh.w-co{min-width:1060px}
/* Dòng phụ nhỏ dưới ô chính của bảng cờ: «Giá chuẩn: …» dưới giá bán, bộ phận
   ĐH dưới nhân viên. Cùng cỡ với .ma-kh-phu để ba tầng phụ nhìn thành một hệ,
   không tranh đậm với dòng chính. .gia-chuan-phu bám phải theo ô tiền. */
.gia-chuan-phu,.bo-phan-phu{display:block;font-size:10.5px;font-weight:600;
  color:var(--muc3);margin-top:2px;line-height:1.35;overflow-wrap:anywhere}
/* .trong đặt nghiêng + xám nhạt; giữ nguyên cỡ nhỏ của dòng phụ, không để nó
   nhảy về cỡ chữ mặc định. */
.gia-chuan-phu.trong,.bo-phan-phu.trong{font-size:10.5px}
/* Số chứng từ và mã hàng là chuỗi KHÔNG có khoảng trắng, dài tới 18 ký tự
   (mã đơn sàn kiểu 581985649949246732). `overflow:hidden` đặt chung cho mọi td
   sẽ cắt cụt chúng giữa chừng — mà cắt cụt số chứng từ thì Sếp không tra lại
   được đơn, đúng kiểu giấu dữ liệu mà luật dự án cấm. Cho phép xuống dòng
   giữa ký tự để hiện đủ. Phát hiện được nhờ đo scrollWidth > clientWidth. */
table.bh td.ma-dai{overflow-wrap:anywhere;word-break:break-all;white-space:normal}
/* Cột NGÀY: dd/mm/yyyy là 10 ký tự KHÔNG có khoảng trắng để xuống dòng, nên
   cột hẹp thì `text-overflow:ellipsis` cắt thành "28/08/20…" — mất hẳn năm,
   Sếp không đọc được ngày. Ở 1000px cột 9% chỉ còn 72px chỗ chữ, thiếu vài px.
   Nới bảng lên 1080px + cột 10% (≈90px chỗ chữ) và khoá nowrap + số đều bề
   ngang, để ngày luôn hiện đủ ở cả 1440px lẫn 390px (390px thì .cuon lo cuộn). */
table.bh.w-diem{min-width:1080px}
table.bh th.ngay,table.bh td.ngay{white-space:nowrap;font-variant-numeric:tabular-nums}
table.bh.w-giu{min-width:860px}
/* Ô mức cờ trong bảng: chấm màu + chữ, không tô nền cả dòng — tô nền cả dòng
   thì bảng nghìn dòng nhìn như cầu vồng, đúng thứ Sếp đã chê. */
.dau-muc{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-weight:700;font-size:12px}
.dau-muc i{width:9px;height:9px;border-radius:50%;flex:none}
.dau-muc.m-do{color:#b8302f}   .dau-muc.m-do i{background:var(--do)}
.dau-muc.m-cam{color:#8a5a00}  .dau-muc.m-cam i{background:var(--cam)}
.dau-muc.m-vang{color:#8a6d00} .dau-muc.m-vang i{background:#e0c250}
/* Số tiền thiệt hại trong bảng — in đậm để mắt bắt ngay cột quan trọng nhất. */
table.bh td.tien-do{font-weight:800;color:#b8302f}
table.bh td.am{color:var(--do);font-weight:700}

/* ── Đồng hồ điểm treo ───────────────────────────────────────────────────
   Con số rủi ro tài chính lớn nhất của bộ dữ liệu (3,58 tỉ) — Sếp yêu cầu
   cho nó vị trí nổi bật, nên đây là khối lớn nhất của tab. */
/* 29/08: nền đổi sang công thức KHOANG TỐI của chuẩn Kho liên kết (mục 6):
   vệt sáng radial + dải 3 sắc + lưới chấm mờ — cùng hệ màu với header. */
.dong-ho{background:
    radial-gradient(760px 220px at 12% -10%, rgba(11,143,161,.5), transparent 68%),
    linear-gradient(150deg,#062b33 0%,#07414c 60%,#065c69 100%);
  color:#fff;border-radius:16px;padding:20px 22px;position:relative;overflow:hidden;
  box-shadow:0 20px 46px -24px rgba(6,43,51,.9)}
.dong-ho::before{content:"";position:absolute;inset:0;opacity:.42;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000,transparent 72%);
  mask-image:radial-gradient(120% 90% at 20% 0%,#000,transparent 72%)}
.dong-ho > *{position:relative;z-index:1}
.dong-ho .nh{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;
  opacity:.85;font-weight:700}
.dong-ho .gt{font-size:40px;font-weight:800;line-height:1.1;margin:5px 0 2px;
  word-break:break-word}
.dong-ho .gg{font-size:13px;opacity:.9;line-height:1.5}
.dong-ho .vach{display:flex;gap:9px 26px;flex-wrap:wrap;margin-top:13px;
  padding-top:13px;border-top:1px solid rgba(255,255,255,.22)}
.dong-ho .vach div{font-size:12.5px;opacity:.9}
.dong-ho .vach b{display:block;font-size:17px;font-weight:800;opacity:1}
@media(max-width:640px){
  .dong-ho .gt{font-size:29px}
  /* ⚠ 02/09/2026 — 4 vạch phải xếp 2×2 cho ĐỀU. Bản `flex-wrap` ở trên sizing
     theo nội dung, mà 4 nhãn dài ngắn khác nhau nên ở 390px nó ngắt thành
     1–2–1: một ô một hàng, rồi hai ô, rồi một ô — đúng kiểu "thẻ so le" Sếp
     cấm. (Lộ ra sau khi đổi nhãn sang "Điểm dương đang treo" / "Khách đang giữ
     điểm dương" cho vụ tổng DƯƠNG — nhãn dài thêm nên mới vỡ.)
     Grid 2 cột giữ lề trái hai cột thẳng hàng; `margin-top:auto` đẩy con số
     xuống đáy ô, nên hai số cùng hàng vẫn thẳng nhau dù nhãn 1 dòng hay 2 dòng.
     CHỈ đụng ≤640px — bố cục desktop Sếp đã duyệt giữ nguyên từng byte. */
  .dong-ho .vach{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .dong-ho .vach div{display:flex;flex-direction:column}
  .dong-ho .vach b{margin-top:auto}
}

/* ── Thanh trượt mô phỏng ────────────────────────────────────────────────
   Không thêm thư viện: dùng <input type=range> gốc của trình duyệt. */
.mo-phong{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin:4px 0 13px}
.mo-phong input[type=range]{flex:1;min-width:210px;accent-color:var(--teal);height:22px}
.mo-phong .muc{font-size:13px;color:var(--xam);white-space:nowrap}
.mo-phong .muc b{font-size:19px;color:var(--teal-dam)}
.nut-nhanh{display:flex;gap:7px;flex-wrap:wrap}
.nut-nhanh button{padding:5px 13px;border:1.5px solid var(--vien);background:#fff;
  color:var(--teal-dam);border-radius:10px;font-weight:700;font-size:12.5px;
  transition:border-color .18s var(--nhip),background .18s var(--nhip)}
.nut-nhanh button:hover{border-color:var(--teal);background:var(--t50)}
.nut-nhanh button.chon{background:var(--teal);color:#fff;border-color:var(--teal)}
/* Kết quả mô phỏng — con số này là GIẢ ĐỊNH nên phải trình bày như giả định,
   không được để lẫn với số đo thật ở trên. */
.ket-mo-phong{background:var(--t50);border:1px dashed var(--teal);border-radius:12px;
  padding:13px 15px;font-size:13.5px;line-height:1.6}
.ket-mo-phong .to{font-size:25px;font-weight:800;color:var(--teal-dam);
  display:block;margin:2px 0}

/* ── Khối cảnh báo điểm âm ───────────────────────────────────────────────
   418 khách điểm ÂM = đã tiêu nhiều hơn số từng tích. Có thể là lỗ hổng cho
   trừ quá số dư, nên tách hẳn ra một khối riêng chứ không nhét vào chú thích. */
.canh-am{background:var(--do-nhat);border-left:4px solid var(--do);border-radius:10px;
  padding:13px 15px;font-size:13px;line-height:1.6;color:#8d3535}
.canh-am b{color:#a12727}
.canh-am .to{font-size:22px;font-weight:800;color:#b8302f}

/* Dòng trống của bảng — khi cờ không có dòng nào. */
.trong-bang{padding:24px;text-align:center;color:var(--xam);font-size:13.5px;
  background:#fcfdfd;border:1.5px dashed var(--vien);border-radius:11px}

/* ── Task 9: tab 5 Vùng · tab 6 Giao vận · tab 7 Cảnh báo ─────────────────
   ⚠ Bài học Task 8: `table-layout:fixed` + `width:100%` mà KHÔNG đặt min-width
   thì cột cuối bị đẩy khuất mép phải trên màn hẹp — và phép đo "cột lệch 0px"
   KHÔNG bắt được lỗi này vì mọi dòng đều khuất giống hệt nhau. Chỉ nhìn ảnh
   chụp mới thấy. Nên mỗi bảng phải tự khai min-width đủ rộng cho số cột của nó.

   Cách tính: cộng bề rộng tối thiểu đọc được của từng cột (cột tiền ~130px,
   cột chữ ~150px, cột số ~90px) rồi làm tròn lên. */
/* Thẻ số ở mức ĐỎ (nghi gian lận) — khác thẻ mức cam. Dùng chung một lớp cho
   cả hai mức thì thẻ có chấm đỏ mà con số lại vàng cam, người đọc hiểu nhầm
   mức nghiêm trọng. Màu ở đây là màu BÁO TRẠNG THÁI, đúng mục 1 của chuẩn. */
.so-lon.nguy{border-top-color:var(--do)}
.so-lon.nguy .gia-tri{color:#b8302f}

table.bh.w-vung{min-width:1080px}    /* 7 cột: vùng, khách, đơn, doanh thu, %, bình quân, loại */
/* Task 10 nới từ 1120px: bảng khách ngủ đông nay có 8 cột (thêm "Đã từng mua"
   là số tiền tới 10 chữ số và "Số đơn"). Giữ 1120px thì cột tiền bị cắt cụt
   giữa số — đúng lỗi đã mắc ở bảng KPI của Task 7. */
table.bh.w-ngu{min-width:1260px}     /* 8 cột khách ngủ đông */
table.bh.w-thang{min-width:1000px}   /* 6 cột theo tháng, 4 cột tiền */
table.bh.w-quan{min-width:1040px}    /* 6 cột theo quận */
table.bh.w-chanh{min-width:820px}    /* 4 cột nhà xe */
table.bh.w-tt{min-width:860px}       /* 4 cột tình trạng giao */
table.bh.w-cb{min-width:1180px}      /* 6 cột bảng xếp hạng cảnh báo */
table.bh.w-nap{min-width:1020px}     /* 6 cột nhật ký nạp */

/* ════════════════════════════════════════════════════════════════════════
   TAB KHAI BÁO (Task 10) — 6 bảng luật quản trị tự chỉnh
   ════════════════════════════════════════════════════════════════════════ */

/* Mỗi khai báo là một khối riêng, ngăn nhau rõ ràng để Sếp không sửa nhầm
   bảng này tưởng bảng kia. Viền teal nhạt theo đúng hệ màu ĐƠN SẮC của chuẩn
   giao diện — KHÔNG cấp cho mỗi khai báo một màu riêng (mục 1: nhiều đối
   tượng cùng loại dùng chung một tông, phân biệt bằng icon + tên in đậm). */
.khoi-kb{border:1.5px solid var(--vien);border-radius:15px;padding:0;
  margin-top:15px;overflow:hidden;background:#fff;box-shadow:var(--b1)}
.khoi-kb > .dau{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:11px 14px;background:var(--t50);border-bottom:1.5px solid var(--vien)}
.khoi-kb > .dau .bieu{font-size:18px;line-height:1}
.khoi-kb > .dau h3{margin:0;font-size:14.5px;font-weight:800;color:var(--teal-dam)}
.khoi-kb > .dau .dem{margin-left:auto;font-size:12px;font-weight:700;
  color:var(--teal);background:#fff;border:1.5px solid var(--vien);
  border-radius:999px;padding:3px 11px;white-space:nowrap}
.khoi-kb > .than{padding:13px 14px}
.khoi-kb .giai{font-size:12.5px;color:var(--xam);line-height:1.55;margin:0 0 11px}

/* Ô dán nhiều dòng (danh sách mã KH). Dùng phông đơn cách để mã thẳng hàng —
   mắt bắt ngay dòng nào lệch chuẩn khi dán từ Excel. */
.o-dan{width:100%;min-height:132px;padding:10px 11px;border:1.5px solid var(--vien);
  border-radius:10px;outline:none;font-family:ui-monospace,Consolas,monospace;
  font-size:13px;line-height:1.5;resize:vertical;background:#fcfdfd;
  transition:border-color .18s var(--nhip),box-shadow .18s var(--nhip)}
.o-dan:focus{border-color:var(--t500);background:#fff;
  box-shadow:0 0 0 4px rgba(11,143,161,.13)}

/* Hàng nút thao tác của mỗi khối. */
.hang-nut{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:11px}
.hang-nut .ghi-chu{font-size:12px;color:var(--xam)}

/* Kết quả sau khi lưu: bao nhiêu mã hợp lệ / bao nhiêu mã lạ.
   Ba mức dùng đúng bảng màu báo trạng thái của chuẩn, không thêm màu mới. */
.kq-kb{margin-top:11px;padding:10px 12px;border-radius:9px;font-size:12.5px;
  line-height:1.6;display:none}
.kq-kb.hien{display:block}
.kq-kb.ok{background:var(--xanh-nhat);border-left:3px solid var(--xanh);color:#14543b}
.kq-kb.canh{background:var(--vang);border-left:3px solid var(--cam);color:#6d4a00}
.kq-kb.xau{background:var(--do-nhat);border-left:3px solid var(--do);color:#8a2422}
.kq-kb b{font-weight:800}
.kq-kb ul{margin:6px 0 0;padding-left:19px}
.kq-kb code{background:#fff;border:1px solid var(--vien);border-radius:4px;
  padding:1px 5px;font-size:12px}

/* Bảng cặp "viết sai → viết đúng" của 3 khai báo chuẩn hoá. */
table.bh.w-cap{min-width:760px}      /* 4 cột: viết sai, viết đúng, ai sửa, thao tác */
/* ⚠ `td{overflow:hidden;text-overflow:ellipsis}` đặt chung ở trên sẽ NUỐT MẤT
   nút trong ô thao tác (CHUAN-GIAO-DIEN mục 2.4). Ô chứa nút phải mở lại. */
table.bh td.thao-tac{overflow:visible;text-overflow:clip}
.nut-xoa{padding:4px 10px;border:1.5px solid #e6c3c3;background:#fff;color:#b8302f;
  border-radius:7px;font-weight:700;font-size:12px;white-space:nowrap;
  transition:background .18s var(--nhip)}
.nut-xoa:hover{background:var(--do-nhat)}

/* Ô nhập cặp mới + ô nhập số (ngưỡng %). */
.hang-them{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.hang-them .o-loc input{min-width:190px}
.o-so{width:120px;padding:8px 10px;border:1.5px solid var(--vien);border-radius:8px;
  outline:none;font-weight:700;font-size:14px;text-align:right}
.o-so:focus{border-color:var(--teal)}

/* Khối "chỉ quản trị mới thấy" — nói rõ vì sao tab này khác các tab kia. */
.chi-qt{padding:11px 13px;border-radius:9px;font-size:12.5px;line-height:1.55;
  background:var(--t50);border-left:3px solid var(--teal);color:#134650;margin-top:11px}

@media(max-width:900px){
  .khoi-kb > .dau .dem{margin-left:0;width:100%}
}

@media(max-width:640px){
  .so-lon .gia-tri{font-size:22px}
  table.bh th,table.bh td{padding:7px 7px;font-size:12.5px}
  .the-co .so{font-size:21px}
  .o-tien .gt{font-size:22px}
}

/* ── Tab Nhóm SP (`BANHANG.NHOMSP`) — Sếp chỉnh 31/08/2026 ──────────────────
   Pill chọn nhóm theo PROMPT-TAB-PILL (nổi bật, mỗi nhóm một màu riêng),
   cỡ NHỈNH hơn pill tab (13.5px/icon 14px) để phân biệt với thanh tab trên. */
.pill-nhom{display:flex;gap:8px;flex-wrap:wrap;padding:6px 2px 8px;margin:-6px -2px -2px}
.pill-nhom button{background:var(--trang);border:1px solid var(--vien);border-radius:24px;
  padding:9px 16px 9px 8px;font-size:13.5px;font-weight:700;color:var(--muc);cursor:pointer;
  display:flex;align-items:center;gap:8px;box-shadow:var(--b1);
  transition:transform .18s var(--nhip),box-shadow .18s var(--nhip),
  border-color .18s,background .18s var(--nhip)}
.pill-nhom button .ic{width:14px;height:14px;stroke-width:2.2;color:#fff;flex-shrink:0;
  background:linear-gradient(145deg,var(--m,var(--t600)),var(--m2,var(--t700)));
  border-radius:50%;padding:5px;box-sizing:content-box}
.pill-nhom button:hover{transform:translateY(-2px);border-color:var(--mn,var(--t100));
  box-shadow:0 12px 22px -12px var(--m,var(--t600))}
.pill-nhom button.chon{background:linear-gradient(145deg,var(--m,var(--t600)),var(--m2,var(--t700)));
  border-color:var(--m2,var(--t700));color:#fff;box-shadow:0 6px 16px -6px var(--m,var(--t600))}
.pill-nhom button.chon .ic{background:rgba(255,255,255,.22)}
@media(max-width:700px){.pill-nhom button{padding:7px 12px 7px 7px;font-size:12.5px;gap:6px}}

/* Chip mẫu nhận diện trong màn Quản lý nhóm: GOM (teal) · LOẠI TRỪ (đỏ, nhãn
   "trừ:"). Nút × bỏ từng mẫu — Sếp chốt 31/08: thêm/bỏ được để gọt nhóm chính xác. */
.chips-mau{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px;min-height:26px}
.chip-mau{display:inline-flex;align-items:center;gap:5px;padding:4px 7px 4px 11px;
  border-radius:13px;font-size:12.5px;font-weight:600;line-height:1.3}
.chip-mau.gom{background:var(--t50);color:var(--t700);border:1px solid var(--t100)}
.chip-mau.loai{background:var(--do-nhat);color:#a12727;border:1px solid #f0cccc}
.chip-mau .x{border:0;background:transparent;cursor:pointer;font-size:14px;line-height:1;
  padding:1px 5px;border-radius:50%;color:inherit;font-weight:800}
.chip-mau .x:hover{background:rgba(0,0,0,.08)}

/* ── Khối MÀU của tab Nhóm SP — Sếp chốt 02/09/2026: dọc trang một tông teal
   thì các bảng nhìn chung chung, khó phân biệt vùng. Mỗi khối một bộ màu
   [--mk,--mk2,--mkn] từ bảng 16 màu chuẩn, thể hiện NHẸ: viền trái thẻ +
   tiêu đề + icon tròn gradient + nhuộm nhạt đầu bảng và dòng TỔNG — không đổ
   màu ra nền lớn. CHỈ tab Nhóm SP gắn class `km`, các tab khác không đụng. */
.the.km{border-left:3px solid var(--mk)}
.the.km>h2{color:var(--mk2)}
.the.km>h2::after{background:linear-gradient(90deg,var(--mkn),transparent)}
.the.km .ic-k{width:12px;height:12px;stroke-width:2.2;color:#fff;flex-shrink:0;
  background:linear-gradient(145deg,var(--mk),var(--mk2));border-radius:50%;
  padding:4px;box-sizing:content-box}
.the.km table.bh th{background:var(--mkn);color:var(--mk2)}
.the.km table.bh tr.tong td{border-top-color:var(--mk);background:var(--mkn);color:var(--mk2)}
.the.km table.bh tbody tr:hover{background:var(--mkn)}

/* ── Tab Đối soát + pill con tab Điểm (`BANHANG.DOISOAT` 07/09/2026) ─────────
   Dùng lại .pill-nhom cho dãy pill con; dưới đây chỉ là phần MỚI. */

/* Số đếm nhỏ trong pill — nhạt khi chưa chọn, nổi khi pill đang chọn. */
.pill-nhom button .dem{font-size:11px;font-weight:800;background:var(--t50);
  color:var(--t700);border-radius:9px;padding:1px 7px;line-height:1.5}
.pill-nhom button.chon .dem{background:rgba(255,255,255,.24);color:#fff}

/* ── Tab Giao vận: tab con PILL (`BANHANG.GIAOVAN` 05/10/2026 · bản chốt mockup-giaovan-tab-con-DA-CHOT-2026-10-05.html) ──
   Dùng lại .pill-nhom. Màn rộng: dấu .ngat ép 2 hàng THEO NGHĨA (giao vận chung | GHN thu hộ COD).
   Màn ≤700px: một hàng vuốt ngang — ĐỆM ÂM bắt buộc (overflow-x:auto ép overflow-y thành auto, không đệm là bóng bị cắt). */
#shipPill button{white-space:nowrap}
#shipPill .ngat{flex-basis:100%;height:0}
.phan-ship>.the:last-child{margin-bottom:0}
/* Khối «Hoá đơn vận chuyển chưa có phiếu» cuối pill 4 (`BANHANG.GIAOVAN` đợt 2): ô bảng 2 dòng (tờ / tiền),
   bảng ≥6 cột cuộn ngang ở 390 theo nếp table.bh.w-*, dãy lọc PILL cỡ nhỏ (lọc trong khối, nhỏ hơn thanh pill con). */
table.bh.w-hdthua{min-width:820px}
#dsHdThua .luoi + .cuon{margin-top:13px}       /* bảng tháng dính sát hàng thẻ — giữ nhịp 13px như các khối khác */
#dsHdThua .ghn-so-cu{white-space:normal}        /* ô Tháng hẹp ở 390: «số cũ lúc …» xuống dòng, không cụt */
table.bh.w-hdthua-ds{min-width:920px}
table.bh.w-hdthua-ds .chip{white-space:nowrap}   /* nhãn Loại/Mức không gãy dòng ⇒ hàng không cao gấp đôi khi bảng cuộn ở 390 */
table.bh .hd-tien{font-size:11.5px;color:var(--muc2);font-weight:500}
table.bh tr.tong .hd-tien{color:inherit}
.pill-nhom.nho{gap:6px;margin-bottom:9px}
.pill-nhom.nho button{padding:5px 11px;font-size:12px;font-weight:700;gap:6px;white-space:nowrap}
/* 6 thẻ tiền ship pill 1 chia 3 + 3 (Sếp chốt 05/10 — lưới tự xếp rớt 4 + 2, thừa 2 ô trống). */
.luoi.the6.ba-cot{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){
  #shipPill{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px 2px 16px;margin:-6px -2px -10px}
  #shipPill::-webkit-scrollbar{display:none}
  #shipPill .ngat{display:none}
  #shipPill button{flex:0 0 auto}
  .luoi.the6.ba-cot{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
  .pill-nhom.nho{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px 2px 16px;margin:-6px -2px -7px}
  .pill-nhom.nho::-webkit-scrollbar{display:none}
  .pill-nhom.nho button{flex:0 0 auto}
}

/* Hàng chọn tháng — nút chữ nhỏ, cuộn ngang trên màn hẹp. Bấm tháng = đặt bộ
   lọc CHUNG ở thanh trên (một nguồn sự thật, không đẻ bộ lọc riêng). */
.ds-thang{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.ds-thang button{border:1px solid var(--vien);background:var(--trang);color:var(--muc2);
  border-radius:9px;padding:5px 11px;font-size:12px;font-weight:700;
  transition:all .16s var(--nhip)}
.ds-thang button:hover{border-color:var(--t500);color:var(--t700)}
.ds-thang button.chon{background:var(--t600);border-color:var(--t700);color:#fff}

/* Hàng bộ lọc: ô tìm + các ô chọn — cùng chiều cao, bo góc thống nhất 9px. */
.ds-loc{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:2px 0 12px}
.ds-loc input[type="search"]{flex:1 1 240px;min-width:0;padding:8px 12px;
  border:1.5px solid var(--vien);border-radius:9px;outline:none;background:var(--trang)}
.ds-loc input[type="search"]:focus{border-color:var(--t500)}
.ds-loc select{padding:8px 9px;border:1.5px solid var(--vien);border-radius:9px;
  background:var(--trang);color:var(--muc);font-size:12.5px;max-width:190px}

/* Chip trạng thái đối soát — mỗi trạng thái MỘT màu, chữ đậm nhỏ, không loè. */
.chip-tt{display:inline-block;font-size:10.5px;font-weight:800;border-radius:7px;
  padding:2px 7px;white-space:nowrap;vertical-align:1px;margin-right:5px}
.chip-tt.xam{background:#eef1f2;color:#54666e}
.chip-tt.xanh{background:var(--xanh-nhat);color:#116040}
.chip-tt.lam{background:#e8effd;color:#1d4ed8}
.chip-tt.vang{background:var(--cam-nhat);color:#8a5a00}
.chip-tt.tim{background:#f1ecfd;color:#5b21b6}

/* Dòng bấm được — mở chi tiết đơn. */
tr.bam-duoc{cursor:pointer}
tr.bam-duoc:hover td{background:var(--t50)}

/* 1.200px chứ không 1.150px — nới 08/09/2026 để cột NGÀY 9% đủ 108px cho
   "07/09/2026" (đo được: cần 102px). Giữ 1.150 thì 9% chỉ ra 103px, sát quá —
   đổi cỡ chữ hay thêm một ký tự là cắt lại. Cùng bài học với `w-diem` ở dòng
   239-244; bảng này dùng lớp khác nên trước đó KHÔNG được hưởng bản vá đó.
   Đo lại bằng: scripts-khao-sat/do-cot-ngay-bi-cat.js */
table.bh.w-ds{min-width:1200px}
/* 20/09 (Sếp chốt): lớp phủ chi tiết đơn gộp 13→7 cột (gộp dọc) → bảng gọn hơn,
   hạ min-width cho đỡ cuộn ngang. Dòng phụ .o-phu = mã SKU / quy cách / loại giá /
   giá chuẩn / ngành 2 / mã kho xếp nhỏ dưới giá trị chính. */
table.bh.w-ct{min-width:760px}
.w-ct td .o-phu{font-size:11px;color:var(--muc3,#64748b);font-weight:400;margin-top:2px;line-height:1.35}
.w-ct td .o-phu.ma-dai{letter-spacing:.2px}

/* ── Đợt CHẤM SẴN 08/09/2026: băng tình trạng chấm · làm mờ · phân cổng ─────
   Ba lớp dưới đây phục vụ khung mới "máy chủ chấm sẵn, trình duyệt chỉ vẽ". */

/* Băng tình trạng chấm — nằm trong .bao.canh nên đã có nền vàng + viền trái.
   Nút «Chấm lại» cố ý mang màu CAM chứ không phải teal mặc định của .nut-p:
   trong khung nhìn này băng vàng đã là điểm nhấn, thêm nút teal là hai màu
   nhấn chọi nhau (chuẩn 1B: mỗi khung nhìn tối đa MỘT màu nhấn). */
.ds-bang-cham{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.ds-bang-cham>span{flex:1 1 320px;min-width:0}
.ds-bang-cham .nut-p{flex:none;padding:6px 12px;font-size:12.5px;gap:6px;
  border-color:var(--cam-dam);color:#7a5300}
.ds-bang-cham .nut-p:hover{background:#fff}
@media(max-width:640px){
  .ds-bang-cham .nut-p{width:100%;justify-content:center}
}

/* Đang tải lô mới: làm mờ bảng CŨ thay vì giật về màn trắng. Khoá luôn con
   trỏ — bảng đang mờ là bảng của bộ lọc CŨ, bấm vào là mở nhầm đơn. */
.mo-di{opacity:.45;pointer-events:none;transition:opacity .16s var(--nhip)}

/* Thanh phân cổng. Hai nút ép CÙNG bề ngang để cân hai bên dòng chữ giữa —
   để tự do thì "‹ Cổng trước" ngắn hơn "Cổng sau ›" và chữ giữa lệch trục. */
.ds-cong{display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--vien);
  font-size:12.5px;color:var(--muc2)}
.ds-cong .nut-p{padding:6px 12px;font-size:12.5px;min-width:120px;
  justify-content:center}
.ds-cong b{color:var(--muc);font-weight:800}
@media(max-width:640px){
  .ds-cong{gap:8px}
  .ds-cong span{order:-1;flex-basis:100%;text-align:center}
  .ds-cong .nut-p{flex:1 1 0;min-width:0}
}

/* ── Lớp phủ CHI TIẾT ĐƠN ──────────────────────────────────────────────────
   <div> phủ thường, KHÔNG dùng <dialog> (hai bẫy đã ghi sổ: inert + reset
   margin). Viền ≥1px tròn trịa — Chrome làm tròn viền mỏng hơn 1px. */
body.khoa-cuon{overflow:hidden}
.lop-phu{position:fixed;inset:0;z-index:80;background:rgba(6,43,51,.55);
  display:flex;align-items:flex-start;justify-content:center;
  padding:32px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  animation:phuHien .18s var(--nhip)}
@keyframes phuHien{from{opacity:0}to{opacity:1}}
.hop-ct{background:var(--trang);border-radius:16px;box-shadow:var(--b3);
  width:min(1080px,100%);padding:18px 20px 20px;animation:trolen .22s var(--nhip)}
.ct-dau{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;
  border-bottom:1px solid var(--vien);padding-bottom:11px;margin-bottom:12px}
.ct-tieu-de{font-size:16.5px;font-weight:800;letter-spacing:-.2px}
.ct-phu{font-size:12.5px;color:var(--muc2);margin-top:3px}
.ct-dong{border:1px solid var(--vien);background:var(--trang);border-radius:9px;
  width:34px;height:34px;font-size:19px;line-height:1;color:var(--muc2);flex:none}
.ct-dong:hover{background:var(--do-nhat);color:#a12727;border-color:#eccfcf}
/* Lưới thông số đơn: ô cùng cỡ, nhãn 11px trên — số đậm dưới, bám lưới 8px. */
.ct-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(172px,100%),1fr));
  gap:8px;margin-bottom:8px}
.ct-luoi.diem{background:var(--cam-nhat);border-radius:11px;padding:8px}
.ct-o{background:var(--nen);border:1px solid var(--vien);border-radius:10px;
  padding:8px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ct-luoi.diem .ct-o{background:#fff}
.ct-o span{font-size:11px;color:var(--muc2);font-weight:600}
.ct-o b{font-size:13.5px;font-weight:800;overflow-wrap:anywhere}
.ct-o b i{font-weight:600;color:var(--muc2);font-style:normal;font-size:12px}
.ct-chu-thich{font-size:12px;color:var(--muc2);background:var(--t50);
  border-left:3px solid var(--t500);border-radius:8px;padding:8px 11px;margin:0 0 12px}
/* Khối duyệt cuối lớp phủ — màu theo trạng thái, textarea + nút một hàng. */
.ct-duyet{border:1px solid var(--vien);border-radius:12px;padding:12px 13px;margin-top:13px}
.ct-duyet.cho-duyet{border-color:#f2ce8a;background:#fffaf0}
.ct-duyet.da-duyet{border-color:#d6c9f5;background:#faf8ff}
.ct-duyet-dau{font-size:13px;line-height:1.55}
.ct-duyet .ct-chu{color:var(--muc)}
.ct-hoso{font-size:12.5px;color:var(--muc2);margin-top:7px;background:var(--trang);
  border:1px dashed var(--vien-dam);border-radius:8px;padding:7px 10px}
.ct-duyet textarea{width:100%;margin-top:9px;padding:9px 11px;border:1.5px solid var(--vien);
  border-radius:9px;outline:none;resize:vertical;font-size:13px;background:var(--trang)}
.ct-duyet textarea:focus{border-color:var(--t500)}
.ct-nut{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}

/* ── Trang «Nguyên tắc» — thẻ rule 2 cột, mỗi thẻ 1 màu mép trái theo NGHĨA ── */
.nt-luoi{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.nt-the{border:1px solid var(--vien);border-left-width:4px;border-radius:12px;
  padding:12px 14px;background:var(--trang);font-size:13px;line-height:1.6}
.nt-the h3{margin:0 0 6px;font-size:13.5px;font-weight:800;letter-spacing:-.1px}
.nt-the p{margin:0 0 6px}
.nt-the ul{margin:2px 0 6px;padding-left:20px}
.nt-the.xanh{border-left-color:var(--xanh)}
.nt-the.vang{border-left-color:var(--cam);background:#fffdf7}
.nt-the.do{border-left-color:var(--do)}
.nt-the.lam{border-left-color:#2563eb}
.nt-the.tim{border-left-color:#7c3aed}
.nt-sua{display:block;font-size:11px;color:var(--muc3);margin-top:4px}

/* ── Khai báo nhóm gộp + bậc chiết khấu (tab Khai báo) ── */
.kb-bac{display:flex;flex-direction:column;gap:7px;margin:9px 0}
.kb-bac .hang{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.kb-bac input{width:110px;padding:7px 10px;border:1.5px solid var(--vien);border-radius:9px;
  outline:none;text-align:right;font-weight:700}
.kb-bac input:focus{border-color:var(--t500)}
.kb-bac .xoa-bac{border:1px solid var(--vien);background:var(--trang);border-radius:8px;
  width:30px;height:30px;color:var(--muc2);font-size:15px;line-height:1}
.kb-bac .xoa-bac:hover{background:var(--do-nhat);color:#a12727}

/* Mobile 390px: lớp phủ sát mép, lưới thông số 2 cột, bộ lọc xếp dọc. */
@media(max-width:640px){
  .lop-phu{padding:10px 8px}
  .hop-ct{padding:13px 12px 14px;border-radius:14px}
  .ct-luoi{grid-template-columns:1fr 1fr}
  .ds-loc select{max-width:100%;flex:1 1 46%}
  .ds-loc input[type="search"]{flex-basis:100%}
  .pill-nhom button .dem{padding:1px 6px}
}

/* ── Tab Tra cứu KH (`BANHANG.TRACUUKH` 07/09/2026) ─────────────────────────
   Chỉ thêm phần tab cũ CHƯA có; bảng/thẻ/bộ lọc dùng lại class chung ở trên. */
/* Lưới thông tin khách trong thẻ hồ sơ — tự co cột, khỏi cần media query. */
.tk-thongtin{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px 24px;margin-top:6px}
.tk-thongtin .muc{min-width:0}
.tk-thongtin .nhan{font-size:11.5px;font-weight:700;color:var(--muc2);
  text-transform:uppercase;letter-spacing:.4px}
.tk-thongtin .tri{font-size:13.5px;font-weight:600;margin-top:2px;overflow-wrap:anywhere}
/* Cụm không được ngắt giữa chừng (vd «Bán sỉ (G4)») — ngắt giữa hai cụm thì
   được, ngắt giữa tên và mã của CÙNG một cụm thì đọc ra nghĩa khác. */
.tk-thongtin .cum{white-space:nowrap}
/* Mã khách đứng cạnh tên trong h2 — nhỏ lại, không tranh đậm với tên. */
.ma-nho{font-size:12px;font-weight:600;color:var(--muc2);margin-left:8px}
/* Tiêu đề cột sắp xếp được (Ngày · Giá trị) — tr.bam-duoc ở trên chỉ phủ tr. */
th.bam-duoc{cursor:pointer;user-select:none}
th.bam-duoc:hover{text-decoration:underline}
/* Ô Từ/Đến đứng chung hàng với ô tìm: dóng đáy cho thẳng, ô tìm khỏi trôi giữa. */
.tk-loc{align-items:flex-end}

/* ── Tab Tra cứu SP (`BANHANG.TRACUUSP` 07/09/2026) ─────────────────────────
   Dòng BUNG: bấm một khách thì mở bảng con chi tiết từng lần mua ngay dưới
   dòng đó. Cố ý KHÔNG dùng lớp phủ — lớp phủ đã dành cho chi tiết đơn, lồng
   hai lớp sẽ nuốt ngữ cảnh; bung dòng còn cho mở nhiều khách để so sánh. */
table.bh tr.dang-mo > td{background:var(--t50);font-weight:700}
table.bh tr.bung > td{padding:0;background:#f7fafb;border-bottom:2px solid var(--vien)}
/* Bảng con KHÔNG kế thừa nền sọc/hover của bảng cha — nếu không, dòng chẵn của
   bảng ngoài đổ màu lên bảng trong làm hai tầng dữ liệu trông như một. */
.bung-trong{padding:10px 12px 12px}
.bung-tieu-de{font-size:12px;font-weight:700;color:var(--teal-dam);
  text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
table.bh.bung-bang{background:#fff;border:1px solid var(--vien);border-radius:10px;
  overflow:hidden;min-width:640px}
table.bh.bung-bang th{background:#eef4f5;position:static}
table.bh.bung-bang tbody tr:nth-child(even){background:#fbfdfd}
table.bh.bung-bang tbody tr:hover{background:var(--t50)}
table.bh.bung-bang td,table.bh.bung-bang th{padding:6px 9px;font-size:12.5px}
table.bh.bung-bang tbody tr:last-child td{border-bottom:none}

/* Dòng phụ «Mua trước: dd/mm · N ngày» dưới số chứng từ (Sếp chốt 07/09 tối) —
   chữ 10.5px xám, VƯỢT HẠN ĐIỂM thì đỏ đậm, khớp điều kiện cờ diem-qua-han. */
.mua-truoc{display:block;font-size:10.5px;font-weight:600;color:var(--muc2);
  margin-top:2px;white-space:nowrap;line-height:1.35}
.mua-truoc.do{color:var(--do);font-weight:700}

/* 07/09 (tối, Sếp soi ảnh): dòng «Mua trước» bị CẮT CỤT số ngày — cột Số CT
   khoá 13% bởi table-layout:fixed mà span lại nowrap (đúng bẫy width%+fixed đã
   ghi sổ). Cho xuống dòng TỰ NHIÊN theo khoảng trắng; phải gỡ cả
   word-break:break-all thừa kế từ td.ma-dai kẻo chữ bị bẻ giữa từ. */
.mua-truoc{white-space:normal;word-break:normal;overflow-wrap:break-word}

/* Mã khách hàng nhỏ dưới TÊN KHÁCH (bảng Đơn dùng điểm) — cùng cỡ dòng phụ. */
.ma-kh-phu{display:block;font-size:10.5px;font-weight:600;color:var(--muc3);
  margin-top:2px;line-height:1.35;overflow-wrap:anywhere}

/* «Cổng» phân trang bảng (Sếp chốt 07/09 tối) — hàng mỏng trên bảng: trái là
   cỡ cổng 50/100/200, phải là nút lật ‹ › + «Cổng x/y · dòng a–b / N». */
.thanh-trang{display:flex;gap:10px 16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin:2px 0 10px;font-size:12.5px;color:var(--muc2)}
.thanh-trang b{color:var(--t700)}
.thanh-trang button{border:1px solid var(--vien);background:var(--trang);color:var(--muc2);
  border-radius:8px;padding:3px 10px;font-size:12px;font-weight:700;line-height:1.5;
  transition:all .16s var(--nhip)}
.thanh-trang button:hover:not(:disabled){border-color:var(--t500);color:var(--t700)}
.thanh-trang button.chon{background:var(--t600);border-color:var(--t700);color:#fff}
.thanh-trang button:disabled{opacity:.4;cursor:not-allowed}
.thanh-trang .tt-co{display:flex;gap:5px;align-items:center}
.thanh-trang .tt-di{display:flex;gap:7px;align-items:center}
@media(max-width:640px){.thanh-trang{justify-content:flex-start}}

/* Ngày TẠO MÃ khách — dòng nhỏ thứ hai dưới mã KH (Sếp chốt 07/09 khuya),
   nhạt hơn mã một bậc để hai tầng phụ không tranh nhau. */
.ngay-tao-phu{display:block;font-size:10px;font-weight:600;color:var(--muc3);
  margin-top:1px;line-height:1.3;white-space:normal}

/* Nút «Xuất Excel bảng này» đứng trong hàng bộ lọc — đẩy sát mép phải để không
   dính vào ô chọn, và giữ đúng chiều cao 1 hàng với các ô lọc bên trái. */
.ds-loc .nut-xuat{margin-left:auto;white-space:nowrap;display:inline-flex;
  align-items:center;gap:7px;padding:8px 13px}
@media(max-width:640px){.ds-loc .nut-xuat{margin-left:0;width:100%;justify-content:center}}

/* Cặp nút xuất «Cổng này | Toàn bộ» — dính nhau thành một cụm, đẩy sát mép phải
   của hàng lọc. Nút «Toàn bộ» là nút chính (cam) vì đó là ý định thường gặp. */
.nhom-xuat{margin-left:auto;display:inline-flex;gap:7px;flex-wrap:wrap;align-items:center}
.nhom-xuat .nut-xuat{margin-left:0}
@media(max-width:640px){
  .nhom-xuat{margin-left:0;width:100%}
  .nhom-xuat .nut-xuat{flex:1 1 46%;justify-content:center}
}

/* ── Tab «Khách dùng điểm» (`BANHANG.KHACHDIEM` 09/09/2026) ───────────────── */
table.bh.w-kd{min-width:1040px}
/* Bảng đơn trong lớp phủ: nới 1100→1180px sau khi thêm cột Cờ + cột Soi. Hộp
   phủ rộng tới 1240px nên vẫn vừa, mà cột Ngày đủ chỗ in trọn «10/10/2023» —
   Sếp bắt được lỗi cắt năm 09/09: «phần ngày không thấy sao mà dò». */
table.bh.w-kd-don{min-width:1180px}
table.bh.w-kd-don .ngay{white-space:nowrap}
/* Ô ĐIỂM 3 tầng: dự kiến → đã dùng → Sthink ghi. Mỗi tầng một màu nghĩa, tiền
   quy đổi in nghiêng nhạt bên cạnh để không tranh mắt với số điểm. */
.o-diem{line-height:1.45}
.o-diem span{display:block;font-size:11.5px;color:var(--muc2);white-space:nowrap}
.o-diem span b{font-weight:800;color:var(--muc);font-size:12.5px}
.o-diem span i{font-style:normal;color:var(--muc3);font-size:10.5px}
.o-diem .d-dk b{color:var(--t700)}       /* dự kiến — teal */
.o-diem .d-dd b{color:var(--cam-dam)}    /* đã dùng — cam */
.o-diem .d-st b{color:#6d28d9}           /* Sthink ghi — tím */
/* Dòng phụ nhỏ dưới số (vd «12 đơn») — cùng thang với ma-kh-phu. */
.phu-nho{display:block;font-size:10.5px;font-weight:600;color:var(--muc3);margin-top:2px}
/* Chip cảnh báo trong bảng khách — xếp dọc cho khỏi tràn cột. */
.o-chip{line-height:1.5}
.chip-kd{display:inline-block;font-size:10px;font-weight:700;border-radius:6px;
  padding:1px 6px;margin:1px 3px 1px 0;white-space:nowrap}
.chip-kd.do{background:var(--do-nhat);color:#a12727}
.chip-kd.cam{background:var(--cam-nhat);color:#8a5a00}
/* Dòng khách đang bung bảng đơn + hàng chứa bảng đơn. */
tr.bam-duoc.dang-mo td{background:var(--t50);font-weight:600}
tr.hang-don td{background:#fbfcfd;padding:0}
tr.hang-don .bang-don-kh{padding:11px 13px 13px}
tr.hang-do td{background:var(--do-nhat)}
@media(max-width:640px){
  .o-diem span{font-size:11px}
  .chip-kd{font-size:9.5px}
}

/* Lớp phủ DANH SÁCH ĐƠN của một khách (Sếp chốt 09/09 lượt 2: bung tại chỗ gây
   loạn và không đóng được → tách ra popup). Rộng hơn hộp chi tiết đơn vì bảng
   đơn nhiều cột; z-index thấp hơn #lopPhuDon để chi tiết đơn nằm đè lên. */
#lopPhuKhach{z-index:75}
.hop-kh{width:min(1240px,100%)}
.hop-kh .bang-don-kh{margin-top:2px}
/* ── Sếp chốt 09/09 lượt 3 ────────────────────────────────────────────────────
   Ngày MUA GẦN NHẤT — tầng phụ thứ ba của cột Khách hàng, dưới «Tạo mã». Cho
   màu xanh chứ không xám như hai tầng trên: đây là thứ Sếp quét mắt tìm (khách
   nào còn giao dịch, khách nào đã bặt), nên nó được quyền nổi hơn nửa bậc. */
.ngay-mua-cuoi{display:block;font-size:10px;font-weight:700;color:#1d6fb8;
  margin-top:1px;line-height:1.3;white-space:normal}

/* Cột «Đã tiêu» — hai tầng cùng tử số (điểm đã dùng), khác mẫu: trên DỰ KIẾN và
   trên THỰC. Vênh nhau nghĩa là sổ Sthink không khớp nguyên tắc. Nhãn mẫu số in
   nhạt bên phải để mắt bám vào con số phần trăm. */
.o-tieu{line-height:1.5;text-align:right}
.o-tieu span{display:block;white-space:nowrap}
.o-tieu span b{font-weight:800;color:var(--muc);font-size:12.5px}
.o-tieu span i{font-style:normal;color:var(--muc3);font-size:10px;font-weight:600}
.o-tieu span.xau b{color:var(--do)}
/* «—» khi Sthink âm: KHÔNG tô đỏ. Đỏ ở cột này nghĩa là «khách tiêu gần hết
   điểm»; sổ âm là chuyện khác hẳn, đã có chip «Điểm âm» riêng. Trộn hai cảnh
   báo vào một màu là báo động oan — Codex soi 09/09, kho có 431 khách âm. */
.o-tieu span.ngo b{color:var(--muc3);font-weight:400}
.o-tieu span.ngo{cursor:help}

/* Cột «Điểm trừ ra tiền» — tiền điểm đã gán vào đơn + tỉ lệ trên tổng giá trị
   đơn TRƯỚC khi trừ (đã đo 09/09: thanh_tien là số trước trừ, xem luat.js).
   Dòng TỔNG có thêm tầng ba «/ tổng đơn» và «chiếm N%» in cam — đó là con số
   trả lời «chương trình điểm ăn vào doanh thu bao nhiêu» trên đúng tập đang lọc. */
.o-tien-diem{line-height:1.45;text-align:right}
.o-tien-diem span{display:block;white-space:nowrap;font-size:11.5px}
.o-tien-diem span b{font-weight:800;color:var(--cam-dam);font-size:12.5px}
.o-tien-diem span i{font-style:normal;color:var(--muc3);font-size:10px;font-weight:600}
.o-tien-diem .trong{color:var(--muc3);font-weight:400}

/* ── Sếp chốt 09/09 lượt 5: hai cột chạy SONG SONG từng dòng ─────────────────
   Cột «Điểm trừ ra tiền» và cột «Nhân sự» đều có: dòng TỔNG → dòng phụ → gạch
   ngang → danh sách từng đơn. Ba khối phải cùng chiều cao ở cả hai cột, không
   thì dòng thứ n của cột này lệch dòng thứ n của cột kia — mà đó chính là thứ
   Sếp cần đọc ngang. Vì vậy dùng CÙNG một bộ lớp cho cả hai. */
.o-tien-diem .d-tong,.o-nhan-su .d-tong{display:block;font-weight:800;font-size:12.5px;
  color:var(--cam-dam);line-height:1.5}
.o-nhan-su .d-tong{color:var(--muc);font-weight:700}
.o-tien-diem .d-phu,.o-nhan-su .d-phu{display:block;font-size:10px;font-weight:600;
  color:var(--muc3);line-height:1.5}
.o-tien-diem .d-list,.o-nhan-su .d-list{display:block;margin-top:3px;padding-top:3px;
  border-top:1px dashed var(--vien)}
/* Khách nhiều đơn thì ô tự cuộn TRONG chỗ của nó — hiện đủ như Sếp yêu cầu mà
   không kéo dài hàng. Đo thật: chỉ 229/2.687 khách có từ 4 đơn, nhiều nhất 57. */
.o-tien-diem .d-list.cuon,.o-nhan-su .d-list.cuon{max-height:104px;overflow-y:auto}
.d-mot-don{display:flex;gap:6px;line-height:1.6;white-space:nowrap;font-size:11px}
.o-tien-diem .d-mot-don{justify-content:flex-end}
.o-tien-diem .d-mot-don b{font-weight:700;color:var(--cam-dam)}
.o-tien-diem .d-mot-don i{font-style:normal;font-size:10px;color:var(--muc3);
  min-width:56px;text-align:right}
/* «lên đơn / XỬ LÝ» — người xử lý đậm vì họ quyết hình thức thanh toán. */
.o-nhan-su .d-mot-don{gap:4px;font-size:10.5px}
.o-nhan-su .d-mot-don i{font-style:normal;color:var(--muc3);font-size:10px}
.o-nhan-su .d-mot-don b{font-weight:800;color:var(--muc);font-size:10.5px}

/* Mã khách CÓ đơn trừ điểm mà KHÔNG có hồ sơ trong danh mục — chính 6 mã này
   trước đây bị phép ghép loại bỏ im lặng, làm số khách hụt so với số đơn. */
.thieu-ho-so{display:block;color:#a12727;font-size:9.5px;font-weight:800;margin-top:1px}

/* Dòng «Đơn trước» — mốc Sếp liếc để biết có phạm hạn điểm không. */
.ngay-don-truoc{display:block;font-size:10px;font-weight:600;color:#1d6fb8;
  margin-top:1px;line-height:1.35}
.ngay-don-truoc b{font-weight:800}
.ngay-don-truoc b.qua-han{color:#a12727}
/* «cùng ngày» — không phải cảnh báo, mà là lời thú nhận KHÔNG BIẾT thứ tự. */
.ngay-don-truoc b.ngo{color:var(--muc3);font-weight:600;cursor:help}
.ngay-don-truoc.trong-nho{color:var(--muc3);font-weight:500}
.tich-loc i{font-style:normal;font-weight:600;color:var(--muc3);font-size:9.5px}
.o-tien-diem .tren-tong{color:var(--muc3);font-size:10px;font-weight:600}
/* Dòng TỔNG chở số tiền tới 15 chữ số (140.430.981.237đ) — bản đầu để nguyên cỡ
   chữ nên cột «Đã mua» bị cắt thành «140.430.981....», bắt được lúc tự soi ảnh.
   Nới cột 12%→14% VÀ hạ cỡ chữ ô tiền ở dòng tổng, cấm xuống dòng. */
table.bh.w-kd tr.tong td{white-space:nowrap;font-size:11px}
table.bh.w-kd tr.tong .o-diem span,table.bh.w-kd tr.tong .o-tien-diem span{font-size:10.5px}
/* Dòng tổng chở số 7 chữ số (1.356.911 điểm) — số in đậm để cỡ 12,5px như dòng
   khách thì tràn cột. Hạ riêng cỡ chữ đậm ở dòng tổng, dòng khách giữ nguyên. */
table.bh.w-kd tr.tong .o-diem b,table.bh.w-kd tr.tong .o-tien-diem b{font-size:11px}
/* …nhưng ô NHÃN thì phải được xuống dòng, không thì «TỔNG SAU LỌC — 15.361
   KHÁCH» lại bị cắt đuôi. Cắt số hay cắt chữ đều là cắt — sửa một bên làm hỏng
   bên kia, phải chừa ô đầu ra. */
table.bh.w-kd tr.tong td.trai{white-space:normal}
.o-tien-diem .chiem{color:var(--cam-dam);font-size:10.5px;font-weight:700}
.o-tien-diem .chiem b{font-size:11.5px}

/* «+N» người xử lý khác — nhạt hơn tên chính, cùng thang với dòng phụ. */
.them-nv{font-size:10px;font-weight:700;color:var(--muc3)}

/* ── Sếp chốt 09/09 lượt 4: TRA SOÁT GIAN LẬN ĐIỂM ───────────────────────────
   Cột CỜ — mỗi cờ ĐÚNG MỘT DÒNG dạng «Điểm trừ lớn / 4 đơn». Sếp dặn «đừng
   xuống hàng sẽ làm khối dài thêm»: nowrap + ellipsis để tên cờ dài cũng không
   tự bẻ dòng làm cao hàng; tên đầy đủ nằm ở tooltip. */
.o-co{line-height:1.5}
.co-kd{display:block;font-size:10.5px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.co-kd b{font-weight:800}
.co-kd.do{color:#a12727}
.co-kd.cam{color:#8a5a00}
.co-kd.tim{color:#5b21b6}
.co-kd.xam{color:var(--muc3)}

/* Khối bộ lọc TÍCH NHIỀU — thay ô chọn một-giá-trị cũ. Mỗi hàng một nhóm, nhãn
   trái cố định bề ngang để bốn hàng thẳng lối (Sếp OCD, lệch là thấy ngay). */
.loc-tich{background:var(--nen2);border:1px solid var(--vien);border-radius:9px;
  padding:9px 11px;margin-bottom:11px}
.hang-loc{display:flex;align-items:flex-start;gap:9px;padding:3px 0}
.hang-loc+.hang-loc{border-top:1px dashed var(--vien);margin-top:3px;padding-top:6px}
.nhan-loc{flex:0 0 62px;font-size:10.5px;font-weight:700;color:var(--muc2);
  padding-top:4px;text-transform:uppercase;letter-spacing:.02em}
.cac-nut{display:flex;flex-wrap:wrap;gap:5px;align-items:center;flex:1 1 auto;min-width:0}
.tich-loc,.tich-ghep{font:inherit;font-size:10.5px;font-weight:600;cursor:pointer;
  border:1px solid var(--vien);background:var(--nen);color:var(--muc2);
  border-radius:13px;padding:3px 9px;line-height:1.5;white-space:nowrap}
.tich-loc:hover,.tich-ghep:hover{border-color:var(--muc3)}
.tich-loc b{font-weight:800;color:var(--muc)}
.tich-loc.bat{border-width:1.5px}
.tich-loc.bat.do{background:var(--do-nhat);border-color:#e24b4a;color:#791f1f}
.tich-loc.bat.cam{background:var(--cam-nhat);border-color:#ef9f27;color:#633806}
.tich-loc.bat.tim{background:#f1ecfd;border-color:#7c3aed;color:#4c1d95}
.tich-loc.bat.xanh{background:#e6f1fb;border-color:#378add;color:#0c447c}
.tich-ghep.bat{background:var(--t700);border-color:var(--t700);color:#fff}
.chu-loc{font-size:10px;color:var(--muc3);line-height:1.45}
.chu-loc.canh-bao{color:#8a5a00;font-weight:600}

/* Khối XẾP HẠNG người xuất đơn — Sếp duyệt 09/09. Dùng <details> để Sếp gấp lại
   khi không cần; mặc định mở vì đó là đường ngắn nhất tới câu «ai đang rút». */
.xep-hang{border:1px solid var(--vien);border-radius:9px;background:var(--nen);
  margin-bottom:11px;padding:0 11px 9px}
.xep-hang>summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--muc2);
  padding:9px 0;list-style:none}
.xep-hang>summary::-webkit-details-marker{display:none}
.xep-hang>summary::before{content:'▾ ';color:var(--muc3)}
.xep-hang:not([open])>summary::before{content:'▸ '}
.xep-hang>summary b{color:#a12727;font-weight:800}
table.bh.w-xh{min-width:820px;font-size:11.5px}
table.bh.w-xh tbody tr{cursor:pointer}
table.bh.w-xh tbody tr:hover>td{background:var(--t50)}
table.bh.w-xh tbody tr.dang-loc>td{background:#e6f1fb;font-weight:700}
table.bh.w-xh .xh-tm{font-weight:800;color:var(--cam-dam)}
/* Ô «cao hơn mức chung» — cam nhạt chứ KHÔNG đỏ. Codex soi ngược 09/09: màu đỏ
   gắn cạnh tên người thật đọc như cáo buộc, mạnh hơn mọi lời miễn trừ bên dưới.
   Đây mới là chỗ đáng mở ra soi, chưa phải kết luận. */
table.bh.w-xh .xh-cao{font-weight:800;color:#8a5a00;background:var(--cam-nhat)}

/* Dòng truy thu tách hai ô: ① đơn đã tích (ứng viên truy thu) · ② khách đã tích
   (phạm vi soi tiếp). Ô ① nổi hơn vì đó mới là số dùng để truy. */
.tt-khoi{display:flex;gap:11px;flex-wrap:wrap;margin-top:5px}
.tt-o{flex:1 1 240px;background:#fff6f6;border:1px solid #eecccc;border-radius:7px;padding:7px 10px}
.tt-o.chinh{background:#fff;border-color:#d99;border-width:1.5px}
.tt-o-nhan{font-size:10px;font-weight:700;color:#7a4a4a;margin-bottom:2px}
@media(max-width:640px){.tt-khoi{flex-direction:column}}

/* Ô tích tra soát trong bảng — to đủ để bấm trúng, và KHÔNG kéo dòng cao thêm. */
.o-soi{text-align:center;vertical-align:middle}
.tich-soi{font:inherit;font-size:15px;line-height:1;cursor:pointer;background:none;
  border:none;padding:2px 4px;color:var(--muc3);border-radius:5px}
.tich-soi:hover{background:var(--do-nhat)}
.tich-soi.bat{color:#a12727}
.tich-soi:disabled{opacity:.5;cursor:progress}
tr.da-soi>td{background:var(--do-nhat)}
tr.da-soi.hang-do>td{background:#fbdede}

/* Dòng TRUY THU — thứ Sếp cần cuối cùng: bao nhiêu tiền bị rút két. Cho nó
   đứng riêng dưới bảng, viền trái đỏ, số tiền to nhất khối. */
.truy-thu{margin-top:11px;padding:10px 13px;background:var(--do-nhat);
  border-left:3px solid #a12727;border-radius:0 7px 7px 0}
.truy-thu.trong{background:var(--nen2);border-left-color:var(--vien);
  color:var(--muc3);font-size:11.5px}
.tt-nhan{font-size:10px;font-weight:800;color:#791f1f;letter-spacing:.04em}
.tt-so{font-size:13px;color:#501313;margin-top:3px}
.tt-so b{font-weight:800;font-size:15px}
.tt-so .tt-tien{font-size:17px}
.tt-cach{color:#c08a8a;margin:0 7px}
.tt-chu{font-size:10.5px;color:#7a4a4a;margin-top:4px;line-height:1.5}

@media(max-width:640px){
  .nhan-loc{flex-basis:100%;padding-top:0}
  .hang-loc{flex-wrap:wrap}
}

@media(max-width:640px){
  .o-tieu span b,.o-tien-diem span b{font-size:11.5px}
}

/* ═══ BANHANG.SOATSHIP GĐ2 (04/10/2026) — khối "GHN — sao kê COD và gạch nợ" ═══════════════════════════════════
   Bản chốt: mockup-ghn-gach-no-cod-DA-CHOT-2026-10-04.html (ÁP CHUẨN DOANH THU). Mọi lớp mới mang tiền tố ghn-/hop-
   để không đè lớp sẵn có (bài học tm.css .cu toàn trang). */
/* Icon tròn đầu khối màu bị TÔ ĐEN trên toàn app: km() gắn class="ic-k" mà thiếu lớp nền .ic (fill:none/stroke).
   Sếp cho sửa cho CẢ APP 15:15 04/10 — một luật ở đây phủ cả 9 chỗ dùng (giao-dien.js · index.html · tra-cuu-don.js). */
.ic-k{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
table.bh.w-phien{min-width:920px}
table.bh.w-goiy{min-width:880px}
table.bh.w-chuathay{min-width:620px}
.ghn-hang{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:13px 0 9px}
.ghn-hang .that-tha{flex:1 1 auto;min-width:0;margin:0}
.ghn-hang .nut-p{width:auto;flex:0 0 auto}
.ghn-phu-h{font-size:11px;font-weight:800;letter-spacing:.55px;text-transform:uppercase;color:var(--muc2);margin:16px 0 8px}
.ghn-xn{width:auto!important;white-space:nowrap}
.ghn-them{margin-top:9px}
.ghn-them .nut-p{width:auto}
.ghn-du-kien{color:var(--muc3)}
.chip.xam{background:#eef1f2;color:#54666e}                /* trạng thái trung tính — cùng bộ màu .chip-tt.xam, nổi trên dải .that-tha nền cam */
/* Chip hoá đơn thu hộ (04/10 · bản chốt mockup-cau-hoa-don-ghn-DA-CHOT-2026-10-04.html): chip cam đặt trên dải .that-tha
   (nền trùng --cam-nhat) mất viên ⇒ nền trắng + viền cam trong. Thu phạm vi về khối GHN để không đổi chip cam nơi khác. */
.ghn-hang .that-tha .chip.tc{background:var(--trang);box-shadow:inset 0 0 0 1px var(--cam)}
.ghn-so-cu{color:var(--muc2);font-size:12px;white-space:nowrap}
.hop-canh{background:var(--cam-nhat);border-left:3px solid var(--cam);padding:11px 13px;border-radius:0 11px 11px 0;margin:0 0 13px;font-size:13.5px;color:#7a5300}
.hop-loi{background:var(--do-nhat);border-left:3px solid var(--do);padding:11px 13px;border-radius:0 11px 11px 0;margin:0 0 13px;font-size:13.5px;color:#a02222}
.ghn-lp{position:fixed;inset:0;z-index:60;background:rgba(6,43,51,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.ghn-hop{background:var(--trang);border-radius:20px;padding:22px 22px 18px;width:100%;max-width:440px;box-shadow:var(--b3);animation:ghnTro .26s var(--nhip)}
@keyframes ghnTro{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.ghn-hop h3{margin:0 0 3px;font-size:16px;font-weight:800;letter-spacing:-.25px}
.ghn-hop .mo-ta{margin:0 0 13px;font-size:12.5px;color:var(--muc2)}
.ghn-hop label{display:block;font-weight:700;font-size:13px;margin:11px 0 5px}
.ghn-hop input,.ghn-hop select{width:100%;height:40px;box-sizing:border-box;padding:0 12px;border:1.5px solid var(--vien-dam);border-radius:13px;font-size:13.5px;color:var(--muc);outline:none;background:var(--trang);font-variant-numeric:tabular-nums}
/* Ô ngày · ô chọn có khung riêng của trình duyệt: ép cùng 40px; ô chọn tự đệm thêm ~4px nên lùi đệm trái cho chữ thẳng lề với ô chữ (đo trên ảnh dsf 4). */
.ghn-hop select{padding-left:8px}
.ghn-hop input:focus,.ghn-hop select:focus{border-color:var(--t500);box-shadow:0 0 0 4px rgba(11,143,161,.13)}
.ghn-hop .hai{display:grid;grid-template-columns:1fr 1fr;column-gap:11px;row-gap:0} /* khoảng dọc do lề nhãn lo — xếp 1 cột ở 390 không bị cộng đôi */
.ghn-hop .nut-hang{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.ghn-hop .nut-hang .nut-p{width:auto;flex:0 0 auto}
.ghn-luu{background:var(--t600)!important;border-color:var(--t600)!important;color:#fff!important}
.ghn-luu:hover{background:var(--t700)!important}
.ghn-loi{margin-top:11px;padding:9px 12px;background:var(--do-nhat);color:#a02222;border-radius:11px;font-size:12.8px}
@media(max-width:700px){
  .ghn-hop .hai{grid-template-columns:minmax(0,1fr)}
  .ghn-hang .nut-p{width:100%;flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.ghn-hop{animation:none}}