/* =========================================================================
   SUKIDS — TRANG NỘI BỘ (điều phối · CTV · photo)
   Đợt 1 (18/08, anh Huy duyệt): dựng lại trên MỘT bộ token dùng chung.

   Trước đây file này là mười đợt sửa nối đuôi nhau: 99 mã màu rời rạc, 7 kiểu
   nút, 34 lần !important chỉ để tự đè chính mình. Giờ mọi màu đi qua token.

   ⚠️ KHỐI :root DƯỚI ĐÂY PHẢI GIỐNG HỆT khối trong app/giao-dien/giao-dien.css.
      Có bài thử thu-giao-dien.js canh việc đó — sửa một bên là bên kia đỏ.
   ========================================================================= */

/* ===== BẮT ĐẦU KHỐI DÙNG CHUNG ===== */
:root{
  /* ---- font ----------------------------------------------------------
     KHÔNG dùng font tải từ mạng: Sync chạy trong studio, có lúc mất mạng,
     và Electron chặn tải ngoài (CSP). Font hệ thống vẽ dấu tiếng Việt tốt
     và luôn có sẵn. Trang khách thì vẫn dùng Be Vietnam Pro như cũ. */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-so: ui-monospace, Menlo, Consolas, monospace;

  /* =====================================================================
     TONE PASTEL — anh Huy chốt 18/08.
     Studio chụp em bé và gia đình, nên tông phải tươi, dịu, trong trẻo.
     Bảng cũ đậm và hơi "phần mềm quản trị"; bảng này sáng hơn ~25%.

     MỘT ĐIỀU PHẢI NÓI RÕ: pastel thì nền sáng, nên CHỮ TRẮNG TRÊN NỀN
     PASTEL KHÔNG ĐỌC ĐƯỢC (chữ trắng trên #69C5DF chỉ đạt 1.97:1, cần
     4.5:1). Cách giữ đúng màu pastel mà vẫn đọc được là ĐỔI CHỮ THÀNH
     MÀU ĐẬM chứ không phải làm nền đậm đi — nút vẫn xanh pastel y như
     bản mô tả, chữ trên nút thành xanh đen: 6.0:1.
     Mỗi tông vì vậy có thêm một nấc ĐẬM riêng chỉ để làm CHỮ.
     ===================================================================== */

  /* ---- xanh baby (màu thương hiệu chính) ---- */
  /* Nút pastel "lún xuống" khi bấm bằng cách đậm thêm MỘT nấc thôi. Bản mô tả
     ghi #3AA5C4 nhưng đậm tới đó thì chữ chỉ còn 4.14:1 — đọc không nổi. Dừng
     ở #46AECD (4.61:1) là nấc đậm nhất còn đọc được. */
  --chinh-900:#46AECD;   /* nút chính khi bấm giữ                          */
  --chinh-800:#407888;   /* CHỮ xanh — đọc được cả trên nền nhấn (4.52:1)  */
  --chinh-700:#4FB5D2;   /* nút chính khi rê chuột                         */
  --chinh-500:#69C5DF;   /* ★ NỀN NÚT CHÍNH + viền ảnh đã chọn             */
  --chinh-300:#9EDBED;
  --chinh-100:#E8F8FC;   /* nền nhấn                                       */
  --chinh-50 :#F5FCFE;   /* nền xanh rất nhạt cho cả vùng                  */
  --chu-tren-chinh:#173C48;  /* chữ ĐẶT TRÊN nút pastel — 6.00:1           */

  /* ---- vàng bơ (ấm áp, cần để ý — không phải lỗi) ---- */
  --vang-800:#705C25;    /* CHỮ vàng                                       */
  --vang-700:#E5B83E;    /* icon, chấm, viền đậm — KHÔNG làm chữ           */
  --vang-500:#FFD966;
  --vang-300:#FFE29A;
  --vang-100:#FFF7D9;
  --vang-50 :#FFFCF0;
  --vang-25 :#FFFEF7;   /* 24/09 (M+ anh «nhạt nữa» ×2): nền thẻ ĐANG BUNG ở tab In Ấn & Công Nợ */
  --vang-vach:#F0D48A;  /* 24/09: vạch ngăn trong thẻ đang bung                                      */
  --chu-tren-vang:#65501A;   /* chữ trên nút vàng — 5.66:1                 */

  /* ---- xanh lá baby (đã chọn, xong, yên tâm) ---- */
  --la-900:#385316;      /* chữ trên nút lá — 5.38:1                       */
  --la-800:#5C7130;      /* CHỮ lá trên nền sáng                           */
  --la-700:#9BC44F;
  --la-500:#B5D86A;      /* ★ nền nút "xong", dấu tích                     */
  --la-300:#CDE69A;
  --la-100:#F1F8DF;
  --la-50 :#F8FBF0;
  --la-150:#E6F2C8;     /* 24/09 (M+): nền dải tiêu đề bấm được khi rê chuột                          */

  /* ---- coral (màu thứ tư của logo — chỉ 3-5% giao diện) ----
     Dùng cho icon, huy hiệu nhỏ, điểm nhấn. TUYỆT ĐỐI không làm màu chính,
     và không bao giờ làm chữ trên nền trắng (chỉ đạt 2.30:1). */
  --coral-500:#FF8A70;
  --coral-300:#FFB2A0;
  --coral-100:#FFF0EB;

  /* ---- lỗi THẬT (mất mạng, hỏng việc) — coral đậm, không phải đỏ gắt ---- */
  --loi-900:#8F3A2D;
  --loi-700:#B84C3D;     /* CHỮ lỗi — 4.57:1 trên nền lỗi                   */
  --loi-500:#FF8A70;
  --loi-300:#FFC8BC;
  --loi-100:#FFF0EB;
  --loi-50 :#FFF8F5;

  /* ---- hai tông NGOÀI hệ, chỉ để phân biệt bước trong dây chuyền ----
     Dây chuyền có 8 bước; ba tông xanh/vàng/lá không đủ để mắt tách bước
     "lọc RAW" khỏi "chờ giao". Giữ cam + tím riêng, cũng kéo về pastel. */
  --cam-800:#8A5638; --cam-300:#FFD9C7; --cam-100:#FFEDE3; --cam-50:#FFF8F4;
  --tim-800:#6A5A9E; --tim-300:#DDD4F2; --tim-100:#EEE9FA; --tim-50:#F9F7FD;

  /* ---- nền & viền: sáng, sạch, viền gần như hoà vào nền ---- */
  --nen     :#FFFFFF;
  --nen-phu :#F5FCFE;    /* xanh rất nhạt                                  */
  --nen-3   :#EDF6F8;
  --nen-mo  :rgba(255,255,255,.96);
  --man-che :rgba(38,56,64,.35);
  --man-anh :rgba(0,0,0,.8);      /* nền xem ảnh to (R8C3 30/10) — chữ trắng --chu-nguoc trên nền này ≥ 15:1 */
  --vien    :#E7EEF0;    /* viền thẻ, đường kẻ — thuần trang trí           */
  --vien-dam:#C9DCE1;    /* viền khi rê chuột                              */
  --vien-o  :#709BA8;    /* viền Ô NHẬP — phải nhìn ra ô ở đâu (3.02:1)    */

  /* ---- chữ: không dùng đen tuyệt đối ---- */
  --chu      :#263840;   /* 12.19:1                                        */
  --chu-phu  :#60727C;   /* đọc được trên MỌI nền nhạt của hệ (≥4.51:1)    */
  --chu-mo   :#6A767B;   /* mờ nhưng VẪN đọc được, kể cả trên nền phụ      */
  --chu-tat  :#94A4AB;   /* 2.57:1 — CHỈ cho chữ vô hiệu và chữ gợi ý      */
  --chu-nguoc:#FFFFFF;

  /* ---- 5 mức báo (bí danh cho dễ đọc) --------------------------------- */
  --gap-chu:var(--loi-700);    --gap-nen:var(--loi-100);    --gap-vien:var(--loi-300);
  --thuong-chu:var(--vang-800);--thuong-nen:var(--vang-100);--thuong-vien:var(--vang-300);
  --nhac-chu:var(--chu-phu);   --nhac-nen:var(--nen-3);     --nhac-vien:var(--vien);
  --tin-chu:var(--chinh-800);  --tin-nen:var(--chinh-100);  --tin-vien:var(--chinh-300);
  --tot-chu:var(--la-800);     --tot-nen:var(--la-100);     --tot-vien:var(--la-300);

  /* ---- 8 bước dây chuyền ---------------------------------------------- */
  --b-xu-ly-nen:var(--nen-3);     --b-xu-ly-chu:var(--chu-phu);   --b-xu-ly-the:var(--nen-phu);  --b-xu-ly-vien:var(--vien);
  --b-khach-nen:var(--chinh-100); --b-khach-chu:var(--chinh-800); --b-khach-the:var(--chinh-50); --b-khach-vien:var(--chinh-300);
  --b-raw-nen:var(--vang-100);    --b-raw-chu:var(--vang-800);    --b-raw-the:var(--vang-50);    --b-raw-vien:var(--vang-300);
  --b-giao-nen:var(--cam-100);    --b-giao-chu:var(--cam-800);    --b-giao-the:var(--cam-50);    --b-giao-vien:var(--cam-300);
  --b-sua-nen:var(--tim-100);     --b-sua-chu:var(--tim-800);     --b-sua-the:var(--tim-50);     --b-sua-vien:var(--tim-300);
  --b-nop-nen:var(--la-100);      --b-nop-chu:var(--la-800);      --b-nop-the:var(--la-50);      --b-nop-vien:var(--la-300);
  --b-don-nen:var(--la-50);       --b-don-chu:var(--la-800);      --b-don-the:var(--nen);        --b-don-vien:var(--la-100);
  --b-huy-nen:var(--loi-100);     --b-huy-chu:var(--loi-700);     --b-huy-the:var(--loi-50);     --b-huy-vien:var(--loi-300);

  /* ---- bóng: cực nhẹ, chỉ để phân tầng ---- */
  --bong-1:0 1px 3px rgba(38,56,64,.05);
  --bong-2:0 6px 20px rgba(38,56,64,.08);
  --bong-3:0 18px 50px rgba(38,56,64,.14);
  --bong-nut:0 2px 8px rgba(105,197,223,.34);
  --net:0 0 0 3px rgba(105,197,223,.38);

  /* ---- khoảng cách: bậc 4, đúng 8 nấc, cấm số lẻ ----------------------- */
  --k1:4px; --k2:8px; --k3:12px; --k4:16px;
  --k5:24px; --k6:32px; --k7:40px; --k8:48px;

  /* ---- bo góc: mềm hơn cho hợp tông em bé ------------------------------ */
  --bo-o:10px; --bo-the:14px; --bo-hop:20px; --bo-tron:999px;

  /* ---- cỡ chữ: đúng 6 nấc ---------------------------------------------- */
  --cx-h1:28px; --cx-h2:21px; --cx-h3:17px;
  --cx-to:15px; --cx:14px; --cx-nho:12.5px;

  /* ---- kích thước chuẩn ------------------------------------------------ */
  --cao-o:44px; --cao-nut:38px; --cao-nut-nho:30px;
  /* ── 23/09 · năm token của bản mẫu 8d (`8d-tao-bo-anh.html`) ──
     Gói thiết kế đợt 3 gửi kèm CSS trần với đúng từng con số. Thang cỡ chữ, khoảng
     cách và bo góc của app ĐÃ TRÙNG KHỚP sẵn; chỉ thiếu năm token này. Khai ở đây
     thay vì gõ mã màu thẳng — `thu-giao-dien.js` đếm và sẽ đỏ. */
  --sk-xanh-dam:#1C87A9;   /* nút chính CHỮ TRẮNG — token duy nhất được phép làm nền chữ trắng */
  --cao-chip:40px;         /* chip chọn-một */
  --cao-nho:36px;          /* nút − + × và ô số trong dòng món */
  --cao-nut-cuoi:46px;     /* «Thôi» · «Tải lên & tạo link» */
  --nhanh:120ms ease;      /* mọi chuyển đổi — không nảy, không phóng to */
  --cao-bam:44px;          /* vùng bấm tối thiểu trên ĐIỆN THOẠI (trang quầy, trang khách) — gói đợt 4 */
  --so-tab-day:2;          /* số tab ở thanh đáy web giaoanhin — `cong.js` đặt lại theo số tab thật (24/09 · khai mặc định, hết «token ma») */

  /* Màu nộp nền và chip hạn: giữ nguyên bảng màu, cùng nguồn cho app/web. */
  --nop-vien-du-phong:#d8e3e7;
  --nop-loi-vien:#e11d48;
  --nop-loi-chu:#be123c;
  --han-do-nen:#FFE4E6;
  --han-do-chu:#9F1239;
  --han-do-vien:#FDA4AF;
  --han-cam-nen:#FEF3C7;
  --han-cam-chu:#78350F;
  --han-cam-vien:#FCD34D;
  --han-do-nen-toi:#4C0519;
  --han-do-chu-toi:#FECDD3;
  --han-cam-nen-toi:#451A03;
  --han-cam-chu-toi:#FDE68A;
  --han-cam-vien-toi:#B45309;
  --han-xam-nen-toi:#1F2A2E;
  --han-xam-chu-toi:#CBD5D9;
  --han-xam-vien-toi:#3A4A50;
}
/* ===== HẾT KHỐI DÙNG CHUNG ===== */

/* Tên biến ĐỜI CŨ — giữ lại để mọi chỗ var(--be-dam) cũ vẫn chạy. */
:root{
  --kem:var(--nen); --trang:var(--nen); --be:var(--nen-phu); --be-dam:var(--vien);
  --muc:var(--chu); --mo:var(--chu-phu);
  --xanh:var(--chinh-500); --xanh-dam:var(--chinh-800); --xanh-nhat:var(--chinh-100);
  --vang:var(--vang-500); --la:var(--la-500); --la-dam:var(--la-800);
  --san-ho:var(--loi-500); --san-ho-dam:var(--loi-700);
  --bo:var(--bo-o);
}

/* ================= NỀN CHUNG ================= */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
body{
  margin:0;background:var(--nen);color:var(--chu);
  font:var(--cx-to)/1.55 var(--font);-webkit-font-smoothing:antialiased;
}
button{font:inherit;cursor:pointer;border:0;color:inherit}
input,textarea,select{font:inherit;color:inherit}
code{background:var(--nen-3);padding:1px 6px;border-radius:5px;
  font-family:var(--font-so);font-size:var(--cx-nho)}
h2{font-size:var(--cx-h2);font-weight:700;letter-spacing:-.01em;margin:var(--k5) 0 var(--k3)}
h2:first-child{margin-top:var(--k1)}

/* ================= NÚT — ĐÚNG 4 CẤP =================
   .nut là cái khung, không mang màu. Luôn kèm ĐÚNG MỘT cấp:
     .chinh  việc quan trọng nhất màn — mỗi màn chỉ nên có một
     .phu    việc phụ, dùng nhiều nhất
     .mo     việc ít quan trọng, không viền
     .nguy   Huỷ / Xoá / Dừng
   .nho / .rong / .nut-nhat là CỠ, khai báo SAU 4 cấp mới thắng được.
   (Đây chính là lỗi cũ làm mọi nút "phu nho" không nhỏ đi.) */
.nut{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--k2);
  height:var(--cao-nut);padding:0 var(--k4);white-space:nowrap;
  font-size:var(--cx);font-weight:600;line-height:1;
  border:1px solid transparent;border-radius:var(--bo-tron);background:none;
  transition:background-color .13s,border-color .13s,color .13s,box-shadow .13s;
}
.nut:focus-visible{outline:2px solid var(--chinh-500);outline-offset:2px}
/* `.nut.chinh:disabled` · `.nut.vang:disabled` (24/09 §10.261): hai biến thể màu có độ ưu tiên 0,2,0 nên đè nền
   xám của `.nut:disabled` — nút khoá trông y như nút bấm được (nút «Xác nhận đã thu tiền mặt» khi chưa có ảnh) */
.nut:disabled,.nut.chinh:disabled,.nut.vang:disabled{cursor:not-allowed;background:var(--nen-3);border-color:var(--vien);
  color:var(--chu-tat);box-shadow:none}

/* Nút chính giữ ĐÚNG màu pastel #69C5DF, chữ đổi thành xanh đen.
   Chữ trắng trên pastel chỉ đạt 1.97:1 — không đọc được. Đổi chữ chứ không
   làm nền đậm đi, thế mới còn là pastel. */
.nut.chinh{background:var(--chinh-500);border-color:var(--chinh-500);
  color:var(--chu-tren-chinh);box-shadow:var(--bong-nut)}
.nut.chinh:hover:not(:disabled){background:var(--chinh-700);border-color:var(--chinh-700)}
.nut.chinh:active:not(:disabled){box-shadow:none}

.nut.phu{background:var(--nen);border-color:var(--vien-dam);color:var(--chu-phu)}
.nut.phu:hover:not(:disabled){background:var(--chinh-50);border-color:var(--chinh-500);
  color:var(--chinh-800)}

.nut.mo{background:none;border-color:transparent;color:var(--chu-mo);font-weight:500}
.nut.mo:hover:not(:disabled){background:var(--nen-3);color:var(--chu)}

.nut.nguy{background:var(--nen);border-color:var(--loi-300);color:var(--loi-700)}
.nut.nguy:hover:not(:disabled){background:var(--loi-100);border-color:var(--loi-500)}
.nut.nguy.dac{background:var(--loi-700);border-color:var(--loi-700);color:var(--chu-nguoc)}
.nut.nguy.dac:hover:not(:disabled){background:var(--loi-900);border-color:var(--loi-900)}

/* nút "xong / đã nộp" — xanh lá đặc, chữ trắng đủ tương phản */
.nut.la{background:var(--la-800);border-color:var(--la-800);color:var(--chu-nguoc)}
.nut.la:hover:not(:disabled){background:var(--la-900);border-color:var(--la-900)}

/* CỠ — phải đứng sau các cấp trên */
.nut.nho{height:var(--cao-nut-nho);padding:0 var(--k3);font-size:var(--cx-nho)}

/* 19/08 đợt 4 — NGÓN TAY CẦN 44px.
   Sale và photo dùng máy tính, nhưng CTV và điều phối vẫn hay mở trên điện
   thoại. Trên cảm ứng thì nút cao 30px là bấm trượt liên tục. Giữ nguyên
   dáng nút (vẫn 30–38px trông gọn) mà nới VÙNG BẤM ra đủ 44px bằng lớp phủ
   trong suốt — không xô lệch bố cục nào cả. */
@media (pointer:coarse){
  .nut{position:relative}
  .nut::after{content:'';position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}
  .cc-anh-nho .nut-xoa-anh::after{left:-11px;right:-11px;height:44px;width:auto}
}
.nut.rong{width:100%}
.nut-nhat{height:var(--cao-nut-nho);padding:0 var(--k2);font-size:var(--cx-nho);opacity:.72}
.nut-nhat:hover{opacity:1}
.nut-buoc{width:100%;height:auto;padding:var(--k3) var(--k2);font-size:var(--cx-to)}

/* Ô CHỌN TRONG HÀNG LỌC (08/09 — anh Huy chốt «cách A»). Cùng chiều cao, cùng
   bo tròn với nút nhỏ bên cạnh để hàng lọc là MỘT dải liền mạch, không phải
   hai kiểu điều khiển ghép tạm. Mũi tên vẽ bằng gradient — không nhúng ảnh, và
   không để trình duyệt vẽ mũi tên mặc định mỗi hệ một kiểu. */
.loc-tg .o-loc{height:var(--cao-nut-nho);padding:0 30px 0 var(--k3);
  border:1px solid var(--vien-dam);border-radius:var(--bo-tron);background:var(--nen);
  color:var(--chu-phu);font:600 var(--cx-nho)/1 var(--font);cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--chu-phu) 50%),
    linear-gradient(135deg,var(--chu-phu) 50%,transparent 50%);
  background-position:calc(100% - 15px) 12px,calc(100% - 10px) 12px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.loc-tg .o-loc:hover{border-color:var(--chinh-500);color:var(--chinh-800)}
/* Ô lọc rộng THEO CHỮ, không theo hàng (21/09 — anh Huy: «Chưa nộp» và «Tất cả thiết
   kế» đang mỗi ô một hàng). Gốc: luật chung `select{width:100%}` ở trên thắng vì ô
   lọc chưa khai bề rộng riêng — hai ô + ô thẻ + kính lúp nay cùng một hàng. */
.loc-tg .o-loc{width:auto;max-width:100%}

/* ══ THẺ VIỆC RIÊNG CỦA CTV (21/09) ══ chip màu ngoài cùng hàng, ⊕ mờ chìm khi
   chưa gắn (rõ lên khi rê/chạm), hộp gắn/tạo/xoá mở ngay dưới hàng chip. */
.the-viec{display:inline-flex;gap:4px;align-items:center;margin-left:auto}
.the-viec .the-chip{cursor:pointer;border:0;font:inherit}
.the-them{width:22px;height:22px;border-radius:999px;border:1px dashed var(--vien-dam);background:transparent;
  color:var(--chu-phu);font:600 15px/1 var(--font);cursor:pointer;opacity:.35;transition:opacity .15s}
.the-them.co-the{opacity:.55}
.the-viec:hover .the-them,.the-them:focus-visible,.the:hover .the-them{opacity:1}
@media(pointer:coarse){.the-them{opacity:.6;width:28px;height:28px}}
.the-hop{margin:var(--k2) 0;padding:var(--k2) var(--k3);border:1px solid var(--vien);border-radius:var(--bo-tron);
  background:var(--nen-2);display:flex;flex-direction:column;gap:6px}
.the-dong{display:flex;align-items:center;gap:var(--k2);cursor:pointer}
.the-dong input[type=checkbox]{width:18px;height:18px;margin:0}
.the-xoa{margin-left:auto;background:none;border:0;cursor:pointer;opacity:.5;font-size:14px}
.the-xoa:hover{opacity:1}
.the-tao{display:flex;flex-wrap:wrap;gap:var(--k2);align-items:center;margin-top:4px}
.the-tao input[type=text]{flex:1 1 180px;height:var(--cao-nut-nho)}
.the-mau-chon{display:inline-flex;gap:4px}
.the-mau-chon label{cursor:pointer}
.the-mau-chon input{position:absolute;opacity:0;width:0;height:0}
.the-mau-chon i{display:block;width:18px;height:18px;border-radius:999px;border:2px solid transparent}
.the-mau-chon input:checked + i{border-color:var(--chu);box-shadow:0 0 0 2px var(--nen)}
.the-mau-do{background:var(--loi-100);color:var(--loi-700)}
.the-mau-cam{background:var(--cam-100);color:var(--cam-800)}
.the-mau-vang{background:var(--vang-100);color:var(--vang-800)}
.the-mau-la{background:var(--la-100);color:var(--la-800)}
.the-mau-luc{background:var(--la-300);color:var(--la-900)}
.the-mau-xanh{background:var(--chinh-100);color:var(--chinh-800)}
.the-mau-tim{background:var(--tim-100);color:var(--tim-800)}
.the-mau-xam{background:var(--nen-3);color:var(--chu-phu)}
i.the-mau-do{background:var(--loi-300)} i.the-mau-cam{background:var(--cam-300)} i.the-mau-vang{background:var(--vang-300)}
i.the-mau-la{background:var(--la-300)} i.the-mau-luc{background:var(--la-700)} i.the-mau-xanh{background:var(--chinh-300)}
i.the-mau-tim{background:var(--tim-300)} i.the-mau-xam{background:var(--vien-dam)}
.dong-da-tai .mo{color:var(--mo)}
.loc-tg .loc-vach{width:1px;align-self:stretch;background:var(--vien);margin:0 var(--k1)}
/* Câu quy tắc lọc rút thành dấu hỏi — chữ chỉ hiện khi người ta hỏi tới. */
.loc-tg .loc-hoi{width:20px;height:20px;align-self:center;border-radius:999px;
  border:1px solid var(--vien-dam);background:var(--nen);color:var(--chu-mo);
  font:600 11px/1 var(--font);cursor:help;padding:0}
.loc-tg .tu-den[hidden]{display:none}
/* Ô TÌM KÍNH LÚP (18/09 — anh Huy): bình thường một nút tròn ở cuối hàng lọc;
   bấm thì ô nhập trượt ra ngay tại chỗ. Cao bằng nút nhỏ bên cạnh để hàng lọc
   vẫn là một dải liền. Trên điện thoại ô mở tối đa 60% bề ngang — không được
   thò ra ngoài màn (§10.172: tràn ngang không hiện trên ảnh chụp). */
/* Phần vẽ lại được của hàng lọc «Việc đang chạy» — cùng dạng dải với hàng, để ô
   tìm đứng ngoài nó không bị nhấc ra gắn lại mỗi lần vẽ. */
.loc-tg .phan-loc{display:contents}
.tim-gon{display:inline-flex;align-items:center;height:var(--cao-nut-nho);
  border:1px solid var(--vien-dam);border-radius:var(--bo-tron);background:var(--nen);
  max-width:100%;overflow:hidden}
.tim-gon .tim-nut,.tim-gon .tim-xoa{height:100%;width:var(--cao-nut-nho);padding:0;border:0;
  background:transparent;font:inherit;font-size:var(--cx-nho);cursor:pointer;color:var(--chu-phu);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.tim-gon .tim-nut:hover{color:var(--chinh-800)}
.tim-gon .tim-o{width:0;padding:0;border:0;outline:0;background:transparent;height:100%;
  font:600 var(--cx-nho)/1 var(--font);color:var(--chu);transition:width .15s ease;min-width:0}
.tim-gon .tim-xoa{display:none}
.tim-gon.mo{border-color:var(--chinh-500)}
.tim-gon.mo .tim-o{width:min(200px,52vw);padding:0 var(--k1)}
.tim-gon.mo .tim-xoa{display:inline-flex}
.tim-gon .tim-o::-webkit-search-cancel-button{display:none}

/* ⏰ DÒNG TỔNG THEO HẠN — một dòng thay cho cả một hàng chip (08/09).
   Anh Huy: «giao diện thao tác cũng phải hiệu quả». Màn CTV đã có ba hàng lọc;
   hàng thứ tư đẩy bộ ảnh đầu tiên xuống dưới mép màn điện thoại, mỗi ngày mỗi
   lần mở. Nên dòng này vừa nói số vừa là nút lọc.
   Cao 40px chứ không 44px như nút chính: nó là dòng TIN trước, nút sau — cao
   bằng nút chính là nó tranh chỗ với việc thật. Vẫn đủ rộng cho ngón cái. */
.tong-han{display:flex; flex-wrap:wrap; gap:var(--k2); margin:2px 0 var(--k3)}
.cum-han{min-height:40px; padding:0 var(--k4); border-radius:999px; cursor:pointer;
  border:1px solid var(--vien); background:var(--nen); color:var(--chu-phu);
  font:500 var(--cx)/1 var(--font); display:inline-flex; align-items:center; gap:5px}
.cum-han b{font-weight:700; color:var(--chu)}
.cum-han:hover{background:var(--nen-phu); border-color:var(--vien-dam)}
/* Cụm ĐANG CHỌN tô đậm hẳn — người bấm phải thấy ngay mình đang xem nhóm nào,
   không thì họ tưởng danh sách bị mất bộ. */
.cum-han.on{background:var(--chinh-100); border-color:var(--chinh-500); color:var(--chinh-800)}
.cum-han.on b{color:var(--chinh-800)}

/* 🎨 NÚT THIẾT KẾ CỠ LỚN — chỉ dùng ở ô «② NỘP LÊN» của CTV (08/09).
   Anh Huy: «nút thiết kế ở trong mã CTV nằm ở ô nộp lên luôn được không? kích
   thước nút cũng tương tự nút chọn ảnh hoàn thiện» — và chốt màu vàng.

   CÙNG CỠ để ngón cái dễ trúng, KHÁC MÀU để đừng trúng nhầm. Trong ô ấy nay có
   HAI đích khác hẳn nhau: ảnh hoàn thiện gộp vào bản gửi khách, ảnh thiết kế đi
   thư mục riêng thành nhóm riêng. Hai nút to giống hệt nhau đứng cạnh nhau là
   lời mời bấm nhầm — mà bấm nhầm thì gỡ ra mất công cả hai bên. */
.nut.nut-tk-lon{background:var(--vang-100); border-color:var(--vang-300);
  color:var(--vang-800); font-weight:600}
.nut.nut-tk-lon:hover{background:var(--vang-300)}
.nut.nut-tk-lon.on{background:var(--vang-300); border-color:var(--vang-500)}
.vc-cot .nho.tk-chu{margin-top:-2px}

/* nút Copy đổi màu theo số lần bấm — giữ tên class vì JS ghép 'da-copy-'+n */
.nut.da-copy-1{background:var(--la-100);border-color:var(--la-300);color:var(--la-800)}
.nut.da-copy-2{background:var(--la-500);border-color:var(--la-700);color:var(--chu)}
.nut.da-copy-3{background:var(--la-800);border-color:var(--la-800);color:var(--chu-nguoc)}

/* ================= Ô NHẬP ================= */
label{display:block;font-size:var(--cx-nho);font-weight:600;margin:var(--k4) 0 var(--k1);
  color:var(--chu)}
input[type=text],input[type=number],input[type=password],input[type=date],
input:not([type]),textarea,select{
  width:100%;height:var(--cao-o);padding:0 var(--k3);
  background:var(--nen);color:var(--chu);
  border:1px solid var(--vien-o);border-radius:var(--bo-o);appearance:none;
}
textarea{height:auto;min-height:88px;padding:var(--k3);line-height:1.5;resize:vertical}
select{padding-right:var(--k6);
  background-image:linear-gradient(45deg,transparent 50%,var(--chu-phu) 50%),
                   linear-gradient(135deg,var(--chu-phu) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input::placeholder,textarea::placeholder{color:var(--chu-tat)}
input:hover:not(:disabled),select:hover:not(:disabled){border-color:var(--chu-mo)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--chinh-500);
  box-shadow:var(--net)}
input:disabled,select:disabled,textarea:disabled,input[readonly]{
  background:var(--nen-3);color:var(--chu-phu);border-color:var(--vien)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;flex:none;accent-color:var(--chinh-700);margin:0}
.hang{display:flex;gap:var(--k2);align-items:center;flex-wrap:wrap}
/* `min-width:180px` mà trúng ô tích là ép nó rộng bằng cả ô nhập chữ. Hôm
   nay chưa chỗ nào đặt ô tích làm con trực tiếp của `.hang` (đều bọc trong
   nhãn `.chon-o`), nên chưa nổ — nhưng đó là mìn chờ người sau. */
.hang > input:not([type=checkbox]):not([type=radio]){flex:1;min-width:180px}
.chon-o{display:flex;align-items:center;gap:var(--k2);font-weight:500;margin:0}
/* `width:auto` ở đây từng là thuốc giải cho `width:100%` của luật ô-nhập-chữ.
   Vá gốc xong thì nó thành thừa — mà còn hại: `auto` để ô tích co giãn theo
   flex của cha, đo được 33px trong `.td-thanh`. Giữ luật cho ô nhập chữ nằm
   trong nhãn chọn, bỏ ra khỏi ô tích. */
.chon-o input:not([type=checkbox]):not([type=radio]){width:auto}

.nho{font-size:var(--cx-nho);color:var(--chu-mo);line-height:1.6}
.the .nho.mo{opacity:.75;overflow-wrap:anywhere}
.loi{color:var(--loi-700);font-size:var(--cx);margin:var(--k3) 0 0}

/* ================= CÁI CỬA (màn nhập mã) ================= */
.cua{min-height:100dvh;display:grid;place-items:center;padding:var(--k5)}
.cua-hop{
  background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-hop);
  padding:var(--k7) var(--k6);width:min(440px,100%);text-align:center;
  box-shadow:var(--bong-2);overflow:hidden;
}
/* 25/09 (1.5.34 I — anh Huy chốt MỌI vai + giaoanhin): ảnh «đạo đức làm nghề» thay logo ở đầu hộp — trọn ngang
   (lấn qua đệm trái/phải/trên của hộp), bo góc trên theo góc hộp; bản mẫu ke-hoach/mau-dang-nhap-co-anh.html.
   Ảnh vuông 2000px, `aspect-ratio` giữ chỗ trước khi tải xong nên ô mã không nhảy. */
.cua-dao-duc{display:block;width:calc(100% + 2*var(--k6));max-width:none;height:auto;aspect-ratio:1/1;object-fit:cover;
  margin:calc(-1*var(--k7)) calc(-1*var(--k6)) var(--k5);border-radius:calc(var(--bo-hop) - 1px) calc(var(--bo-hop) - 1px) 0 0}
@media (max-width:520px){
  /* 390×844: ảnh + hai câu + ô mã + nút «Vào» phải vừa MỘT màn (đo trong thu-ijk-1534.js) — đệm hộp gọn lại */
  .cua{padding:var(--k4)}
  .cua-hop{padding:var(--k5) var(--k4)}
  .cua-dao-duc{width:calc(100% + 2*var(--k4));margin:calc(-1*var(--k5)) calc(-1*var(--k4)) var(--k4)}
  .cua-hop form{margin-top:var(--k4)}
}
.cua-hop h1{font-size:var(--cx-h2);font-weight:700;margin:0 0 var(--k2);letter-spacing:-.01em}
.cua-hop form{margin-top:var(--k5);display:grid;gap:var(--k3)}
.cua-hop input{text-align:center;letter-spacing:.06em}

/* khoá admin: chọn cửa muốn mượn */
.cua-chon-admin{margin-top:var(--k4);text-align:left;border-top:1px solid var(--vien);
  padding-top:var(--k3)}
.cua-ad-tieu{margin:0 0 var(--k2);font-size:var(--cx-to);color:var(--chinh-800);font-weight:600}
.cua-ad-nhom{margin:var(--k2) 0;display:flex;flex-wrap:wrap;gap:var(--k2);align-items:center}
.cua-ad-nhom > span{font-size:var(--cx-nho);color:var(--chu-phu);font-weight:600;
  width:100%;margin-bottom:2px}

/* ================= KHUNG SAU CỬA ================= */
.dau{
  display:flex;align-items:center;gap:var(--k3);padding:var(--k3) var(--k5);
  background:var(--nen-mo);border-bottom:1px solid var(--vien);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
}
.logo{height:25px}
.vai{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  background:var(--chinh-100);color:var(--chinh-800);padding:4px 11px;border-radius:var(--bo-tron)}
.ten-toi{margin-left:auto;font-size:var(--cx);color:var(--chu-phu);white-space:nowrap}
.dau .ten-toi{margin-left:0}
.den-sync{font-size:var(--cx-nho);margin-left:auto;margin-right:var(--k2);
  color:var(--chu-mo);white-space:nowrap}
.den-sync.tot{color:var(--la-800)}
/* Mức GIỮA (09/09): mây chưa nghe thấy máy studio một lúc, nhưng chưa chắc
   đã tắt. Hai mức xanh/đỏ ép một chuyện ba mức thành hai — hoặc doạ sớm,
   hoặc im tới lúc đã muộn. Chữ lấy `--vang-800` chứ không lấy `--vang-700`:
   token ấy ghi rõ «icon, chấm, viền đậm — KHÔNG làm chữ». */
.den-sync.cho{color:var(--vang-800);font-weight:600}
.den-sync.hong{color:var(--loi-700);font-weight:600}
/* Cửa sổ hẹp: trước đây thanh đầu là một hàng cứng nên chữ "Đang nối Sukids
   Sync" rớt dòng thành cột, còn huy hiệu tự động bị cắt mất ngoài mép.
   Giờ chuông + nút Ra luôn dính bên phải, mấy thứ còn lại xuống hàng gọn. */
.dau{flex-wrap:wrap;row-gap:var(--k2)}
.dau .chuong{margin-left:auto}
/* 1.5.49 A10 · V6 — ô tìm bộ cố định đầu trang. Nền ô `--nen` trên mặt `--nen-mo` của thanh (luật ⑤: không cùng nền mặt phẳng);
   chữ `--chu` trên `--nen` ≥ 4,5:1 như mọi ô nhập. Danh sách kết quả nổi ngay dưới ô, không đẩy màn. */
.tim-dau{position:relative;flex:0 1 280px;min-width:0}
.tim-dau[hidden]{display:none}
.tim-dau-o{width:100%;height:var(--cao-nut);padding:0 var(--k3);border:1px solid var(--vien-dam);border-radius:var(--bo-tron);
  background:var(--nen);color:var(--chu);font:inherit;font-size:var(--cx-nho)}
.tim-dau-o:focus{outline:2px solid var(--chinh-500);outline-offset:1px}
.tim-dau-kq{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--nen);border:1px solid var(--vien);
  border-radius:var(--bo);padding:var(--k2);max-height:60vh;overflow:auto;box-shadow:var(--bong-2)}
.tim-dau-kq[hidden]{display:none}
.tim-dau-kq p{margin:0 0 var(--k1)}
.tim-dau-dong{display:block;width:100%;text-align:left;min-height:var(--cao-nut);padding:var(--k1) var(--k2);border:0;
  border-radius:var(--bo);background:transparent;color:var(--chu);font:inherit;font-size:var(--cx-nho);cursor:pointer}
.tim-dau-dong:hover,.tim-dau-dong:focus{background:var(--chinh-100);color:var(--chinh-800)}
@media(max-width:820px){.tim-dau{order:5;flex-basis:100%}.tim-dau-o,.tim-dau-dong{min-height:var(--cao-bam)}}
@media(max-width:820px){
  .dau{padding:var(--k2) var(--k4)}
  .den-sync{margin-left:0;order:3;flex-basis:100%;margin-right:0}
  .huy-tu-dong{order:4}
  .ten-toi{margin-left:0}
}
@media(max-width:560px){
  .den-sync{font-size:11px}
  .huy-tu-dong{font-size:10.5px;padding:4px 10px 4px 8px;letter-spacing:.04em}
}

.tab{display:flex;gap:var(--k1);padding:0 var(--k5);border-bottom:1px solid var(--vien);
  background:var(--nen);overflow-x:auto;scrollbar-width:none}
.tab::-webkit-scrollbar{display:none}
.tab button{padding:var(--k3) var(--k4);font-size:var(--cx);font-weight:600;color:var(--chu-phu);
  border-bottom:2px solid transparent;white-space:nowrap;background:none}
.tab button.on{color:var(--chinh-800);border-bottom-color:var(--chinh-800)}

main{max-width:920px;margin:0 auto;padding:var(--k5) var(--k5) 60px}
@media(max-width:560px){
  .ten-toi{display:none}
  main{padding:var(--k4) var(--k4) 50px}
}

/* ================= THẺ CHUNG ================= */
.the{
  background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-the);
  padding:var(--k3) var(--k4);margin-bottom:var(--k2);box-shadow:var(--bong-1);
}
.the:hover{border-color:var(--vien-dam)}
.the-dau{display:flex;gap:var(--k2);align-items:center;flex-wrap:wrap;margin-bottom:3px}
.the-dau b{font-size:var(--cx-to)}
.the-nut{display:flex;gap:var(--k2);flex-wrap:wrap;margin-top:var(--k2);align-items:center}
.menu-them-boc{position:relative;display:inline-flex}
.menu-them-noi{
  position:absolute;top:calc(100% + var(--k1));left:0;z-index:40;
  min-width:210px;max-width:calc(100vw - var(--k6));
  background:var(--nen);border:1px solid var(--vien-dam);border-radius:var(--bo-o);
  padding:var(--k1);box-shadow:var(--bong-2);
  display:flex;flex-direction:column;gap:var(--k1);
}
.menu-them-noi .nut{
  width:100%;justify-content:flex-start;border-radius:var(--bo-o);
  min-height:var(--cao-o);height:auto;padding:var(--k2) var(--k3);white-space:normal;text-align:left;
}
@media (max-width:640px){
  .the-nut>.nut,.hop-web .the-nut-luoi>.nut,.menu-them-boc>.nut{min-height:var(--cao-o);min-width:var(--cao-o)}
}
/* THẺ GẬP ĐƯỢC (13/09 — màn «Lương của tôi» của CTV): đầu thẻ là <summary>, ô
   khai và nút nằm trong; mũi tên ▸/▾ tự vẽ, không dùng dấu của trình duyệt. */
details.the-gap>summary{cursor:pointer;list-style:none;margin-bottom:0}
details.the-gap>summary::-webkit-details-marker{display:none}
details.the-gap>summary .gap-mui{width:12px;flex:0 0 auto;color:var(--chu-mo);font-size:12px}
details.the-gap>summary .gap-mui::before{content:"▸"}
details.the-gap[open]>summary .gap-mui::before{content:"▾"}
details.the-gap>summary .gap-tom{flex-basis:100%;font-weight:400;margin-left:20px}
details.the-gap[open]>summary{margin-bottom:var(--k2)}
.luong-loc{margin:var(--k2) 0 var(--k3)}
.luong-ds details[hidden]{display:none}
/* Ô KÊ KHAI: nhãn trên ô, hai ô + nút thẳng hàng đáy (13/09). `label` toàn trang
   là khối có lề trên — ở đây gỡ lề để hàng không so le. */
.khai-hang{display:flex;gap:var(--k3);align-items:flex-end;flex-wrap:wrap}
.khai-hang .khai-o{display:flex;flex-direction:column;gap:4px;margin:0;font-size:var(--cx-nho);font-weight:600}
.khai-hang .khai-o .nho{font-weight:400}
.khai-hang .khai-o input{width:110px;max-width:110px;margin:0}
.khai-hang .nut{height:var(--cao-nut-nho);align-self:flex-end;margin-bottom:1px}
.the-nut.khai-nut{align-items:flex-end}
.the .nho{margin:2px 0}
.trong{text-align:center;color:var(--chu-phu);padding:var(--k7) var(--k5);font-size:var(--cx)}
.the-dang-mo{border:2px solid var(--chinh-700);background:var(--chinh-50);box-shadow:var(--bong-2)}
.viec-chinh{border-color:var(--chinh-300)}
.viec-chinh h3,.the h3{margin:0 0 var(--k2);font-size:var(--cx);color:var(--chinh-800)}
.mo-rong{margin-top:var(--k3);border-top:1px dashed var(--vien);padding-top:var(--k3)}

/* nhãn trạng thái */
.nhan{display:inline-block;padding:3px 10px;border-radius:var(--bo-tron);font-size:10.5px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.nhan.xanh{background:var(--tin-nen);color:var(--tin-chu)}
.nhan.la{background:var(--tot-nen);color:var(--tot-chu)}
.nhan.vang{background:var(--thuong-nen);color:var(--thuong-chu)}
.nhan.do{background:var(--gap-nen);color:var(--gap-chu)}
.nhan.gap{background:var(--gap-nen);color:var(--gap-chu);font-weight:800;letter-spacing:.3px}
.nhan.xam{background:var(--nen-3);color:var(--chu-phu)}

/* ================= 5 MỨC BÁO ================= */
.hop-bao{
  display:flex;align-items:flex-start;gap:var(--k2);
  padding:var(--k3) var(--k4);border-radius:var(--bo-the);border:1px solid;
  font-size:var(--cx-nho);line-height:1.55;margin:var(--k3) 0;
}
.hop-bao::before{
  flex:0 0 auto;width:19px;height:19px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--chu-nguoc);
}
/* CHỈ tiêu đề mới xuống dòng riêng. Trước đây mọi <b> trong hộp báo đều là
   khối, nên chữ đậm giữa câu bị rớt dòng và bỏ lại dấu chấm mồ côi (18/08). */
.hop-bao b.bao-tieu{display:block;font-size:var(--cx);font-weight:600;
  margin-bottom:2px;color:var(--chu)}
.hop-bao b{font-weight:600}
.hop-bao.gap{background:var(--gap-nen);border-color:var(--gap-vien);color:var(--gap-chu)}
.hop-bao.gap::before{content:'!';background:var(--loi-700);border-radius:50%}
.hop-bao.thuong{background:var(--thuong-nen);border-color:var(--thuong-vien);color:var(--thuong-chu)}
.hop-bao.thuong::before{content:'!';background:var(--vang-800);font-size:10px;line-height:2.1;
  clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:2px}
.hop-bao.nhac{background:var(--nhac-nen);border-color:var(--nhac-vien);color:var(--nhac-chu)}
.hop-bao.nhac::before{content:'·';background:var(--chu-phu);border-radius:50%;font-size:17px;line-height:.6}
.hop-bao.tin{background:var(--tin-nen);border-color:var(--tin-vien);color:var(--tin-chu)}
.hop-bao.tin::before{content:'i';background:var(--chinh-800);border-radius:50%;font-style:italic}
.hop-bao.tot{background:var(--tot-nen);border-color:var(--tot-vien);color:var(--tot-chu)}
.hop-bao.tot::before{content:'✓';background:var(--la-800);border-radius:50%}

/* tên cũ — giữ để JS đang sinh chuỗi không gãy */
.hop-vang{background:var(--thuong-nen);color:var(--thuong-chu);padding:var(--k2) var(--k3);
  border-radius:var(--bo-o);font-size:var(--cx-nho);margin:var(--k2) 0}
/* hộp «RAW LẦN N» trên thẻ CTV + dòng «khách chọn thêm» trong dòng thời gian (11/09 · §10.177) */
.luot-raw{display:flex;flex-direction:column;gap:var(--k2)}
.luot-raw-dau{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap}
.ct-moc-them{font-weight:600}
/* hàng nút dưới dấu đỏ «tải lại lên Drive» (11/09) */
.hop-do-nut{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap;margin:var(--k2) 0}
.hop-do-phu{font-size:var(--cx-nho);color:var(--chu-mo)}
.hop-do{background:var(--gap-nen);color:var(--gap-chu);padding:var(--k2) var(--k3);
  border-radius:var(--bo-o);font-size:var(--cx-nho);margin:var(--k2) 0}
.hop-xanh{background:var(--tin-nen);color:var(--tin-chu);padding:var(--k2) var(--k3);
  border-radius:var(--bo-o);font-size:var(--cx-nho);margin:var(--k2) 0}
.canh-thieu{display:block;margin-top:var(--k2);background:var(--thuong-nen);
  color:var(--thuong-chu);padding:var(--k2) var(--k3);border-radius:var(--bo-o)}

/* băng chạy hết chiều ngang */
/* z 50 (24/09 · §10.261): TRÊN thanh đầu (20–40) nhưng DƯỚI lớp che hộp (60) — để 90 thì băng đè nút × của
   mọi hộp thoại khi máy tắt/mất mạng, đúng lúc người ta cần đóng hộp nhất */
.bang-mat-kn{
  position:sticky;top:0;z-index:50;background:var(--loi-700);color:var(--chu-nguoc);
  padding:var(--k2) var(--k4);font-size:var(--cx);text-align:center;
  display:flex;gap:var(--k2);align-items:center;justify-content:center;flex-wrap:wrap;
}
.bang-mat-kn .nut{background:var(--nen);color:var(--loi-700);border-color:var(--nen)}
/* MÁY STUDIO TẮT — KHÔNG dùng băng đỏ (09/09).
   Băng đỏ nói «mọi thao tác đang tạm dừng». Trên mây câu ấy SAI: máy tắt thì
   năm vai vẫn làm việc online bình thường, chỉ vài lệnh cần máy là nằm chờ.
   Doạ người ta dừng tay trong khi họ làm được cũng là một lỗi. Nên đây là
   băng VÀNG, và chữ nói đúng cái gì chờ. */
/* 25/09 (M7): KHÔNG dính đầu nữa. Băng dính `top:0` z-index 50 ĐÈ LÊN thanh đầu cổng/quản trị (cũng dính `top:0`,
   z-index 20) ngay khi cuộn: đo Chrome thật trên màn quản trị — tâm nút «?» · «⚠ Báo lỗi» · «Đăng xuất» trúng băng
   vàng, bấm không tới. Thông tin «máy tắt» vẫn ở đèn Sukids Sync trên thanh đầu (luôn thấy); băng chỉ nằm đầu trang. */
.bang-may-tat{
  position:relative;z-index:1;background:var(--vang-100);color:var(--vang-800);
  border-bottom:1px solid var(--vang-300);
  padding:var(--k2) var(--k4);font-size:var(--cx);text-align:center;
  display:flex;gap:var(--k2);align-items:center;justify-content:center;flex-wrap:wrap;
}
.bang-may-tat .nut{background:var(--nen);color:var(--vang-800);border-color:var(--vang-300)}
.bang-admin{background:var(--thuong-nen);border-bottom:1px solid var(--thuong-vien);
  color:var(--thuong-chu);padding:var(--k2) var(--k4);font-size:var(--cx);text-align:center}

/* ================= BẢNG MÃ ================= */
.ma-dong{display:flex;gap:var(--k3);align-items:center;flex-wrap:wrap;
  padding:var(--k3) 0;border-bottom:1px solid var(--vien)}
.ma-dong:last-child{border-bottom:0}
.ma-chu{font-family:var(--font-so);font-size:var(--cx);font-weight:600;
  background:var(--nen-3);padding:5px 11px;border-radius:6px;letter-spacing:.03em}
.ma-dong.khoa .ma-chu{text-decoration:line-through;opacity:.55}
.ma-nut{margin-left:auto;display:flex;gap:var(--k2);flex-wrap:wrap}

/* ================= TIẾN ĐỘ TẢI ================= */
.vach{height:6px;background:var(--nen-3);border-radius:var(--bo-tron);
  overflow:hidden;margin:var(--k3) 0 var(--k1)}
.vach-bar{height:100%;width:0;background:var(--chinh-700);transition:width .2s}
.td-dong{font-size:var(--cx);color:var(--chu-phu);margin:var(--k1) 0;
  display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap}
.td-dong.loi-do{color:var(--loi-700)}
.td-dong.td-hen{color:var(--chu-tren-chinh);font-weight:600}
.td-dong.xong-xanh{color:var(--la-800);font-weight:600}
.td-vach{flex:1;min-width:90px;max-width:220px;height:8px;background:var(--nen-3);
  border-radius:var(--bo-tron);overflow:hidden}
.td-vach span{display:block;height:100%;background:var(--chinh-700);
  border-radius:var(--bo-tron);transition:width .4s}

/* ================= GHI CHÚ KHÁCH ================= */
pre.chu-goi{white-space:pre-wrap;background:var(--nen-phu);border:1px solid var(--vien);
  border-radius:var(--bo-o);padding:var(--k3);font-size:var(--cx-nho);
  max-height:280px;overflow:auto;font-family:var(--font-so)}
.ghi-tung-anh{display:grid;gap:var(--k2);margin-top:var(--k2)}
.ghi-anh{display:flex;gap:var(--k3);align-items:flex-start;background:var(--nen-phu);
  border-radius:var(--bo-o);padding:var(--k2)}
.ghi-anh img{width:52px;height:65px;object-fit:cover;border-radius:4px;flex:0 0 auto}
.ghi-anh b{font-family:var(--font-so);font-size:var(--cx-nho)}
/* Hộp «Khách dặn» gấp/mở (12/09): đầu hộp là nút cả hàng, viên có chữ như
   nhóm ảnh bên trang khách — nhìn là biết bấm được. Gấp sẵn cho đỡ chiếm màn. */
.khach-dan{padding:0;overflow:hidden}
.kd-dau{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--k2);
  padding:var(--k2) var(--k3);min-height:44px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.kd-ten{display:flex;flex-direction:column;gap:2px;min-width:0}
.kd-ten .nho{font-size:var(--cx-nho);color:var(--chu-phu)}
.kd-dau .gap-nhan{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px 0 11px;
  border:1.5px solid var(--chinh-500);border-radius:999px;background:var(--nen);color:var(--chinh-800);font-size:12.5px;font-weight:700;white-space:nowrap}
.kd-dau[aria-expanded="false"] .gap-nhan{background:var(--chinh-500);color:var(--chu-tren-chinh)}
.kd-dau .mui{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.kd-dau[aria-expanded="true"] .mui{transform:rotate(-135deg);margin-top:4px}
.kd-than{padding:0 var(--k3) var(--k3)}
.kd-chung{margin-bottom:var(--k2);white-space:pre-wrap;overflow-wrap:anywhere}

.chon-ctv{margin-top:var(--k3);padding-top:var(--k3);border-top:1px solid var(--vien)}
.chon-ctv select{max-width:320px}
.sua-bo{margin-top:var(--k3);padding-top:var(--k3);border-top:1px solid var(--vien)}
/* 29/09: form sửa bộ là hộp nổi — trên «Sửa chi tiết» (60), dưới hộp hỏi (80) */
.man-sua-bo{z-index:70}
.man-sua-bo .sua-bo{margin-top:0;padding-top:0;border-top:0}
.sua-bo label{margin-top:var(--k3)}
.sua-bo label:first-child{margin-top:0}
/* WX5E: nhóm «Sản phẩm in» trong hộp «Sửa bộ» — tóm tắt + một nút dẫn sang hộp Đơn hàng */
.sb-sp-in{margin-top:var(--k3)}
.sb-sp-in .sb-sp-in-ds{margin:var(--k1) 0 var(--k2)}
@media (max-width:520px){.sb-sp-in .nut{height:var(--cao-bam)}}

/* ================= BẢNG SỐ ================= */
table.bang{width:100%;border-collapse:collapse;font-size:var(--cx)}
table.bang th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--chu-phu);padding:var(--k1) var(--k2) var(--k1) 0;
  border-bottom:1px solid var(--vien);font-weight:700}
table.bang td{padding:var(--k2) var(--k2) var(--k2) 0;border-bottom:1px solid var(--vien)}
table.bang tr:last-child td{border-bottom:0}
table.bang td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
table.bang th:not(:first-child){text-align:right}
.bt-ds{margin-top:var(--k2)}

/* ================= LỌC THỜI GIAN ================= */
.loc-tg{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap;margin:var(--k2) 0 var(--k4)}
/* flex-wrap + max-width (16/10, thu-xoa-anh-pc-hang-loat-chrome): ở 390 «từ [ngày] đến [ngày]» dài 382px thò ra 8px → trang rộng
   398, điện thoại thu nhỏ cả trang và cú chạm lệch khỏi ô tích */
.loc-tg .tu-den{display:inline-flex;flex-wrap:wrap;max-width:100%;align-items:center;gap:var(--k2);
  font-size:var(--cx-nho);color:var(--chu-phu)}
.loc-tg input[type=date]{width:auto;height:var(--cao-nut-nho);padding:0 var(--k2);
  font-size:var(--cx-nho)}
.thanh-con{display:flex;gap:var(--k2);flex-wrap:wrap;margin-bottom:var(--k4)}

/* ================= NHÓM & BẢNG ĐO ================= */
.nhom-tieu{margin:var(--k5) 0 var(--k2);font-size:var(--cx-to);
  display:flex;align-items:center;gap:var(--k2)}
.nhom-tieu.bam-gap{
  width:100%;text-align:left;background:var(--nen-phu);border:1px solid var(--vien);
  border-radius:var(--bo-the);padding:var(--k3) var(--k3);font:inherit;font-weight:700;
  color:var(--chinh-800);cursor:pointer;margin:var(--k3) 0 var(--k2);
}
.nhom-tieu.bam-gap:hover{border-color:var(--chinh-500)}
.nhom-tieu.bam-gap .mui{width:14px;color:var(--chu-mo)}
.nhom-tieu.bam-gap .keo-tha{margin-left:auto;display:inline-flex;gap:2px}
/* Mũi tên đổi chỗ cột: nhìn thì nhỏ cho gọn, nhưng VÙNG BẤM phải đủ to.
   Trước đây cao đúng 20px — trên điện thoại gần như không trúng. */
.doi-cho{border:none;background:transparent;color:var(--chu-tat);cursor:pointer;
  font-size:11px;line-height:1;border-radius:var(--bo-o);
  min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.doi-cho:hover{background:var(--nen-3);color:var(--chinh-800)}
.doi-cho:focus-visible{outline:2px solid var(--chinh-500);outline-offset:1px}
/* ngón tay to hơn con trỏ chuột — máy cảm ứng thì nới thêm */
@media(hover:none){.doi-cho{min-width:40px;height:40px;font-size:13px}}

.bang-do{margin-top:var(--k6);padding-top:var(--k2);border-top:2px solid var(--vien)}
.do-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:var(--k2);margin:var(--k3) 0}
.do-o{background:var(--nen-phu);border:1px solid var(--vien);border-radius:var(--bo-the);
  padding:var(--k3) var(--k2);text-align:center}
.do-o b{display:block;font-size:22px;color:var(--chinh-800)}
.do-o span{font-size:var(--cx-nho);color:var(--chu-phu)}
.do-o.canh-vang b{color:var(--vang-800)}
.do-o.canh-do b{color:var(--loi-700)}
.do-dong{font-size:var(--cx);color:var(--chu-phu);margin:var(--k1) 0}

/* ================= BIỂU ĐỒ ================= */
.bd{background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-the);
  padding:var(--k3) var(--k4)}
.bd-tieu{font-weight:700;font-size:var(--cx);color:var(--chinh-800);margin-bottom:var(--k2)}
.bd-trong{font-size:var(--cx-nho);color:var(--chu-mo)}
.bd-tron-hang{display:flex;align-items:center;gap:var(--k4);flex-wrap:wrap}
.bd-tron{width:130px;height:130px;flex:none}
.bd-tam-so{font-size:9px;font-weight:700;fill:var(--chinh-800)}
.bd-tam-chu{font-size:3.6px;fill:var(--chu-mo)}
.bd-chu-giai{display:flex;flex-direction:column;gap:var(--k1);min-width:150px}
.bd-cg-dong{display:flex;align-items:center;gap:var(--k2);font-size:var(--cx-nho);color:var(--chu)}
.bd-cg-ten{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-cg-pt{color:var(--chu-mo);font-size:12px}
.bd-cham{width:10px;height:10px;border-radius:3px;flex:none}
.bd-cot{display:flex;flex-direction:column;gap:var(--k2)}
.bd-cot-dong{display:grid;grid-template-columns:110px 1fr auto;align-items:center;
  gap:var(--k2);font-size:var(--cx-nho);color:var(--chu)}
.bd-cot-ten{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-cot-vach{background:var(--nen-3);border-radius:var(--bo-tron);height:12px;overflow:hidden}
.bd-cot-vach span{display:block;height:100%;border-radius:var(--bo-tron)}
.luoi-bd{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:var(--k3);margin:var(--k4) 0}

/* ================= DÂY CHUYỀN (pipeline) ================= */
.pipe{display:flex;gap:var(--k2);overflow-x:auto;padding-bottom:var(--k2);align-items:flex-start}
.pipe-cot{flex:0 0 218px;background:var(--nen-phu);border-radius:var(--bo-the);padding:var(--k2);
  display:flex;flex-direction:column;gap:var(--k2);min-height:90px}
.pipe-cot.rong{flex:1 1 260px}
.pipe-dau{font-size:var(--cx-nho);font-weight:700;color:var(--chu-phu);
  display:flex;gap:var(--k2);align-items:center;justify-content:space-between}
.pipe-o{
  text-align:left;background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-o);
  padding:var(--k2) var(--k3);font:inherit;cursor:pointer;
  display:flex;flex-direction:column;gap:3px;
}
.pipe-o.tinh{cursor:default}
.pipe-o b{font-size:var(--cx);color:var(--chu);overflow-wrap:anywhere}
.pipe-o > span{font-size:12px;color:var(--chu-mo)}
.pipe-o:hover:not(.tinh){border-color:var(--chinh-500)}
.pipe-o.canh-vang{border-color:var(--thuong-vien);background:var(--vang-50)}
.pipe-o.canh-do{border-color:var(--gap-vien);background:var(--loi-50)}
.buoc-dong{margin-top:2px}

/* ================= 8 BƯỚC DÂY CHUYỀN ================= */
.m-xu-ly{background:var(--b-xu-ly-nen);color:var(--b-xu-ly-chu)}
.m-the-xu-ly{background:var(--b-xu-ly-the);border-color:var(--b-xu-ly-vien)}
.m-khach-chon{background:var(--b-khach-nen);color:var(--b-khach-chu)}
.m-the-khach-chon{background:var(--b-khach-the);border-color:var(--b-khach-vien)}
.m-loc-raw{background:var(--b-raw-nen);color:var(--b-raw-chu)}
.m-the-loc-raw{background:var(--b-raw-the);border-color:var(--b-raw-vien)}
.m-cho-giao{background:var(--b-giao-nen);color:var(--b-giao-chu)}
.m-the-cho-giao{background:var(--b-giao-the);border-color:var(--b-giao-vien)}
.m-dang-sua{background:var(--b-sua-nen);color:var(--b-sua-chu)}
.m-the-dang-sua{background:var(--b-sua-the);border-color:var(--b-sua-vien)}
.m-da-nop{background:var(--b-nop-nen);color:var(--b-nop-chu)}
.m-the-da-nop{background:var(--b-nop-the);border-color:var(--b-nop-vien)}
.m-da-don{background:var(--b-don-nen);color:var(--b-don-chu)}
.m-the-da-don{background:var(--b-don-the);border-color:var(--b-don-vien)}
.m-da-huy{background:var(--b-huy-nen);color:var(--b-huy-chu)}
.m-the-da-huy{background:var(--b-huy-the);border-color:var(--b-huy-vien)}
.m-nop-thieu,.m-bao-vuong{background:var(--b-huy-nen);color:var(--b-huy-chu)}
.m-bang-do{background:var(--b-xu-ly-nen);color:var(--b-xu-ly-chu)}
.dong-ctv{color:var(--tim-800)}

/* ================= CỬA CTV ================= */
.link-dong{margin-bottom:var(--k3)}
.link-dau{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap;margin-bottom:var(--k1)}
.link-copy{display:flex;align-items:center;gap:var(--k2)}
.link-copy code{
  flex:1;background:var(--nen-3);padding:5px 9px;border-radius:7px;font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--chu-phu);
}
.the-nop.sang{outline:3px solid var(--vang-700);transition:outline .2s}
.hang-nut-ctv{margin-top:var(--k3);display:flex;gap:var(--k2);flex-wrap:wrap}
.viec-chinh .vc-buoc{border:1px solid var(--vien);border-radius:var(--bo-the);
  padding:var(--k3);margin-top:var(--k2);background:var(--nen)}
.viec-chinh .vc-ten-buoc{font-weight:700;font-size:var(--cx);color:var(--chu);margin-bottom:var(--k2)}
.vc-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--k2);margin-top:var(--k2)}
@media(max-width:640px){.vc-luoi{grid-template-columns:minmax(0,1fr)}}
.vc-cot{border:1px solid var(--vien);border-radius:var(--bo-the);padding:var(--k3);
  background:var(--nen);display:flex;flex-direction:column;gap:var(--k2)}
.vc-ten-buoc{font-weight:700;font-size:var(--cx-nho);letter-spacing:.04em;color:var(--chu-phu)}
.cach-nop{display:flex;flex-direction:column;gap:var(--k1);font-size:var(--cx);color:var(--chu);
  background:var(--nen-phu);border:1px solid var(--vien);border-radius:var(--bo-o);
  padding:var(--k2) var(--k3)}
.cach-nop label{display:flex;gap:var(--k2);align-items:flex-start;cursor:pointer;
  line-height:1.45;margin:0;font-weight:400;font-size:var(--cx)}
.cach-nop input{margin-top:2px;accent-color:var(--chinh-700)}
#man-ct-ctv .hop{max-width:560px}
#man-ct-ctv .lan-dong{display:flex;justify-content:space-between;align-items:center;
  gap:var(--k2);border:1px solid var(--vien);border-radius:var(--bo-o);
  padding:var(--k2) var(--k3);margin-top:var(--k2);font-size:var(--cx)}
#man-ct-ctv .link-dong{margin-top:var(--k2)}

/* ================= HỘP THOẠI WEB ================= */
.man-web{
  position:fixed;inset:0;background:var(--man-che);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;
  padding:var(--k6) var(--k3);overflow:auto;
}
.hop-web{
  background:var(--nen);border-radius:var(--bo-hop);padding:var(--k5) var(--k5);
  max-width:680px;width:100%;box-shadow:var(--bong-3);position:relative;
}
.hop-web .the-nut-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:var(--k2);margin:var(--k2) 0 var(--k1)}
.hop-web .the-nut-luoi .nut{width:100%}
.ct-tieu-w{margin:var(--k4) 0 var(--k2);font-size:var(--cx);color:var(--chinh-800);
  font-weight:600;border-top:1px solid var(--vien);padding-top:var(--k3)}
.ct-moc-w{font-size:var(--cx);padding:3px 0;color:var(--chu);overflow-wrap:anywhere}

/* ================= CHUÔNG ================= */
.chuong{position:relative;border:1px solid var(--vien-dam);background:var(--nen);
  border-radius:var(--bo-tron);width:38px;height:38px;font-size:16px;cursor:pointer}
.chuong:hover{border-color:var(--chinh-500)}
.chuong-dem{position:absolute;top:-6px;right:-6px;background:var(--vang-700);color:var(--chu);
  border-radius:var(--bo-tron);min-width:19px;height:19px;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 4px}
.chuong-dem.gap{background:var(--loi-700);color:var(--chu-nguoc)}
.bang-chuong{
  position:fixed;top:64px;right:var(--k3);width:min(420px,calc(100vw - 28px));
  max-height:70vh;overflow:auto;background:var(--nen);border:1px solid var(--vien);
  border-radius:var(--bo-hop);box-shadow:var(--bong-3);z-index:55;
}
.bc-dau{
  position:sticky;top:0;background:var(--nen);display:flex;justify-content:space-between;
  align-items:center;font-weight:700;color:var(--chinh-800);padding:var(--k3) var(--k4);
  border-bottom:1px solid var(--vien);
}
.bc-dong{border:none;background:none;font-size:20px;cursor:pointer;color:var(--chu-tat)}
.bc-item{padding:var(--k3) var(--k4);border-bottom:1px solid var(--vien)}
.bc-item:last-child{border-bottom:none}
.bc-tieu{display:flex;align-items:center;gap:var(--k2);font-size:var(--cx);color:var(--chu)}
.bc-cham{width:8px;height:8px;border-radius:50%;background:var(--chu-tat);flex:none}
.bc-luc{margin-left:auto;font-size:11px;color:var(--chu-tat)}
.bc-bo{font-size:var(--cx-nho);color:var(--chu-phu);font-weight:600;
  margin:2px 0 0 16px;overflow-wrap:anywhere}
.bc-goi-y{font-size:var(--cx-nho);color:var(--chu-mo);margin:var(--k1) 0 0 16px;line-height:1.5;white-space:pre-line}
.bc-nut{display:flex;gap:var(--k2);flex-wrap:wrap;margin:var(--k2) 0 0 16px}
/* 4 mức: gấp đỏ · thường vàng · nhắc xám · tin xanh */
.bc-gap{background:var(--gap-nen)}
.bc-gap .bc-cham{background:var(--loi-700)}
.bc-thuong .bc-cham{background:var(--vang-700)}
.bc-nhac .bc-cham{background:var(--chu-tat)}
.bc-tin .bc-cham{background:var(--chinh-500)}
.bc-ting{display:flex;align-items:center;gap:var(--k2);padding:var(--k3) var(--k4);
  border-top:1px dashed var(--vien);color:var(--chu-phu);cursor:pointer;font-size:var(--cx-nho)}
.bc-ting input{accent-color:var(--la-700)}
/* «đã xem» theo máy + gộp theo bộ (06/09 đêm): số trên huy hiệu vẫn là tổng
   việc, chỉ DÁNG đổi — còn dòng chưa xem thì đậm và có vòng nhấp, xem hết thì dịu */
.chuong-dem:not(.co-moi){opacity:.78}
.chuong-dem.co-moi{box-shadow:0 0 0 2px var(--nen),0 0 0 4px var(--vang-700);animation:nhipMoi 1.6s ease-in-out 3}
.chuong-dem.gap.co-moi{box-shadow:0 0 0 2px var(--nen),0 0 0 4px var(--loi-700)}
@keyframes nhipMoi{50%{transform:scale(1.12)}}
@media (prefers-reduced-motion: reduce){.chuong-dem.co-moi{animation:none}}
.bc-tom{display:flex;justify-content:space-between;align-items:center;gap:var(--k2);
  padding:var(--k2) var(--k4);font-size:var(--cx-nho);color:var(--chu-phu);
  border-bottom:1px solid var(--vien);background:var(--nen-phu)}
.bc-chip-moi{font-size:10px;font-weight:700;color:var(--chu-nguoc);background:var(--chinh-500);
  border-radius:999px;padding:1px 7px;flex:none;line-height:1.5}
.bc-item.bc-moi{box-shadow:inset 3px 0 0 var(--chinh-500)}
.bc-nhom{border-bottom:1px solid var(--vien)}
.bc-nhom-dau{display:flex;align-items:center;gap:var(--k2);padding:var(--k2) var(--k4) 0;
  font-size:var(--cx-nho);font-weight:700;color:var(--chu-phu);overflow-wrap:anywhere}
.bc-nhom .bc-item{border-bottom:1px dashed var(--vien);padding-left:calc(var(--k4) + 12px)}
.bc-nhom .bc-item:last-child{border-bottom:none}
.sang-viec{outline:3px solid var(--vang-700);outline-offset:2px;transition:outline .3s}

/* ================= DÃY SỐ TỔNG QUAN ================= */
.tom-tat-viec{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
  gap:var(--k2);margin:2px 0 var(--k4)}
.o-tom{border:1px solid var(--vien);border-radius:var(--bo-the);
  padding:var(--k2) var(--k1) var(--k2);text-align:center;cursor:pointer;font:inherit;
  line-height:1.25;transition:transform .12s,box-shadow .12s}
.o-tom:hover{transform:translateY(-1px);box-shadow:var(--bong-2)}
.o-tom .so{display:block;font-size:26px;font-weight:800}
.o-tom .chu{display:block;font-size:12px;font-weight:600;margin-top:2px}
.o-tom-rong{opacity:.5}
.o-tom.m-nop-thieu,.o-tom.m-bao-vuong{background:var(--b-huy-nen);color:var(--b-huy-chu);
  border-color:var(--b-huy-vien)}

/* ================= ❤️ SỨC KHOẺ STUDIO ================= */
.sk-tieu{margin:var(--k5) 0 var(--k2);color:var(--chinh-800);font-size:var(--cx-h3);font-weight:600}
.sk-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--k3)}
.sk-o{background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-the);
  padding:var(--k3) var(--k4);display:flex;flex-direction:column;gap:2px}
.sk-o b{font-size:22px;color:var(--chinh-800);line-height:1.15}
.sk-o span{font-size:var(--cx);color:var(--chu-phu)}
.sk-o i{font-size:var(--cx-nho);color:var(--chu-mo);font-style:normal}
.sk-bang{background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-the);
  padding:var(--k2) var(--k4);margin:var(--k3) 0;overflow-x:auto}
.sk-bang > b{display:block;margin-bottom:var(--k2);color:var(--chinh-800)}
.sk-dong{display:flex;flex-wrap:wrap;gap:var(--k2);align-items:center;padding:var(--k2) 0;
  border-top:1px solid var(--vien);font-size:var(--cx)}
.sk-dong > span:first-child{flex:1 1 190px;min-width:150px;font-weight:600;color:var(--chu)}
.sk-dong > span{flex:0 1 auto;min-width:74px}
.sk-dong:first-of-type{border-top:0}
.sk-dau{color:var(--chu-phu);font-size:var(--cx-nho);font-weight:600}
.sk-dau > span{font-weight:600;color:var(--chu-phu)}

/* ================= ⚡ HUY HIỆU CHẾ ĐỘ TỰ ĐỘNG ================= */
.huy-tu-dong{
  display:inline-flex;align-items:center;gap:var(--k2);
  background:linear-gradient(100deg,var(--chinh-800) 0%,var(--chinh-700) 55%,var(--la-700) 100%);
  color:var(--chu-nguoc);border-radius:var(--bo-tron);padding:5px 13px 5px 10px;
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  box-shadow:var(--bong-2);cursor:default;white-space:nowrap;
}
.huy-tu-dong i{
  width:7px;height:7px;border-radius:50%;background:var(--la-300);flex:none;
  box-shadow:0 0 0 0 rgba(169,203,106,.75);animation:thoTuDong 2s ease-out infinite;
}
@keyframes thoTuDong{
  0%{box-shadow:0 0 0 0 rgba(169,203,106,.75)}
  70%{box-shadow:0 0 0 7px rgba(169,203,106,0)}
  100%{box-shadow:0 0 0 0 rgba(169,203,106,0)}
}

/* ================= CHÂN TRANG (18/08 — anh Huy chốt nội dung) =================
   Ba dòng ở đáy MỌI trang nội bộ. Chữ nhỏ, màu mờ, canh giữa — có mặt để tra
   cứu chứ không tranh chỗ với việc đang làm. */
.chan-he{
  margin-top:var(--k7);padding:var(--k4) var(--k4) var(--k5);
  border-top:1px solid var(--vien);text-align:center;
  font-size:var(--cx-nho);color:var(--chu-mo);line-height:1.65;
}
.chan-he:empty{display:none}
.chan-nhan b{color:var(--chu-phu);font-weight:600}
.chan-khau-hieu{margin-top:2px}
.chan-hotline{margin-top:var(--k1);font-variant-numeric:tabular-nums}
/* trên cửa nhập mã: chân trang nằm dưới cái hộp, không có đường kẻ cho gọn */
.cua .chan-he{border-top:0;margin-top:var(--k5);padding-bottom:0}
.cua{grid-auto-rows:min-content;align-content:center}
/* dòng "chưa có mã thì hỏi ai" — người mới lần đầu không biết hỏi ai là kẹt ngay */
.cua-xin-ma{margin:var(--k3) 0 0;padding-top:var(--k3);border-top:1px solid var(--vien);
  font-size:var(--cx-nho);color:var(--chu-phu)}
.cua-xin-ma b{color:var(--chinh-800);font-variant-numeric:tabular-nums}

/* ================= HIỆU ỨNG MỞ ================= */
@keyframes truotXuong{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.truot-xuong{animation:truotXuong .28s ease-out}
/* luật 08 ⑬ (07/10): màn thật đang dựng lại nằm khuất, bản chụp màn cũ đứng chỗ cũ — xem datAnhManCu() trong cong.js */
.ve-ngam{position:absolute!important;left:-200000px!important;top:0!important;visibility:hidden!important;pointer-events:none!important}
#than-anh{pointer-events:none}
.man-web .hop-web{animation:truotXuong .28s ease-out}
#bang-chuong{animation:truotXuong .24s ease-out}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ============ CỬA SALE — WEB CONCEPT (19/08) ============ */
.cc-khung{display:grid;grid-template-columns:230px 1fr;gap:var(--k4);align-items:start}
@media (max-width:760px){.cc-khung{grid-template-columns:1fr}}
.cc-cot{border:1px solid var(--vien);border-radius:var(--bo-the);padding:var(--k3);background:var(--nen)}
.cc-cot h3{font-size:var(--cx-nho);letter-spacing:.8px;color:var(--chu-phu);margin:0 0 var(--k2);padding:0 var(--k2)}
.cc-muc-dong{display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:var(--k2) var(--k3);border-radius:var(--bo-o);font-size:var(--cx);min-height:44px;text-align:left}
.cc-muc-dong.dang{background:var(--chinh-100);font-weight:700}
/* HÀNG DANH MỤC CÓ BỐN THỨ (10/09): tên · 🔗 · 👁 · ✕. Thêm nút thứ tư mà
   không siết thì cột tên bị bóp và tên dài vỡ hai dòng — đo thật trên ảnh chụp
   («Váy công chúa», «Vest bé trai»). Ba nút biểu tượng nay rộng cố định và
   không co; tên được `min-width:0` để CẮT BỚT bằng dấu ba chấm thay vì xuống
   dòng — hàng cao đều nhau đọc nhanh hơn hàng cao thấp lô nhô. */
/* DÒNG TIẾN ĐỘ RỖNG KHÔNG ĐƯỢC CHIẾM CHỖ (10/09).
   Thêm `#td-tien-do` vào cột ảnh làm khung sửa cao thêm 71px, và ở 1366px thì
   TRANG cuộn theo — phá đúng luật Mẫu A «cột form cuộn nội bộ, trang đứng
   yên». Thẻ `<p>` trống vẫn ăn dòng và lề; `:empty` gỡ nó khi chưa có chữ. */
#td-tien-do:empty{display:none;margin:0}
.td-vach[hidden]{display:none}
.td-muc-hang{display:flex;align-items:center;gap:2px}
.td-muc-hang .cc-muc-dong{flex:1 1 auto;min-width:0}
.td-muc-hang .cc-muc-dong span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-muc-hang .nut.mo.nho{flex:0 0 auto;width:30px;padding:0;text-align:center}
.cc-muc-dong small{color:var(--chu-phu)}
/* Cột hai nút ▲▼ đổi thứ tự mục. Trước 10/09 nó mang style nội dòng, mà
   style nội dòng thì không media query nào đè được — dải chip cuộn ngang
   trên điện thoại vì thế vẫn dính hai mũi tên chen giữa các chip. */
.cc-muc-sap{display:flex;flex-direction:column}
.cc-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:var(--k2)}
.cc-the{position:relative;aspect-ratio:1;border-radius:var(--bo-o);overflow:hidden;padding:0;
  outline:2.5px solid transparent;width:100%;background:var(--nen-phu)}
.cc-the.chon{outline-color:var(--chinh-700)}
.cc-the img{width:100%;height:100%;object-fit:cover;display:block}
.cc-the .cc-trong{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:28px;background:var(--chinh-50)}
.cc-the .cc-ma{position:absolute;left:0;right:0;bottom:0;font-size:12px;font-weight:700;
  color:var(--chu-nguoc);background:rgba(38,56,64,.75);padding:3px var(--k2);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-the.ngung img,.cc-the.ngung .cc-trong{filter:grayscale(1);opacity:.4}
.cc-the .cc-ngung{position:absolute;top:4px;right:6px}
.cc-the .cc-hot{position:absolute;top:4px;left:6px}
.cc-keo-phu{position:fixed;inset:0;background:var(--man-che);z-index:60;display:none}
.cc-keo-phu.mo{display:block}
.cc-keo{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:61;background:var(--nen);
  border-left:1px solid var(--vien);box-shadow:var(--bong-3);transform:translateX(105%);
  transition:transform .2s;overflow-y:auto;padding:var(--k4)}
.cc-keo.mo{transform:translateX(0)}
.nhan-o{font-size:var(--cx-nho);font-weight:700;color:var(--chu-phu);letter-spacing:.4px;margin:0 0 var(--k1)}
.cc-hang-gat{display:flex;align-items:center;justify-content:space-between;gap:var(--k3);
  padding:var(--k3) 0;border-bottom:1px solid var(--nen-phu);font-size:var(--cx);min-height:48px}
.cc-hang-gat .giai{font-size:var(--cx-nho);color:var(--chu-phu)}
.cc-gat{position:relative;width:46px;height:26px;flex:0 0 auto}
.cc-gat input{opacity:0;width:100%;height:100%;position:absolute;margin:0;cursor:pointer}
.cc-gat .vien-gat{position:absolute;inset:0;border-radius:var(--bo-tron);background:var(--vien-dam);
  transition:background .15s;pointer-events:none}
.cc-gat .vien-gat::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:var(--nen);box-shadow:var(--bong-1);transition:left .15s}
.cc-gat input:checked+.vien-gat{background:var(--la-500)}
.cc-gat input:checked+.vien-gat::after{left:23px}
.cc-gat input:focus-visible+.vien-gat{outline:2px solid var(--chinh-800);outline-offset:2px}
.cc-day-anh{display:flex;gap:var(--k2);flex-wrap:wrap;margin:var(--k2) 0}
.cc-anh-nho{position:relative;width:64px}
.cc-anh-nho img{width:64px;height:64px;object-fit:cover;border-radius:var(--bo-o);display:block}
.cc-anh-nho .bia{position:absolute;left:3px;top:3px;font-size:9px;font-weight:700;
  background:rgba(38,56,64,.75);color:var(--chu-nguoc);border-radius:var(--bo-tron);padding:1px 5px}
/* Nút ✕ xoá ảnh concept: 22px là quá nhỏ và nằm đè góc thumbnail — bấm trượt
   là mất ảnh. Nới lên 28px, viền đậm hơn, và tách hẳn ra khỏi mép ảnh. */
.cc-anh-nho .nut-xoa-anh,.td-anh2 .nut-xoa-anh{position:absolute;right:-8px;top:-8px;width:28px;height:28px;border-radius:50%;
  background:var(--loi-100);color:var(--loi-700);font-weight:700;font-size:14px;line-height:1;
  border:1.5px solid var(--loi-500);box-shadow:0 1px 4px rgba(38,56,64,.22);cursor:pointer}
.cc-anh-nho .nut-xoa-anh:hover,.td-anh2 .nut-xoa-anh:hover{background:var(--loi-700);color:var(--chu-nguoc)}
.cc-lua-gia label{display:flex;align-items:center;gap:var(--k2);padding:var(--k2);
  border-radius:var(--bo-o);font-size:var(--cx);cursor:pointer;min-height:40px}
.cc-lua-gia label.dang{background:var(--chinh-100);font-weight:600}
.cc-nhan-td{font-size:11px;font-weight:700;color:var(--chu-phu);background:var(--nen-phu);
  border-radius:var(--bo-tron);padding:4px var(--k3);flex:0 0 auto}
.xem-truoc-so{display:flex;gap:var(--k2);flex-wrap:wrap;background:var(--nen-phu);
  border-radius:var(--bo-the);padding:var(--k3)}
.xem-truoc-so .o-tom{flex:1;min-width:120px;background:var(--nen);border-color:var(--vien)}

/* ===== DASHBOARD ĐO LƯỜNG (19/08) — lối Lark Base, màu Sukids =====
   Lark: thẻ phân tách bằng viền 1px HOẶC nền khác, không dùng cả hai, không
   đổ bóng. Nhãn xám nhỏ trên, số to đậm dưới, tỉ lệ chữ ~3.5:1. */
.luoi-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--k3);margin-bottom:var(--k4)}
.the-so{background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-the);
  padding:var(--k3) var(--k4)}
.ts-nhan{font-size:var(--cx-nho);color:var(--chu-phu);margin-bottom:2px}
.ts-hang{display:flex;align-items:baseline;gap:var(--k2);flex-wrap:wrap}
.ts-so{font-size:30px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.ts-so i{font-size:13px;font-weight:600;font-style:normal;color:var(--chu-phu);margin-left:2px}
/* Lark dùng xanh lục-lam cho tăng, cam-đỏ cho giảm — cố ý KHÔNG đỏ tươi, vì
   giảm lượt xem không phải chuyện hỏng hóc, chỉ là tin cần biết */
.ts-doi{font-size:12.5px;font-weight:700}
.ts-doi.len{color:var(--tot-chu)}
.ts-doi.xuong{color:var(--cam-800)}
.ts-doi.bang{color:var(--chu-mo);font-weight:600}
.ts-phu{font-size:var(--cx-nho);color:var(--chu-phu);margin-top:2px}

/* cột đứng — chỉ lưới ngang ngầm, không đường trục, cột mảnh */
.cd-khung{display:flex;align-items:flex-end;gap:2px;height:150px;overflow-x:auto;
  padding-top:var(--k4);border-bottom:1px solid var(--vien)}
.cd-cot{flex:1 0 18px;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%;position:relative}
.cd-thanh{width:min(60%,18px);background:var(--chinh-500);border-radius:3px 3px 0 0;
  display:block;transition:height .2s}
.cd-cot:hover .cd-thanh{background:var(--chinh-700)}
.cd-gt{font-size:10px;color:var(--chu-phu);margin-bottom:2px;font-variant-numeric:tabular-nums}
.cd-nhan{font-size:9.5px;color:var(--chu-mo);margin-top:4px;white-space:nowrap;
  position:absolute;bottom:-16px}
.bd h4{font-size:var(--cx-to);font-weight:700;margin:0 0 var(--k3)}

/* phễu — thấy ngay chỗ nào rụng khách */
.ph-khung{display:flex;flex-direction:column;gap:var(--k2)}
.ph-dong{display:grid;grid-template-columns:150px 1fr 92px;gap:var(--k2);align-items:center}
.ph-nhan{font-size:var(--cx-nho);color:var(--chu-phu)}
.ph-thanh{position:relative;background:var(--nen-3);border-radius:var(--bo-o);height:30px;
  display:flex;align-items:center}
.ph-thanh span{position:absolute;left:0;top:0;bottom:0;background:var(--chinh-500);
  border-radius:var(--bo-o)}
.ph-thanh b{position:relative;padding-left:var(--k2);font-size:var(--cx-nho);
  font-variant-numeric:tabular-nums}
.ph-ti{font-size:11px;color:var(--chu-phu);text-align:right}

/* xếp hạng — Lark dùng dòng kẻ zebra, nhưng studio nhỏ nên em giữ thêm thanh
   nền RẤT nhạt: sale liếc một cái là biết concept nào hơn kém bao nhiêu */
.xh-khung{display:flex;flex-direction:column}
.xh-dong{display:grid;grid-template-columns:26px 1fr repeat(3,minmax(52px,auto));
  gap:var(--k2);align-items:center;padding:var(--k2) 0;border-bottom:1px solid var(--nen-phu)}
.xh-dong:last-child{border-bottom:0}
.xh-dau{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--chu-phu);
  font-weight:700;border-bottom:1px solid var(--vien)}
.xh-stt{font-size:var(--cx-nho);color:var(--chu-mo);text-align:center;font-weight:700}
.xh-ten{position:relative;min-width:0;padding:5px var(--k2);border-radius:var(--bo-o);overflow:hidden}
.xh-nen{position:absolute;left:0;top:0;bottom:0;background:var(--chinh-50);border-radius:var(--bo-o)}
.xh-chu{position:relative;font-size:var(--cx);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block}
.xh-chu small{color:var(--chu-phu);font-size:11px;margin-left:var(--k2)}
.xh-so{text-align:right;font-size:var(--cx-nho);font-weight:700;font-variant-numeric:tabular-nums}

/* kéo thả sắp xếp (19/08) — dấu hiệu phải rõ: cái đang kéo mờ đi, chỗ sắp
   thả có vạch xanh, con trỏ đổi thành bàn tay nắm */
.cc-anh-nho[draggable="true"],.cc-the[draggable="true"]{cursor:grab}
.cc-anh-nho.dang-keo,.cc-the.dang-keo{opacity:.35;cursor:grabbing}
.cc-anh-nho.keo-qua,.cc-the.keo-qua{outline:3px solid var(--chinh-700);outline-offset:2px}

/* ================= HỘP THOẠI CỦA RIÊNG CỔNG (19/08 đợt 4) =================
   Thay hộp thoại hệ thống: ô nhập mã che được, nút đủ 44px cho ngón tay,
   và trên điện thoại hộp nằm giữa màn chứ không bị bàn phím đẩy khuất. */
.man-hoi-w{align-items:center;z-index:80}
.hop-hoi-w{max-width:440px}
.hop-hoi-w h3{margin:0 0 var(--k2);font-size:var(--cx-to);color:var(--chinh-800)}
.hw-noi{font-size:var(--cx);color:var(--chu);line-height:1.55}
.hw-noi p{margin:0 0 var(--k2)}
.hw-noi p:last-child{margin-bottom:0}
.hw-nhan{display:block;margin:var(--k3) 0 var(--k1);font-size:var(--cx);font-weight:600}
.hw-o{width:100%;box-sizing:border-box}
.hw-loi{margin-top:var(--k2);padding:var(--k2) var(--k3);border-radius:var(--bo);
  background:var(--loi-100);color:var(--loi-700);font-size:var(--cx)}
.hw-nut{display:flex;gap:var(--k2);justify-content:flex-end;margin-top:var(--k4)}
.hw-nut .nut{min-height:44px;padding-left:var(--k4);padding-right:var(--k4)}
@media (max-width:520px){
  .hw-nut{flex-direction:column-reverse}
  .hw-nut .nut{width:100%}
}

/* ================= ⭐ GIAO ƯU TIÊN ================= */
.nhan-uu-tien{display:inline-flex;align-items:center;gap:4px;
  background:var(--vang-100);color:var(--vang-800);border:1px solid var(--vang-300);
  border-radius:var(--bo-tron);padding:1px 9px;font-size:var(--cx-nho);font-weight:600}
.uu-tien-ds{display:grid;gap:var(--k1);margin:var(--k2) 0}
.uu-tien-ds label{display:flex;align-items:center;gap:var(--k2);min-height:44px;
  padding:0 var(--k3);border:1px solid var(--vien);border-radius:var(--bo);cursor:pointer}
.uu-tien-ds label:hover{border-color:var(--chinh-500)}

/* ═══════════════════════════════════════════════════════════════════════
   MÀN QUẢN TRỊ — sau khoá vạn năng (20/08, đặc tả 32 mục anh Huy gửi)

   Bảng màu trong đặc tả (#69C5DF, #4FB5D2, #E8F8FC, #263840, #E7EEF0 …) CHÍNH
   LÀ bộ token đã có sẵn ở khối dùng chung phía trên — nên ở đây không đặt bảng
   màu mới, chỉ gọi token. Đặt bảng riêng là để hai bảng lệch nhau vài tuần sau.

   Tỷ lệ màu theo mục 24: ~85% trắng/trung tính, 10% xanh Sukids, 5% trạng thái.
   Màn quản trị phải điềm đạm hơn màn khách.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── xác thực xong ── */
.cua-xong{
  margin:var(--k3) 0 0;padding:11px var(--k3);border-radius:var(--bo-o);
  background:var(--la-100);color:var(--la-800);
  font-weight:650;text-align:center;animation:qt-hien .28s ease;
}
@keyframes qt-hien{from{opacity:0;transform:translateY(-4px)}}

/* ── khung ── */
#quan-tri{min-height:100vh;background:var(--nen-phu);color:var(--chu)}

.qt-dau{
  display:flex;align-items:center;gap:var(--k2);
  padding:var(--k2) var(--k5);background:var(--nen);
  border-bottom:1px solid var(--vien);position:sticky;top:0;z-index:20;
}
.qt-logo{height:30px;width:auto}
.qt-danh{display:flex;flex-direction:column;line-height:1.25;margin-right:auto}
.qt-danh b{font-size:var(--cx-to)}
.qt-danh span{font-size:var(--cx-nho);color:var(--chu-phu)}
.qt-huy{
  font-size:var(--cx-nho);font-weight:650;
  background:var(--chinh-100);color:var(--chinh-800);
  padding:5px 11px;border-radius:999px;
}

.qt-khung{display:grid;grid-template-columns:226px 1fr;align-items:start}

/* ── thanh bên ── */
.qt-ben{
  padding:var(--k4) var(--k2);border-right:1px solid var(--vien);
  background:var(--nen);min-height:calc(100vh - 55px);position:sticky;top:55px;
}
.qt-muc{
  display:flex;align-items:center;gap:var(--k2);
  width:100%;padding:10px var(--k2);margin-bottom:3px;
  border:0;border-radius:var(--bo-o);background:none;
  font:inherit;font-size:var(--cx-to);color:var(--chu);
  text-align:left;cursor:pointer;transition:background .14s;
}
.qt-muc i{font-style:normal;font-size:16px;width:20px;text-align:center}
.qt-muc:hover{background:var(--nen-phu)}
.qt-muc.dang{background:var(--chinh-100);color:var(--chinh-800);font-weight:650}

/* ── ô «🔍 Tìm chức năng» đầu cột trái (25/09) ──
   Cặp màu (luật 08 ⑤, biến sẵn có): ô nền --nen / chữ --chu 12.19:1 · chữ phụ --chu-phu trên
   --nen ≥ 4.51:1 · dòng đang chọn nền --chinh-100 / chữ --chinh-800 4.52:1 · nhãn «chỉ trên
   mây» --chu-phu trên --nen-3. Danh sách gợi ý rộng hơn cột 226px (tên ô cài đặt dài) và nổi
   đè lên thân màn. Chữ ≥ 12px (luật ①). */
.qt-tim-cn{position:relative;margin:0 0 var(--k3)}
.qt-ben.qt-ben-tim-mo{position:sticky;z-index:60}   /* gợi ý mở: nổi trên .bang-may-tat (50) · .qt-dau (20) */
.qt-tim-cn-o{width:100%;height:var(--cao-nut);padding:0 10px;box-sizing:border-box;
  border:1px solid var(--vien-dam);border-radius:var(--bo-o);background:var(--nen);color:var(--chu);
  font:inherit;font-size:var(--cx)}
.qt-tim-cn-o::placeholder{color:var(--chu-phu)}
.qt-tim-cn-o:focus-visible{outline:2px solid var(--chinh-500);outline-offset:1px}
.qt-tim-cn-ds{position:absolute;left:0;top:calc(100% + 4px);z-index:30;
  width:max(100%, min(420px, calc(100vw - 24px)));max-height:min(60vh, 440px);overflow-y:auto;
  margin:0;padding:4px;list-style:none;background:var(--nen);border:1px solid var(--vien-dam);
  border-radius:var(--bo-o);box-shadow:var(--bong-3);box-sizing:border-box}
.qt-tim-cn-ds[hidden],.qt-tim-cn-trong[hidden]{display:none}
.qt-tim-cn-dong{display:flex;align-items:flex-start;gap:var(--k2);padding:8px 10px;border-radius:8px;
  cursor:pointer;font-size:var(--cx);color:var(--chu);line-height:1.35}
.qt-tim-cn-dong:hover{background:var(--nen-phu)}
.qt-tim-cn-dong[aria-selected=true]{background:var(--chinh-100);color:var(--chinh-800)}
.qt-tim-cn-bieu{flex:none;width:20px;text-align:center}
.qt-tim-cn-chu{flex:1;min-width:0;display:flex;flex-direction:column;overflow-wrap:anywhere}
.qt-tim-cn-phu{font-size:12px;color:var(--chu-phu)}
.qt-tim-cn-dong[aria-selected=true] .qt-tim-cn-phu{color:var(--chinh-800)}
.qt-tim-cn-nhan{flex:none;font-size:12px;color:var(--chu-phu);background:var(--nen-3);
  padding:1px 7px;border-radius:999px;white-space:nowrap}
.qt-tim-cn-trong{margin:6px 2px 0;font-size:12.5px;color:var(--chu-phu)}
/* Đích vừa chọn: viền nháy 2 giây (JS gỡ lớp sau 2000ms). Giảm chuyển động thì viền đứng yên. */
.qt-nhay{outline:3px solid var(--chinh-500);outline-offset:3px;border-radius:6px;animation:qt-nhay .5s ease-in-out 4 alternate}
@keyframes qt-nhay{from{outline-color:var(--chinh-500)}to{outline-color:var(--chinh-100)}}
@media (prefers-reduced-motion:reduce){.qt-nhay{animation:none}}

/* ── thân ── */
.qt-than{padding:var(--k5) 30px 70px;max-width:1060px;
  /* 18/09: thân là <main> — luật chung `main{margin:0 auto}` làm ô lưới KHÔNG
     giãn theo cột mà lấy bề ngang «vừa nội dung», mà nội dung có biểu đồ cột
     30 ngày (cuộn ngang bên trong) rộng 630px → ở điện thoại thân rộng 656px,
     cả trang tràn ngang (đo Chrome 390px, thu-doanh-thu.js). Khai bề ngang
     rõ ràng: đúng bằng cột, trần 1060px vẫn giữ, vẫn canh giữa. */
  width:100%;min-width:0}
.qt-h1{font-size:var(--cx-h1);font-weight:700;letter-spacing:-.02em;margin:0 0 var(--k4)}
.qt-h2{font-size:18px;font-weight:700;margin:30px 0 var(--k2)}
.qt-h3{font-size:var(--cx-h3);font-weight:700;margin:var(--k4) 0 6px}
.qt-ghi{color:var(--chu-phu);font-size:13.5px;margin:4px 0 0}
.qt-ghi.to{font-size:var(--cx-to);max-width:62ch;margin-bottom:var(--k4)}
.qt-trong{color:var(--chu-phu);padding:var(--k5) 0}

.qt-dau-man{display:flex;align-items:center;gap:var(--k3);margin-bottom:var(--k4)}
.qt-dau-man .qt-h1{margin:0;margin-right:auto}

/* ── 4 con số ── */
.qt-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--k2)}
.qt-o{background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-the);padding:var(--k3) var(--k4)}
.qt-o b{
  display:block;font-size:30px;font-weight:700;letter-spacing:-.03em;
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.qt-o b.xanh{color:var(--la-800)}
.qt-o b.vang{color:var(--vang-800)}
.qt-o span{font-size:13px;color:var(--chu-phu)}

.qt-canh{
  background:var(--vang-100);border:1px solid var(--vang-300);
  border-radius:var(--bo-the);padding:var(--k3) 17px;margin-top:var(--k3);
}
.qt-canh b{display:block;margin-bottom:3px}
.qt-canh p{margin:0;font-size:13.5px;color:var(--vang-800)}
/* 26/09 L6 — dòng người trong băng «sale mới chưa có mã» / «sale đã nghỉ còn mã» (khuôn .qt-canh): tên trái, nút phải,
   tự xuống dòng ở 390. Chữ dòng = chữ `.qt-canh p` (13,5px · --vang-800 trên --vang-100, cặp sẵn có); nút ≥ 44px cho ngón tay. */
.qt-canh .qt-sale-dong{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--k2);margin-top:var(--k2)}
.qt-canh .qt-sale-dong span{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.qt-canh .qt-sale-dong .qt-nut{min-height:var(--cao-bam)}
.qt-canh.qt-sale-moi > p + p{margin-top:var(--k2)}

.qt-the{
  background:var(--nen);border:1px solid var(--vien);
  border-radius:var(--bo-the);padding:var(--k3) var(--k4);margin-bottom:var(--k2);
}

/* ── tìm và lọc ── */
.qt-loc{display:flex;gap:var(--k2);flex-wrap:wrap;margin-bottom:var(--k3)}
/* cong.css có luật chung cho input/select rộng 100% — ở hàng lọc thì các ô phải
   nằm cạnh nhau, nên chỉ định rõ chiều rộng kẻo bị luật kia đè. */
.qt-loc .qt-tim{flex:1 1 260px;width:auto;min-width:0}
.qt-loc select{width:auto;min-width:158px;flex:0 0 auto}

/* ── bảng ── */
.qt-bang-boc{background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-the);overflow:hidden}
.qt-bang{width:100%;border-collapse:collapse;font-size:var(--cx-to)}
.qt-bang th{
  text-align:left;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--chu-phu);font-weight:650;padding:11px var(--k3);
  background:var(--nen-phu);border-bottom:1px solid var(--vien);white-space:nowrap;
}
.qt-bang td{padding:var(--k2) var(--k3);border-bottom:1px solid var(--vien);vertical-align:middle}
.qt-bang tbody tr:last-child td{border-bottom:0}
.qt-bang tbody tr{cursor:pointer;transition:background .12s}
.qt-bang tbody tr:hover{background:var(--nen-phu)}
.qt-bang td:first-child{display:flex;align-items:center;gap:11px}

.qt-avt{
  flex:none;width:36px;height:36px;border-radius:var(--bo-o);
  background:var(--chinh-100);color:var(--chinh-800);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;letter-spacing:.02em;
}
.qt-avt.to{width:52px;height:52px;border-radius:var(--bo-the);font-size:17px}
.qt-danh2{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.qt-ma{font-size:12px;color:var(--chu-phu);background:none;border:0;padding:0}
.qt-goc{
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--chu-phu);background:var(--nen-phu);
  border:1px solid var(--vien);border-radius:5px;padding:1px 5px;align-self:flex-start;
}
.qt-lau{color:var(--chu-phu);font-size:13px;white-space:nowrap}
.qt-thao{text-align:right;white-space:nowrap}
.qt-dem{font-size:var(--cx-nho);color:var(--chu-phu);padding:10px var(--k3);margin:0;background:var(--nen-phu)}

/* ── nhãn vai trò · trạng thái ── */
.qt-nhan{display:inline-block;font-size:12px;font-weight:650;padding:3px 9px;border-radius:7px;white-space:nowrap}
.qt-nhan.xanh-troi{background:var(--chinh-100);color:var(--chinh-800)}
.qt-nhan.xanh-nhat{background:var(--nen-3);  color:var(--chinh-800)}
.qt-nhan.xanh-la  {background:var(--la-100);  color:var(--la-800)}
.qt-nhan.cam      {background:var(--coral-100);color:var(--loi-900)}
.qt-nhan.xam      {background:var(--nen-phu); color:var(--chu-phu)}

.qt-tt{font-size:var(--cx-nho);font-weight:600;white-space:nowrap}
.qt-tt.xanh{color:var(--la-800)}
.qt-tt.vang{color:var(--vang-800)}
.qt-tt.do  {color:var(--loi-900)}

/* ── chưa có gì ── */
.qt-rong{text-align:center;padding:46px var(--k5)}
.qt-rong b{display:block;font-size:16px;margin-bottom:5px}
.qt-rong p{color:var(--chu-phu);margin:0 0 var(--k3)}

/* ── ngăn kéo ── */
.qt-ngan-nen{
  position:fixed;inset:0;z-index:60;background:transparent;
  transition:background .18s;display:flex;justify-content:flex-end;
}
.qt-ngan-nen.mo{background:rgba(38,56,64,.34)}
.qt-ngan{
  width:min(430px,100%);height:100%;background:var(--nen);
  box-shadow:var(--bong-3);transform:translateX(100%);
  transition:transform .2s ease;display:flex;flex-direction:column;
}
.qt-ngan-nen.mo .qt-ngan{transform:none}
.qt-ngan-dau{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--k3) var(--k4);border-bottom:1px solid var(--vien);
}
.qt-ngan-dau b{font-size:16px}
.qt-x{border:0;background:none;font-size:24px;line-height:1;color:var(--chu-phu);cursor:pointer}
.qt-ngan-than{padding:var(--k4);overflow-y:auto;flex:1}
.qt-ngan-than>*{margin-bottom:var(--k2)}
.qt-ngan-nut{display:flex;gap:var(--k2);justify-content:flex-end;margin-top:var(--k4)}

.qt-nhap{display:block}
.qt-nhap>span{display:block;font-size:13px;font-weight:650;margin-bottom:5px}
.qt-nhap small{display:block;margin-top:5px;font-size:var(--cx-nho);color:var(--chu-phu)}

.qt-ho-so{display:flex;align-items:center;gap:var(--k3)}
.qt-ho-so b{display:block;font-size:17px;margin-bottom:5px}
.qt-ho-so>div>div{display:flex;gap:7px;flex-wrap:wrap;align-items:center}

.qt-doi{border:1px solid var(--vien);border-radius:var(--bo-o);overflow:hidden}
.qt-doi>div{
  display:flex;justify-content:space-between;gap:var(--k2);align-items:baseline;
  padding:9px 13px;border-bottom:1px solid var(--vien);font-size:13.5px;
}
.qt-doi>div:last-child{border-bottom:0}
.qt-doi span{color:var(--chu-phu)}
.qt-doi code{background:none;border:0;padding:0;font-size:13px}

.qt-quyen{list-style:none;padding:0;margin:var(--k1) 0 0}
.qt-quyen li{font-size:13.5px;padding:4px 0}
.qt-quyen li.co{color:var(--chu)}
.qt-quyen li.khong{color:var(--chu-tat)}

.qt-vach{height:1px;background:var(--vien);margin:var(--k4) 0}
.qt-vai-the{padding-bottom:var(--k3)}
.qt-vai-dau{display:flex;align-items:center;gap:var(--k2)}
.qt-vai-dau span{font-size:var(--cx-nho);color:var(--chu-phu)}

.nut.nguy{background:var(--loi-100);color:var(--loi-900);border:1px solid var(--loi-300)}
.nut.nguy:hover{background:var(--coral-100)}

.qt-dong-gon{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--vien)}
.qt-dong-gon:last-child{border-bottom:0}
.qt-dong-gon .qt-danh2{margin-right:auto}
.qt-dong-gon .qt-danh2 b{font-size:var(--cx-to)}

/* ── lời báo ngắn ── */
.qt-toast{
  position:fixed;left:50%;bottom:var(--k5);transform:translate(-50%,14px);
  background:var(--chu);color:var(--chu-nguoc);
  padding:11px var(--k4);border-radius:11px;font-size:var(--cx-to);font-weight:600;
  opacity:0;pointer-events:none;z-index:90;
  transition:opacity .18s,transform .18s;box-shadow:var(--bong-3);
}
.qt-toast.hien{opacity:1;transform:translate(-50%,0)}

/* ── dải «đang tải N video» — sống ngoài #than, đi theo hàng đợi video (08/09) ── */
.dai-video{
  position:fixed;left:50%;bottom:var(--k5);transform:translateX(-50%);
  background:var(--chu);color:var(--chu-nguoc);
  padding:10px var(--k4);border-radius:11px;font-size:var(--cx-to);font-weight:600;
  z-index:89;box-shadow:var(--bong-3);max-width:calc(100vw - 24px);text-align:center;
}
.dai-video[hidden]{display:none}
.ov-dang .nut,.qv-dang-tai .nut{margin-top:6px}

/* ── điện thoại: bảng thành thẻ (mục 22) ── */
@media (max-width:860px){
  /* 18/09: đầu màn quản trị (logo · tên · 🔐 Admin · đồng hồ phiên · Đăng xuất)
     không xuống dòng → ở 390px trang tràn ngang 113px (đo thu-doanh-thu.js). */
  .qt-dau{flex-wrap:wrap}
  .qt-phien{flex-wrap:wrap}
  .qt-khung{grid-template-columns:1fr}
  .qt-ben{
    position:static;min-height:0;min-width:0;   /* min-width:0 — ô lưới không giãn theo hàng mục cuộn ngang */
    padding:10px var(--k2);border-right:0;border-bottom:1px solid var(--vien);
  }
  /* 25/09: cuộn ngang ở DANH SÁCH mục, không ở cả cột — cột có ô tìm, mà khung cuộn cắt mất
     danh sách gợi ý nổi của ô ấy. */
  .qt-ben-ds{display:flex;gap:6px;overflow-x:auto}
  .qt-ben.qt-ben-tim-mo{position:relative}
  .qt-tim-cn{margin-bottom:var(--k2)}
  .qt-tim-cn-o{height:var(--cao-bam);font-size:16px}   /* 16px: iOS không tự phóng to khi bấm vào ô */
  .qt-muc{width:auto;white-space:nowrap;margin:0}
  .qt-muc span{font-size:13.5px}
  .qt-than{padding:var(--k4) var(--k3) 60px}
  .qt-h1{font-size:23px}

  .qt-bang thead{display:none}
  .qt-bang,.qt-bang tbody,.qt-bang tr,.qt-bang td{display:block;width:100%}
  .qt-bang tr{padding:13px var(--k3);border-bottom:1px solid var(--vien)}
  .qt-bang td{border:0;padding:3px 0}
  .qt-bang td:first-child{padding-bottom:var(--k1)}
  .qt-bang td.qt-thao{text-align:left;padding-top:10px}
  .qt-ngan{width:100%}
}

/* ══ GP4 A1 — MỘT GIAO DIỆN, HAI MÁY CHỦ ══
   Tab không dùng được ở chỗ này thì MỜ ĐI chứ không biến mất: tab biến mất là
   người ta tưởng gõ nhầm mã, hoặc tưởng hệ thống mất tính năng. Mờ, không bấm
   được, và rê vào là thấy lý do.
   Dùng biến màu của khối :root — không gõ mã màu thẳng (luật thu-giao-dien). */
#tab button.kha-tat{opacity:.38;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
#tab button.kha-tat:hover{background:none}
/* Việc đặt lệnh được: vẫn bấm được, có chấm nhỏ báo là sẽ xếp hàng chờ máy. */
#tab button.kha-lenh::after{content:'';display:inline-block;width:.42em;height:.42em;margin-left:.4em;vertical-align:middle;border-radius:50%;background:var(--vang)}
/* Huy hiệu «đang ở trạm mây» trên thanh đầu. */
.bang-noi{font-size:.8rem;padding:.2em .7em;border-radius:var(--bo-tron);background:var(--xanh-nhat);color:var(--xanh-dam);border:1px solid var(--vien);white-space:nowrap;cursor:help}


/* ══════════ 🧥 TỦ ĐỒ (GP4 module mở rộng · 21/08) ══════════
   Dùng lại lưới và thẻ của Concept (`.cc-*`), chỉ thêm những thứ Concept
   không có: dải số đầu màn, chấm trạng thái, và khu ảnh trong ngăn kéo. */

.td-dai { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px }
.td-o {
  flex:1 1 96px; min-width:96px; background:var(--the); border:1px solid var(--vien);
  border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:2px;
}
.td-o b { font-size:20px; line-height:1.1; font-variant-numeric:tabular-nums }
.td-o span { font-size:12px; color:var(--phu) }

/* ── nhật ký tủ đồ ── */
.td-nk { border:1px solid var(--vien); border-radius:10px; background:var(--the);
  margin:14px 0 }
.td-nk > summary { padding:10px 12px; cursor:pointer; font-weight:600 }
.td-nk-than { padding:0 12px 10px }
.td-nk-thanh { margin-bottom:8px }
.td-nk-thanh select { max-width:220px }
.td-nk-ds { list-style:none; margin:0 0 8px; padding:0;
  max-height:340px; overflow-y:auto }
.td-nk-ds.nho { max-height:220px }
.td-nk-ds li { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
  padding:6px 2px; border-bottom:1px solid var(--vien); font-size:var(--cx) }
.td-nk-ds li:last-child { border-bottom:0 }
.td-nk-luc { flex:0 0 120px; color:var(--phu); font-variant-numeric:tabular-nums }
.td-nk-ai { flex:0 0 auto; color:var(--phu) }
.td-nk-viec { flex:1 1 200px }
.td-nk-mon { flex:0 0 auto; color:var(--phu) }
@media (max-width:640px) { .td-nk-luc { flex-basis:100% } }

/* ── bảng số tủ đồ ─────────────────────────────────────────────
   Chỉ dùng token màu chung. Gõ mã màu thẳng vào đây là đến lúc đổi giao diện
   sáng/tối sẽ có một góc màn hình không đổi theo, và không ai biết tại sao. */
.td-dau-bang { display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  padding:12px 14px; border:1px solid var(--vien); border-radius:10px;
  background:var(--the); margin:10px 0 12px }
.td-lon { display:flex; flex-direction:column; line-height:1.05 }
.td-lon b { font-size:32px; font-variant-numeric:tabular-nums }
.td-lon span { font-size:12px; color:var(--phu) }
.td-chia { flex:1 1 220px; min-width:180px; display:flex; flex-direction:column; gap:6px }
.td-vach-doi { display:flex; height:10px; border-radius:5px; overflow:hidden;
  background:var(--nen-3) }
.td-vach-doi i { display:block; height:100% }
.td-chia p { margin:0 }

.td-o-bam { cursor:pointer; text-align:left; font:inherit; position:relative;
  padding-left:14px }
.td-o-bam:disabled { cursor:default; opacity:.5 }
.td-o-bam:not(:disabled):hover { border-color:var(--vien-dam) }
.td-o-bam.dang { border-color:var(--chinh-500); box-shadow:0 0 0 1px var(--chinh-500) }
.td-soc { position:absolute; left:0; top:0; bottom:0; width:4px;
  border-radius:8px 0 0 8px }

.td-cot { border:1px solid var(--vien); border-radius:10px; background:var(--the);
  padding:10px 12px; margin:0 0 12px }
.td-cot-dau { font-size:12px; color:var(--phu); margin-bottom:6px }
.td-dong-muc { display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; padding:5px 4px; border-radius:6px; cursor:pointer;
  font:inherit; color:inherit; text-align:left }
.td-dong-muc:disabled { cursor:default }
.td-dong-muc:not(:disabled):hover { background:var(--nen-3) }
.td-dong-muc.dang { background:var(--nen-3); font-weight:600 }
.td-dong-ten { flex:0 0 40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.td-dong-vach { flex:1; height:8px; border-radius:4px; background:var(--nen-3) }
.td-dong-vach i { display:block; height:100%; border-radius:4px;
  background:var(--chinh-500); min-width:2px }
.td-dong-muc b { flex:0 0 34px; text-align:right; font-variant-numeric:tabular-nums }

@media (max-width:640px) {
  .td-lon b { font-size:26px }
  .td-dong-ten { flex-basis:45% }
}

/* ── ngăn kéo sửa một bộ đồ (22/08) ─────────────────────────────
   Vỏ dùng lại `.cc-keo` của Concept — cùng một cách trượt, cùng màn che, cùng
   nút gạt. Trước đợt này drawer tủ đồ dùng bốn lớp `.ngan*` mà cả kho CSS
   không định nghĩa lớp nào trong số đó, nên nó đổ ra thành một khối trần nằm
   cuối trang. Bài học: một lớp CSS gõ ra mà không khai là im lặng thành
   không-có-gì — không lỗi, không cảnh báo, chỉ có người dùng thấy xấu. */
.cc-keo.rong{padding:0;display:flex;flex-direction:column}
@media(min-width:900px){.cc-keo.rong{width:min(760px,100%)}}
.td-keo-dau{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--k2);
  padding:var(--k3) var(--k4);background:var(--nen-mo);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--vien)}
.td-keo-dau b{flex:1;font-size:var(--cx-h3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-keo-than{flex:1;padding:var(--k4)}
.td-keo-2cot{display:block}
@media(min-width:900px){.td-keo-2cot{display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:var(--k5);align-items:start}}
/* thanh hành động dính đáy — Lưu không bao giờ phải đi tìm */
.td-keo-chan{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--k2);padding:var(--k3) var(--k4);background:var(--nen-mo);backdrop-filter:blur(6px);
  border-top:1px solid var(--vien)}
.td-keo-bao{flex:1;font-size:var(--cx-nho);color:var(--la-800);min-width:80px}
.td-keo-chan .loi{flex-basis:100%;order:-1;margin:0}
.td-phan{margin-bottom:var(--k4)}
.td-phan+.td-phan,.td-cot-form .td-phan~.td-phan{border-top:1px solid var(--nen-phu);padding-top:var(--k4)}
.td-f-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--k2) var(--k3)}
.td-f-luoi .rong2{grid-column:1/-1}
.td-f-luoi>label{display:flex;flex-direction:column;gap:3px;font-size:var(--cx-nho);
  font-weight:600;color:var(--chu-phu);min-width:0}
/* Ô tích không nằm trong luật `width:100%` — đo 31/08: nó bị kéo thành
   gạch dài 314px trong màn Tủ Đồ của sale. */
.td-f-luoi input:not([type=checkbox]):not([type=radio]),.td-f-luoi select,.td-f-luoi textarea{font-weight:400;width:100%;min-width:0}
.td-khoang{display:flex;align-items:center;gap:6px}
.td-khoang input{flex:1}
.td-khoang i{font-style:normal;color:var(--chu-tat);flex:0 0 auto}
/* ảnh — thành phần đứng đầu form, bấm vào tấm nào là tấm đó thành đại diện */
.td-anh-day{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:var(--k2);margin-bottom:var(--k2)}
.td-anh2{position:relative;margin:0}
.td-anh2-bam{display:block;width:100%;padding:0;border:2px solid transparent;
  border-radius:var(--bo-o);background:none;cursor:pointer;overflow:hidden}
.td-anh2-bam img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
  border-radius:calc(var(--bo-o) - 2px)}
.td-anh2.chinh .td-anh2-bam{border-color:var(--chinh-500);cursor:default}
.td-anh2-bam:focus-visible{outline:2px solid var(--chinh-800);outline-offset:2px}
.td-anh2 .bia{position:absolute;left:6px;top:6px;font-size:9px;font-weight:700;
  background:rgba(38,56,64,.75);color:var(--chu-nguoc);border-radius:var(--bo-tron);
  padding:2px 7px;pointer-events:none}
/* Chữ báo-trống nằm TRONG lưới thì bị nhét vào một cột 104px — đọc thành cột
   dọc như bị bó. Cho nó choãi hết hàng (anh Huy gửi ảnh 22/08). */
.td-anh-day>.trong,.cc-luoi>.trong{grid-column:1/-1;text-align:center;padding:var(--k4)}

.td-tha{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:92px;border:2px dashed var(--vien-dam);border-radius:var(--bo-the);
  background:var(--nen-phu);color:var(--chu-phu);font-size:var(--cx);cursor:pointer;
  text-align:center;padding:var(--k3);margin-bottom:var(--k2)}
.td-tha b{color:var(--chu)}
.td-tha:hover,.td-tha.keo{border-color:var(--chinh-500);background:var(--chinh-50)}
.td-tha:focus-visible{outline:2px solid var(--chinh-800);outline-offset:2px}
.td-tha[aria-disabled="true"]{opacity:.55;cursor:default}

.td-thanh { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px }
/* `max-width` thêm 10/09: ô tìm nở hết chỗ nên nút cuối rớt xuống dòng riêng
   (thấy trên ảnh chụp, sau khi thêm nút «Xem thử»). Chặn trần ở màn rộng, còn
   màn hẹp vẫn cho nó chiếm cả hàng — luật `@media` bên dưới lo phần ấy. */
.td-thanh input:not([type=checkbox]):not([type=radio]) { flex:1 1 200px; min-width:160px; max-width:340px }   /* đo 31/08: ô tích bị kéo 160px */
.td-thanh select { flex:0 1 170px }

/* Chấm trạng thái trên thẻ — nhỏ, góc trên trái, không che ảnh */
.td-the { position:relative }
.td-cham {
  position:absolute; top:6px; left:6px; width:12px; height:12px; border-radius:50%;
  border:2px solid var(--the); box-shadow:0 0 0 1px var(--vien);
}
/* Màu chấm lấy từ BỘ TOKEN dùng chung, không gõ mã màu thẳng. Bài thử giao
   diện canh đúng luật này và đã bắt được em một lần (21/08) — sáu cái chấm
   nhỏ mà mở đường quay lại thói cũ thì vài tháng nữa cả cổng lại loạn màu. */
.td-xanh { background:var(--la-500) }
.td-lam  { background:var(--chinh-500) }
.td-vang { background:var(--vang-500) }
.td-cam  { background:var(--vang-600, var(--vang-500)) }
.td-do   { background:var(--loi-500) }
.td-xam  { background:var(--vien-dam) }

.hang { display:flex; gap:8px; flex-wrap:wrap }
.hang > label { flex:1 1 140px }
.hang-nut { display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 }

/* Điện thoại: sale phải quản được tủ đồ bằng máy trong tay */
@media (max-width:640px) {
  .td-o { flex:1 1 calc(50% - 4px) }
  /* Cùng bệnh với dòng trên, nhưng nằm trong media query nên vá lượt đầu
     bỏ sót — bài thử bắt được. Màn hẹp vẫn kéo ô tích thành gạch. */
  .td-thanh input:not([type=checkbox]):not([type=radio]), .td-thanh select { flex:1 1 100% }
}

/* ══════════ TRANG QUẢN TRỊ — bốn màn mới (nhịp 12, 28/08) ══════════
 *
 * Mọi màu lấy từ token Sukids đã khai ở đầu file. Không mã màu cứng — đổi một
 * token là cả hệ đổi theo, mà gõ thẳng mã màu thì chỗ này ở lại một mình.
 */
.qt-tieu{font-size:1rem; font-weight:700; margin:22px 0 10px; display:flex; align-items:baseline; gap:9px}
.qt-tieu small{font-weight:400; font-size:.8rem; color:var(--chu-mo)}

/* hàng ô số */
.qt-so-hang{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:2px;
  background:var(--vien); border:1px solid var(--vien); border-radius:11px; overflow:hidden}
.qt-o{background:var(--nen); padding:13px 15px}
.qt-o-n{font-size:1.4rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.15}
.qt-o-t{font-size:.78rem; color:var(--chu-mo); margin-top:3px}
/* «chưa ai đếm» — chữ nhỏ và mờ, để không ai nhầm nó với một con số */
.qt-o.chua .qt-o-n{font-size:.92rem; font-weight:600; color:var(--chu-mo)}

/* sơ đồ chỗ tắc */
.qt-tac{display:flex; align-items:flex-end; gap:5px; overflow-x:auto; padding-bottom:4px}
.qt-khau{flex:1; min-width:62px; text-align:center}
.qt-khau .qt-cot{height:70px; display:flex; align-items:flex-end; justify-content:center;
  background:var(--nen-3); border-radius:7px 7px 0 0; overflow:hidden}
.qt-thanh{width:100%; background:var(--chinh-500); border-radius:6px 6px 0 0; min-height:2px}
.qt-khau.tac .qt-thanh{background:var(--coral-500)}
.qt-khau-n{font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; margin-top:6px}
.qt-khau.tac .qt-khau-n{color:var(--gap-chu)}
.qt-khau-t{font-size:.7rem; color:var(--chu-mo); line-height:1.25}
.qt-khau-g{font-size:.66rem; color:var(--chu-mo); margin-top:2px; font-variant-numeric:tabular-nums}

/* bảng */
.qt-bang{width:100%; border-collapse:collapse; font-size:.87rem; margin-top:10px}
.qt-bang th,.qt-bang td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--vien)}
.qt-bang th{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--chu-mo); font-weight:600}
.qt-bang tr.cu td{background:var(--vang-50)}

.qt-chip{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px}
.qt-hang-nut{display:flex; gap:9px; margin-top:14px}
.qt-cho{color:var(--chu-mo); padding:18px 0}
.qt-ghi{margin-top:14px; font-size:.8rem; color:var(--chu-mo)}

/* ══ MÀN CÀI ĐẶT — 41 Ô SINH TỪ BẢNG (28/08, nhịp 13) ══
   Ô khoá KHÔNG ẩn đi: giấu hẳn thì người ta đi tìm, hiện như ô thường rồi lặng
   lẽ bỏ khi lưu thì người ta tưởng đã sửa. Nên hiện, mờ, và nói vì sao. */
.qt-o-luoi{display:flex;flex-direction:column;gap:var(--k5)}
.qt-hang-o{display:grid;grid-template-columns:1fr minmax(0,18rem);
  gap:var(--k1) var(--k5);align-items:center}
.qt-hang-o .qt-o-ten{font-size:.92rem;color:var(--chu)}
.qt-hang-o .qt-o-vi{grid-column:1;font-size:.8rem;color:var(--chu-mo);line-height:1.4}
.qt-o-nhap{grid-column:2;grid-row:1/span 2;justify-self:stretch;
  padding:var(--k1) var(--k5);border:1px solid var(--vien);
  border-radius:var(--bo-o);background:var(--nen);color:var(--chu);font:inherit;font-size:.9rem}
.qt-o-nhap[type=checkbox]{justify-self:start;width:1.15rem;height:1.15rem;
  grid-row:1;accent-color:var(--chinh-500)}
.qt-o-nhap:focus-visible{outline:2px solid var(--chinh-500);outline-offset:1px}
.qt-hang-o.khoa{opacity:.62}
.qt-hang-o.khoa .qt-o-nhap{background:var(--nen-phu);cursor:not-allowed}
.qt-chip.do{background:var(--coral-100);color:var(--gap-chu);border-color:var(--coral-300)}

/* ══ NĂM KIỂU Ô, NĂM CÁCH VẼ (28/08, nhịp 8) ══
   Bản cũ đoán kiểu ô từ giá trị đang có, nên sổ trống là ô bật/tắt bị vẽ thành
   ô chữ rỗng — 42 ô giống hệt nhau. Giờ bảng khai kiểu, màn hình vẽ theo. */
.qt-o-ten .qt-o-dv{color:var(--chu-mo);font-weight:400;font-size:.85em;margin-left:.25rem}
/* Ô đang chạy bằng mặc định: nói ra, chứ không để trống rồi mặc người đọc đoán */
.qt-o-mac{grid-column:1;font-size:.78rem;color:var(--chu-mo);line-height:1.4}
.qt-o-mac b{color:var(--chu)}
/* Dòng dẫn tới nơi làm được việc — dùng cho ô bản chất là cả một bảng */
.qt-o-dan{grid-column:2;grid-row:1/span 2;align-self:center;
  font-size:.82rem;color:var(--chu-mo);line-height:1.4}

/* NÚT GẠT — hình dáng phải nói được trạng thái, không chỉ dựa vào chữ */
.qt-gat{grid-column:2;grid-row:1/span 2;justify-self:start;align-self:center;
  display:inline-flex;align-items:center;gap:var(--k2);
  background:none;border:0;padding:0;cursor:pointer;font:inherit}
.qt-gat-nut{width:2.6rem;height:1.5rem;border-radius:999px;flex:0 0 auto;
  background:var(--nen-3);border:1px solid var(--vien);position:relative;
  transition:background .15s,border-color .15s}
.qt-gat-nut::after{content:'';position:absolute;top:2px;left:2px;
  width:1.1rem;height:1.1rem;border-radius:50%;background:var(--nen);
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.qt-gat[aria-checked=true] .qt-gat-nut{background:var(--chinh-500);border-color:var(--chinh-700)}
.qt-gat[aria-checked=true] .qt-gat-nut::after{transform:translateX(1.05rem)}
.qt-gat-chu{font-size:.85rem;color:var(--chu-mo);font-weight:600}
.qt-gat[aria-checked=true] .qt-gat-chu{color:var(--chinh-800)}
.qt-gat:focus-visible{outline:2px solid var(--chinh-500);outline-offset:2px;border-radius:var(--bo-o)}
.qt-hang-o.khoa .qt-gat{cursor:not-allowed}

/* Ô CHỌN — mỗi cảnh một dòng kèm hậu quả. Danh sách xổ xuống giấu mất đúng cái
   người ta cần biết TRƯỚC khi chọn. */
.qt-chon{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;gap:var(--k2)}
.qt-chon-d{display:flex;gap:var(--k2);align-items:flex-start;cursor:pointer;
  padding:var(--k2);border:1px solid var(--vien);border-radius:var(--bo-o);
  background:var(--nen);transition:border-color .12s,background .12s}
.qt-chon-d:has(input:checked){border-color:var(--chinh-500);background:var(--chinh-50)}
.qt-chon-d input{margin-top:.2rem;accent-color:var(--chinh-500);flex:0 0 auto}
.qt-chon-d span{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.qt-chon-d b{font-size:.88rem;font-weight:600;color:var(--chu)}
.qt-chon-d small{font-size:.78rem;color:var(--chu-mo);line-height:1.4}

/* KHO KIỂU CHỮ MỜ — trình sửa ngay trên màn Cài đặt (25/09). Trải hết bề ngang thẻ: sáu ô một dòng không vừa cột
   phải 18rem. Chữ ≥ 12px (luật 08-①), màu dùng biến sẵn có. */
.qt-hang-o.qt-o-bang{grid-template-columns:1fr}
.qt-km{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--k2);min-width:0}
.qt-km-ds{display:flex;flex-direction:column;gap:var(--k2)}
.qt-km-dong{display:flex;flex-wrap:wrap;gap:var(--k2);align-items:center;padding:var(--k2);
  border:1px solid var(--vien);border-radius:var(--bo-o);background:var(--nen)}
.qt-km-dong .qt-o-nhap{grid-column:auto;grid-row:auto;min-width:0}
.qt-km-dong .km-ten{flex:2 1 12rem}
.qt-km-dong .km-chu{flex:2 1 10rem}
.qt-km-dong .km-vi-tri{flex:1 1 9rem}
.qt-km-dong .km-so{display:inline-flex;align-items:center;gap:var(--k1);font-size:.85rem;color:var(--chu-mo)}
.qt-km-dong .km-so .qt-o-nhap{width:5.2rem}
.qt-km .km-them{align-self:flex-start}

/* NÚT «GỠ TOKEN» dưới ô chìa (1.5.35) — cột phải, sau ô nhập; màu nút nguy sẵn có (`.qt-nut.nguy`). */
.qt-go-chia{grid-column:2;justify-self:start}

@media (max-width:640px){
  .qt-hang-o{grid-template-columns:1fr}
  .qt-o-nhap,.qt-gat,.qt-chon,.qt-o-dan,.qt-go-chia{grid-column:1;grid-row:auto}
}

/* ══ VIỆC NGUY HIỂM — ba mức, ranh giới mất/còn (28/08, khối 8) ══
   Ba mức KHÔNG chỉ để cho đẹp: nó là thứ duy nhất phân biệt «mở lại lựa chọn»
   với «xoá hẳn thẻ bộ» khi mắt lướt qua danh sách. Vạch bên trái đậm dần. */
.qt-the.qt-nguy{border-left:4px solid var(--vien-dam)}
.qt-the.qt-nguy.vua{border-left-color:var(--vang-500)}
.qt-the.qt-nguy.nang{border-left-color:var(--coral-500)}
.qt-ranh{display:grid;gap:var(--k1);margin:var(--k1) 0}
.qt-ranh>div{font-size:.88rem;line-height:1.5;color:var(--chu-phu)}
.qt-ranh b{display:inline-block;min-width:3.2rem;font-weight:700}
.qt-ranh-mat b{color:var(--gap-chu)}
.qt-ranh-con b{color:var(--tot-chu)}
.qt-nut.nguy{background:var(--coral-100);border-color:var(--coral-300);color:var(--gap-chu)}
.qt-nut.nguy:hover{background:var(--coral-300)}

/* ══ BĂNG BÁO · PHIÊN ADMIN · Ô CHƯA CÓ SỐ (28/08) ══
   `.qt-bao` dùng từ khối 12 mà chưa có kiểu — nó vẫn hiện chữ nên không ai
   thấy thiếu. Đúng loại lỗi im lặng: trông vẫn chạy, chỉ là không nói được
   «đây là tin xấu» hay «đây là tin tốt». */
.qt-bao{padding:var(--k5) var(--k5);border-radius:var(--bo-o);
  border:1px solid var(--vien);background:var(--nen-phu);color:var(--chu);
  line-height:1.55;margin-bottom:var(--k5)}
.qt-bao.tot{background:var(--chinh-50);border-color:var(--chinh-300)}
.qt-bao.xau{background:var(--coral-100);border-color:var(--coral-300);color:var(--gap-chu)}

/* Đồng hồ phiên admin — ĐẦU MÀN, không giấu trong mục nào: thứ đang đếm ngược
   mà phải đi tìm mới thấy thì bằng không có. */
.qt-phien{display:flex;align-items:center;gap:var(--k1);margin-left:auto}
.qt-chip-nut{padding:6px 12px;border:1px solid var(--vien);border-radius:999px;
  background:var(--nen);color:var(--chu);font:inherit;font-size:.82rem;cursor:pointer}
.qt-chip-nut:hover{background:var(--nen-phu)}
.qt-chip-nut:focus-visible{outline:2px solid var(--chinh-500);outline-offset:1px}
.qt-phien .qt-chip.do{background:var(--coral-100);color:var(--gap-chu);border-color:var(--coral-300)}

/* «Chưa ai đếm» trong bảng — chữ nghiêng mờ, KHÔNG phải số 0 (Đ5) */
.qt-chua-i{color:var(--chu-mo);font-style:italic;font-size:.88rem}

@media (max-width:720px){
  .qt-phien{margin-left:0;width:100%;order:9;justify-content:flex-end}
}

/* ══ CẦN ANH QUYẾT — hai mức (28/08, khối 11) ══ */
.qt-the.qt-quyet{border-left:4px solid var(--vang-500)}
.qt-the.qt-quyet.do{border-left-color:var(--coral-500)}

/* ══ CHUÔNG MỌI VAI (28/08, khối 13) ══
   Nhãn vai đứng TRƯỚC nội dung: gộp năm bảng vào một mà không nói cái nào của
   ai thì đọc xong vẫn không biết gọi cho ai. */
.qt-chuong-ds{display:flex;flex-direction:column;gap:var(--k1)}
.qt-chuong{display:flex;gap:var(--k1);align-items:flex-start;
  padding:var(--k1) 0;border-top:1px solid var(--vien);font-size:.9rem;line-height:1.5}
.qt-chuong:first-child{border-top:0}
.qt-chuong .qt-chip{flex:none}
.qt-chuong.gap,.qt-chuong.khan{color:var(--gap-chu)}

/* ══ «ĐANG CHỜ AI · BAO LÂU» (28/08, H4) ══
   Nằm ngay trên dòng bộ, không phải bấm vào mới thấy. Màu theo VAI đang bị
   chờ, để liếc một cái là biết bóng đang ở sân ai — không phải để doạ: chờ
   khách và chờ máy là chuyện bình thường, chỉ chờ ANH mới cần để mắt.
   Mọi màu lấy từ bảng biến sẵn có, không gõ mã màu thẳng vào đây. */
.cho-ai{display:block;margin:6px 0 0;padding:5px 9px;border-radius:8px;
  font-size:12px;font-weight:700;line-height:1.35}
.cho-ai-khach{background:var(--chinh-100);color:var(--chinh-800)}
.cho-ai-may{background:var(--nen-3);color:var(--chu-phu)}
.cho-ai-ctv{background:var(--tim-100);color:var(--tim-800)}
.cho-ai-studio{background:var(--vang-100);color:var(--vang-800)}

/* ══ THẺ MÁY Ở MÀN BẢN PHÁT HÀNH (28/08, nhịp 8) ══
   Bản cũ là ba bảng số. Anh Huy: «không giúp ra quyết định gì cả». Giờ mỗi
   máy cần cài lại là một thẻ mang theo nút bấm được, và mã máy hiện ra để hai
   dòng cùng tên phân biệt được bằng mắt. */
.qt-may{display:flex;flex-direction:column;gap:var(--k2)}
.qt-may-cu{border-color:var(--gap-vien);background:var(--gap-nen)}
.qt-may-dau{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap}
.qt-may-dau b{font-size:1rem}
.qt-may-ma{font-size:.78rem;color:var(--chu-mo)}
.qt-may-ban{font-size:1rem;color:var(--chu);font-variant-numeric:tabular-nums}  /* 20/10 · 1.5.49: số bản ba chặng to, nhãn dài nhỏ cạnh */
.qt-may-ma code{font-size:.95em}
.qt-may-vi{font-size:.84rem;color:var(--chu);line-height:1.45;margin:0}
.qt-chip.xam{background:var(--nen-3);color:var(--chu-phu);border-color:var(--vien)}
.qt-chip.la{background:var(--la-100);color:var(--la-800);border-color:var(--la-300)}

/* Nút CHƯA DÙNG ĐƯỢC thì mờ TẠI CHỖ, không biến mất — biến mất là người ta
   tưởng mất chức năng rồi đi tìm. Bấm vào vẫn hiện lời giải thích (28/08). */
.qt-nut.n-khoa{opacity:.55;background:var(--nen-phu);border-color:var(--vien);
  color:var(--chu-phu);cursor:help}

/* Mục CHỈ CHẠY TRÊN MÂY: mờ tại chỗ, không xoá — mục biến mất thì người ta
   tưởng mất tính năng rồi đi tìm. Bấm vào vẫn nói rõ phải mở ở đâu (28/08). */
.qt-muc-mo{opacity:.5;cursor:help}
.qt-muc-nhan{margin-left:auto;font-size:.68rem;font-weight:600;color:var(--chu-phu);
  background:var(--nen-3);border-radius:999px;padding:.1rem .4rem;white-space:nowrap}

/* Ô chưa ai đặt và cũng KHÔNG có mặc định nào — khác hẳn ô đang chạy bằng mặc
   định, nên phải nhìn ra khác (28/08). */
.qt-o-chua-dat{font-style:italic}

/* Nhãn trạng thái trong BẢNG (29/08). Không mượn `.qt-chip` — cái đó là hộp
   flex có lề, nhét vào ô bảng thì dòng nở ra và chữ lệch khỏi cột bên cạnh. */
.qt-nhan-tt{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;
  font-weight:600;background:var(--nen-3);color:var(--chu-phu);border:1px solid var(--vien)}
.qt-nhan-tt.dang{background:var(--la-100);color:var(--la-800);border-color:var(--la-300)}
/* B0 (19/09): tài khoản Drive hết chỗ — chỉ còn đọc, ghi mới đi tài khoản đang ghi */
.qt-nhan-tt.qt-chi-doc{background:var(--cam-100);color:var(--cam-800);border-color:var(--cam-300);margin-left:6px}
/* B3 (L1): tài khoản nối từ app — không nối lại ở cổng mây */
.qt-o-nut .qt-noi-tu-app{color:var(--cam-800);font-weight:600;margin-bottom:4px}
.qt-noi-tu-app-luu-y{background:var(--cam-50);border:1px solid var(--cam-300);border-radius:10px;padding:8px 10px}
.qt-o-nut{white-space:normal}
.qt-o-nut .qt-may-vi{display:block;max-width:26rem}

/* ══════════ DANH SÁCH CHỌN BỘ Ở MÀN VIỆC NGUY HIỂM (31/08) ══════════
 *
 * Ô tìm trả về nhiều bộ trùng tên, người phải bấm chọn ĐÚNG MỘT dòng thì bảy
 * nút nguy hiểm mới mở. Nên dòng đang chọn phải nhìn ra ngay từ xa — đây là
 * màn có nút «Huỷ bộ ảnh», nhầm dòng là huỷ nhầm bộ của khách khác. */
.qt-ds-bo{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.qt-bo-dong{
  display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left;
  font:inherit; color:var(--chu); cursor:pointer;
  background:var(--nen); border:1px solid var(--vien); border-radius:var(--bo-o);
  padding:9px 11px;
}
.qt-bo-dong:hover{border-color:var(--vien-dam); background:var(--nen-phu)}
.qt-bo-dong.dang{border-color:var(--chinh-500); background:var(--chinh-100)}
.qt-bo-cham{
  width:16px; height:16px; flex:none; margin-top:3px; border-radius:50%;
  border:2px solid var(--vien-o); background:var(--nen);
}
.qt-bo-dong.dang .qt-bo-cham{border-color:var(--chinh-700); box-shadow:inset 0 0 0 3px var(--chinh-500)}
.qt-bo-chu{display:block; line-height:1.45}
.qt-bo-phu{display:block; font-size:.82em; color:var(--chu-phu); margin-top:2px}
.qt-bo-phu code{font-size:.92em; color:var(--chu-mo)}
/* Nút nguy hiểm khi CHƯA chọn bộ: mờ hẳn và không bấm được. Mặc định của mọi
   chốt ở màn này là ĐÓNG. */
.qt-nut:disabled{opacity:.42; cursor:not-allowed}
/* nút kỳ hạn đang chọn (7 · 30 · 90 ngày) ở mục Thần số học — cùng màu với mục đang mở */
.qt-nut.dang{background:var(--chinh-100);color:var(--chinh-800);font-weight:650}
/* Khối GẬP trong quản trị (12/09 khuya): «Lịch sử người xem» Thần số học — đóng
   mặc định, mở mới đi hỏi mây. Bảng trong đó chỉ để đọc nên không đổi con trỏ. */
.qt-gap{margin-top:16px;border:1px solid var(--vien);border-radius:var(--bo-the);background:var(--nen)}
.qt-gap>summary{cursor:pointer;padding:12px 16px;list-style:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--cx-to)}
.qt-gap>summary::-webkit-details-marker{display:none}
.qt-gap>summary::before{content:"▸";color:var(--chu-mo);width:14px;flex:0 0 auto}
.qt-gap[open]>summary::before{content:"▾"}
.qt-gap-than{padding:0 16px 14px;display:flex;flex-direction:column;gap:10px}
.qt-ghi-inline{color:var(--chu-phu);font-weight:400;font-size:13px}

/* ══ QUẢN TRỊ SUKIDS PANEL (14/09) — dùng lại khung gập, bảng, nút của trang;
   chỉ thêm: ô số «cần anh» đỏ, hàng form 2–4 ô, cụm nút trong ô bảng, dòng ẩn. */
.qt-o.canh{background:var(--coral-100)}
.qt-o.canh .qt-o-n,.qt-o.canh .qt-o-t{color:var(--gap-chu)}
.qt-panel-form{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.qt-panel-hang{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 14px;align-items:start}
.qt-panel-hang .qt-o-nhap{grid-column:auto;grid-row:auto;width:100%;box-sizing:border-box}
.qt-panel-rong{grid-column:1/-1}
.qt-panel-form .qt-hang-nut,.qt-panel-dan .qt-hang-nut{margin-top:4px}
.qt-panel-dan textarea.qt-o-nhap{width:100%;box-sizing:border-box;font-family:ui-monospace,Menlo,monospace;font-size:.85rem;resize:vertical}
.qt-panel-bang td code{font-size:.82rem}
/* 15/09: ô hạn mức máy nằm trong ô bảng — bỏ toạ độ lưới của .qt-o-nhap, ngắn thôi, nút Lưu đứng cạnh */
.qt-panel-han-muc{white-space:nowrap}
.qt-panel-han-muc .qt-o-nhap.nho{grid-column:auto;grid-row:auto;width:4.6em;padding:2px 6px;font-size:.85rem;text-align:right}
.qt-panel-nut{white-space:nowrap}
.qt-panel-nut .qt-nut{margin:2px 2px 2px 0}
.qt-panel-an td{opacity:.6}
.qt-panel-tim{width:100%;max-width:420px;box-sizing:border-box;grid-column:auto;grid-row:auto}
.qt-panel-loc{margin-top:0}
@media (max-width:640px){ .qt-panel-nut{white-space:normal} }
.qt-bang-tinh tbody tr{cursor:default}
.qt-bang-tinh tbody tr:hover{background:transparent}
.qt-bang-tinh td:first-child{display:table-cell;white-space:nowrap;font-variant-numeric:tabular-nums}
.qt-bang-tinh td.so{font-weight:650;font-variant-numeric:tabular-nums}
.qt-chip{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;background:var(--nen-phu);color:var(--chu-phu);margin-left:4px}

/* ══════════ MÀN TẢI VIDEO HẬU TRƯỜNG — cho ĐIỆN THOẠI (31/08) ══════════
 *
 * Người quay đứng ngoài hiện trường, cầm điện thoại một tay. Màn này chỉ có
 * MỘT việc: bấm ⬆️ Tải. Nên danh sách bộ chiếm chỗ nhiều nhất, bộ lọc gọn hết
 * mức — anh Huy nhìn bản đầu và nói «làm giao diện nhỏ đi», khi ấy khu lọc
 * ăn gần nửa màn hình. */
.qv-loc{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.qv-o-tim{width:100%; font-size:15px}

/* Chip MỘT HÀNG, cuộn ngang. Xuống hai hàng là tốn gấp đôi chỗ mà không thêm
   thông tin gì. */
.qv-chip-hang{display:flex; gap:5px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
.qv-chip-hang::-webkit-scrollbar{display:none}
.qv-chip{
  font:inherit; font-size:13px; font-weight:500; white-space:nowrap; flex:none;
  padding:5px 11px; border-radius:var(--bo-tron);
  border:1px solid var(--vien-dam); background:var(--nen); color:var(--chu-phu); cursor:pointer;
}
.qv-chip:hover{border-color:var(--vien-o)}
.qv-chip.on{background:var(--chinh-500); border-color:var(--chinh-500);
  color:var(--chu-tren-chinh); font-weight:600}

/* Khoảng ngày ẨN mặc định, mở bằng chip 📅 — chín trên mười lượt dùng chip
   nhanh chứ không gõ ngày tay, mà hai ô ngày là chỗ tốn nhất. */
.qv-hang-ngay{display:flex; gap:5px; align-items:center; font-size:13px; color:var(--chu-phu);
  background:var(--chinh-50); border:1px solid var(--chinh-300);
  border-radius:var(--bo-o); padding:6px 8px}
.qv-hang-ngay[hidden]{display:none}
.qv-hang-ngay input[type=date]{flex:1; min-width:0; font-size:13px; height:var(--cao-nut-nho)}
.qv-dem{font-size:12px; color:var(--chu-tat)}

/* Một bộ — hai dòng chữ và một nút to, dưới là hàng nút phụ (05/09).
 *
 * Thẻ ĐỔI TỪ HÀNG SANG CỘT: hàng trên giữ nguyên nếp cũ (chữ trái · nút Tải
 * phải), hàng dưới là hai nút nhỏ, và dưới cùng là khay mở ra. Nhét bốn nút
 * vào một hàng trên màn điện thoại thì nút Tải — việc chính — bị bóp lại còn
 * bằng hai nút phụ, và ngón cái bấm trượt. */
.qv-bo{display:flex; flex-direction:column; gap:7px;
  border:1px solid var(--vien); border-radius:var(--bo-o); background:var(--nen);
  padding:9px 11px; margin-bottom:6px}
.qv-bo-hang{display:flex; align-items:center; gap:10px; justify-content:space-between}
.qv-bo-chu{min-width:0}
.qv-bo-ten{font-weight:600; font-size:14.5px; line-height:1.35; overflow-wrap:anywhere}
.qv-bo-dem{font-size:12.5px; color:var(--chu-phu); margin-top:2px}
.qv-bo-dem.chua{color:var(--chu-tat)}
.qv-bo-dem code{font-size:11.5px; color:var(--chu-tat)}

/* Nút đủ to cho NGÓN TAY — 44px là mức tối thiểu chạm không trượt. */
.qv-nut-tai{
  font:inherit; font-size:14px; font-weight:600; white-space:nowrap; flex:none;
  min-height:44px; padding:0 16px; border:0; border-radius:var(--bo-o);
  background:var(--chinh-500); color:var(--chu-tren-chinh); cursor:pointer;
}
.qv-nut-tai:active{background:var(--chinh-900)}

/* Hai nút phụ — VIỀN chứ không nền đặc, để nút Tải vẫn là thứ mắt thấy trước.
   Vẫn 38px: nhỏ hơn nút chính nhưng còn trong tầm chạm không trượt. */
.qv-bo-phu{display:flex; gap:6px}
.qv-nut-phu{font:inherit; font-size:13px; font-weight:600; white-space:nowrap;
  min-height:38px; padding:0 12px; border:1px solid var(--chinh-300);
  border-radius:var(--bo-o); background:var(--chinh-50); color:var(--chinh-800);
  cursor:pointer}
.qv-nut-phu:active{background:var(--chinh-100)}

/* Khay mở ra — nằm TRONG thẻ bộ, không phải hộp nổi giữa màn. */
.qv-mo{border-top:1px solid var(--vien); padding-top:7px}
.qv-mo[hidden]{display:none}
.qv-mo-tieu{font-size:13px; font-weight:600; color:var(--chinh-800); margin-bottom:5px}
.qv-mo-cho{font-size:12.5px; color:var(--chu-phu); line-height:1.45}
.qv-vd{padding:5px 0; border-bottom:1px solid var(--vien)}
.qv-vd:last-child{border-bottom:0}
.qv-vd-ten{font-size:13.5px; overflow-wrap:anywhere}
.qv-vd-phu{font-size:12px; color:var(--chu-tat); margin-top:1px}
/* Link dài hơn bề ngang điện thoại — phải cho ngắt, không thì thẻ giãn ra và
   cả danh sách cuộn ngang. */
.qv-link{font-size:12.5px; overflow-wrap:anywhere; color:var(--chu-phu);
  background:var(--chinh-50); border-radius:var(--bo-o); padding:6px 8px; margin-bottom:6px}
.qv-link-nut{margin-bottom:6px}

/* Đang tải: thanh tiến độ. File 1 GB mà không thấy gì nhúc nhích thì người ta
   tưởng treo rồi bấm lại — thành hai bản trên Drive. */
.qv-dang-tai{border:1px solid var(--la-300); background:var(--la-100);
  border-radius:var(--bo-o); padding:9px 11px; margin-bottom:6px}
.qv-dang-tai.hong{border-color:var(--loi-300); background:var(--loi-100)}
.qv-dang-ten{font-size:14px; font-weight:600; color:var(--la-800); overflow-wrap:anywhere}
.qv-dang-tai.hong .qv-dang-ten{color:var(--loi-700)}
.qv-thanh{height:7px; background:var(--nen); border:1px solid var(--la-300);
  border-radius:var(--bo-tron); margin:6px 0 4px; overflow:hidden}
.qv-thanh i{display:block; height:100%; background:var(--la-500); transition:width .2s}
.qv-dang-ct{font-size:12.5px; color:var(--la-800)}
.qv-dang-tai.hong .qv-dang-ct{color:var(--loi-700)}
.qv-cho{color:var(--chu-phu); font-size:14px; padding:14px 2px}

/* ══════════ Ô 🎬 VIDEO HẬU TRƯỜNG — TRÊN MÁY TÍNH (31/08) ══════════
 *
 * Mở ra ngay trong thẻ bộ, đúng chỗ nút «Copy link Drive» cũ đứng. Link Drive
 * không mất — nó chuyển vào chân ô này. */
.ov-khung{border:1px solid var(--chinh-300); background:var(--chinh-50);
  border-radius:var(--bo-o); padding:11px 12px; margin-top:9px;
  /* CHIẾM TRỌN BỀ NGANG khi rơi vào một cái lưới (08/09). Hộp chi tiết bên
     điều phối xếp nút bằng `grid-template-columns:repeat(auto-fill,minmax(190px,1fr))`;
     ô này thả vào đó thì thành MỘT Ô rộng bằng một cái nút, và tên file
     `IMG_5632.PNG` rớt xuống mỗi dòng một chữ cái. Dòng dưới chỉ có tác dụng
     khi cha là lưới, cha thường thì trình duyệt bỏ qua — nên đặt ở đây là vá
     được cả ba chỗ gắn mà không phải nhớ chỗ nào là lưới. */
  grid-column:1 / -1}
.ov-tieu{font-weight:600; font-size:14px; color:var(--chinh-800); margin-bottom:9px}
.ov-tha{border:2px dashed var(--vien-dam); border-radius:var(--bo-o); background:var(--nen);
  padding:16px 12px; text-align:center; cursor:pointer; font-size:13.5px}
.ov-tha:hover,.ov-tha.dang{border-color:var(--chinh-500); background:var(--chinh-100)}
.ov-tha:focus-visible{outline:2px solid var(--chinh-800); outline-offset:2px}
.ov-tha b{display:block; margin-bottom:2px}
.ov-tha span{font-size:12.5px; color:var(--chu-tat)}
.ov-ds{margin-top:9px}
.ov-mot{display:flex; justify-content:space-between; gap:10px; padding:5px 0;
  border-bottom:1px solid var(--vien); font-size:13px}
.ov-mot:last-child{border-bottom:0}
.ov-ten{overflow-wrap:anywhere; font-weight:500}
.ov-phu{color:var(--chu-phu); white-space:nowrap; font-size:12.5px}
.ov-trong{color:var(--chu-tat); font-size:13px; padding:4px 0}
/* 04/10 BL-261004-HCE3 — gửi ảnh thiết kế xong thì nói thẳng «đã thiết kế xong». */
.ov-xong{margin-top:6px; padding:6px 10px; border-radius:var(--bo-o); background:var(--la-100); border:1px solid var(--la-300);
  color:var(--la-900); font-size:13px; overflow-wrap:anywhere}
.ov-chan{margin-top:9px}
/* Đang tải — thanh tiến độ. File 1 GB mà không thấy gì nhúc nhích thì người ta
   tưởng treo rồi bấm lại, thành hai bản trên Drive. */
.ov-dang{border:1px solid var(--la-300); background:var(--la-100);
  border-radius:var(--bo-o); padding:8px 10px; margin-bottom:6px}
.ov-dang.hong{border-color:var(--loi-300); background:var(--loi-100)}
.ov-dang-ten{font-size:13px; font-weight:600; color:var(--la-800); overflow-wrap:anywhere}
.ov-dang.hong .ov-dang-ten{color:var(--loi-700)}
.ov-thanh{height:6px; background:var(--nen); border:1px solid var(--la-300);
  border-radius:var(--bo-tron); margin:5px 0 3px; overflow:hidden}
.ov-thanh i{display:block; height:100%; background:var(--la-500); transition:width .2s}
.ov-dang-ct{font-size:12px; color:var(--la-800)}
.ov-dang.hong .ov-dang-ct{color:var(--loi-700)}

/* ══════════ KHỐI LINK GÓP VIDEO trong ô 🎬 (31/08) ══════════
 *
 * Khối này cầm một đường GHI MỞ CHO NGƯỜI NGOÀI. Nó phải nói rõ ba con số và
 * cho tắt được ngay — studio gửi nhầm người thì đóng trong một cú bấm. */
.ov-gop{margin-top:11px; padding-top:10px; border-top:1px solid var(--vien)}
.ov-link-tieu{font-size:13px; font-weight:600; color:var(--chinh-800); margin-bottom:6px}
.ov-tat{color:var(--loi-700); font-weight:600}
.ov-link{background:var(--nen); border:1px dashed var(--vien-o); border-radius:var(--bo-o);
  padding:7px 9px; font-family:var(--font-so); font-size:12px; word-break:break-all; color:var(--chu)}
.ov-link-nut{display:flex; gap:6px; margin-top:7px; flex-wrap:wrap}
.ov-han{font-size:12.5px; color:var(--chu-phu); margin-top:7px}
.ov-han b{color:var(--chu)}
/* Nguồn của một video: «qua link» là tên TỰ KHAI, bịa được — nên nó nhạt hơn
   tên người quay đăng nhập bằng mã. */
.ov-ai{color:var(--chinh-800); font-weight:600}
.ov-nguon{font-style:normal; font-size:11px; color:var(--chu-tat)}

/* Ô Góp Video khi đang xem từ MÁY STUDIO — hai cửa ấy chỉ ở mây (31/08) */
.ov-gop-may{padding:.7rem .8rem;border-radius:var(--bo-o);background:var(--nen-mo);
  color:var(--chu-mo);font-size:.86rem;line-height:1.5;border:1px dashed var(--vien)}

/* ══════════ LỆNH ĐÃ GỬI MÁY STUDIO ══════════ (03/09 · mục 5.1)
   Chỉ hiện khi CÓ lệnh chưa xong hoặc vừa hỏng; sạch thì khối biến mất, không
   thêm một ô số đẹp cho màn vốn đã dày. Dùng token, không gõ mã màu. */
.hop-lenh-may{
  border:1px solid var(--vien); border-radius:var(--bo-o);
  background:var(--nen-phu); padding:var(--k3) var(--k4); margin-bottom:var(--k4);
  display:flex; flex-direction:column; gap:var(--k2);
}
.hop-lenh-may .nhan-o{margin:0 0 var(--k1)}
.lm-dong{display:flex; align-items:center; gap:var(--k2); flex-wrap:wrap}
.lm-dong b{font-weight:600}
/* Lý do hỏng xuống dòng riêng, thụt vào — nó là câu người đọc cần nhất khi
   lệnh đỏ, không được để nó lẫn vào hàng nhãn. */
.loi-nho{width:100%; padding-left:var(--k5); color:var(--loi-700)}

/* ══════════ HẠN NỘP & BỘ ĐÃ XONG (03/09 · Đ6 · 8.2 · 8.3) ══════════
   Màu đi từ xanh dương (còn thong thả) → cam (sắp) → đỏ (gấp/quá). Bộ đã nộp
   xuống cuối danh sách và nhạt đi — còn tra được, nhưng thôi tranh chỗ của
   việc chưa xong. */
.han-nop{font-size:var(--cx-nho);padding:1px var(--k2);border-radius:var(--bo-tron);
  background:var(--xanh-nhat);color:var(--xanh-dam);white-space:nowrap}
.han-nop.sap{background:var(--vang-100);color:var(--vang-800)}
.han-nop.gan{background:var(--vang-300);color:var(--vang-800)}
.han-nop.qua{background:var(--loi-100);color:var(--loi-700);font-weight:600}
.the.the-xong{opacity:.72;border-left:3px solid var(--la-800)}
.the.the-xong:hover{opacity:1}

/* ══════════ CHUÔNG & CHỮ (03/09 · Đ7 · 3.10 · 3.11) ══════════ */
/* `hidden` KHÔNG tự thắng `display` của lớp khác — thiếu dòng này thì gợi ý
   vẫn hiện dù đã đặt `hidden`. Bẫy ấy đã cắn ở hai màn khách. */
[hidden]{display:none!important}
.bc-mo-goi-y{background:none;border:0;padding:2px 0 0 16px;margin:0;cursor:pointer;
  font-size:var(--cx-nho);color:var(--chinh-800);text-align:left}
.bc-mo-goi-y:hover{text-decoration:underline}
/* Tên CTV nổi lên giữa dòng chuông — người đọc tìm TÊN trước, tìm việc sau. */
.ten-ctv{color:var(--chinh-800);font-weight:600}

/* ══════════ Đ10 · ADMIN DỰNG LẠI (03/09) ══════════ */

/* SÁU VIỆC NGUY HIỂM TRONG MỘT KHUNG (2.6). Trước đây sáu thẻ rời, mỗi thẻ mở
   sẵn hai dòng «mất · còn», dài hơn hai màn hình cuộn — nên phần cảnh báo
   quan trọng nhất của cả trang lại là phần bị cuộn qua nhiều nhất. Gấp lại
   bằng <details>: nhìn hết sáu dòng một lượt, mở đúng dòng đang định bấm.
   Viền đỏ nhạt của khung để không ai lạc vào đây mà tưởng màn thường. */
.qt-khung-nguy{
  border:1px solid var(--coral-300);border-radius:var(--bo-the);
  padding:var(--k3);background:var(--nen-phu);
}
.qt-khung-nguy .qt-the{margin-bottom:var(--k2)}
.qt-khung-nguy .qt-the:last-child{margin-bottom:0}
.qt-khung-nguy summary{cursor:pointer;list-style:none}
.qt-khung-nguy summary::-webkit-details-marker{display:none}
.qt-khung-nguy summary::before{content:'▸ ';color:var(--chu-phu)}
.qt-khung-nguy details[open] summary::before{content:'▾ '}

/* BẢNG VIỆC × VAI (2.10). Bảng 29 hàng × 7 cột — trên màn hẹp nó tràn ngang,
   nên cuộn TRONG khung chứ không đẩy cả trang trượt sang phải. */
.qt-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}
.qt-viec-vai td,.qt-viec-vai th{text-align:center;white-space:nowrap}
.qt-viec-vai td:first-child,.qt-viec-vai th:first-child{text-align:left}
/* Ô «có» xanh, ô «chưa khai» XÁM MỜ — cố ý KHÔNG đỏ. Đỏ đọc thành «bị cấm»,
   mà sự thật là «chưa ai khai»; tô đỏ là biến một lỗ hổng thành lời khẳng
   định sai. Lý do đầy đủ ở đầu `loi/bang-viec-vai.js`. */
.qt-viec-vai td.co{color:var(--la-800);font-weight:600}
.qt-viec-vai td.chua-khai{color:var(--chu-tat)}

/* DÒNG «CHƯA ĐỌC ĐƯỢC» trong danh sách việc xấu (2.1). Khác màu hẳn dòng xấu:
   một bên là studio đang có việc, một bên là màn hình đang mù. */
.qt-canh.chua-doc{background:var(--nen-phu);border-color:var(--vien)}
.qt-canh.chua-doc p{color:var(--chu-phu)}

/* Ô ✗ trong bảng việc × vai (04/09 · §10.43) — ĐỎ NHẠT, và chỉ ô này mới đỏ.
   Ô «—» vẫn xám: xám là «chưa ai khai», đỏ là «có cửa khai cấm và mã gác đã
   được soi». Hai chuyện khác hẳn nhau, tô cùng màu là mất đúng cái phân biệt
   mà §10.43 dựng ra. ⚠️ là hai nguồn nói ngược nhau — phải sửa nguồn. */
.qt-viec-vai td.khong{color:var(--coral-500)}
.qt-viec-vai td.mau-thuan{color:var(--vang-800);font-weight:700}


/* ══════════ MÀN NHẬP TỦ ĐỒ — MẪU A (04/09 · Đ4) ══════════
 *
 * Dựng theo README của gói thiết kế. Chỉ `var(--…)`, không một mã màu nào —
 * bài thử quét cả khối này, gõ một hex là đỏ.
 *
 * PHẢI ĐÈ `width`, KHÔNG PHẢI `max-width`, VÀ PHẢI ĐỦ BA LỚP.
 * `.cc-keo.rong` khoá `width:min(760px,100%)` từ đợt Concept. Vá lần đầu viết
 * `max-width` — thua, vì `max-width` không thắng `width`. Vá lần hai đổi sang
 * `width` nhưng chỉ một lớp — vẫn thua, vì độ chọn lọc thắng thứ tự.
 * Chỉ lộ ra khi mở Chrome thật hỏi `getComputedStyle`; bài thử soi CSS xanh
 * suốt cả hai lần. Ghi §10.47.
 *
 * BỀ NGANG 1240px — ĐẠT SAU KHI DỜI NGĂN KÉO (04/09, anh Huy chốt hướng A).
 *
 * Bản vẽ ghi `min(1240px,100%)`. Đo thật lần đầu ra **920px ở CẢ BA cỡ màn**
 * 1920/1440/1366 — không co giãn theo màn.
 *
 * GỐC, và em từng ghi sai gốc: không phải `transform` của `#than`, mà là
 * `main{max-width:920px}` ở dòng 330. Ngăn kéo `position:fixed` nằm TRONG
 * `main#than`, và `#than` có `transform` nên nó thành khung cha — khung cha
 * ấy rộng đúng 920 vì `max-width` của `main`. Hai thứ cộng lại mới ra hiện
 * tượng; em chỉ ghi một nửa.
 *
 * Hệ quả lúc đó: cột form 539px, bảng tích 2 cột thay vì 4, form tràn 860px —
 * tức lời hứa chính của Mẫu A không đạt được ở chỗ ấy.
 *
 * Hướng A: neo `#td-ngan` thẳng dưới `<body>` trong `index.html`, ra khỏi
 * `main`. Đo lại: **1240px · cột form 859px · 4 cột · thừa 0px ở 1920×1080**.
 * §10.53. */
.cc-keo.rong.td-mA-hop{width:min(1240px,100%);max-width:none}

.td-mA{
  display:grid;grid-template-columns:380px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;height:100%;
}
.td-mA > .td-mA-dau,.td-mA > .td-mA-chan{grid-column:1/-1}
.td-mA > .td-cot-anh,.td-mA > .td-mA-form{min-height:0;min-width:0}

/* ── đầu hộp ── */
.td-mA-dau{
  display:flex;align-items:center;gap:var(--k2);padding:var(--k2) var(--k4);
  border-bottom:1px solid var(--vien);background:var(--nen);
}
.td-mA-ma{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:700;
  background:var(--nen-3);color:var(--chu-phu);padding:4px 9px;border-radius:5px;
}
/* Tên bộ SỬA NGAY TẠI ĐÂY — trong form không còn ô «Tên» thứ hai. */
.td-mA-ten{
  flex:1;min-width:0;font-size:var(--cx-h3);font-weight:700;color:var(--chu);
  border:0;background:none;padding:2px 4px;border-radius:var(--bo-o);
}
.td-mA-ten:focus{outline:0;background:var(--nen-phu);box-shadow:var(--net)}
.td-mA-luu{font-size:12.5px;font-weight:600;color:var(--chu-phu)}
.td-mA-luu.xong{color:var(--la-800)}
.td-mA-x{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--vien);
  background:var(--nen);color:var(--chu-phu);font-size:14px;cursor:pointer;
  position:relative;flex:0 0 auto;
}
/* Vùng bấm 44px cho ngón tay, nút vẫn vẽ 30px — nếp `.nut` của cổng. */
.td-mA-x::after{content:'';position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}

/* ── cột ảnh ── */
.td-cot-anh{
  background:var(--nen-phu);border-right:1px solid var(--vien);
  padding:var(--k3);display:flex;flex-direction:column;gap:var(--k2);
  overflow-y:auto;overflow-x:hidden;
}
.td-anh-lon{
  width:100%;aspect-ratio:3/4;max-height:420px;border-radius:12px;
  border:2px solid var(--chinh-500);overflow:hidden;position:relative;
  background:var(--nen);display:flex;align-items:center;justify-content:center;
}
.td-anh-lon img{width:100%;height:100%;object-fit:cover;display:block}
.td-anh-lon-nhan{
  position:absolute;left:8px;bottom:8px;font-family:ui-monospace,Menlo,monospace;
  font-size:12px;background:var(--nen-mo);color:var(--chu);padding:2px 7px;border-radius:6px;
}
.td-anh-lon-trong{color:var(--chu-tat);font-size:13px}
.td-mA-goi{font-size:12px;color:var(--chu-tat);margin:0}
/* 7.7c — ẩn thì ảnh ĐEN TRẮNG, cả tấm lớn lẫn mọi tấm nhỏ. Một icon góc thì
   mắt lướt qua; cả cột xám đi thì không lướt qua được. */
.td-cot-anh.td-dang-an .td-anh-lon,
.td-cot-anh.td-dang-an .td-anh-day,
.td-cot-anh.td-dang-an .td-tha{filter:grayscale(1);opacity:.6}
.td-an-bao{
  background:var(--vang-100);border:1px solid var(--vang-300);color:var(--vang-800);
  font-size:12px;border-radius:8px;padding:6px 10px;
}

/* ── cột form ── */
.td-mA-form{
  overflow:auto;padding:var(--k3) var(--k4);
  display:flex;flex-direction:column;gap:var(--k2);font-size:13px;
}
.td-mA-hang{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 12px;align-items:center}
.td-mA-nhan{font-size:13px;font-weight:600;color:var(--chu-phu);line-height:1.3}
.td-mA-nhan i{display:block;font-style:normal;font-weight:400;color:var(--chu-tat)}
.td-mA-4o{display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr) minmax(0,1fr);gap:8px}
/* Ô nhập DÀY 34px — cố ý khác mặc định 44px của cổng, để cả form vào một màn.
   Vùng bấm vẫn nới lên 44px bằng `::after`. */
/* `:not([type=checkbox]):not([type=radio])` — KHÔNG phải cho đẹp.
   Luật này đặt `height:34px; padding:0 8px; min-width:0` lên MỌI `input` trong
   cột form, và ô tích cũng là `input`: nó bị kéo cao 34px, nhét padding, méo
   thành một hình chữ nhật xám. `thu-o-tich-khong-meo.js` sinh ra đúng để bắt
   chuyện này và nó bắt được ngay lượt hồi quy đầu — bài thử soi CSS của riêng
   Đ4 thì không, vì nó chỉ hỏi «có dòng luật không». */
.td-mA-form input:not([type=checkbox]):not([type=radio]),.td-mA-form select{
  height:34px;padding:0 8px;border:1px solid var(--vien-o);border-radius:7px;
  font-size:13px;color:var(--chu);background:var(--nen);min-width:0;position:relative;
}
.td-mA-form input:not([type=checkbox]):not([type=radio]):focus,.td-mA-form select:focus{
  outline:0;border-color:var(--chinh-500);box-shadow:var(--net);
}

/* ── hộp có khung ── */
.td-mA-hop-o{border:1px solid var(--vien);border-radius:10px;padding:8px 12px;margin:0}
.td-mA-hop-o > legend{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--chu-phu);padding:0;
}
.td-mA-2hop{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── bảng tích 4 cột ── */
.td-luoi-nhom{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px 14px}
.td-nhom-ten{
  font-size:13px;font-weight:700;color:var(--chu);margin:0 0 4px;
  padding:2px 0;border-bottom:1px solid var(--vien);
}
.td-cot-tich{display:flex;flex-direction:column}
.td-o-tich{
  display:flex;align-items:center;gap:7px;min-height:28px;cursor:pointer;
  position:relative;
}
.td-o-tich input[type=checkbox]{
  width:16px;height:16px;height:16px;border-radius:0;accent-color:var(--chinh-700);flex:0 0 auto;
}
.td-o-tich > span{
  flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Mục đã ẩn vẫn hiện ra — mờ đi, kèm chữ. Giấu hẳn là sale tưởng mất mục. */
.td-o-tich.da-an > span{color:var(--chu-tat)}
.td-o-tich.da-an > span i{font-style:normal;font-size:12px}
.td-o-tich-x{
  width:22px;height:22px;border:0;border-radius:50%;background:none;
  color:var(--vien-dam);font-size:12px;cursor:pointer;flex:0 0 auto;position:relative;
}
.td-o-tich-x:hover{background:var(--loi-100);color:var(--loi-700)}
.td-them-muc{
  display:flex;gap:6px;margin-top:4px;padding-top:4px;border-top:1px dashed var(--vien);
}
.td-them-o{
  flex:1;min-width:0;height:28px;padding:0 8px;font-size:12.5px;
  border:1px solid var(--vien);border-radius:6px;background:var(--nen-phu);color:var(--chu);
}
.td-them-nut{
  width:28px;height:28px;flex:0 0 auto;border:1px solid var(--chinh-300);
  background:var(--chinh-100);color:var(--chinh-800);font-size:14px;font-weight:700;
  border-radius:6px;cursor:pointer;
}

/* ── hộp giá ── */
.td-mA-gia-hang{display:flex;gap:6px;align-items:center;margin-top:6px}
.td-mA-gia-hang select{flex:1;min-width:0}
#td-o-gia{display:inline-flex;gap:4px;align-items:center}
#td-o-gia input{width:110px}
#td-o-gia i{font-style:normal;color:var(--chu-phu)}

/* ── hộp trạng thái ── */
.td-mA-nhan-o{display:block;font-size:12px;color:var(--chu-phu);margin:6px 0 2px}
.td-mA-tich{display:flex;align-items:center;gap:7px;min-height:28px;cursor:pointer;font-size:13px}
.td-mA-tich input{width:16px;height:16px;border-radius:0;accent-color:var(--chinh-700);flex:0 0 auto}
.td-mA-tich i{font-style:normal;color:var(--chu-tat)}

/* ── hàng số đo ── */
.td-mA-do{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--chu-phu)}
.td-mA-do input{width:64px}
.td-mA-do i{font-style:normal}
.td-mA-cach{width:12px}
.td-mA-do small{color:var(--chu-tat);font-size:12px}

/* ── chân hộp ── */
.td-mA-chan{
  display:flex;align-items:center;gap:var(--k3);padding:var(--k2) var(--k4);
  border-top:1px solid var(--vien);background:var(--nen);
}
.td-mA-chu{
  border:0;background:none;font-size:12.5px;font-weight:600;color:var(--chu-phu);
  cursor:pointer;padding:6px 2px;position:relative;
}
.td-mA-chu.nguy{color:var(--loi-700)}
.td-mA-chu::after{content:'';position:absolute;top:50%;left:50%;
  height:44px;width:100%;transform:translate(-50%,-50%)}
.td-mA-day{flex:1}

/* Hẹp thì xếp dọc. Ép hai cột vào dưới 1100px là cột phải còn ~520 và bảng
   tích vỡ thành 2 cột, form dài gấp đôi — đúng thứ Mẫu A sinh ra để tránh. */
@media (max-width:1100px){
  .td-mA{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr) auto}
  .td-mA-2hop{grid-template-columns:1fr}
  .td-mA-4o{grid-template-columns:1fr 1fr}
}
.td-mA-radio{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
.td-mA-radio input[type=radio]{width:16px;height:16px;accent-color:var(--chinh-700);flex:0 0 auto}
.td-mA-radio label{display:flex;align-items:center;gap:6px;min-height:28px;cursor:pointer;font-size:13px}

/* VÙNG BẤM 44px — theo ĐÚNG nếp `.nut` của cổng đã dùng từ trước: nới bằng
   `::after` và **chỉ dưới `pointer:coarse`**. Trên máy tính có chuột thì nút
   vẽ 28–34px là đủ và đúng bản vẽ («ô nhập dày 34px — cố ý»); ép 44px khắp
   nơi ở đó là làm form dài thêm một màn, đúng thứ Mẫu A sinh ra để tránh.
   Đo 04/09 bằng Chrome thật: thiếu khối này thì bốn loại nút của màn Tủ đồ
   (✕ ảnh · ✕ ẩn mục · ô «+ thêm mục» · select) đều dưới ngưỡng khi chạm tay. */
@media (pointer:coarse){
  .td-o-tich,.td-mA-tich,.td-mA-radio label{min-height:44px}
  .td-o-tich-x{position:relative}
  .td-o-tich-x::after{content:'';position:absolute;top:50%;left:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
  .td-them-o,.td-mA-form select,
  .td-mA-form input:not([type=checkbox]):not([type=radio]){min-height:44px}
  /* Nút ＋ vẽ vuông 28px cho gọn cuối cột — nới vùng bấm bằng `::after`, đúng
     nếp `.nut`, thay vì phình nút ra 44px làm hàng cuối cột lệch hẳn. */
  .td-them-nut{min-height:44px;position:relative}
  .td-them-nut::after{content:'';position:absolute;top:50%;left:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
  /* 01/10: KHÔNG đổi sang relative — nút ✕ là absolute ở góc ảnh; relative làm nó rơi xuống DƯỚI ảnh, nằm ngoài khung dải
     cuộn ngang và bị cắt nửa (ảnh 04-ngan-sua-dau.png). Absolute vẫn là khối chứa cho ::after 44 px. */
  .td-anh-day .nut-xoa-anh{position:absolute}
  .td-anh-day .nut-xoa-anh::after{content:'';position:absolute;top:50%;left:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
}

/* =========================================================================
   KHUNG MÀN SALE — dựng theo gói thiết kế `ban-giao/` (10/09, anh Huy đặt)

   CHỈ áp cho ghế sale, qua lớp `body.sale-moi`. Gói thiết kế nói rõ ba lần
   đây là «màn Sale tư vấn»; điều phối, CTV và photo giữ nguyên khung cũ —
   thanh dọc này dựng cho đúng ba mục của sale, vai khác có nhiều mục hơn.

   KHÔNG đẻ thanh điều hướng thứ hai. `#tab` vốn đã dựng từ bảng vai
   (`TAB_VAI` trong `loi/kha-nang.js`); ở đây chỉ XOAY nó thành cột dọc. Dựng
   một thanh mới là có hai chỗ khai danh sách màn, và sớm muộn hai chỗ ấy kể
   hai chuyện khác nhau — đúng bệnh đã ghi ngay trong `veThanhTab`.
   ========================================================================= */

/* ── đầu trang 52px ── */
body.sale-moi .dau{
  height:52px;padding:0 14px;gap:12px;background:var(--nen);backdrop-filter:none;z-index:30;
}
body.sale-moi .logo{height:24px;width:24px;object-fit:contain}
.ten-he{display:none}
body.sale-moi .ten-he{display:block;font-size:15px;letter-spacing:-.01em;flex:0 0 auto}
/* Huy hiệu số trên chuông không được tràn ra ngoài đầu trang 52px. */
body.sale-moi .chuong{position:relative;flex:0 0 auto}
body.sale-moi .chuong .chuong-dem{top:-5px;right:-5px}
body.sale-moi #nut-ra{height:36px;flex:0 0 auto}
body.sale-moi .vai{letter-spacing:.08em;padding:4px 8px;border-radius:5px}
body.sale-moi .ten-toi{margin-left:0;font-size:13px}
/* Chấm Sync đẩy sang phải — thay cho `margin-left:auto` của tên, vì bản thiết
   kế xếp tên NGAY SAU huy hiệu vai rồi mới tới khoảng trống. */
body.sale-moi .den-sync{margin-left:auto}
body.sale-moi .chuong{width:36px;height:36px;border-radius:8px}

/* ── thanh dọc 92px ── */
body.sale-moi .tab{
  position:fixed;left:0;top:52px;width:92px;height:calc(100vh - 52px);
  flex-direction:column;gap:4px;padding:12px 8px;overflow:visible;
  border-bottom:0;border-right:1px solid var(--vien);background:var(--nen);z-index:20;
}
body.sale-moi .tab button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:10px 4px;border:0;border-bottom:0;border-radius:9px;
  font-size:12px;font-weight:600;line-height:1.2;white-space:normal;text-align:center;
  /* 22/09: mục KHÔNG có icon ảnh (📦 Hàng in · 📥 Nhận Ảnh In của Hướng 4) chỉ cao 34 px
     — dưới ngưỡng 44 px đã đo trên điện thoại. Đặt sàn ở đây, không đợi ai vẽ icon. */
  min-height:52px;
}
body.sale-moi .tab button:hover:not(.kha-tat){background:var(--chinh-100)}
body.sale-moi .tab button.on{background:var(--chinh-100);color:var(--chinh-800)}
body.sale-moi .tab button img{width:22px;height:22px;object-fit:contain;display:block}
body.sale-moi .tab .tab-ban{
  margin-top:auto;font-size:10.5px;color:var(--chu-tat);text-align:center;line-height:1.4;
}

/* ── thân ── */
body.sale-moi main#than{
  max-width:none;margin:0 0 0 92px;padding:18px 20px 40px;min-width:0;
}
body.sale-moi #ben-trong{background:var(--nen-phu);min-height:100vh}
/* Chân trang studio: bản thiết kế bỏ khỏi vùng nội dung — nó là một dải trắng
   chiếm cả bề ngang cho một câu người ta đã đọc từ ngày đầu. GIỮ trong DOM,
   chỉ thôi vẽ: câu cảnh báo vẫn còn ở màn nhập mã (`#chan-cua`), nơi nó thật
   sự cần — lúc người lạ đang đứng trước cửa. */
body.sale-moi #chan-trong{display:none}

/* ── điện thoại: thanh dọc thành thanh đáy ──
   Ngưỡng 900px là ngưỡng của gói thiết kế, không phải 560px của khung cũ. */
@media(max-width:899px){
  /* ĐẦU TRANG 390px — đo 10/09: hàng này rộng 438px, tức TRÀN 48px, và vì nó
     tràn nên CẢ TRANG rộng 438px: mọi màn của sale đều kéo ngang được, thanh
     đáy cũng dài quá khung. Gốc là `flex-wrap:nowrap` + `margin-left:auto` +
     mấy ô chữ không được phép co (mặc định `min-width:auto`).
     Chữa: cho hai ô chữ co được (`min-width:0`) và cắt bằng ba chấm; bỏ
     `margin-left:auto` (lề tự động cộng thêm vào phần tràn chứ không đẩy ai).
     Và gỡ hai thứ khung CŨ đặt cho chấm Sync dưới 820px: `flex-basis:100%`
     (một mình nó đòi trọn 390px trên hàng `nowrap`) cùng `order:3` (đẩy chấm
     ra SAU chuông, tức tách khỏi tên người đang trực). */
  body.sale-moi .dau{height:56px;gap:8px;flex-wrap:nowrap;row-gap:0;overflow:hidden}
  body.sale-moi .logo{height:26px;width:26px;flex:0 0 auto}
  body.sale-moi .vai{display:none}
  body.sale-moi .ten-he,
  body.sale-moi .ten-toi{
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  body.sale-moi .ten-he{flex:1 1 auto}
  body.sale-moi .ten-toi{display:block;font-size:12px;margin-left:0;flex:0 1 auto}
  /* Chấm Sync: chữ tắt đi (font-size:0) thì phải TỰ ĐẶT kích thước VÀ tự tô
     nền — bản gốc chỉ đổi `color`, mà chữ đã tắt thì màu chữ không hiện ra
     đâu cả: đúng 12px vuông trong suốt, không ai thấy đèn báo. `currentColor`
     kéo lại đúng ba màu của ba mức (xanh lá · vàng chờ · coral hỏng). */
  body.sale-moi .den-sync{
    margin-left:0;margin-right:0;font-size:0;padding:0;gap:0;flex:0 0 auto;order:0;
    width:12px;height:12px;border-radius:50%;overflow:hidden;background:currentColor;
  }
  /* Chip «☁️ Đang ở trạm mây» rời khỏi đầu trang 390px: hai chip trạng thái
     cạnh nhau trên một hàng 56px thì cái nào cũng chỉ còn là một chấm, mà
     hai chấm khác màu không nói được gì. Giữ chấm Sync (thứ hay đổi), bỏ
     chip nơi-đang-đứng (thứ gần như không đổi trong một phiên). */
  body.sale-moi .bang-noi{display:none}
  body.sale-moi .chuong{width:44px;height:44px;border-radius:11px;margin-left:0;flex:0 0 auto}
  /* Nút «Ra» Ở LẠI đầu trang điện thoại (12/09 khuya — anh Huy: «truy cập mã
     bằng điện thoại không có nút logout để thoát mã»). Khung 10/09 giấu nó
     để hàng 390px khỏi tràn — nhưng giấu nút thoát là nhốt người ta trong mã
     vừa gõ: máy mượn, máy chung, đổi sang mã khác đều không có đường ra ngoài
     xoá dữ liệu trình duyệt. Thu nhỏ chứ không giấu: 36px cao, tối thiểu
     44px rộng cho ngón tay, chữ 12px; hai ô chữ bên trái vốn đã co được
     (min-width:0 + ba chấm) nên hàng không tràn. */
  body.sale-moi #nut-ra{display:inline-flex;align-items:center;justify-content:center;
    height:36px;min-width:44px;padding:0 10px;flex:0 0 auto;font-size:12px;font-weight:600}

  body.sale-moi .tab{
    left:0;right:0;top:auto;bottom:0;width:auto;height:66px;
    flex-direction:row;gap:0;padding:0;border-right:0;border-top:1px solid var(--vien);z-index:40;
  }
  body.sale-moi .tab button{flex:1;gap:3px;border-radius:0;background:none}
  body.sale-moi .tab button.on{background:none;color:var(--chinh-800)}
  body.sale-moi .tab button img{width:24px;height:24px;opacity:.45}
  body.sale-moi .tab button.on img{opacity:1}
  body.sale-moi .tab .tab-ban{display:none}

  body.sale-moi main#than{margin-left:0;padding:14px 14px 78px}
}

/* ── MÀN CONCEPT của sale (gói thiết kế `ban-giao/`, 10/09) ── */
body.sale-moi .cc-hang-dau{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
}
body.sale-moi .cc-ten-man{
  display:flex;align-items:center;gap:8px;font-size:19px;margin:0;
  letter-spacing:-.01em;flex:0 0 auto;
}
body.sale-moi .cc-ten-man img{width:22px;height:22px;object-fit:contain}
body.sale-moi .cc-day{flex:1}

/* Cụm chọn kiểu segmented — hai nút NẰM TRONG một rãnh, không phải hai nút rời.
   Rãnh nói cho mắt biết đây là «một trong hai», thứ hai nút rời không nói được. */
body.sale-moi .cc-seg{display:flex;gap:2px;padding:3px;background:var(--nen-3);border-radius:9px}
body.sale-moi .cc-seg button{
  height:32px;padding:0 14px;border:0;border-radius:7px;
  font-size:13px;font-weight:600;color:var(--chu-phu);background:none;
}
body.sale-moi .cc-seg button.dang{background:var(--nen);color:var(--chinh-800)}

body.sale-moi .cc-chip-nhac{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--vang-800);background:var(--vang-100);border:1px solid var(--vang-300);
  border-radius:7px;padding:5px 10px;
}
body.sale-moi .cc-chip-nhac:hover{background:var(--vang-50)}

/* Lưới hai cột. Cột trái DÍNH và cuộn riêng: thêm bao nhiêu mục cũng không đẩy
   lưới thẻ xuống dưới mép màn. */
body.sale-moi .cc-khung{grid-template-columns:236px 1fr;gap:16px}
/* Ô lưới mặc định KHÔNG co dưới min-content của ruột nó (`min-width:auto`).
   Đo 10/09 trên khung 390px: cột phải đòi 480px vì bên trong có một dòng
   không xuống hàng được, thế là CẢ TRANG rộng 508px và cuộn ngang — mà thủ
   phạm không phải cái thò ra xa nhất, nên nhìn ảnh chụp không ra. */
body.sale-moi .cc-khung>*{min-width:0}
/* NÚT CHÍNH của màn sale: bản thiết kế 10/09 dùng nền `--chinh-800` chữ
   trắng (4,7:1) thay cho nút pastel chữ xanh đen của khung cũ. Cùng một
   token, chỉ đổi vai: nền pastel `--chinh-500` vẫn là nền nhấn ở chỗ khác,
   nhưng nút BẤM VÀO ĐỂ LÀM thì cần đậm hơn hẳn mọi thứ quanh nó.
   Rê chuột và bấm giữ dùng `filter` chứ không khai mã màu mới — thêm một mã
   màu cứng vào file này là phá đúng luật bảng màu của gói bàn giao. */
body.sale-moi .nut.chinh{background:var(--chinh-800);border-color:var(--chinh-800);color:var(--chu-nguoc)}
body.sale-moi .nut.chinh:hover:not(:disabled){background:var(--chinh-800);border-color:var(--chinh-800);filter:brightness(.93)}
body.sale-moi .nut.chinh:active:not(:disabled){filter:brightness(.88)}
/* Nút phụ rê chuột: bản thiết kế dùng nền `--chinh-100` viền `--chinh-500` —
   đậm hơn `--chinh-50` của khung cũ đúng một nấc, đủ để thấy con trỏ đang đứng
   ở nút nào trên một màn toàn thẻ trắng.
   (Không gõ mã màu vào đây, kể cả trong chú thích: bộ dò của
   `thu-man-nhap-bo-tu-do.js` quét cả chú thích — và nó quét đúng, vì mã màu
   trong chú thích là mã màu sẽ bị chép ra chỗ dùng.) */
body.sale-moi .nut.phu:hover:not(:disabled){background:var(--chinh-100);border-color:var(--chinh-500)}
body.sale-moi .cc-cot{
  position:sticky;top:82px;padding:10px;border-radius:11px;
  max-height:calc(100vh - 100px);overflow:auto;
}
body.sale-moi .cc-cot-dau{display:flex;align-items:center;gap:7px;padding:2px 4px 8px}
body.sale-moi .cc-cot-dau h3{margin:0;padding:0;font-size:12px;letter-spacing:.07em}
body.sale-moi .cc-nut-nho{
  width:28px;height:28px;min-height:28px;border:1px solid var(--vien-dam);
  border-radius:7px;background:var(--nen);font-size:14px;color:var(--chinh-800);padding:0;
}
body.sale-moi .cc-nut-nho:hover{background:var(--chinh-100);border-color:var(--chinh-500)}
body.sale-moi .cc-muc-dong{min-height:38px;height:38px;padding:0 9px;border-radius:8px;font-size:13.5px}
body.sale-moi .cc-muc-dong small{background:var(--nen);border-radius:5px;padding:1px 5px;font-size:11.5px}

/* Nút hỏi: bấm mới hiện, và hộp chú thích NỔI LÊN chứ không đẩy nội dung. */
body.sale-moi .cc-hoi{position:relative;display:inline-block}
body.sale-moi .cc-hoi>summary{
  width:18px;height:18px;min-height:18px;border-radius:50%;border:1px solid var(--vien-dam);
  color:var(--chu-phu);font-size:11px;line-height:16px;text-align:center;cursor:pointer;
  list-style:none;display:block;
}
body.sale-moi .cc-hoi>summary::-webkit-details-marker{display:none}
body.sale-moi .cc-hoi-noi{
  position:absolute;top:24px;left:0;z-index:25;display:block;width:252px;
  max-width:calc(100vw - 40px);
  padding:10px 12px;background:var(--nen);border:1px solid var(--vien-dam);
  border-radius:9px;box-shadow:var(--bong-2);
  font-size:12px;font-weight:400;color:var(--chu-phu);line-height:1.6;
}
/* Đóng thì THÔI DỰNG hẳn. `display:block` ở trên đè lên cách trình duyệt giấu
   ruột <details>, nên hộp đóng vẫn chiếm chỗ trong bố cục — đo 10/09 thấy ba
   hộp cùng thò ra ngoài khung 390px trong khi chỉ một cái đang mở. */
body.sale-moi .cc-hoi:not([open])>.cc-hoi-noi{display:none}

/* ĐIỆN THOẠI: hộp chú thích 252px neo `left:0` vào một nút ? nằm ở giữa hàng
   tiêu đề thì mép phải của nó ra tận 540px — trang 390px cuộn ngang được.
   Đổi thành DẢI NỔI ngang màn, đậu ngay trên thanh đáy: không bao giờ tràn,
   và đọc dễ hơn hẳn một cột hẹp chen giữa các thẻ. */
@media(max-width:899px){
  body.sale-moi .cc-hoi-noi{
    position:fixed;top:auto;bottom:78px;left:12px;right:12px;width:auto;
    max-width:none;z-index:60;box-shadow:var(--bong-3);font-size:13px;
  }
}

/* Thẻ mục: BA TẦNG có viền ngăn, không phải một khối phẳng. Tầng giữa là link
   gửi khách — thứ sale chép nhiều nhất, nên nó có nền riêng để mắt tìm ra ngay. */
body.sale-moi .cc-the-muc{background:var(--nen);border:1px solid var(--vien);border-radius:11px}
body.sale-moi .cc-muc-dau{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 14px;border-bottom:1px solid var(--vien);
}
body.sale-moi .cc-muc-dau>b{font-size:16px;letter-spacing:-.01em}
/* Số concept của mục đang mở — đẩy cụm nút sang phải, và KHÔNG xuống dòng.
   Đặt bằng lớp chứ không bằng style nội dòng: dải cuộn ngang trên điện thoại
   cần đè lại `flex`, mà style nội dòng thì không media query nào đè được. */
.cc-muc-dem{flex:1;white-space:nowrap}
body.sale-moi .cc-muc-link{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;
  background:var(--nen-phu);border-bottom:1px solid var(--vien);
  font-size:12px;color:var(--chu-phu);
}
body.sale-moi .cc-muc-link code{font-family:var(--font-so);font-size:12px;color:var(--chinh-800)}
body.sale-moi .cc-the-muc .cc-luoi{
  padding:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;
}
body.sale-moi .cc-the-muc .cc-the{aspect-ratio:3/4;border-radius:10px}
body.sale-moi .cc-the-muc .cc-the .cc-ma{font-size:12px;padding:7px 9px}
body.sale-moi .cc-them-o{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  aspect-ratio:3/4;border:1px dashed var(--vien-dam);border-radius:10px;
  background:var(--nen-phu);color:var(--chu-phu);font-size:12.5px;
}
body.sale-moi .cc-them-o span{font-size:20px}
body.sale-moi .cc-them-o:hover{border-color:var(--chinh-500);background:var(--chinh-100)}

/* ĐIỆN THOẠI — cột danh mục thành DẢI CHIP CUỘN NGANG dính dưới đầu trang.
   Cột dọc trên khung 390px ăn nửa màn hình rồi mới tới lưới ảnh: mở tab ra là
   thấy danh sách mục chứ không thấy concept nào. Dải chip chiếm 56px, dính lại
   nên đổi mục lúc nào cũng với tới, và thêm bao nhiêu mục cũng chỉ cuộn ngang.
   Hai nút ▲▼ đổi thứ tự rời khỏi dải (việc của máy tính, không phải của ngón
   tay đang lướt) — trên máy tính vẫn nguyên. */
@media(max-width:899px){
  body.sale-moi .cc-khung{grid-template-columns:1fr;gap:0}
  body.sale-moi .cc-seg{width:100%}
  body.sale-moi .cc-seg button{flex:1;min-height:44px}

  body.sale-moi .cc-cot{
    position:sticky;top:56px;z-index:20;max-height:none;overflow:visible;
    border:0;border-radius:0;padding:8px 0 6px;margin:0 -14px 10px;
    background:var(--nen-phu);border-bottom:1px solid var(--vien);
  }
  body.sale-moi .cc-cot-dau{padding:0 14px 6px}
  body.sale-moi #cc-ds-muc{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 14px 2px}
  body.sale-moi #cc-ds-muc::-webkit-scrollbar{display:none}
  body.sale-moi #cc-ds-muc>div{flex:0 0 auto}
  /* Cột ▲▼ đổi thứ tự mục chỉ có trên máy tính */
  body.sale-moi .cc-muc-sap{display:none}

  body.sale-moi .cc-muc-dong{
    height:44px;min-height:44px;border-radius:22px;padding:0 14px;font-size:14px;
    border:1px solid var(--vien-dam);background:var(--nen);width:auto;gap:7px;
  }
  body.sale-moi .cc-muc-dong.dang{
    background:var(--chinh-100);border-color:var(--chinh-500);color:var(--chinh-800);font-weight:600;
  }
  body.sale-moi .cc-muc-dong span{white-space:nowrap}
  body.sale-moi #cc-o-tao-muc{padding:0 14px}

  /* Hàng tiêu đề: tên màn và dòng đếm xuống hàng riêng, cụm nút thành DẢI CUỘN
     NGANG (bản thiết kế: «nhóm hành động cũng cuộn ngang»). Bốn nút xuống hai
     dòng như bản trước ăn 100px chỉ để đặt bốn nút ít bấm. */
  body.sale-moi .cc-hang-dau{gap:8px;flex-wrap:wrap}
  body.sale-moi .cc-hang-dau>small.phu{flex:1 1 100%;order:1}
  body.sale-moi .cc-hang-dau>.cc-day{display:none}
  body.sale-moi .cc-hang-dau>.nut,
  body.sale-moi .cc-hang-dau>span:not(.cc-day){order:2;flex:0 0 auto;min-height:42px}

  /* Hàng nút của MỘT MỤC đang mở (Concept · Tủ đồ) cũng cuộn ngang */
  body.sale-moi .cc-muc-dau,
  body.sale-moi .cc-chinh>.the>div:first-child{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  }
  body.sale-moi .cc-muc-dau::-webkit-scrollbar,
  body.sale-moi .cc-chinh>.the>div:first-child::-webkit-scrollbar{display:none}
  body.sale-moi .cc-muc-dau>*,
  body.sale-moi .cc-chinh>.the>div:first-child>*{flex:0 0 auto}
  body.sale-moi .cc-muc-dau>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.sale-moi .cc-muc-dem{flex:0 0 auto}
}

/* ── MÀN TỦ ĐỒ của sale (gói thiết kế `ban-giao/`, 10/09) ── */

/* SÁU CHIP TRẠNG THÁI — vừa là số liệu vừa là nút lọc, nằm thẳng trên màn thay
   cho khối «Bảng số» phải bấm mới mở. Ô vuông màu 8px nói trạng thái bằng MÀU,
   con số nói bằng SỐ; hai kênh cho cùng một tin, mắt bắt được kênh nào cũng xong. */
body.sale-moi .td-hang-chip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
body.sale-moi .td-chip{
  display:inline-flex;align-items:center;gap:7px;height:40px;min-height:40px;
  padding:0 12px;border:1px solid var(--vien);border-radius:9px;
  background:var(--nen);font-size:12.5px;color:var(--chu-phu);
}
body.sale-moi .td-chip i{width:8px;height:8px;border-radius:2px;flex:0 0 auto;display:block}
body.sale-moi .td-chip b{font-size:14px;color:var(--chu)}
body.sale-moi .td-chip:hover{border-color:var(--chinh-500);background:var(--chinh-100)}
body.sale-moi .td-chip.trong{opacity:.62}
body.sale-moi .td-chip.dang{border-color:var(--chinh-800);background:var(--chinh-100);color:var(--chinh-800)}
body.sale-moi .td-chip-xanh i{background:var(--la-500)}
body.sale-moi .td-chip-lam  i{background:var(--chinh-300)}
body.sale-moi .td-chip-vang i{background:var(--vang-500)}
body.sale-moi .td-chip-cam  i{background:var(--coral-300)}
body.sale-moi .td-chip-do   i{background:var(--coral-500)}
body.sale-moi .td-chip-xam  i{background:var(--vien-dam)}
/* Chip «Sẵn sàng» ĐANG CÓ HÀNG mặc nền lá — đó là con số người ta liếc tìm
   đầu tiên mỗi sáng, cho nó nổi hơn năm chip kia. */
body.sale-moi .td-chip-xanh:not(.trong):not(.dang){
  background:var(--la-100);border-color:var(--la-300);color:var(--la-800);
}
body.sale-moi .td-chip-xanh:not(.trong):not(.dang) b{color:var(--la-800)}

/* Cột danh mục: dính, cuộn riêng, có ô lọc. Thêm bao nhiêu mục cũng không đẩy
   lưới trang phục xuống dưới mép màn — phản hồi của anh Huy về màn cũ. */
body.sale-moi .cc-ben{
  position:sticky;top:82px;background:var(--nen);border:1px solid var(--vien);
  border-radius:11px;padding:10px;max-height:calc(100vh - 100px);overflow:auto;
}
body.sale-moi .cc-ben-dau{display:flex;align-items:center;gap:8px;padding:2px 4px 8px}
body.sale-moi .cc-ben-dau b{font-size:11px;letter-spacing:.07em;color:var(--chu-phu)}
body.sale-moi .td-loc-muc{
  width:100%;height:34px;min-height:34px;padding:0 9px;border:1px solid var(--vien);
  border-radius:7px;background:var(--nen-phu);font-size:12.5px;margin-bottom:8px;
}
body.sale-moi .td-muc-hang{display:flex;align-items:center;gap:3px}

/* Thanh công cụ + lưới thẻ — cùng khuôn với Concept, thêm chấm trạng thái. */
body.sale-moi .td-thanh{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
body.sale-moi .td-thanh #td-tim{flex:1;min-width:200px;height:38px;min-height:38px;
  padding:0 12px;border:1px solid var(--vien-o);border-radius:8px;font-size:13.5px}
body.sale-moi .td-thanh select{height:38px;min-height:38px;padding:0 10px;
  border:1px solid var(--vien-o);border-radius:8px;font-size:13.5px}
body.sale-moi .cc-chinh .cc-luoi{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
body.sale-moi .cc-chinh .cc-the{aspect-ratio:3/4;border-radius:10px}
body.sale-moi .cc-chinh .cc-the .cc-ma{font-size:12px;padding:7px 9px}
body.sale-moi .td-cham{
  position:absolute;top:7px;left:7px;width:9px;height:9px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.8);
}

/* ── Ngăn kéo phải dùng chung: đầu trang khách · lịch sử ── */
.td-keo-phu{display:flex;flex-direction:column}
.td-keo-dau{
  display:flex;align-items:center;gap:var(--k2);padding:var(--k3) var(--k4);
  border-bottom:1px solid var(--vien);background:var(--nen);flex:0 0 auto;
}
.td-keo-dau b{flex:1;font-size:var(--cx-to)}
.td-keo-than{padding:var(--k4);overflow:auto;flex:1 1 auto;min-height:0}
/* Nhật ký vào ngăn kéo thì ĐẦU NGĂN đã mang tên rồi — khối gập bên trong đừng
   nhắc lại «📜 Lịch sử chỉnh sửa» lần thứ hai ngay dưới nó. Ruột giữ nguyên,
   chỉ thôi vẽ cái tay cầm: `tdNhatKy()` còn dùng ở chỗ khác (khung sửa một bộ)
   nơi nó vẫn phải gập được. */
.td-keo-than>.td-nk>summary{display:none}
/* Hàng nhật ký: giờ một cột hẹp, phần còn lại một cột — mắt dò theo mốc giờ
   nhanh hơn hẳn khi cột giờ thẳng hàng. Dưới 640px đã có luật cho xuống dòng. */
.td-keo-than .td-nk-ds li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:2px 10px}
.td-keo-than .td-nk-luc{flex:none}
.td-nk-noi{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;min-width:0;flex:1 1 0}
@media(max-width:899px){
  .td-keo-than .td-nk-ds li{grid-template-columns:1fr}
}

@media(max-width:899px){
  body.sale-moi .td-hang-chip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px 12px;padding:0 14px}
  body.sale-moi .td-hang-chip::-webkit-scrollbar{display:none}
  body.sale-moi .td-chip{height:44px;min-height:44px;border-radius:11px;flex:0 0 auto}

  /* Cột danh mục thành DẢI CHIP CUỘN NGANG, dính dưới đầu trang — cùng cách
     đã làm cho Concept. Khối này PHẢI nằm sau khối Concept trong file: hai
     khối cùng độ ưu tiên, khối sau thắng, và luật `.cc-ben` của máy tính lại
     nằm ngay trên đây. */
  body.sale-moi .cc-ben{
    position:sticky;top:56px;z-index:20;max-height:none;overflow:visible;
    border:0;border-radius:0;padding:8px 0 6px;margin:0 -14px 10px;
    background:var(--nen-phu);border-bottom:1px solid var(--vien);
  }
  body.sale-moi .cc-ben-dau{padding:0 14px 6px}
  body.sale-moi .td-loc-muc{margin:0 14px 6px;width:calc(100% - 28px)}
  /* «🧺 Tất cả trang phục» đứng ngoài danh sách mục — kéo nó vào cùng một dải */
  body.sale-moi .td-dai-muc{display:flex;gap:6px;align-items:center;overflow:hidden}
  body.sale-moi .td-dai-muc>.cc-muc-dong{flex:0 0 auto;margin-left:14px}
  body.sale-moi #td-ds-muc{
    display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
    padding:0 14px 2px;flex:1 1 auto;min-width:0;
  }
  body.sale-moi #td-ds-muc::-webkit-scrollbar{display:none}
  body.sale-moi #td-ds-muc>div{flex:0 0 auto}
  body.sale-moi #td-ds-muc .nut.mo.nho{display:none}

  /* Thanh công cụ: ô tìm trọn một dòng (gõ vào đó nhiều nhất), ô chọn trạng
     thái và nút thêm chia đôi dòng dưới — thay cho ba dòng full chiều ngang
     chỉ để đặt ba thứ. */
  body.sale-moi .td-thanh{flex-wrap:wrap}
  body.sale-moi .td-thanh #td-tim{flex:1 1 100%;max-width:none;height:46px;min-height:46px}
  body.sale-moi .td-thanh select{flex:1 1 0;min-width:0;height:46px;min-height:46px}
  body.sale-moi .td-thanh #td-them{flex:1 1 0;min-height:46px}
  /* Không cần `width:100%!important` ở đây: ngăn kéo đã mang style nội dòng
     `width:min(460px,100%)`, mà `100%` của một hộp `position:fixed` chính là
     bề ngang khung nhìn — 390px thì ra đúng 390px. Thêm `!important` là tự
     đè chính mình, đúng thứ `thu-giao-dien.js` canh (bảng màu 18/08 sinh ra
     để dọn 34 lần như vậy). */
}

/* ── MÀN «GIAO DIỆN TRANG KHÁCH» của sale (gói thiết kế `ban-giao/`, 10/09) ──

   Trước hôm nay màn này là SÁU THẺ XẾP DỌC, thẻ nào cũng kéo hết chiều ngang:
   trên màn 1400px là một cột chữ chạy dài, nửa phải trống trơn, phải cuộn ba
   màn mới hết. Bản thiết kế xếp lại thành LƯỚI THẺ tự xuống dòng — thẻ «bộ áo
   theo mùa» chiếm cả hàng vì bên trong nó có hai cột, bốn thẻ còn lại tự nhét.

   MỘT MÃ HAI DÁNG: mỗi thẻ là một <details>. Trên máy tính CSS khoá nút gập
   (summary không bấm được, mũi ▾ ẩn) nên trông đúng là thẻ tĩnh; dưới 899px
   mở khoá, thành danh sách thẻ gập như bản điện thoại. Không dựng hai bộ mã. */
.gk-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;align-items:start}
.gk-the{background:var(--nen);border:1px solid var(--vien);border-radius:11px}
.gk-the>summary{
  display:flex;align-items:center;gap:7px;padding:14px;
  font-size:15px;font-weight:700;list-style:none;
}
.gk-the>summary::-webkit-details-marker{display:none}
.gk-the>summary>img{width:18px;height:18px;object-fit:contain;display:block;flex:0 0 auto}
.gk-mui{margin-left:auto;color:var(--chu-tat);font-size:13px;display:none}
.gk-noi{padding:0 14px 14px}

/* Trên máy tính thẻ không gập được — nhưng nút ? bên trong summary thì PHẢI
   bấm được, nên trả lại tay bấm riêng cho nó. */
@media(min-width:900px){
  .gk-the>summary{pointer-events:none}
  .gk-the>summary .cc-hoi{pointer-events:auto}
}

/* Thẻ «bộ áo theo mùa» gói ba khối. Trên máy tính nó là MỘT thẻ trắng chiếm cả
   hàng; dưới 899px `display:contents` tháo nó ra, ba khối con rơi thẳng vào
   lưới thành ba thẻ gập riêng — đúng bản điện thoại, không cần mã thứ hai. */
.gk-mua{grid-column:1/-1;background:var(--nen);border:1px solid var(--vien);border-radius:11px;padding:14px}
.gk-mua>.gk-the{border:0;border-radius:0;background:none}
.gk-mua>.gk-the>summary{padding:0;margin-bottom:10px}
.gk-mua>.gk-the>.gk-noi{padding:0}
.gk-mua>.gk-the+.gk-the{border-top:1px solid var(--vien);margin-top:12px;padding-top:10px}
/* Khối CHIẾN DỊCH: chữ nhỏ hơn, xám — nó là việc phụ, không phải tiêu đề ngang
   hàng với hai khối trên. */
.gk-the.gk-cd>summary{font-size:13px;font-weight:600;color:var(--chu-phu)}

/* Hai cột trong thẻ mùa: trái là mặc định cả hệ thống, phải là riêng từng mục */
.gk-hai{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gk-nhan{font-size:12px;letter-spacing:.07em;color:var(--chu-phu);font-weight:600;margin:0 0 5px}
.gk-hang{display:flex;gap:6px;align-items:center}
.gk-hang>select{flex:1;min-width:0}
.gk-cot{display:flex;flex-direction:column;gap:6px}
.gk-ten-muc{
  flex:0 0 116px;display:flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;overflow:hidden;white-space:nowrap;
}
.gk-ten-muc>img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--vien);flex:0 0 auto}
.gk-ten-muc>span{overflow:hidden;text-overflow:ellipsis}
.gk-o-vuong{width:36px;height:36px;min-height:36px;padding:0;flex:0 0 auto}

/* Hàng riêng-từng-mục trên máy tính: nhãn 116px · ô chọn co giãn · ⬆ Icon · 👁.
   Thứ tự trong mã là nhãn → mấy nút → ô chọn (để điện thoại xếp được thành hai
   dòng mà không phải dựng lại markup); ở đây `order` kéo ô chọn về đúng chỗ. */
@media(min-width:900px){
  .gk-hang-muc{display:flex;align-items:center;gap:6px}
  .gk-hang-muc>.gk-dau-muc{display:contents}
  .gk-hang-muc .gk-ten-muc{order:1}
  .gk-hang-muc>select{order:2;flex:1;min-width:0;height:36px;min-height:36px}
  .gk-hang-muc .nut{order:3}
}

/* Ô nhập trong màn này thấp hơn ô chuẩn 44px — bản thiết kế chốt 38px cho máy
   tính (nhiều ô cùng lúc, 44px làm thẻ cao quá) và nới lại 46px trên điện
   thoại, nơi ngón tay mới là thước đo. */
.gk-noi input:not([type=checkbox]):not([type=range]),
.gk-noi select{height:38px;min-height:38px;font-size:13.5px}
.gk-noi label>.gk-nhan{margin-bottom:3px}
.gk-o{display:block}
.gk-o>input{width:100%;margin-top:3px}
.gk-doc{display:grid;gap:9px}
/* Ô «máy tự đếm» không sửa được — phải TRÔNG như không sửa được, chứ không
   phải một ô trắng y hệt ba ô bên cạnh rồi gõ vào mới biết. */
.gk-noi input:disabled{background:var(--nen-3);color:var(--chu-mo);border-color:var(--vien)}
.gk-cd-o{flex:0 0 200px}
.gk-cd-o>select{width:100%}

/* Hoạ tiết nền: sáu mùa, mỗi mùa một ô. Ô nào ĐÃ có ảnh thì mở thêm hàng dưới
   (bật/tắt · độ mờ · cỡ ô · kiểu · xem) — hàng ấy chiếm trọn bề ngang ô. */
.gk-ht{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.gk-ht-o{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 10px;border:1px solid var(--vien);border-radius:9px;background:var(--nen-phu);
}
.gk-ht-ten{font-size:13.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gk-ht-chua{font-size:11.5px;color:var(--chu-tat)}
.gk-ht-anh{width:32px;height:32px;object-fit:contain;border:1px solid var(--vien);border-radius:7px;background:var(--nen);flex:0 0 auto}
.gk-ht-sua{
  flex:0 0 100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  border-top:1px solid var(--vien);padding-top:8px;margin-top:2px;
}
.gk-ht-sua input[type=range]{flex:1;min-width:80px}
.gk-ht-sua select{flex:0 1 150px}

/* Ba con số: ô nhập trên, ba thẻ xem trước ngay dưới — gõ tới đâu thấy tới đó */
.gk-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
/* Ba nhãn xếp ngang trong một thẻ ~390px: viết đủ chữ thì xuống dòng, ba ô
   lệch nhau. Khung rộng dùng bản NGẮN, khung hẹp (một cột) dùng bản ĐỦ.
   Ngưỡng 620px chứ không phải 900px — bản thiết kế chốt vậy, và đúng: từ
   620 tới 900 thẻ đã chiếm cả bề ngang, ba ô vẫn thừa chỗ đứng ngang. */
.gk-nhan>i{font-style:normal;font-weight:inherit}
.gk-dai{display:none}
@media(max-width:620px){.gk-ngan{display:none}.gk-dai{display:inline}}
.gk-xt{display:flex;gap:8px;margin-top:10px}
.gk-xt>div{flex:1;text-align:center;padding:10px 4px;background:var(--nen-phu);border:1px solid var(--vien);border-radius:9px}
.gk-xt b{display:block;font-size:19px;font-weight:800}
.gk-xt i{display:block;font-size:11px;color:var(--chu-phu);font-style:normal}

/* Ba công tắc + hàng link gửi khách nằm chung một thẻ */
.gk-gat{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--vien);cursor:pointer}
.gk-gat>span{flex:1}
.gk-gat b{font-size:13.5px;font-weight:600}
.gk-gat i{display:block;font-size:11.5px;color:var(--chu-mo);font-style:normal}
.gk-gat input[type=checkbox]{width:20px;height:20px;accent-color:var(--chinh-800);cursor:pointer;flex:0 0 auto}
.gk-link{border-top:1px solid var(--vien);padding-top:10px;margin-top:4px}
.gk-link-ds{display:flex;gap:6px;flex-wrap:wrap}

/* Thanh «Lưu tất cả» dính đáy — trước đây nó nằm cuối trang, sale sửa ô đầu
   trang xong phải cuộn hết ba màn xuống mới thấy nút lưu. */
.gk-luu{
  position:sticky;bottom:0;z-index:6;margin-top:14px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;background:var(--nen);border:1px solid var(--vien);border-radius:11px;
}
.gk-luu .gk-day{flex:1}

@media(max-width:899px){
  .gk-luoi{grid-template-columns:1fr;gap:10px}
  .gk-mua{display:contents}
  .gk-mua>.gk-the{
    background:var(--nen);border:1px solid var(--vien);border-radius:12px;
    margin-top:0;padding-top:0;
  }
  .gk-mua>.gk-the>summary{padding:14px;margin:0;border-top:0}
  .gk-mua>.gk-the>.gk-noi{padding:0 14px 14px}
  .gk-mui{display:block}
  .gk-the>summary{cursor:pointer}
  .gk-hai{grid-template-columns:1fr}
  .gk-ht{grid-template-columns:1fr}
  .gk-noi input:not([type=checkbox]):not([type=range]),
  .gk-noi select{height:46px;min-height:46px;font-size:15px}
  /* Hàng riêng-từng-mục thành thẻ con: trên là icon + tên + hai nút 44×44,
     dưới là ô chọn full chiều ngang. */
  .gk-hang-muc{
    display:block;border:1px solid var(--vien);border-radius:10px;
    padding:10px;background:var(--nen-phu);
  }
  .gk-hang-muc>.gk-dau-muc{display:flex;align-items:center;gap:7px;margin-bottom:7px}
  .gk-ten-muc{flex:1 1 auto;font-size:14px}
  /* Vùng bấm 44px là sàn — nhưng nút có chữ («⬆ Icon», «Gỡ») thì nới rộng ra
     theo chữ chứ không cắt cụt: min-width chứ không phải width. */
  .gk-hang-muc .nut{min-width:44px;height:44px;min-height:44px;padding:0 8px;flex:0 0 auto;font-size:14px}
  .gk-hang-muc>select{width:100%}
  .gk-gat input[type=checkbox]{width:24px;height:24px}
  /* Điện thoại: thanh lưu THÔI DÍNH. Dính đáy trên khung 390px là ăn mất một
     dải màn ngay trên thanh đáy 66px, và hai thứ đứng sau nút («Xem thử trang
     khách», dòng báo đã lưu) bị đẩy xuống dòng thứ hai rồi khuất hẳn.
     Bản thiết kế điện thoại cũng để nút lưu nằm cuối danh sách, không dính. */
  .gk-luu{position:static;flex-direction:column;align-items:stretch;text-align:center}
  .gk-luu .nut.chinh{height:50px;min-height:50px;border-radius:12px;font-size:15px}
  .gk-luu .gk-day{display:none}
}

/* Ngưỡng thứ hai của bản thiết kế: dưới 620px thì ba con số xếp dọc, hàng
   riêng-từng-mục xuống dòng. Trên 620 hai thứ ấy vẫn thừa chỗ đứng ngang. */
@media(max-width:620px){
  .gk-3{grid-template-columns:1fr}
}

/* ── MÀN ĐO LƯỜNG của sale (gói thiết kế `ban-giao/`, 10/09) ──

   Trước hôm nay: một dòng h2, một đoạn văn về quyền riêng tư nằm chình ình
   dưới, ba nút kỳ hạn rời, rồi hai khối số xếp dọc — mà khi chưa có số thì hai
   khối ấy là hai dải trắng cao 180px không nói gì.
   Nay: hai TRANG KHÁCH là hai thẻ ngang hàng, khối rỗng là ô nét đứt gọn trong
   thẻ; thẻ nào CÓ số thì tự giãn ra cả hàng để bày biểu đồ. */
.do-luoi{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;margin-top:14px;align-items:start;
}
.do-the{background:var(--nen);border:1px solid var(--vien);border-radius:11px;padding:14px;min-width:0}
.do-the.rong{grid-column:1/-1}
.do-the>b{display:flex;align-items:center;gap:7px;font-size:15px}
.do-the>b>img{width:18px;height:18px;object-fit:contain;flex:0 0 auto}
.do-nhan{font-size:12px;letter-spacing:.07em;color:var(--chu-phu);font-weight:600;margin:14px 0 4px}
.do-trong{
  margin-top:12px;padding:20px 12px;background:var(--nen-phu);
  border:1px dashed var(--vien-dam);border-radius:9px;text-align:center;
}
.do-trong p{margin:0 0 4px;font-size:13px;color:var(--chu-phu);line-height:1.6}
.do-trong p+p{margin:0;font-size:12px;color:var(--chu-mo)}

@media(max-width:899px){
  .do-luoi{grid-template-columns:1fr;gap:10px}
  body.sale-moi .cc-hang-dau .cc-seg{width:100%}
  body.sale-moi .cc-hang-dau .cc-seg button{flex:1;min-height:44px}
}

/* ── BẢNG CHUÔNG của sale: NGĂN KÉO PHẢI, không phải hộp thả xuống (10/09) ──
   Hộp thả xuống 420px×70vh nổi giữa màn che mất đúng chỗ người ta vừa bấm, và
   trên điện thoại nó đè lên nửa trên của trang. Ngăn kéo phải 400px cao hết
   màn: đọc xong đóng lại, thứ dưới nó không bị che lúc nào cả. */
body.sale-moi .bang-chuong{
  top:0;right:0;bottom:0;width:min(400px,100%);max-height:none;
  border:0;border-left:1px solid var(--vien);border-radius:0;z-index:70;
}
/* Hiệu ứng cũ là «rơi xuống» — đúng cho hộp thả dưới chuông, sai cho ngăn kéo
   bên phải: nó làm cả ngăn kéo nhích lên 10px lúc mở, tức mép trên hở ra một
   vệt. Đổi thành trượt từ phải vào. */
@keyframes truotPhai{from{transform:translateX(14px);opacity:0}to{transform:none;opacity:1}}
body.sale-moi #bang-chuong{animation:truotPhai .2s ease-out}   /* #id để thắng luật `#bang-chuong` cũ */
body.sale-moi .bc-dau{padding:12px 14px;font-size:15px}
body.sale-moi .bc-dong{
  width:34px;height:34px;border:1px solid var(--vien-dam);border-radius:8px;
  background:var(--nen);font-size:15px;color:var(--chu-phu);line-height:1;
}
body.sale-moi .bc-dong:hover{background:var(--nen-3)}

/* ── KHUNG SỬA TRANG PHỤC trên ĐIỆN THOẠI (gói thiết kế `ban-giao/`, 10/09) ──

   Mẫu A dựng cho màn 1240px và giữ nguyên bề ngang ấy trên máy tính — đo 04/09
   bằng Chrome thật: 1240 là con số làm form KHÔNG phải cuộn ở 1920×1080 và
   bảng tích đủ bốn cột. Bản thiết kế đề nghị 900px; giữ 1240 là CỐ Ý, vì hẹp
   lại là trả người nhập tủ đồ về cảnh cuộn mỗi lần nhập một bộ, đúng thứ Mẫu A
   sinh ra để bỏ. Còn phần ĐIỆN THOẠI của bản thiết kế thì dựng đủ ở đây. */

/* Ba khối gập: máy tính khoá nút gập (trông y hệt ba khối phẳng), điện thoại
   mở khoá. Cùng một mã, hai dáng — như thẻ ở màn Giao diện trang khách. */
.td-goi>summary{list-style:none;display:none}
.td-goi>summary::-webkit-details-marker{display:none}

@media(max-width:899px){
  /* CẢ KHUNG cuộn một mạch, thay vì hai cột mỗi cột cuộn riêng. Trên máy tính
     hai vùng cuộn riêng là đúng (ảnh đứng yên khi điền form); trên 390px thì
     nó thành hai thanh cuộn lồng nhau, và cuộn trúng cái nào là hên xui.

     BỎ HẲN LƯỚI, KHÔNG CHỈ ĐỔI HÀNG (đo 10/09, mất một lúc mới ra):
     `.td-mA > .td-cot-anh, .td-mA > .td-mA-form` mang `min-height:0` — thứ bắt
     buộc phải có để hai cột cuộn nội bộ trên máy tính. Nhưng ô lưới có
     `min-height:0` thì hàng `auto` được phép CO LẠI, và cả lưới bị nén vừa
     đúng chiều cao ngăn kéo: cột form cao 297px trong khi ruột nó cao 2.264px,
     nên form tràn đè lên chân khung. Đổi `grid-template-rows` không cứu được —
     hàng vẫn co. Xếp khối thường (`display:block`) thì chiều cao là chiều cao
     thật, và ngăn kéo cuộn một mạch. */
  .cc-keo .td-mA{display:block;height:auto;min-height:100%}
  .td-mA .td-cot-anh,.td-mA .td-mA-form{overflow:visible;min-height:0}
  .td-mA .td-cot-anh{border-right:0;border-bottom:1px solid var(--vien)}
  /* Nhãn lên TRÊN ô nhập: cột nhãn 110px trên khung 390px chỉ còn để lại 240px
     cho ô, mà nhãn dài thì vẫn vỡ hai dòng — mất cả hai đằng. */
  .td-mA-hang{grid-template-columns:1fr;gap:4px}
  .td-mA-nhan{
    font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--chu-phu);margin-top:6px;
  }
  .td-goi{border:1px solid var(--vien);border-radius:12px;background:var(--nen)}
  .td-goi>summary{
    display:flex;align-items:center;gap:8px;padding:13px 14px;
    font-size:14.5px;font-weight:700;cursor:pointer;min-height:44px;
  }
  .td-goi>summary>.gk-mui{display:block}
  .td-goi>*:not(summary){margin-left:14px;margin-right:14px}
  .td-goi>fieldset.td-mA-hop-o{border:0;padding:0;margin-bottom:14px}
  .td-goi>.td-mA-hang:last-of-type,.td-goi>.td-mA-2hop{margin-bottom:14px}

  /* Ảnh: bỏ khung xem lớn (nó ăn nguyên một màn), giữ dãy ô cuộn ngang
     120×156 đúng bản thiết kế — đủ to để nhận ra bộ, đủ nhỏ để thấy hết. */
  .td-mA .td-anh-lon{display:none}
  .td-mA .td-anh-day{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .td-mA .td-anh-day::-webkit-scrollbar{display:none}
  .td-mA .td-anh2{flex:0 0 auto;width:120px;height:156px}
  .td-mA .td-anh2 img{width:100%;height:100%;object-fit:cover}
  .td-mA .td-tha{min-height:96px}
  .td-mA-goi{display:none}

  /* MA TRẬN Ô TÍCH THÀNH CHIP BẤM. Ô tích 17px trong lưới bốn cột là thứ trượt
     tay nhiều nhất trên điện thoại; chip cao 44px bo 22px thì ngón tay nào
     cũng trúng, và xuống dòng theo bề ngang thật. */
  .td-luoi-nhom{grid-template-columns:1fr;gap:14px}
  .td-cot-tich{flex-direction:row;flex-wrap:wrap;gap:7px}
  .td-o-tich{
    height:44px;min-height:44px;padding:0 12px;border:1px solid var(--vien);
    border-radius:22px;background:var(--nen);font-size:14px;gap:7px;
  }
  .td-o-tich input[type=checkbox]{width:19px;height:19px}
  .td-o-tich:has(input:checked){background:var(--chinh-100);border-color:var(--chinh-500)}
  .td-them-o{width:100%;height:44px;min-height:44px;border-radius:10px}
  .td-them-muc{flex-wrap:wrap;width:100%}

  /* Chân khung: hai nút chữ xuống hàng riêng, hai nút chính chia đôi hàng dưới
     — bản trước ép cả bốn vào một hàng 390px nên chữ vỡ ba dòng. */
  .td-mA-chan{flex-wrap:wrap;gap:8px}
  .td-mA-chan .td-mA-day{display:none}
  .td-mA-chan .nut{flex:1 1 0;min-height:50px}
  .td-mA-chan .td-mA-chu{flex:1 1 45%}
}

/* ── PANEL SỬA CONCEPT (gói thiết kế `ban-giao/`, 10/09) ──

   Bản cũ: một cột chữ dài hơn ba màn, nút Đóng ở đỉnh, nút Xoá ở đáy, ba nút
   Lưu rải rác giữa đường. Nay: đầu dính · thân cuộn chia sáu khối · chân dính
   mang «Đóng» và «Lưu & đóng». Sáu khối là <details>: máy tính khoá nút gập
   (mở hết, trông như sáu khối phẳng), điện thoại mở khoá và chỉ mở khối đầu. */
.cc-keo{display:flex;flex-direction:column;padding:0}
.ck-dau{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:12px 14px;border-bottom:1px solid var(--vien);background:var(--nen);
}
.ck-dau>b{font-size:15px;font-weight:700;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-ma{
  font-family:var(--font-so);font-size:12px;font-weight:700;flex:0 0 auto;
  color:var(--chinh-800);background:var(--chinh-100);border-radius:6px;padding:4px 7px;
}
.ck-x{
  width:34px;height:34px;flex:0 0 auto;border:1px solid var(--vien-dam);border-radius:8px;
  background:var(--nen);color:var(--chu-phu);font-size:14px;line-height:1;cursor:pointer;padding:0;
}
.ck-x:hover{background:var(--nen-3)}
.ck-than{flex:1 1 auto;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:14px}
.ck-goi>summary{list-style:none;display:none}
.ck-goi>summary::-webkit-details-marker{display:none}
.ck-noi{display:block}
/* Khối «để khách tìm ra» có NỀN RIÊNG: bốn ô ấy không phải thông tin của
   concept, chúng là thứ quyết định khách có tìm thấy nó hay không. Tách nền
   ra thì mắt biết ngay đây là một việc khác. Hai cột chứ không phải ba: ba ô
   chọn trên panel 440px thì mỗi ô còn 130px, tên lựa chọn cụt hết. */
.ck-tim{background:var(--nen-phu);border:1px solid var(--vien);border-radius:10px;padding:12px}
.ck-tim-luoi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:var(--k2)}
.ck-o-tt{min-width:0}
.ck-chan{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:wrap;
  padding:10px 14px;border-top:1px solid var(--vien);background:var(--nen);
}
.ck-chan>#ck-bao-chan{flex:1;min-width:0;color:var(--loi-700)}

@media(max-width:899px){
  /* Toàn màn, và sáu khối thành sáu hàng bấm được */
  .cc-keo{width:100%}
  .ck-than{padding:12px 14px;gap:10px}
  .ck-goi{border:1px solid var(--vien);border-radius:12px;background:var(--nen)}
  .ck-goi>summary{
    display:flex;align-items:center;gap:8px;padding:13px 14px;
    font-size:14.5px;font-weight:700;cursor:pointer;min-height:44px;
  }
  .ck-goi>summary>.gk-mui{display:block}
  .ck-noi{padding:0 14px 14px}
  /* Ô ảnh to lên cho ngón tay, nút ✕ 34px */
  .ck-noi .cc-anh-nho{width:92px}
  .ck-noi .cc-anh-nho img{width:92px;height:118px}
  .ck-noi .cc-anh-nho .nut-xoa-anh{width:34px;height:34px;font-size:16px}
  .ck-chan .nut{flex:1 1 0;min-height:50px}
  .ck-chan .nut.phu{flex:0 0 96px}
  .ck-chan>#ck-bao-chan{flex:1 1 100%}
}

/* ── HỘP THOẠI THÊM MỚI (gói thiết kế `ban-giao/`, 10/09) ──

   Ba hộp: Tạo mục dịch vụ · Concept mới · Thêm trang phục. Máy tính giữ nguyên
   khuôn hộp giữa màn. ĐIỆN THOẠI đổi thành TỜ TRƯỢT TỪ ĐÁY: ngón cái với tới
   được, và hộp không bị bàn phím ảo đẩy lên che mất ô đang gõ — đúng lý do
   khuôn hộp cũ đã ghi từ 19/08 mà chưa làm tới nơi.
   Thanh kéo 38×4px ở đỉnh là dấu hiệu «kéo xuống để đóng» mà ai cũng đọc được. */
@keyframes truotLen{from{transform:translateY(100%)}to{transform:none}}
@media(max-width:899px){
  body.sale-moi .man-hoi-w{align-items:flex-end;padding:0}
  body.sale-moi .hop-hoi-w{
    width:100%;max-width:none;border-radius:20px 20px 0 0;
    padding:14px 16px 18px;animation:truotLen .22s ease-out;
  }
  body.sale-moi .hop-hoi-w::before{
    content:'';display:block;width:38px;height:4px;border-radius:2px;
    background:var(--vien-dam);margin:0 auto 12px;
  }
  /* «Thôi» 96px, nút chính co giãn — hai nút MỘT HÀNG. Khuôn cũ xếp dọc dưới
     520px, tức nút chính nhảy lên trên nút huỷ, ngược thói quen mọi nơi. */
  body.sale-moi .hw-nut{flex-direction:row;gap:8px}
  body.sale-moi .hw-nut .nut{flex:1 1 0;width:auto;min-height:50px}
  body.sale-moi .hw-nut .nut.phu{flex:0 0 96px}
}
/* Tab «🔌 Quản trị panel» trong cổng điều phối (15/09): màn của quan-tri.js vẽ vào thân cổng,
   không có #quan-tri bọc ngoài nên cho nó khoảng đệm và bề ngang như .qt-than. */
.qt-trong-cong{display:block;max-width:1060px;margin:0 auto;padding:var(--k3) 0 40px}
.qt-trong-cong .qt-h1{font-size:1.35rem}
.qt-trong-cong .qt-bang-boc{overflow-x:auto}   /* thân cổng hẹp hơn màn quản trị: bảng rộng thì cuộn ngang thay vì cắt */
.qt-trong-cong .qt-panel-nut{white-space:normal;min-width:150px}   /* bốn nút Sửa · Vừa cập nhật · Ẩn · Xoá xếp hai hàng thay vì tràn khỏi ô */

/* 15/09 — sắp xếp concept: gợi ý trên lưới + hai nút ◀ ▶ trên thẻ cho ai không kéo được (trackpad, điện thoại) */
.cc-goi-y-sap{margin:0 0 6px;font-size:13px;color:var(--chu-phu)}
.cc-the{position:relative}
.cc-the .cc-sap{position:absolute;left:4px;right:4px;top:4px;display:flex;justify-content:space-between;opacity:0;transition:opacity .12s}
.cc-the:hover .cc-sap,.cc-the:focus-within .cc-sap{opacity:1}
.cc-the .cc-sap b{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.92);color:var(--chu);display:grid;place-items:center;font-size:12px;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.cc-the .cc-sap b:hover{background:var(--chinh-100)}
@media (hover:none){.cc-the .cc-sap{opacity:1}}

/* ══ 📝 LÀM BÁO CÁO NGÀY (16/09) — dùng lại .luoi-so/.the-so, chỉ thêm khung kỳ + hàng nút ══ */
.bcn-ky{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:6px 0 10px}
.bcn-ky label{font-weight:600;color:var(--chu-phu)}
.bcn-ky input[type=date]{padding:4px 8px;border:1px solid var(--vien);border-radius:8px;background:var(--nen);color:var(--chu)}
.bcn-sao{color:var(--vang-700);font-weight:700;margin-left:2px}
.bcn-o .ts-so i{font-size:13px;font-weight:600;font-style:normal;color:var(--chu-mo)}
.bcn-thieu{color:var(--vang-800)}
.bcn-nut{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px}
.bcn-ai{margin-top:6px;display:flex;flex-wrap:wrap;gap:5px}
.bcn-ai span{font-size:12.5px;background:var(--chinh-100);color:var(--chinh-800);border-radius:999px;padding:3px 9px}
.bcn-ai span.do{background:var(--loi-100);color:var(--loi-700)}
.bcn-ai.bcn-trong{color:var(--chu-tat)}
.bcn-tach{margin-top:6px;font-size:13px;color:var(--chu-phu)}
.bcn-tach b{color:var(--chu)}
.bcn-nut .nut[aria-disabled=true]{opacity:.6;cursor:not-allowed}

/* ================= 💰 DOANH THU — SePay ↔ Lark (18/09) =================
   Chỉ dùng token sẵn có của bảng màu trên. Khung thẻ số/cột dùng lại .the-so
   và .cd-* của bieu-do.js — thêm lớp dt-* cho phần chỉ màn này có. */
.dt-thanh-ky{display:flex;justify-content:space-between;align-items:center;gap:var(--k3);flex-wrap:wrap;margin-bottom:var(--k4)}
.dt-ky{margin-top:0;flex-wrap:wrap;align-items:center}
.dt-chon-thang{width:auto;min-width:150px;height:auto;min-height:38px;padding:0 var(--k6) 0 var(--k3);border-radius:var(--bo);border:1px solid var(--vien-o);background-color:var(--nen);font:inherit}
.dt-dau-phai{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap;font-size:13px}
.dt-dau-phai .qt-chip-nut i{font-style:normal;color:var(--chu-mo)}
/* khung chờ có hình dạng — «xương» mờ nhấp nháy */
.dt-xuong{position:relative;overflow:hidden;background:var(--nen-3);border-color:transparent;min-height:72px}
.dt-xuong-dai{height:120px;border-radius:var(--bo-the);margin-top:var(--k4)}
.dt-xuong::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:dtXuong 1.3s infinite}
@keyframes dtXuong{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.dt-xuong::after{animation:none}}
/* số tiền tám chữ số ở cỡ 30px không vừa ô ~145px trên điện thoại (đo Chrome 390px:
   «29.323.00|0» gãy dòng) → hai cột, chữ 20px, không cho gãy giữa dãy số */
.dt-the .ts-so{white-space:nowrap}
@media (max-width:640px){.luoi-so.dt-the{gap:8px}.dt-the .the-so{padding:12px 12px}.dt-the .ts-so{font-size:20px}.dt-the .ts-so i{font-size:11px}}
@media (max-width:360px){.dt-the .ts-so{font-size:17px}}
/* thẻ lệch đổi màu theo dấu — âm đỏ (thiếu phiếu) · dương vàng · 0 xanh */
.the-so.dt-do{border-color:var(--loi-300);background:var(--loi-50)}
.the-so.dt-do .ts-so{color:var(--loi-700)}
.the-so.dt-vang{border-color:var(--vang-300);background:var(--vang-50)}
.the-so.dt-vang .ts-so{color:var(--vang-800)}
.the-so.dt-xanh{border-color:var(--la-300);background:var(--la-50)}
.the-so.dt-xanh .ts-so{color:var(--la-800)}
/* nhóm việc */
.dt-viec{margin-top:var(--k4)}
.dt-viec .qt-tieu{align-items:center}
.dt-nhom{border:1px solid var(--vien);border-radius:var(--bo-the);background:var(--nen);padding:var(--k3) var(--k4);margin-top:var(--k3)}
.dt-nhom h4{margin:0 0 var(--k2);font-size:var(--cx-to);display:flex;gap:var(--k2);align-items:baseline;flex-wrap:wrap}
.dt-nhom h4 small{font-weight:500;color:var(--chu-phu);font-size:13px}
.dt-nhom-do{border-left:4px solid var(--loi-500)}
.dt-nhom-vang{border-left:4px solid var(--vang-700)}
.dt-dong{padding:var(--k3) 0;border-top:1px solid var(--vien);display:grid;gap:4px}
.dt-dong:first-of-type{border-top:0}
.dt-dong.mo{opacity:.55}
.dt-dong.mo:hover,.dt-dong.mo:focus-within{opacity:1}
.dt-dong-chinh{display:flex;gap:var(--k3);align-items:baseline;flex-wrap:wrap}
.dt-tien{font-size:1.05rem;font-variant-numeric:tabular-nums}
.dt-luc{color:var(--chu-phu);font-size:13px;white-space:nowrap}
.dt-luc i{font-style:normal;color:var(--chu-mo)}
.dt-nd{color:var(--chu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:48ch}
.dt-dong-phu{font-size:13.5px;color:var(--chu-phu)}
.dt-nut{display:flex;gap:var(--k2);flex-wrap:wrap;align-items:center;margin-top:2px}
.dt-nut .qt-nut{min-height:36px}
.dt-nut a.qt-nut{text-decoration:none;display:inline-flex;align-items:center}
.dt-dau{display:inline-flex;gap:6px;align-items:center;margin:0;padding:4px 10px;border-radius:var(--bo-tron);
  background:var(--la-100);color:var(--la-900);border:1px solid var(--la-300);font-size:12.5px}
.dt-go{border:0;background:transparent;color:inherit;cursor:pointer;font-size:12px;padding:0 2px;border-radius:4px}
.dt-go:hover{background:var(--la-300)}
.dt-go:focus-visible{outline:2px solid var(--chinh-500);outline-offset:1px}
/* cột đôi theo ngày */
.dt-bd h4 small{font-weight:500;margin-left:var(--k2)}
.dt-khung{height:170px;padding-bottom:18px}
.dt-cot{background:transparent;border:0;padding:0 0 0;cursor:pointer;border-radius:4px 4px 0 0;font:inherit;color:inherit}
.dt-cot:hover,.dt-cot.dang{background:var(--chinh-100)}
.dt-cot:focus-visible{outline:2px solid var(--chinh-500);outline-offset:-2px}
.dt-doi{display:flex;align-items:flex-end;gap:2px;height:100%;width:100%;justify-content:center}
.dt-doi .cd-thanh{width:min(42%,10px)}
.dt-doi .dt-lark{background:var(--chinh-300)}
.dt-cot:hover .dt-lark,.dt-cot.dang .dt-lark{background:var(--chinh-500)}
.dt-cham{position:absolute;top:2px;width:7px;height:7px;border-radius:50%;background:var(--loi-500)}
.dt-cham-chu{position:static;display:inline-block;vertical-align:middle}
/* hộp chọn một dòng */
.dt-hop{max-width:560px}
.dt-tim{margin:var(--k3) 0 var(--k2)}
.dt-ds{max-height:min(48vh,360px);overflow:auto;border:1px solid var(--vien);border-radius:var(--bo-o);display:flex;flex-direction:column}
.dt-ds .qt-ghi{padding:var(--k3)}
.dt-o{padding:10px var(--k3);border-top:1px solid var(--vien);cursor:pointer;display:grid;gap:2px}
.dt-o:first-child{border-top:0}
.dt-o small{color:var(--chu-phu);font-size:12.5px}
.dt-o:hover{background:var(--nen-phu)}
.dt-o.dang,.dt-o[aria-selected=true]{background:var(--chinh-100)}
.dt-o:focus-visible{outline:2px solid var(--chinh-500);outline-offset:-2px}
@media (max-width:640px){
  .dt-nd{max-width:100%;white-space:normal}
  .dt-thanh-ky{flex-direction:column;align-items:stretch}
}
/* 19/09 — 🖼 phiếu chuẩn bằng ảnh · 💸 tiền chi ra (cùng khối Doanh thu) */
.dt-co-anh>summary{color:var(--chu-phu)}
.dt-chi{margin-top:var(--k5);padding-top:var(--k4);border-top:1px dashed var(--vien-dam)}
.dt-the-chi{margin-bottom:var(--k3)}
.dt-khoan-ra .qt-bang td:nth-child(3){max-width:42ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.dt-khoan-ra .qt-bang td:nth-child(3){white-space:normal;max-width:100%}}

/* ══ GỠ LẦN NỘP (19/09 · §10.220) — mục «Lần nộp của CTV» trong hộp chi tiết
   và từng lần trên thẻ «Bộ tôi đã nộp» của CTV: một hàng chữ + nút nhỏ, xuống
   dòng khi hẹp; lần đã gỡ mờ đi. Nút gỡ mang màu «nguy nhẹ»: viền đỏ, không
   đặc — nó là việc đúng khi nộp nhầm, không phải nút phá. ══ */
.ct-lan-nop,.ctv-lan{display:flex;align-items:center;gap:var(--k3);flex-wrap:wrap;padding:4px 0;font-size:var(--cx);overflow-wrap:anywhere}
.ct-lan-nop+.ct-lan-nop,.ctv-lan+.ctv-lan{border-top:1px dashed var(--vien)}
.ct-lan-go,.ctv-lan-go{color:var(--chu-phu)}
/* mục «Hẹn nộp của CTV» trong hộp chi tiết (20/09): dòng hạn + lịch sử dời + hộp dời */
.ct-han-dong{padding:4px 0;font-size:var(--cx);overflow-wrap:anywhere}
.ct-han-lich-su{margin:2px 0 6px;line-height:1.5}
.doi-han .han-moi{min-width:150px}
.nut.nguy-nhe{border-color:var(--loi-300);color:var(--loi-700)}
.nut.nguy-nhe:hover:not(:disabled){background:var(--loi-100)}
/* hộp «Mở QR» khoản ngoài gói (20/09): mã to bên trái, chữ bên phải; điện thoại xếp dọc */
.qr-ngoai-goi{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin:8px 0}
.qr-ngoai-goi img{width:260px;height:260px;max-width:100%;border:1px solid var(--vien);border-radius:8px;background:var(--nen)}
.qr-ngoai-goi-chu{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:var(--cx);overflow-wrap:anywhere}
.qr-ngoai-goi-chu .qr-tien{font-size:1.6em;font-weight:700;color:var(--vang-800)}

/* ══ THẺ TÔ MÀU THEO HẠN (20/09 · anh Huy) ══
   Quá hạn → cả thẻ đỏ nhạt; hạn hôm nay/ngày mai (hay gấp còn giờ) → vàng nhạt
   (`mauTheHan` — loi/han-nop.js, bản chép trong cong.js). Chữ trên thẻ tô màu
   KHÔNG được hoà nền: chip đổi sang nền trắng đục + viền đậm, chip hạn thành
   đặc (đỏ đậm / nâu vàng, chữ trắng), dòng phụ lên màu chữ chính. Đặc hiệu
   `.the.the-han-*` để thắng nền theo bước của thẻ điều phối (`.m-the-*`).
   Bài `thu-the-to-mau-han.js` đo tương phản ≥ 4,5:1 trên Chrome thật. */
.the.the-han-qua{background:var(--loi-100);border-color:var(--loi-300);box-shadow:inset 4px 0 0 var(--loi-500)}
.the.the-han-sap{background:var(--vang-100);border-color:var(--vang-300);box-shadow:inset 4px 0 0 var(--vang-700)}
.the.the-han-qua:hover{border-color:var(--loi-500)}
.the.the-han-sap:hover{border-color:var(--vang-700)}
.the.the-han-qua .nho,.the.the-han-sap .nho{color:var(--chu)}
.the.the-han-qua .nhan,.the.the-han-sap .nhan{background:var(--nen);border:1px solid currentColor}
.the.the-han-qua .nhan.xam,.the.the-han-sap .nhan.xam{color:var(--chu-phu)}
.the.the-han-sap .nhan.vang{color:var(--vang-800);border-color:var(--vang-700)}
.the.the-han-qua .han-nop.qua{background:var(--loi-700);color:var(--chu-nguoc);border:1px solid var(--loi-900)}
.the.the-han-sap .han-nop,.the.the-han-sap .han-nop.sap,.the.the-han-sap .han-nop.gan{background:var(--vang-800);color:var(--chu-nguoc);border:1px solid var(--vang-800);font-weight:600}
.the.the-han-qua .han-nop.gan,.the.the-han-qua .han-nop.sap{background:var(--loi-700);color:var(--chu-nguoc);border:1px solid var(--loi-900)}
/* 🛑 «Khách chọn N giờ mà chưa lọc được RAW — xử lý gấp» (24/09 · §10.283 · `rawChuaLoc` máy chủ khai).
   Dòng đứng trên thẻ đã đỏ nhạt nên KHÔNG dùng nền lỗi lần nữa (luật 08 ⑤ — khác mặt phẳng): nền trắng,
   viền lỗi, chữ `--loi-700` trên `--nen` ≈ 5,0:1 (≥ 4,5:1 — bài thu-raw-chua-loc-chrome đo thật). */
.hop-do.dau-raw-chua-loc{background:var(--nen);border:1px solid var(--loi-300);color:var(--loi-700)}

/* ══ 📦 HÀNG IN · ĐƠN HÀNG · DANH MỤC (Hướng 4 · 22/09) — màn ở hang-in.js ══
   Toàn bộ màu là token; vùng bấm ≥ 44 px trên điện thoại (nút `.nut.nho` trong bảng
   được nới bằng padding của ô); bảng cuộn ngang TRONG khối (`overflow-x:auto`) để
   trang không tràn (§10.172). Không chữ trắng trên pastel. */
.hi-chip{cursor:pointer}
/* 23/09 · bản vẽ 1j — TIỀN VÀ KỆ LÊN ĐẦU THẺ. Khách đứng trước mặt thì hai câu hỏi
   là «hàng đâu» và «thu bao nhiêu»; mọi thứ khác gấp vào «▸ Chi tiết». */
/* 23/09 · bản vẽ 4a — MỘT HÀNG CHIP LỌC thay bốn ô đếm và năm thanh gấp.
   Vùng bấm ≥ 44px: quầy bấm bằng ngón cái, một tay còn bê hàng. */
.hi-chip-loc{display:flex;flex-wrap:wrap;gap:var(--k2);margin:var(--k2) 0 var(--k3)}
.hi-cl{border:1px solid var(--vien-o);background:var(--nen);color:inherit;
  border-radius:var(--bo-tron);min-height:var(--cao-o);padding:0 var(--k3);
  font-size:var(--cx-nho);cursor:pointer;white-space:nowrap}
.hi-cl b{margin-left:var(--k1)}
.hi-cl-chon{background:var(--chinh-500);border-color:var(--chinh-700);color:var(--chu-tren-chinh);font-weight:600}
.hi-cl-rong{opacity:.5}
/* Ô chọn nhóm (23/09 chiều — anh Huy): cùng dáng viên thuốc với nút «Tất cả», mũi
   tên vẽ bằng nền như mọi `select` của cổng. Luật ô-chọn chung `.hop select` không
   áp ở đây (ngoài hộp), nên khai đủ ở chính nó. */
/* «Tất cả» và ô chọn nằm CÙNG MỘT HÀNG: luật chung cho `select` là `width:100%`, để
   nguyên thì ô chọn rơi xuống hàng riêng và hàng lọc vẫn chiếm hai hàng như cũ. */
.hi-chip-loc:has(select.hi-cl-nhom){flex-wrap:nowrap}
select.hi-cl-nhom{appearance:none;-webkit-appearance:none;font:inherit;font-size:var(--cx-nho);
  padding:0 var(--k6) 0 var(--k3);width:auto;flex:0 1 auto;min-width:0;max-width:100%;
  text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--chu-phu) 50%),
                   linear-gradient(135deg,var(--chu-phu) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.hi-cl-nhom.hi-cl-chon{background-color:var(--chinh-500);
  background-image:linear-gradient(45deg,transparent 50%,var(--chu-tren-chinh) 50%),
                   linear-gradient(135deg,var(--chu-tren-chinh) 50%,transparent 50%)}
/* ══ THẺ ĐƠN CỔNG CHÍNH — bản mẫu 1j («Có ảnh in»…) và 1d («Cần in»), gói đợt 4 ══ */
.hi-the-don{display:flex;flex-direction:column;gap:var(--k3);padding:var(--k4)}
.hj-dau{display:flex;align-items:baseline;gap:var(--k2)}
.hj-dau>b{flex:1;font-size:var(--cx-h3)}
.hj-dau>b span{font-size:var(--cx);font-weight:400;color:var(--chu-phu)}
.hj-ma{font-size:var(--cx-nho);color:var(--chu-mo);font-family:var(--font-so)}
/* 1j · kệ nền xanh lá, chữ 19 — «hàng đâu» là câu hỏi thứ nhất */
.hj-ke{display:flex;align-items:center;gap:var(--k2);padding:var(--k3);border-radius:var(--bo-o);
  background:var(--la-100);border:1px solid var(--la-300)}
.hj-ke>span{font-size:20px}
.hj-ke>b{font-size:19px;color:var(--la-900)}
.hj-ghi{font-size:var(--cx-nho);color:var(--chu-phu)}
.hj-tien{display:flex;align-items:baseline;justify-content:space-between}
.hj-tien>span{font-size:var(--cx);color:var(--chu-phu)}
.hj-tien>b{font-size:26px;font-variant-numeric:tabular-nums}
.hj-tien>b.hj-no{color:var(--loi-700)}
.hj-tien>b.hj-hoan{color:var(--vang-800)}
.hj-tien>b.hj-du{color:var(--la-800)}
.hj-nut{display:flex;flex-direction:column;gap:var(--k2)}
.hj-chinh{width:100%;height:52px;border:0;border-radius:var(--bo-tron);background:var(--chinh-500);
  color:var(--chu-tren-chinh);font-weight:800;font-size:var(--cx-h3);cursor:pointer}
.hj-giao-to{width:100%;height:52px;border:0;border-radius:var(--bo-tron);background:var(--la-500);
  color:var(--la-900);font-weight:800;font-size:var(--cx-h3);cursor:pointer}
.hj-hang{display:flex;gap:var(--k2)}
.hj-hang>button{flex:1;height:var(--cao-bam);border:1px solid var(--vien-dam);border-radius:var(--bo-tron);
  background:var(--nen);color:var(--chu);font-weight:600;font-size:var(--cx);cursor:pointer}
.hj-hang>button.hj-giao{border-color:var(--la-300);background:var(--la-100);color:var(--la-900);font-weight:700}
.hj-chan{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap;padding-top:var(--k2);
  border-top:1px solid var(--vien);font-size:var(--cx);color:var(--chinh-800);font-weight:600}
.hj-mo-ct{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;min-height:var(--cao-bam)}
.hj-link{color:inherit;font-weight:inherit}
.hi-the-don .hi-chi-tiet{margin:0;border:0;padding:0}
.hj-nut-phu{display:flex;gap:var(--k2);margin-top:var(--k2)}
/* 1d · «Cần in» — lưới «tên | ×số | tiền», hàng nút dưới vạch */
/* 1d: mã đơn đứng NGAY SAU tên bộ (1j thì đẩy sang mép phải) */
.hi-the-can-in .hj-dau>b{flex:none}
.hj-mon{display:grid;grid-template-columns:1fr auto auto;gap:var(--k2) var(--k4);font-size:var(--cx)}
.hj-sl{color:var(--chu-phu)}
.hj-mon>b{font-variant-numeric:tabular-nums;text-align:right}
.hj-nut-can-in{display:flex;gap:var(--k2);flex-wrap:wrap;padding-top:var(--k2);border-top:1px solid var(--vien)}
.hj-nut-can-in>button,.hj-nut-can-in>.nut{height:var(--cao-bam);min-height:var(--cao-bam);padding:0 var(--k4);
  border-radius:var(--bo-tron);font-size:var(--cx)}
.hj-gui{border:0;background:var(--chinh-500);color:var(--chu-tren-chinh);font-weight:700;cursor:pointer}
.nhom-tieu.hj-nhom-can-in{display:flex;align-items:center;gap:var(--k3);padding:var(--k3) var(--k4);
  background:var(--nen-3);border-radius:var(--bo-o)}
.nhom-tieu.hj-nhom-can-in .nhom-dem{flex:1;color:var(--chu-mo);font-weight:400;white-space:nowrap}
/* Khổ hẹp: nút copy cả lô xuống dòng thay vì bóp chữ nhóm thành vụn (đo ở 390, 23/09). */
.nhom-tieu.hj-nhom-can-in{flex-wrap:wrap;row-gap:var(--k2)}

/* ══════════════════════════════════════════════════════════════════════════
   NHẬP HÀNG LAB — chép từ bản mẫu `man/2c.html` (+ 3b · 3d · 4a đã chốt nằm trong
   đó), gói thiết kế đợt 4, 23/09. Mỗi LÔ (một đơn) là một thẻ gấp được; mỗi MÓN
   một hàng «tên + trạng thái | ô số 80×48»; phần hỏi lý do CHỈ BUNG ở dòng lệch.
   ══════════════════════════════════════════════════════════════════════════ */
.nl-tieu{padding:var(--k3) var(--k4);border-bottom:1px solid var(--vien)}
.nl-tieu b{font-size:var(--cx-h3)}
.nl-ds-lo{display:flex;flex-direction:column;gap:var(--k3)}
body.quay-day .nl-ds-lo{padding:0 var(--k4) var(--k4)}
.nl-lo{border:1px solid var(--vien);border-radius:var(--bo-the);overflow:hidden;background:var(--nen)}
.nl-lo.nl-lo-mo{border-color:var(--vien-dam)}
.nl-lo-dau{min-height:var(--cao-bam);padding:var(--k3) var(--k4);display:flex;align-items:center;gap:var(--k3);cursor:pointer}
.nl-lo-mo .nl-lo-dau{background:var(--nen-phu)}
.nl-mui{font-size:13px;color:var(--chu-phu)}
.nl-lo-ten{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nl-lo-ten>b{font-size:var(--cx-h3)}
.nl-lo-ten>b span{font-size:var(--cx);font-weight:400;color:var(--chu-phu)}
.nl-lo-ma{font-size:var(--cx-nho);color:var(--chu-mo);font-family:var(--font-so)}
.nl-lo-so{padding:2px 8px;border-radius:var(--bo-o);font-size:var(--cx-nho);background:var(--nen-3);
  border:1px solid var(--vien);color:var(--chu);white-space:nowrap}
.nl-lo-than{padding:var(--k4);display:flex;flex-direction:column;gap:var(--k3)}
.nl-lo:not(.nl-lo-mo) .nl-lo-than{display:none}

/* 3b · SỐ DẪN ĐƯỜNG */
.nl-mon{display:flex;flex-direction:column;gap:var(--k2);padding:var(--k3);border:1px solid var(--vien);border-radius:var(--bo-o)}
.nl-mon.nl-lech-co{border-color:var(--vang-300);background:var(--vang-50)}
.nl-mon-dau{display:flex;align-items:center;gap:var(--k3)}
.nl-mon-ten{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nl-mon-ten>b{font-size:var(--cx-to)}
.nl-tom{font-size:var(--cx-nho);color:var(--la-800);font-weight:700}
.nl-lech-co .nl-tom{color:var(--vang-800)}
.hop .nl-mon-dau input.nl-nhan,.nl-mon-dau input.nl-nhan{width:80px;min-width:80px;height:48px;flex:none;
  border:1px solid var(--vien-o);border-radius:var(--bo-o);background:var(--nen);text-align:center;
  font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;padding:0}
/* Dòng ĐỦ: ô số viền 2px `--chinh-500`; dòng LỆCH: 1px — bản mẫu 3b · 2c vẽ vậy. */
.nl-mon:not(.nl-lech-co) .nl-mon-dau input.nl-nhan,.nl-mon-dau input.nl-nhan:focus{
  border:2px solid var(--chinh-500);box-shadow:none;outline:0}
.nl-ly-do{display:flex;flex-direction:column;gap:var(--k2)}
.nl-chip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--k1)}
.nl-c{min-height:var(--cao-bam);border:1px solid var(--vien-dam);border-radius:var(--bo-o);
  background:var(--nen);color:var(--chu);font-weight:600;font-size:var(--cx);cursor:pointer}
.nl-c.nl-c-chon{border:2px solid var(--vang-700);background:var(--vang-100);color:var(--vang-800);font-weight:700}
.nl-ve-lai{font-size:var(--cx-nho);color:var(--vang-800)}

/* 📷 ẢNH CHỤP TRÊN ĐIỆN THOẠI (30/09 · kế hoạch giaoanhin điện thoại Tầng 1) — MỘT khung cho bốn chỗ (nhận Lab · báo hỏng ·
   ảnh hoàn · ảnh tiền mặt): hàng ảnh nhỏ 72 có ✕ (vùng chạm `--cao-bam`) + hai NHÃN bọc ô chọn tệp «📷 Chụp ảnh» · «🖼 Chọn từ thư viện».
   Ô chọn tệp PHỦ KÍN nhãn, chỉ trong suốt — chạm là chạm thẳng vào ô (không `hidden`, không mã bấm hộ).
   Màu: nền `--chinh-50` / chữ `--chinh-800` (4,52:1 trên nền nhấn — khai ở :root) như nút ảnh cũ; ✕ nền `--chu` / chữ `--nen`. */
.anh-khung{display:flex;flex-direction:column;gap:var(--k2)}
.anh-ds{display:flex;flex-wrap:wrap;gap:var(--k2)}
.anh-ds:empty{display:none}
.anh-nho-o{position:relative;width:72px;height:72px;flex:none;border-radius:var(--bo-o);border:1px solid var(--vien);
  overflow:hidden;background:var(--nen-phu)}
.anh-nho-o img{display:block;width:100%;height:100%;object-fit:cover}
.anh-xoa{position:absolute;top:0;right:0;width:var(--cao-bam);height:var(--cao-bam);min-height:var(--cao-bam);padding:0;margin:0;border:0;
  background:transparent;display:flex;align-items:flex-start;justify-content:flex-end;cursor:pointer}
.anh-xoa span{margin:4px;width:24px;height:24px;border-radius:50%;background:var(--chu);color:var(--nen);
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.anh-nut-hang{display:grid;grid-template-columns:1fr 1fr;gap:var(--k2)}
.anh-nut{position:relative;display:flex;align-items:center;justify-content:center;min-height:var(--cao-bam);padding:var(--k1) var(--k2);
  border:2px dashed var(--chinh-500);border-radius:var(--bo-o);background:var(--chinh-50);color:var(--chinh-800);
  font-size:var(--cx);text-align:center;cursor:pointer;margin:0}
.anh-khung.anh-co .anh-nut-chup{border-style:solid}
.anh-nut:focus-within{outline:3px solid var(--chinh-500);outline-offset:2px}
.anh-o{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;font-size:0}
.anh-trong-app{margin:0;align-items:center;flex-wrap:wrap}

/* 3d · CHIP KỆ */
.nl-muc{display:flex;flex-direction:column;gap:var(--k1)}
.nl-nhan-muc{font-size:var(--cx);font-weight:700}
.nl-ke{display:flex;gap:var(--k2);flex-wrap:wrap}
.nl-kc{min-height:var(--cao-bam);padding:0 var(--k3);border:1px solid var(--vien-dam);border-radius:var(--bo-tron);
  background:var(--nen);color:var(--chu);font-weight:600;font-size:var(--cx);cursor:pointer}
.nl-kc.nl-kc-chon{border:2px solid var(--chinh-500);background:var(--chinh-100);color:var(--chinh-800);
  font-weight:700;padding:0 11px}
.nl-ke{align-items:center}
/* 23/09 chiều (anh Huy) — THÊM/BỚT NGĂN là nút TRÒN chỉ có biểu tượng, khác hình chip ngăn:
   «+» xanh lá nhạt · «✕» đỏ nhạt. Đang bớt thì nút bớt thành «✓» nền trắng = «Xong». */
.nl-ke-tron{width:var(--cao-bam);height:var(--cao-bam);flex:0 0 auto;border-radius:50%;padding:0;
  display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;line-height:1;cursor:pointer}
.nl-ke-tron.nl-ke-moi{background:var(--la-100);border:1px solid var(--la-500);color:var(--la-900)}
.nl-ke-tron.nl-ke-bot{background:var(--loi-100);border:1px solid var(--loi-300);color:var(--loi-700);font-size:18px}
.nl-ke-tron.nl-ke-bot[aria-pressed="true"]{background:var(--nen);border:1px solid var(--vien-dam);color:var(--chu)}
.nl-ke-tron:focus-visible{outline:2px solid var(--chinh-500);outline-offset:2px}
.nl-ke-sua .nl-ke-c,.nl-ke-sua .nl-ke-c.nl-kc-chon{border:1px dashed var(--loi-500);background:var(--loi-100);color:var(--loi-900);padding:0 var(--k3)}
.nl-ke-sua .nl-ke-c::after{content:'✕';margin-left:var(--k2);font-weight:700}
.nl-ke-sua .nl-ke-moi{display:none}
.nl-nhan-phu{font-weight:400;color:var(--chu-phu);margin-left:var(--k1)}
.hop .nl-muc input.nl-ghi-kho,.nl-muc input.nl-ghi-kho{height:var(--cao-o);border:1px solid var(--vien-o);
  border-radius:var(--bo-o);padding:0 var(--k3);font-size:var(--cx);width:100%}

/* NÚT NHẬN — cao 52, tròn; KHOÁ khi chưa có ảnh (nền `--nen-3`, chữ `--chu-tat`) */
.nl-xong{width:100%;height:52px;border:0;border-radius:var(--bo-tron);background:var(--chinh-500);
  color:var(--chu-tren-chinh);font-weight:800;font-size:var(--cx-h3);cursor:pointer}
.nl-xong:disabled{border:1px solid var(--vien);background:var(--nen-3);color:var(--chu-tat);cursor:not-allowed}
.nl-xong-cau{font-size:var(--cx-nho);color:var(--loi-700)}   /* 24/09: câu nhắc ĐỎ dưới nút nhận (N2 · A8) */

/* ══ ⑧ HỘP BÁO HỎNG — chép từ bản mẫu `man/1f.html` (gói đợt 4, 23/09) ══
   Hộp dùng chung `#hop-ct-web` có đệm riêng; hộp này tự đệm theo mẫu (đầu 16 có gạch
   dưới · thân 16, các khối cách 12) nên gỡ đệm của hộp ngoài bằng `:has`. */
.hop-web:has(.bh-hop){padding:0;max-width:390px}
.bh-dau{padding:var(--k4);border-bottom:1px solid var(--vien)}
.bh-dau b{font-size:var(--cx-h3)}
.bh-than{padding:var(--k4);display:flex;flex-direction:column;gap:var(--k3)}
.bh-chon{display:flex;gap:var(--k2)}
.bh-c{flex:1;min-height:var(--cao-bam);border:1px solid var(--vien-dam);border-radius:var(--bo-o);
  background:var(--nen);color:var(--chu);font-weight:600;font-size:var(--cx-to);cursor:pointer}
.bh-c.bh-c-chon{border:2px solid var(--loi-500);background:var(--loi-100);color:var(--loi-900);font-weight:700}
.bh-muc{display:flex;flex-direction:column;gap:var(--k2)}
.bh-nhan{font-size:var(--cx);font-weight:700}
.bh-nhan span{color:var(--chu-mo);font-weight:400}
.hop .bh-muc textarea.bh-ghi,.bh-muc textarea.bh-ghi{height:56px;min-height:56px;border:1px solid var(--vien-o);
  border-radius:var(--bo-o);padding:var(--k3);font-size:var(--cx);resize:vertical}
.bh-hau{padding:var(--k3);border-radius:var(--bo-o);background:var(--cam-100);border:1px solid var(--cam-300);
  font-size:var(--cx-nho);color:var(--cam-800)}
.bh-nut{display:flex;gap:var(--k2)}
.bh-thoi,.bh-ok{height:var(--cao-bam);border-radius:var(--bo-tron);font-size:var(--cx-to);cursor:pointer}
.bh-thoi{flex:1;border:1px solid var(--vien-dam);background:var(--nen);color:var(--chu);font-weight:600}
.bh-ok{flex:1.4;border:1px solid var(--loi-700);background:var(--loi-100);color:var(--loi-900);font-weight:700}
.bh-ok:disabled{opacity:.6;cursor:wait}

/* ══ ⑦ HỘP HUỶ MÓN ĐÃ GỬI IN — chép từ bản mẫu `man/1e.html` (gói đợt 4, 23/09) ══
   Dùng chung khung `.bh-*` của hộp báo hỏng (cùng đầu · thân · hàng nút). */
.hm-dau{display:flex;flex-direction:column;gap:var(--k1)}
.hm-da-in{font-size:var(--cx);color:var(--loi-700);font-weight:700}
.hm-o{display:flex;gap:var(--k3);align-items:center;min-height:var(--cao-bam);padding:var(--k2) var(--k3);
  border:1px solid var(--vien-dam);border-radius:var(--bo-o);margin:0;cursor:pointer;font-weight:400}
.hm-o input{position:absolute;opacity:0;width:1px;height:1px}
.hm-o>i{width:20px;height:20px;flex:none;border-radius:50%;border:1px solid var(--vien-o);background:var(--nen);box-sizing:border-box}
.hm-o>span{font-size:var(--cx-to)}
.hm-o:has(input:checked){border:2px solid var(--chinh-500);background:var(--chinh-50);padding:calc(var(--k2) - 1px) calc(var(--k3) - 1px)}
.hm-o:has(input:checked)>i{border:6px solid var(--chinh-500)}
.hm-o:has(input:focus-visible){outline:2px solid var(--sk-xanh-dam);outline-offset:2px}
.hm-tien-hang{display:flex;align-items:center;gap:var(--k2);padding-left:36px}
.hop .hm-tien-hang input#hm-tien{flex:1;height:var(--cao-o);border:1px solid var(--vien-o);border-radius:var(--bo-o);
  padding:0 var(--k3);font-size:var(--cx)}
.hop .hm-tien-hang input#hm-tien:disabled{background:var(--nen-3);border-color:var(--vien);opacity:1}
.bh-nhan .hm-bat-buoc{color:var(--loi-700)}
.hop .bh-muc textarea#hm-ly-do,.bh-muc textarea#hm-ly-do{height:64px;min-height:64px;border:1px solid var(--vien-o);
  border-radius:var(--bo-o);padding:var(--k3);font-size:var(--cx);resize:vertical}
.hm-hoan{padding:var(--k3);border-radius:var(--bo-o);background:var(--vang-100);border:1px solid var(--vang-300);
  font-size:var(--cx-nho);color:var(--vang-800)}
.nut.nguy.hi-nut-huy{border:1px solid var(--loi-300);background:var(--loi-50);color:var(--loi-700);font-weight:700}

/* ══ «TÔI ĐÃ IN SAI ẢNH» (27/09 · kế hoạch lương mục 7) — dùng chung khung `.bh-*` của hộp báo hỏng ══
   Luật 08: chữ ≥ 12px (`--cx-nho` 12,5px) · đậm chỉ ở tiêu đề/nhãn (nội dung viết thường) · ô bắt buộc thiếu đỏ TẠI Ô
   (`o-thieu` + một dòng chữ đỏ dưới ô, cặp --loi-700 trên --nen ≥ 4,5:1) · ô cao `--cao-o` (44px, vùng bấm điện thoại). */
.is-phu{font-size:var(--cx-nho);color:var(--chu-mo);font-weight:400}
.hop .bh-muc select.is-o,.bh-muc select.is-o{height:var(--cao-o);border:1px solid var(--vien-o);border-radius:var(--bo-o);
  padding:0 var(--k3);font-size:var(--cx);background:var(--nen);color:var(--chu);max-width:100%}
.hop .bh-muc textarea.is-o,.bh-muc textarea.is-o{height:56px;min-height:56px;border:1px solid var(--vien-o);
  border-radius:var(--bo-o);padding:var(--k3);font-size:var(--cx);resize:vertical}
.bh-muc .is-o.o-thieu,.bh-muc .is-o.o-thieu:focus-visible{border-color:var(--loi-700);outline:2px solid var(--loi-700);outline-offset:0}
.is-loi{margin:0;font-size:var(--cx-nho);color:var(--loi-700)}
.is-tien{padding:var(--k3);border-radius:var(--bo-o);background:var(--nen-phu);border:1px solid var(--vien);
  font-size:var(--cx);color:var(--chu);display:flex;flex-direction:column;gap:var(--k1)}
.is-can-cu{font-size:var(--cx-nho);color:var(--chu-mo)}

/* Dòng đã huỷ sau khi in (1e): mờ 75%, gạch ngang, khung đỏ nhạt nói lý do + phí. */
tr.hi-dong-huy{opacity:.75}
tr.hi-dong-huy td>b,tr.hi-dong-huy .hi-tt b{text-decoration:line-through;color:var(--chu-mo)}
.hi-huy-ly{margin-top:var(--k2);padding:var(--k2) var(--k3);border-radius:var(--bo-o);background:var(--loi-100);
  border:1px solid var(--loi-300);font-size:var(--cx-nho);color:var(--loi-700)}
.hi-sl-the{display:none}

/* ══ 1e · KHỔ HẸP: MỖI DÒNG SẢN PHẨM LÀ MỘT THẺ (không phải hàng bảng 7 cột) ══
   Bảng 7 cột ở 390px phải cuộn ngang, và nút riêng của từng dòng (Huỷ món · Báo hỏng)
   bị đẩy ra ngoài tầm mắt. Dựng lại bằng lưới CSS trên chính bảng ấy — không viết
   thêm một hàm dựng thứ hai: hàng 1 «tên | thành tiền», hàng 2 «SKU ×số», rồi viên
   trạng thái, rồi hàng nút. */
@media (max-width:560px){
  .hi-cuon:has(.hi-bang-dong){overflow:visible}
  .hi-bang.hi-bang-dong{min-width:0;display:block}
  .hi-bang.hi-bang-dong thead{display:none}
  .hi-bang.hi-bang-dong tbody{display:flex;flex-direction:column;gap:var(--k3)}
  .hi-bang.hi-bang-dong tr{display:grid;grid-template-columns:1fr auto;gap:var(--k2);
    border:1px solid var(--vien);border-radius:var(--bo-the);padding:var(--k3)}
  /* `.hop-web` đứng đầu: các luật ghim cột của §10.247 (`.hi-bang td:first-child`,
     `td:nth-child(5)`) cùng độ mạnh mà đứng SAU trong file — không có tiền tố này thì
     thẻ vẫn mang min-width 190 và nowrap của bảng. */
  .hop-web .hi-bang.hi-bang-dong td{display:block;border:0;padding:0;min-width:0;width:auto;white-space:normal}
  .hi-bang.hi-bang-dong td:first-child{grid-column:1;grid-row:1}
  .hi-bang.hi-bang-dong td.hi-tt{grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
  .hi-bang.hi-bang-dong td.hi-sl,.hi-bang.hi-bang-dong td.hi-dg{display:none}
  .hi-bang.hi-bang-dong td:not(:first-child):not(.hi-tt):not(.hi-sl):not(.hi-dg){grid-column:1 / -1}
  .hi-bang.hi-bang-dong td:empty{display:none}
  .hi-bang.hi-bang-dong .hi-sku{font-family:var(--font-so);display:flex;gap:var(--k3);flex-wrap:wrap}
  .hi-bang.hi-bang-dong .hi-sl-the{display:inline}
  .hi-bang.hi-bang-dong .hi-nut-dong{display:flex;gap:var(--k2);flex-wrap:wrap;width:auto}
  .hi-bang.hi-bang-dong .hi-nut-dong .nut{min-height:var(--cao-bam);border-radius:var(--bo-tron)}
}

/* ══ 2a · CỬA CỦA QUẦY — chép từ bản mẫu `man/2a.html` (gói đợt 4, 23/09) ══
   Chỉ bật dưới `body.quay-cua` (tên miền `giaoanhin.`), cửa chung của các vai khác
   giữ nguyên. Bản mẫu vẽ CẢ MÀN ĐIỆN THOẠI làm một khung 390 × ≥640: nội dung canh
   giữa theo chiều dọc, đệm 40/24, các cụm cách nhau 24 — không có thẻ nằm thụt
   trong màn như cửa chung. Bản 23/09 sáng giữ thẻ của cửa chung, biểu tượng 72px,
   hai dòng phụ gộp một, ô mã canh giữa, nút cao 38 — sáu chỗ lệch đo được. */
.cua-icon{font-size:26px;line-height:1;width:56px;height:56px;flex:none;box-sizing:content-box;
  display:flex;align-items:center;justify-content:center;
  background:var(--chinh-100);border:1px solid var(--chinh-300);border-radius:var(--bo-the)}
body.quay-cua .cua{padding:0;place-items:start center;align-content:start}
body.quay-cua .cua-hop{width:100%;max-width:390px;min-height:640px;border:0;border-radius:0;
  box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--k5);padding:var(--k7) var(--k5)}
body.quay-cua .cua-ten{display:flex;flex-direction:column;align-items:center;gap:var(--k1);text-align:center}
body.quay-cua .cua-hop h1{font-size:24px;line-height:1.25;margin:0;letter-spacing:0}
body.quay-cua #cua-phu{font-size:var(--cx-to);color:var(--chu-phu);margin:0;line-height:normal}
body.quay-cua .cua-phu2{font-size:var(--cx);color:var(--chu-mo);margin-top:var(--k1);line-height:normal}
/* Hai chỗ đo 23/09 mới khớp: biểu tượng — bản mẫu không đặt `box-sizing`, nên 56px
   + viền hiện ra 58; giữ số 56 và cho nó `content-box`. Ô mã thì NGƯỢC LẠI: bản mẫu
   hiện ra 52 (48 + viền 2px) nhưng lời dặn của chính người vẽ ghi «Ô mã cao 48 px» —
   giữ 48 theo lời dặn. */
body.quay-cua .cua-hop form{width:100%;margin:0;display:flex;flex-direction:column;gap:var(--k3)}
/* Ô mã: viền 2px `--chinh-500` (ô tự nhận con trỏ nên lúc mở trang nó LUÔN đang sáng),
   chữ gõ giãn .14em cho dễ đếm ký tự; CHỮ MỜ thì không giãn, cỡ 15 — bản mẫu vẽ vậy. */
body.quay-cua .cua-hop .cua-ma-to{height:48px;border:2px solid var(--chinh-500);border-radius:var(--bo-o);
  padding:0 var(--k4);font-size:var(--cx-h3);letter-spacing:.14em;text-align:left;box-shadow:var(--net)}
body.quay-cua .cua-hop .cua-ma-to::placeholder{letter-spacing:0;font-size:var(--cx-to);color:var(--chu-tat)}
body.quay-cua #nut-vao{width:100%;height:52px;min-height:52px;border:0;border-radius:var(--bo-tron);
  background:var(--chinh-500);color:var(--chu-tren-chinh);font-weight:800;font-size:var(--cx-h3);box-shadow:none}
body.quay-cua .cua-xin-ma{margin:0;padding:0;border-top:0;font-size:var(--cx-nho);line-height:1.6;
  color:var(--chu-mo);text-align:center;max-width:280px}
/* 25/09 (1.5.34 I): cửa quầy có ảnh «đạo đức làm nghề» ở ĐẦU (thay biểu tượng 📦) — cửa quầy không có thẻ nên ảnh
   nằm trong đệm, bo cả bốn góc; dòng nhận diện «Giao Ảnh In & Công Nợ» đứng TRÊN hai câu anh chốt; câu đậm cùng
   cỡ cửa chung (câu dài — 24px thành bốn dòng đẩy nút «Vào» khỏi màn 844). */
body.quay-cua .cua-hop{justify-content:flex-start;padding:var(--k5)}
body.quay-cua .cua-dao-duc{width:100%;margin:0;border-radius:var(--bo-hop)}
body.quay-cua .cua-phu2{order:-1;margin:0}
body.quay-cua .cua-hop h1{font-size:var(--cx-h2)}

/* ══════════════════════════════════════════════════════════════════════════
   TRANG QUẦY `giaoanhin.` — chép từ bản mẫu `man/2b.html` + `man/4a.html`
   (gói thiết kế đợt 4, 23/09). Khổ 390, vùng bấm ≥ 44 (`--cao-bam`).
   Mọi luật nằm dưới `body.quay-day` (tên miền giaoanhin + đúng hai tab hàng in),
   nên cổng chính của điều phối không đổi gì.
   ══════════════════════════════════════════════════════════════════════════ */
.dau-icon,.dau-ten{display:none}
body.quay-day .dau{flex-wrap:nowrap;align-items:center;gap:var(--k2);padding:var(--k3) var(--k4);
  border-bottom:1px solid var(--vien)}
body.quay-day .dau .logo,body.quay-day .dau .ten-he,body.quay-day .dau .vai,
body.quay-day .dau .den-sync,body.quay-day .dau .huy-tu-dong,body.quay-day .dau .bang-noi{display:none}
body.quay-day .dau-icon{display:flex;width:24px;height:24px;flex:none;border-radius:7px;
  background:var(--chinh-100);border:1px solid var(--chinh-300);align-items:center;
  justify-content:center;font-size:13px;box-sizing:content-box}
body.quay-day .dau-ten{display:block;flex:1;font-size:var(--cx-to)}
body.quay-day .dau .ten-toi{display:inline;margin:0;font-size:var(--cx-nho);color:var(--chu-phu)}
body.quay-day .dau .chuong{width:32px;height:32px;min-height:32px;flex:none;margin:0;border-radius:50%;
  border:1px solid var(--vien-dam);font-size:14px;padding:0;display:flex;align-items:center;justify-content:center}
body.quay-day .dau #nut-ra{flex:none;height:32px;min-height:32px;padding:0 var(--k3);border-radius:var(--bo-tron);
  border:1px solid var(--vien-dam);background:var(--nen);font-size:var(--cx-nho);color:var(--chu);font-weight:400}

/* Thân trang không đệm ngang: dải tìm và dải chip TRẢI HẾT BỀ NGANG như bản mẫu;
   danh sách tự đệm 0 16 16. Chừa đáy cho thanh tab dính đáy. */
body.quay-day #than{padding:0 0 84px}
body.quay-day .hi-dai{padding:var(--k3) var(--k4);background:var(--nen-phu);border-bottom:1px solid var(--vien)}

/* Ô TÌM DÍNH ĐỈNH (việc đầu mỗi lượt khách là gõ số điện thoại) */
body.quay-day .hi-tim{position:sticky;top:0;z-index:20;display:flex;gap:var(--k2);margin:0}
  background:var(--nen);display:flex;align-items:center;padding:0 var(--k3);gap:var(--k2);margin:0;font-size:var(--cx)}
  padding:0;background:none;box-shadow:none;outline:0;font-size:var(--cx)}
body.quay-day .hi-tim-lai{width:var(--cao-o);height:var(--cao-o);flex:none;border:1px solid var(--vien-dam);
  border-radius:var(--bo-o);background:var(--nen);font-size:16px;color:var(--chu);padding:0}

/* 4a · MỘT HÀNG CHIP LỌC mang sẵn con số */
body.quay-day .hi-chip-loc{display:flex;flex-wrap:wrap;gap:var(--k2);margin:0}
body.quay-day .hi-cl{min-height:var(--cao-bam);padding:0 var(--k3);border:1px solid var(--vien-dam);
  border-radius:var(--bo-tron);background:var(--nen);color:var(--chu);font-weight:600;font-size:var(--cx);
  display:flex;align-items:center;gap:6px;opacity:1}
body.quay-day .hi-cl b{font-variant-numeric:tabular-nums;color:var(--chu)}
body.quay-day .hi-cl-no b{color:var(--loi-700)}
body.quay-day .hi-cl-0 b{color:var(--chu-mo)}
/* Đang chọn: bản mẫu 2b vẽ «Chờ lấy» XANH LÁ (hàng đã về, sẵn giao); các nhóm khác
   theo khuôn chip chọn chung của gói (4a): nền `--chinh-100`, viền 2px `--chinh-500`. */
body.quay-day .hi-cl.hi-cl-chon{border:2px solid var(--chinh-500);background:var(--chinh-100);
  color:var(--chinh-800);font-weight:700;padding:0 11px}
body.quay-day .hi-cl.hi-cl-chon b{color:inherit}
body.quay-day .hi-cl-la.hi-cl-chon{border-color:var(--la-500);background:var(--la-100);color:var(--la-900)}
body.quay-day .hi-cl-no.hi-cl-chon b{color:var(--loi-700)}

/* THẺ ĐƠN QUẦY (2b) */
body.quay-day .hi-ds-quay{padding:0 var(--k4) var(--k4);display:flex;flex-direction:column;gap:var(--k2)}
.hi-qthe{border:1px solid var(--vien-dam);border-radius:var(--bo-the);padding:var(--k4);background:var(--nen);
  display:flex;flex-direction:column;gap:var(--k3);box-shadow:var(--bong-1)}
.hi-qdau{display:flex;align-items:baseline;gap:var(--k2)}
.hi-qdau>b{flex:1;font-size:var(--cx-h3)}
.hi-qdau>b span{font-size:var(--cx);font-weight:400;color:var(--chu-phu)}
.hi-qma{font-size:var(--cx-nho);color:var(--chu-mo);font-family:var(--font-so)}
.hi-qke{display:flex;align-items:center;gap:var(--k2);padding:var(--k3);border-radius:var(--bo-o);background:var(--nen-3)}
.hi-qke>span{font-size:18px}
.hi-qke>b{font-size:var(--cx-h3)}
.hi-qghi{font-size:var(--cx-nho);color:var(--chu-phu)}
.hi-qmon{display:flex;gap:var(--k1);flex-wrap:wrap}
.hi-qmon>span{padding:2px 8px;border-radius:var(--bo-o);font-size:var(--cx-nho);background:var(--nen-3);
  border:1px solid var(--vien);color:var(--chu)}
.hi-qno{display:flex;align-items:baseline;justify-content:space-between}
.hi-qno>span{font-size:var(--cx);color:var(--chu-phu)}
.hi-qno>b{font-size:26px;font-variant-numeric:tabular-nums}
.hi-qno>b.hi-qno-do{color:var(--loi-700)}
.hi-qno>b.hi-qno-vang{color:var(--vang-800)}
.hi-qgiao{width:100%;height:52px;border:0;border-radius:var(--bo-tron);background:var(--la-500);
  color:var(--la-900);font-weight:800;font-size:var(--cx-h3);cursor:pointer}
.hi-qnut{display:flex;gap:var(--k2)}
.hi-qnut>button{flex:1;height:var(--cao-bam);border:1px solid var(--vien-dam);border-radius:var(--bo-tron);
  background:var(--nen);color:var(--chu);font-weight:600;font-size:var(--cx);cursor:pointer}
.hi-qnut>button.hi-qthu{border-color:var(--chinh-300);background:var(--chinh-100);color:var(--chinh-800);font-weight:700}
.hi-qchan{font-size:var(--cx-nho);color:var(--chu-mo)}
.hi-qlink{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;min-height:0}
.hi-qlink:hover{color:var(--chinh-800)}

/* THANH HAI TAB DÍNH ĐÁY (2b): ô tab cao 56, biểu tượng TRÊN chữ; tab đang mở có
   vạch trên 3px `--chinh-500` và nền `--chinh-50`. */
body.quay-day #tab{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;
  grid-template-columns:repeat(var(--so-tab-day, 2), 1fr);gap:0;margin:0;padding:0 0 env(safe-area-inset-bottom);
  background:var(--nen);border-top:1px solid var(--vien);box-shadow:none}
body.quay-day #tab button{min-height:56px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;border:0;border-top:3px solid transparent;border-radius:0;
  background:var(--nen);padding:0;margin:0}
body.quay-day #tab button .tab-icon{opacity:.7}
body.quay-day #tab button .tab-chu{font-size:var(--cx-nho);color:var(--chu-phu);font-weight:400}
body.quay-day #tab button.on{border-top-color:var(--chinh-500);background:var(--chinh-50)}
body.quay-day #tab button.on .tab-icon{opacity:1}
body.quay-day #tab button.on .tab-chu{color:var(--chinh-800);font-weight:700}
.hi-chi-tiet{margin-top:var(--k2);border-top:1px solid var(--vien);padding-top:var(--k1)}
.hi-chi-tiet>summary{cursor:pointer;color:var(--chu-phu);font-size:var(--cx-nho);
  min-height:var(--cao-o);display:flex;align-items:center;gap:var(--k1)}
/* 22/09 tối (anh Huy) — THẺ BỘ CÓ HÀNG IN ĐANG CHỜ IN: nền xanh lá nhạt.
   «CTV gửi ảnh hoàn thiện lên thì bộ nào có in ấn đổi màu, để điều phối biết còn
   phải thiết kế và in cho khách.» Dùng token `--la-100`, không gõ mã màu thẳng. */
.the.hi-can-in{background:var(--la-100);border-color:var(--la-300)}
/* ══ ③ KHỐI GOM ĐƠN THEO KHÁCH — chép từ bản mẫu `man/1c.html` (gói đợt 4, 23/09) ══
   Tên mẹ + tổng nợ cả khách đọc trước (19px); từng đơn là dòng con có viên trạng thái
   và kệ, nút «Mở đơn» cao 44. Gom theo SỐ ĐIỆN THOẠI, không gom theo tên. */
.hi-khach{display:flex;flex-direction:column;gap:var(--k3);margin-bottom:var(--k3)}
.kh-khoi{border:1px solid var(--vien-dam);border-radius:var(--bo-the);overflow:hidden;background:var(--nen)}
.kh-dau{padding:var(--k3) var(--k4);background:var(--nen-phu);display:flex;flex-direction:column;gap:var(--k1)}
.kh-hang{display:flex;align-items:baseline;gap:var(--k2);flex-wrap:wrap}
.kh-hang>b{font-size:19px}
.kh-hang>span{font-size:var(--cx);color:var(--chu-phu)}
.kh-sdt,.kh-no,.kh-du{font-variant-numeric:tabular-nums}
.kh-hang>b.kh-no{color:var(--loi-700)}
.kh-hang>b.kh-du{color:var(--la-800)}
.kh-ds{display:flex;flex-direction:column;gap:var(--k3);padding:var(--k3) var(--k4);border-top:1px solid var(--vien)}
.kh-ngan{height:1px;background:var(--vien)}
.kh-don{display:flex;align-items:center;gap:var(--k3)}
.kh-don-ten{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kh-don-ten>b{font-size:var(--cx-to)}
.kh-ma{font-size:var(--cx-nho);color:var(--chu-mo);font-family:var(--font-so)}
.kh-vien{display:flex;gap:var(--k1);flex-wrap:wrap;margin-top:2px}
.kh-v{padding:2px 8px;border-radius:var(--bo-o);font-size:var(--cx-nho);border:1px solid var(--vien);
  background:var(--nen-3);color:var(--chu)}
.kh-v-la{background:var(--la-100);border-color:var(--la-300);color:var(--la-900)}
.kh-v-chinh{background:var(--chinh-100);border-color:var(--chinh-300);color:var(--chinh-800)}
.kh-mo{height:var(--cao-bam);padding:0 var(--k4);border:1px solid var(--vien-dam);border-radius:var(--bo-tron);
  background:var(--nen);color:var(--chu);font-weight:600;font-size:var(--cx);cursor:pointer;flex:none}
.hi-cuon{overflow-x:auto;margin:var(--k2) 0;-webkit-overflow-scrolling:touch}
.hi-bang{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--cx-nho)}
.hi-bang th{text-align:left;color:var(--chu-mo);font-weight:600;padding:var(--k1) var(--k2);border-bottom:1px solid var(--vien)}
.hi-bang td{padding:var(--k2);border-bottom:1px solid var(--vien);vertical-align:middle;overflow-wrap:anywhere}
.hi-bang .hi-sl{width:64px;text-align:center}
.hi-bang .hi-gia{text-align:right;white-space:nowrap;width:110px}
/* 23/09 — Ô NÚT CỦA DÒNG PHẢI XUỐNG HÀNG ĐƯỢC. `white-space:nowrap` giữ năm nút
   trên một hàng; hàng ấy dài hơn bảng nên nút cuối («🪟 Cỡ mika») nằm ngoài vùng
   nhìn thấy của khối cuộn — nút CÓ trong sổ HTML nhưng KHÔNG BẤM ĐƯỢC. Đo 23/09
   bằng `elementFromPoint` tại tâm nút: điểm ấy trả về một thẻ khác (§10.178).

   ⚠️ BẢN VÁ ĐẦU ĐỔI LỖI NÀY LẤY LỖI KIA. Cho ô nút `min-width:150px` thì trình
   duyệt lấy chỗ ấy TỪ cột tên món: tên «Khung Titan — 50x75» xuống bốn hàng, chip
   mika bị bóp thành một sợi dọc, đọc không nổi (thấy trong chính ảnh sổ tay).
   Cách đúng: ô nút KHÔNG đòi chiều ngang (`width:1%`), còn CỘT TÊN MÓN mới là cột
   được ghim — bảng vốn đã cuộn ngang trong khối, nên thiếu chỗ thì nó cuộn, không
   bóp ai cả. */
.hi-bang .hi-nut-dong{white-space:normal;width:1%}
.hi-bang td:first-child,.hi-bang th:first-child{min-width:190px}
/* …và ghim nốt hai cột NHÃN NGẮN. `overflow-wrap:anywhere` ở `.hi-bang td` cho
   phép bẻ GIỮA TỪ, nên khi bảng thiếu chỗ thì «ĐANG Ở LAB» và «Lab Ánh Việt»
   rơi xuống từng chữ cái một — một sợi dọc, đọc không nổi (đo 23/09 bằng ảnh
   sổ tay, lần thứ hai trong cùng một buổi). Hai cột này là nhãn ngắn, không bao
   giờ cần xuống hàng; bảng thiếu chỗ thì CUỘN, đó là việc của khối cuộn. */
.hi-bang td:nth-child(5),.hi-bang td:nth-child(6){white-space:nowrap}
/* HỘP CÓ BẢNG ĐƠN thì cho rộng hơn hộp thường (680 → 900). Bảng dòng có bảy cột
   và mỗi dòng nay có tới ba nút; nhét vào 680px thì nút cuối bị cắt ở mép hộp —
   vẫn cuộn tới được, nhưng người dùng phải biết là có cái để cuộn tới, mà không
   ai biết. Chỉ nới ĐÚNG hộp đơn, không nới mọi hộp: hộp hỏi một câu mà rộng 900px
   thì mắt phải chạy ngang mới đọc hết một câu ngắn. */
.hop-web:has(.hi-bang){max-width:900px}
.hi-bang .hi-nut-dong .nut{margin:2px 2px 2px 0}
/* `:not([type=checkbox])` là BẮT BUỘC: bảng nhận ảnh in có ô tích, mà luật này đứng
   SAU luật ô tích nên nó bóp méo ô tích thành hình chữ nhật dẹt (thu-o-tich-khong-meo) */
.hi-bang-nhan input:not([type=checkbox]):not([type=radio]),.hi-bang-nhan select{height:var(--cao-nut-nho);padding:0 var(--k2);font-size:var(--cx-nho)}
.hi-don-dau{display:flex;gap:var(--k2);align-items:center;flex-wrap:wrap;margin:var(--k2) 0}
.hi-ldv{display:inline-flex;gap:4px;flex-wrap:wrap}
.hi-tien{display:flex;gap:var(--k4);flex-wrap:wrap;padding:var(--k2) var(--k3);background:var(--nen-3);border-radius:var(--bo-o);margin:var(--k2) 0;font-size:var(--cx-nho)}
.hi-tien b{font-size:var(--cx)}
.hi-no{color:var(--loi-700);font-weight:700}
.hi-dong-gon{display:flex;gap:4px;flex-wrap:wrap;margin:var(--k1) 0}
.hi-dg{display:inline-block;padding:2px 8px;border-radius:var(--bo-o);font-size:var(--cx-nho);border:1px solid var(--vien);background:var(--nen-3);color:var(--chu)}
.hi-dg-la{background:var(--la-100);border-color:var(--la-300);color:var(--la-900)}
.hi-dg-vang{background:var(--vang-100);border-color:var(--vang-300);color:var(--vang-800)}
.hi-dg-do{background:var(--loi-100);border-color:var(--loi-300);color:var(--loi-700)}
.hi-dg-xanh{background:var(--chinh-100);border-color:var(--chinh-300);color:var(--chinh-800)}
.hi-anh-hang{display:flex;gap:var(--k2);margin:var(--k1) 0;flex-wrap:wrap}
.hi-anh-hang img{width:72px;height:72px;object-fit:cover;border-radius:var(--bo-o);border:1px solid var(--vien);cursor:zoom-in}
/* 16/10 (6Z9U): ảnh từng lần nhận trong «Chi tiết» — «Gỡ» dưới ảnh, «+ Thêm ảnh» cùng hàng (vùng bấm ≥ 44px: --cao-bam) */
.ia-anh-lan{margin:var(--k1) 0}
.ia-anh-o{display:flex;flex-direction:column;align-items:center;gap:4px}
.ia-anh-them{width:72px;min-height:72px;font-size:var(--cx-nho)}
@media (max-width:520px){.nut.nho.ia-anh-go{height:var(--cao-bam)}}
.hi-tim{margin:var(--k2) 0 var(--k3)}
.hi-tim input:not([type=checkbox]):not([type=radio]){flex:1;min-width:0;height:var(--cao-o)}
.hi-nhom{margin-bottom:var(--k3)}
.hi-ds{margin:var(--k2) 0;max-height:46vh;overflow:auto;border:1px solid var(--vien);border-radius:var(--bo-o)}
.hi-ds-tieu{padding:var(--k2) var(--k3);background:var(--nen-3)}
.hi-sp{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:44px;padding:var(--k2) var(--k3);border:0;border-bottom:1px solid var(--vien);background:var(--nen);text-align:left;cursor:pointer;font:inherit;color:var(--chu);position:relative}
.hi-sp:hover{background:var(--chinh-50)}
.hi-sp.on{background:var(--chinh-100);box-shadow:inset 3px 0 0 var(--chinh-500)}
.hi-sp .hi-sp-gia{position:absolute;right:var(--k3);top:var(--k2);font-weight:700;color:var(--vang-800)}
.hi-chon{margin:var(--k2) 0;padding:var(--k2) var(--k3);background:var(--nen-phu);border:1px solid var(--vien);border-radius:var(--bo-o)}
.hi-chon-ten{margin-bottom:var(--k1)}
.hi-so-bot,.hi-so-them{min-width:44px}
.hi-nk summary{cursor:pointer;margin-top:var(--k2)}
.hi-them-sp-hang{margin:var(--k2) 0 var(--k3)}
/* 23/09 chiều (anh Huy) — Ô TÌM ĐƠN bo tròn hai đầu, 🔍 trái, ✕ phải: lớp `.tim-gon` của ô
   «Tìm bé · mẹ · thư mục», ở trạng thái MỞ SẴN và kéo hết bề ngang. */
.hi-tim{flex-wrap:nowrap;align-items:center}
.hi-tim .tim-gon.hi-tim-gon{flex:1 1 auto;min-width:0;height:var(--cao-o)}
.hi-tim .hi-tim-gon .tim-o{flex:1 1 auto;width:auto;min-width:0;font-size:var(--cx);font-weight:500}
.hi-tim .hi-tim-gon .tim-nut,.hi-tim .hi-tim-gon .tim-xoa{width:var(--cao-o);font-size:var(--cx)}
.hi-tim .hi-tim-gon:focus-within{box-shadow:var(--net)}
/* BỐN Ô SỐ NHỎ đầu trang quầy («như dashboard Lark · nhỏ thôi»). Ô tiền rộng hơn một chút —
   «12.500.000đ» không được cắt cụt ở khổ 390. */
.hi-so-quay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--k2);padding:var(--k3) var(--k4) 6px;background:var(--nen-phu)}
/* 24/09 tối (anh Huy «bị cắt mất ô»): ô đang chọn có viền ngoài 3px + lệch 1px = thò 4px dưới ô; hàng tìm ngay dưới là
   hàng DÍNH (sticky, z-index 20, có nền) bắt đầu đúng mép ô nên phủ mất viền dưới. Chừa 6px đáy cho viền — không đổi lớp. */
.hi-so{display:flex;flex-direction:column;justify-content:space-between;gap:2px;min-width:0;padding:6px var(--k2);   /* số dồn đáy: nhãn một hay hai dòng thì bốn số vẫn thẳng hàng */
  background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-o)}
.hi-so-nhan{font-size:12px;line-height:1.25;color:var(--chu-phu)}
.hi-so-gt{font-size:var(--cx);font-variant-numeric:tabular-nums;color:var(--chu);white-space:nowrap}
.hi-so-no .hi-so-gt{color:var(--loi-700)}   /* «+ Thêm sản phẩm» của điều phối (23/09) */
.hi-cd-dong{padding:var(--k1) 0;border-bottom:1px dashed var(--vien)}
.hi-cd-dong>span:first-child{flex:1 1 220px}
/* 23/09 — bảng giá 2026 đưa 50 dòng vào «Chờ duyệt» (45 gói chụp): mỗi dòng MỘT HÀNG
   tên · giá · Lab · Duyệt · Từ chối, không để ô Lab chiếm cả hàng như trước. Món không gửi
   Lab (gói · dịch vụ) không có ô Lab — ô trống giữ cột thẳng hàng. Khổ hẹp thì xếp chồng. */
.hi-cd .hi-cd-dong{display:grid;grid-template-columns:minmax(0,1fr) 130px 170px auto auto;gap:var(--k2);align-items:center}
/* `.hang > input:not(…):not(…)` (0,3,1) ép min-width 180px — cùng độ ưu tiên, đặt sau thì thắng */
.hi-cd .hi-cd-dong > input.cd-gia,.hi-cd .hi-cd-dong select.cd-lab{width:100%;min-width:0;margin:0}
@media (max-width:720px){
  .hi-cd .hi-cd-dong{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto}
  .hi-cd .hi-cd-dong>span:first-child{grid-column:1 / -1}
}
@media (max-width:600px){
  .hi-bang th:nth-child(6),.hi-bang td:nth-child(6){display:none}
  .hi-tien{gap:var(--k2)}
  .hi-bang .hi-gia{width:92px}
}

/* ══ 📦 SẢN PHẨM · GIÁ VỐN trong khoá admin (22/09 tối · việc ⑩ ⑪) ══
   Bảng giá vốn là chỗ anh Huy NGỒI GÕ hàng chục ô liền, nên ô nhập phải đủ to
   để bấm trúng và dòng vừa dán phải nhìn ra ngay — dán xong mà không thấy gì
   đổi thì người ta dán lại lần nữa. */
#sp-dan{width:100%; min-height:110px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85rem; padding:9px 11px; border:1px solid var(--vien); border-radius:9px;
  background:var(--nen); color:var(--chu)}
.sp-gv{text-align:right; font-variant-numeric:tabular-nums; min-height:34px}
tr.sp-vua-dan{background:color-mix(in srgb, var(--la-700) 12%, transparent)}
tr.sp-vua-dan .sp-gv{border-color:var(--la-700)}
/* Bảng giá vốn 54 dòng: tự cuộn ngang, KHÔNG kéo cả trang theo (đo 390px 22/09 tối) */
.sp-cuon{overflow-x:auto; -webkit-overflow-scrolling:touch}
.sp-cuon .qt-bang{min-width:420px}
/* Hàng chọn kỳ: hai ô ngày + ba nút — ở 390px phải XUỐNG DÒNG, không đẩy trang rộng ra */
.sp-hang-ky{flex-wrap:wrap; row-gap:8px}
.sp-hang-ky input[type=date]{max-width:150px}

/* 🧾 Tờ hoá đơn giấy trên hộp đơn — điều phối đọc TRƯỚC khi bấm Chốt (22/09 tối) */
.hi-hoa-don{margin:10px 0 0; padding:8px 11px; border-radius:9px;
  background:var(--nen-phu); border:1px solid var(--vien); font-size:13.5px}
/* 1.5.34: dòng «Lệch …» bỏ hẳn (anh Huy) — không còn lớp `.hi-hd-lech`. «Hoá đơn số» = mã đơn tự cấp, chữ thường
   phụ (cặp --chu-phu trên --nen-phu, cùng cặp `.ia-phu-the` đang dùng); «Còn phải thu (theo hoá đơn)» — MỘT dòng to,
   số quầy thu khi khách lấy hình (chữ --chu trên nền thẻ, cặp mặc định của khối). */
.hi-so-hd{color:var(--chu-phu);font-size:13px}
.hi-con-phai-thu,.ia-con-phai-thu{font-size:17px;line-height:1.35;margin:6px 0 2px}
.hi-sua-con-thu{margin-top:6px}
/* 25/09 — «Đã thu» số còn phải thu (theo hoá đơn). Dòng + nút cùng hàng, xuống dòng khi hẹp. Đã thu: chữ --tot-chu
   (la-800) trên nền --tot-nen (la-100) = 4,98:1 (đo Chrome 25/09) — cặp «tốt» sẵn có, không mã màu mới (luật 08 ⑤).
   Hộp xác nhận: số tiền TO một dòng; nhóm chọn cách trả thiếu thì viền + chữ đỏ tại nhóm (luật ⑫, cặp --loi-700 trên
   nền hộp ≥ 4,5:1 — cùng cặp `.loi`). Nút/ô cao theo --cao-bam (vùng bấm điện thoại ≥ 44px). */
.ia-cpt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ia-cpt-da-thu{color:var(--tot-chu);background:var(--tot-nen);border:1px solid var(--tot-vien);border-radius:9px;padding:4px 10px;font-size:15px}
.ia-cpt-thu,.ia-cpt-go{min-height:var(--cao-nut-nho)}
.ia-cpt-so{font-size:30px;line-height:1.2;margin:10px 0 8px}
.ia-cpt-cach{border:1px solid var(--vien);border-radius:9px;padding:6px 12px 8px;margin:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.ia-cpt-cach legend{font-size:var(--cx);padding:0 4px}
.ia-cpt-cach label{display:flex;align-items:center;gap:8px;min-height:var(--cao-bam);font-size:15px;cursor:pointer}
.ia-cpt-cach label input{margin:0}
.ia-cpt-cach.o-thieu{border-color:var(--loi-700)}
/* 💰 1.5.35 M9 — khối «Cần thu» theo khách (anh Huy «số tổng cần thu phải là số lớn»): dòng TO một số, rồi mỗi phần một
   dòng chữ phụ nhỏ. Còn thu: chữ --loi-700 trên nền thẻ (≥ 4,57:1 cả trên nền lỗi nhạt — chú thích biến); đủ: --tot-chu
   (la-800) trên nền thẻ. Không đậm (luật 08 ②: nội dung một cỡ, cỡ TO là đủ nổi). Phần phụ --chu-phu, ≥ 12px (luật ①). */
.ia-can-thu{margin:6px 0 2px;display:flex;flex-direction:column;gap:2px}
.ia-can-thu-so{font-size:20px;line-height:1.3}
.ia-can-thu-no{color:var(--loi-700)}
.ia-can-thu-du{color:var(--tot-chu)}
.ia-can-thu-phu{color:var(--chu-phu);font-size:var(--cx-nho);line-height:1.4;overflow-wrap:anywhere}
.ia-can-thu-phu.ia-cpt-da-thu{color:var(--tot-chu);font-size:var(--cx-nho);align-self:flex-start}
.ia-qr-ghi-chu{margin:6px 0 0;color:var(--chu-phu)}
/* 🔒 23/09 · việc ④ — chữ dặn NƠI IN trên một dòng. Nền hơi tối để mắt biết ngay
   đây là chữ nội bộ, không phải chữ của khách. Khách không có đường nào thấy nó:
   trang khách chỉ nhận `{ ten, soLuong }`, cắt ở máy chủ chứ không giấu bằng CSS. */
.hi-ghi-in{margin-top:3px; padding:2px 7px; border-radius:7px;
  background:var(--nen-phu); border:1px solid var(--vien); display:inline-block; max-width:100%}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN «📦 SẢN PHẨM · GIÁ VỐN» — chép từ bản mẫu `man/1h.html` · `man/1i.html`
   (gói thiết kế đợt 4, 23/09).
   ══════════════════════════════════════════════════════════════════════════ */
/* 1h · kỳ + file đối chiếu */
.sp-the{background:var(--nen);border:1px solid var(--vien-dam);border-radius:var(--bo-hop);padding:var(--k5);
  box-shadow:var(--bong-2);display:flex;flex-direction:column;gap:var(--k4);max-width:720px;margin:var(--k3) 0 var(--k5)}
.sp-the-tieu{font-size:var(--cx-h2)}
.sp-ky-hang{display:flex;gap:var(--k3);align-items:flex-end;flex-wrap:wrap}
.sp-o-ngay{display:flex;flex-direction:column;gap:var(--k1);margin:0}
.sp-o-ngay>span{font-size:var(--cx-nho);color:var(--chu-phu);font-weight:400}
.sp-o-ngay>input[type="text"]{height:var(--cao-o);width:160px;border:1px solid var(--vien-o);border-radius:var(--bo-o);
  padding:0 var(--k3);font-size:var(--cx);font-variant-numeric:tabular-nums;margin:0}
.sp-nut-tai{height:var(--cao-o);padding:0 var(--k5);border:0;border-radius:var(--bo-tron);background:var(--chinh-500);
  color:var(--chu-tren-chinh);font-weight:700;font-size:var(--cx-to);cursor:pointer}
.sp-nut-tai:disabled{opacity:.6;cursor:wait}
.sp-luu-y{padding:var(--k3);border-radius:var(--bo-o);background:var(--vang-100);border:1px solid var(--vang-300);
  font-size:var(--cx-nho);color:var(--vang-800)}
.sp-mono{font-family:var(--font-so)}
.sp-cot{display:flex;flex-direction:column;gap:var(--k2)}
.sp-cot-nhan{font-size:var(--cx-nho);letter-spacing:.08em;text-transform:uppercase;color:var(--chu-mo);font-weight:700}
.sp-cot pre{margin:0;padding:var(--k3);background:var(--nen-3);border-radius:var(--bo-o);font:12.5px/1.7 var(--font-so);
  white-space:pre-wrap;color:var(--chu)}

/* 1i · nhập giá vốn hàng loạt */
.gv-the{background:var(--nen);border:1px solid var(--vien-dam);border-radius:var(--bo-hop);box-shadow:var(--bong-2);
  overflow:hidden;max-width:900px;margin:var(--k5) 0}
.gv-dau{padding:var(--k4) var(--k5);display:flex;align-items:center;gap:var(--k3);border-bottom:1px solid var(--vien)}
.gv-dau>b{flex:1;font-size:var(--cx-h2)}
.gv-nut-dan{height:var(--cao-bam);padding:0 var(--k4);border:1px solid var(--vien-dam);border-radius:var(--bo-tron);
  background:var(--nen);color:var(--chu);font-weight:600;font-size:var(--cx);cursor:pointer}
.gv-dan{padding:var(--k3) var(--k5);border-bottom:1px solid var(--vien);background:var(--nen-phu);display:flex;flex-direction:column;gap:var(--k2)}
.gv-the .qt-bang-boc{border:0;border-radius:0;margin:0}
.qt-bang.gv-bang{font-size:var(--cx)}
.qt-bang.gv-bang th{padding:var(--k2) var(--k4);background:var(--nen-3);font-size:var(--cx-nho);font-weight:700;color:var(--chu-mo);
  text-transform:none;letter-spacing:0}
.qt-bang.gv-bang td{padding:var(--k2) var(--k4);border-bottom:1px solid var(--vien)}
.qt-bang.gv-bang tbody tr{cursor:default}
.qt-bang.gv-bang th:nth-child(1),.qt-bang.gv-bang td:nth-child(1){width:150px}
.qt-bang.gv-bang th:nth-child(3),.qt-bang.gv-bang td:nth-child(3){width:190px}
.qt-bang.gv-bang th:nth-child(4),.qt-bang.gv-bang td:nth-child(4){width:130px}
.qt-bang.gv-bang th:nth-child(5),.qt-bang.gv-bang td:nth-child(5){width:170px;padding-top:var(--k1);padding-bottom:var(--k1)}
.gv-nhom{color:var(--chu-phu)}
.gv-sku{font-family:var(--font-so);font-size:var(--cx-nho);color:var(--chu-mo)}
.gv-so{text-align:right;font-variant-numeric:tabular-nums}
.qt-bang.gv-bang input.sp-gv{height:36px;width:100%;max-width:none;border:1px solid var(--vien-o);border-radius:var(--bo-o);
  background:var(--nen);padding:0 var(--k3);font-variant-numeric:tabular-nums;font-size:var(--cx)}
.qt-bang.gv-bang input.sp-gv.gv-co{border-color:var(--chinh-500);background:var(--chinh-50);font-weight:600}
.qt-bang.gv-bang input.sp-gv:focus{border:2px solid var(--chinh-500);background:var(--nen);box-shadow:var(--net);outline:0;padding:0 11px}
.qt-bang.gv-bang input.sp-gv::placeholder{color:var(--chu-tat);font-weight:400}
.gv-chan{padding:var(--k4) var(--k5);display:flex;align-items:center;gap:var(--k4);flex-wrap:wrap}
.gv-luu{height:var(--cao-o);padding:0 var(--k5);border:0;border-radius:var(--bo-tron);background:var(--chinh-500);
  color:var(--chu-tren-chinh);font-weight:700;font-size:var(--cx-to);cursor:pointer}
.gv-luu:disabled{opacity:.6;cursor:wait}
.gv-go{font-size:var(--cx);color:var(--chu-phu)}
.gv-dem{margin-left:auto;padding:var(--k2) var(--k3);border-radius:var(--bo-o);background:var(--la-100);
  border:1px solid var(--la-300);color:var(--la-900);font-size:var(--cx);font-weight:600}

/* ══ 1b · «💬 LỜI NHẮN KHÁCH» — HAI CỤM TRONG MỘT THẺ HAI CỘT (bản mẫu `man/1b.html`) ══ */
.qt-the.ln-the{display:flex;flex-direction:column;gap:var(--k5)}
/* 23/09 chiều (anh Huy) — CÀI ĐẶT HỆ THỐNG: MỖI NHÓM VIỆC MỘT THẺ. Mở ra là lưới thẻ; bấm thẻ
   nào thì chỉ hiện ô của nhóm ấy. Thẻ là <button> thật: bấm được bằng phím, có vòng focus. */
.cd-luoi-nhom{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--k3);margin:var(--k3) 0 var(--k5)}
.cd-nhom{display:flex;align-items:flex-start;gap:var(--k3);width:100%;min-height:var(--cao-bam);padding:var(--k3) var(--k4);
  background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-the);text-align:left;cursor:pointer;
  color:var(--chu);font:inherit;transition:border-color var(--nhanh),background var(--nhanh)}
.cd-nhom:hover{border-color:var(--chinh-500);background:var(--chinh-100)}
.cd-nhom:focus-visible{outline:2px solid var(--chinh-500);outline-offset:2px}
.cd-nhom-hinh{font-size:24px;line-height:1.2;flex:0 0 auto}
.cd-nhom-chu{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.cd-nhom-chu b{font-size:var(--cx);font-weight:700}
.cd-nhom-chu small{font-size:var(--cx-nho);color:var(--chu-phu);line-height:1.4}
.cd-nhom-dem{flex:0 0 auto;font-size:var(--cx-nho);color:var(--chu-phu);white-space:nowrap}
.cd-ve-hang{margin:var(--k2) 0 var(--k3)}
.ln-tieu{font-size:var(--cx-h2)}
.ln-luoi{display:grid;grid-template-columns:1fr 1fr;gap:var(--k5)}
@media (max-width:760px){.ln-luoi{grid-template-columns:1fr}}
.ln-cot{display:flex;flex-direction:column;gap:var(--k3);min-width:0}
.ln-dau{display:flex;align-items:baseline;gap:var(--k2);padding-bottom:var(--k2);border-bottom:2px solid var(--chinh-300)}
.ln-dau.ln-dau-hang{border-bottom-color:var(--la-300)}
.ln-dau>b{font-size:var(--cx-h3)}
.ln-dau>span{font-size:var(--cx-nho);color:var(--chu-mo)}
.ln-dau>span.ln-moi{padding:2px 8px;border-radius:var(--bo-o);background:var(--la-100);border:1px solid var(--la-300);color:var(--la-900)}
.ln-cot .qt-o-luoi.ln-o{display:flex;flex-direction:column;gap:var(--k3)}
.qt-hang-o.ln-hang{display:flex;flex-direction:column;align-items:stretch;gap:var(--k1);margin:0;text-align:left}
.qt-hang-o.ln-hang>*{text-align:left}
.qt-hang-o.ln-hang .qt-o-ten{font-size:var(--cx);font-weight:600}
.ln-phu{color:var(--chu-mo);font-weight:400}
.qt-hang-o.ln-hang textarea.ln-nhap{width:100%;border:1px solid var(--vien-o);border-radius:var(--bo-o);
  font-size:var(--cx);line-height:1.5;padding:var(--k2) var(--k3);resize:vertical;color:var(--chu);font-weight:400}
/* cụm gửi link: cao đúng một dòng (44) như bản mẫu; kéo góc để xem cả câu */
.ln-cot[data-cum="loi-nhan-link"] textarea.ln-nhap{height:var(--cao-o);min-height:var(--cao-o);overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;color:var(--chu-mo)}
.ln-cot[data-cum="loi-nhan-link"] textarea.ln-nhap:focus{white-space:pre-wrap;overflow:auto;height:auto;min-height:88px;color:var(--chu)}
.ln-cot[data-cum="loi-nhan-hang"] textarea.ln-nhap{min-height:88px;padding:var(--k3)}
.ln-cho{font-size:var(--cx-nho);color:var(--chu-mo);font-family:var(--font-so)}
.ln-chu-giai{margin-top:var(--k2);padding:var(--k3);border-radius:var(--bo-o);background:var(--nen-phu);
  border:1px solid var(--vien);display:flex;flex-direction:column;gap:var(--k2)}
.ln-chu-giai-tieu{font-size:var(--cx-nho);letter-spacing:.08em;text-transform:uppercase;color:var(--chu-mo);font-weight:700}
.ln-cg-hang{display:flex;gap:var(--k2);flex-wrap:wrap;align-items:center}
.ln-cg-hang>span:last-child{font-size:var(--cx-nho);color:var(--chu-mo)}
/* Viên mẫu CHỈ để chỉ chỗ — không phải nút, không bấm được, nên không là <button>. */
.ln-nut-mau{height:var(--cao-bam);padding:0 var(--k4);border:1px solid var(--vien-dam);border-radius:var(--bo-tron);
  background:var(--nen);color:var(--chu);font-weight:600;font-size:var(--cx);display:inline-flex;align-items:center}

/* ═══════════════ 🖨 IN ẤN & CÔNG NỢ (24/09 — bản mẫu chốt V39, `hang-in.js` `veInAn`) ═══════════════
   Mọi màu là CẶP token «nền / chữ trên nền» khai ở `khoi-sukids.css` (1b). Bảng · chip · ô số lượng · nhóm gấp · trống/đang
   tải là khối dùng chung ở `khoi-sukids.css|js` (1c) — không khai lại ở đây. */
.ia-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ia-tieu{flex:1 1 auto;margin:0;font-size:21px}
.ia-tim{display:flex;gap:8px;align-items:center;margin:10px 0}
/* 24/09 tối: ô tìm khách dùng khuôn `.tim-gon` (như .hi-tim-gon) — kéo hết bề ngang còn lại cạnh nút «Tất cả» */
.ia-tim .tim-gon.ia-tim-gon{flex:1 1 auto;min-width:0;height:var(--cao-o)}
.ia-tim .ia-tim-gon .tim-o{flex:1 1 auto;width:auto;min-width:0;font-size:var(--cx);font-weight:500}
.ia-tim .ia-tim-gon .tim-nut,.ia-tim .ia-tim-gon .tim-xoa{width:var(--cao-o);font-size:var(--cx)}
.ia-tim .ia-tim-gon:focus-within{box-shadow:var(--net)}
.bt-tim{width:100%;margin:8px 0 4px}
.ia-luoi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:stretch;margin-bottom:12px}
.ia-nhom-o{grid-column:span 3;font-size:12px;font-weight:700;color:var(--chu-phu);text-transform:none;letter-spacing:.2px}
.ia-nhom-o2{padding-left:4px;border-left:2px solid var(--vien)}
.ia-o{border:1px solid var(--vien);border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:96px;justify-content:center;text-align:center;cursor:pointer;font:inherit}
.ia-o b{font-size:26px;line-height:1.1}
.ia-o span{font-size:12px;line-height:1.3}
.ia-o small{font-size:12px;font-weight:700}
.ia-o-chon{outline:3px solid var(--chinh-500);outline-offset:1px}
.ia-an{visibility:hidden}
.ia-tre{color:var(--loi-700)}
.ia-c1{background:var(--nen-tin);color:var(--chu-tren-tin)}
.ia-c3{background:var(--nen-lab);color:var(--chu-tren-lab)}
.ia-c4{background:var(--nen-le);color:var(--chu-tren-le)}
.ia-c5{background:var(--nen-du);color:var(--chu-tren-du)}
.ia-ds{display:flex;flex-direction:column;gap:10px}
.ia-ds-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--vien);padding:6px 0 10px}
.ia-ds-dau b{font-size:17px}
.ia-dem{background:var(--nen-xam);color:var(--chu-tren-xam);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600}
.ia-goi-y{flex:1 1 auto;font-size:12.5px;color:var(--chu-phu)}
.ia-the{background:var(--nen-the);color:var(--chu-tren-the);border:1px solid var(--vien);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--bong-1)}
.ia-the-mo{background:var(--nen-the-mo);color:var(--chu-tren-the-mo);border:3px dashed var(--vang-700);padding:12px 14px}
.ia-the-mo .ks-hang{border-color:var(--vang-vach)}
.ia-the-tich{border-color:var(--la-500);box-shadow:0 0 0 3px var(--la-100)}
.ia-the-dau{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.ia-than{flex:1 1 auto;display:flex;justify-content:space-between;gap:10px;align-items:baseline;text-align:left;background:var(--nen-bung);border:1px solid var(--la-300);border-radius:10px;padding:8px 12px;font:inherit;color:var(--chu-tren-bung);cursor:pointer;min-width:0}
.ia-than:hover{background:var(--nen-bung-re);color:var(--chu-tren-bung-re);border-color:var(--la-500)}
.ia-than:hover b{text-decoration:underline}
.ia-tieu-the{display:inline-flex;gap:6px;align-items:baseline;min-width:0;overflow-wrap:anywhere}
.ia-tieu-the b{font-size:15px}
.ia-mui{color:var(--la-800)}
.ia-ma{font-family:ui-monospace,Menlo,monospace;color:var(--chu-phu);font-size:12.5px;white-space:nowrap}
.ia-tich{width:20px;height:20px;accent-color:var(--la-700);flex:0 0 auto;margin-top:8px}
/* `.ngang` — hàng ngang của tab In Ấn (24/09: tên dùng từ Đợt 2 mà CHƯA khai, mọi hàng rơi về khối dọc —
   ô số lượng giãn hết chiều ngang; đo bằng Chrome thật, không thấy được qua bài thử mã) */
.ngang{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ia-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ia-hoi{width:var(--cao-nut-nho);height:var(--cao-nut-nho);border-radius:50%;border:1px solid var(--vien-dam);background:var(--nen-chip);color:var(--chu-tren-chip);font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:0}
.ia-phu-the{color:var(--chu-phu);font-size:12.5px;overflow-wrap:anywhere}
.ia-nut{display:flex;flex-wrap:wrap;gap:8px}
.ia-nut-them{border-style:dashed}
.nut.vang{background:var(--nen-vang);border-color:var(--vang-500);color:var(--chu-tren-vang-nut)}
.nut.vang:hover:not(:disabled){background:var(--nen-vang-re);color:var(--chu-tren-vang-re)}
.ia-no{color:var(--loi-700)}
.ia-mo{color:var(--chu-phu)}
/* thanh gửi in MỘT dòng (M · N4+) */
.ia-thanh-in{position:sticky;top:0;z-index:2;background:var(--nen-thanh);padding:6px 0}
.ia-thanh-dong{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ia-chon-tat{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--chu-phu);cursor:pointer}
.ia-vach{width:1px;height:24px;background:var(--vien)}
.ia-lab-nhan{font-size:13px;color:var(--chu-phu)}
.ia-tron{width:var(--cao-nut-nho);height:var(--cao-nut-nho);flex:0 0 auto;border-radius:50%;padding:0;font-size:18px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--vien-dam);background:var(--nen);color:var(--chu)}
.ia-tron-them{background:var(--nen-bung);border-color:var(--la-700);color:var(--chu-tren-bung)}
.ia-tron-bot{background:var(--nen-no);border-color:var(--loi-300);color:var(--chu-tren-no);font-size:14px}
.ia-tron-bot[aria-pressed="true"]{background:var(--nen-the);border-color:var(--vien-o);color:var(--chu)}
.ia-lab-bot .ia-lab{border-style:dashed;border-color:var(--loi-500);background:var(--nen-bot);color:var(--chu-tren-bot)}
.ia-gian{flex:1 1 auto}
.ia-nut-la{background:var(--nen-nut-la);border-color:var(--la-500);color:var(--chu-tren-nut-la)}
.ia-nut-la:hover:not(:disabled){background:var(--nen-nut-la-re);color:var(--chu-tren-nut-la-re)}   /* 24/09: --la-700 cũ chỉ 4.30:1 */
/* hộp */
.ia-dong-x{position:absolute;right:16px;top:12px;border:none;background:none;font-size:22px;cursor:pointer}
.ia-hop-bang{margin:10px 0}
.ia-cot-nut{display:flex;flex-direction:column;gap:8px}
.ia-nut-trong{border-color:transparent}
.ia-qr-giua{display:flex;flex-direction:column;align-items:center;gap:8px;margin:8px 0}
.ia-qr-tien{font-size:26px;color:var(--vang-800)}
.ia-qr-anh{width:220px;max-width:70vw;height:auto;background:var(--nen)}
.ia-cho-tien{font-size:13px;color:var(--chu-tren-cho-tien);background:var(--nen-cho-tien);border:1px dashed var(--chinh-500);border-radius:10px;padding:6px 10px;text-align:center}
.ia-hai-cot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ia-mat{border:1px solid var(--vien);border-radius:10px;padding:10px;margin-top:6px}
.ia-chon-sl{border:2px solid var(--chinh-500);background:var(--nen-thanh);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.ia-sp-dong{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px dashed var(--vien);font-size:13.5px}
.ia-sp-chon{background:var(--nen-chon);color:var(--chu-tren-chon)}
.ia-sp-ten{flex:1 1 auto;min-width:0;font-weight:600;overflow-wrap:anywhere}
.ia-sp-phu{display:block;font-weight:400;font-size:12px;color:var(--chu-phu)}
.ia-sp-gia{flex:0 0 auto;min-width:84px;text-align:right}
.ia-nut-mini{flex:0 0 auto;height:var(--cao-nut-nho);padding:0 12px;border-radius:999px;border:0;background:var(--nen-nut-mini);color:var(--chu-tren-nut-mini);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.ia-bao-nhe{margin:6px 0 0;font-size:13px;color:var(--chu-tren-bao);background:var(--nen-bao);border-radius:8px;padding:6px 10px}
.ia-bao-nhe.loi{color:var(--chu-tren-no);background:var(--nen-no)}
.ia-ct-bang{margin:6px 0 10px}
.ia-ct-viec{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ia-chon-dong{display:flex;flex-direction:column;gap:6px}
.ia-dong-chon{text-align:left}
.ia-ky{margin-bottom:6px}
.nl-du{color:var(--la-800);font-weight:700}
.nl-thieu{color:var(--loi-700);font-weight:700}
.nl-xong-nho{display:block;font-size:12.5px;color:var(--vang-800);margin-top:4px}
@media (max-width:640px){
  .ia-luoi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ia-nhom-o,.ia-nhom-o2{grid-column:span 3;border-left:0;padding-left:0}
  .ia-nhom-o2{grid-row:3}
  .ia-tron,.ia-hoi,.ia-nut-mini{min-width:var(--cao-bam);min-height:var(--cao-bam)}   /* luật 08 ⑩: vùng bấm điện thoại */
}

/* ══ WEB QUẦY «📦 Giao Ảnh» (24/09 · U2 · U5) — dùng lại khối .ia-*; chỉ thêm ba thứ ══ */
.hi-so.ia-so-bam{font:inherit;text-align:left;cursor:pointer;border:1px solid var(--vien);background:var(--nen)}
.hi-so.ia-so-bam:hover{border-color:var(--chinh-300)}
.hi-so.ia-o-chon{outline:3px solid var(--chinh-500);outline-offset:1px;background:var(--nen-tin)}
/* món bày NGAY trên thẻ chờ lấy — quầy đếm trước mặt khách (GIỮ bản mẫu 2b) */
.ia-mon-quay{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--cx);color:var(--chu)}
.ia-mon-quay span{white-space:normal}
/* gom theo SĐT khi một số có ≥ 2 đơn (GIỮ bản mẫu 1c) */
.ia-gom{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:8px 12px;margin:6px 0;border:1px solid var(--chinh-300);
  border-radius:10px;background:var(--nen-chon);color:var(--chu-tren-chon);font-size:var(--cx)}
.ia-gom .ia-no{color:var(--loi-700)}
.ia-gom .ia-du{color:var(--la-800)}
.ia-dau.ia-dau-quay{justify-content:flex-end;margin:0 0 6px}
/* Danh mục SP (C1 · C2 — 24/09): nhóm SKU là nút gấp; kệ/Lab mỗi cái một dòng có Sửa · Xoá */
.nhom-tieu.dm-nhom-nut{display:flex;align-items:center;gap:6px;width:100%;text-align:left;font:inherit;font-weight:700;cursor:pointer;
  border:1px solid var(--vien);border-radius:10px;background:var(--nen);padding:8px 12px;margin:6px 0 0}
.dm-kh{display:flex;flex-direction:column;gap:4px}
.dm-kh-dong{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:4px 0;border-bottom:1px dashed var(--vien)}
.dm-kh-dong:last-child{border-bottom:0}
.dm-kh-nut{gap:6px}
.nut.dm-xoa{color:var(--loi-700);border-color:var(--loi-300)}
/* 📇 dải nhắc gắn mã hợp đồng Lark (24/09) — cặp màu vàng của khối */
.ia-nhac-hd{background:var(--nen-moi);color:var(--chu-tren-moi);border:1px solid var(--vang-300);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.ia-nhac-hd .nho{color:var(--chu-tren-moi)}
.ia-nhac-hd-ds{margin-top:8px}
.ia-gan-ds{margin:4px 0}

/* ══ 🩺 SỨC KHOẺ STUDIO — KHUNG DASHBOARD (24/09 · kế hoạch C Đợt 1–2 · luật 08) ══
   Mọi màu trỏ biến SẴN CÓ (không mã màu mới) · chữ ≥ 12px · thẻ số là <button> (bấm ra danh sách, aria-expanded)
   nền --nen trên mặt phẳng trang (khác nền, luật ⑤) · vùng bấm ≥ --cao-bam. Biểu đồ đường: .bdd-* (bieu-do.js). */
.db-ky{display:flex; flex-wrap:wrap; align-items:center; gap:var(--k2); margin:6px 0 4px}
.db-ky-nut{height:var(--cao-nut-nho); min-height:var(--cao-nut-nho); padding:0 var(--k3); border:1px solid var(--vien);
  border-radius:var(--bo-tron); background:var(--nen); color:var(--chu); font-size:var(--cx-nho); cursor:pointer}
.db-ky-nut[aria-pressed="true"]{background:var(--chinh-100); border-color:var(--chinh-500); color:var(--chinh-800)}  /* 4.52:1 */
.db-ky-nut:focus-visible,.db-the:focus-visible,.db-khau-o:focus-visible{outline:2px solid var(--chinh-500); outline-offset:2px}
/* tab nhóm (24/09 · anh Huy «mỗi mục là 1 tab»): một hàng, tràn thì cuộn TRONG hàng chứ không đẩy trang ra ngang (390px);
   tab đang xem = gạch chân màu chính + chữ chinh-800 (4.52:1 trên nền trắng, cùng cặp với .db-ky-nut) */
.db-tabs{display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--vien); margin:var(--k2) 0 var(--k2); scrollbar-width:thin}
.db-tab{flex:0 0 auto; min-height:var(--cao-bam); padding:0 var(--k3); border:0; border-bottom:3px solid transparent; background:none;
  font:inherit; font-size:var(--cx-nho); color:var(--chu-mo); cursor:pointer; white-space:nowrap}
.db-tab:hover{color:var(--chu)}
.db-tab[aria-selected="true"]{border-bottom-color:var(--chinh-500); color:var(--chinh-800); font-weight:600}
.db-tab:focus-visible{outline:2px solid var(--chinh-500); outline-offset:-2px}
.db-den{font-size:12px; color:var(--chinh-800); margin-top:2px}
.db-tu-chon{display:inline-flex; align-items:center; gap:6px}
.db-tu-chon input[type="date"]{height:var(--cao-nut-nho); font-size:var(--cx-nho)}
.db-cu{margin-left:auto}
.db-luoi{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:var(--k2)}
.db-the{display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-height:var(--cao-bam); padding:var(--k3);
  background:var(--nen); border:1px solid var(--vien); border-radius:var(--bo-the); text-align:left; color:var(--chu);
  font:inherit; cursor:pointer; min-width:0}
button.db-the:hover{border-color:var(--chinh-500)}
.db-the[aria-expanded="true"]{border-color:var(--chinh-500); background:var(--chinh-100)}
.db-the.rong{grid-column:1/-1; cursor:default}
.db-ten{font-size:var(--cx-nho); color:var(--chu-mo); font-weight:600; line-height:1.3}
.db-ten small{font-weight:400}
.db-so{font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.15}
.db-so.chua{font-size:var(--cx-nho); font-weight:600; color:var(--chu-mo)}
.db-phu{font-size:12px; color:var(--chu-mo)}
.db-ds{margin:var(--k2) 0 var(--k3); padding:var(--k3); background:var(--nen); border:1px solid var(--chinh-500); border-radius:var(--bo-the)}
.db-ds-dau{font-weight:700; font-size:var(--cx); margin-bottom:6px}
.db-ds-dau small{font-weight:400; color:var(--chu-mo); font-size:12px}
.db-bang{width:100%; border-collapse:collapse; font-size:var(--cx-nho)}
.db-bang th,.db-bang td{text-align:left; padding:7px 10px; border-bottom:1px solid var(--vien); font-weight:400}
.db-bang th{font-size:12px; color:var(--chu-mo); font-weight:600}
.db-trong,.db-chua{font-size:var(--cx-nho); color:var(--chu-mo); margin:6px 0 0}
.db-khau-hang{display:flex; align-items:stretch; gap:5px; overflow-x:auto; width:100%; padding-bottom:4px}
.db-khau-o{flex:1 0 74px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px;
  background:var(--nen); border:1px solid transparent; border-radius:var(--bo-o); cursor:pointer; font:inherit; color:var(--chu)}
.db-khau-o[aria-expanded="true"]{border-color:var(--chinh-500); background:var(--chinh-100)}
.db-khau-cot{height:64px; width:100%; display:flex; align-items:flex-end; background:var(--nen-3); border-radius:7px 7px 0 0; overflow:hidden}
.db-khau-cot span{display:block; width:100%; background:var(--chinh-500); min-height:2px}
.db-khau-o b{font-size:1rem; font-variant-numeric:tabular-nums}
.db-khau-ten{font-size:12px; line-height:1.25; text-align:center}
.db-khau-lau{font-size:12px; color:var(--chu-mo); text-align:center; font-variant-numeric:tabular-nums}
.bd-duong{width:100%}
.bdd-dinh{font-size:12px; color:var(--chu-mo)}
.bdd-svg{width:100%; height:120px; display:block}
.bdd-truc{stroke:var(--vien); stroke-width:1; vector-effect:non-scaling-stroke}
.bdd-duong{stroke:var(--chinh-500); stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linejoin:round}
.bdd-cham{fill:var(--chinh-800)}
.bdd-nhan{position:relative; height:18px; font-size:12px; color:var(--chu-mo)}
.bdd-nhan span{position:absolute; transform:translateX(-50%); white-space:nowrap}
.bdd-nhan span:first-child{transform:none}
.bdd-nhan span:last-child{transform:translateX(-100%)}
/* 24/09 (QĐ 1): ô «Người chốt bán» trong hộp «+ Bán thêm» — chữ 12px+, ô cao theo --cao-nut-nho */
.bt-nguoi-o{display:flex; align-items:center; gap:var(--k2); margin:2px 0 4px; font-size:var(--cx-nho)}
.bt-nguoi{height:var(--cao-nut-nho); font-size:var(--cx-nho); max-width:100%}
.db-cuon{width:100%; overflow-x:auto}   /* bảng nhiều cột cuộn TRONG thẻ, trang không tràn ngang ở 390px */
.db-ten small,.db-ds-dau small,#qt-than .qt-h1 small{font-size:12px}   /* 24/09: <small> mặc định .83em → 10,4px dưới sàn luật 08 ① */

/* ══ GIAOANHIN TRÊN ĐIỆN THOẠI — chỉnh gọn (30/09 · kế hoạch giaoanhin điện thoại, anh Huy «sửa lại giao diện dễ dùng hơn tí») ══
   Đo 375×812 trước khi sửa: thanh đầu 141 px (tên trang gãy 5 dòng) + tab đáy 59 → khung chiếm ~25% màn; nút «Nhận hàng vào kho»
   ở y≈1050, phải cuộn mới thấy; ô ghi chú kho · ô tìm chữ < 16 px nên iPhone tự PHÓNG TO trang khi chạm vào ô.
   Chỉ đổi bố cục, không đổi chức năng; chỉ dưới `body.quay-day` + khổ ≤ 640, nên cổng điều phối trên máy tính không đổi. */
@media (max-width:640px){
  /* thanh đầu 2 hàng chữ gọn: tên trang MỘT dòng (cắt «…»), tên người đăng nhập nhỏ ngay dưới; nút đứng bên phải */
  body.quay-day .dau{display:grid;grid-template-columns:auto minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:auto;
    column-gap:var(--k2);row-gap:0;padding:var(--k2) var(--k3)}
  body.quay-day .dau > *{grid-row:1 / span 2}
  body.quay-day .dau-icon{grid-column:1}
  body.quay-day .dau-ten{grid-column:2;grid-row:1;align-self:end;min-width:0;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;font-size:var(--cx);line-height:1.3}
  body.quay-day .dau .ten-toi{grid-column:2;grid-row:2;align-self:start;min-width:0;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;line-height:1.3}
  body.quay-day .dau > button{align-self:center}
  /* ô nhập ≥ 16 px: dưới 16 px thì Safari iPhone phóng to cả trang mỗi lần chạm vào ô */
  body.quay-day input:not([type=file]):not([type=checkbox]):not([type=radio]),body.quay-day textarea,body.quay-day select{font-size:16px}
  /* nút chính của thẻ nhận hàng DÍNH ĐÁY ngay trên thanh tab — luôn thấy, câu lý do ngay trên nút.
     Thẻ `.nl-lo` bỏ `overflow:hidden` (nó chặn `position:sticky`), đầu thẻ tự bo góc. */
  body.quay-day .nl-lo{overflow:visible}
  body.quay-day .nl-lo-dau{border-radius:var(--bo-the) var(--bo-the) 0 0}
  body.quay-day .nl-xong-muc{position:sticky;bottom:calc(60px + env(safe-area-inset-bottom));z-index:5;
    margin:0 calc(-1 * var(--k4)) calc(-1 * var(--k4));padding:var(--k2) var(--k4) var(--k3);background:var(--nen);
    border-top:1px solid var(--vien);border-radius:0 0 var(--bo-the) var(--bo-the)}
  body.quay-day .nl-xong-muc .nl-xong-cau{order:-1}
  body.quay-day .nl-xong-muc .nl-xong{order:0}
}

/* ══ GIAO DIỆN ĐIỆN THOẠI — BẢNG CHUNG A · B (01/10 · ke-hoach/KE-HOACH-TU-DO-SALE-DIEN-THOAI.md mục 8) ══════════════════
   Đo trước khi sửa (bản chạy d2f959b, 375×812): lưới Tủ đồ bắt đầu ở 667 px (chọn một mục → 869 px, không thấy sản phẩm
   nào); khung dính 257/812 px khi cuộn; 20 ô chữ < 16 px; thanh Lưu chỉ thấy khi cuộn hết 2.920 px. Khối này đặt CUỐI file để
   thắng các luật cùng độ ưu tiên phía trên mà không cần `!important`. Máy tính (≥ 900 px) không đổi. */

/* ── A4 · Ô nhập ≥ 16 px khi màn hẹp: dưới 16 px Safari iPhone tự PHÓNG TO cả trang mỗi lần chạm vào ô. Luật chung cho
   mọi vai (giaoanhin đã có riêng 30/09); các ô có id/lớp riêng đặt cỡ nhỏ hơn được kê đích danh ngay dưới. */
@media (max-width:899px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),select,textarea{font-size:16px}
  body.sale-moi .td-thanh #td-tim,body.sale-moi .td-thanh select,body.sale-moi .td-loc-muc,
  .td-mA-form input:not([type=checkbox]):not([type=radio]),.td-mA-form select,.td-them-o,.td-mA-ten{font-size:16px}
}

/* ── A1 · Đầu trang sale trên điện thoại: logo đã nói «Sukids», chữ «Sukids Studio» bị cắt còn «Suki…» và đẩy tên người trực
   còn «Sa…» (bốn nút ? · ⚠ · 🔔 · Ra cùng hàng). Bỏ chữ tên hệ, tên người được chỗ. Bốn nút GIỮ NGUYÊN trên điện thoại:
   anh Huy 12/09 — không được giấu nút thoát; «?» mở sổ tay đúng màn (M7). ── */
@media (max-width:640px){
  body.sale-moi .ten-he{display:none}
  body.sale-moi .ten-toi{flex:1 1 auto;font-size:13px}
  /* giaoanhin: chuông và «Ra» vẽ 32 px — vùng chạm 44 px như mọi nút điện thoại (luật 08 ⑩) */
  body.quay-day .dau .chuong,body.quay-day .dau #nut-ra{min-width:44px;min-height:44px;height:44px}
  body.sale-moi #nut-ra{height:44px;min-height:44px}
}

/* ── B · TỦ ĐỒ của sale trên điện thoại ── */
.td-nut-them-tac,.td-o-nhan-chu,.td-goi-y,.td-sua-ds,.td-mo-loc,.td-anh-nut{display:none}
/* Thẻ trang phục: dòng size dưới tên (mọi khổ — trước chỉ «TD-0005 · Váy công c…» một dòng). */
.cc-the .cc-ma .td-the-size{display:block;font-size:12px;font-weight:400;opacity:.9;overflow:hidden;text-overflow:ellipsis}
/* Ô gõ có gợi ý (máy tính): ô chiếm trọn chỗ của nó trong lưới bốn ô Mẫu A. */
.td-o-co-nhan{display:flex;flex-direction:column;gap:4px;min-width:0}
.td-o-co-nhan>input:not([type=checkbox]):not([type=radio]){width:100%}
.td-mA-chan-phu{display:flex;gap:var(--k3);flex-wrap:wrap;padding:var(--k1) var(--k4) 0}
/* Máy tính: hàng số đo nay nằm CÙNG lưới với hàng trên (để điện thoại xếp nó ngay sau danh mục). Lưới thêm đúng một khe
   8 px mà trước đây không có (hai hàng là hai khối liền nhau trong khối gập) — đủ làm form 1920×1080 tràn 8 px, phá mục tiêu
   số một của Mẫu A «nhập xong một bộ không phải cuộn» (thu-man-tu-do-chrome bắt 01/10). Bù đúng khe ấy. */
@media (min-width:900px){ .td-mA-hang>.td-nhan-so-do,.td-mA-hang>.td-mA-do{margin-top:-8px} }

@media (max-width:899px){
  /* Hàng tiêu đề: «Copy link tủ đồ» + «⋯ Thêm» một hàng; ba nút ít dùng + ô «Link gắn nguồn» chỉ hiện khi bấm «⋯». */
  body.sale-moi .td-nut-them-tac{display:inline-flex;align-items:center;min-height:44px}
  body.sale-moi .cc-hang-dau:not(.mo-them) .td-an-dt,
  body.sale-moi .cc-hang-dau:not(.mo-them) #td-copy-tu .nguon-link{display:none}
  body.sale-moi .cc-hang-dau .nut.nho{min-height:44px}
  body.sale-moi #td-copy-tu .nut{min-height:44px}

  /* Cột danh mục: THÔI DÍNH (dính 135 px + đầu 56 + tab đáy 66 = 32% màn bị khung chiếm khi cuộn lưới). Nhãn «DANH MỤC»,
     nút ＋ và ô lọc vào tấm lọc (chip «☰ Lọc»); dải chip còn lại một hàng chọn một chạm. */
  body.sale-moi .cc-ben{position:static;padding:4px 0 8px;margin:0 -14px 8px;border-bottom:0;background:transparent}
  body.sale-moi .cc-ben-dau,body.sale-moi .td-loc-muc{display:none}
  /* Cả dải (☰ Lọc · Tất cả · từng mục) cuộn ngang MỘT khối — trước «Tất cả» đứng ngoài, dải mục chỉ còn mẩu 40 px. */
  body.sale-moi .td-dai-muc{overflow-x:auto;scrollbar-width:none;padding:0 14px 2px}
  body.sale-moi .td-dai-muc::-webkit-scrollbar{display:none}
  body.sale-moi .td-dai-muc>.cc-muc-dong{margin-left:0}
  body.sale-moi #td-ds-muc{display:contents}
  body.sale-moi .td-mo-loc{display:inline-flex;flex:0 0 auto;font-weight:600}

  /* Khối «mục đang mở»: một hàng tên (cắt «…») + một hàng nút cuộn ngang; bỏ dòng «Link gửi khách: …» (nút Copy đã chép
     đúng link ấy). Trước: tên gãy ba dòng + bốn nút hai hàng + đoạn link ≈ 190 px đẩy cả ô tìm xuống dưới mép màn. */
  body.sale-moi .td-muc-mo{padding:10px 12px;overflow:hidden}
  body.sale-moi .td-muc-mo-hang{display:grid;grid-template-columns:repeat(4,max-content);gap:6px 8px;
    overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px}
  body.sale-moi .td-muc-mo-hang::-webkit-scrollbar{display:none}
  body.sale-moi .td-muc-mo-ten{grid-column:1/-1;position:sticky;left:0;max-width:calc(100vw - 52px);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
  body.sale-moi .td-muc-mo-hang .nut{min-height:44px}
  body.sale-moi .td-muc-mo-link{display:none}

  /* Thanh công cụ: ô tìm + «＋ Thêm» một hàng; ô chọn trạng thái ẩn — sáu chip trạng thái ngay trên đã lọc đúng việc ấy
     (hai chỗ lọc cùng một thứ trên 375 px là một hàng thừa). */
  body.sale-moi .td-thanh{flex-wrap:nowrap}
  body.sale-moi .td-thanh #td-tim{flex:1 1 auto;min-width:0}
  body.sale-moi .td-thanh select{display:none}
  body.sale-moi .td-thanh #td-them{flex:0 0 auto;padding:0 14px}
  body.sale-moi .td-hang-chip{margin-bottom:8px}

  /* Thẻ: tên hai dòng thay vì một dòng cắt cụt. */
  body.sale-moi .cc-chinh .cc-the .cc-ma{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    line-height:1.3}

  /* ── KHUNG SỬA một bộ ── */
  /* Đầu khung: mã + nút đóng một hàng, TÊN BỘ trọn hàng dưới (trước bị cắt «Váy công chúa mẫu 1 thi…»). */
  .td-mA-dau{flex-wrap:wrap;row-gap:4px}
  .td-mA-dau .td-mA-ten{order:5;flex:1 1 100%;font-size:17px;min-height:44px}
  .td-mA-dau .td-mA-luu{flex:1 1 auto}
  .td-mA-x{width:44px;height:44px}
  /* Ảnh: hai nút thật, ẩn vùng «Kéo ảnh vào đây» (điện thoại không kéo thả được). Dải ảnh chừa mép cho nút ✕ (trước bị cắt
     nửa dưới mép dải). */
  .td-mA .td-tha{display:none}
  .td-mA .td-anh-nut{display:grid}
  .td-mA .td-anh-nut .anh-nut{min-height:48px;font-size:15px;margin:0}
  .td-mA .td-anh-day{padding:4px 0}
  .td-mA .td-anh2 .nut-xoa-anh{top:6px;right:6px;width:32px;height:32px}
  /* Bốn ô «Danh mục · Size · Màu · Tuổi» tan vào lưới cha (display:contents) để xếp lại thứ tự: Danh mục → Cân nặng ·
     Chiều cao → Size → Màu → Tuổi → Từ khoá → Ghi chú. */
  .td-mA-4o{display:contents}
  .td-nhan-muc{order:1} #td-f-muc{order:2}
  .td-nhan-so-do{order:3} .td-mA-do{order:4}
  .td-o-size{order:5} .td-o-mau{order:6} .td-o-tuoi{order:7}
  .td-nhan-chu-de{order:8} #td-chu-de{order:9}
  .td-nhan-ghi{order:10} .td-o-ghi{order:11}
  .td-nhan-ghi-khach{order:12} #td-f-ghi-khach{order:13}
  .td-o-nhan-chu{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--chu-phu);font-weight:600;
    margin:6px 0 0}
  .td-mA-do{gap:8px}
  .td-mA-do input:not([type=checkbox]):not([type=radio]){width:72px}
  /* Gợi ý chạm-chọn: chip 44 px, cuộn ngang một hàng. */
  .td-goi-y{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
  .td-goi-y::-webkit-scrollbar{display:none}
  .td-goi-y-chip{flex:0 0 auto;min-height:44px;min-width:44px;padding:0 12px;border-radius:22px;border:1px solid var(--vien-dam);
    background:var(--nen-chip);color:var(--chu-tren-chip);font:inherit;font-size:14px;cursor:pointer}
  /* Nhãn: chip CHỈ để tích; ✕ ẩn mục + «+ thêm mục» chỉ khi bấm «✏️ Sửa danh sách» của nhóm ấy. */
  .td-nhom-ten{display:flex;align-items:center;gap:8px}
  .td-sua-ds{display:inline-flex;align-items:center;margin-left:auto;min-height:44px;padding:0 10px;border:0;background:none;
    color:var(--chinh-800);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
  .td-nhom-tich:not(.sua) .td-o-tich-x,.td-nhom-tich:not(.sua) .td-them-muc{display:none}
  .td-o-tich{padding:0 12px 0 10px;margin:0}
  .td-cot-tich{row-gap:8px;align-content:flex-start}
  /* Dòng chú «✕ để ẩn mục» nói về nút đã ẩn trên điện thoại — «✏️ Sửa danh sách» tự nói việc ấy. */
  .td-goi>fieldset.td-mA-hop-o>legend{display:none}
  .td-mA-link .nut{min-height:44px}
  /* Hai nút chữ «Lịch sử · Xoá» ở hàng thường; thanh «Đóng · Lưu & thêm tiếp · Lưu & đóng» DÍNH ĐÁY khung sửa (A3), chừa
     vùng an toàn iPhone. */
  .td-mA-chan-phu{padding:var(--k2) 16px 0}
  .td-mA-chan-phu .td-mA-chu{min-height:44px}
  .td-mA-chan{position:sticky;bottom:0;z-index:5;padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -6px 16px rgba(38,56,64,.08)}
  .td-mA-chan .nut{flex:1 1 0;min-height:48px;padding:0 8px;font-size:14px}
  .td-mA-chan #td-dong2{flex:0 0 auto;padding:0 14px}
  .td-mA-link{padding:0 16px}
}
.td-luu-tiep{white-space:nowrap}
.td-muc-mo-hang{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap}
.td-muc-mo-ten{font-size:var(--cx-h3);flex:1}
.td-muc-mo-link{font-size:var(--cx-nho);color:var(--chu-phu);margin:var(--k1) 0 0}

/* ── Hộp «Thêm trang phục» + tấm lọc (B1 · B2 · B12) ── */
.td-them-hop{display:flex;flex-direction:column;gap:6px}
.td-them-nhan{font-size:14px;font-weight:700;color:var(--chu);margin:4px 0 0}
.td-them-ten,.td-them-muc{width:100%;box-sizing:border-box;min-height:var(--cao-bam);padding:8px 12px;border:1px solid var(--vien-o);
  border-radius:var(--bo-o);background:var(--nen);color:var(--chu);font:inherit;font-size:16px}
.td-them-ten.o-thieu{border-color:var(--loi-700);outline:2px solid var(--loi-700);outline-offset:0}
.td-them-loi{margin:0;font-size:13px;color:var(--loi-700)}
.td-them-loi[hidden]{display:none}
.td-them-giong{display:flex;gap:10px;align-items:flex-start;margin:8px 0 0;font-weight:400;font-size:14px;padding:10px 12px;border:1px solid var(--vien);
  border-radius:var(--bo-o);background:var(--nen-phu);cursor:pointer;min-height:var(--cao-bam)}
.td-them-giong input[type=checkbox]{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--chinh-700)}
.td-them-giong small{display:block;font-size:13px;color:var(--chu-phu);margin-top:2px}
.td-them-phu{margin:4px 0 0;font-size:13px;color:var(--chu-phu)}
.td-loc-tam{gap:6px}
.td-loc-tam-tim{width:100%;box-sizing:border-box;min-height:var(--cao-bam);padding:8px 12px;border:1px solid var(--vien-o);
  border-radius:var(--bo-o);font:inherit;font-size:16px}
.td-loc-tam-nhom{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--chu-phu);letter-spacing:.04em;text-transform:uppercase}
.td-loc-tam-ds{display:flex;flex-direction:column;gap:4px}
.td-loc-tam-dong{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--cao-bam);padding:0 12px;
  border:1px solid var(--vien);border-radius:var(--bo-o);background:var(--nen);color:var(--chu);font:inherit;font-size:15px;
  text-align:left;cursor:pointer}
.td-loc-tam-dong[aria-pressed="true"]{background:var(--chinh-100);border-color:var(--chinh-500);color:var(--chinh-800);font-weight:600}
.td-loc-tam-dong i{font-style:normal;color:var(--chu-phu)}
.td-loc-tam-dong b{font-weight:600;color:var(--chu-phu)}

/* ── A2 · C3 · MỌI HỘP CỦA CỔNG LÀ TẤM TRƯỢT TỪ ĐÁY trên điện thoại (01/10) ──
   Đo giaoanhin 375×812 (bàn thử 4433): hộp chung `#man-ct-web` — «Giao ảnh» (thu tiền/giao trước) · «Chi tiết» · «+ Bán thêm»
   · «+ Khách lẻ» — treo ở ĐỈNH màn, nút chốt nằm giữa màn, ngón cái phải với lên; «Chi tiết» cao 1.108 px tràn cả màn. Hộp hỏi
   `#man-hoi-w` đã là tấm đáy cho sale từ 10/09 — nay MỌI vai (CTV · điều phối · quầy giaoanhin dùng điện thoại). Chỉ CSS: một chỗ,
   mọi hộp cùng đổi, không hộp nào phải sửa mã. Hộp tự cuộn trong 92dvh (thanh địa chỉ Safari co giãn → dvh, không vh). */
@media (max-width:640px){
  .man-web{align-items:flex-end;padding:0;overflow:hidden}
  .man-web .hop-web{width:100%;max-width:none;max-height:92dvh;overflow:auto;overscroll-behavior:contain;
    border-radius:20px 20px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom, 0px));animation:truotLen .22s ease-out}
  .man-web .hop-web::before{content:'';display:block;width:38px;height:4px;border-radius:2px;background:var(--vien-dam);margin:0 auto 12px}
  .man-web .hop-web:has(.bh-hop){padding:0 0 env(safe-area-inset-bottom, 0px);max-width:none}
  .man-web .hop-web:has(.bh-hop)::before{margin:10px auto 6px}
  .man-hoi-w{align-items:flex-end;padding:0}
  .hop-hoi-w{width:100%;max-width:none;border-radius:20px 20px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    animation:truotLen .22s ease-out}
}

/* ── C1 · Bốn ô số giaoanhin (Khách chưa lấy · Số tiền chưa thu · Mới giao hôm nay · Đang in ở Lab): trên 375 px bốn ô chen một
   hàng, nhãn gãy hai dòng («Số tiền chưa / thu»). Nay một DẢI cuộn ngang, nhãn một dòng, số ngay cạnh — cùng nếp sáu chip trạng thái
   Tủ đồ. Ô vẫn là nút lọc như cũ (chỉ đổi dáng). ── */
@media (max-width:640px){
  body.quay-day .hi-so-quay{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;grid-template-columns:none}
  body.quay-day .hi-so-quay::-webkit-scrollbar{display:none}
  body.quay-day .hi-so-quay .hi-so{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:8px;min-height:44px;
    padding:0 14px;white-space:nowrap}
  body.quay-day .hi-so-quay .hi-so-nhan{white-space:nowrap}
}

/* ── C2 · Thanh bước của thẻ «Nhận Ảnh In»: ① Đếm món ② Chụp ảnh ③ Cất kệ — xong thì ✓ xanh, bước đang làm viền đậm. Chạm là cuộn
   tới bước ấy. Chữ 14 px · nút 44 px (luật 08 ① ⑩); xanh «xong» = cặp lá sẵn có (`--la-100`/`--la-800`). ── */
.nl-buoc{display:flex;gap:6px;margin:0 0 10px;flex-wrap:nowrap}
.nl-buoc-o{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 6px;
  border:1px solid var(--vien);border-radius:22px;background:var(--nen-chip);color:var(--chu-tren-chip);font:inherit;font-size:14px;cursor:pointer}
.nl-buoc-o i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  font-style:normal;font-size:12px;font-weight:700;background:var(--nen);border:1px solid var(--vien-dam)}
.nl-buoc-o span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nl-buoc-o.dang{border-color:var(--chinh-700);font-weight:600}
.nl-buoc-o.xong{background:var(--la-100);border-color:var(--la-300);color:var(--la-800)}
.nl-buoc-o.xong i{background:var(--la-800);border-color:var(--la-800);color:var(--chu-nguoc)}
/* Ô tìm gọn (`.tim-gon`) trên điện thoại: cao 44 px để nút ✕ xoá chữ đủ vùng chạm (đo 01/10: 44×42). */
@media (max-width:640px){ .tim-gon{min-height:var(--cao-bam)} }

/* ══ 📦 NHẬP HÀNG TỒN CŨ (01/10 · ke-hoach/KE-HOACH-NHAP-HANG-TON-CU.md) — tấm trượt KS.tamTruot, thanh bước dùng lại .nl-buoc ══ */
.tc-tam{display:flex;flex-direction:column;gap:10px}
.tc-trang{display:flex;flex-direction:column;gap:8px}
.tc-nhan{font-size:13px;color:var(--chu-phu)}
.tc-buoc-chu{font-size:12px;color:var(--chu-phu)}
.tc-tam input:not([type=checkbox]){min-height:44px;font-size:16px}
.tc-ds-bo,.tc-ds-sp{display:flex;flex-direction:column;gap:6px}
.tc-bo,.tc-sp{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;padding:8px 10px;text-align:left;
  border:1px solid var(--vien);border-radius:var(--bo-o);background:var(--nen);color:var(--chu);font:inherit;cursor:pointer}
.tc-bo[aria-pressed="true"]{border:2px solid var(--chinh-500);background:var(--chinh-100);color:var(--chinh-800)}
.tc-kl-bat{display:flex;align-items:center;gap:8px;min-height:44px}
.tc-kl-o{display:flex;flex-direction:column;gap:6px}
.tc-da-chon{display:flex;flex-direction:column;gap:6px}
.tc-mon{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--vien)}
.tc-mon-ten{flex:1 1 160px;min-width:0}
.tc-mon-bo{min-width:44px;min-height:44px}
.tc-loi{margin:0;color:var(--loi-700);font-size:13px}
.ia-nut-ton-cu{white-space:nowrap}
/* «+ Thêm sản phẩm mới» mở hộp web (.man-web) TRÊN tấm trượt (z 85) */
body:has(.ks-tam-man) .man-web{z-index:88}
/* hai nút đầu màn quầy («+ Khách lẻ» · «+ Hàng tồn cũ») — vùng bấm ≥ 44 px trên điện thoại (luật 08 ⑩; đo 01/10: 30 px) */
@media (max-width:640px){.ia-dau-quay>.nut{min-height:44px}}

/* ══ 02/10 · «Số tiền chưa thu» một con số cho mọi vai + sổ «✅ Đã giao» (ke-hoach/KE-HOACH-DA-GIAO-VA-SO-CHUA-THU-02-10.md) ══ */
.hi-so-tach{margin:6px 0 0;font-size:12px;color:var(--chu-phu)}
.ia-chi-dp{margin:0;color:var(--chu-phu);flex:1 1 220px}
.ia-anh-giao{gap:8px;flex-wrap:wrap}
.ia-anh-giao-o{width:72px;height:72px;object-fit:cover;border-radius:var(--bo-o);border:1px solid var(--vien);cursor:zoom-in}

/* ══ 02/10 · khối «Khách cũ / Khách mua lẻ» + hộp «✏️ Sửa thông tin khách» (ke-hoach/KE-HOACH-SUA-THONG-TIN-KHACH-GIAOANHIN-02-10.md) ══ */
.kk{display:flex;flex-direction:column;gap:8px}
.kk-cu,.kk-le{display:flex;flex-direction:column;gap:6px}
.kk-cu[hidden],.kk-le[hidden]{display:none}
.kk input{min-height:44px;font-size:16px}
.kk input.o-thieu,.kk input.o-thieu:focus-visible{border-color:var(--loi-700);outline:2px solid var(--loi-700);outline-offset:0}
.kk-loai .ks-chip{min-height:44px}
.kk-hd-dong{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--vien)}
.kk-hd-dong>span{flex:1 1 200px;min-width:0}
.kk-hd-dong .kk-chon{min-height:44px}
.kk-khong-thay{color:var(--chu-phu)}
.kk-gc input:not([type=checkbox]):not([type=radio]){min-height:44px;font-size:16px;width:100%}   /* không trúng ô tích (thu-o-tich-khong-meo) */

/* ══ TAB «🎨 THIẾT KẾ» của điều phối (05/10) ══
   Chip «NEW» đỏ đặc — cặp nền/chữ của `.nut.nguy.dac` (--loi-700 / --chu-nguoc, ≥ 4,5:1), không thêm mã màu.
   Thẻ GẤP sẵn: tiêu đề là <button aria-expanded> (luật 08 ⑥). Ảnh nhỏ hàng ngang, cuộn ngang TRONG hàng — trang không tràn. */
.tk-the .tk-mo{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;
  display:inline-flex;gap:6px;align-items:baseline;min-height:var(--cao-nut-nho)}
.tk-the .tk-mo .mui{font-size:12px;color:var(--chu-phu)}
.tk-moi{background:var(--loi-700);color:var(--chu-nguoc);font-size:12px;letter-spacing:.04em}
.tk-phu{color:var(--chu-phu);margin-top:2px}
.tk-than{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.tk-dong{font-size:13px;display:flex;flex-direction:column;gap:2px}
.tk-anh-hang{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;max-width:100%}
.tk-anh{flex:0 0 auto;width:72px;height:72px;padding:0;border:1px solid var(--vien);border-radius:var(--bo-o);
  background:var(--nen-phu);overflow:hidden;cursor:zoom-in}
.tk-anh img{width:100%;height:100%;object-fit:cover;display:block}
.tk-anh-lon{display:block;max-width:100%;max-height:70vh;margin:0 auto;border-radius:var(--bo-o)}
.tk-nut{display:flex;flex-wrap:wrap;gap:6px}
.tk-nhom{margin-top:10px}
@media(pointer:coarse){.tk-anh{width:80px;height:80px}}
/* Ô gửi ảnh thiết kế theo lần (05/10): hàng ba nút cách gửi · tiêu đề từng lần (+ «Gỡ lần» của điều phối) */
.ov-cach{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.ov-cach-giai{color:var(--chu-phu);flex-basis:100%}
.ov-lan{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:8px;font-size:13px;font-weight:600}
/* 06/10 (BL-261006-PQAG · BQRJ): tab «🎨 Thiết kế» theo bộ màu dây chuyền của «Việc đang chạy» — không mã màu mới.
   Chưa = vàng (như «lọc RAW») · Hôm nay = lá (như «CTV đã nộp») · Tổng/trước = xanh (như «khách chọn») · Không cần = xám. */
.o-tom.m-tk-chua,.nhom-tieu.bam-gap.m-tk-chua .nhan-dem{background:var(--b-raw-nen);color:var(--b-raw-chu);border-color:var(--b-raw-vien)}
.o-tom.m-tk-hom-nay,.nhom-tieu.bam-gap.m-tk-hom-nay .nhan-dem{background:var(--b-nop-nen);color:var(--b-nop-chu);border-color:var(--b-nop-vien)}
.o-tom.m-tk-truoc,.nhom-tieu.bam-gap.m-tk-truoc .nhan-dem{background:var(--b-khach-nen);color:var(--b-khach-chu);border-color:var(--b-khach-vien)}
.o-tom.m-tk-khong-can,.nhom-tieu.bam-gap.m-tk-khong-can .nhan-dem{background:var(--b-xu-ly-nen);color:var(--b-xu-ly-chu);border-color:var(--b-xu-ly-vien)}
.nhom-tieu.bam-gap.m-tk-chua{border-left:4px solid var(--b-raw-vien)}
.nhom-tieu.bam-gap.m-tk-hom-nay{border-left:4px solid var(--b-nop-vien)}
.nhom-tieu.bam-gap.m-tk-truoc{border-left:4px solid var(--b-khach-vien)}
.nhom-tieu.bam-gap.m-tk-khong-can{border-left:4px solid var(--b-xu-ly-vien)}
.m-the-tk-chua{background:var(--b-raw-the);border-color:var(--b-raw-vien)}
.m-the-tk-hom-nay{background:var(--b-nop-the);border-color:var(--b-nop-vien)}
.m-the-tk-truoc{background:var(--b-khach-the);border-color:var(--b-khach-vien)}
.m-the-tk-khong-can{background:var(--b-xu-ly-the);border-color:var(--b-xu-ly-vien)}
/* ô đang chọn: viền đậm trong ô (không làm mờ ô khác — mờ là tụt tương phản chữ, luật 08 ⑤) */
.tk-tom .o-tom.o-tom-chon{box-shadow:0 0 0 2px var(--chu) inset}
.tk-tom .o-tom:focus-visible{outline:2px solid var(--chinh-500);outline-offset:2px}
.tk-dang-xem{margin:-6px 0 var(--k2);color:var(--chu-phu)}

/* ══ «✅ VIỆC HÔM NAY» của điều phối (06/10 · ke-hoach/KE-HOACH-06-10-VIEC-HOM-NAY.md) — luật 08: chữ ≥ 12px, chỉ biến màu sẵn
   có, chip khác nền mặt phẳng (chip --nen trên thân --nen-phu), ô tích có vùng bấm ≥ 44px (--cao-bam). ══ */
.vhn-dau{display:flex;align-items:center;justify-content:space-between;gap:var(--k3);flex-wrap:wrap}
.vhn-dau h2{margin:0}
.vhn-ngay{display:flex;align-items:center;gap:var(--k2);margin:0 0 0 auto}
.vhn-ngay label{color:var(--chu-phu)}
.vhn-che-do{display:flex;align-items:center;justify-content:space-between;gap:var(--k3);flex-wrap:wrap;margin:var(--k2) 0}
.vhn-tom-tat{margin:var(--k2) 0 var(--k3)}
.vhn-chip-hang{display:flex;gap:var(--k2);flex-wrap:wrap;margin:var(--k3) 0}
.vhn-chip{height:var(--cao-chip);padding:0 var(--k4);border:1px solid var(--vien-dam);border-radius:var(--bo-tron);
  background:var(--nen);color:var(--chu-phu);font:600 var(--cx-nho)/1 var(--font);cursor:pointer}
.vhn-chip[aria-pressed="true"]{background:var(--chinh-100);border-color:var(--chinh-500);color:var(--chinh-800)}  /* 4.52:1 — cặp của .db-ky-nut */
.vhn-chip:focus-visible{outline:none;box-shadow:var(--net)}
.vhn-khoi-than{display:flex;flex-direction:column;gap:var(--k2)}
/* dòng tiêu đề nhóm khối To do (01/11) — chữ phụ ≥ 12px, không phải nút */
.vhn-nhom-tieu{margin:var(--k3) 0 0;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--chu-phu)}
.vhn-dong{display:flex;gap:var(--k2);align-items:flex-start;padding:var(--k2) var(--k3);border:1px solid var(--vien);
  border-radius:var(--bo-the);background:var(--nen)}
.vhn-tich{display:flex;align-items:center;justify-content:center;flex:0 0 var(--cao-bam);min-height:var(--cao-bam);cursor:pointer}
.vhn-tich input{margin:0;cursor:pointer;accent-color:var(--sk-xanh-dam)}   /* cỡ ô tích theo luật chung của cổng (thu-o-tich-khong-meo) */
.vhn-noi{flex:1;min-width:0;padding-top:var(--k2)}
.vhn-ten{font-size:var(--cx);color:var(--chu);overflow-wrap:anywhere}
.vhn-loai{color:var(--chu-phu)}
.vhn-chi{font-size:var(--cx-nho);color:var(--chu-phu);margin-top:2px;overflow-wrap:anywhere}
.vhn-ai{font-size:var(--cx-nho);color:var(--tot-chu);margin-top:2px}
.vhn-nhan{display:inline-block;font-size:12px;line-height:1.5;padding:0 var(--k2);border-radius:var(--bo-tron);
  background:var(--nhac-nen);color:var(--nhac-chu);white-space:nowrap}
.vhn-ton{background:var(--thuong-nen);color:var(--thuong-chu)}
.vhn-gap{background:var(--gap-nen);color:var(--gap-chu)}
.vhn-nut{margin-top:var(--k2);display:flex;flex-wrap:wrap;gap:var(--k2)}
.vhn-xong{background:var(--nen-phu)}
.vhn-xong .vhn-ten{color:var(--chu-phu)}
/* Báo cáo cuối ngày (Đợt 4) — ô lỗi dùng cặp màu --gap-* sẵn có (luật 08 ⑫) */
.vhn-bao-cao{border:1px solid var(--vien);border-radius:var(--bo-the);background:var(--nen);padding:var(--k2) var(--k3);margin:0 0 var(--k3)}
.vhn-bc-dau{display:flex;align-items:center;justify-content:space-between;gap:var(--k3);flex-wrap:wrap}
.vhn-bc-tt{font-size:var(--cx);color:var(--chu)}
.vhn-bc-than{display:flex;flex-direction:column;gap:var(--k2);margin-top:var(--k3)}
.vhn-bc-than label{font-size:var(--cx-nho);color:var(--chu-phu);font-weight:600}
.vhn-bc-than textarea{width:100%;box-sizing:border-box;padding:var(--k2) var(--k3);border:1px solid var(--vien-o);border-radius:var(--bo-o);
  font:var(--cx)/1.5 var(--font);color:var(--chu);background:var(--nen);resize:vertical}
.vhn-bc-than textarea.o-thieu{border-color:var(--gap-vien);box-shadow:0 0 0 1px var(--gap-vien)}
.vhn-bc-loi{margin:0;font-size:var(--cx-nho);color:var(--gap-chu)}
.vhn-bc-than .ngang{justify-content:flex-end;gap:var(--k2)}
/* 08/10 (6CUS) — hộp «Bán thêm»: chế độ «+ Thêm sản phẩm trong gói» (chỉ điều phối). Ô lý do thiếu → viền đỏ + câu đỏ ngay dưới ô (luật 08 ⑫) */
.bt-tg-khu{margin:6px 0}
.bt-tg .bt-tg-ly{width:100%;box-sizing:border-box}
.bt-tg-ly.o-thieu{border-color:var(--loi-700);outline:2px solid var(--loi-700);outline-offset:0}
.bt-tg-loi{margin:4px 0 0;font-size:13px;color:var(--loi-700)}
/* 08/10 (GYLT · R10) — trang Admin: khối «Đã bỏ qua» của To do list; tiêu đề là nút gập (aria-expanded) */
.qt-dbq-nut{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.qt-dbq-nut::before{content:'▸ ';display:inline-block;width:1.1em}
.qt-dbq-nut[aria-expanded="true"]::before{content:'▾ '}
.qt-dbq-nut:focus-visible{outline:2px solid var(--loi-700);outline-offset:2px}

/* 16/10 · Xoá ảnh PC hàng loạt (tab «Xoá ảnh PC» điều phối): ô tìm · ô tích · «Chọn tất cả» · thanh dính đáy — chữ ≥ 12px, màu trỏ biến sẵn có (luật 08) */
.xoa-loc-w{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin:0 0 10px}
/* cột không co dưới ~240px (đo 390: bốn cột `rong` co còn 75–121px, thẻ có ô tích hẹp 60px) — hẹp hơn thì hàng cột cuộn ngang */
.pipe-xoa-w > .pipe-cot{min-width:min(240px,80vw)}
.xoa-loc-w input:not([type=checkbox]){flex:1 1 220px;font-size:14px;padding:8px 10px;border:1px solid var(--vien);border-radius:10px;background:var(--nen)}
.xoa-loc-w select{font-size:14px;padding:8px 10px;border:1px solid var(--vien);border-radius:10px;background:var(--nen)}
.xoa-chon-het-w{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px;cursor:pointer}
.pipe-o .xoa-tich-w{width:20px;height:20px;accent-color:var(--chinh-500);margin-right:6px}
.xoa-thanh-w{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:var(--chinh-100);color:var(--chu-tren-chinh);border:1px solid var(--chinh-300);border-radius:10px;padding:10px 12px;margin-top:10px;font-size:14px}
.xoa-ket-luot-w{width:100%;background:var(--nen-3);border:1px solid var(--vien);border-radius:10px;padding:10px 12px;margin-top:10px;font-size:13px}
.xoa-ket-luot-w ul,.xoa-ds-hoi-w{margin:4px 0 0 18px;font-size:13px}
.xoa-ds-hoi-w{max-height:200px;overflow:auto}

/* 🎁 20/10 «Tặng thêm ảnh sửa» trong hộp «Sửa bộ» — ô thiếu đỏ tại ô (luật 08 ⑫), cặp chữ đỏ có sẵn --loi-700 */
.sua-bo .o-thieu{border-color:var(--loi-700);outline:2px solid var(--loi-700);outline-offset:0}
.sua-bo .s-tang-loi{color:var(--loi-700)}

/* Hẹn CTV: chữ lỗi --loi-900 trên nền sáng > 7:1; token có sẵn. */
.han-can-khach,.loi-han,.loi-ly-do-han{color:var(--loi-900);font-size:var(--cx-nho)}
.chon-ctv [aria-invalid="true"]{border-color:var(--loi-700)}
.doi-han select,.doi-han input,.doi-han button{min-height:var(--cao-bam)}

/* ══ 💡 Hướng dẫn lần đầu (1.5.49 D17 · V41) — bóng không lớp phủ, chỉ một phần tử một lúc ══
   chữ var(--chu) trên var(--nen) 12.19:1 · lỗi var(--loi-700) trên var(--nen) ≥ 4,57:1 · số bước var(--chu-phu) ≥ 4,51:1 */
.hd-bong{position:fixed;z-index:60;pointer-events:none;background:var(--nen);color:var(--chu);border:1px solid var(--vien-o);
  border-radius:var(--bo-o);box-shadow:var(--bong-2);padding:var(--k3);font-size:var(--cx);max-width:calc(100vw - 32px)}
.hd-bong .hd-chu{margin:0 0 var(--k2)}
.hd-bong .hd-loi{margin:0 0 var(--k2);color:var(--loi-700)}
.hd-bong .hd-hang{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap}
.hd-bong .hd-so{color:var(--chu-phu);margin-right:auto}
.hd-bong .nut{min-height:44px;pointer-events:auto}   /* thân bóng cho chạm XUYÊN (hồi quy gộp 21/10: bóng dưới «chọn ngày» đè «Xem tất cả» giờ thiết kế 13:30–17:00) — chỉ hai nút của bóng nhận */
.hd-dang-chi{outline:3px solid var(--chu-tren-chinh);outline-offset:2px}   /* viền chỉ --chu-tren-chinh trên nền trắng ≥ 3:1 */

/* ── HỘP «✂ BỚT ẢNH KHỎI LỰA CHỌN» (21/10 · BL-261020-3UHL · BL-261021-86BD): khung hộp trao tay (khoi-sukids.css — lớp che,
   Esc/Tab ở cong.js `moBotAnh`), rộng hơn cho lưới tên tấm. Chữ tên tấm 14px thường (luật ①②), nhóm tấm cuộn riêng để nút
   «Bớt ảnh» luôn thấy được. Nhóm thiếu = viền `--loi-700` như ô `.ks-lh-o.o-thieu` (luật ⑫). Ô tích ≥ 44px trên điện thoại (⑩). ── */
.ba-hop{width:min(600px,100%)}
.ba-nhom{border:1px solid var(--vien-o);border-radius:var(--bo-o, 10px);margin:0;padding:6px 10px 10px;min-width:0}
.ba-nhom.o-thieu{border-color:var(--loi-700);outline:2px solid var(--loi-700)}
.ba-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:2px 8px;max-height:min(40vh,320px);overflow:auto}
.ba-tam,.ba-ly-do{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:400;color:var(--chu);min-height:36px;overflow-wrap:anywhere}
.ba-ly-do{margin-right:14px;display:inline-flex}
@media (max-width:600px){.ba-tam,.ba-ly-do{min-height:44px}}

/* ═══ 22/10 — THẺ GHI CHÚ + THẺ HẠN + Ô 🧾 HOÁ ĐƠN trên dòng «Chờ gửi in» (anh Huy duyệt form 22/10) ═══
   Chữ ≥ 12px (luật 08 ①) · cặp nền/chữ trỏ biến SẴN CÓ (⑤): Ghi chú nền vàng nhạt (--nen-moi/--chu-tren-moi 6,02:1) ·
   Hạn nền tím nhạt (--nen-le/--chu-tren-le 4,95:1) · trễ nền đỏ nhạt (--nen-no/--chu-tren-no 4,57:1) · 🧾 có ảnh nền xanh nhạt
   (--nen-tin/--chu-tren-tin 4,52:1) · 🧾 xám (--nen-xam/--chu-tren-xam 4,56:1). Không chip nào cùng màu nền thẻ (--nen-the trắng). */
.ia-the-nhan{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ia-hd-o,.ia-chip-the,.ia-gan-the{min-height:var(--cao-nut-nho);border-radius:999px;padding:0 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:4px}
.ia-hd-co{background:var(--nen-tin);color:var(--chu-tren-tin);border-color:var(--chinh-500)}
.ia-hd-xam,.ia-hd-cho{background:var(--nen-xam);color:var(--chu-tren-xam);border-color:var(--vien);font-weight:400}
.ia-hd-o:disabled{cursor:default}
.ia-chip-ghichu{background:var(--nen-moi);color:var(--chu-tren-moi);border-color:var(--vang-300)}
.ia-chip-han{background:var(--nen-le);color:var(--chu-tren-le);border-color:var(--tim-300,var(--vien-dam))}
.ia-chip-han.ia-chip-tre{background:var(--nen-no);color:var(--chu-tren-no);border-color:var(--loi-300)}
.ia-chip-the[aria-pressed="true"]{outline:2px solid var(--chinh-500);outline-offset:1px}
.ia-gan-the{background:transparent;color:var(--chu-phu);border:1px dashed var(--vien-dam);font-weight:400}
.ia-hd-o:focus-visible,.ia-chip-the:focus-visible,.ia-gan-the:focus-visible,.ia-drop-nut:focus-visible{outline:3px solid var(--chinh-500);outline-offset:2px}
.ia-pop{display:flex;flex-direction:column;gap:10px;background:var(--nen-phu);color:var(--chu);border:1px solid var(--vien-dam);border-radius:12px;padding:12px 14px}
.ia-pop-hang{display:flex;flex-direction:column;gap:6px}
.ia-pop-nhan{font-weight:700;font-size:13px}
.ia-pop-o{height:var(--cao-o);border:1px solid var(--vien-dam);border-radius:10px;padding:0 10px;font:inherit;font-size:14px;background:var(--nen);color:var(--chu);max-width:100%}
.ia-pop-o.ia-do,.ia-pop .ia-do{border-color:var(--loi-500,var(--loi-700));box-shadow:0 0 0 2px var(--loi-100)}
.ia-pop-goi-y{display:flex;flex-wrap:wrap;gap:6px}
.ia-pop-lich{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--chu-phu)}
.ia-pop-loi{margin:0;color:var(--loi-700);font-size:12.5px}
.ia-pop-nut{display:flex;flex-wrap:wrap;gap:8px}
.ia-loc-the{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.ia-drop{position:relative}
.ia-drop-nut[data-loc="1"]{background:var(--nen-tin);color:var(--chu-tren-tin);border-color:var(--chinh-500)}
.ia-drop-bang{position:absolute;z-index:6;top:calc(100% + 4px);left:0;min-width:200px;max-width:min(360px,86vw);display:flex;flex-direction:column;align-items:stretch;gap:4px;background:var(--nen);color:var(--chu);border:1px solid var(--vien-dam);border-radius:12px;padding:8px;box-shadow:0 6px 18px rgba(38,56,64,.18);max-height:50vh;overflow:auto}
.ia-drop-bang[hidden]{display:none}
.ia-drop-bang .ks-chip{justify-content:flex-start;text-align:left;white-space:normal;height:auto;padding-top:5px;padding-bottom:5px}
/* hộp xem hoá đơn lớn */
.hd-hop{display:flex;flex-direction:column;gap:10px;min-width:0}
.hd-tieu{margin:0;font-size:17px}
.hd-dk{gap:6px}
.hd-pt{min-width:48px;text-align:center;font-size:13px}
.hd-chuyen{display:inline-flex;align-items:center;gap:6px;margin-left:8px}
.hd-chuyen[hidden]{display:none}
.hd-so{font-size:13px;min-width:34px;text-align:center}
.hd-khung{max-height:62vh;overflow:auto;border:1px solid var(--vien-dam);border-radius:10px;background:var(--nen-3);padding:6px;text-align:center}
.hd-anh{max-width:none;height:auto;display:inline-block;vertical-align:top}
.hd-anh[hidden]{display:none}
.hd-nut{display:flex;flex-wrap:wrap;gap:8px}
a.nut.hd-lark{display:inline-flex;align-items:center;text-decoration:none}
@media (max-width:640px){
  .ia-hd-o,.ia-chip-the,.ia-gan-the{min-height:var(--cao-bam)}
  .ia-drop-nut{min-height:var(--cao-bam)}
  .ia-pop-o{height:var(--cao-bam)}
}

/* ═══ 22/10 · ĐỢT 2 — THẺ NHÓM + NHẮC NHỚ TRÊN BỘ: chip · hộp «Thẻ của nhóm điều phối» · ô lọc ═══
   Màu chỉ trỏ biến/lớp SẴN CÓ (luật 08 ⑤): chip dùng `.the-mau-*` (cặp nền/chữ đã khai ở khối thẻ 05/10); nhắc nhớ hôm nay vàng, quá ngày đỏ.
   Chữ ≥ 12px (①), đậm chỉ tiêu đề (②), vùng bấm trên điện thoại ≥ 44px (⑩). */
.the-viec{flex-wrap:wrap;justify-content:flex-end}
.the-chips{display:contents}
.the-viec .the-chip{font-size:13px;min-height:var(--cao-nut-nho);padding:0 10px;border-radius:999px;max-width:100%;white-space:normal;text-align:left}
.the-viec .the-chip:focus-visible,.the-them:focus-visible{outline:3px solid var(--chinh-500);outline-offset:2px}
.the-viec .the-du{width:auto;min-width:28px;padding:0 8px;opacity:1;font-size:13px}
.vhn-noi .the-viec,.ia-the-nhan .the-viec{margin-left:0;justify-content:flex-start}
.vhn-noi .the-viec{margin-top:4px}
.loc-the-bo{margin:var(--k2) 0}
.vhn-dong[hidden],.vhn-khoi[hidden],.ia-the[hidden]{display:none}
.the-hop2{display:flex;flex-direction:column;gap:10px;min-width:0}
.th-tieu{margin:0;font-size:17px}
.th-mota{margin:0}
.th-nhom{margin:6px 0 0;font-size:14px}
.th-ds{display:flex;flex-direction:column;gap:6px}
.th-dong{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap}
.th-dong .th-tich{width:20px;height:20px;margin:0;flex:none}
.th-ten{border:0;font:inherit;font-size:13px;font-weight:400;cursor:pointer;min-height:var(--cao-nut-nho);padding:0 12px;border-radius:999px}
.th-ten:focus-visible,.the-xoa:focus-visible{outline:3px solid var(--chinh-500);outline-offset:2px}
.th-so{font-size:13px}
.th-dong .the-xoa{opacity:.75;font-size:13px;min-height:var(--cao-nut-nho);padding:0 6px}
.th-sua{display:flex;flex-wrap:wrap;gap:var(--k2);align-items:center;width:100%}
.th-sua input[type=text],.th-tao input[type=text]{flex:1 1 180px;height:var(--cao-nut-nho);border:1px solid var(--vien-dam);border-radius:10px;padding:0 10px;font:inherit;font-size:14px;background:var(--nen);color:var(--chu);min-width:0}
.th-loi-o{margin:0;color:var(--loi-700);font-size:12.5px;flex-basis:100%}
.th-loi{margin:0;color:var(--loi-700);font-size:13px}
.the-hop2 input.th-do,.the-hop2 .th-hang input.th-do,.the-hop2 .th-lich input.th-do{border-color:var(--loi-500,var(--loi-700));box-shadow:0 0 0 2px var(--loi-100)}
.th-vach{border:0;border-top:1px solid var(--vien);margin:4px 0;width:100%}
.th-nhac{display:flex;flex-direction:column;gap:10px}
.th-hang{display:flex;flex-direction:column;gap:6px}
.th-hang label,.th-nhan{font-size:13px;font-weight:700}
.th-hang input[type=text]{height:var(--cao-o);border:1px solid var(--vien-dam);border-radius:10px;padding:0 10px;font:inherit;font-size:14px;background:var(--nen);color:var(--chu);max-width:100%;min-width:0}
.th-goiy{display:flex;flex-wrap:wrap;gap:6px}
.th-goiy[hidden]{display:none}
.th-ngay{display:flex;flex-wrap:wrap;gap:var(--k2);align-items:center}
.th-hang label.th-lich{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:400}
.th-lich input[type=date]{height:var(--cao-nut-nho);border:1px solid var(--vien-dam);border-radius:10px;padding:0 8px;font:inherit;font-size:14px;background:var(--nen);color:var(--chu)}
.th-nut-nhac{display:flex;flex-wrap:wrap;gap:8px}
.th-nut-nhac [hidden]{display:none}
.th-lh{display:flex;flex-direction:column;gap:10px}
.th-lh-cach{display:flex;flex-wrap:wrap;gap:6px}
.th-lh-ds{list-style:none;margin:0;padding:0;border:1px solid var(--vien);border-radius:10px;font-size:14px}
.th-lh-ds[hidden],.th-lh-doc[hidden],.th-lh-chung[hidden]{display:none}
.th-lh-dong{display:flex;flex-direction:column;gap:2px;padding:6px 10px;min-width:0}
.th-lh-dong + .th-lh-dong{border-top:1px solid var(--vien)}
.th-lh-nd{overflow-wrap:anywhere}
.th-chan{display:flex;justify-content:flex-end}
.th-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.the-mau-chon input:focus-visible + i{outline:3px solid var(--chinh-500);outline-offset:2px}
@media (max-width:640px){
  .the-them{width:44px;height:44px}
  .the-viec .the-chip,.th-ten,.th-dong .the-xoa{min-height:var(--cao-bam)}
  .th-dong .th-tich{width:24px;height:24px}
  .th-hang input[type=text],.th-sua input[type=text],.th-tao input[type=text],.th-lich input[type=date]{height:var(--cao-bam)}
  .the-hop2 .nut,.th-goiy .ks-chip{min-height:var(--cao-bam)}
  .the-hop2 .the-mau-chon label{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:var(--cao-bam)}
}

/* Giữ kiểu ảnh bằng chứng / kiện hàng của tab In ấn — bản css 24/10 không còn các lớp này. */
.nl-anh-hang{display:flex;gap:var(--k2);align-items:center}
.nl-anh-nho{width:48px;height:48px;flex:none;border-radius:var(--bo-o);border:1px solid var(--vien);
  background:repeating-linear-gradient(45deg,var(--nen-3),var(--nen-3) 6px,var(--nen-phu) 6px,var(--nen-phu) 12px);
  background-size:cover;background-position:center}
.nl-anh-nho.nl-anh-co{background-repeat:no-repeat}
.nl-anh-nut{flex:1;height:48px;border:2px dashed var(--chinh-500);border-radius:var(--bo-o);
  background:var(--chinh-50);color:var(--chinh-800);font-weight:700;font-size:var(--cx-to);cursor:pointer}
.bh-anh{display:flex;gap:var(--k2)}
.bh-anh-nho{width:72px;height:72px;flex:none;border-radius:var(--bo-o);border:1px solid var(--vien);
  background:repeating-linear-gradient(45deg,var(--nen-3),var(--nen-3) 6px,var(--nen-phu) 6px,var(--nen-phu) 12px);
  background-size:cover;background-position:center}
.bh-anh-nho.bh-anh-co{background-repeat:no-repeat}
.bh-anh-nut{flex:1;min-height:72px;border:1px dashed var(--vien-o);border-radius:var(--bo-o);
  background:var(--nen-phu);color:var(--chinh-800);font-weight:700;font-size:var(--cx-to);cursor:pointer}
.nl-anh-nut-co{border-style:solid;border-color:var(--la-700);background:var(--nen-bung);color:var(--chu-tren-bung)}

/* ══ KHUNG NỘP ẢNH CHẠY NỀN (29/10 · BL-261029-HGNR) — khối nổi góc dưới trái, mỗi bộ một khối.
   Nhãn có CHỮ (không chỉ màu); chữ ≥12px; nền đặc để đọc được trên mọi màn. */
.nop-nen{position:fixed;left:var(--k3,12px);bottom:var(--k3,12px);z-index:60;display:flex;flex-direction:column;gap:var(--k2,8px);
  width:min(360px,calc(100vw - 24px));font-size:13px;line-height:1.35}
.nop-nen-khoi{background:var(--nen);color:var(--chu);border:1px solid var(--vien,var(--nop-vien-du-phong));border-radius:var(--bo-o,12px);
  padding:10px 12px;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.nop-nen-dau{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.nop-nen-ten{font-size:13px}
.nop-nen-pha{color:var(--chu-phu);font-size:12px;text-align:right}
.nop-nen-khoi[data-pha="loi-dong"]{border-color:var(--nop-loi-vien)}
.nop-nen-ds{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.nop-nen-loi{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nop-nen-loi > span{flex:1 1 100%;font-size:12px;color:var(--nop-loi-chu);overflow-wrap:anywhere}
.nop-nen .nut.nho{padding:2px 8px;min-height:28px;font-size:12px}
@media (max-width:640px){.nop-nen .nut.nho{min-height:44px;padding:2px 14px}}   /* điện thoại: Thử lại / ✕ / Chốt lại đủ 44px */
.nop-nen-chot{margin-top:8px;width:100%}
@media (max-width:420px){.nop-nen{width:calc(100vw - 16px);left:8px;bottom:8px}}

/* ══ CHIP HẠN trên thẻ In ấn (29/10 · BL-261028-A532) — chữ ≥12px, tương phản AA, không chỉ dựa vào màu. */
.ia-chips-han{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.ia-chip-gap,.ia-chip-can{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;
  font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap}
.ia-chip-gap{background:var(--han-do-nen);color:var(--han-do-chu);border:1px solid var(--han-do-vien)}
.ia-chip-can-do{background:var(--han-do-nen);color:var(--han-do-chu);border:1px solid var(--han-do-vien)}
.ia-chip-can-cam{background:var(--han-cam-nen);color:var(--han-cam-chu);border:1px solid var(--han-cam-vien)}
.ia-chip-can-xam{background:var(--nen-3);color:var(--chu-phu);border:1px solid var(--vien,var(--nop-vien-du-phong))}
@media (prefers-color-scheme:dark){
  .ia-chip-gap,.ia-chip-can-do{background:var(--han-do-nen-toi);color:var(--han-do-chu-toi);border-color:var(--han-do-chu)}
  .ia-chip-can-cam{background:var(--han-cam-nen-toi);color:var(--han-cam-chu-toi);border-color:var(--han-cam-vien-toi)}
  .ia-chip-can-xam{background:var(--han-xam-nen-toi);color:var(--han-xam-chu-toi);border-color:var(--han-xam-vien-toi)}
}

/* ═══ XEM ẢNH HÀNG TO — BL-261030-R8C3 (30/10, cùng luật web mới): nổi giữa màn, nền tối mờ, trên mọi hộp (#man-ct-web z 60 · hộp hỏi 80) ═══ */
.xat{position:fixed;inset:0;z-index:90;background:var(--man-anh);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;flex-direction:column;color:var(--chu-nguoc);touch-action:none;user-select:none}
.xat:focus{outline:none}   /* tabindex=-1: bấm nền tối giữ focus trong lớp để ← → Esc vẫn ăn */
.xat-dau{display:flex;align-items:center;gap:var(--k2);padding:var(--k2) var(--k2) var(--k2) var(--k4)}
.xat-dem{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xat-san{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--k2) 7.5vw var(--k6)}
.xat-anh{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--bo-o);box-shadow:var(--bong-3);transform-origin:center}
.xat-nut{width:44px;height:44px;border:0;border-radius:var(--bo-o);background:rgba(255,255,255,.12);color:var(--chu-nguoc);font-size:22px;cursor:pointer;flex:none}
.xat-nut:hover,.xat-nut:focus-visible{background:rgba(255,255,255,.24)}
.xat-truoc,.xat-sau{position:absolute;top:50%;transform:translateY(-50%);height:64px;width:48px;font-size:32px}
.xat-truoc{left:var(--k2)} .xat-sau{right:var(--k2)}
@media (max-width:640px){.xat-san{padding:var(--k2) var(--k2) var(--k6)}}

/* ══ TƯƠNG TÁC KHI TÍCH VIỆC TO DO (31/10 · Vòng 6, bản 3 anh Huy chốt) ══
   Màu theo cặp trỏ biến SẴN CÓ (luật 08 ⑤): cam = --cam-800 trên --cam-50 (≥ 4,5:1), lỗi = --gap-chu, chữ phụ = --chu-phu. Chữ ≥ 12px (--cx-nho 12.5px). */
.vhn-lan-truoc{font-size:var(--cx-nho);color:var(--chu-phu);margin-top:2px;overflow-wrap:anywhere}
/* 31/10 — dòng «AI tóm tắt · HH:MM» (luật 08: chữ ≥ 12px qua --cx-nho, màu chữ phụ trên nền thẻ, không đậm) */
.vhn-ai-tom,.th-ai .vhn-ai-tom{font-size:var(--cx-nho);color:var(--chu-phu);margin-top:2px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vhn-ai-tom.cu{opacity:.65}
.vhn-ai-nhan{white-space:nowrap}
.th-ai:not([hidden]) .vhn-ai-tom{-webkit-line-clamp:unset;display:block;margin:0 0 var(--k2)}
.vhn-canh-cam{font-size:var(--cx-nho);color:var(--cam-800);background:var(--cam-50);border-radius:6px;padding:0 var(--k2);margin-top:2px;overflow-wrap:anywhere}
.tt-them{background:none;border:0;padding:0;margin:0;font:inherit;font-size:var(--cx-nho);color:var(--chu);text-decoration:underline;cursor:pointer;min-height:0}
.tt-them[hidden]{display:none}
.tt-them:focus-visible,.tt-tom-nut:focus-visible{outline:none;box-shadow:var(--net)}
.tt-o{margin-top:var(--k2);display:flex;flex-direction:column;gap:var(--k2);padding:var(--k2) var(--k3);border:1px solid var(--vien);border-radius:var(--bo-the);background:var(--nen-phu)}
.tt-tieu{font-size:var(--cx);color:var(--chu)}
.tt-cach,.tt-goiy{display:flex;flex-wrap:wrap;gap:var(--k2)}
.tt-kq{width:100%;box-sizing:border-box;padding:var(--k2) var(--k3);border:1px solid var(--vien-o);border-radius:var(--bo-o);font:inherit;font-size:var(--cx);resize:vertical;min-height:0}
.tt-kq.th-do,.tt-ngay.th-do{border-color:var(--gap-vien);box-shadow:0 0 0 1px var(--gap-vien)}
.tt-loi{margin:0;font-size:var(--cx-nho);color:var(--gap-chu)}
.tt-loi[hidden]{display:none}
.tt-dem{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--k2)}
.tt-so{flex:none;font-variant-numeric:tabular-nums}
.tt-hen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--k2)}
.tt-ngay{height:var(--cao-nut-nho);padding:0 var(--k2);border:1px solid var(--vien-o);border-radius:var(--bo-o);font:inherit;font-size:var(--cx)}
.tt-nut{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--k2)}
.tt-dong-tom{margin-top:2px;min-width:0}
.tt-tom{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%;font-size:var(--cx-nho);color:var(--chu-phu);background:none;border:0;padding:0;margin:0;font-family:inherit;text-align:left}
.tt-tom-nut{cursor:pointer;min-height:0}
.tt-dau{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tt-duoi{flex:0 0 auto;white-space:nowrap}
.tt-ds{list-style:none;margin:var(--k2) 0 0;padding:0;border:1px solid var(--vien);border-radius:10px;font-size:14px;max-height:288px;overflow-y:auto}
.tt-dong{display:flex;flex-direction:column;gap:2px;padding:var(--k2) var(--k3)}
.tt-dong + .tt-dong{border-top:1px solid var(--vien)}
.tt-khoi{display:flex;flex-direction:column;gap:var(--k2)}
.tt-tom-tat{display:flex;flex-direction:column;gap:2px;border:1px solid var(--vien);border-radius:10px;padding:var(--k3);font-size:14px}
.tt-ls-nut{align-self:flex-start}
.tt-ls-nut[aria-expanded="true"] .mui{display:inline-block;transform:rotate(180deg)}
/* ══ GỌN ĐIỆN THOẠI (anh Huy: «chữ đang che quá nhiều màn hình») — một việc chưa mở còn ~2–3 dòng: tên + chi tiết cắt «…», phụ một dòng, nút gọn. Bài đo chiều cao: CHI_DO=gon|chua-gon ══ */
@media (max-width:640px){
  .vhn-khoi-than{gap:6px}
  .vhn-dong{padding:2px var(--k2);gap:2px}
  .vhn-tich{flex-basis:40px;min-height:40px}
  .vhn-noi{padding-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
  .vhn-noi > *{flex:0 0 100%;min-width:0}
  .vhn-noi > .vhn-ten{order:1} .vhn-noi > .vhn-chi{order:2} .vhn-noi > .vhn-ai{order:3} .vhn-noi > .vhn-lan-truoc{order:4} .vhn-noi > .vhn-canh-cam{order:5} .vhn-noi > .vhn-ai-tom{order:6} .vhn-noi > .tt-dong-tom{order:6}
  .vhn-noi > .the-viec{order:7;flex:0 0 auto;margin:0}
  .vhn-noi > .vhn-nut{order:7;flex:1 1 0;min-width:0;margin:0}   /* chip thẻ + hàng nút CÙNG MỘT hàng (nút cuộn ngang trong chỗ còn lại) */
  .vhn-noi > .tt-o{order:8}
  .vhn-ten{font-size:14px;line-height:1.35}
  .vhn-chi{margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vhn-ai,.vhn-lan-truoc,.vhn-canh-cam{margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vhn-noi > .vhn-ai-tom{display:flex;gap:4px;-webkit-line-clamp:unset;white-space:nowrap;margin-top:0}
  .vhn-ai-tom .vhn-ai-chu{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}   /* chữ cắt «…», nhãn «AI tóm tắt · HH:MM» luôn thấy */   /* điện thoại: một dòng, cắt «…» (chữ không chiếm màn) */
  .vhn-nut{gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;max-width:100%}
  .vhn-nut .nut{flex:0 0 auto;height:40px}
  .vhn-noi .the-viec .the-them{width:40px;height:40px}
  .tt-o{padding:var(--k2)}
  .tt-goiy{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--k2));padding:0 var(--k2) 2px}
  .tt-goiy .nut,.tt-cach .nut,.tt-nut .nut{height:40px;flex:0 0 auto}
  .tt-kq{font-size:14px}
}
/* ══ HẾT GỌN ĐIỆN THOẠI ══ */

/* ══ BÁO KHÁCH + NHẮC KHÁCH THANH TOÁN (31/10, bản vẽ mẫu · 01/11 bản gọn: ô tích đầu thẻ, không hiện nguyên tin) ══
   Màu chỉ trỏ biến sẵn có (luật 08 ⑤): cặp nền/chữ của .nhan (gap · thuong · tot) và tông tím/xanh baby — mỗi cặp ≥ 4,5:1 như đã ghi ở :root. */
.bk-the{border:1px solid var(--vien);border-radius:var(--bo-o);padding:var(--k2) var(--k3) var(--k2) 0;display:grid;grid-template-columns:var(--cao-bam) minmax(0,1fr);gap:0 var(--k2);background:var(--nen);transition:opacity .3s,transform .3s}
.bk-tich{display:flex;justify-content:center;align-items:flex-start;padding-top:2px;min-height:var(--cao-bam);cursor:pointer}
.bk-tich input{margin:0;cursor:pointer;accent-color:var(--sk-xanh-dam)}
.bk-noi{display:flex;flex-direction:column;gap:var(--k2);min-width:0}
.bk-dau{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.bk-ten-bo{border:0;background:none;padding:0;font:inherit;color:var(--chinh-800);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-align:left;overflow-wrap:anywhere}
.bk-ten-bo:focus-visible{outline:none;box-shadow:var(--net)}
.bk-sdt{font-size:var(--cx-nho);color:var(--chu-phu);font-variant-numeric:tabular-nums}
.bk-nhan{font-size:var(--cx-nho);padding:1px 8px;border-radius:999px;background:var(--nen-3);color:var(--chu-phu);font-variant-numeric:tabular-nums}
.bk-do{background:var(--gap-nen);color:var(--gap-chu)}.bk-vang{background:var(--thuong-nen);color:var(--thuong-chu)}.bk-tim{background:var(--tim-100);color:var(--tim-800)}.bk-xanh{background:var(--chinh-100);color:var(--chinh-800)}
.bk-than{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--k3);align-items:start}
.bk-chu{display:flex;flex-direction:column;gap:var(--k2);min-width:0}
.bk-goi-y{color:var(--cam-800);font-weight:600;font-size:var(--cx-nho)}
.bk-lan-truoc{font-size:var(--cx-nho);color:var(--chu-phu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-nut{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bk-qr{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;width:224px}
.bk-qr img{width:224px;height:224px;border:1px solid var(--vien);border-radius:10px;background:var(--nen)}
.bk-qr figcaption{display:flex;flex-direction:column;align-items:center;font-variant-numeric:tabular-nums}.bk-qr figcaption span{font-size:var(--cx-nho);color:var(--chu-phu)}
.bk-tt{display:flex;flex-direction:column;gap:6px;border:1px solid var(--vien);border-radius:8px;background:var(--nen-phu);padding:var(--k2)}
.bk-tt-phu{font-size:var(--cx-nho);color:var(--chu-phu)}
.bk-tt textarea{width:100%;box-sizing:border-box;font:inherit;border:1px solid var(--vien-o);border-radius:6px;padding:6px 8px;resize:vertical;background:var(--nen);color:var(--chu)}
.bk-tt textarea.o-thieu{border-color:var(--gap-vien);box-shadow:0 0 0 1px var(--gap-vien)}
.bk-tt-nut{display:flex;justify-content:flex-end;gap:8px}.bk-chip{display:flex;gap:6px;flex-wrap:wrap}
.bk-tong{margin:0 0 var(--k2);font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .bk-the{padding:var(--k2) var(--k2) var(--k2) 0}
  .bk-than{grid-template-columns:1fr}
  .bk-qr-khu{width:100%}.bk-qr{width:100%}.bk-qr img{width:208px;height:208px}
  .bk-nut .nut,.bk-tt .nut{height:40px}
}
.bk-hen{display:flex;align-items:center;gap:8px;font-size:var(--cx-nho);color:var(--chu-phu)}.bk-hen input[type=date]{font:inherit;border:1px solid var(--vien);border-radius:6px;padding:4px 6px}
.bk-loi{margin:0;color:var(--gap-chu);font-size:var(--cx-nho);font-weight:600}
.bk-qr-khu{display:flex;flex-direction:column;align-items:center;gap:8px;width:224px}.bk-qr-khu:not(:has(.bk-qr,.bk-qr-ly)){display:none}.bk-qr-ra{display:flex;flex-direction:column;align-items:center;gap:8px}.bk-qr-ly{margin:0;font-size:var(--cx-nho);color:var(--chu-phu)}

/* 01/11 · To do gọn: bảng tổng bấm được · xem thêm · gỡ tại chỗ · bóng tin · bộ đếm nổi góc phải dưới */
/* 01/11 · phương án B anh chốt: Ô SỐ thay bảng tổng — ô nền --nen trên thân --nen-phu (⑤), số màu chữ -800/-700 của khối (≥ 4,5:1 trên nền trắng) */
.vhn-o-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--k2)}
.vhn-o{--m-chu:var(--chinh-800);--m-vach:var(--chinh-500);display:grid;gap:2px;align-content:start;text-align:left;min-height:var(--cao-bam);
  padding:var(--k2) var(--k3);border:1px solid var(--vien);border-top:4px solid var(--m-vach);border-radius:var(--bo-o);background:var(--nen);color:var(--chu);font:inherit;cursor:pointer}
.vhn-o:hover{border-color:var(--m-vach)}
.vhn-o:focus-visible{outline:none;box-shadow:var(--net)}
.vhn-o[data-toi="bao-dong"]{--m-chu:var(--loi-700);--m-vach:var(--loi-500)}
.vhn-o[data-toi="nhac-ctv"]{--m-chu:var(--cam-800);--m-vach:var(--cam-300)}
.vhn-o[data-toi="bao-khach"]{--m-chu:var(--tim-800);--m-vach:var(--tim-300)}
.vhn-o[data-toi="nhac-thanh-toan"]{--m-chu:var(--vang-800);--m-vach:var(--vang-700)}
.vhn-o[data-toi="in-tk"]{--m-chu:var(--la-800);--m-vach:var(--la-700)}
.vhn-o-so{font-size:26px;font-weight:800;line-height:1.1;color:var(--m-chu);font-variant-numeric:tabular-nums}
.vhn-o-ten{font-size:var(--cx-nho);font-weight:600}
.vhn-o-vach{height:4px;border-radius:99px;background:var(--nen-3);overflow:hidden}
.vhn-o-vach i{display:block;height:100%;background:var(--m-vach)}
.vhn-o-xong{font-size:12px;color:var(--chu-phu)}
.vhn-tom-phu{display:flex;flex-wrap:wrap;gap:var(--k2);margin-top:var(--k2)}
.vhn-tom-dong{flex:1 1 260px;display:flex;flex-direction:column;gap:2px;padding:var(--k2) var(--k3);border:1px solid var(--vien);border-radius:var(--bo-o);background:var(--nen);font-size:var(--cx-nho);color:var(--chu-phu)}
.vhn-tom-dong b{color:var(--chu)}
.vhn-tom-qt{border-color:var(--gap-vien);background:var(--gap-nen)}
.vhn-tom-qt b{color:var(--gap-chu)}
.vhn-tom-qt-viec{color:var(--chu)}
.vhn-tom-rong{margin:0;color:var(--chu-phu)}
@media (max-width:640px){.vhn-o-luoi{grid-template-columns:repeat(3,minmax(0,1fr))}.vhn-o-so{font-size:22px}}
@media (max-width:380px){.vhn-o-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vhn-khoi{scroll-margin-top:72px}
.vhn-xem-them{align-self:flex-start;border:0;background:none;padding:6px 0;font:inherit;font-weight:600;color:var(--chinh-800);cursor:pointer;min-height:var(--cao-nut-nho)}
.vhn-xem-them:focus-visible{outline:none;box-shadow:var(--net)}
.vhn-dong,.bk-the{transition:opacity .3s,transform .3s}
.vhn-di{opacity:0;transform:translateX(24px)}
.vhn-bong{position:fixed;left:50%;bottom:120px;z-index:75;transform:translate(-50%,10px);max-width:min(560px,calc(100% - 32px));box-sizing:border-box;
  background:var(--chu);color:var(--nen);padding:var(--k3) var(--k4);border-radius:12px;font-size:var(--cx);box-shadow:var(--bong-3);opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;overflow-wrap:anywhere}
.vhn-bong.hien{opacity:1;transform:translate(-50%,0)}
.vhn-bong-tt{display:block;margin-bottom:4px;font-size:var(--cx-nho)}
.vhn-diem{position:fixed;right:16px;bottom:16px;z-index:72;display:grid;justify-items:center;gap:2px;min-width:120px;box-sizing:border-box;padding:var(--k3) var(--k4) var(--k2);
  border-radius:18px;background:var(--nen);border:3px solid var(--diem-vien);box-shadow:var(--bong-2);
  --diem-chu:var(--gap-chu);--diem-vien:var(--gap-vien);--diem-vach:var(--loi-500)}
.vhn-diem[data-muc="vang"]{--diem-chu:var(--thuong-chu);--diem-vien:var(--vang-500);--diem-vach:var(--vang-700)}
.vhn-diem[data-muc="xanh"]{--diem-chu:var(--tot-chu);--diem-vien:var(--la-500);--diem-vach:var(--la-700)}
.vhn-diem-so{line-height:1;font-variant-numeric:tabular-nums;color:var(--diem-chu)}
.vhn-diem-so b{font-size:34px;font-weight:800}
.vhn-diem-so span{font-size:20px;color:var(--chu-phu)}
.vhn-diem-chu{font-size:12px;color:var(--chu-phu);font-weight:600}
.vhn-diem-vach{width:100%;height:6px;border-radius:99px;background:var(--nen-3);overflow:hidden}
.vhn-diem-vach i{display:block;height:100%;background:var(--diem-vach);transition:width .4s}
.vhn-diem.nay{animation:vhn-nay .45s}
@keyframes vhn-nay{30%{transform:scale(1.18)}60%{transform:scale(.96)}100%{transform:scale(1)}}
.vhn-diem-cong{position:absolute;top:-6px;right:14px;font-weight:800;color:var(--tot-chu);animation:vhn-bay .9s forwards;pointer-events:none}
@keyframes vhn-bay{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-34px)}}
@media (prefers-reduced-motion:reduce){.vhn-diem.nay,.vhn-diem-cong{animation:none}.vhn-dong,.bk-the,.vhn-bong,.vhn-diem-vach i{transition:none}}
@media (max-width:480px){
  .bk-the{grid-template-columns:40px minmax(0,1fr)}
  .bk-tich input[type=checkbox],.vhn-tich input[type=checkbox]{width:26px;height:26px}   /* điện thoại: ô tích to hơn (luật riêng của ô tích, không phải luật ô chữ) */
  .bk-nut .nut,.bk-tt .nut,.tt-o .nut,.vhn-nut .nut,.vhn-mo-bc,.vhn-xem-them{min-height:var(--cao-bam);height:auto}

  .vhn-diem{right:10px;bottom:10px;min-width:92px;padding:var(--k2) var(--k3) 6px;border-radius:14px}
  .vhn-diem-so b{font-size:24px}.vhn-diem-so span{font-size:15px}
  .vhn-diem-chu{display:none}   /* điện thoại: chỉ số + vạch, bộ đếm không che thẻ */
  .vhn-khoi .nhan-dem{font-size:12px}   /* «N thẻ» có chữ — không được dưới 12px (luật 08 ①) */
  .vhn-bong{bottom:96px}
}
/* HẾT BÁO KHÁCH ══ */

/* 31/10 (66122) — mục «Mẹ chọn ảnh in» trong hộp chi tiết bộ: bảng từng ô (chữ ≥ 12px, màu theo biến sẵn có) */
.ci-dp-bang{width:100%;border-collapse:collapse;font-size:var(--cx);margin:6px 0}
.ci-dp-bang th{text-align:left;font-weight:600;color:var(--chinh-800);padding:4px 6px;border-bottom:1px solid var(--vien)}
.ci-dp-bang td{padding:4px 6px;vertical-align:middle;border-bottom:1px dashed var(--vien);overflow-wrap:anywhere}
.ci-dp-anh img{display:block;width:44px;height:58px;object-fit:cover;border-radius:4px}
.ci-dp-chip{margin:0 0 4px}
.vhn-bc-than input.vhn-bc-xl{width:100%;box-sizing:border-box;height:var(--cao-o);padding:0 var(--k3);border:1px solid var(--vien-o);border-radius:var(--bo-o);font:var(--cx)/1.5 var(--font);color:var(--chu);background:var(--nen)}
.vhn-bc-than input.vhn-bc-xl.o-thieu{border-color:var(--gap-vien);box-shadow:0 0 0 1px var(--gap-vien)}
.vhn-bc-nhan{margin:var(--k2) 0 0;font-size:var(--cx);font-weight:600;color:var(--chu)}
.vhn-bc-than .ngang:first-child{justify-content:space-between}

/* Thẻ bộ gọn dùng cặp màu hiện có; màu đo lại trong bài Chrome. */
.the-gon-trang-thai,.the-gon-viec,.the-gon-raw,.the-gon-chi-tiet{font-size:14px;font-weight:400;overflow-wrap:anywhere;margin:6px 0;color:var(--chu)}
.the-gon-trang-thai{padding:8px;border-radius:8px}
.the-gon-mau-do{color:var(--loi-700);background:var(--nen)}
.the-gon-mau-tim{color:var(--tim-800);background:var(--tim-100)}
.the-gon-mau-xanh{color:var(--chu);background:var(--nen-3)}
@media(max-width:600px){.the [data-gap-raw],.the .nut-them-menu,.the .the-nut .nut,.the .menu-them-noi .nut{min-height:var(--cao-bam,44px);white-space:normal}}

/* Ảnh mẫu CTV: dải riêng cuộn ngang, giữ cỡ trong khi byte tới.
   Nền/chữ dùng token có sẵn: vàng 7,52:1 (ô ảnh 7,20:1); xanh 4,52:1 ở bảng màu gốc. */
.anh-mau-ctv,.loi-dan-ctv{min-width:0;padding:var(--k3);margin:0 0 var(--k3);border-radius:var(--bo-the);background:var(--vang-50);color:var(--chu-tren-vang);font-size:var(--cx)}
.loi-dan-ctv{background:var(--tin-nen);color:var(--tin-chu)}
.anh-mau-ctv h3,.loi-dan-ctv h3{font-size:var(--cx);margin:0 0 var(--k2)}
.am-dai{display:flex;gap:var(--k2);max-width:100%;overflow-x:auto}
.am-anh{width:144px;height:192px;min-height:var(--cao-bam);flex:0 0 144px;border:0;border-radius:var(--bo-the);background:var(--vang-100);color:var(--chu-tren-vang);font-size:var(--cx);cursor:zoom-in;padding:0}
.am-anh img{display:block;width:100%;height:100%;object-fit:contain}
.loi-dan-ctv p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--cx);margin:0}

.am-thu-lai{min-height:var(--cao-bam)}