/* ============================================================================
   VÒNG ĐỜI ĐƠN HÀNG — kiểu dáng riêng, tách khỏi index.html
   Dùng lại biến màu và các lớp chung (.card .btn .badge .tblbox) đã có trong index.html.

   Quy tắc màu (theo chuẩn đã chốt ở trang Tài khoản 29/07/2026):
   MÀU CHỈ ĐỂ BÁO TRẠNG THÁI — đỏ = có việc gấp, cam = đang chờ, teal = bình thường.
   KHÔNG cấp mỗi mục một tông riêng, bảng sẽ thành cầu vồng và chọi với màu thương hiệu.
   ============================================================================ */

/* ---------- khối giải thích đầu tab ---------- */
/* 29/08 thay da: --kem nay là teal nhạt, khối note nhấn CAM chuyển hẳn sang nền cam nhạt chuẩn */
.vd-note{background:var(--cam-nhat);border:1px solid #f0d18a;border-left:4px solid var(--cam);
  border-radius:10px;padding:11px 14px;font-size:13px;line-height:1.55;color:#5c4a20;margin-bottom:14px}
.vd-note b{color:#3f3313}
.vd-note code{background:#fff;border:1px solid #f0dda8;border-radius:5px;padding:1px 5px;
  font-family:Consolas,'Courier New',monospace;font-size:12px}

/* ---------- cảnh báo đỏ: không ai giữ một vai nào đó ---------- */
.vd-thieu{background:var(--do-nhat);border:1px solid #f5c6c6;border-left:4px solid var(--do);
  border-radius:10px;padding:11px 14px;font-size:13px;line-height:1.55;color:#7c2323;margin-bottom:14px}
.vd-thieu b{color:#5e1a1a}

/* ============================ TAB VÒNG ĐỜI ============================ */

/* ---------- DẢI 5 CHẶNG (thay cho 7 thẻ số + Kanban, 30/07/2026) ----------
   Vì sao gộp: 7 thẻ và Kanban cũ nói LẶP nhau 4/5 ô (Chờ đặt = Mới lên, Đang về = Đã đặt NCC,
   Chờ kế toán = Đã nhận, Chờ vào kho bán = Kế toán đã nhập). Hai khối tốn 306px máy tính /
   722px điện thoại để nói một lần. Nay một dải duy nhất.

   Màu: thang teal ĐẬM DẦN theo chặng, chặng cuối sang xanh lá = xong. Đây là màu CÓ NGHĨA
   (đi càng xa càng đậm) chứ không phải cấp mỗi ô một tông cho vui. Đỏ/cam vẫn chỉ dành cho
   sự cố — dùng đỏ cho việc thường thì lúc thật gấp sẽ không còn nổi. */
.vdx-dai{display:flex;gap:6px;margin-bottom:8px}
.vdx-o{flex:1 1 0;min-width:0;border:1px solid var(--vi);background:var(--bg);border-radius:11px;
  padding:8px 9px 9px;cursor:pointer;position:relative;text-align:left;font:inherit;width:100%;
  display:block;transition:box-shadow .12s,transform .1s}
.vdx-o:hover{transform:translateY(-1px);box-shadow:0 3px 9px rgba(13,43,53,.13)}
.vdx-o .k{display:flex;align-items:center;gap:5px;margin-bottom:2px}
.vdx-o .b{flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--ch);color:#fff;
  font-size:10px;font-weight:800;line-height:16px;text-align:center}
.vdx-o .t{font-size:11.5px;font-weight:700;color:var(--ch);line-height:1.2;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vdx-o .n{display:block;font-size:23px;font-weight:800;color:var(--ch);line-height:1.05}
.vdx-o .p{display:block;font-size:10.5px;color:#7e8c92;line-height:1.25;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vdx-o.rong .n{opacity:.42}
.vdx-o.on{box-shadow:inset 0 0 0 2px var(--ch)}
.vdx-o.on::after{content:'';position:absolute;left:9px;right:9px;bottom:3px;height:2px;
  border-radius:2px;background:var(--ch)}
/* Chip cảnh báo dán LÊN chặng — chỉ dùng được khi cảnh báo là tập con thật của chặng đó. */
.vdx-o .c{position:absolute;top:6px;right:6px;background:var(--do);color:#fff;border-radius:99px;
  padding:1px 6px;font-size:10px;font-weight:800;line-height:1.5}
.vdx-o1{--bg:#f3f6f7;--vi:#dde5e7;--ch:#5c6a70}
.vdx-o2{--bg:#e8f3f5;--vi:#bcdde2;--ch:#0a6675}
.vdx-o3{--bg:#d6eaee;--vi:#a3cfd7;--ch:#075866}
.vdx-o4{--bg:#c4dfe5;--vi:#8fc3cd;--ch:#04454f}
.vdx-o5{--bg:#e0f3e7;--vi:#b0dcc2;--ch:#1c7541}

/* ---------- hàng cảnh báo bắc qua nhiều chặng ----------
   ⚠ "Thiếu hoá đơn VAT" đếm cả 3 chặng da_nhan + kt_nhap + kho_ban nên KHÔNG phải tập con
   của một chặng nào — dán nó lên một ô là con số sẽ vô nghĩa (có lúc lớn hơn cả số của ô đó).
   Vì vậy nó nằm ở hàng riêng này. Trễ hẹn giao thì đúng là tập con của chặng 2 nên dán lên ô. */
.vdx-canh{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.vdx-c{border:1px solid var(--vien);background:#fff;border-radius:99px;padding:4px 11px;
  font-size:12px;font-weight:700;color:var(--xam);cursor:pointer;line-height:1.4}
.vdx-c:hover{border-color:var(--teal);color:var(--teal-d)}
.vdx-c b{font-weight:800}
.vdx-c.do{background:var(--do-nhat);border-color:#f0b9b9;color:#a53030}
.vdx-c.do:hover{background:#fbdede;border-color:var(--do);color:#8c2020}
.vdx-c.cam{background:#fff5de;border-color:#f0dda8;color:#8a6100}
.vdx-c.cam:hover{background:#ffeec6;border-color:var(--cam);color:#6d4d00}
.vdx-c.on{box-shadow:0 0 0 2px rgba(6,118,134,.3)}
.vdx-c.tat{cursor:default;background:#f7f9f9;color:#9aa8ad;font-weight:400}
.vdx-c.tat:hover{border-color:var(--vien);color:#9aa8ad}

/* ---------- thanh lọc gọn ---------- */
.vdx-loc{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:9px;
  padding:5px 0;background:#fff}
.vdx-loc select{padding:6px 9px;border:1px solid var(--vien);border-radius:8px;background:#fff;
  font-size:12.5px;max-width:190px}
.vdx-loc .dem{margin-left:auto;font-size:12px;font-weight:700;color:var(--teal-d);
  background:var(--t100);border-radius:99px;padding:4px 11px;white-space:nowrap}

/* ---------- 7 thẻ số (nay CHỈ còn tab Cận date + Đối chiếu Sthink dùng) ---------- */
.vd-the{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.vd-t{cursor:pointer;transition:transform .1s,box-shadow .12s;min-width:0}
.vd-t:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(13,43,53,.12)}
.vd-t .n{font-size:26px;font-weight:800;color:var(--teal-d);line-height:1.1}
.vd-t .l{font-size:12.5px;color:var(--xam);margin-top:3px;line-height:1.3}
/* Màu CHỈ dùng khi có việc phải xử lý — thẻ bình thường để trung tính. */
.vd-t.m-do{border-color:#f0b9b9;background:#fef7f7}
.vd-t.m-do .n{color:var(--do)}
.vd-t.m-cam{border-color:#f2ddb0;background:#fffdf6}
.vd-t.m-cam .n{color:#b8790a}
.vd-t.rong .n{color:#b9c6ca}
.vd-t.rong{opacity:.75}
.vd-t.chua{cursor:default;opacity:.7;background:repeating-linear-gradient(45deg,#fafbfb,#fafbfb 8px,#f2f5f6 8px,#f2f5f6 16px)}
.vd-t.chua:hover{transform:none;box-shadow:0 1px 3px rgba(13,43,53,.05)}
.vd-t.chua .n{color:#9aa8ad}

/* ---------- bảng danh sách phiếu ----------
   5 cột (gộp "Người" + "Mốc thời gian" thành một cột — hai cột cũ phần lớn để trống).
   Dòng 57 → 44px. KHÔNG bọc trong .tblbox nữa: .tblbox có overflow-x:auto, mà sticky trong
   hộp cuộn thì dính vào hộp chứ không dính theo trang → tiêu đề bảng sẽ không đứng lại.
   Chữ vẫn giữ 13px, chỉ bóp phần đệm — thu nhỏ chữ để nhồi thêm dòng là làm khó đọc. */
.tbl-vd{table-layout:fixed;width:100%;border-collapse:collapse}
.tbl-vd .c-ma{width:22%}
.tbl-vd .c-ncc{width:22%}
.tbl-vd .c-chang{width:18%}
.tbl-vd .c-sl{width:13%}
.tbl-vd .c-ai{width:25%}
.tbl-vd th{padding:7px 10px;font-size:11.5px;white-space:normal;line-height:1.2;
  position:sticky;top:0;z-index:2}
.tbl-vd td{padding:6px 10px;font-size:13px;vertical-align:top;border-bottom:1px solid var(--vien)}
.tbl-vd tbody tr{cursor:pointer}
.tbl-vd tbody tr:hover{background:var(--kem)}
.tbl-vd .ma{font-family:Consolas,'Courier New',monospace;font-size:11.5px;font-weight:700;color:var(--teal-d);
  display:block;word-break:break-all;line-height:1.25}
.tbl-vd .ten{font-weight:700}
.tbl-vd .so{text-align:right}
.tbl-vd .phu,.tbl-vd .phu2{display:block;font-size:11px;color:#8b989d;font-weight:400;line-height:1.3;margin-top:1px}
/* Dòng "Chặng N · ai làm" đậm hơn các dòng phụ khác — đây mới là thứ Sếp cần liếc là thấy */
.tbl-vd .vd-ai-c{color:#4a5a60;font-size:11.5px}
.tbl-vd .vd-ai-c b{color:var(--teal-d)}
/* Hai bản dòng mốc thời gian — xem giải thích ở veDongPhieu(). Máy tính dùng bản đầy đủ. */
.tbl-vd .vd-khi-m{display:none}

/* NHẤN NHÁ — phiếu gấp phải tự đập vào mắt khi cuộn nhanh, không cần đọc chữ.
   Viền trái dày + nền nhuộm rất nhạt (đọc được chữ vẫn là ưu tiên số một). */
.tbl-vd tbody tr.gap{background:#fef7f7;box-shadow:inset 4px 0 0 var(--do)}
.tbl-vd tbody tr.gap:hover{background:#fdeeee}
.tbl-vd tbody tr.toi{background:#fffdf5;box-shadow:inset 4px 0 0 var(--cam)}
.tbl-vd tbody tr.toi:hover{background:#fff8e6}
.tbl-vd tbody tr.gap td:first-child,.tbl-vd tbody tr.toi td:first-child{padding-left:14px}
.tbl-vd tbody tr.bo-huy{opacity:.55}
.chip-toi{display:inline-block;background:var(--cam);color:#3a2800;border-radius:99px;
  padding:1px 8px;font-size:10.5px;font-weight:800;margin-top:3px;white-space:nowrap}

/* Chặng: một thang teal đậm dần, KHÔNG phải 5 màu cầu vồng. Đỏ/cam để dành báo sự cố. */
.badge.chang-moi{background:#eef1f2;color:#5c6a70}
.badge.chang-da_dat{background:#e6f2f4;color:#0a6675}
.badge.chang-da_nhan{background:#d3e9ed;color:#075866}
.badge.chang-kt_nhap{background:#bfe0e6;color:#054752}
.badge.chang-kho_ban{background:#e4f4ea;color:#1e7a44}
.tt-xanh{background:#e4f4ea;color:#1e7a44}

/* ---------- màn chi tiết phiếu ---------- */
.vd-dau{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.vd-dau-t b{font-family:Consolas,'Courier New',monospace;font-size:16px;color:var(--teal-d);display:block}
.vd-dau-t span{font-size:12.5px;color:var(--xam)}

/* ==========================================================================
   THƯỚC 5 CHẤM (31/07/2026 — mục 8 của Sếp)
   Dùng CHUNG cho cột Chặng ngoài bảng tổng quan và thanh tiến trình trong màn chi tiết:
   một ngôn ngữ hình duy nhất, người dùng học một lần.
     chấm đặc teal  = chặng ĐÃ QUA
     chấm to viền cam + quầng = chặng ĐANG đứng   (đúng màu .vd-tt-b.dang cũ)
     chấm rỗng xám  = chưa tới
     cả 5 xanh lá   = vòng đời khép kín
   ========================================================================== */
.cham5{display:inline-flex;align-items:center;gap:0;vertical-align:middle}
.cham5 .ch{width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid #d4dcde;background:#fff;box-sizing:content-box}
.cham5 .ch.xong{border-color:var(--teal);background:var(--teal)}
.cham5 .ch.dang{width:11px;height:11px;border-width:2.5px;border-color:var(--cam);background:#fff;
  box-shadow:0 0 0 3px rgba(249,164,28,.22)}
.cham5 .vach{width:11px;height:2px;background:#e3e8ea;flex:0 0 auto}
.cham5 .vach.xong{background:var(--teal)}
/* khép kín: cả thước chuyển xanh lá — nhìn là biết phiếu xong hẳn, khỏi đọc chữ */
.cham5.het .ch.xong,.cham5.het .ch.dang{border-color:#1c7541;background:#1c7541;box-shadow:none}
.cham5.het .vach.xong{background:#1c7541}
/* huỷ: xám hết + gạch ngang đè lên */
.cham5.huy{position:relative;opacity:.6}
.cham5.huy::after{content:'';position:absolute;left:-2px;right:-2px;top:50%;height:1.5px;background:#8b989d}
.cham5-t{display:block;font-size:10.5px;color:#5c6a70;font-weight:600;margin-top:3px;line-height:1.2}

/* thanh tiến trình màn chi tiết — 68px → ~30px (mục 15) */
.vd-tt2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 10px;
  padding:6px 11px;background:#f5fbfc;border:1px solid #cfe3e7;border-radius:10px}
.vd-tt2-t{font-size:12.5px;color:#4a5a60;line-height:1.3}
.vd-tt2-t b{color:var(--teal-d)}

/* khối "đang chờ ai" — cam CHỈ khi là việc của chính mình.
   Chờ người khác thì để xám: tô cam cả hai thì cam mất nghĩa "việc của tôi". */
.vd-cho{background:#eef1f2;border-radius:10px;padding:9px 13px;font-size:13.5px;color:#4a5a60;margin-bottom:4px}
.vd-cho.toi{background:#fff8e9;border:1px solid #f2ddb0;border-left:4px solid var(--cam);
  color:#7a5a00;font-size:14px;padding:11px 14px}
.vd-cho.toi b{color:#5e4300}
.vd-cho.toi i{color:#a08040;font-size:12.5px}

/* nhật ký gập lại — dài mà ít khi cần đọc, đang đẩy các nút thao tác xuống đáy trang */
.vd-nk-g{margin-top:14px}
.vd-nk-g>summary{cursor:pointer;font-size:16px;color:var(--teal-d);font-weight:700;
  padding:6px 0;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vd-nk-g>summary::-webkit-details-marker{display:none}
.vd-nk-g>summary::before{content:'▸';font-size:12px;color:var(--xam)}
.vd-nk-g[open]>summary::before{content:'▾'}
.vd-nk-g>summary .sub{font-weight:400;font-size:12.5px;color:var(--xam)}
.vd-nk-g>summary:hover{color:var(--teal)}

/* ==========================================================================
   PHIẾU HÀNG ĐÓNG KHUNG (31/07/2026 — mục 12 của Sếp)
   Trước bảng hàng chỉ là <h2> + <table> nằm lẫn giữa các khối, "nhìn cứ như 1 phần trong
   nội dung". Nay có viền teal 2px + đầu phiếu + chân phiếu → ra hẳn một tờ phiếu.
   ========================================================================== */
.vd-phieu{border:2px solid var(--teal);border-radius:12px;overflow:hidden;background:#fff;
  margin:16px 0 0;box-shadow:0 2px 8px rgba(6,118,134,.08)}
.vd-phieu-d{background:#e6f2f4;padding:9px 13px;display:flex;align-items:baseline;gap:10px;
  flex-wrap:wrap;border-bottom:1px solid #bcdde2}
.vd-phieu-d b{font-size:12.5px;letter-spacing:.5px;color:var(--teal-d)}
.vd-phieu-d .ma{font-family:Consolas,'Courier New',monospace;font-size:13px;font-weight:700;
  color:#0a4a55;word-break:break-all}
.vd-phieu-d .ncc{font-size:12.5px;color:#4a5a60;margin-left:auto}
/* Lớp cuộn cho bảng bên trong khung: khung bo góc nên phải overflow:hidden, mà bảng
   chi tiết rộng 680px trên điện thoại — không có lớp này thì cột cuối bị CẮT MẤT
   và không có thanh cuộn nào để kéo tới. */
.vd-phieu-b{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vd-phieu-c{background:#f7fafb;border-top:1px solid var(--vien);padding:8px 13px;
  font-size:12.5px;color:#4a5a60;display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.vd-phieu-c b{color:var(--teal-d)}
.vd-phieu-c .bo{color:#a53030}
.vd-phieu-c .nhac{margin-left:auto;font-size:11.5px;color:#8b989d;font-style:italic}

/* THANH HÀNH ĐỘNG dưới đáy phiếu — nút kết thúc việc phải nằm SAU thứ nó tác động */
.vd-thanh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end;
  margin:10px 0 4px;padding:10px 0}
.vd-thanh-g{font-size:11.5px;color:#8b989d;margin-right:auto;flex:1 1 220px;line-height:1.4}
.vd-thanh .vd-chinh{padding:11px 18px;font-size:14.5px}

/* Vùng 1 màn "Mới lên": 3 ô trên MỘT hàng, nhãn nhỏ nằm trên ô (tiết kiệm chiều ngang) */
.vd-dau-viec .vd-o3{display:flex;gap:9px;flex-wrap:wrap}
.vd-o{display:flex;flex-direction:column;gap:3px;flex:0 1 auto;min-width:0}
.vd-o.rong{flex:1 1 220px}
.vd-o label{font-size:10.5px;font-weight:700;color:#5c6a70;letter-spacing:.2px}
.vd-o select,.vd-o input{padding:7px 10px;border:1px solid var(--vien);border-radius:8px;
  background:#fff;font-size:13.5px;min-width:0}
.vd-i{font-style:normal;color:var(--teal);cursor:help;font-size:11px}
/* hướng dẫn gập — chữ hướng dẫn là phần phụ, không được chiếm chỗ thường trực */
.vd-hd{font-size:12.5px;color:#5c6a70;line-height:1.5}
.vd-hd>summary{cursor:pointer;font-size:11.5px;font-weight:700;color:var(--teal);list-style:none}
.vd-hd>summary::-webkit-details-marker{display:none}
.vd-hd>summary:after{content:' ▾'}
.vd-hd[open]>summary:after{content:' ▴'}

/* bảng chi tiết dòng hàng / hoá đơn */
.tbl-ct{table-layout:fixed}
.tbl-ct .c-stt{width:4%}
.tbl-ct .c-sku{width:13%}
.tbl-ct .c-ten{width:33%}
.tbl-ct .c-dvt{width:6%}
.tbl-ct .c-n{width:11%}
.tbl-ct .c-tt{width:22%}
/* STT (mục 13) — đánh theo thứ tự đang hiện, không phải id trong cơ sở dữ liệu */
.c-stt-td{text-align:center;color:#9aa8ad;font-size:11.5px;font-variant-numeric:tabular-nums}
.tbl-nhan .c-stt{width:4%}
.tbl-ct th{padding:8px;font-size:11.5px;white-space:normal}
/* Tiêu đề cột số phải căn PHẢI cho thẳng hàng với con số bên dưới. Để căn trái thì nhìn
   như bảng lệch cột — bắt được khi soi ảnh chụp thật, đọc code không thấy. */
.tbl-ct th.c-n,.tbl-vd th.c-sl{text-align:right}
.tbl-ct td{padding:8px;font-size:13px;vertical-align:top}
.tbl-ct .ma{font-family:Consolas,'Courier New',monospace;font-size:11px;word-break:break-all}
.tbl-ct .ten{font-weight:700;word-break:break-word}
.tbl-ct .so{text-align:right}
.tbl-ct .phu{display:block;font-size:11px;color:#8b989d;font-weight:400;margin-top:2px;line-height:1.3}
.tbl-ct tr.bo{opacity:.5}
.tbl-ct tr.bo .ten{text-decoration:line-through}

/* ---------- bảng điều khiển theo vai (chặng 2 trở đi) ---------- */
.vd-bang{border:1px solid #cfe3e7;background:#f5fbfc;border-radius:12px;padding:12px 14px;margin:12px 0 4px}
/* Cảnh báo trễ hẹn nay là CHIP nằm ngang hàng tiêu đề, không chiếm một dòng riêng (mục 15) */
.vd-bang-t{font-size:13.5px;font-weight:700;color:var(--teal-d);margin-bottom:9px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.vd-bang-t .badge{font-weight:700}
.vd-hang{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.vd-hang label{font-size:12.5px;font-weight:600;color:#4a5a60;flex:0 0 auto}
.vd-hang select,.vd-hang input{padding:7px 10px;border:1px solid var(--vien);border-radius:8px;
  background:#fff;font-size:13.5px;min-width:0}
.vd-hang input[type=date]{flex:0 0 auto}
.vd-hang input:not([type=date]){flex:1 1 200px}
.vd-hang select{flex:0 1 250px}
.vd-hang .ghi{font-size:11.5px;color:#8b989d;flex:1 1 100%}
.vd-ghi{font-size:12.5px;color:#5c6a70;line-height:1.5;margin:2px 0 9px}

/* ô thêm mã vào phiếu */
.vd-them{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}
.vd-them input{padding:8px 11px;border:1px solid var(--vien);border-radius:8px;font-size:13.5px}
.vd-them #vdThemMa{flex:1 1 240px}
.vd-them #vdThemSl{width:88px}
.vd-them .ghi{font-size:11.5px;color:#8b989d;flex:1 1 100%}

/* ô sửa ngay trong bảng */
.tbl-ct .c-sua{width:5%}
.tbl-ct.sua .c-ten{width:31%}
.tbl-ct .o-sl{width:74px;padding:5px 7px;border:1px solid var(--vien);border-radius:7px;
  text-align:right;font-size:13.5px;font-weight:700}
.tbl-ct .o-sl:focus{outline:2px solid var(--teal);border-color:var(--teal)}
.tbl-ct .goc{color:#8b989d;font-size:11.5px;display:block;line-height:1.2;margin-bottom:2px}
.tbl-ct .o-tt{width:100%;padding:5px 6px;border:1px solid var(--vien);border-radius:7px;
  background:#fff;font-size:12.5px}
.tbl-ct .o-ngay{width:100%;margin-top:4px;padding:4px 6px;border:1px solid var(--cam);
  border-radius:7px;font-size:12px;background:#fffdf6}
.tbl-ct .c-sua-td{text-align:center}
.nut-nho{border:1px solid #f0c9c9;background:#fdf3f3;color:#c0392b;border-radius:7px;
  width:28px;height:28px;font-size:13px;font-weight:700;line-height:1}
.nut-nho:hover{background:#fbe6e6}
.nut-nho.lay{border-color:#bcdde2;background:#eef7f9;color:var(--teal-d)}
.nut-nho.lay:hover{background:#dcedf1}

/* ---------- MÀN NHẬN HÀNG (chặng 3) ---------- */
.vd-bang.tre{border-color:#f0b9b9;background:#fef7f7}
.tbl-nhan{table-layout:fixed;width:100%;border-collapse:collapse;font-size:14px}
.tbl-nhan .c-sku{width:27%}
.tbl-nhan .c-dd{width:14%}
.tbl-nhan .c-lo{width:36%}
.tbl-nhan .c-ly{width:19%}
.tbl-nhan th{background:var(--teal);color:#fff;padding:9px 10px;font-size:11.5px;
  text-align:left;white-space:normal;line-height:1.25}
.tbl-nhan td{padding:10px;font-size:13px;vertical-align:top;border-bottom:1px solid var(--vien)}
.tbl-nhan .ma{font-family:Consolas,'Courier New',monospace;font-size:11px;color:var(--teal-d);
  display:block;word-break:break-all}
.tbl-nhan .ten{font-weight:700;display:block;line-height:1.35;margin-top:2px;word-break:break-word}
.tbl-nhan .dd{text-align:right}
.tbl-nhan .phu,.tbl-nhan .phu2{display:block;font-size:11px;color:#8b989d;font-weight:400;margin-top:3px}
.tbl-nhan .phu2{font-family:Consolas,'Courier New',monospace;font-size:10.5px;color:#0a6675}

/* ô lô: SL + hạn dùng + nút bỏ, xếp một hàng */
.lo-hang{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.lo-sl{width:78px;padding:6px 8px;border:1px solid var(--vien);border-radius:7px;
  text-align:right;font-size:13.5px;font-weight:700}
/* Mỗi ô ngày đi kèm nhãn NSX/HSD — không có nhãn thì hai ô date giống hệt nhau,
   người nhận hàng không biết ô nào là ô nào (thấy được khi soi ảnh chụp thật). */
.lo-ng{display:flex;align-items:center;gap:5px;flex:1 1 150px;min-width:140px}
.lo-ng i{font-style:normal;font-size:10px;font-weight:700;color:#8b989d;letter-spacing:.3px;flex:none}
.lo-hsd,.lo-nsx{flex:1 1 auto;width:100%;min-width:0;padding:6px 8px;border:1px solid var(--vien);
  border-radius:7px;font-size:12.5px}
/* NSX viền đứt: nhập được thì tốt, bỏ trống cũng không sao — khác hẳn HSD của nhóm
   bắt buộc (viền cam đặc). Đừng để hai ô trông ngang nhau về mức độ bắt buộc. */
.lo-nsx{border-style:dashed;color:#5d6b70}
.lo-hsd[data-bat="1"]{border-color:var(--cam);background:#fffdf6}
.lo-sl:focus,.lo-hsd:focus,.lo-nsx:focus{outline:2px solid var(--teal);border-color:var(--teal)}
.lo-canh{flex:1 1 100%;font-size:11px;line-height:1.3}
.lo-canh.do{color:var(--do);font-weight:700}
.lo-canh.cam{color:#b8790a;font-weight:700}

/* --- TC4: dòng "% quãng đời còn lại" ngay dưới hai ô ngày --- */
.lo-doi{flex:1 1 100%;font-size:11px;line-height:1.3;margin-top:-2px}
.lo-doi.xam{color:#6b7a80}                      /* từ 50% trở lên — bình thường */
.lo-doi.do{color:var(--do);font-weight:700}     /* dưới 50% — ngưỡng Sếp chốt 04/08/2026 */
.lo-doi.mo{color:#9aa5a9;font-style:italic}     /* chưa đủ dữ liệu, KHÔNG bịa số */

/* --- TC4: ô tích "hàng không có date" (máy móc, dụng cụ) --- */
.lo-kd{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:12px;color:#5d6b70;cursor:pointer}
.lo-kd input{width:15px;height:15px;accent-color:var(--teal)}
.lo-kd-nho{color:#9aa5a9;font-size:11px;font-style:italic}
/* Tích rồi thì hai ô ngày mờ đi — nhìn là biết khỏi điền, nhưng số đã gõ vẫn còn đó,
   bỏ tích lại là dùng tiếp. */
.lo-box.khong-date .lo-hsd,.lo-box.khong-date .lo-nsx{opacity:.4;background:#f4f6f7}
.them-lo{background:none;border:1px dashed var(--vien);color:var(--teal-d);border-radius:7px;
  padding:5px 10px;font-size:12px;font-weight:600}
.them-lo:hover{border-color:var(--teal);background:var(--kem)}
.lo-tong{display:block;font-size:12px;font-weight:700;margin-top:6px}
.lo-tong.du{color:#1e7a44}
.lo-tong.thieu{color:#b8790a}
.lo-tong.du-thua{color:var(--do)}
.tbl-nhan .o-ly{width:100%;padding:6px 7px;border:1px solid var(--vien);border-radius:7px;
  background:#fff;font-size:12.5px}
.tbl-nhan .o-ly.can{border-color:var(--do);background:#fef7f7;box-shadow:0 0 0 2px rgba(214,69,69,.12)}

/* ĐIỆN THOẠI — nhân viên kho đứng ở kho, không ngồi máy tính. Bảng phải thành THẺ. */
@media(max-width:900px){
  .tbl-nhan{min-width:0}
  .tbl-nhan thead{display:none}
  .tbl-nhan,.tbl-nhan tbody,.tbl-nhan tr,.tbl-nhan td{display:block;width:100%}
  .tbl-nhan tr{border:1px solid var(--vien);border-radius:12px;margin-bottom:12px;padding:12px;background:#fff}
  .tbl-nhan td{border:none;padding:0}
  .tbl-nhan td+td{margin-top:9px}
  .tbl-nhan .dd{text-align:left;padding-top:8px;border-top:1px dashed var(--vien)}
  .tbl-nhan .dd::before{content:'Đặt / đã nhận: ';font-size:11.5px;color:#8b989d;font-weight:400}
  .tbl-nhan .c-ly-td::before{content:'Lý do lệch';display:block;font-size:11.5px;color:#8b989d;margin-bottom:3px}
  /* STT trên thẻ: chip "#1" góc trên, không chiếm một dòng riêng */
  .tbl-nhan .c-stt-td{position:absolute;top:8px;right:10px;margin:0;font-size:11px;
    font-weight:700;color:#9aa8ad;width:auto}
  .tbl-nhan .c-stt-td:before{content:'#'}
  .tbl-nhan tr{position:relative}
  .lo-sl{width:88px;font-size:16px;padding:9px}      /* to hơn cho ngón tay, và không bị iOS phóng to */
  /* Hai ô ngày mỗi ô một dòng: ép nằm cạnh nhau trên màn 390px thì mỗi ô còn ~120px,
     ô <input type=date> co lại là mất luôn phần chọn ngày. */
  .lo-ng{flex:1 1 100%}
  .lo-ng i{width:30px}
  .lo-hsd,.lo-nsx{font-size:16px;padding:9px}
  .them-lo{width:100%;padding:9px}
  .lo-kd{padding:6px 0}
  .lo-kd input{width:19px;height:19px}
}

/* ---------- TAB CẬN DATE ---------- */
.vd-t.chon{box-shadow:inset 0 0 0 2px var(--teal)}
.vd-t.m-xam{opacity:.85}
.tbl-date{table-layout:fixed;width:100%;border-collapse:collapse;font-size:13.5px}
.tbl-date .c-muc{width:15%}
.tbl-date .c-sku{width:20%}
.tbl-date .c-ncc{width:12%}
.tbl-date .c-hsd{width:13%}
.tbl-date .c-sl{width:12%}
.tbl-date .c-vi{width:28%}
.tbl-date th{background:var(--teal);color:#fff;padding:9px 8px;font-size:11.5px;text-align:left;
  white-space:normal;line-height:1.25}
.tbl-date td{padding:9px 8px;vertical-align:top;border-bottom:1px solid var(--vien)}
.tbl-date .ma{font-family:Consolas,'Courier New',monospace;font-size:11px;color:var(--teal-d);
  display:block;word-break:break-all}
.tbl-date .ten{font-weight:700;display:block;line-height:1.35;margin-top:2px;word-break:break-word}
.tbl-date .so{text-align:right}
.tbl-date .vi{line-height:1.45;word-break:break-word}
.tbl-date .phu{display:block;font-size:11px;color:#8b989d;font-weight:400;margin-top:3px;line-height:1.35}
.tbl-date .phu a{color:var(--teal-d)}
/* Nền dòng chỉ nhuộm rất nhạt: đọc được chữ vẫn là ưu tiên số một, màu chỉ để phân mức. */
.tbl-date tr.m-do{background:#fef8f8}
.tbl-date tr.m-cam{background:#fffdf5}

@media(max-width:900px){
  .tbl-date{min-width:0}
  .tbl-date thead{display:none}
  .tbl-date,.tbl-date tbody,.tbl-date tr,.tbl-date td{display:block;width:100%}
  .tbl-date tr{border:1px solid var(--vien);border-radius:12px;margin-bottom:10px;padding:12px}
  .tbl-date td{border:none;padding:0}
  .tbl-date td+td{margin-top:6px}
  .tbl-date .so{text-align:left}
}

/* ---------- HOÁ ĐƠN VAT (chặng 4) ---------- */
.hd-khu{margin-top:10px;padding-top:10px;border-top:1px dashed #cfe3e7}
.hd-tt{font-size:13px;font-weight:600;color:#4a5a60;margin-bottom:8px}
/* 05/09 Sếp chỉnh: khung thả phải BẬT lên (trước nền trắng viền xám mờ, chìm vào thẻ)
   và phải TÁCH khỏi nút "NCC này không xuất hoá đơn VAT" ngay dưới (trước dính sát). */
.hd-tha{border:2px dashed var(--teal);border-radius:12px;padding:18px 16px;text-align:center;
  background:var(--kem);margin-bottom:14px;
  cursor:pointer;font-size:13px;color:#3d4f56;line-height:1.5;transition:border-color .12s,background .12s,box-shadow .12s}
.hd-tha b{font-size:14px;color:var(--teal-d,#0b5560)}
.hd-tha:hover{border-color:var(--cam);background:#fff8e9;box-shadow:0 2px 10px rgba(13,43,53,.10)}
.hd-tha.keo{border-color:var(--cam);background:#fff8e9}
.hd-tha span{font-size:11.5px;color:#7a8a90;display:block;margin-top:6px}
.hd-kq{border:1px solid var(--vien);border-radius:10px;padding:11px 13px;margin-top:10px;background:#fff}
.hd-kq-t{font-size:13.5px;line-height:1.4;word-break:break-word}
.hd-so{font-size:12px;color:#5c6a70;margin:4px 0 8px}
.hd-ok{background:#e8f6ee;border:1px solid #b9e0c9;border-radius:8px;padding:8px 11px;
  font-size:12.5px;color:#1e7a44}
.hd-lech{background:var(--do-nhat);border:1px solid #f0c9c9;border-radius:8px;padding:8px 11px;
  font-size:12.5px;color:#a53030;line-height:1.5}
.hd-lech ul{margin:5px 0 0 18px}
.hd-lech li{margin-bottom:2px;word-break:break-word}
.hd-kq select{padding:6px 9px;border:1px solid var(--vien);border-radius:7px;font-size:12.5px;margin-top:5px}

/* ---------- badge "đang về" ở tab Thực tồn / Đặt hàng NCC ---------- */
.dangve-badge{display:inline-block;margin-top:3px;background:#fff3d6;color:#8a6100;
  border:1px solid #f0dda8;border-radius:99px;padding:1px 7px;font-size:10px;font-weight:700;
  white-space:nowrap;font-family:'Segoe UI',system-ui,sans-serif;letter-spacing:0}

/* ---------- chặng 5 + đường sửa vòng đời ---------- */
.vd-xong{background:#e8f6ee;border:1px solid #b9e0c9;border-radius:10px;padding:11px 14px;
  font-size:13.5px;color:#1e7a44;margin:12px 0 4px}
/* Huỷ / lùi chặng — 31/07/2026 đổi từ chữ gạch chân xám sang NÚT VIỀN (mục 10).
   Cách cũ (color:#8b989d, chỉ đỏ khi :hover) kín tới mức Sếp "nhìn mãi mới phát hiện ra",
   và trên điện thoại KHÔNG CÓ hover nên nó xám vĩnh viễn. Nút viền vẫn giữ được ý đồ
   "không mời gọi bấm" (không nền đặc) mà nhìn phát là thấy.
   Đặt tận đáy trang, cách nhóm nút chính bằng vạch đứt + 16px khoảng trắng. */
.vd-sua{margin-top:16px;padding-top:12px;border-top:1px dashed var(--vien);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vd-sua span{font-size:11.5px;color:#a8b4b8;margin-right:auto;flex:1 1 200px}
.btn-vien-do{background:#fff;border:1.5px solid var(--do);color:var(--do);font-weight:600;
  padding:8px 14px;font-size:13px}
.btn-vien-do:hover{background:var(--do-nhat)}
.btn-vien-xam{background:#fff;border:1.5px solid #b9c6ca;color:#5c6a70;font-weight:600;
  padding:8px 14px;font-size:13px}
.btn-vien-xam:hover{background:var(--kem);border-color:var(--teal);color:var(--teal-d)}

/* ---------- tab Đối chiếu Sthink ---------- */
.dc-tick{font-size:12.5px;color:#4a5a60;display:flex;align-items:center;gap:6px}
.dc-tick input{width:15px;height:15px;accent-color:var(--teal)}
.tbl-dc{table-layout:fixed;width:100%;border-collapse:collapse;font-size:13.5px}
.tbl-dc .c-sku{width:26%}
.tbl-dc .c-ncc{width:16%}
.tbl-dc .c-n{width:11%}
.tbl-dc .c-gc{width:25%}
.tbl-dc th{background:var(--teal);color:#fff;padding:9px 8px;font-size:11.5px;text-align:left;
  white-space:normal;line-height:1.25}
.tbl-dc th.c-n{text-align:right}
.tbl-dc th span{font-weight:400;opacity:.85;font-size:10.5px}
.tbl-dc td{padding:9px 8px;vertical-align:top;border-bottom:1px solid var(--vien)}
.tbl-dc .ma{font-family:Consolas,'Courier New',monospace;font-size:11px;color:var(--teal-d);
  display:block;word-break:break-all}
.tbl-dc .ten{font-weight:700;display:block;line-height:1.35;margin-top:2px;word-break:break-word}
.tbl-dc .so{text-align:right}
.tbl-dc .gc{font-size:12.5px;line-height:1.45;word-break:break-word}
.tbl-dc .phu{display:block;font-size:10.5px;color:#8b989d;font-weight:400;margin-top:2px}
.tbl-dc b.do{color:var(--do)}
.tbl-dc b.cam{color:#b8790a}
.tbl-dc tr.m-do{background:#fef8f8}
.tbl-dc tr.m-cam{background:#fffdf5}

@media(max-width:900px){
  .tbl-dc{min-width:0}
  .tbl-dc thead{display:none}
  .tbl-dc,.tbl-dc tbody,.tbl-dc tr,.tbl-dc td{display:block;width:100%}
  .tbl-dc tr{border:1px solid var(--vien);border-radius:12px;margin-bottom:10px;padding:12px}
  .tbl-dc td{border:none;padding:0}
  .tbl-dc td+td{margin-top:5px}
  .tbl-dc .so{text-align:left}
}

/* nhật ký dạng dòng thời gian */
.vd-nk{border-left:2px solid var(--vien);margin-left:6px;padding-left:0}
.vd-nk-d{display:flex;gap:12px;padding:7px 0 7px 14px;position:relative;font-size:13px;line-height:1.45}
.vd-nk-d::before{content:'';position:absolute;left:-5px;top:13px;width:8px;height:8px;border-radius:50%;
  background:var(--teal)}
.vd-nk-d .l{flex:0 0 128px;color:#8b989d;font-size:11.5px;padding-top:1px}
.vd-nk-d .r{flex:1;min-width:0;word-break:break-word}
.vd-nk-d .doi{background:var(--cam-nhat);border:1px solid #f0dda8;border-radius:5px;padding:0 6px;
  font-family:Consolas,'Courier New',monospace;font-size:11.5px;color:#7a5a00;white-space:nowrap}

/* Tên chặng bản NGẮN chỉ dùng trên điện thoại — nhờ nó mà 5 ô vừa đúng một hàng
   không phải cuộn ngang. Bản dài giữ cho máy tính. */
.vdx-o .t-m{display:none}

@media(max-width:900px){
  /* Khung tab bóp lề: 16px mỗi bên trên màn 390px là ăn mất 8% chiều ngang. */
  .vdx-khung{padding:10px}

  /* ---- dải 5 chặng: 5 ô vừa MỘT hàng, không cuộn ngang ---- */
  .vdx-dai{gap:4px;margin-bottom:6px}
  .vdx-o{padding:6px 4px 7px;border-radius:9px;text-align:center}
  .vdx-o .k{display:block;margin-bottom:1px}
  .vdx-o .b{display:inline-block;width:14px;height:14px;line-height:14px;font-size:9px}
  .vdx-o .t-d{display:none}
  .vdx-o .t-m{display:block;font-size:10.5px;font-weight:700;color:var(--ch);line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vdx-o .n{font-size:20px}
  .vdx-o .p{display:none}          /* "chờ ai" đã nói ở màn chi tiết, ngoài đây là chữ thừa */
  .vdx-o .c{top:2px;right:2px;padding:0 4px;font-size:9.5px}
  .vdx-o.on::after{left:5px;right:5px}

  /* ---- hàng cảnh báo: gọn lại cho vừa MỘT hàng ----
     Ẩn riêng chip "Lệch với Sthink: chưa có số liệu" (lớp .tat): nó là chip DÀI NHẤT mà
     không có số cũng không bấm được việc gì — giữ nó là đẩy các chip bấm được xuống hàng thứ hai,
     tốn 26px ở mọi lần mở tab. Máy tính vẫn hiện đủ. */
  .vdx-canh{gap:5px;margin-bottom:6px}
  .vdx-canh .vdx-c{font-size:11.5px;padding:3px 9px}
  .vdx-canh .vdx-c.tat{display:none}

  /* ---- thanh lọc DÍNH đỉnh: lọc lại không phải cuộn lên đầu ---- */
  .vdx-loc{position:sticky;top:0;z-index:5;margin:0 -10px 7px;padding:6px 10px;
    border-bottom:1px solid var(--vien);box-shadow:0 2px 6px rgba(13,43,53,.06)}
  .vdx-loc select{flex:1 1 0;min-width:0;max-width:none;font-size:16px;padding:7px 8px}
  .vdx-loc .btn{min-height:40px}
  .vdx-loc .dem{flex:0 0 auto}
  /* Trùng với dải 5 chặng phía trên — xem giải thích ở veLocVD(). */
  .vdx-loc .vdx-o-chang{display:none}

  /* ---- bảng phiếu → THẺ. Bỏ hẳn min-width:760px cũ (phải kéo ngang mới đọc được).
       Vẫn dùng ĐÚNG một hàm veDongPhieu() cho cả 2 màn hình, không viết bản riêng cho mobile. ---- */
  .tbl-vd thead{display:none}
  .tbl-vd,.tbl-vd tbody{display:block;width:100%}
  /* ⚠ ĐÃ THỬ cho ô chặng trải 3 hàng ('sl chang') để nhãn cảnh báo thứ hai không đẩy thẻ cao
     thêm — HỎNG: cột chặng rộng ra, bóp dòng "3 mã · 24 cái" xuống 2 hàng, thẻ thành 120px
     (tệ hơn 102px). Giữ 2 hàng, giải quyết bằng cách bóp khoảng cách giữa 2 nhãn ở dưới. */
  .tbl-vd tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:'ma chang' 'ncc chang' 'sl sl' 'ai ai';
    column-gap:8px;border:1px solid var(--vien);border-radius:11px;background:#fff;
    padding:7px 11px;margin-bottom:6px;border-bottom:1px solid var(--vien)}
  .tbl-vd td{display:block;border:none;padding:0}
  .tbl-vd .c-ma-td{grid-area:ma}
  .tbl-vd .c-ncc-td{grid-area:ncc}
  .tbl-vd .c-chang-td{grid-area:chang;text-align:right;align-self:start}
  /* Bỏ đường kẻ ngắt trong thẻ: viền thẻ đã tách các phiếu với nhau rồi, kẻ thêm bên trong
     chỉ tốn 6px mỗi thẻ mà không giúp đọc nhanh hơn. */
  .tbl-vd .c-sl-td{grid-area:sl;margin-top:3px}
  .tbl-vd .c-ai-td{grid-area:ai}
  .tbl-vd .c-sl-td,.tbl-vd .c-sl-td.so{text-align:left}
  .tbl-vd .ten{font-size:14px;line-height:1.25;display:block}
  .tbl-vd .ma{line-height:1.2}
  /* Xếp ngang cho gọn thẻ, nhưng phải tự chèn dấu phân cách — không thì
     "1 mã" và "4 cái" dính liền thành "1 mã4 cái". */
  .tbl-vd .phu,.tbl-vd .phu2{display:inline;margin:0}
  .tbl-vd .phu2+.phu2::before,.tbl-vd .c-sl-td .phu::before,
  .tbl-vd .c-ma-td .phu::before{content:' · '}

  /* ⚠ HAI LUẬT ẨN DƯỚI ĐÂY PHẢI ĐỨNG SAU luật `.phu2{display:inline}` ở trên VÀ phải đủ 3 lớp.
     Bắt được lỗi thật khi soi ảnh chụp 30/07/2026: viết `.tbl-vd .vd-khi-d{display:none}` (2 lớp)
     ở phía trên thì bị `.tbl-vd .phu2{display:inline}` (2 lớp, đứng sau) ghi đè —
     thẻ in ra "tạo 29/7 · hẹn giao 25/7" RỒI in "hẹn giao 25/7" lần nữa. Đọc code không thấy. */
  .tbl-vd .c-ai-td .vd-khi-d{display:none}
  .tbl-vd .c-ai-td .vd-khi-m{display:inline}
  /* Ẩn TÊN ĐỢT trên thẻ: mã phiếu "ĐH-260730-01/CONTRA" đã chứa sẵn ngày và tên NCC,
     còn tên đợt thì giống nhau ở mọi phiếu cùng đợt — in lại là lặp mà tốn 17px MỖI thẻ,
     đúng bằng phần chênh giữa 3 và 4 thẻ nhìn thấy. Máy tính vẫn hiện. */
  .tbl-vd .c-ma-td .phu{display:none}
  /* Nhãn cảnh báo thứ hai xếp chồng dưới nhãn chặng: bóp khoảng cách + cỡ chữ để thẻ có
     cảnh báo chỉ cao hơn thẻ thường vài px, thay vì 17px (đúng phần chênh 4 và 3 thẻ). */
  .tbl-vd .c-chang-td .badge{padding:2px 7px;font-size:11px}
  .tbl-vd .c-chang-td .badge+.badge,.tbl-vd .chip-toi{margin-top:2px!important}
  /* Thẻ gấp: viền trái dày cả thẻ, nhìn nhanh vẫn thấy. */
  .tbl-vd tbody tr.gap{border-color:#f0b9b9;box-shadow:inset 4px 0 0 var(--do)}
  .tbl-vd tbody tr.toi{border-color:#f2ddb0;box-shadow:inset 4px 0 0 var(--cam)}
  .tbl-vd tbody tr.gap td:first-child,.tbl-vd tbody tr.toi td:first-child{padding-left:0}

  .vd-tt2{gap:8px;padding:6px 9px;margin-bottom:8px}
  .vd-tt2-t{font-size:11.5px;flex:1 1 0;min-width:0}
  .vd-nk-d{flex-direction:column;gap:2px}
  .vd-nk-d .l{flex:none}
  .tbl-ct{min-width:680px}

  /* ---- ĐẦU PHIẾU DÍNH ĐỈNH: cuộn tới đâu cũng thoát ra được (mục 9) ----
     ⚠ Phải cho DÍNH CẢ KHỐI .vd-dau, không phải riêng cái nút. position:sticky chỉ giữ
     phần tử trong phạm vi CHA của nó: .vd-dau chỉ cao ~60px nên cuộn quá 60px là nút
     trôi mất theo cha, đúng như bài kiểm bắt được (cuộn 600px thì nút biến). */
  .vd-dau{position:sticky;top:0;z-index:6;gap:8px;margin:0 -10px 8px;padding:7px 10px;
    background:#fff;box-shadow:0 2px 8px rgba(13,43,53,.10);flex-wrap:nowrap;align-items:center}
  .vd-quaylai{flex:0 0 auto;padding:7px 12px;font-size:13px}
  .vd-dau-t{min-width:0}
  .vd-dau-t b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vd-dau-t span{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* ---- Vùng 1 màn "Mới lên": người + hẹn giao chia đôi một hàng, ghi chú xuống dưới ---- */
  .vd-dau-viec{padding:9px 10px;margin:8px 0 4px}
  .vd-dau-viec .vd-bang-t{margin-bottom:7px}
  .vd-dau-viec .vd-o3{gap:6px}
  .vd-o{flex:1 1 calc(50% - 3px);min-width:0}
  .vd-o.rong{flex:1 1 100%}
  .vd-o label{font-size:10px}
  .vd-o select,.vd-o input{font-size:16px;padding:8px 9px}  /* 16px để iOS không tự phóng to */

  /* ---- nén đầu màn nhận hàng (mục 15) ----
     Ba khối dưới đây mỗi khối đang tự xuống 2 hàng trên màn 390px. Ép về 1 hàng, phần
     tràn thì cắt bằng ellipsis — KHÔNG bỏ thông tin nào, chỉ thôi xuống dòng. */
  .vd-bang{padding:8px 10px;margin:8px 0 4px}
  /* hướng dẫn "Cách điền" nằm NGANG HÀNG tiêu đề thay vì chiếm dòng riêng */
  .vd-bang-t{margin-bottom:0;gap:7px}
  .vd-hd{display:contents}
  .vd-hd>summary{order:3}
  .vd-hd[open]{display:block;margin-top:6px}
  .vd-hd[open]>summary{order:0}

  .vd-tt2{padding:5px 9px;flex-wrap:nowrap}
  .vd-tt2-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .vd-phieu{margin-top:10px}
  /* Nhãn "PHIẾU ĐẶT HÀNG/NHẬN HÀNG" bỏ trên điện thoại: tiêu đề khối ngay trên đã nói rồi,
     giữ lại chỉ để đẩy mã phiếu xuống hàng thứ hai. Viền teal 2px vẫn cho biết đây là phiếu. */
  .vd-phieu-d{padding:7px 10px;gap:8px;flex-wrap:nowrap;align-items:center}
  .vd-phieu-d b{display:none}
  .vd-phieu-d .ma{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vd-phieu-d .ncc{font-size:11px;flex:0 0 auto;max-width:45%;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .vd-phieu-c{padding:7px 10px;font-size:11.5px}

  /* ---- THANH HÀNH ĐỘNG dính ĐÁY màn hình ----
     Không thì phải cuộn hết bảng hàng (có phiếu vài chục mã) mới bấm được nút kết thúc việc. */
  .vd-thanh{position:sticky;bottom:0;z-index:6;background:#fff;margin:10px -10px 0;
    padding:9px 10px;border-top:1px solid var(--vien);box-shadow:0 -3px 10px rgba(13,43,53,.10)}
  .vd-thanh-g{flex:1 1 100%;order:-1;font-size:10.5px;margin:0 0 2px}
  .vd-thanh .btn{flex:1 1 0;min-height:42px;padding:9px 10px;font-size:13px}
  .vd-thanh .vd-chinh{flex:2 1 0;font-size:13.5px;padding:9px 10px}

  /* ---- thước 5 chấm trên thẻ phiếu ---- */
  .tbl-vd .c-chang-td .cham5{justify-content:flex-end}
  .cham5-t{font-size:10px;margin-top:2px}

  /* huỷ / lùi: nút đủ to để bấm, nhưng vẫn xếp cuối */
  .vd-sua .btn{flex:1 1 0;min-height:40px}
}

/* ==========================================================================
   XEM TRƯỚC CHIA PHIẾU (31/07/2026 — mục 2 của Sếp)
   Markup nằm ở index.html (#xtLop), xử lý ở js/vong-doi.js.
   ========================================================================== */
/* 29/08 thay da theo chuẩn mục 8: nền mờ + blur hiện 180ms, hộp trồi lên 260ms
   (keyframes mo-nen/troi khai ở index.html, chạy lại mỗi lần display none→flex) */
.xt-lop{position:fixed;inset:0;z-index:60;background:rgba(6,43,51,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:mo-nen .18s ease}
.xt-hop{background:#fff;border-radius:20px;width:100%;max-width:820px;max-height:90vh;
  display:flex;flex-direction:column;box-shadow:var(--b3);overflow:hidden;
  animation:troi .26s var(--nhip)}
.xt-dau{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;
  background:var(--kem);border-bottom:1px solid var(--vien)}
.xt-dau b{font-size:15px;color:var(--teal-d)}
#xtTom{font-size:12.5px;color:#4a5a60;margin-top:3px;line-height:1.5}
/* Số phiếu sẽ tạo là thông tin QUAN TRỌNG NHẤT của màn này — nó phải to và đổi ngay
   mỗi lần đổi NCC, không thì gom xong vẫn không biết mình đã gom được hay chưa. */
#xtTom .xt-so{color:var(--do);font-size:14px}
#xtTom .xt-doi{background:#fff3d6;color:#8a6100;border-radius:99px;padding:1px 8px;
  font-size:11px;font-weight:700}
.xt-dong{margin-left:auto;background:none;border:none;font-size:19px;color:var(--xam);
  line-height:1;padding:2px 6px}
.xt-dong:hover{color:var(--do)}
.xt-than{padding:12px 16px;overflow-y:auto;flex:1}
.xt-hang{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.xt-hang label{font-size:12.5px;font-weight:600;color:#4a5a60;flex:0 0 auto}
.xt-hang input,.xt-hang select{padding:8px 10px;border:1.5px solid #cfd8db;border-radius:8px;
  font-size:13.5px;background:#fff;min-width:0}
.xt-hang input{flex:1 1 220px}
.xt-hang select{flex:0 1 250px}
.xt-gom{background:#f5fbfc;border:1px solid #cfe3e7;border-radius:10px;padding:9px 11px}
.xt-nhom{font-size:12.5px;font-weight:700;color:var(--teal-d);background:#e6f2f4;
  border-radius:8px 8px 0 0;padding:6px 10px;margin-top:10px;border:1px solid #bcdde2;border-bottom:none}
.xt-nhom.chua{background:#fff3d6;color:#8a6100;border-color:#f0d18a}
.xt-bang{width:100%;border-collapse:collapse;table-layout:fixed;
  border:1px solid var(--vien);border-top:none}
.xt-bang td{padding:6px 9px;font-size:13px;border-bottom:1px solid #eef2f3;vertical-align:middle}
.xt-bang tr:last-child td{border-bottom:none}
.xt-bang .s{width:34px;text-align:center;color:#9aa8ad;font-size:11.5px}
.xt-bang .m{width:16%;font-family:Consolas,'Courier New',monospace;font-size:11px;
  color:var(--teal-d);word-break:break-all}
.xt-bang .t{font-weight:700;word-break:break-word}
.xt-bang .n{width:13%;text-align:right;font-weight:700;white-space:nowrap}
.xt-bang .c{width:27%}
.xt-bang .c select{width:100%;padding:5px 7px;border:1px solid var(--vien);border-radius:7px;
  font-size:12.5px;background:#fff}
/* ô gõ-lọc NCC thay thế <select> (DNCC việc 6) */
.xt-bang input.xt-ncc{width:100%;min-width:150px;box-sizing:border-box;
  padding:5px 7px;border:1px solid var(--vien);border-radius:7px;font-size:12.5px;background:#fff}
/* dòng đã đổi NCC so với mặc định: tô vàng để rà lại trước khi bấm tạo */
.xt-bang tr.doi{background:#fffdf5}
.xt-bang tr.doi .c select{border-color:var(--cam);background:#fffdf6;font-weight:600}
.xt-bang tr.doi .c input.xt-ncc{border-color:var(--cam);background:#fffdf6;font-weight:600}
/* justify-content:flex-end thay cho margin-right:auto của ô tick NCC mặc định đã gỡ
   01/08/2026 — giữ hai nút Huỷ / Tạo phiếu nằm mép phải như cũ */
.xt-chan{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--vien);background:#fafcfc}

@media(max-width:640px){
  .xt-lop{padding:0;align-items:stretch}
  .xt-hop{max-height:100vh;border-radius:0;max-width:none}
  .xt-than{padding:10px}
  .xt-hang label{flex:1 0 100%}
  .xt-hang input,.xt-hang select{flex:1 1 100%}
  .xt-gom .btn{flex:1 1 100%}
  .xt-bang .m{display:none}          /* thẻ hẹp: tên hàng quan trọng hơn mã */
  .xt-bang .n{width:18%}
  .xt-bang .c{width:38%}
  .xt-chan .btn{flex:1 1 0;min-height:42px}
}

/* ---------- bảng phân vai ---------- */
.tbl-vai{table-layout:fixed}
.tbl-vai .c-nguoi{width:30%}
.tbl-vai .c-vai{width:46%}
.tbl-vai .c-tt{width:24%}
.tbl-vai th{padding:9px 10px;font-size:12px;line-height:1.25;white-space:normal}
.tbl-vai td{padding:10px;font-size:13.5px;vertical-align:top}

.tbl-vai .ten{font-weight:700;color:#1e2a2e}
.tbl-vai .phu{display:block;font-size:11.5px;color:#8b989d;font-weight:400;line-height:1.35;
  margin-top:2px;word-break:break-word}
.tbl-vai .phu code{font-family:Consolas,'Courier New',monospace}

/* ---------- ô tích vai dạng chip ---------- */
.vai-o{display:flex;flex-wrap:wrap;gap:7px}
.vai-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--vien);
  background:#fff;border-radius:99px;padding:5px 12px 5px 9px;font-size:12.5px;font-weight:600;
  color:var(--xam);cursor:pointer;user-select:none;transition:background .12s,border-color .12s,color .12s}
.vai-chip input{width:15px;height:15px;accent-color:var(--teal);cursor:pointer;margin:0}
.vai-chip:hover{border-color:var(--teal);color:var(--teal)}
.vai-chip.on{background:#e6f2f4;border-color:var(--teal);color:var(--teal-d)}
.vai-chip.dang-luu{opacity:.5;pointer-events:none}
.vai-chip.khoa{opacity:.55;cursor:not-allowed;background:#f6f8f8}
.vai-chip.khoa:hover{border-color:var(--vien);color:var(--xam)}

/* Quản lý tự có đủ 4 vai — nói ra bằng chữ thay vì tích sẵn 4 ô rồi khoá lại,
   để không ai tưởng 4 vai đó nằm thật trong bảng kk_vai. */
.vai-tudu{font-size:12.5px;color:var(--teal-d);background:#e6f2f4;border:1px solid #bcdde2;
  border-radius:8px;padding:6px 11px;display:inline-block;line-height:1.4}

/* ---------- nhãn trạng thái ---------- */
.tt-do{background:var(--do-nhat);color:#a53030}
.tt-cam{background:#fff3d6;color:#8a6100}
.tt-teal{background:#e6f2f4;color:var(--teal-d)}
.tt-xam{background:#eef1f2;color:var(--xam)}
.tbl-vai .lancuoi{display:block;font-size:11.5px;color:#8b989d;margin-top:4px}

/* ---------- điện thoại: bảng → thẻ ----------
   Ngưỡng 900px lấy đúng theo trang Tài khoản: dưới mức đó bóp cột làm cụt chữ trong chip. */
@media(max-width:900px){
  .tbl-vai thead{display:none}
  .tbl-vai,.tbl-vai tbody,.tbl-vai tr,.tbl-vai td{display:block;width:100%}
  .tbl-vai tr{border:1px solid var(--vien);border-radius:12px;margin-bottom:10px;
    padding:12px;background:#fff}
  .tbl-vai td{border:none;padding:0}
  .tbl-vai td+td{margin-top:10px}
  .tbl-vai .c-tt-td{padding-top:9px;border-top:1px dashed var(--vien)}
}

/* DNCC — ghi chú dưới ô NCC ở màn xem trước chia phiếu */
.xt-ghichu { font-size: 11px; color: #8a8a8a; margin-top: 2px; line-height: 1.3; }
.xt-ghichu button {
  border: 0; background: none; padding: 0 0 0 4px; cursor: pointer;
  color: #067686; text-decoration: underline; font-size: 11px;
}
.xt-canh {
  font-size: 11px; color: #9a4b00; background: #fff4e5;
  border-left: 3px solid #f08c00; padding: 3px 6px; margin-top: 3px; line-height: 1.35;
}
.xt-canh button {
  border: 1px solid #f08c00; background: #fff; color: #9a4b00;
  border-radius: 3px; padding: 1px 6px; margin-left: 6px; cursor: pointer; font-size: 11px;
}

/* ============================ POPUP HOÁ ĐƠN (KIEMKHO.HOADON, 04/09/2026) ============
   Spec SPEC-HOA-DON-PDF-GAN-SKU.md mục 2.1. Dùng <dialog> — nhớ bẫy inert khi đo:
   mọi thứ NGOÀI dialog đang mở đều không bấm được (reference_dialog_inert_lam_phep_kiem_mu). */
/* ⚠ margin:auto phải ghi TƯỜNG MINH: reset `*{margin:0}` của app nuốt mất margin auto
   mặc định của <dialog> → popup dính góc trên-trái (soi ảnh 04/09 mới thấy).
   max-width cũng phải ghi đè: UA mặc định calc(100% - 36px) bóp mất bề ngang trên mobile. */
.hd-popup{border:none;border-radius:14px;padding:0;margin:auto;
  width:min(960px,calc(100vw - 24px));max-width:min(960px,calc(100vw - 24px));
  max-height:calc(100vh - 48px);box-shadow:0 12px 40px rgba(13,43,53,.28);
  display:flex;flex-direction:column;overflow:hidden}
.hd-popup:not([open]){display:none}
.hd-popup::backdrop{background:rgba(13,43,53,.45)}
.hd-p-dau{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:14px 16px 8px;font-size:14px;line-height:1.45}
.hd-p-dong{flex:0 0 auto;padding:4px 10px}
.hd-popup .hd-so{padding:0 16px;margin:0 0 8px}
.hd-popup .vd-thieu{margin:0 16px 8px}
.hd-p-phieu{padding:8px 16px;border-top:1px dashed var(--vien);font-size:13px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hd-p-phieu select{padding:6px 9px;border:1px solid var(--vien);border-radius:7px;font-size:12.5px}
.hd-p-phieu label{font-size:12.5px;color:#5c6a70}
.hd-p-cuon{overflow:auto;flex:1 1 auto;border-top:1px solid var(--vien)}
.hd-p-bang{width:100%;border-collapse:collapse;font-size:12.5px}
.hd-p-bang th{position:sticky;top:0;background:#e2f4ee;color:#065f46;text-align:left;
  padding:8px 10px;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.hd-p-bang td{padding:8px 10px;border-top:1px solid #eef3f4;vertical-align:top;line-height:1.4}
.hd-p-bang .c-stt{width:1%;color:#8b989d}
.hd-p-bang .c-so{text-align:right;white-space:nowrap;width:1%}
.hd-p-bang th.c-so{text-align:right}
.hd-p-bang .c-nhan{text-align:right;white-space:nowrap;width:1%}
.hd-p-bang .c-gan{width:38%}
.hd-p-khop{color:#047857;font-weight:700}
.hd-p-lech{color:#b42318;font-weight:700}
.hd-p-so{width:76px;padding:5px 7px;border:1px solid var(--vien);border-radius:7px;
  font-size:12.5px;text-align:right}
.hd-p-chon{width:100%;max-width:100%;padding:6px 8px;border:1px solid var(--vien);
  border-radius:7px;font-size:12.5px;margin-top:4px}
.hd-p-timo{width:100%;padding:6px 9px;border:1px solid var(--cam);border-radius:7px;
  font-size:12.5px;margin-top:4px}
.hd-p-chan{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--vien);background:#fbfdfd}
.hd-p-chan .ghi{font-size:12px}

/* nhãn nguồn gán — xanh: máy chắc (luật đã học), vàng: máy đoán, đỏ: chịu, xám: người chọn */
.g-nhan{display:inline-block;font-size:10.5px;font-weight:700;border-radius:6px;
  padding:2px 7px;letter-spacing:.01em;white-space:nowrap}
.g-xanh{background:#e8f6ee;color:#047857;border:1px solid #b9e0c9}
.g-vang{background:#fff4e5;color:#9a4b00;border:1px solid #f0d18a}
.g-do{background:var(--do-nhat);color:#b42318;border:1px solid #f0c9c9}
.g-xam{background:#eef1f2;color:#5c6a70;border:1px solid #dbe3e5}
td .g-nhan{margin-left:0}

/* Sổ hoá đơn + bảng hoá đơn trong màn phiếu — dòng nào cũng BẤM ĐƯỢC để mở popup gán */
.so-hd-dong{cursor:pointer}
.so-hd-dong:hover td{background:var(--kem)}
/* dòng phụ nói rõ LỆCH GÌ — nằm ngay dưới dòng hoá đơn, đỏ nhạt, vẫn bấm mở popup được */
.hd-lech-dong td{background:var(--do-nhat);color:#7c2323;font-size:12px;line-height:1.5;
  border-top:none;padding-top:4px}

/* ---------- điện thoại: popup toàn màn + bảng dòng → thẻ ---------- */
@media(max-width:900px){
  .hd-popup{width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0;border-radius:0}
  .hd-p-bang thead{display:none}
  .hd-p-bang,.hd-p-bang tbody,.hd-p-bang tr,.hd-p-bang td{display:block;width:100%}
  .hd-p-bang tr{border-top:4px solid #e2f4ee;padding:10px 12px}
  .hd-p-bang td{border:none;padding:2px 0}
  .hd-p-bang .c-stt{display:none}
  .hd-p-bang .c-so,.hd-p-bang .c-nhan{text-align:left;width:auto;white-space:normal}
  .hd-p-bang td[data-nhan]:not(.c-stt)::before{content:attr(data-nhan) ': ';font-size:11px;
    color:#8b989d;font-weight:600}
  .hd-p-bang td:first-child+td::before{content:''}
  .hd-p-bang .c-gan{width:auto;margin-top:6px;padding-top:6px;border-top:1px dashed var(--vien)}
  .so-hd thead{display:none}
  .so-hd,.so-hd tbody,.so-hd tr,.so-hd td{display:block;width:100%}
  .so-hd tr{border:1px solid var(--vien);border-radius:12px;margin-bottom:10px;padding:12px;background:#fff}
  .so-hd td{border:none;padding:2px 0}
  .so-hd td[data-nhan]::before{content:attr(data-nhan) ': ';font-size:11px;color:#8b989d;font-weight:600}
}

/* ============ THẺ HOÁ ĐƠN ĐẦY ĐỦ + GIÁ NHẬP + HỘP ĐỔI GIÁ (04/09 tối) ============
   Spec SPEC-HOA-DON-CHI-TIET-GIA-NHAP.md — mỗi tờ một thẻ thực như hoá đơn. */
.hd-the{border:1px solid var(--vien);border-radius:12px;background:#fff;margin-bottom:12px;
  padding:12px 14px;cursor:pointer;transition:box-shadow .12s}
.hd-the:hover{box-shadow:0 3px 12px rgba(13,43,53,.12)}
.hd-the-dau{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.hd-the-so{font-size:14px}
.hd-the-so a{font-size:12px;margin-left:4px}
.hd-the-nb{font-size:13px;margin-top:2px}
.hd-the-ma{font-size:12px;color:#5c6a70;margin:2px 0 8px;word-break:break-all}
.hd-the-bang{width:100%;border-collapse:collapse;font-size:12.5px}
.hd-the-bang th{background:#e2f4ee;color:#065f46;text-align:left;padding:6px 8px;
  font-size:11px;text-transform:uppercase;white-space:nowrap}
.hd-the-bang td{padding:6px 8px;border-top:1px solid #eef3f4;vertical-align:top;line-height:1.45}
.hd-the-bang .c-stt{width:1%;color:#8b989d}
.hd-the-bang .c-so{text-align:right;white-space:nowrap;width:1%}
.hd-the-bang th.c-so{text-align:right}
.hd-the-gan{display:block;font-size:11.5px;color:#047857;font-weight:600;margin-top:1px}
.hd-the-gan.chua{color:#b42318}
.hd-the-chan{margin-top:8px;padding-top:8px;border-top:1px solid var(--vien);font-size:13px;text-align:right}
.hd-the-tong{font-weight:800;font-size:14px;color:#0d2b35}
.hd-the-lech{margin-top:8px;background:var(--do-nhat);border-left:3px solid var(--do);
  border-radius:8px;padding:7px 10px;font-size:12px;color:#7c2323;line-height:1.5}

/* cột Giá nhập trước + cảnh báo lệch giá trong popup */
.hd-p-gnt-nguon{font-size:10.5px;color:#8b989d;margin-top:2px;white-space:nowrap}
.hd-p-canh{font-size:11px;margin-top:3px;line-height:1.4;white-space:normal;text-align:right}
.hd-p-canh-len{color:#b42318;font-weight:700}
.hd-p-canh-xuong{color:#047857;font-weight:700}

/* hộp CÓ CẬP NHẬT ĐỔI GIÁ — dialog nhỏ hơn popup chính */
.hd-doigia{width:min(680px,calc(100vw - 24px));max-width:min(680px,calc(100vw - 24px))}
@media(max-width:900px){
  .hd-doigia{width:100vw;max-width:100vw}
  .hd-the-bang{font-size:12px}
  .hd-the-bang th{font-size:10px}
}
/* thẻ hoá đơn trên điện thoại: bảng 7 cột cuộn ngang trong thẻ, tên hàng giữ tối thiểu
   160px để không gãy vụn từng chữ (soi ảnh 390 05/09) */
.hd-the-cuon{overflow-x:auto}
.hd-the-cuon .hd-the-bang{min-width:560px}
/* tên Sthink đứng cạnh mã đã gán trong thẻ hoá đơn (Sếp yêu cầu 05/09) — nhỏ hơn mã,
   thường (không đậm) để mã vẫn là điểm bám mắt */
.hd-the-gan-ten{font-weight:400;color:#3d8a6f}
/* cột Giá nhập trước trên thẻ hoá đơn (Sếp chốt 05/09 hiện thẳng): nguồn + mũi tên %
   xếp dọc dưới con số, chữ nhỏ; bảng nới min-width vì thêm cột */
.hd-the-gt-nguon{display:block;font-size:10px;color:#8b989d;font-weight:400}
.hd-the-bang .hd-p-canh-len,.hd-the-bang .hd-p-canh-xuong{display:block;font-size:10.5px}
.hd-the-cuon .hd-the-bang{min-width:640px}

/* ═══ 05/09 Sếp chỉnh 2 điểm nhìn ═══
   ① Thẻ HOÁ ĐƠN đổi sang bộ CAM (màu khu kế toán sẵn có của app) — trước đây đầu bảng
     cùng teal nhạt với bảng PHIẾU ĐẶT HÀNG ngay trên, hai khối tiệp nhau khó phân biệt.
     Teal = việc kho · Cam = giấy tờ kế toán. Mỗi khối vẫn đúng 1 màu nhấn (luật bố cục). */
.hd-the{border-left:3px solid var(--cam)}
/* ⚠ Phải kê thêm `.card.km` đằng trước: luật Khối Màu `.card.km th` (index.html 03/09)
   nặng điểm (0,2,1) đè mọi `th` con — đo computedStyle 05/09 mới lộ, nhìn CSS không
   thấy. Cùng họ bẫy đã ghi tại index.html cho .tbl-nhan/.tbl-date/.tbl-dc. */
.card.km .hd-the-bang th,.hd-the-bang th{background:#fff4e5;color:#9a4b00}
.hd-the-dau .hd-the-so b{color:#7a4a08}

/* ② Cột GIÁ NHẬP TRƯỚC tô nền + kẻ ranh hai bên — đứng giữa hai cột tiền cùng kiểu số
     nên trước đây lẫn; nền vàng kem nhạt tách nó thành "cột tham chiếu", số nghiêng
     để khỏi nhầm với số tiền của chính tờ hoá đơn. */
.hd-the-bang td.c-gt,.hd-the-bang th.c-gt{background:#fdf8ef;border-left:1px dashed #e8d5b0;border-right:1px dashed #e8d5b0}
.hd-the-bang td.c-gt{font-style:italic;color:#6b5a35}
.hd-the-bang td.c-gt .hd-the-gt-nguon{font-style:normal}