/* tools/dong-goi.ts — gộp 2 file kiểu, giữ nguyên thứ tự của ui/app/index.html (quyết định 124) */
/* ==== _chung/kieu.css ==== */
/* ui/_chung/kieu.css — FILE KIỂU DUY NHẤT của mọi màn hình app kho Tuệ Hải.
   Luật thẩm mỹ chung (`docs/du-an/giao-dien.md`, "Luật thẩm mỹ", Bảo chốt 21/09/2026):
   gọn, sáng, chắc tay như KiotViet — nền xám rất nhạt, thẻ trắng bo góc, tiêu đề
   to đậm, MỘT màu nhấn, nhãn trạng thái dạng viên thuốc, không gradient, không
   bóng nặng, không hình trang trí.

   ÉP, KHÔNG DẶN: mọi mã màu, cỡ chữ, khoảng cách, bo góc nằm ở đây, dưới :root.
   Màn hình chỉ được dùng var(--…). Test logic/kieu-giao-dien.test.ts báo đỏ nếu
   file nào trong ui/ tự viết #màu, rgb(), font-size:<số>, padding/margin/gap:<số px>.
   Cũng test đó tính tương phản WCAG cho các cặp ghi ở CAP_TUONG_PHAN bên dưới.

   Màu nhấn #02519c ĐO từ website công ty 21/09/2026: trang chủ tuehaiduong.com,
   <style id="custom-css"> dòng 166: :root{--primary-color:#02519c;--fs-color-primary:#02519c}
   — dùng cho nền thanh đầu trang (.header-bg-color), tiêu đề mục (.section-title span),
   nút/liên kết của theme Flatsome. Tương phản: chữ trắng trên nền #02519c 7,90:1;
   chữ #02519c trên trắng 7,90:1 — đạt AA (≥4,5), KHÔNG cần sắc đậm hơn; --mau-nhan-dam
   chỉ dùng cho trạng thái đang bấm. Logo (Logo.svg cùng site): đỏ #ED1C24 (chữ), vàng
   #FFDE17 (đĩa nền), xanh nước #00B3F0/#8ED8F8, lá #1D7242 — KHÔNG dùng làm màu nhấn:
   đỏ trùng "lỗi", lá trùng "xong", vàng chữ trắng rớt (1,34:1). Màu trạng thái vì thế
   không phải đổi gì: nhấn xanh dương, xong xanh lá, lỗi đỏ, chờ vàng cam — cách nhau rõ. */
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("be-vietnam-pro-400-vietnamese.b0d9b8aec7f4.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("be-vietnam-pro-400-latin.d25f70ff7404.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("be-vietnam-pro-600-vietnamese.843908240371.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("be-vietnam-pro-600-latin.14950d0af319.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("be-vietnam-pro-700-vietnamese.141f6c450102.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("be-vietnam-pro-700-latin.cf841d2b615f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- MÀU (chỉ chỗ này được có mã màu) ---- */
  --mau-nhan: #02519c;          /* nhấn duy nhất — nút chính, liên kết, viền ô đang gõ */
  --mau-nhan-dam: #023f7a;      /* nút chính lúc đang bấm */
  --mau-nhan-nen: #e8f0f9;      /* nút phụ, hàng đang chọn */
  --mau-nhan-vien: #dbeafe;     /* viên "nhấn" */
  --nen: #f3f4f6;               /* nền trang, xám rất nhạt */
  --the: #ffffff;               /* thẻ */
  --vien: #d1d5db;              /* viền ô nhập, viền thẻ khi cần */
  --vien-nhat: #e5e7eb;         /* kẻ dòng */
  --chu: #111827;               /* chữ chính, gần đen */
  --chu-phu: #475467;           /* chữ phụ — vẫn ≥7:1 trên trắng, đọc được trong kho tối */
  --chu-goi-y: #5f6b7a;         /* chữ gợi ý trong ô nhập (placeholder) — 4,8:1 trên trắng; không để trình duyệt tự chọn */
  --chu-tren-nhan: #ffffff;
  --lop-phu: rgba(17, 24, 39, 0.72);  /* màn mờ sau bảng trượt + dải chữ trên khung camera: đè lên nền TRẮNG vẫn ≥4,5:1 với chữ trắng */
  /* hướng Long Châu (Bảo chọn 21/09/2026): mảng đầu trang màu nhấn, chuyển sắc NHẸ cùng tông — hai đầu là hai token có test tương phản */
  --dau-trang-nen: linear-gradient(180deg, #02519c 0%, #023f7a 100%);
  --lop-sang: rgba(255, 255, 255, 0.16);      /* nền chip trên mảng màu (đè lên --mau-nhan, chữ trắng vẫn ≥4,5:1 — test "lop-sang@mau-nhan") */
  --lop-sang-vien: rgba(255, 255, 255, 0.45); /* viền chip trên mảng màu */
  /* trạng thái — LUÔN đi kèm chữ, không bao giờ màu nói một mình */
  --xong: #166534;      --xong-nen: #dcfce7;   --xong-dam: #1b7f3b;   /* xanh lá: xong / đọc được */
  --loi: #b3261e;       --loi-nen: #fee2e2;    --loi-chu-nen: #991b1b; /* đỏ: lỗi / chặn */
  --cho: #8a5a00;       --cho-nen: #fef3c7;                           /* vàng cam: đang chờ / cảnh báo mềm */
  --tat-chu: #4b5563;   --tat-nen: #e5e7eb;                           /* nút bị khóa */
  --khung-quet: #111827;                                              /* nền khung camera */

  /* ---- CHỮ — phân cấp bằng ĐỘ ĐẬM và MÀU, không bằng cỡ; chỉ con số làm việc mới to
     (Bảo cầm thử iPhone 21/09/2026: "nhiều chữ quá, chữ to quá" → hạ từ 17/20/24 xuống 16/18/20).
     QUYẾT ĐỊNH 184 (chủ duyệt ảnh mẫu 181, 13/10/2026): BỚT CHỮ thì chữ TO lại — chữ thường 17, tên màn 22, chữ ô lưới 17 / 14,
     thanh tab 64 px chữ 13, nút chính 56. Số đã duyệt — lưới 3 ghim đúng số. Luật đầy đủ: .claude/skills/giao-dien-tue-hai/SKILL.md ---- */
  --ho-chu: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --chu-thuong: 17px;     /* chữ thường — 17 (quyết định 184) */
  --chu-nho: 14px;        /* nhãn phụ, viên trạng thái, chip (13–14, vẫn AA) */
  --chu-lon: 18px;        /* tiêu đề mục */
  --chu-tieu-de: 22px;    /* tên màn — 22 (quyết định 184) */
  --chu-o-lon: 17px;      /* nhãn ô lưới lớn (việc hằng ngày) — 184 */
  --chu-o-nho: 14px;      /* nhãn ô lưới nhỏ (xem, kiểm) — 184 */
  --chu-tab: 13px;        /* nhãn thanh tab ở đáy — 184 */
  --chu-so: 24px;         /* số gói, số dòng — con số làm việc */
  --chu-ma: 22px;         /* mã thùng — 16 ký tự phải vừa MỘT dòng trên máy 375px kể cả trong dòng lỗi có viền */
  --chu-so-lon: 32px;     /* bàn phím số, số đang gõ */
  --dong: 1.4;            /* khoảng cách dòng — dấu chồng ẫ ệ ỗ không bị cắt */
  --dam-thuong: 400; --dam-vua: 600; --dam-dam: 700;

  /* ---- KHOẢNG CÁCH — bội số 8px; --k0 = nửa bước 4px chỉ cho khoảng TRONG một dòng (chip, biểu tượng–chữ) ---- */
  --k0: 4px; --k1: 8px; --k2: 16px; --k3: 24px; --k4: 32px; --k5: 40px; --k6: 48px;

  /* ---- BO GÓC ---- */
  --bo-the: 12px; --bo-nut: 12px; --bo-o: 12px; --bo-vien: 999px;
  --bo-dong: 16px;   /* thẻ dòng (hướng Long Châu) */
  --bo-lon: 24px;    /* tấm nền sáng trồi lên đè mép mảng màu */

  /* ---- KÍCH THƯỚC — nút chính 48px (≥ 44pt chuẩn bấm iPhone) ---- */
  --nut-cao: 48px; --nut-cao-lon: 56px;   /* --nut-cao-lon = NÚT CHÍNH 56 (quyết định 184) */
  --tab-cao: 64px;   /* thanh tab cố định ở đáy, chưa tính vạch home của iPhone — 184 */
  --o-luoi-lon: 124px; --gieng-lon: 56px; --gieng-nho: 52px;   /* ô lưới màn Việc (ảnh mẫu 181) */
  --o-cao: 48px; --chip-cao: 32px; --vien-cao: 28px; --bt-co: 20px; --bt-co-lon: 24px; --bt-o-lon: 30px;
  --bt-co-rat-lon: 64px;   /* biểu tượng màn trống */
  --fab-co: 64px;          /* nút tròn nổi Quét */
  --vien-day: 2px; --vien-manh: 1px;
  --bong-nhe: 0 1px 2px rgba(17, 24, 39, 0.06);
  --bong-mem: 0 2px 8px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);   /* thẻ dòng — mềm, không nặng */
  --bong-noi: 0 6px 16px rgba(2, 81, 156, 0.35);                                   /* nút tròn nổi */
  --bong-loe: 0 0 0 2px #1b7f3b;   /* viền xanh của dòng vừa thêm (= --xong-dam) — phải thấy được trong kho tối */
  --cham: 120ms;  /* thời lượng chuyển động — chỉ để báo kết quả */
}

/* ---- NỀN CHUNG ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--nen); color: var(--chu); }
body {
  font-family: var(--ho-chu); font-size: var(--chu-thuong); line-height: var(--dong);
  font-weight: var(--dam-thuong); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--chu-tieu-de); font-weight: var(--dam-dam); line-height: var(--dong); }
h2 { font-size: var(--chu-lon); font-weight: var(--dam-dam); }
.nho { font-size: var(--chu-nho); }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: var(--chu); }
.bt { width: var(--bt-co); height: var(--bt-co); flex: 0 0 auto; vertical-align: middle; }
.bt.lon { width: var(--bt-co-lon); height: var(--bt-co-lon); }
.bt.rat-lon { width: var(--bt-co-rat-lon); height: var(--bt-co-rat-lon); }

/* ---- THẺ ---- */
.the { background: var(--the); border-radius: var(--bo-the); padding: var(--k1) var(--k2); box-shadow: var(--bong-nhe); }
.the + .the { margin-top: var(--k1); }
.the-dong { background: var(--the); border-radius: var(--bo-dong); padding: var(--k1) var(--k2); box-shadow: var(--bong-mem); }  /* mỗi dòng một thẻ có chiều sâu */
.the-dong + .the-dong { margin-top: var(--k1); }

/* ---- MẢNG ĐẦU TRANG + TẤM NỀN TRỒI LÊN (hướng Long Châu) ---- */
.dau-trang-nhan { background: var(--dau-trang-nen); color: var(--chu-tren-nhan); padding: calc(env(safe-area-inset-top) + var(--k2)) var(--k2) calc(var(--k3) + var(--k2)); }
.dau-trang-nhan h1 { color: var(--chu-tren-nhan); }
.tam-nen { background: var(--nen); border-radius: var(--bo-lon) var(--bo-lon) 0 0; margin-top: calc(var(--k3) * -1); padding: var(--k2) var(--k2) 0; position: relative; }
.chip.tren-nhan { background: var(--lop-sang); border-color: var(--lop-sang-vien); color: var(--chu-tren-nhan); }

/* ---- Ô TÌM KIẾM DẠNG VIÊN: ô dài + nút biểu tượng bên trong đầu phải ---- */
.o-tim { display: flex; align-items: center; gap: var(--k0); min-height: var(--o-cao); padding: 0 var(--k0) 0 var(--k2); background: var(--the); border: var(--vien-manh) solid var(--vien); border-radius: var(--bo-vien); box-shadow: var(--bong-nhe); }
.o-tim:focus-within { border-color: var(--mau-nhan); }
.o-tim input { flex: 1 1 auto; min-width: 0; border: 0; background: none; min-height: var(--o-cao); padding: 0; font-size: var(--chu-ma); font-weight: var(--dam-dam); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.o-tim input:focus { outline: none; }
.o-tim input::placeholder { text-transform: none; font-size: var(--chu-thuong); font-weight: var(--dam-thuong); color: var(--chu-goi-y); }
.o-tim .nut-bt { display: flex; align-items: center; justify-content: center; width: var(--k5); height: var(--k5); border: 0; border-radius: var(--bo-vien); background: var(--mau-nhan-nen); color: var(--mau-nhan); cursor: pointer; flex: 0 0 auto; }
.o-tim .nut-bt.dac { background: var(--mau-nhan); color: var(--chu-tren-nhan); }
.o-tim .nut-bt:active { background: var(--mau-nhan-vien); }

/* ---- NÚT TRÒN NỔI (Quét) — vùng ngón cái, khác hình và cách xa nút Gửi (luật 2) ---- */
.fab { position: absolute; right: var(--k2); top: calc((var(--fab-co) + var(--k2)) * -1); width: var(--fab-co); height: var(--fab-co); border: 0; border-radius: var(--bo-vien); background: var(--mau-nhan); color: var(--chu-tren-nhan); box-shadow: var(--bong-noi); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fab:active { background: var(--mau-nhan-dam); }
.fab.dang-bat { background: var(--the); color: var(--mau-nhan); border: var(--vien-day) solid var(--mau-nhan); }
.fab .bt { width: var(--bt-co-lon); height: var(--bt-co-lon); }
.fab:disabled { background: var(--tat-nen); color: var(--tat-chu); box-shadow: none; }
/* rà độc lập 14/10 (G2): nút camera của màn Xuất kho có chữ ("Quét tem" / "Tắt camera") — khác nút tròn Quét giữa thanh tab */
.fab.co-chu { width: auto; padding: 0 var(--k3); gap: var(--k1); font: inherit; font-weight: var(--dam-dam); white-space: nowrap; }

/* ---- MÀN TRỐNG ---- */
.man-trong { display: flex; flex-direction: column; align-items: center; gap: var(--k1); padding: var(--k4) var(--k2); color: var(--chu-phu); text-align: center; }
.man-trong .bt { color: var(--mau-nhan); }
.chu-phu { color: var(--chu-phu); }
.dam { font-weight: var(--dam-dam); } .vua { font-weight: var(--dam-vua); }
.so { font-size: var(--chu-so); font-weight: var(--dam-dam); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.so-lon { font-size: var(--chu-so-lon); font-weight: var(--dam-dam); font-variant-numeric: tabular-nums; }
.ma { font-variant-numeric: tabular-nums; font-weight: var(--dam-dam); font-size: var(--chu-ma); overflow-wrap: anywhere; letter-spacing: 0; }
.xuong-dong { overflow-wrap: anywhere; }  /* tên sản phẩm dài thì xuống dòng, không "…" */

/* ---- NÚT — mỗi màn chỉ MỘT nút đặc màu nhấn; nút phụ dạng viền (.vien-nut) hoặc nền nhạt (.phu) ---- */
.nut {
  display: flex; align-items: center; justify-content: center; gap: var(--k1);
  width: 100%; min-height: var(--nut-cao); padding: 0 var(--k2);
  border: 0; border-radius: var(--bo-nut); cursor: pointer; white-space: nowrap;
  font-size: var(--chu-thuong); font-weight: var(--dam-vua); line-height: var(--dong);
  background: var(--mau-nhan); color: var(--chu-tren-nhan); text-align: center;
}
.nut:active { background: var(--mau-nhan-dam); }
.nut.lon { min-height: var(--nut-cao-lon); font-weight: var(--dam-dam); }
.nut.phu { background: var(--mau-nhan-nen); color: var(--mau-nhan); }
.nut.phu:active { background: var(--mau-nhan-vien); }
.nut.vien-nut { background: var(--the); color: var(--mau-nhan); border: var(--vien-manh) solid var(--vien); }
.nut.vien-nut:active { background: var(--mau-nhan-nen); }
.nut.nguy { background: var(--loi-nen); color: var(--loi-chu-nen); }
.nut.nguy:active { background: var(--loi); color: var(--chu-tren-nhan); }
.nut.xong { background: var(--xong-dam); color: var(--chu-tren-nhan); }
.nut:disabled, .nut[aria-disabled="true"] { background: var(--tat-nen); color: var(--tat-chu); cursor: not-allowed; }
.nut.nho { min-height: var(--o-cao); width: auto; padding: 0 var(--k2); }
.nut.vuong { width: var(--o-cao); min-width: var(--o-cao); padding: 0; flex: 0 0 auto; }
.nut.trang { background: var(--the); color: var(--chu); border: var(--vien-manh) solid var(--vien); }

/* ---- VIÊN TRẠNG THÁI (nền nhạt, chữ đậm, luôn có chữ) và CHIP (viền, bấm được) ---- */
.vien {
  display: inline-flex; align-items: center; gap: var(--k0);
  padding: 0 var(--k1); min-height: var(--vien-cao); border-radius: var(--bo-vien);
  font-size: var(--chu-nho); font-weight: var(--dam-vua); line-height: var(--dong); white-space: nowrap;
}
.chip {
  display: inline-flex; align-items: center; gap: var(--k0); padding: 0 var(--k1); min-height: var(--chip-cao);
  border: var(--vien-manh) solid var(--vien); border-radius: var(--bo-vien); background: var(--the);
  font-size: var(--chu-nho); font-weight: var(--dam-vua); color: var(--chu); white-space: nowrap; cursor: pointer;
}
.chip.nhan { border-color: var(--mau-nhan); color: var(--mau-nhan); background: var(--mau-nhan-nen); }
/* Chip cảnh báo ĐẶT TRÊN MẢNG MÀU đầu trang (ngày lùi). Không tô chữ cảnh báo thẳng lên nền xanh — đo 22/09/2026:
   chữ --cho trên --mau-nhan chỉ 1,33:1, trên --mau-nhan-dam 1,78:1, rớt AA nặng. Viên nền nhạt chữ đậm: 5,32:1;
   mảng viên so với nền xanh 7,09–9,46 nên nổi rõ (ngưỡng 3:1 cho thành phần không phải chữ). */
.chip.canh-bao { background: var(--cho-nen); border-color: var(--cho); color: var(--cho); font-weight: var(--dam-dam); }
.chip .bt { width: var(--chu-nho); height: var(--chu-nho); }
.vien.xong { background: var(--xong-nen); color: var(--xong); }
.vien.loi  { background: var(--loi-nen);  color: var(--loi-chu-nen); }
.vien.cho  { background: var(--cho-nen);  color: var(--cho); }
.vien.nhan, .vien.dang { background: var(--mau-nhan-vien); color: var(--mau-nhan); }   /* 184: xanh dương = đang làm */
.vien.xam  { background: var(--tat-nen); color: var(--tat-chu); }

/* ---- Ô NHẬP ---- */
.o {
  width: 100%; min-height: var(--o-cao); padding: 0 var(--k2);
  border: var(--vien-manh) solid var(--vien); border-radius: var(--bo-o); background: var(--the);
  font-size: var(--chu-thuong); line-height: var(--dong);
}
.o:focus { outline: none; border-color: var(--mau-nhan); }
.o::placeholder { color: var(--chu-goi-y); opacity: 1; }
.o.ma { font-size: var(--chu-ma); text-transform: uppercase; }
.nhan-o { display: block; color: var(--chu-phu); font-size: var(--chu-nho); font-weight: var(--dam-vua); margin-bottom: var(--k0); }  /* nhãn trên ô nhập (khác .vien.nhan = viên màu nhấn) */
.o-loi { color: var(--loi); font-size: var(--chu-nho); font-weight: var(--dam-vua); min-height: var(--k3); margin-top: var(--k0); }

/* ---- DÒNG DANH SÁCH — thẻ thấp, gọn ---- */
.hang { display: flex; align-items: center; gap: var(--k1); padding: var(--k1) 0; border-top: var(--vien-manh) solid var(--vien-nhat); }
.hang:first-child { border-top: 0; }
.hang.loi { border: var(--vien-day) solid var(--loi); border-radius: var(--bo-o); padding: var(--k1); background: var(--loi-nen); }
.hang .noi-dung { flex: 1 1 auto; min-width: 0; }
.hang .dong-tren, .hang .dong-duoi { display: flex; align-items: center; justify-content: space-between; gap: var(--k1); }
.hang .so { text-align: right; flex: 0 0 auto; }

/* ---- BẢNG TRƯỢT TỪ DƯỚI (không vuốt — chỉ bấm) ---- */
.lop-phu { position: fixed; inset: 0; background: var(--lop-phu); display: none; z-index: 20; }
.lop-phu.mo { display: block; }
.bang-truot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; display: none;
  background: var(--the); border-radius: var(--bo-the) var(--bo-the) 0 0;
  padding: var(--k2) var(--k2) calc(env(safe-area-inset-bottom) + var(--k2)); max-height: 92vh; overflow: auto;
}
.bang-truot.mo { display: block; }
.bang-truot .dau { display: flex; align-items: center; justify-content: space-between; gap: var(--k2); margin-bottom: var(--k1); }
.cach-xa { height: var(--k4); }  /* khoảng trống bắt buộc giữa "Xác nhận" và "Huỷ" (luật 2) */

/* ---- BÀN PHÍM SỐ ---- */
.ban-phim { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k1); }
.ban-phim .nut { min-height: var(--nut-cao); font-size: var(--chu-so); font-weight: var(--dam-dam); background: var(--mau-nhan-nen); color: var(--chu); }
.ban-phim .nut:active { background: var(--mau-nhan-vien); }
.so-dang-go { text-align: center; min-height: var(--nut-cao-lon); display: flex; align-items: center; justify-content: center; border: var(--vien-day) solid var(--mau-nhan); border-radius: var(--bo-o); margin-bottom: var(--k1); }

/* ---- CHUYỂN ĐỘNG TỐI THIỂU: chỉ báo kết quả ---- */
/* dòng vừa thêm: GIỮ nền xanh + viền xanh đậm ~0,8 s rồi tan (tổng 1,2 s). Bản đầu tan dần 600 ms từ xanh nhạt sang
   trắng — Bảo cầm thử 22/09/2026 không thấy ("bấm Xuất nguyên thùng không có dấu hiệu gì"). */
@keyframes loe-xong {
  0%, 65% { background: var(--xong-nen); box-shadow: var(--bong-loe); }
  100% { background: var(--the); box-shadow: var(--bong-mem); }
}
.loe-xong { animation: loe-xong calc(var(--cham) * 10) ease-out; }
@keyframes loe-loi { from { background: var(--loi-nen); } to { background: var(--the); } }
.loe-loi { animation: loe-loi calc(var(--cham) * 5) ease-out; }
@media (prefers-reduced-motion: reduce) { .loe-xong, .loe-loi { animation: none; } }

/* ---- TIỆN ÍCH BỐ CỤC (chỉ khoảng cách bằng token) ---- */
.hang-ngang { display: flex; align-items: center; gap: var(--k1); }
.hang-ngang.rong { gap: var(--k2); }
.cot { display: flex; flex-direction: column; gap: var(--k2); }
.cot-1 { display: flex; flex-direction: column; gap: var(--k1); }
.hang-chip { display: flex; gap: var(--k1); flex-wrap: wrap; }  /* chip xuống dòng, KHÔNG cuộn ngang (luật 1: không vuốt ngang) */
.gian { flex: 1 1 auto; min-width: 0; }
.an { display: none !important; }
.canh-giua { text-align: center; }
.chi-doc { color: var(--chu-phu); }
/* ==== app/man.css ==== */
/* ui/app/man.css — bố cục riêng của APP NHIỀU MÀN. Chỉ var(--…) của ../_chung/kieu.css (lưới logic/kieu-giao-dien.test.ts).
   Luật: nút chính ở nửa dưới (thanh đáy dính); mỗi màn MỘT nút đặc màu nhấn (Gửi); chip đầu trang xuống hàng, không cuộn
   ngang; con số làm việc to và đậm (--chu-so), nhãn nhỏ. */
.man-vao { position: fixed; inset: 0; z-index: 30; overflow-y: auto; background: var(--nen); padding: var(--k2); }
.man-vao.an { display: none; }
.man-vao .the { margin-top: var(--k4); padding: var(--k3) var(--k2); }
.man-vao h1 { margin: 0 0 var(--k1); }
.man-vao .nut { width: 100%; }

.dau-trang-nhan .chip.tren-nhan { min-height: var(--chip-cao); }
.dau-trang-nhan .chip.tren-nhan:disabled { cursor: default; opacity: 1; }
/* 181 / 184: đầu trang = tên màn + chip trên MỘT hàng (chip không đủ chỗ thì xuống hàng — không cuộn ngang); không nút ở góc trên */
.hang-dau { display: flex; align-items: center; flex-wrap: wrap; gap: var(--k1) var(--k2); }
.hang-dau h1 { margin: 0; }
/* SỐ CŨ (quyết định 93): lúc mở lại, màn vẽ số lần trước trong lúc chờ xác nhận tài khoản + số mới — dải vàng dưới đầu trang
   nói rõ "số lúc …, đang cập nhật, chưa ghi được"; thân, đáy và hai nút đầu trang KHÔNG bấm được tới khi số mới về. */
.so-cu { display: flex; align-items: center; gap: var(--k1); margin-top: var(--k1); padding: var(--k1) var(--k2); border-radius: var(--bo-o);
  background: var(--cho-nen); color: var(--cho); font-weight: var(--dam-dam); }
.so-cu .bt { width: var(--chu-nho); height: var(--chu-nho); flex: none; }
body.dang-so-cu #than, body.dang-so-cu #day, body.dang-so-cu #thanhTab { pointer-events: none; }
body.dang-so-cu #than { opacity: 0.72; }
.than-app { min-height: calc(var(--k6) * 8); padding-bottom: calc(env(safe-area-inset-bottom) + var(--k6) * 2); }
body.co-day .than-app { padding-bottom: calc(env(safe-area-inset-bottom) + var(--k6) * 4); }
body.co-tab .than-app { padding-bottom: calc(env(safe-area-inset-bottom) + var(--tab-cao) + var(--k3)); }
body.co-tab.co-day .than-app { padding-bottom: calc(env(safe-area-inset-bottom) + var(--tab-cao) + var(--k6) * 3); }
.muc { margin: var(--k3) 0 var(--k1); }
.muc:first-child { margin-top: var(--k1); }
.khoi { display: block; }

/* 181 / 184 — MÀN VIỆC: lưới ô theo dòng việc. Ô lớn (3 cột) = việc hằng ngày, thẻ trắng; ô nhỏ (4 cột) = xem / kiểm, giếng biểu tượng trắng
   trên nền xám. Tên ô ≤ 10 ký tự, một dòng (cổng mở màn đếm). Không vuốt ngang: lưới xuống hàng. */
.muc-luoi { font-size: var(--chu-nho); font-weight: var(--dam-dam); color: var(--chu-phu); margin: var(--k3) var(--k0) var(--k1); }
.muc-luoi:first-child { margin-top: var(--k0); }
.luoi-lon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k1); }
.luoi-nho { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k1); margin-top: var(--k2); }
.muc-luoi + .luoi-nho, .luoi-nho:first-child { margin-top: var(--k0); }
.o-luoi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--k1); min-width: 0; padding: var(--k0) 0;
  border: 0; background: none; color: var(--chu); font: inherit; cursor: pointer; }
.luoi-lon .o-luoi { min-height: var(--o-luoi-lon); background: var(--the); border-radius: var(--bo-dong); box-shadow: var(--bong-mem); }
.o-luoi .gieng { display: grid; place-items: center; border-radius: var(--bo-dong); color: var(--mau-nhan); }
.luoi-lon .gieng { width: var(--gieng-lon); height: var(--gieng-lon); background: var(--mau-nhan-nen); }
.luoi-nho .gieng { width: var(--gieng-nho); height: var(--gieng-nho); background: var(--the); box-shadow: var(--bong-mem); }
.luoi-lon .o-luoi .bt { width: var(--bt-o-lon); height: var(--bt-o-lon); }
.luoi-nho .o-luoi .bt { width: var(--bt-co-lon); height: var(--bt-co-lon); }
.o-luoi .nhan { font-size: var(--chu-o-nho); font-weight: var(--dam-vua); white-space: nowrap; }
.luoi-lon .o-luoi .nhan { font-size: var(--chu-o-lon); }
.luoi-lon .o-luoi:active, .luoi-nho .o-luoi:active .gieng { background: var(--mau-nhan-vien); }
/* 181 / 184 — THANH TAB cố định ở đáy (vùng ngón cái); nút chính của màn nằm NGAY TRÊN thanh tab */
.thanh-tab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; display: flex; min-height: calc(var(--tab-cao) + env(safe-area-inset-bottom));
  padding: 0 var(--k0) env(safe-area-inset-bottom); background: var(--the); border-top: var(--vien-manh) solid var(--vien-nhat); }
.o-tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--k0);
  border: 0; background: none; color: var(--chu-phu); font: inherit; font-size: var(--chu-tab); font-weight: var(--dam-vua); cursor: pointer; white-space: nowrap; }
.o-tab .wi { display: grid; place-items: center; width: calc(var(--k6) + var(--k1)); height: var(--k4); border-radius: var(--bo-vien); }
.o-tab .bt { width: var(--bt-co-lon); height: var(--bt-co-lon); }
.o-tab.on { color: var(--mau-nhan); font-weight: var(--dam-dam); }
.o-tab.on .wi { background: var(--mau-nhan-nen); }
body.co-tab .thanh-day { bottom: calc(var(--tab-cao) + env(safe-area-inset-bottom)); padding-bottom: var(--k1); }
/* màn quét xuất (thanh gửi riêng của màn chung ../_chung/man-quet-xuat.css) cũng nằm NGAY TRÊN thanh tab — đo 13/10/2026: bị thanh tab che nút Gửi */
body.co-tab .thanh-gui { bottom: calc(var(--tab-cao) + env(safe-area-inset-bottom)); padding-bottom: var(--k1); }
/* rà độc lập 14/10 (G14): nút tròn Quét (kho, quản trị) nhô ~19 px lên khỏi thanh tab — đo 13:17:41: nút chính 684–740, nút tròn 729–789, bấm giữa-dưới nút
   "Quét vào đơn" lại mở màn Quét. Vai có nút tròn: nút chính nâng thêm k3, nền thanh đáy phủ xuống tới thanh tab. */
body.co-tab.co-fab .thanh-day, body.co-tab.co-fab .thanh-gui { padding-bottom: calc(var(--k1) + var(--k3)); }
body.co-tab.co-fab.co-day .than-app { padding-bottom: calc(env(safe-area-inset-bottom) + var(--tab-cao) + var(--k6) * 3 + var(--k3)); }
/* rà độc lập 14/10 (G9) — luật 2: trong bảng trượt, nút đặc (Gửi / Xác nhận) và nút viền NGAY SAU nó (Đóng / Bỏ qua) cách xa như .cach-xa
   (đo 13:17:14: «Gửi yêu cầu» 684–740 sát «Đóng» 748–796). Bảng nào đã chèn .cach-xa thì hai nút không còn kề nhau — luật này không cộng thêm. */
#bangTruot .nut:not(.vien-nut):not(.phu) + .nut.vien-nut { margin-top: var(--k4); }
/* rà độc lập 14/10 + 192 (6) G24 (ảnh mẫu chủ duyệt): dòng chọn = CẢ DÒNG là ô bấm (thẻ cao 56), ô đánh dấu 32 px vẽ bằng biểu tượng — đeo găng vẫn
   bấm trúng (đo 13:17:52: ô 13 px, dòng 24 px). Ô nhập thật nằm ẩn trong dòng (bàn phím, trình đọc màn hình vẫn dùng được). */
label.o-chon { position: relative; display: flex; align-items: center; gap: var(--k2); min-height: var(--nut-cao-lon); padding: var(--k0) var(--k2);
  background: var(--the); border-radius: var(--bo-dong); box-shadow: var(--bong-mem); cursor: pointer; }
label.o-chon input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
label.o-chon .o-tick { display: grid; place-items: center; flex: 0 0 auto; width: var(--k4); height: var(--k4); border: var(--vien-day) solid var(--vien);
  border-radius: var(--bo-o); background: var(--the); color: var(--chu-tren-nhan); }
label.o-chon .o-tick .bt { visibility: hidden; }
label.o-chon input:checked + .o-tick { background: var(--mau-nhan); border-color: var(--mau-nhan); }
label.o-chon input:checked + .o-tick .bt { visibility: visible; }
label.o-chon input:focus-visible + .o-tick { outline: var(--vien-day) solid var(--mau-nhan); outline-offset: var(--vien-day); }
label.o-chon .noi { display: flex; flex-direction: column; min-width: 0; }
label.o-chon .noi b { font-weight: var(--dam-dam); }
label.o-chon .noi span { font-size: var(--chu-nho); color: var(--chu-phu); }
/* 181 / 184: danh sách chỉ hiện việc đang có — không có gì thì MỘT dòng ngắn (≤ 30 ký tự, cổng mở màn đếm: [data-trong]) */
.dong-trong { display: flex; align-items: center; gap: var(--k1); padding: var(--k2) var(--k0); color: var(--chu-phu); font-weight: var(--dam-vua); white-space: nowrap; }
.dong-trong .bt { color: var(--xong); flex: none; }
.dong-trong .bt.bt-phu { color: var(--chu-phu); }

/* 181 / 184 — MÀN CÔNG ĐOẠN (ảnh mẫu Trộn khô): chọn hai đường bằng một khối hai nút (không chip nhỏ); ô số to có đơn vị bên trong;
   hai ô nhỏ một hàng; kết quả tính là con số làm việc to trên nền nhấn nhạt */
.phan-doan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k0); padding: var(--k0); margin-bottom: var(--k2); background: var(--tat-nen); border-radius: var(--bo-o); }
.phan-doan button { min-height: var(--nut-cao); border: 0; border-radius: var(--bo-nut); background: none; color: var(--chu-phu); font: inherit; font-weight: var(--dam-vua); cursor: pointer; white-space: nowrap; }
.phan-doan button.chon { background: var(--the); color: var(--mau-nhan); font-weight: var(--dam-dam); box-shadow: var(--bong-mem); }
.o-don-vi { position: relative; }
.o-don-vi .o { padding-right: var(--k6); }
.o-don-vi .dv { position: absolute; right: var(--k2); top: 0; bottom: 0; display: flex; align-items: center; color: var(--chu-phu); font-weight: var(--dam-vua); pointer-events: none; }
.hai-cot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k2); }
.hang-gian { justify-content: space-between; flex-wrap: wrap; }
.ket-chia { display: flex; align-items: center; gap: var(--k1); min-height: var(--nut-cao-lon); padding: 0 var(--k2); background: var(--mau-nhan-nen); border-radius: var(--bo-o); }
.ket-chia .so-lon { margin-left: auto; }

/* menu cũ: mỗi màn một thẻ bấm được, cả thẻ là nút (nay là kiểu thẻ-nút dùng chung của nhiều màn) */
.luoi-menu { display: flex; flex-direction: column; gap: var(--k1); padding-top: var(--k1); }
.o-menu { display: flex; align-items: center; gap: var(--k2); width: 100%; min-height: var(--nut-cao-lon); border: 0; text-align: left; cursor: pointer; color: var(--chu); }
.o-menu .bt { color: var(--mau-nhan); }
.o-menu:active { background: var(--mau-nhan-nen); }

/* bao: ba ô số một hàng (nước · bột ướt · số mác) */
.bao { display: flex; flex-direction: column; gap: var(--k1); }
.bao.lech { border: var(--vien-day) solid var(--cho); }
.luoi-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k1); }
.so-o { font-size: var(--chu-so); font-weight: var(--dam-dam); font-variant-numeric: tabular-nums; padding: 0 var(--k1); }
/* 181 / 184: ô số đứng cạnh tên trong một dòng (.hang) có bề rộng CỐ ĐỊNH — tên hàng được phần còn lại, không gãy từng chữ (đo 13/10/2026: bảng Xin hàng) */
.hang > .o.so-o { flex: 0 0 auto; width: calc(var(--k6) * 2 + var(--k2)); }
.so-lon-o { font-size: var(--chu-so-lon); font-weight: var(--dam-dam); font-variant-numeric: tabular-nums; min-height: var(--nut-cao-lon); }
.them { margin-top: var(--k1); }
.nut.nho.phu { flex: 1 1 0; }
/* 178 (3): hàng nút không đủ chỗ ở 375 px thì xuống dòng, không lòi khỏi màn / cuộn ngang (Việc đang chờ: "Nhận việc · Báo thiếu · Trao đổi" cần 422 / có 296). */
.hang-ngang.xuong-dong { flex-wrap: wrap; }

/* thanh đáy dính: tóm tắt + dòng báo + nút Gửi — vùng ngón cái (luật 1) */
.thanh-day {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-direction: column; gap: var(--k1);
  padding: var(--k1) var(--k2) calc(env(safe-area-inset-bottom) + var(--k1));
  background: var(--the); border-top: var(--vien-manh) solid var(--vien-nhat);
}
.thanh-day .o-loi { min-height: 0; margin: 0; }
.bao-xong { display: flex; align-items: center; gap: var(--k0); color: var(--xong); font-weight: var(--dam-vua); }
.bang-truot .o-loi { min-height: 0; }

/* Khung camera của màn Nhập kho (044) — chép đúng khung đã kiểm của màn quét xuất (ui/_chung/man-quet-xuat.css). */
.khung-quet { position: relative; height: 32vh; min-height: calc(var(--k6) * 4); margin-top: var(--k2); background: var(--khung-quet); border-radius: var(--bo-dong); overflow: hidden; box-shadow: var(--bong-mem); }
.khung-quet video { width: 100%; height: 100%; object-fit: cover; display: block; }
.khung-quet .ngam { position: absolute; left: 18%; top: 14%; width: 64%; height: 72%; border: var(--vien-day) dashed var(--the); border-radius: var(--bo-o); pointer-events: none; opacity: 0.85; }
.khung-quet.trung .ngam { border-color: var(--xong-nen); border-style: solid; }
.khung-chu { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--k0) var(--k2); background: var(--lop-phu); color: var(--chu-tren-nhan); font-weight: var(--dam-vua); white-space: nowrap; overflow: hidden; }

/* Xem trước bản in (K.inCoXemTruoc — quyết định 124 (2)): nền xám để tờ trắng nổi lên; các tờ thu nhỏ do bộ máy in dựng (in.js). */
.xem-truoc-in { background: var(--tat-nen); border-radius: var(--bo-o); padding: var(--k1); min-height: calc(var(--k6) * 4); overflow: hidden; }

/* "Hôm nay có gì lạ" (097): mỗi cảnh báo một thẻ bấm được (cả thẻ là nút); vạch trái theo mức — nặng đỏ · vừa vàng cam · nhẹ xám */
.dong-cb { display: flex; flex-direction: column; align-items: stretch; gap: var(--k0); width: 100%; border: 0; text-align: left; cursor: pointer; color: var(--chu); font: inherit; }
.dong-cb.muc-1 { border-left: var(--vien-day) solid var(--loi); }
.dong-cb.muc-2 { border-left: var(--vien-day) solid var(--cho); }
.dong-cb.muc-3 { border-left: var(--vien-day) solid var(--vien); }
.dong-cb:active { background: var(--mau-nhan-nen); }
.dong-cb .chu-cb { overflow-wrap: anywhere; }

/* Bảng đơn (128): thanh tiến trình từng bước — vạch đã qua · đang chờ · kẹt. 185: màu trạng thái thống nhất (184) — đã qua xanh lá (xong), bước đang
   tới vàng (chờ) / xanh dương (đang làm — kho đang soạn, đang giao) / đỏ (kẹt) */
.thanh-buoc { display: flex; gap: var(--k0); margin: var(--k0) 0; }
.thanh-buoc span { flex: 1; height: var(--k0); border-radius: var(--bo-vien); background: var(--tat-nen); }
.thanh-buoc .qua { background: var(--xong-dam); }
.thanh-buoc .dang { background: var(--cho); }
.thanh-buoc .lam { background: var(--mau-nhan); }
.thanh-buoc .dung { background: var(--loi); }

/* 185 — MÀN CHÍNH HAI TAB "Đang làm / Hôm nay" + TỔNG QUAN + QUÉT (ảnh mẫu 7–11 đã duyệt — docs/cho-bao/giao-dien-181/). Màu trạng thái thống nhất
   (184): đỏ gấp / kẹt · vàng chờ · xanh dương đang làm · xanh lá xong — luôn kèm biểu tượng (K.vien); thẻ không viết câu; bấm thẻ mở đúng màn làm. */
.mau-do { background: var(--loi-nen); color: var(--loi-chu-nen); }
.mau-vang { background: var(--cho-nen); color: var(--cho); }
.mau-xanh { background: var(--mau-nhan-vien); color: var(--mau-nhan); }
.mau-la { background: var(--xong-nen); color: var(--xong); }
.mau-xam { background: var(--the); color: var(--chu); box-shadow: var(--bong-mem); }
/* ô tóm tắt đầu tab Đang làm: số to + tên trạng thái; bấm = lọc thẻ theo màu (bấm lại = bỏ lọc) */
.tom-tat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k1); margin-bottom: var(--k2); }
.tom-tat.ba { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tom-tat.hai { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tt-o { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--k1); border: 0; border-radius: var(--bo-dong); font: inherit; cursor: pointer; text-align: left; }
.tt-o.chon { outline: var(--vien-day) solid currentColor; }
.tt-o .so-tt { display: flex; align-items: center; gap: var(--k0); font-size: var(--chu-tieu-de); font-weight: var(--dam-dam); line-height: var(--dong); }
.tt-o .ten-tt { font-size: var(--chu-nho); font-weight: var(--dam-vua); white-space: nowrap; }
.tt-o.ngang { flex-direction: row; align-items: center; gap: var(--k1); font-weight: var(--dam-dam); }
.tt-o.ngang .so-tt { margin-left: auto; }
/* thẻ việc: giếng biểu tượng theo màu trạng thái · [mã · viên] · dòng số · đường công đoạn (mẻ) / thanh bước (đơn) · mũi tên. Mã và viên chung một hàng
   khi đủ chỗ; viên dài (≤ 16 ký tự) không đủ chỗ thì XUỐNG hàng — mã đơn / mẻ không bao giờ bị cắt "…" (đo 13/10/2026: "HD0021…" cạnh "Đi chưa có phiếu"). */
.the-v { display: flex; align-items: center; gap: var(--k1); width: 100%; padding: var(--k1); border: 0; border-radius: var(--bo-dong); background: var(--the);
  box-shadow: var(--bong-mem); color: var(--chu); font: inherit; text-align: left; cursor: pointer; }
.the-v + .the-v { margin-top: var(--k1); }
.the-v:active { background: var(--mau-nhan-nen); }
.the-v .loai { align-self: flex-start; display: grid; place-items: center; flex: 0 0 auto; width: calc(var(--k5) + var(--k0)); height: calc(var(--k5) + var(--k0)); border-radius: var(--bo-o); }
.the-v .loai .bt { width: var(--bt-co-lon); height: var(--bt-co-lon); }
.the-v .giua-v { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.the-v .dau-v { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k0) var(--k1); }
.the-v .ma-v { font-weight: var(--dam-dam); min-width: 0; }
.the-v .dau-v .vien { margin-left: auto; }
.the-v .mui { flex: 0 0 auto; color: var(--vien); }
.the-v .sl { font-size: var(--chu-nho); font-weight: var(--dam-vua); color: var(--chu-phu); overflow-wrap: anywhere; }
.duong { display: flex; align-items: center; margin-top: var(--k1); }
.duong .b { display: grid; place-items: center; width: var(--vien-cao); height: var(--vien-cao); border-radius: var(--bo-vien); background: var(--tat-nen); color: var(--tat-chu); flex: 0 0 auto; }
.duong .b .bt { width: var(--chu-nho); height: var(--chu-nho); }
.duong .b.xong { background: var(--xong-nen); color: var(--xong); }
.duong .b.loi { background: var(--loi); color: var(--chu-tren-nhan); }
.duong .b.cho { background: var(--cho); color: var(--chu-tren-nhan); }
.duong .b.dang { background: var(--mau-nhan); color: var(--chu-tren-nhan); }
.duong .n { flex: 1 1 auto; height: var(--vien-day); background: var(--tat-nen); }
.duong .n.xong { background: var(--xong-dam); }
/* danh sách trong ngày (tab Hôm nay): mỗi dòng mã · giờ · người … số / viên */
.bang-h { background: var(--the); border-radius: var(--bo-dong); box-shadow: var(--bong-mem); padding: 0 var(--k2); }
.bang-h .h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k1); min-height: var(--nut-cao-lon); border-top: var(--vien-manh) solid var(--vien-nhat); }   /* 186: dòng dài XUỐNG hàng (cổng 21:18: "10/10 · Nhang Trung · Tổ Đen" + giờ + "3 ngày phơi" rộng 391 / 375 px) */
.bang-h .h:first-child { border-top: 0; }
.bang-h button.h { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; }
.bang-h .h .t { font-weight: var(--dam-dam); }
.bang-h .h .g { color: var(--chu-phu); font-size: var(--chu-nho); min-width: 0; overflow-wrap: anywhere; }   /* 187: chữ giữa dài (vật tư + số thật / số xin) XUỐNG hàng, không cắt "…" (đo 16:12 13/10: "1,2 kg (xin 1,…") */
.bang-h .h .p { margin-left: auto; font-weight: var(--dam-dam); white-space: nowrap; text-align: right; }
.bang-h .h .vien { margin-left: auto; }
.dong-ten { font-weight: var(--dam-dam); overflow-wrap: anywhere; padding: var(--k2) 0; }
/* đối chiếu thùng: xưởng đóng ↔ kho nhập trong ngày */
.doi-chieu { display: flex; align-items: center; gap: var(--k1); width: 100%; padding: var(--k1); border: 0; border-radius: var(--bo-dong); background: var(--the); box-shadow: var(--bong-mem);
  font: inherit; color: var(--chu); text-align: left; cursor: pointer; }
.doi-chieu .loai { display: grid; place-items: center; width: calc(var(--k5) + var(--k0)); height: calc(var(--k5) + var(--k0)); border-radius: var(--bo-o); flex: 0 0 auto; }
.doi-chieu .loai .bt { width: var(--bt-co-lon); height: var(--bt-co-lon); }
.doi-chieu .so2 { display: flex; gap: var(--k2); min-width: 0; }
.doi-chieu .so2 span { display: flex; flex-direction: column; font-size: var(--chu-nho); font-weight: var(--dam-vua); color: var(--chu-phu); white-space: nowrap; }
.doi-chieu .so2 b { font-size: var(--chu-tieu-de); color: var(--chu); line-height: var(--dong); }
.doi-chieu .vien { margin-left: auto; }
/* Tổng quan quản trị: thẻ mục (giếng biểu tượng · tên · mũi tên) + lưới ô số 3 cột + bảng tổ + ô giá trị; dải cảnh báo nặng trên cùng */
.canh-do { display: flex; align-items: center; gap: var(--k1); width: 100%; padding: var(--k1) var(--k2); margin-bottom: var(--k1); border: 0; border-radius: var(--bo-dong);
  font: inherit; font-weight: var(--dam-dam); text-align: left; cursor: pointer; }
.canh-do .bt { width: var(--bt-co-lon); height: var(--bt-co-lon); }
.canh-do b { font-size: var(--chu-tieu-de); }
.canh-do .mui { margin-left: auto; }
.tq-the { background: var(--the); border-radius: var(--bo-dong); box-shadow: var(--bong-mem); padding: var(--k1) var(--k2) var(--k2); margin-bottom: var(--k1); }
.tq-dau { display: flex; align-items: center; gap: var(--k1); width: 100%; min-height: var(--nut-cao); padding: 0; border: 0; background: none; font: inherit; color: var(--chu);
  font-weight: var(--dam-dam); text-align: left; cursor: pointer; }
.tq-dau .g { display: grid; place-items: center; width: var(--chip-cao); height: var(--chip-cao); border-radius: var(--bo-o); background: var(--mau-nhan-nen); color: var(--mau-nhan); }
.tq-dau .mui { margin-left: auto; color: var(--vien); }
.luoi-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k1); }
.luoi-so .o-so { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--k1); border: 0; border-radius: var(--bo-o); font: inherit; text-align: left; }
.luoi-so button.o-so { cursor: pointer; }
.luoi-so .o-so b { display: flex; align-items: center; gap: var(--k0); font-size: var(--chu-lon); line-height: var(--dong); white-space: nowrap; }
.luoi-so .o-so span { font-size: var(--chu-nho); font-weight: var(--dam-vua); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--k0); }
.luoi-so .o-so .bt { width: var(--chu-nho); height: var(--chu-nho); }
.luoi-so .o-so.nen { background: var(--nen); color: var(--chu); }
.bang-to { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bang-to th { text-align: right; font-size: var(--chu-nho); color: var(--chu-phu); font-weight: var(--dam-dam); padding: 0 0 var(--k0); white-space: nowrap; }
.bang-to th:first-child, .bang-to td:first-child { text-align: left; }
.bang-to td { padding: var(--k1) 0; border-top: var(--vien-manh) solid var(--vien-nhat); text-align: right; font-weight: var(--dam-dam); white-space: nowrap; }
.bang-to td:first-child { font-weight: var(--dam-vua); color: var(--chu-phu); }
.ghi-nho { margin-top: var(--k1); font-size: var(--chu-nho); color: var(--chu-phu); }
/* thanh tab: nút Quét to GIỮA (kho, quản trị) — nổi lên trên mép thanh; số việc cần làm trên tab Đang làm */
.o-tab.giua .wi { width: calc(var(--fab-co) - var(--k0)); height: calc(var(--fab-co) - var(--k0)); margin-top: calc(var(--k2) * -1); border-radius: var(--bo-vien);
  background: var(--mau-nhan); color: var(--chu-tren-nhan); box-shadow: var(--bong-noi); border: var(--k0) solid var(--the); }
.o-tab.giua .bt { width: var(--bt-o-lon); height: var(--bt-o-lon); }
.o-tab.giua.on .wi { background: var(--mau-nhan-dam); }
.o-tab .wi { position: relative; }
.huy-hieu { position: absolute; top: calc(var(--k0) * -1); right: 0; display: grid; place-items: center; min-width: var(--k3); height: var(--k3); padding: 0 var(--k0);
  border-radius: var(--bo-vien); background: var(--cho); color: var(--chu-tren-nhan); font-size: var(--chu-nho); font-weight: var(--dam-dam); line-height: var(--dong); }
/* 187 (2): kho — MỘT bong bóng ĐỎ tổng việc chờ kho trên tab Đang làm (.huy-hieu.do) + bong bóng đỏ ở góc trên phải ô lưới Đơn hàng · Chuyển kho · Vật tư
   (ảnh mẫu 13 — docs/cho-bao/giao-dien-181/); 0 việc thì không hiện (app.js veDemLuoi) */
.huy-hieu.do { background: var(--loi); }
.o-luoi { position: relative; }
.so-dem { position: absolute; top: var(--k1); right: var(--k1); display: grid; place-items: center; min-width: var(--k3); height: var(--k3); padding: 0 var(--k0);
  border-radius: var(--bo-vien); background: var(--loi); color: var(--chu-tren-nhan); font-size: var(--chu-nho); font-weight: var(--dam-dam); line-height: var(--dong);
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 var(--vien-day) var(--the); }
.luoi-nho .so-dem { top: 0; }
/* 187 (1): bảng Xin vật tư — nhắc chống xin trùng (tổ đang chờ / hôm nay đã nhận vật tư đang chọn) */
.nhac-trung { display: flex; align-items: flex-start; gap: var(--k1); margin-top: var(--k1); padding: var(--k1) var(--k2); border-radius: var(--bo-o);
  background: var(--cho-nen); color: var(--chu); font-weight: var(--dam-vua); }
.nhac-trung .bt { flex: 0 0 auto; color: var(--cho); }
/* màn Quét: khung camera + ô gõ mã + thẻ kết quả (tên hàng to, mã, viên trạng thái, các dòng thông tin) */
.ket-qua { margin-top: var(--k2); background: var(--the); border-radius: var(--bo-dong); box-shadow: var(--bong-mem); padding: var(--k2) var(--k2) var(--k1); }
.ket-qua .tren { display: flex; align-items: flex-start; gap: var(--k1); }
.ket-qua .ten-kq { font-size: var(--chu-ma); font-weight: var(--dam-dam); line-height: var(--dong); overflow-wrap: anywhere; }
.ket-qua .ten-du { font-size: var(--chu-nho); font-weight: var(--dam-vua); color: var(--chu-phu); overflow-wrap: anywhere; }
.ket-qua .ma-kq { font-weight: var(--dam-dam); color: var(--chu-phu); overflow-wrap: anywhere; }
.ket-qua .tren .vien { margin-left: auto; flex: 0 0 auto; }
.ket-qua .dong-tt { display: flex; align-items: center; gap: var(--k1); min-height: var(--o-cao); border-top: var(--vien-manh) solid var(--vien-nhat); }
.ket-qua .dong-tt:first-of-type { margin-top: var(--k1); }
.ket-qua .dong-tt .k { color: var(--chu-phu); font-weight: var(--dam-vua); font-size: var(--chu-nho); white-space: nowrap; }
.ket-qua .dong-tt .v { margin-left: auto; font-weight: var(--dam-dam); text-align: right; overflow-wrap: anywhere; }
.ket-qua .dong-tt .v.so { font-size: var(--chu-tieu-de); }

/* ---- 189: MÀN SOẠN ĐƠN (#/bang-don?don=…) — ảnh mẫu 15-soan-don: GẤP nổi bật · thẻ tổng "đã soạn / cần" + thanh tiến độ · từng mã · hàng đã soạn ---- */
.gap-noi { display: flex; align-items: center; gap: var(--k1); padding: var(--k1) var(--k2); margin-bottom: var(--k2); border-radius: var(--bo-the); background: var(--loi); color: var(--chu-tren-nhan); font-weight: var(--dam-dam); }
.gap-noi .bt { width: var(--bt-co-lon); height: var(--bt-co-lon); flex: 0 0 auto; }
.sd-tong, .sd-dong, .sd-khoi, .sd-ghi { background: var(--the); border-radius: var(--bo-dong); box-shadow: var(--bong-mem); margin-bottom: var(--k1); }
.sd-tong { padding: var(--k2); }
.sd-dong { padding: var(--k1) var(--k2) var(--k2); }
.sd-tong .tren, .sd-dong .tren { display: flex; align-items: center; gap: var(--k1); }
.sd-tong .so { margin-left: auto; font-size: var(--chu-so); font-weight: var(--dam-dam); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sd-dong .so { margin-left: auto; font-size: var(--chu-lon); font-weight: var(--dam-dam); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sd-tong .so small, .sd-dong .so small { font-size: var(--chu-nho); font-weight: var(--dam-vua); color: var(--chu-phu); }
.sd-tong .phu { margin-top: var(--k0); font-size: var(--chu-nho); color: var(--chu-phu); overflow-wrap: anywhere; }
.sd-dong .ten { min-width: 0; font-size: var(--chu-lon); font-weight: var(--dam-dam); overflow-wrap: anywhere; }
.sd-dong .tick { display: inline-flex; flex: 0 0 auto; color: var(--xong); }
/* thanh tiến độ: <progress> (giá trị là thuộc tính — không style="…") */
progress.tien-do { display: block; width: 100%; height: var(--k1); margin-top: var(--k1); border: 0; border-radius: var(--bo-vien); overflow: hidden; background: var(--vien-nhat); color: var(--mau-nhan); -webkit-appearance: none; appearance: none; }
progress.tien-do::-webkit-progress-bar { background: var(--vien-nhat); border-radius: var(--bo-vien); }
progress.tien-do::-webkit-progress-value { background: var(--mau-nhan); border-radius: var(--bo-vien); }
progress.tien-do::-moz-progress-bar { background: var(--mau-nhan); border-radius: var(--bo-vien); }
progress.tien-do.du { color: var(--xong-dam); }
progress.tien-do.du::-webkit-progress-value { background: var(--xong-dam); }
progress.tien-do.du::-moz-progress-bar { background: var(--xong-dam); }
progress.tien-do.qua { color: var(--loi); }
progress.tien-do.qua::-webkit-progress-value { background: var(--loi); }
progress.tien-do.qua::-moz-progress-bar { background: var(--loi); }
.sd-khoi { padding: 0 var(--k2); }
.sd-thung { display: flex; align-items: center; gap: var(--k1); padding: var(--k1) 0; border-top: var(--vien-manh) solid var(--vien-nhat); }
.sd-thung:first-child { border-top: 0; }
.sd-thung .gian { flex: 1 1 auto; min-width: 0; }
.sd-thung .ma { display: block; font-weight: var(--dam-dam); overflow-wrap: anywhere; }
.sd-thung .phu { display: block; font-size: var(--chu-nho); color: var(--chu-phu); overflow-wrap: anywhere; }
.sd-ghi { padding: var(--k1) var(--k2); overflow-wrap: anywhere; }
.sd-ghi .ai { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k0) var(--k1); font-size: var(--chu-nho); font-weight: var(--dam-vua); color: var(--chu-phu); }
.sd-nut { display: flex; flex-wrap: wrap; gap: var(--k1); margin-top: var(--k2); }
/* thẻ bấm được trong thẻ dòng (Việc chờ — Soạn hàng): cả phần trên thẻ là MỘT nút mở màn soạn đơn; nút việc nằm hàng dưới */
.the-bam { display: flex; flex-direction: column; gap: var(--k0); width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.the-bam .hang { align-items: center; }
.the-bam .hang > .bt { flex: 0 0 auto; color: var(--vien); }
/* rà độc lập 14/10 (G28): mã thùng 16 ký tự giữ MỘT dòng (không ngắt ở dấu gạch) — kieu.css --chu-ma */
.mot-dong { white-space: nowrap; }

/* ===== 192 (6) — chủ duyệt 8 ảnh mẫu giao diện máy (docs/cho-bao/ra-doc-lap-190/), lô 1: G24 · G12 · G15 · G4 · G17 ===== */
/* G24: MỌI đích bấm cao 48 px (số đã duyệt 184) — chip BẤM ĐƯỢC (button) cao như ô nhập; chip chữ (span — đầu trang, nhãn) giữ 32 */
button.chip { min-height: var(--o-cao); padding: 0 var(--k2); }
/* G24: danh sách chọn = lưới hai cột ô 48 px, tên giữa ô; tên dài không vừa nửa hàng → chiếm CẢ hàng (.ca-hang — K.chiaO đo sau khi vẽ): không xuống
   dòng, không cắt. Ô đang chọn: nền nhấn chữ trắng (ảnh mẫu G24). .bon = bốn cột cho mã ngắn (mã Kiểm NVL). */
.luoi-chon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--k1); }
.luoi-chon.bon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.luoi-chon > .chip { justify-content: center; min-width: 0; border-radius: var(--bo-nut); font-size: var(--chu-thuong); font-weight: var(--dam-dam); padding: 0 var(--k1); }
.luoi-chon > .chip.ca-hang { grid-column: 1 / -1; }
.luoi-chon > .chip.nhan { background: var(--mau-nhan); border-color: var(--mau-nhan); color: var(--chu-tren-nhan); }
.luoi-chon + .muc, .luoi-chon + .the-dong, .luoi-chon + .vien { margin-top: var(--k2); }
/* G24: nút gửi mã trong ô gõ mã có CHỮ ("Thêm" / "Tra"), cao 48 (trước: 40 px chỉ mũi tên) */
.o-tim .nut-bt.co-chu { width: auto; height: var(--o-cao); padding: 0 var(--k2); gap: var(--k0); font: inherit; font-weight: var(--dam-dam); white-space: nowrap; }
.o-tim .nut-bt.vuong-48 { width: var(--o-cao); height: var(--o-cao); }

/* G12: chip đầu trang KHÔNG còn là nút — chọn tổ / ngày bằng HÀNG BẤM cao 56 ngay đầu thân màn (một tay với tới) */
.hang-chon { display: flex; align-items: center; gap: var(--k1); width: 100%; min-height: var(--nut-cao-lon); padding: 0 var(--k2); margin-bottom: var(--k1);
  border: 0; border-radius: var(--bo-dong); background: var(--the); box-shadow: var(--bong-mem); font: inherit; color: var(--chu); text-align: left; cursor: pointer; }
.hang-chon:active { background: var(--mau-nhan-nen); }
.hang-chon:disabled { cursor: default; }
.hang-chon .k { flex: 0 0 auto; width: calc(var(--k6) * 2); color: var(--chu-phu); }
.hang-chon .v { font-size: var(--chu-lon); font-weight: var(--dam-dam); color: var(--mau-nhan); white-space: nowrap; }
.hang-chon .p { margin-left: auto; font-size: var(--chu-nho); color: var(--chu-phu); white-space: nowrap; }
.hang-chon .p.canh { color: var(--cho); font-weight: var(--dam-dam); }
.hang-chon > .bt { flex: 0 0 auto; margin-left: auto; color: var(--chu-phu); }
.hang-chon .p + .bt { margin-left: 0; }

/* G15: Báo mẻ / Đóng gói mở ra danh sách mẻ chờ MỌI ngày — thẻ như Đang làm (.the-v), nhóm có số đếm */
.nhom-me { display: flex; align-items: baseline; gap: var(--k1); margin: var(--k2) var(--k0) var(--k1); font-weight: var(--dam-dam); }
.nhom-me:first-child { margin-top: var(--k0); }
.nhom-me .dem { color: var(--chu-phu); font-weight: var(--dam-vua); }

/* G4: Trộn ướt theo khuôn Trộn khô — mẻ trộn khô là THẺ to (mẻ đang trộn chọn sẵn: viền nhấn + dấu chọn), mẻ cũ hơn gập lại; mỗi bao: "Bột ướt" ô to
   có kg trong ô, "Nước" + "Số mác" chung một hàng */
.me-the { display: flex; align-items: center; gap: var(--k2); width: 100%; min-height: calc(var(--k6) + var(--k2)); padding: var(--k1) var(--k2); margin-bottom: var(--k1);
  border: var(--vien-day) solid transparent; border-radius: var(--bo-dong); background: var(--the); box-shadow: var(--bong-mem); font: inherit; color: var(--chu);
  text-align: left; cursor: pointer; }
.me-the:active { background: var(--mau-nhan-nen); }
.me-the.chon { border-color: var(--mau-nhan); background: var(--mau-nhan-nen); }
.me-the .g { display: grid; place-items: center; flex: 0 0 auto; width: var(--k5); height: var(--k5); border-radius: var(--bo-o); background: var(--mau-nhan-vien); color: var(--mau-nhan); }
.me-the .noi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.me-the .noi b { font-size: var(--chu-lon); }
.me-the .noi > span { font-size: var(--chu-nho); color: var(--chu-phu); }
.me-the .tick { flex: 0 0 auto; color: var(--mau-nhan); }
.xem-them { display: flex; align-items: center; gap: var(--k1); width: 100%; min-height: var(--nut-cao); padding: 0 var(--k1); border: 0; background: none;
  font: inherit; font-weight: var(--dam-vua); color: var(--mau-nhan); cursor: pointer; }
.bao-uot { display: flex; flex-direction: column; gap: var(--k1); }
.bao-uot.lech { border: var(--vien-day) solid var(--cho); }
.bao-uot .dau-bao { display: flex; align-items: center; justify-content: space-between; gap: var(--k1); min-height: var(--nut-cao); }
.bao-uot .dau-bao .nut { width: auto; }
.tom-day-sx { font-size: var(--chu-nho); color: var(--chu-phu); }

/* ===== 192 (6) lô 2 — G6 / G20 · G19 (ảnh mẫu chủ duyệt) ===== */
/* G6: thẻ đơn — MỘT viên (việc đang tới); lý do / bước / giờ ra dòng chữ phụ xám dưới dòng hàng */
.the-v .ly { font-size: var(--chu-nho); color: var(--chu-phu); overflow-wrap: anywhere; }
/* G19: ba ô lọc 48 px chia đều hàng (Việc của tôi · Kẹt · Tất cả) — số trên ô đếm CÙNG một tập; ô đang chọn nền nhấn chữ trắng; không đủ chỗ thì xuống hàng */
.chip48 { display: flex; flex-wrap: wrap; gap: var(--k1); margin-bottom: var(--k0); }
.chip48 > .chip { flex: 1 1 auto; justify-content: center; padding: 0 var(--k1); border-radius: var(--bo-nut); }
.chip48 > .chip.nhan { background: var(--mau-nhan); border-color: var(--mau-nhan); color: var(--chu-tren-nhan); }
.loc-them { margin: var(--k0) 0 var(--k2); }
.loc-them + .chu-phu { margin-bottom: var(--k2); }
/* G6: ô tóm tắt Đang làm của kho mang chữ trạng thái (Đang soạn, Chờ gọi xe… dài hơn "Chờ") — chữ cỡ tab, lề ngang hẹp để vừa bốn ô ở khổ 375 */
.tom-tat.chu-tt .tt-o { padding-left: var(--k0); padding-right: var(--k0); }
.tom-tat.chu-tt .ten-tt { font-size: var(--chu-tab); }
/* Hàng trả / Việc chờ: dòng nhắc kế toán tách khỏi thẻ trên và nút dưới */
.ghi-kt { margin: var(--k1) var(--k0) var(--k2); }