/* ============================================================
   Dynamik — FILE NÀY SINH RA TỰ ĐỘNG, KHÔNG SỬA TAY.
   Sửa ở mes/src/ rồi chạy: php bin/build-app.php
   ============================================================ */

/* ───── src/css/main.css ───── */
/* ============================================================
   DYNAMIK — Design system theo phong cách Blacklake 小工单 (P1b)
   ------------------------------------------------------------
   Xanh lá chủ đạo cho hành động chính và mục đang chọn; xanh dương cho
   liên kết và mã chứng từ; nhóm trạng thái ok/info/warn/crit (+ plum, mute).
   Chữ hệ thống (không tải font). Phẳng: không bóng đổ, phân tầng bằng
   đường kẻ nhạt. Mọi màu qua biến --…; màn không viết màu trực tiếp.
   ============================================================ */

:root{
  --bg:#f5f6f7; --bg-2:#eff0f2; --panel:#ffffff; --panel-2:#fafafa;
  /* --card trỏ về --panel: tự đổi theo nền sáng/tối (menu, nút icon, chuông). */
  --card:var(--panel);
  --line:#ebedf0; --line-2:#d9dce1;
  --ink:#1f2329; --ink-2:#4e5969; --ink-3:#636c78;
  /* Thương hiệu: xanh lá. Chữ trên nền --brand dùng --on-brand;
     chữ trên nền --brand-soft dùng --brand-ink (đủ tương phản). */
  --brand:#1fb37a; --brand-2:#17a06c; --brand-soft:#e8f7f0; --brand-ink:#0b7a4f; --on-brand:#ffffff; --brand-solid:#0a8554; --brand-solid-2:#087047; --ok-solid:#0a8554;
  --link:#1760cc; --link-soft:#eef4fe; --row-hover:#f5f9ff;
  /* Hiệu cánh (giữ cho màn cũ) */
  --venture:#1d4a7a; --venture-soft:#dde7f1; --vulcan:#6a32b4; --vulcan-soft:#f3ecfd;
  /* Trạng thái */
  --ok:#1fb37a;   --ok-soft:#e8f7f0;   --ok-ink:#0b7a4f;
  --info:#1a6fe0; --info-soft:#e8f0fd; --info-ink:#1458b8;
  --warn:#f08c00; --warn-soft:#fff4e0; --warn-ink:#9a5400; --warn-solid:#b35c00; --info-solid:#1458b8;
  --crit-solid:#cb2634; --on-crit:#ffffff; --crit:#f53f3f; --crit-soft:#ffece8; --crit-ink:#cb2634;
  --plum:#8a4dd8; --plum-soft:#f3ecfd; --plum-ink:#6a32b4;
  /* Màu phân loại cho biểu đồ (xen kẽ để hai màu xanh không kề nhau). */
  --c1:#1fb37a; --c2:#f08c00; --c3:#1a6fe0; --c4:#8a4dd8;
  --grid:#eceef1;
  /* Menu trái tối */
  --nav-bg:#141518; --nav-ink:#c9cdd4; --nav-ink-2:#8a9099; --nav-on-bg:#000000; --nav-on-ink:#1fb37a; --nav-hover:#202227;
  --shadow:none;
  --r:4px; --r-lg:8px; --h-input:32px;
  /* Chữ hệ thống: đủ dấu tiếng Việt, không tải font. */
  --f-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Chặn bằng :not([data-theme="light"]) — người chọn nền sáng thắng cả khi máy
   đang để tối, không cần nhân bản bảng màu cho nền sáng. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111214; --bg-2:#17181b; --panel:#1a1b1e; --panel-2:#202125;
  --line:#2a2c31; --line-2:#3a3d44;
  --ink:#e8eaed; --ink-2:#b0b5bd; --ink-3:#8b9199;
  --brand:#2ec38a; --brand-2:#43d09a; --brand-soft:#12302a; --brand-ink:#5fdaa8; --on-brand:#06231a; --brand-solid:#2ec38a; --brand-solid-2:#43d09a; --ok-solid:#2ec38a;
  --link:#5b9cf5; --link-soft:#16243a; --row-hover:#1d2026;
  --venture:#6a9ed4; --venture-soft:#16233a; --vulcan:#c07fae; --vulcan-soft:#2c1a28;
  --ok:#2ec38a;   --ok-soft:#12302a;   --ok-ink:#5fdaa8;
  --info:#5b9cf5; --info-soft:#16243a; --info-ink:#8ab8f8;
  --warn:#f5a023; --warn-soft:#33260f; --warn-ink:#f7bb5e; --warn-solid:#f5a023; --info-solid:#5b9cf5;
  --crit-solid:#f65050; --on-crit:#06231a; --crit:#f86a6a; --crit-soft:#331a1a; --crit-ink:#fa9494;
  --plum:#b583ee; --plum-soft:#271b3a; --plum-ink:#cfa9f5;
  --c1:#2ec38a; --c2:#f5a023; --c3:#5b9cf5; --c4:#b583ee;
  --grid:#25272c; --shadow:none;
  --nav-bg:#0b0c0e; --nav-ink:#c9cdd4; --nav-ink-2:#8a9099; --nav-on-bg:#000000; --nav-on-ink:#2ec38a; --nav-hover:#17181b;
}}
:root[data-theme="dark"]{
  --bg:#111214; --bg-2:#17181b; --panel:#1a1b1e; --panel-2:#202125;
  --line:#2a2c31; --line-2:#3a3d44;
  --ink:#e8eaed; --ink-2:#b0b5bd; --ink-3:#8b9199;
  --brand:#2ec38a; --brand-2:#43d09a; --brand-soft:#12302a; --brand-ink:#5fdaa8; --on-brand:#06231a; --brand-solid:#2ec38a; --brand-solid-2:#43d09a; --ok-solid:#2ec38a;
  --link:#5b9cf5; --link-soft:#16243a; --row-hover:#1d2026;
  --venture:#6a9ed4; --venture-soft:#16233a; --vulcan:#c07fae; --vulcan-soft:#2c1a28;
  --ok:#2ec38a;   --ok-soft:#12302a;   --ok-ink:#5fdaa8;
  --info:#5b9cf5; --info-soft:#16243a; --info-ink:#8ab8f8;
  --warn:#f5a023; --warn-soft:#33260f; --warn-ink:#f7bb5e; --warn-solid:#f5a023; --info-solid:#5b9cf5;
  --crit-solid:#f65050; --on-crit:#06231a; --crit:#f86a6a; --crit-soft:#331a1a; --crit-ink:#fa9494;
  --plum:#b583ee; --plum-soft:#271b3a; --plum-ink:#cfa9f5;
  --c1:#2ec38a; --c2:#f5a023; --c3:#5b9cf5; --c4:#b583ee;
  --grid:#25272c; --shadow:none;
  --nav-bg:#0b0c0e; --nav-ink:#c9cdd4; --nav-ink-2:#8a9099; --nav-on-bg:#000000; --nav-on-ink:#2ec38a; --nav-hover:#17181b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
.num,.tnum{font-variant-numeric:tabular-nums;letter-spacing:0;font-weight:500}
a{color:var(--link)}
/* Một typeface nên phân cấp phải do CỠ và ĐẬM gánh, không do đổi chữ. */
h1,h2,h3,.disp{font-family:var(--f-display);font-weight:600;letter-spacing:0}
h1{font-weight:600}
/* Mã hàng, mã lệnh: không còn font mono, dùng chữ thưa + đậm vừa để vẫn
   nhận ra là "mã" chứ không phải chữ thường. */
.code,.ent-code,.ent>b.code{font-family:var(--f-sans);font-weight:600;
  letter-spacing:.2px;font-variant-numeric:tabular-nums}

/* ---------- Layout ----------
   Menu tối bên trái (nhóm xổ) + cột phải gồm thanh trên 56px và vùng nội dung.
   Phân hệ là nhóm xổ trong menu, không còn thanh phân hệ ngang. */
.app{min-height:100vh}
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.col{min-width:0;display:flex;flex-direction:column}
/* Cuộn độc lập: menu cố định (position:fixed, 100dvh) tự cuộn bên trong, không bị trang kéo theo và không kéo trang
   (overscroll-behavior:contain chặn lan cuộn). Cột phải vẫn ở cột lưới thứ 2 vì menu đã rời luồng. */
@media (min-width:901px){body:not(.tv) .col{grid-column:2}}
.nav-scrim{touch-action:none;overscroll-behavior:contain}
.tw,.tabs{overscroll-behavior-x:contain}

/* ── Menu tối ── */
.side{background:var(--nav-bg);color:var(--nav-ink);position:fixed;left:0;top:0;bottom:0;width:232px;height:100vh;height:100dvh;
  display:flex;flex-direction:column;gap:2px;padding:0 8px;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--nav-hover) transparent;z-index:60}
.side-brand{display:flex;align-items:center;gap:10px;height:56px;flex:none;padding:0 6px;
  text-decoration:none;color:var(--nav-ink)}
.side-brand .mk{width:30px;height:30px;border-radius:var(--r);flex:none;display:grid;place-items:center;
  color:var(--on-brand);background:var(--brand-solid);font:700 17px/1 var(--f-display)}
.side-bt{min-width:0}
.side-bt b{display:block;font:700 15px/1.15 var(--f-display);color:#fff}
.side-bt span{display:block;font-size:11px;color:var(--nav-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .omni{flex:none;max-width:none;width:100%;margin:2px 0 8px;padding:0 10px;height:32px;
  background:var(--nav-hover);border-color:transparent;color:var(--nav-ink-2)}
.side .omni:hover{color:var(--nav-ink);border-color:var(--nav-ink-2)}
.side .omni .ico{width:14px;height:14px;flex:none}
#nav{display:flex;flex-direction:column;gap:1px;flex:1}
/* Đệm đáy nằm TRONG chân menu (không ở .side): sticky bottom:0 bám mép nội dung, nên đệm ở .side để lộ 8px
   cho chữ các mục cuộn lọt qua dưới nút Thu gọn. */
.side-foot{flex:none;padding:8px 0;margin-top:8px;border-top:1px solid var(--nav-hover);position:sticky;bottom:0;background:var(--nav-bg)}
.nv-mini{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 10px;border:0;border-radius:var(--r);
  background:none;color:var(--nav-ink-2);font:500 12px/1.4 var(--f-sans);cursor:pointer}
.nv-mini:hover{background:var(--nav-hover);color:var(--nav-ink)}
.nv-mini .ico{width:15px;height:15px}

/* ── Thanh trên ── */
:root{--toph:56px}
.top{position:sticky;top:0;z-index:40;height:var(--toph);flex:none;
  display:flex;align-items:center;gap:10px;padding:0 16px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.crumbw{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.top .nav-btn{display:none;flex:none}
.top h1{font:600 14px/1.2 var(--f-sans);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-a{display:flex;align-items:center;gap:2px}
.top .hdr-a .btn{border-color:transparent;background:none;color:var(--ink-2);height:28px;padding:0 8px;font-size:12px}
.top .hdr-a .btn:hover{background:var(--panel-2);color:var(--brand-ink)}
.top .hdr-a .btn .ico{margin-right:4px}
.more{position:relative}
.more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:190px;
  display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 10px 28px rgba(0,0,0,.14)}
.more-menu .hdr-a{width:100%}
.more-menu .hdr-a:empty{display:none}
.more-menu .hdr-a .btn{border-color:var(--line-2);width:100%;justify-content:flex-start}
.nav-scrim{display:none}

/* Ô tìm kiếm toàn cục: trông như input nhưng là button — bấm mới mở hộp thoại,
   nên không nuốt phím tab và không cần giữ trạng thái ở thanh trên. */
.omni{flex:1;max-width:420px;min-width:0;display:flex;align-items:center;gap:8px;
  padding:7px 11px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--bg-2);color:var(--ink-3);font:400 12px/1.4 var(--f-sans);cursor:pointer;
  text-align:left}
.omni:hover{border-color:var(--brand);color:var(--ink-2)}
.omni span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.omni kbd{font:600 10px/1 var(--f-mono);padding:3px 5px;border-radius:4px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink-3);flex:none}

.top-r{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.ico-btn{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
  border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);
  cursor:pointer;font:600 13px/1 var(--f-sans);text-decoration:none}
.ico-btn:hover{border-color:var(--brand);color:var(--brand)}
.ico-btn .ico{width:14px;height:14px}

/* Ngữ cảnh xưởng: nút + menu thả xuống */
.wsx{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--card);color:var(--ink);cursor:pointer;
  font:600 12px/1 var(--f-sans)}
.wsx:hover{border-color:var(--brand)}
.wsx .dot{width:8px;height:8px;border-radius:2px;flex:none}
.wsx .ico{width:12px;height:12px;transform:rotate(90deg);opacity:.6}
.wsw{position:relative}
.wsmenu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;z-index:50;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:0 10px 28px rgba(0,0,0,.14);padding:5px}
.wsmenu a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;
  text-decoration:none;color:var(--ink-2);font:600 12.5px/1 var(--f-sans)}
.wsmenu a:hover{background:var(--panel-2);color:var(--ink)}
.wsmenu a.on{background:var(--brand-soft);color:var(--brand-ink)}
.wsmenu .dot{width:8px;height:8px;border-radius:2px;flex:none}

/* Người đang đăng nhập */
.who-btn{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:var(--r);
  border:1px solid transparent;background:none;cursor:pointer;color:inherit;max-width:190px}
.who-btn:hover{background:var(--panel-2)}
.who-av{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--brand-soft)}
.who-av .ico{width:14px;height:14px;color:var(--brand-ink)}
.who-nm{min-width:0;text-align:left}
.who-nm b{display:block;font:600 12px/1.25 var(--f-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-nm span{display:block;font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#who{position:relative}
.who-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;z-index:50;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:0 10px 28px rgba(0,0,0,.14);padding:5px}
.who-hd{padding:9px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.who-hd b{display:block;font:600 12.5px/1.3 var(--f-sans)}
.who-hd span{font-size:10.5px;color:var(--ink-3)}
.who-mi{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:7px;
  border:0;background:none;color:var(--ink-2);font:500 12.5px/1 var(--f-sans);cursor:pointer;text-align:left}
.who-mi:hover{background:var(--panel-2);color:var(--ink)}
.who-mi.warn{color:var(--warn-ink);font-weight:700}
.who-mi .ico{width:14px;height:14px}

/* Đường dẫn phân cấp: phân hệ xám, màn (#ttl) đen đậm */
.crumb{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--ink-3);white-space:nowrap}
.crumb .ico{width:12px;height:12px;opacity:.7}

/* Tìm kiếm toàn cục: combobox neo tại chỗ (src/ui/omni.js). Ô nhập phủ đúng lên nút #omni,
   panel kết quả thả ngay dưới ô — không scrim, không modal. */
.omni.omni-open{visibility:hidden}
.omni-field{position:fixed;z-index:86;display:flex;align-items:center;gap:8px;padding:0 10px;box-sizing:border-box;
  background:var(--panel);border:1px solid var(--brand);border-radius:var(--r);color:var(--ink-3);
  box-shadow:0 0 0 3px var(--brand-soft),0 6px 18px rgba(0,0,0,.18)}
.omni-field .ico{width:14px;height:14px;flex:none}
.omni-in{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;box-shadow:none;background:none;
  color:var(--ink);font:400 13px/1.4 var(--f-sans)}
.omni-in:focus{border:0;box-shadow:none}
.omni-field kbd,.omni-tip kbd{font:600 10px/1 var(--f-mono);padding:3px 5px;border-radius:4px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink-3);flex:none}
.omni-pop{position:fixed;z-index:85;box-sizing:border-box;padding:6px;overflow-x:hidden;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 14px 36px rgba(0,0,0,.22)}
.omni-gh{display:flex;gap:6px;padding:8px 8px 4px;font:700 10px/1.2 var(--f-sans);text-transform:uppercase;
  letter-spacing:.5px;color:var(--ink-3)}
.omni-gh span{font-weight:500;text-transform:none;letter-spacing:0}
.omni-opt{display:flex;align-items:center;gap:9px;min-height:36px;padding:6px 8px;border-radius:7px;
  cursor:pointer;color:var(--ink-2);min-width:0}
.omni-opt.on{background:var(--brand-soft);color:var(--ink)}
.omni-opt .ico{width:15px;height:15px;flex:none;color:var(--ink-3)}
.omni-opt b{font-family:var(--f-mono);font-size:12.5px;flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.omni-opt .muted{font-size:11.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.omni-opt mark{background:var(--warn-soft,rgba(255,200,60,.3));color:inherit;border-radius:2px;padding:0 1px}
.omni-empty{padding:14px 10px;text-align:center;font-size:12px;color:var(--ink-3)}
.omni-tip{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;padding:8px 8px 4px;border-top:1px solid var(--line);
  font-size:10.5px;color:var(--ink-3)}
.omni-tip span{display:inline-flex;align-items:center;gap:3px}
.omni-field.omni-phone{box-shadow:0 0 0 3px var(--brand-soft),0 8px 24px rgba(0,0,0,.25)}
.omni-phone .omni-in{font-size:16px}   /* 16px: iOS không tự phóng to khi focus */
@media (pointer:coarse){.omni-opt{min-height:44px}}

.nv,.ng-h{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border-radius:var(--r);
  text-decoration:none;color:var(--nav-ink);font:500 13px/1.4 var(--f-sans);border:0;background:none;
  cursor:pointer;text-align:left;position:relative}
.nv:hover,.ng-h:hover{background:var(--nav-hover);color:#fff}
.nv.on{background:var(--nav-on-bg);color:var(--nav-on-ink);font-weight:600}
.nv .ic,.ng-h .ic{display:inline-flex;align-items:center;justify-content:center;width:17px;flex:none}
.nv .nl,.ng-h .nl{line-height:1.5;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv .ico,.ng-h .ic .ico{width:16px;height:16px;vertical-align:0}
.ng-h>.ico{width:14px;height:14px;flex:none;opacity:.7;transition:transform .15s}
.ng.open>.ng-h>.ico{transform:rotate(180deg)}
.ng-b{display:none;flex-direction:column;gap:1px;margin:1px 0 3px}
.ng.open>.ng-b{display:flex}
.ng-b .nv{padding-left:37px;height:32px;font-size:12.5px}
.nv .bdg,.ng-h .bdg{font:700 10px/1 var(--f-mono);padding:2px 6px;border-radius:20px;
  background:var(--crit-solid);color:var(--on-brand);flex:none}
.ng.open .ng-bdg{display:none}

/* min-width:0 là bắt buộc: .main là ô của lưới .shell nên mặc định có sàn
   min-width:auto = min-content của nội dung. Một bảng rộng hơn màn hình sẽ nong
   ô này ra tới max-width rồi đẩy CẢ TRANG cuộn ngang, thay vì để .tw tự cuộn
   trong khung như thiết kế. */
.main{padding:16px 22px 52px;max-width:1560px;width:100%;min-width:0}
.pg-sub{font-size:12px;color:var(--ink-3);margin:0 0 12px;max-width:90ch}
.pg-sub:empty{display:none}
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:var(--brand-ink);font-weight:700;margin-bottom:3px}

/* ---------- Nút, input ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:13px;font-weight:500;
  height:var(--h-input);padding:0 14px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);transition:.15s;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn.pri{background:var(--brand-solid);border-color:var(--brand-solid);color:var(--on-brand)}
.btn.pri:hover{background:var(--brand-solid-2);border-color:var(--brand-solid-2);color:var(--on-brand)}
/* Nút chữ: không viền, icon + chữ — thanh trên và đầu Drawer */
.btn.txt{border-color:transparent;background:none;color:var(--ink-2);padding:0 8px;height:28px;font-size:12px}
.btn.txt:hover{background:var(--panel-2);color:var(--brand-ink);border-color:transparent}
.btn.dgr,.btn.danger{color:var(--crit-ink);border-color:var(--crit);background:var(--panel)}
.btn.dgr:hover,.btn.danger:hover{background:var(--crit-soft);border-color:var(--crit);color:var(--crit-ink)}
.btn.danger.pri{background:var(--crit-solid);color:var(--on-brand)}
.btn.sm{height:26px;padding:0 9px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
input,select,textarea{font-family:inherit;font-size:13px;color:var(--ink);background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r);padding:0 10px;height:var(--h-input);outline:none;
  transition:border-color .15s,box-shadow .15s}
textarea{height:auto;min-height:64px;padding:6px 10px;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
input:disabled,select:disabled,textarea:disabled{background:var(--panel-2);color:var(--ink-3);cursor:not-allowed}
input[type=checkbox],input[type=radio]{width:15px;height:15px;padding:0;accent-color:var(--brand)}
/* Trường form: nhãn trên, ô nhập dưới. Dấu * đỏ cho bắt buộc: <i class="req">*</i> */
label.fld,.fld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2);font-weight:500}
.fld .req,.req{color:var(--crit);font-style:normal;margin-left:2px}
/* Biến thể nhãn trái 120px (form kiểu Blacklake) — dùng class .fld.row cho nhãn có 1 control */
.fld.row{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:8px 12px}
.toolbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
/* Nhóm phân đoạn (Hôm nay / Hôm qua / Tháng này) */
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);padding:2px;gap:2px}
.seg button{font-family:inherit;font-size:12px;font-weight:500;color:var(--ink-2);background:none;border:0;
  border-radius:3px;height:26px;padding:0 12px;cursor:pointer}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"],.seg button.on{background:var(--brand-solid);color:var(--on-brand)}
.seg button[aria-pressed="true"] .muted,.seg button.on .muted{color:inherit;opacity:.85}
/* Tab gạch chân xanh lá */
.tabs{display:flex;gap:4px;align-items:center;border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.tabs>button,.tabs>a{flex:none;border:0;border-bottom:2px solid transparent;background:none;color:var(--ink-2);
  font:500 13px/1 var(--f-sans);padding:11px 12px;margin-bottom:-1px;cursor:pointer;text-decoration:none}
.tabs>button:hover,.tabs>a:hover{color:var(--ink)}
.tabs>.on,.tabs>[aria-selected="true"]{color:var(--brand-ink);border-bottom-color:var(--brand);font-weight:600}
/* Chip lọc: bo tròn nền xám; đang chọn nền xanh lá nhạt */
.chip{display:inline-flex;align-items:center;gap:6px;padding:0 12px;height:26px;border-radius:20px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink-2);font:500 12px/1 var(--f-sans);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip.on{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand-soft);font-weight:600}

/* ---------- Card / KPI ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:none}
.card h2{font-size:16px;margin:0 0 2px}
/* Đầu thẻ: tiêu đề 16px đậm + hành động phải ("Thêm ›") */
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.card-h h2,.card-h h3,.card-h .ct{font-size:16px;font-weight:600;margin:0;flex:1;min-width:0}
.card-h .btn.txt,.card-h a{flex:none;font-size:12px;color:var(--ink-2);text-decoration:none}
.card .hs{font-size:11.5px;color:var(--ink-3);margin-bottom:12px}
.row{display:grid;gap:13px;margin-bottom:15px}
/* Ô lưới mặc định lấy min-content làm sàn chiều rộng, nên MỘT nhãn dài trong một
   ô KPI là đủ đẩy cả cột nội dung rộng ra và làm cả trang cuộn ngang. Nhãn có thể
   đến từ dữ liệu (tên công đoạn lấy thẳng từ Google Sheet), không kiểm soát được
   độ dài — nên chặn ở đây thay vì mong nhãn lúc nào cũng ngắn. */
.row>*{min-width:0}
.kpi .kl>span.kt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k6{grid-template-columns:repeat(6,1fr)}.k5{grid-template-columns:repeat(5,1fr)}
.k4{grid-template-columns:repeat(4,1fr)}.k3{grid-template-columns:repeat(3,1fr)}.k2{grid-template-columns:repeat(2,1fr)}
.kpi .kl{font-size:11px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:6px}
.kpi .kv{font-family:var(--f-display);font-size:28px;font-weight:600;margin-top:5px;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.kpi .ks{font-size:11px;color:var(--ink-3);margin-top:5px}
.kpi .kb{height:3px;border-radius:3px;margin-top:10px;background:var(--grid);overflow:hidden}
.kpi .kb>i{display:block;height:100%;border-radius:3px}
.sw{width:9px;height:9px;border-radius:2px;flex:none}

/* ---------- Icon (bộ Lucide — ISC, sprite cục bộ) ---------- */
.ico{width:15px;height:15px;flex:none;vertical-align:-3px;stroke-width:2}
.ico.lg{width:24px;height:24px;vertical-align:-5px}
.ico.sm{width:13px;height:13px;vertical-align:-2px}
.nv .ic{display:inline-flex;align-items:center;justify-content:center;width:17px}
.nv .ico{width:15px;height:15px;vertical-align:0}
.wsico{display:inline-flex;align-items:center}
.btn .ico{margin-right:4px;vertical-align:-2.5px}
.btn.sm .ico{width:13px;height:13px;margin-right:3px}
.alert b .ico,.note .ico{vertical-align:-3px;margin-right:5px}
.tag .ico{width:11px;height:11px;vertical-align:-1.5px;margin-right:2px}
#thm{display:inline-grid;place-items:center;width:34px;height:32px;padding:0}
#thm .ico{margin:0;vertical-align:0}

/* ---------- Bảng (kỷ luật BI) ---------- */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
table.t th{text-align:left;font-size:12px;color:var(--ink-2);
  font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel-2);z-index:1;white-space:nowrap}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t th.n,table.t td.n{text-align:right}
table.t tbody tr:hover{background:var(--row-hover)}
table.t tr.sel{background:var(--brand-soft)}
.code{font-family:var(--f-mono);font-weight:600;color:var(--ink)}
.muted{color:var(--ink-3)}
/* Trạng thái trống: minh hoạ SVG nội tuyến (currentColor) + chữ. Dùng:
   <div class="empty"><svg class="empty-ill" viewBox="0 0 96 80" aria-hidden="true">…</svg><p>Chưa có dữ liệu</p></div> */
.empty{text-align:center;padding:32px 20px;color:var(--ink-3);font-size:13px}
.empty p{margin:8px 0 0}
.empty-ill{width:96px;height:80px;color:var(--line-2);display:block;margin:0 auto}
.empty-ill .a{fill:var(--panel-2);stroke:currentColor}
.empty-ill .b{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.empty-ill .c{fill:var(--brand-soft);stroke:var(--brand)}

/* ---------- Nhãn ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;line-height:1.4;padding:1px 10px;border-radius:20px;white-space:nowrap}
.pill .pd{width:7px;height:7px;border-radius:50%}
/* Thẻ trạng thái: .pill.ok|info|warn|crit|plum|mute (và tên cũ .p-ok… mà Ent.status sinh ra) */
.p-ok,.pill.ok{background:var(--ok-soft);color:var(--ok-ink)}     .p-info,.pill.info{background:var(--info-soft);color:var(--info-ink)}
.p-warn,.pill.warn{background:var(--warn-soft);color:var(--warn-ink)} .p-crit,.pill.crit{background:var(--crit-soft);color:var(--crit-ink)}
.p-plum,.pill.plum{background:var(--plum-soft);color:var(--plum-ink)}
.p-gray,.pill.mute{background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line-2)}
.p-ven{background:var(--info-soft);color:var(--info-ink)} .p-vul{background:var(--plum-soft);color:var(--plum-ink)}
.tag{display:inline-block;font-family:var(--f-mono);font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2)}

/* ---------- Thanh tiến độ ---------- */
.bar{position:relative;background:var(--grid);border-radius:4px;height:18px;min-width:76px}
.bar>i{position:absolute;left:0;top:0;height:100%;border-radius:4px;min-width:2px;transition:width .3s}
.bar>span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);font-size:10.5px;font-weight:600;color:var(--ink)}
.barw{display:flex;flex-direction:column;gap:8px}
.brow{display:grid;grid-template-columns:140px 1fr;gap:10px;align-items:center}
.brow .bl{font-size:11.5px;font-weight:600;color:var(--ink-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Dây chuyền công đoạn ---------- */
.line{display:grid;gap:0;margin-top:6px}
.lstep{position:relative;padding:0 11px}
.lstep:not(:last-child)::after{content:"";position:absolute;right:-5px;top:36px;width:7px;height:7px;
  border-top:2px solid var(--ink-3);border-right:2px solid var(--ink-3);transform:rotate(45deg)}
.lbox{border:1px solid var(--line);border-top:3px solid var(--c);border-radius:9px;background:var(--panel-2);padding:12px 13px;height:100%}
.lnum{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;
  background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 2px var(--c);font-family:var(--f-mono);font-weight:700;font-size:10.5px}
.ltitle{font-family:var(--f-display);font-weight:600;font-size:13.5px;margin-left:7px}
.lrole{font-size:10.5px;color:var(--ink-2);margin:8px 0 10px;min-height:30px}
.lmetric{display:flex;align-items:baseline;gap:5px}
.lmetric b{font-family:var(--f-display);font-size:22px;font-weight:600}
.lmetric span{font-size:10.5px;color:var(--ink-3)}
.lcap{font-size:10.5px;color:var(--ink-3);margin-top:7px;border-top:1px dashed var(--line);padding-top:6px}

/* ---------- Thẻ xưởng ở trang tổng quan ---------- */
.wsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.wscard{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px 18px;text-decoration:none;color:inherit;display:block;transition:.15s}
.wscard:hover{border-color:var(--c)}
.wscard h3{font-size:17px;margin:0 0 3px}
.wscard .u{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.6px}
.wsstats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:13px 0 11px}
.wsstats>div{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:7px 9px}
.wsstats .l{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px}
.wsstats .v{font-family:var(--f-mono);font-size:16px;font-weight:600;margin-top:2px}
.wschain{display:flex;gap:5px;flex-wrap:wrap}
.wschain span{font-size:10px;padding:2px 7px;border-radius:20px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2)}

/* ---------- Cảnh báo ---------- */
.alert{border:1px solid var(--crit-soft);border-left:3px solid var(--crit);background:var(--crit-soft);color:var(--crit-ink);border-radius:var(--r);
  padding:12px 14px;margin-bottom:13px;font-size:13px}
.alert b{display:block;margin-bottom:4px;font-family:var(--f-display)}
.alert ul{margin:5px 0 0;padding-left:18px}
.alert.warn{border-color:var(--warn-soft);border-left-color:var(--warn);background:var(--warn-soft);color:var(--warn-ink)}
.alert.info{border-color:var(--info-soft);border-left-color:var(--info);background:var(--info-soft);color:var(--info-ink)}
.alert.ok{border-color:var(--ok-soft);border-left-color:var(--ok);background:var(--ok-soft);color:var(--ok-ink)}
.note{border:1px solid var(--line);border-left:3px solid var(--line-2);background:var(--panel-2);border-radius:var(--r);padding:11px 13px;
  font-size:13px;color:var(--ink-2);margin-bottom:13px}
.note b{color:var(--ink)}

/* ---------- Modal / toast ---------- */
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:80;padding:20px}
/* Modal kiểu Blacklake: tiêu đề trái + ✕ góc phải; thân là lưới trường; chân căn phải */
.modal{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 12px 40px rgba(0,0,0,.2);
  width:min(580px,100%);max-height:86vh;overflow:auto;padding:0 24px 20px}
.modal>h3:first-of-type{margin:0 -24px 14px;padding:15px 52px 13px 24px;font-size:16px;font-weight:600;border-bottom:1px solid var(--line)}
.modal .ms{font-size:12px;color:var(--ink-3);margin:-4px 0 14px}
.m-x{position:absolute;top:10px;right:12px;width:28px;height:28px;display:grid;place-items:center;padding:0;
  border:0;border-radius:var(--r);background:none;color:var(--ink-3);cursor:pointer}
.m-x:hover{background:var(--panel-2);color:var(--ink)}
.m-x .ico{width:16px;height:16px;vertical-align:0}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-bottom:15px}
/* Nút chính phải đứng TRƯỚC Huỷ trong DOM (row-reverse đảo hiển thị); modal mới dùng .mact. */
/* Chân modal viết bằng .row (lưới dọc) thì vẫn căn phải: nút chính ở cuối bên phải, Huỷ/Thoát đứng trước nó */
.modal>.row:last-child{display:flex;flex-direction:row-reverse;justify-content:flex-start;gap:9px;margin-top:16px;
  border-top:1px solid var(--line);padding-top:14px}
.fld .muted{font-weight:400}
.mact{display:flex;gap:9px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
@keyframes sl{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line-2);border-top-color:var(--brand);
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

@media (max-width:1180px){.k6,.k5{grid-template-columns:repeat(3,1fr)}.k4{grid-template-columns:repeat(2,1fr)}
  .wsgrid{grid-template-columns:1fr}}
/* Điện thoại hẹp: cụm bên phải thanh trên (xưởng · chuông · AI · giao diện · ? · người dùng) rộng hơn màn 390px
   và nong cả trang theo chiều ngang — giấu tên người dùng, giữ avatar (bấm vào vẫn mở menu tài khoản). */
@media (max-width:560px){.who-nm{display:none}.top-r{gap:6px}}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  /* Menu thành ngăn trượt trái; ☰ mở, bấm nền / chọn mục / Esc đóng. */
  .side{position:fixed;left:0;top:0;bottom:0;width:268px;max-width:84vw;height:100dvh;
    transform:translateX(-102%);visibility:hidden;transition:transform .2s ease,visibility 0s .2s;box-shadow:none}
  body.nav-open .side{transform:none;visibility:visible;transition-delay:0s;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .nav-scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5)}
  body.nav-open .nav-scrim{display:block}
  /* Ngăn kéo đang mở: khoá cuộn nền (trang dưới không trôi khi vuốt ngoài menu). */
  body.nav-open{overflow:hidden;overscroll-behavior:none}
  .top .nav-btn{display:grid}
  .top{padding:0 12px;gap:8px}
  .nv-mini{display:none}
  .main{padding:14px 12px 52px}
  .wsx b,.crumb{display:none}
  .k6,.k5,.k4,.k3,.k2{grid-template-columns:repeat(2,1fr)}.mgrid{grid-template-columns:1fr}}
/* Thu gọn menu 64px chỉ icon — chỉ máy tính. Nhóm xổ bị dàn phẳng: không có chỗ để xổ,
   nên mọi mục hiện thành icon (tooltip qua title). */
@media (min-width:901px){
  body.nav-mini .shell{grid-template-columns:64px minmax(0,1fr)}
  body.nav-mini .side{width:64px}
  body.nav-mini .side{padding:0 8px}
  body.nav-mini .side-bt,body.nav-mini .nl,body.nav-mini .ng-h,body.nav-mini .nv-mini span,
  body.nav-mini .side .omni span{display:none}
  body.nav-mini .side-brand{justify-content:center;padding:0}
  body.nav-mini .side .omni,body.nav-mini .nv,body.nav-mini .nv-mini{justify-content:center;padding:0}
  body.nav-mini .ng-b{display:flex;margin:0;padding-top:4px;border-top:1px solid var(--nav-hover)}
  body.nav-mini .ng-b .nv{padding:0}
  body.nav-mini .nv .bdg{position:absolute;top:2px;right:4px;padding:1px 4px;font-size:9px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Bảng kế hoạch sản xuất theo đơn (nhóm cột như sheet) ---------- */
table.t.plan{font-size:11.5px}
table.t.plan th,table.t.plan td{padding:6px 7px;white-space:nowrap}
/* Tên mẫu dài trong ô SKU: cắt bằng … thay vì tràn đè sang cột kề (line-height ≥1.4 giữ dấu tiếng Việt) */
table.t.plan td>.muted{max-width:170px;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
table.t.plan tr.grp th{font-size:10px;text-transform:uppercase;letter-spacing:.6px;text-align:center;
  border-bottom:2px solid var(--line-2);padding:5px 7px;color:var(--on-brand)}
table.t.plan tr.grp th.g0{background:var(--ink-2)}
table.t.plan tr.grp th.g1{background:var(--brand-solid)}
table.t.plan tr.grp th.g2{background:var(--warn-solid)}
table.t.plan tr.grp th.g3{background:var(--plum)}
table.t.plan tr.grp th.g4{background:var(--info-solid)}
table.t.plan tr.grp th.g5{background:var(--vulcan)}
/* Chữ trên dải màu đậm: --on-brand (trắng ở nền sáng, đậm ở nền tối cho khớp dải sáng hơn) */
table.t.plan tr.grp th.g0,table.t.plan tr.grp th.g1,table.t.plan tr.grp th.g2,
table.t.plan tr.grp th.g3,table.t.plan tr.grp th.g4,table.t.plan tr.grp th.g5{color:var(--on-brand)}
table.t.plan thead tr:nth-child(2) th{top:27px}
/* Lưới khsx: tiêu đề nhóm colspan rộng không được dính trái (che các cột khác khi cuộn ngang) */
table.t.grid.plan tr.grp th:first-child{left:auto}
table.t.grid.plan tr.grp th{line-height:1.4}
table.t.plan input{padding:3px 6px;font-size:11px;height:auto}
.ico.rot{transform:rotate(90deg)}
tr.plan-row td{border-bottom:2px solid var(--line-2)}

/* ---------- Màn hình CÔNG NHÂN: to, đơn giản, bấm được bằng ngón tay ---------- */
.wk{max-width:640px}
.wk-head{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--r);padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow)}
.wk-code{font-family:var(--f-display);font-size:22px;font-weight:600;letter-spacing:-.3px}
.wk-sub{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.wk-row{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow)}
.wk-label{flex:1;font-size:15px;font-weight:600;line-height:1.35}
.wk-label span{display:block;font-size:12px;color:var(--ink-3);font-weight:400;margin-top:2px}
.wk-in{height:auto;width:118px;flex:none;font-family:var(--f-mono);font-size:30px;font-weight:600;text-align:center;
  padding:10px 8px;border:2px solid var(--line-2);border-radius:var(--r)}
.wk-in:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.wk-foot{display:flex;gap:12px;margin:14px 0 12px;flex-wrap:wrap}
.wk-send{width:100%;padding:18px;font-family:var(--f-display);font-size:20px;font-weight:700;letter-spacing:.5px;
  color:var(--on-brand);background:var(--brand-solid);border:0;border-radius:var(--r);cursor:pointer;box-shadow:var(--shadow)}
.wk-send:hover{background:var(--brand-solid-2)}
.wk-send:disabled{opacity:.6;cursor:not-allowed}
.wk-send .ico{width:22px;height:22px;vertical-align:-4px;margin-right:6px}
.wk-card{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--warn);border-radius:var(--r);padding:15px 17px;margin-bottom:11px;
  text-decoration:none;color:inherit;box-shadow:var(--shadow);max-width:640px}
.wk-card:hover{border-color:var(--warn);transform:translateY(-1px)}
.wk-go{color:var(--ink-3);display:flex}
@media (max-width:620px){.wk-row{flex-wrap:wrap}.wk-in{width:100%;font-size:34px}}

/* ═══════════ MÀN HÌNH ĐĂNG NHẬP ═══════════
   Bàn số PIN cố ý to: công nhân bấm bằng ngón tay trên máy tính bảng ở xưởng,
   không phải trỏ chuột. Nút tối thiểu 64px cho ngón tay có găng. */
#gate{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
  background:var(--bg);overflow:auto}
.gate-card{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.gate-hd{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.gate-hd .mk{width:40px;height:40px;border-radius:var(--r-lg);background:var(--brand-solid);color:var(--on-brand);
  display:grid;place-items:center;font:700 20px/1 var(--f-display)}
.gate-hd b{display:block;font:600 19px/1.2 var(--f-display);letter-spacing:.2px}
.gate-hd span{font-size:12px;color:var(--ink-3)}
.gate-p{font-size:13px;color:var(--ink-3);margin:0 0 12px}
.gate-err{margin-top:14px;padding:10px 12px;border-radius:9px;font-size:13px;
  background:color-mix(in srgb,var(--crit) 12%,transparent);color:var(--crit);
  border:1px solid color-mix(in srgb,var(--crit) 30%,transparent)}
.gate-who{display:grid;gap:8px;max-height:46vh;overflow:auto}
/* <button> KHÔNG thừa hưởng color/font từ body — thiếu 2 dòng này là chữ dùng màu
   mặc định của nút (gần đen) trên nền tối, đọc không nổi. */
.gate-who .who{text-align:left;padding:15px 16px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);cursor:pointer;display:block;width:100%;
  color:var(--ink);font-family:var(--f-sans)}
.gate-who .who:hover{border-color:var(--brand);background:var(--bg-2)}
.gate-who .who b{display:block;font:600 16px/1.3 var(--f-sans)}
.gate-who .who span{font-size:12px;color:var(--ink-2)}
.btn.big{height:48px;padding:0 15px;font-size:15px;width:100%;justify-content:center;margin-top:6px}

/* chip người đang đăng nhập, đáy thanh bên.
   Tên một dòng, hai nút xuống dòng dưới: thanh bên hẹp, nhồi ngang là cắt mất tên. */
.who-chip{padding:9px 8px;margin-top:8px;border-top:1px solid var(--line)}
.who-top{display:flex;gap:9px;align-items:center}
.who-top .ic{width:30px;height:30px;border-radius:9px;background:var(--bg-2);display:grid;
  place-items:center;flex:0 0 auto}
.who-top .ic .ico{width:15px;height:15px;color:var(--brand)}
.who-top>div{min-width:0;flex:1}
.who-chip b{display:block;font:600 12px/1.3 var(--f-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-chip span{font-size:10px;color:var(--ink-3)}
.who-act{display:flex;gap:6px;margin-top:8px}
.who-act .btn{flex:1;justify-content:center;padding:6px 4px;font-size:10.5px;gap:4px;
  white-space:nowrap}
/* "Đổi mật khẩu" dài hơn "Đổi mã" cũ nên gãy hai dòng trong thanh bên hẹp. Cho nút
   mật khẩu rộng gấp đôi nút Thoát thay vì chia đều — Thoát chỉ cần vừa chữ. */
.who-act .btn:first-child{flex:2}
.who-act .btn .ico{width:12px;height:12px}
/* Ai đang đăng nhập — thay cho ô "gõ tên bạn" ở phiếu giao/nhận */
.wk-me{display:flex;gap:7px;align-items:center;font-size:13px;color:var(--ink-3);
  padding:9px 12px;background:var(--bg-2);border-radius:9px}
.wk-me .ico{width:15px;height:15px;color:var(--brand)}
.wk-me b{color:var(--ink)}

/* Ô nhập trong màn hình đăng nhập và trong modal: to hơn mặc định của bảng biểu.
   Mặc định input 12.5px/padding 6px là cho bảng dữ liệu dày — gõ mật khẩu hoặc
   bấm trên máy tính bảng thì quá nhỏ. */
.gate-card label.fld{gap:6px;margin-bottom:12px;font-size:12px}
.gate-card label.fld input{width:100%;height:44px;padding:0 12px;font-size:15px;border-radius:var(--r)}
.modal label.fld{gap:5px;margin-bottom:12px}
.modal label.fld input,.modal label.fld select{width:100%}
.modal label.fld textarea{width:100%}

/* Ô hiện mã nhân viên đang gõ (bước 1 của bàn số) */

/* ═══════════ MÀN HÌNH HƯỚNG DẪN ═══════════ */
.gd-top{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:18px 20px;border-radius:var(--r);margin-bottom:16px;border:1px solid var(--line)}
.gd-top.ok{background:var(--ok-soft);border-color:var(--ok)}
.gd-top.no{background:var(--warn-soft);border-color:var(--warn)}
.gd-top-k{font:700 15px/1.3 var(--f-sans);letter-spacing:.3px}
.gd-top.ok .gd-top-k{color:var(--ok-ink)} .gd-top.no .gd-top-k{color:var(--warn-ink)}
.gd-top-s{font-size:12.5px;color:var(--ink-2);margin-top:4px;max-width:62ch}
.gd-top-n{display:flex;gap:18px;flex-wrap:wrap}
.gd-top-n>div{text-align:right}
.gd-top-n b{display:block;font:700 20px/1 var(--f-mono)}
.gd-top-n span{font-size:10px;color:var(--ink-2)}

.gd-what h2{font:600 16px/1.3 var(--f-display);margin:0 0 8px}
.gd-what p{font-size:13.5px;line-height:1.65;color:var(--ink-2);margin:0 0 14px;max-width:82ch}
.gd-flow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.gd-flow span{font-size:11.5px;padding:5px 10px;border-radius:20px;background:var(--bg-2);
  border:1px solid var(--line);white-space:nowrap}
.gd-flow span.hi{background:var(--brand-solid);color:var(--on-brand);border-color:var(--brand-solid);font-weight:600}
.gd-flow .ico{width:12px;height:12px;color:var(--ink-3);flex:none}
.gd-note{font-size:12px;color:var(--ink-2);padding:10px 12px;background:var(--bg-2);border-radius:9px}

.gd-h{font:600 15px/1.3 var(--f-display);margin:22px 0 10px;display:flex;gap:9px;align-items:baseline}
.gd-h span{font:400 11.5px/1 var(--f-sans);color:var(--ink-3);text-transform:none;letter-spacing:0}

.gd-steps{display:grid;gap:8px}
.gd-step{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r)}
.gd-step.nx{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.gd-step.todo .gd-no{background:var(--crit-soft);color:var(--crit-ink)}
.gd-step.warn .gd-no{background:var(--warn-soft);color:var(--warn-ink)}
.gd-step.ok   .gd-no{background:var(--ok-soft);color:var(--ok-ink)}
.gd-no{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;
  font:700 14px/1 var(--f-mono)}
.gd-body{flex:1;min-width:0}
.gd-hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gd-hd b{font:600 13.5px/1.3 var(--f-sans)}
.gd-val{display:flex;gap:6px;align-items:center;font:500 12px/1.4 var(--f-mono);color:var(--ink-2);margin-top:5px}
.gd-val .ico{width:13px;height:13px;flex:none}
.gd-why{font-size:12px;line-height:1.6;color:var(--ink-2);margin:6px 0 0;max-width:88ch}
.gd-step .btn{flex:none;align-self:center}

.gd-day{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.gd-day>div{padding:14px 15px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.gd-when{font:700 9.5px/1 var(--f-sans);letter-spacing:.7px;text-transform:uppercase;color:var(--brand-ink);
  margin-bottom:7px}
.gd-day b{font:600 13.5px/1.3 var(--f-sans)}
.gd-day p{font-size:12px;line-height:1.6;color:var(--ink-2);margin:6px 0 0}

.gd-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:10px}
.gd-auto>div{padding:13px 15px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.gd-auto .ico{width:16px;height:16px;color:var(--brand);margin-bottom:7px}
.gd-auto b{display:block;font:600 12.5px/1.35 var(--f-sans)}
.gd-auto span{display:block;font-size:11.5px;line-height:1.55;color:var(--ink-2);margin-top:4px}

.gd-bad{margin:0;padding:0 0 0 22px;display:grid;gap:8px}
.gd-bad li{font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.gd-bad b{color:var(--crit-ink)}
/* Hai cột quyết định trên bảng Kế hoạch: "Từ Bán TP" và "Net làm từ đầu" */
table.t th.bd,table.t td.bd{border-left:2px solid var(--line-2)}
table.t td.bd{background:var(--bg-2)}
/* Cột "Đang làm ở lệnh nào" trên bảng Kế hoạch: mỗi PO một dòng nhỏ */
.po-mini{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:11px;
  padding:3px 0;white-space:nowrap}
.po-mini+.po-mini{border-top:1px dashed var(--line)}
.po-mini .code{font-size:11.5px}
.po-q{font-family:var(--f-mono);color:var(--ink-2)}
.po-eta{color:var(--ink-3)}
/* Mã PO trong bảng kế hoạch của đơn — bấm được */
.po-tag{text-decoration:none;border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.po-tag:hover{background:var(--brand-soft)}

/* ── Tiến độ đơn hàng ── */
.pv-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.pv-t { border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 6px;
        background: var(--card); padding: 12px 14px; }
.pv-n { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--c); font-variant-numeric: tabular-nums; }
.pv-l { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
/* Vạch màu bên trái: nặng nhẹ đọc được bằng mắt, không phải đọc chữ. */
.pv-r > td:first-child { border-left: 3px solid transparent; }
table.dt tr.pv-h > td{border-top:1px solid var(--line-2)}
.pv-red   > td:first-child { border-left-color: var(--crit-ink); }
.pv-yellow > td:first-child { border-left-color: var(--warn-ink); }
.pv-green > td:first-child { border-left-color: var(--ok-ink); }
/* Bảng bày lại đúng sheet nên nhiều cột — chữ nhỏ hơn, ô sát hơn, và cột "phải xử
   lý" được nới rộng vì đó là thứ người ta đọc. */
.pv-tb { font-size: 12px; }
.pv-tb th, .pv-tb td { padding: 5px 7px; white-space: nowrap; }
/* Dòng phụ giải thích: không viền trên (nó thuộc dòng ngay trên), chữ xuống dòng
   được, các lý do xếp ngang cho gọn. */
.pv-tb tr.pv-why > td { border-top: 0; padding-top: 0; white-space: normal; }
/* display:flex ĐẶT TRÊN <td> sẽ huỷ luôn cơ chế colspan — ô co lại còn mấy chục px
   và chữ rơi từng từ một dòng. Nên flex phải nằm ở <div> bên trong, td giữ nguyên
   là table-cell. */
.pv-tb .pv-x { display: flex; flex-wrap: wrap; gap: 3px 16px; }
.pv-i { font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }
.pv-d { width: 14px; padding-right: 0 !important; }
/* Dòng đầu của mỗi đơn có vạch trên: nhóm đơn nhiều PO đọc ra được ranh giới. */
.pv-tb tbody tr.pv-h > td { border-top: 1px solid var(--line-2); }
.pv-t { text-decoration: none; color: inherit; display: block; }
.pv-t:hover { border-color: var(--c); }
.pv-i span { font-weight: 700; font-size: 10.5px; letter-spacing: .03em; }
/* Trong .alert thì <b> là dòng tiêu đề (display:block), nên danh sách trong thân
   phải dùng thẻ riêng — không thì mỗi tên cột rơi xuống một dòng kèm dấu phẩy lạc. */
.pv-k { font-weight: 650; white-space: nowrap; }
/* Tên khách dài (SakkarinCd Kongthon) đẩy cột Status ra ngoài mép — cắt bớt bằng
   ellipsis chứ đừng để mất cột trạng thái, đó là cột luật bắt phải soi. */
.pv-tb .pv-c { max-width: 118px; overflow: hidden; text-overflow: ellipsis; }
.alert > div { margin-top: 4px; }
.alert > div > b { font-family: inherit; margin: 0; }

/* ── Biểu đồ tiến độ ── */
.pv-g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pv-ch { padding: 13px 15px; }
.pv-ch h3 { font-family: var(--f-display); font-size: 14px; margin: 0 0 9px; }
.pv-legend { display: flex; flex-wrap: wrap; gap: 3px 13px; margin-bottom: 9px; }
.pv-lg { font-size: 11px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.pv-lg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.pv-row { display: grid; grid-template-columns: 118px 1fr auto; gap: 9px; align-items: center; margin-bottom: 6px; }
.pv-lb { font-size: 12px; color: var(--ink-2); }
.pv-rt { font-size: 11px; white-space: nowrap; }
.pv-bar { display: flex; min-height: 20px; border-radius: 3px; overflow: hidden; background: var(--panel-2); }
.pv-sg { display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--on-brand);
         min-width: 3px; font-variant-numeric: tabular-nums; }
/* Cột dọc: chiều cao theo tỷ lệ, số đặt trên đầu cột để đọc được cả khi cột thấp. */
.pv-bars { display: flex; gap: 14px; align-items: flex-end; height: 104px; padding: 0 4px; }
.pv-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.pv-cv { border-radius: 3px 3px 0 0; min-height: 2px; }
.pv-cn { font-size: 13px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pv-cl { font-size: 10.5px; color: var(--ink-3); text-align: center; }
.pv-foot { font-size: 11px; color: var(--ink-3); line-height: 1.5; margin-top: 8px; }
/* Dòng thời gian: mốc đặt theo phần trăm nên tự co theo khung, không cần tính viewBox. */
.pv-tl { max-height: 250px; overflow-y: scroll; scrollbar-width: thin; }
.pv-tl-r { display: grid; grid-template-columns: 132px 1fr; gap: 8px; align-items: center; margin-bottom: 3px; }
.pv-tl-n { font-size: 11px; display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.pv-tl-n span { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-tl-t { position: relative; height: 19px; border-bottom: 1px solid var(--line); }
.pv-pt { position: absolute; top: 0; transform: translateX(-50%); width: 17px; height: 17px;
         border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 700;
         background: var(--ok-soft); color: var(--ok-ink); border: 1px solid var(--ok-ink); }
.pv-pt-s { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-ink); }
.pv-pt-l { background: var(--crit-soft); color: var(--crit-ink); border-color: var(--crit-ink); }
.pv-now { position: absolute; top: -2px; bottom: -1px; width: 1px; background: var(--ink-2); opacity: .75; }
/* Mốc quá hạn nằm TRÊN các mốc khác: hai mốc sát ngày nhau thì cái đang cháy phải
   là cái nhìn thấy, không phải cái vẽ sau cùng. */
.pv-pt { z-index: 1; }
.pv-pt-s { z-index: 2; }
.pv-pt-l { z-index: 3; }
/* Vạch hôm nay nằm TRÊN mốc: để dưới thì dòng nào có mốc sát hôm nay là vạch biến
   mất, mà đó đúng là những dòng cần đọc mốc so với hôm nay nhất. */
.pv-now { z-index: 4; }
.pv-em { font-size: 11px; line-height: 1.4; color: var(--ink-3); padding: 1px 0 1px 7px; align-self: center; }

/* ---------- Ô hiện mật khẩu vừa cấp ---------- */
/* To và thưa chữ: bảng này được đọc to hoặc chép tay ở xưởng, nhầm một ký tự là
   người ta không vào được. user-select:all để bấm một lần chọn cả chuỗi. */
.pw-show{ font:700 34px/1 var(--f-mono); letter-spacing:.18em; text-align:center;
  padding:20px; margin:12px 0; background:var(--bg-2);
  border:1px dashed var(--line-2); border-radius:var(--r); user-select:all }

/* Bảng lưới/ma trận (spec D7, danh sách LUOI trong contract): đầu cột xám, viền ô nhạt, cột đầu ghim trái. */
table.t.grid{border:1px solid var(--line)}
table.t.grid th{background:var(--panel-2);line-height:1.4}
table.t.grid th,table.t.grid td{border-right:1px solid var(--line)}
table.t.grid th:last-child,table.t.grid td:last-child{border-right:0}
table.t.grid th:first-child,table.t.grid td:first-child{position:sticky;left:0;background:var(--card);z-index:1}
table.t.grid th:first-child{background:var(--panel-2);z-index:2}
table.t.grid tr.perm-grp td{background:var(--bg-2)}
/* ---------- Ma trận vai trò × quyền ---------- */
/* Cột đầu dính trái: cuộn ngang qua 7 vai trò mà vẫn đọc được đang tick quyền nào. */
.perm-mx th:first-child, .perm-mx td:first-child{
  position:sticky; left:0; background:var(--card); z-index:1; min-width:290px }
.perm-mx th.n, .perm-mx td.n{ text-align:center; min-width:98px }
.perm-mx input[type=checkbox]{ width:17px; height:17px; cursor:pointer }
.perm-mx input:disabled{ opacity:.45; cursor:not-allowed }
.perm-grp td{ background:var(--bg-2); font-weight:650; font-size:11.5px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted) }
/* Nhãn phụ trong đầu cột ma trận và mã quyền dưới nhãn — nhỏ, không tranh chỗ */
.mx-sub{font:400 10px/1.35 var(--f-sans);color:var(--ink-3);margin-top:3px;text-transform:none;letter-spacing:0}
.mx-code{font:400 10px/1.3 var(--f-mono);color:var(--ink-3);margin-top:2px}
/* Thẻ team: mỗi team một khối, team ngừng dùng thì mờ đi chứ không ẩn — còn phải
   thấy để bật lại. */
.tm-card{margin-bottom:12px}
.tm-card.off{opacity:.55}
.tm-card .t td{padding:6px 9px}
.tm-card select{padding:0 7px;font-size:12px;height:28px}

/* ═══════════ Ent — bộ renderer thực thể dùng chung ═══════════
   Một hình dạng cho mã hàng ở MỌI màn: mã đậm mono, tên phụ nhỏ bên dưới.
   Trước đây mỗi màn tự bày một kiểu nên overview và chi tiết đọc ra hai thứ. */
.ent{display:inline-flex;flex-direction:column;gap:1px;min-width:0;vertical-align:top}
.ent>b.code{font:650 12.5px/1.25 var(--f-mono);letter-spacing:.01em}
.ent-name{font-size:11px;color:var(--ink-3);line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;display:block;max-width:34ch}
.ent-code{font:600 13px/1.25 var(--f-mono);color:var(--link)}
a.ent-code{text-decoration:none;border-bottom:1px dotted currentColor}
a.ent-code:hover{color:var(--info-ink)}
.ent-stage{font-size:12px}

/* Số lượng: số chính theo đơn vị xưởng, quy đổi làm phụ. Chữ số bảng (tabular-nums)
   để các dòng thẳng cột khi đọc nhanh. */
.qty{white-space:nowrap;font-variant-numeric:tabular-nums}
.qty>b{font-weight:650}
.qty>i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3)}
/* Hàng biểu đồ cột ngang (Ent.hbar) — cao hơn thanh tiến độ để đọc từ xa */
.bar.hbar{height:19px}

/* ═══════════ BẢNG ĐIỀU HÀNH ═══════════ */
/* Việc cần xử lý: mỗi dòng là một hành động, có vạch màu bên trái để mức độ đọc
   được bằng mắt chứ không phải đọc chữ. */
.todo-card{margin-top:13px}
.todo{display:flex;align-items:center;gap:12px;padding:11px 13px;margin-bottom:7px;
  border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:9px;
  background:var(--bg-2);text-decoration:none;color:inherit}
.todo:hover{border-color:var(--brand);background:var(--panel-2)}
.todo.crit{border-left-color:var(--crit)}
.todo.warn{border-left-color:var(--warn)}
.todo.info{border-left-color:var(--info)}
.td-ic{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;
  background:var(--card)}
.td-ic .ico{width:15px;height:15px}
.todo.crit .td-ic{background:var(--crit-soft)} .todo.crit .td-ic .ico{color:var(--crit-ink)}
.todo.warn .td-ic{background:var(--warn-soft)} .todo.warn .td-ic .ico{color:var(--warn-ink)}
.todo.info .td-ic{background:var(--info-soft)} .todo.info .td-ic .ico{color:var(--info-ink)}
.td-b{flex:1;min-width:0}
.td-b b{display:block;font:600 13px/1.35 var(--f-sans)}
.td-b span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.td-go{flex:none;display:inline-flex;align-items:center;gap:4px;font:600 11.5px/1 var(--f-sans);
  color:var(--brand-ink);white-space:nowrap}
.td-go .ico{width:12px;height:12px}
/* Dòng cảnh báo giờ có nút "Đã nhận" bên cạnh, nên phần bấm-để-đi phải là một
   thẻ <a> riêng bên trong — lồng <button> vào <a> là HTML sai và bàn phím đi lạc. */
.td-hit{flex:1;min-width:0;display:flex;align-items:center;gap:12px;
  text-decoration:none;color:inherit}
.todo.gray{opacity:.62;border-left-color:var(--line-2)}
.todo.gray .td-ic{background:var(--bg-2)}
.btn.ghost{background:transparent;border-style:dashed;color:var(--ink-3)}
.btn.ghost:hover{border-style:solid;color:var(--brand-ink)}

/* ── Ô sửa tại chỗ ──
   Ô sửa được phải TRÔNG khác ô chỉ đọc kể cả khi chưa rê chuột: gạch chân mờ.
   Không có dấu hiệu gì thì người ta không biết bấm được, và tính năng coi như
   không tồn tại với người không được ai chỉ. */
.ed{position:relative;cursor:text;border-bottom:1px dashed var(--line-2);
  padding-bottom:1px;display:inline-flex;align-items:center;gap:4px}
.ed:hover,.ed:focus-visible{border-bottom-color:var(--brand);outline:none;color:var(--brand-ink)}
.ed-p{display:none;line-height:0}
.ed-p .ico{width:11px;height:11px;color:var(--ink-3)}
.ed:hover .ed-p,.ed:focus-visible .ed-p{display:inline-flex}
.ed-in{font:inherit;font-family:var(--f-sans);padding:2px 5px;height:auto;min-width:66px;max-width:190px;
  border:1px solid var(--brand);border-radius:4px;background:var(--panel);color:var(--ink)}
.ed-ok{animation:edok 1.4s ease-out}
@keyframes edok{0%{background:var(--ok-soft)}100%{background:transparent}}

/* ── Điểm đứt ──
   Hai loại đứt đọc khác nhau nên phải tách hai cột, không trộn một danh sách:
   đứt DÒNG CHẢY thấy được trên sàn, đứt ĐỘ TIN CẬY chỉ lộ ra qua số liệu. */
.fl-wrap{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.fl-h{font:600 12px/1 var(--f-sans);letter-spacing:.2px;margin-bottom:3px}
.fl-row{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;margin-top:7px;
  border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:8px;
  background:var(--bg-2);text-decoration:none;color:inherit}
.fl-row:hover{border-color:var(--brand);background:var(--panel-2)}
.fl-row.crit{border-left-color:var(--crit)}
.fl-row.warn{border-left-color:var(--warn)}
.fl-row b{flex:none;max-width:34%;font:600 12px/1.4 var(--f-sans)}
.fl-row span{flex:1;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.fl-row .ico{flex:none;width:13px;height:13px;margin-top:2px;color:var(--ink-3)}
@media (max-width:860px){.fl-wrap{grid-template-columns:1fr}}

/* ── Biểu đồ cột chồng ── */
.ch{position:relative}
.ch-svg{width:100%;height:148px;display:block;overflow:visible}
.ch-hit{cursor:crosshair}
.ch-x{position:relative;height:15px;margin-top:5px}
.ch-xl{position:absolute;transform:translateX(-50%);font:400 10px/1 var(--f-mono);color:var(--ink-3);
  white-space:nowrap}
/* Chú giải LUÔN có khi từ 2 series: nhận dạng không được chỉ dựa vào màu. */
.ch-lg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:11px;padding-top:9px;
  border-top:1px solid var(--line)}
.ch-li{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.ch-li i{width:9px;height:9px;border-radius:2px;flex:none}
.ch-li b{font-family:var(--f-mono);font-size:11.5px;color:var(--ink)}
.ch-peak{margin-top:6px;font-size:11px;color:var(--ink-3)}

/* ── Biểu đồ cột ngang một series: không cần chú giải, nhãn hiện trực tiếp ── */
.hbw{display:flex;flex-direction:column;gap:8px}
.hbr{display:grid;grid-template-columns:minmax(90px,26%) 1fr auto;gap:10px;align-items:center}
.hbl{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbt{height:14px;background:var(--bg-2);border-radius:4px;overflow:hidden}
.hbt>i{display:block;height:100%;background:var(--c1);border-radius:4px}
.hbr.warn .hbt>i{background:var(--warn)}
.hbv{font-size:11px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.hbv b{font-family:var(--f-mono);font-size:13px;color:var(--ink)}
.hbv span{display:block;font-size:10px}

/* ═══════════ BẢNG PHÒNG BAN (treo TV ở xưởng) ═══════════
   Chữ to hơn hẳn các màn khác: đọc từ giữa xưởng, không phải từ ghế ngồi. */
.bd{display:flex;flex-direction:column;gap:14px}
.bd-top{display:flex;align-items:center;gap:16px;font:600 17px/1 var(--f-sans)}
.bd-clock{margin-left:auto;font:700 26px/1 var(--f-mono);letter-spacing:.02em}
/* Chấm sống: bảng treo tường mà đứng im thì không ai biết nó còn chạy hay đã treo. */
.bd-live{display:flex;align-items:center;gap:7px;font:400 12px/1 var(--f-sans);color:var(--ink-3)}
.bd-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:bdp 2s infinite}
@keyframes bdp{0%,100%{opacity:1}50%{opacity:.25}}

.bd-cols{display:grid;gap:12px}
.bd-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.bd-st{font:700 13px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.9px;color:var(--ink-3)}
.bd-big{margin:9px 0 11px;font:700 42px/1 var(--f-mono);letter-spacing:-.02em}
.bd-big span{font:400 16px/1 var(--f-mono);color:var(--ink-3);margin-left:5px}
.bd-col .bar{height:12px}
.bd-sub{margin-top:9px;font-size:12.5px;color:var(--ink-3)}

.bd-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bd-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.bd-h{font:700 12px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.9px;
  color:var(--ink-3);margin-bottom:11px}
.bd-row{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);
  font-size:14.5px}
.bd-row:last-child{border-bottom:0}
.bd-row b{font-family:var(--f-mono);font-size:14px;flex:none}
.bd-row span{color:var(--ink-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-row i{font-style:normal;font-family:var(--f-mono);font-weight:700;flex:none}
.bd-none{color:var(--ink-3);font-size:13.5px;padding:8px 0}
.bd-alert{margin-top:10px;padding:9px 11px;border-radius:8px;background:var(--crit-soft);
  color:var(--crit-ink);font:600 13.5px/1.3 var(--f-sans);display:flex;align-items:center;gap:7px}
.bd-alert .ico{width:15px;height:15px}
@media (max-width:900px){.bd-2{grid-template-columns:1fr}.bd-big{font-size:34px}}
/* % để NGOÀI cột, không đè lên mép: chữ trên đúng chỗ chuyển màu là chỗ không
   đọc được ở cả nền sáng lẫn nền tối. */
.bd-bar{display:flex;align-items:center;gap:10px}
.bd-bar .bar{flex:1}
.bd-bar>span{font:700 15px/1 var(--f-mono);color:var(--ink-2);flex:none;min-width:44px;text-align:right}

/* Thẻ chọn xưởng ở trang gốc — dành cho người làm trong xưởng, không ở cấp nhà máy */
.wsx-card{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;
  padding:20px 22px;transition:border-color .12s}
.wsx-card:hover{border-color:var(--brand)}
.wsx-card .dot{width:11px;height:11px;border-radius:3px}
.wsx-card b{font:700 17px/1.2 var(--f-display)}
.wsx-card .muted{font-size:12px}

/* ---------- Ô chỉ số bấm được (D365 gọi là tile dẫn vào danh sách đã lọc) ---------- */
.kpi-go{display:block;position:relative;text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
.kpi-go:hover{border-color:var(--brand)}
.kpi-go:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kpi-go .kgo{position:absolute;top:12px;right:11px;color:var(--ink-3);opacity:0;transition:opacity .12s}
.kpi-go:hover .kgo,.kpi-go:focus-visible .kgo{opacity:1}

/* ---------- Sắp xếp theo cột ---------- */
table.t th.srt-on{cursor:pointer;user-select:none}
table.t th.srt-on:hover{color:var(--ink);background:var(--panel-2)}
table.t th.srt-a{color:var(--brand)}
table.t th .srt-i{display:inline-block;width:11px;margin-left:3px;font-size:8px;vertical-align:1px}
.tw-tools{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.tw-tools input{width:230px}
.tw-tools .cnt{font-size:11px;color:var(--ink-3)}

/* ---------- Chế độ TV: bảng treo giữa xưởng, không ai bấm ---------- */
body.tv .top,body.tv .side,body.tv .hdr,body.tv .pg-sub,body.tv .nav-scrim{display:none}
body.tv .shell{grid-template-columns:minmax(0,1fr)}
body.tv .main{padding:18px 26px;max-width:none;min-height:100vh;display:flex;flex-direction:column}
body.tv #view{flex:1;display:flex;flex-direction:column}
/* Bảng treo tường thì chiều cao là tài nguyên, không phải chỗ trống: cho các
   khối giãn hết màn để đứng xa vẫn đọc được, thay vì dồn lên một phần tư trên. */
body.tv .bd{flex:1}
body.tv .bd-cols{flex:1;align-content:stretch}
body.tv .bd-col{display:flex;flex-direction:column;justify-content:center}
body.tv .bd-2{flex:0 0 auto;min-height:230px}
body.tv .bd{gap:20px}
body.tv .bd-top{font-size:26px}
body.tv .bd-clock{font-size:42px}
body.tv .bd-st{font-size:17px}
body.tv .bd-big{font-size:72px;margin:14px 0 16px}
body.tv .bd-big span{font-size:24px}
body.tv .bd-sub{font-size:17px}
body.tv .bd-col{padding:22px 26px}
body.tv .bd-col .bar{height:18px}
body.tv .bd-card{padding:20px 24px;font-size:17px}
.bd-exit{margin-left:14px;font-size:12px;color:var(--ink-3);text-decoration:none;opacity:.6;
  border:1px solid var(--line);border-radius:6px;padding:4px 9px;transition:opacity .12s}
.bd-exit:hover,.bd-exit:focus-visible{opacity:1;color:var(--ink);border-color:var(--brand)}

/* ---------- Chấm công: màn cho ĐIỆN THOẠI, ngón tay cái ---------- */
.ci{max-width:520px;margin:0 auto}
.ci-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px 18px;margin-bottom:13px;text-align:center}
.ci-st{font-size:14px;color:var(--ink-2);margin-bottom:16px}
.ci-btn{width:100%;min-height:104px;border:0;border-radius:14px;cursor:pointer;
  font:700 27px/1.1 var(--f-display);letter-spacing:.5px;color:var(--on-brand);
  display:flex;align-items:center;justify-content:center;gap:11px;
  transition:transform .08s,filter .12s}
.ci-btn .ico{width:27px;height:27px}
.ci-btn.in{background:var(--brand-solid)}
.ci-btn.out{background:var(--warn-solid)}
.ci-btn:active{transform:scale(.985)}
.ci-btn:disabled{filter:grayscale(.6);opacity:.65;cursor:wait}
.ci-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ci-qr{margin-top:14px;display:flex;align-items:center;gap:6px}
.ci-qr input{flex:1;height:auto;font:600 19px/1 var(--f-mono);letter-spacing:4px;text-transform:uppercase;
  text-align:center;padding:12px 10px}
.ci-st{display:flex;align-items:center;justify-content:center;gap:2px}
.ci-sub{display:block;font-weight:400;color:var(--ink-2);margin-top:2px}
.ci-mu{color:var(--ink-3)}
.ci-gps{display:block;margin-top:13px;font-size:12.5px;line-height:1.5}
.ci-ok{color:var(--ok-ink,var(--ok))}
.ci-bad{color:var(--warn-ink)}
.ci-note{margin-top:9px;font-size:11px;color:var(--ink-3)}
@media (max-width:620px){
  .ci-btn{min-height:128px;font-size:31px}
  .ci-card{padding:18px 14px 14px}
}

/* ---------- Màn mã cổng: treo ở cổng, đọc từ xa ---------- */
.gatew{max-width:640px;margin:6vh auto 0;text-align:center}
.gate-ws{font:600 19px/1 var(--f-sans);color:var(--ink-2);text-transform:uppercase;letter-spacing:2px}
.gate-code{font:700 clamp(62px,17vw,132px)/1 var(--f-mono);letter-spacing:9px;
  margin:18px 0 12px;color:var(--brand-solid)}
.gate-sub{font-size:14px;color:var(--ink-2);max-width:42ch;margin:0 auto}
.gate-bar{height:7px;border-radius:5px;background:var(--grid);overflow:hidden;margin:22px auto 0;max-width:340px}
.gate-bar>i{display:block;height:100%;width:100%;background:var(--brand);transition:width 1s linear}

/* ---------- Dấu (!) ---------- */
.hint-b{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  padding:0;margin-left:5px;border:0;border-radius:50%;background:var(--panel-2);color:var(--ink-3);
  cursor:pointer;vertical-align:-4px;flex:none;transition:background .12s,color .12s}
.hint-b:hover,.hint-b[aria-expanded="true"]{background:var(--brand-soft);color:var(--brand-ink)}
.hint-b:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.hint-b .ico{width:13px;height:13px;vertical-align:0}
.hint-p{position:absolute;z-index:70;max-width:min(300px,86vw);margin-top:6px;
  background:var(--card);border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;
  font:400 12px/1.55 var(--f-sans);color:var(--ink-2);box-shadow:0 10px 28px rgba(0,0,0,.2)}

/* ---------- Bản đồ tile (OpenStreetMap) ---------- */
.ci-map-card{padding:14px}
.ci-map{position:relative;height:230px;border-radius:11px;overflow:hidden;
  background:var(--panel-2);border:1px solid var(--line)}
.ci-map.empty{display:grid;place-items:center;text-align:center;padding:0 18px;
  font-size:12.5px;color:var(--ink-3);height:130px}
.tm-layer{position:absolute;inset:0}
.tm-t{position:absolute;width:256px;height:256px;user-select:none}
/* Nền tối: OSM chỉ có tile sáng. Đảo màu rồi xoay sắc độ cho ra bản đồ tối mà
   vẫn giữ đúng màu cây xanh và đường — rẻ hơn nhiều so với nuôi một bộ tile riêng. */
:root[data-theme="dark"] .tm-layer{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tm-layer{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9)}}
.tm-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tm-attr{position:absolute;right:0;bottom:0;font:400 9.5px/1 var(--f-sans);padding:3px 5px;
  background:rgba(255,255,255,.72);color:#333;text-decoration:none;border-top-left-radius:5px}
.tm-scale{position:absolute;left:8px;bottom:8px;font:600 10px/1 var(--f-mono);padding:4px 7px;
  border-radius:5px;background:var(--card);color:var(--ink-2);border:1px solid var(--line)}
.m-zone{fill:var(--brand);fill-opacity:.16;stroke:var(--brand);stroke-width:2;stroke-dasharray:6 4}
.m-acc{fill:var(--info);fill-opacity:.16;stroke:var(--info);stroke-opacity:.5;stroke-width:1}
.m-me{stroke:#fff;stroke-width:2.5}
.m-me.ok{fill:var(--ok)}
.m-me.far{fill:var(--crit)}
.m-line{stroke:var(--ink);stroke-width:1.6;stroke-opacity:.55;stroke-dasharray:5 4}
.m-pin path{fill:var(--brand);stroke:#fff;stroke-width:1.6}
.m-pin-h{fill:#fff}

.ci-dist{font:600 12px var(--f-mono);color:var(--ink-2)}
.ci-addr{margin-top:11px;font-size:12.5px;display:flex;flex-direction:column;gap:7px}
.ci-addr-row{display:flex;gap:10px;align-items:baseline}
.ci-addr-row .k{flex:0 0 130px;color:var(--ink-3);font-size:11px;display:flex;align-items:center;gap:5px}
.ci-addr-row .k .ico{width:13px;height:13px}
.ci-addr .btn{align-self:flex-start;margin-top:2px}
/* ---------- Màn QUÉT PHIẾU (#/scan): kế thừa khung .wk của trạm công nhân ---------- */
.sc-stage{display:flex;align-items:center;gap:14px;background:var(--brand-soft);border:1px solid var(--brand);
  border-radius:var(--r);padding:12px 16px;margin-bottom:12px}
.sc-seq{flex:none;width:40px;height:40px;border-radius:50%;background:var(--brand-solid);color:var(--on-brand);
  font-family:var(--f-display);font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center}
.sc-name{font-family:var(--f-display);font-size:20px;font-weight:600;color:var(--brand-ink)}
.sc-stats{margin-bottom:10px}
.sc-stats .kv{font-size:22px}
@media (max-width:620px){.sc-stats{grid-template-columns:repeat(3,1fr);gap:8px}.sc-stats .kv{font-size:18px}}

/* ---------- PHIẾU THEO DÕI LỆNH (#/poprint): tờ A5 dọc, in được ----------
   Tờ phiếu ép màu GIẤY: đặt lại token màu ngay trên .ps-sheet nên nền tối của
   app không lọt vào bản in, và pill/mã hàng vẫn dùng đúng component chung. */
.ps-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.ps-wrap{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.ps-sheet{--bg:#fff;--panel:#fff;--panel-2:#f3f3f3;--ink:#111;--ink-2:#444;--ink-3:#666;--line:#bbb;--line-2:#999;
  background:#fff;color:#111;width:148mm;min-height:210mm;padding:9mm 10mm;box-sizing:border-box;
  border:1px solid var(--line);font-size:10.5pt;break-after:page;page-break-after:always}
.ps-brand{font-size:8pt;text-transform:uppercase;letter-spacing:1px;color:#666}
.ps-top{display:flex;align-items:center;gap:3mm;margin:1mm 0 2mm}
.ps-code{font-family:var(--f-display);font-size:26pt;font-weight:700;letter-spacing:-.5px;margin:0}
.ps-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm;font-size:10pt;border-top:1px solid #111;
  border-bottom:1px solid #111;padding:2mm 0}
/* Chỉ nhãn đầu ô — không chạm .qty của Ent (cũng là span) nằm ngay dưới */
.ps-meta>div>span:first-child{display:block;font-size:7.5pt;text-transform:uppercase;letter-spacing:.5px;color:#666;margin-bottom:.5mm}
.ps-note{font-size:9pt;color:#444;margin-top:2mm}
.ps-line{margin-top:5mm}
.ps-line-hd{display:flex;align-items:center;gap:3mm;padding-bottom:1.5mm;border-bottom:1.5px solid #111;margin-bottom:1mm}
.ps-line-hd .ent-name{color:#444}
.ps-line-qty{margin-left:auto;font-size:12pt}
.ps-row{display:grid;grid-template-columns:28mm 1fr 50mm;gap:3mm;align-items:center;padding:2.5mm 0;
  border-bottom:1px dashed #999;break-inside:avoid;page-break-inside:avoid}
.ps-qr svg{width:28mm;height:28mm;display:block}
.ps-noqr{font-size:6.5pt;word-break:break-all;color:#444}
.ps-st>b{display:block;font-family:var(--f-display);font-size:13pt;font-weight:600}
.ps-st>span{display:block;font-size:9.5pt;color:#444;margin-top:.5mm}
.ps-st small{display:block;font-size:7pt;color:#888;letter-spacing:.3px;margin-top:1mm}
.ps-blank{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:1.5mm;height:24mm}
.ps-blank span{border:1px solid #999;border-radius:1.5mm;font-size:7pt;color:#777;padding:1mm 1.5mm}
.ps-ft{margin-top:5mm;font-size:8pt;color:#666;border-top:1px solid #bbb;padding-top:2mm}
@media (max-width:700px){.ps-sheet{width:100%;min-height:0}}

/* Khi in: vỏ app biến mất, mỗi tờ phiếu một trang A5. Khoá theo body.po-print
   (gắn lúc mount màn poprint, gỡ lúc unmount) để không chạm bản in của màn khác. */
@media print{
  @page{size:A5 portrait;margin:0}
  body.po-print{background:#fff}
  body.po-print .top,body.po-print .side,body.po-print .hdr,body.po-print .nav-scrim,body.po-print .ps-tools,body.po-print #toast{display:none!important}
  body.po-print .app,body.po-print .shell{display:block}
  body.po-print .main{padding:0;max-width:none}
  body.po-print .ps-wrap{display:block;gap:0}
  body.po-print .ps-sheet{border:0;width:auto;min-height:0;margin:0;padding:9mm 10mm}
  body.po-print .ps-sheet:last-child{break-after:auto;page-break-after:auto}
}
/* ---------- Chuông ở thanh trên: tồn dở dang + sự cố (src/ui/bell.js) ---------- */
#bell{position:relative}
.bell-btn{position:relative}
.bell-btn.warn{border-color:var(--warn);color:var(--warn-ink)}
.bell-btn.crit{border-color:var(--crit);color:var(--crit-ink);background:var(--crit-soft)}
.bell-bdg{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:10px;
  font:700 9.5px/16px var(--f-mono);text-align:center;background:var(--crit-solid);color:var(--on-brand)}
.bell-menu{min-width:320px;max-width:380px;max-height:70vh;overflow:auto}
.bell-grp{padding:4px 0 2px;border-bottom:1px solid var(--line)}
.bell-grp:last-child{border-bottom:0}
.bell-h{display:flex;align-items:center;gap:8px;padding:7px 10px 3px;font:700 10px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3)}
.bell-none{padding:6px 10px 8px;font-size:11.5px;color:var(--ink-3)}
.bell-row{display:block;padding:7px 10px 7px 12px;border-left:3px solid var(--line-2);margin:2px 4px;
  border-radius:6px;text-decoration:none;color:inherit}
.bell-row:hover{background:var(--panel-2)}
.bell-row.warn{border-left-color:var(--warn)} .bell-row.crit{border-left-color:var(--crit);background:var(--crit-soft)}
.bell-row.ack{border-left-color:var(--info)}
.bell-row b{display:block;font:600 12.5px/1.3 var(--f-sans)}
.bell-row span{display:block;font-size:11px;color:var(--ink-3);margin-top:1px}
.bell-menu a.who-mi{text-decoration:none}

/* Màn thợ: mức tối đa cạnh ô nhập */
.wk-lim{font-style:normal;font-weight:600;color:var(--ink-2)}
.wk-lim.block{color:var(--crit-ink)} .wk-lim.unk{color:var(--warn-ink);font-weight:400}

/* Hộp báo sự cố: bốn ô to, bấm được bằng ngón tay */
.inc-kinds{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inc-kind{display:flex;align-items:center;gap:9px;padding:12px 13px;border:1px solid var(--line-2);
  border-radius:var(--r);cursor:pointer;font-weight:600;font-size:13.5px}
.inc-kind:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.inc-kind input{margin:0}

/* Màn Sự cố */
.card.inc{margin-bottom:10px;border-left:4px solid var(--line-2);padding:12px 15px}
.card.inc.open{border-left-color:var(--warn)} .card.inc.ack{border-left-color:var(--info)}
.card.inc.crit{border-left-color:var(--crit);background:var(--crit-soft)}
.card.inc.done{opacity:.75}
.inc-top{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.inc-main{flex:1;min-width:240px}
.inc-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.inc-note{font-size:14px;font-weight:600;margin-top:7px;line-height:1.35}
.inc-meta{font-size:11.5px;color:var(--ink-3);margin-top:5px;line-height:1.6}
.inc-act{display:flex;gap:6px;align-items:center}
/* ═══════════ DÃY CÔNG ĐOẠN — Ent.chain() ═══════════
   Một vòng = một công đoạn. Màu là NGHĨA: xám chờ · xanh dương đang làm (viền
   đầy dần theo %, vẽ bằng conic-gradient từ --p) · xanh lá xong · đỏ chặn QC.
   Chấm đỏ góc = qua ETA mà chưa xong. Không hard-code hex: mọi màu là token để
   nền tối đổi theo. Vòng là <button> thật nên bấm/tab/Enter đều được. */
.chain{display:inline-flex;align-items:flex-start;white-space:nowrap;vertical-align:middle;max-width:100%}
.ch-i{display:inline-flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.ch-n{position:relative;width:30px;height:30px;border-radius:50%;padding:0;border:0;cursor:pointer;
  display:grid;place-items:center;font:700 9px/1 var(--f-mono);color:var(--ink-2);
  background:var(--line-2);transition:transform .12s;font-variant-numeric:tabular-nums}
/* Lõi trắng để con số nằm trên nền phẳng, phần vòng ngoài mới là chỗ tô % */
.ch-n::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--panel)}
.ch-n>i,.ch-n>.ico{position:relative;z-index:1;font-style:normal}
.ch-n .ico{width:14px;height:14px;vertical-align:0}
.ch-n:hover,.ch-n.on{transform:scale(1.12)}
.ch-n:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ch-n.st-pend{background:var(--line-2);color:var(--ink-2)}
.ch-n.st-run{background:conic-gradient(var(--info) calc(var(--p,0)*1%),var(--info-soft) 0);color:var(--info-ink)}
.ch-n.st-done{background:var(--ok-solid);color:var(--on-brand)}
.ch-n.st-done::before{display:none}
.ch-n.st-block{background:var(--crit);color:var(--crit-ink)}
.ch-n.st-block::before{background:var(--crit-soft)}
.ch-n.late::after{content:"";position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-radius:50%;
  background:var(--crit);border:2px solid var(--panel);z-index:2}
.ch-l{display:inline-block;width:14px;height:2px;background:var(--line-2);margin-top:14px;flex:none}
.ch-l.ok{background:var(--ok)}
.ch-t{font-style:normal;font-size:10px;color:var(--ink-2);max-width:72px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-align:center}
.chain-md .ch-n{width:44px;height:44px;font-size:11px}
.chain-md .ch-n .ico{width:18px;height:18px}
.chain-md .ch-l{width:26px;margin-top:21px}
.chain-md .ch-t{font-size:11px;max-width:96px}
/* Nhóm SONG SONG (Ent.chain): các vòng cùng nhóm đứng cạnh nhau trong một khung, nhãn "song song" dưới khung.
   1-2 bước: một cột dọc; từ 3 bước: lưới 2 cột cho khỏi cao. Gạch nối ở hai bên khung canh giữa. */
.ch-g{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:3px 4px 2px;border:1px dashed var(--line-2);border-radius:12px}
.ch-gb{display:grid;grid-template-columns:auto;gap:3px}
.ch-g2 .ch-gb{grid-template-columns:repeat(2,auto)}
.ch-g .ch-n{width:24px;height:24px;font-size:8px}
.ch-g .ch-n::before{inset:2px}
.ch-g .ch-n .ico{width:11px;height:11px}
.ch-gl{font-style:normal;font-size:9px;letter-spacing:.2px;color:var(--ink-3,var(--ink-2));text-transform:lowercase}
.ch-l.ch-lc{align-self:center;margin-top:0}
.chain-md .ch-g .ch-n{width:34px;height:34px;font-size:10px}
.chain-md .ch-g .ch-gb{gap:6px 8px}
.chain-md .ch-g .ch-i{flex-direction:row}
.chain-md .ch-g:not(.ch-g2) .ch-gb{grid-template-columns:auto}
.chain-md .ch-g .ch-t{text-align:left;max-width:88px}
.chain-md .ch-g .ch-gl{font-size:10px}
.tag.ss{font-size:9.5px;padding:0 5px;white-space:nowrap}

/* ═══════════ MÀN LỆNH SẢN XUẤT (#/wo) ═══════════ */
/* Thanh view: tab gốc + tab người dùng lưu; số dòng ngay trên tab để chưa bấm đã biết có gì */
.vtabs{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-bottom:12px;
  border-bottom:1px solid var(--line);padding-bottom:8px}
.vt{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:20px;border:1px solid transparent;
  background:none;color:var(--ink-2);font:600 12px/1 var(--f-sans);cursor:pointer}
.vt:hover{background:var(--panel-2);color:var(--ink)}
.vt.on{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand-soft)}
.vt-n{font:700 10px/1 var(--f-mono);padding:2px 6px;border-radius:20px;background:var(--panel-2);color:var(--ink-2)}
.vt.on .vt-n{background:var(--panel);color:var(--brand-ink)}
.vt-x{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;color:var(--ink-3)}
.vt-x:hover{background:var(--crit-soft);color:var(--crit-ink)}
.vt-x .ico{width:10px;height:10px;vertical-align:0}
.vt-add{border:1px dashed var(--line-2);color:var(--ink-2)}
.vt-add .ico{width:12px;height:12px}
/* Tiêu đề cột sắp được (module Sort): mũi tên chỉ hiện ở cột đang sắp */
th.srt{cursor:pointer;user-select:none}
th.srt:hover{color:var(--ink)}
th.srt[aria-sort]{color:var(--brand-ink)}
th.srt[aria-sort]::after{content:"\2191";margin-left:4px}
th.srt[aria-sort="descending"]::after{content:"\2193"}
.wo-ch{white-space:nowrap}
.wo-due{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-2);margin-top:2px}
.wo-due.bad{color:var(--crit-ink);font-weight:600}
.wo-due .ico{width:11px;height:11px}
/* Thanh thao tác hàng loạt: nổi ở đáy, đảo màu như toast để tách khỏi bảng */
.actbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;justify-content:center;padding:10px 14px;border-radius:12px;background:var(--ink);color:var(--bg);
  box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:12.5px;max-width:calc(100vw - 24px)}
.actbar b{font-family:var(--f-mono);font-size:15px}
.actbar select{background:var(--panel);color:var(--ink);font-size:12px;padding:0 8px;height:28px}
.actbar .btn{background:transparent;border-color:rgba(128,128,128,.6);color:var(--bg)}
.actbar .btn:hover{border-color:var(--bg);color:var(--bg)}
/* Ngăn chi tiết bên phải — dưới thanh trên, không che menu; điện thoại thì toàn màn */
.drawer{position:fixed;top:var(--toph);right:0;bottom:0;width:min(540px,100vw);z-index:45;background:var(--panel);
  border-left:1px solid var(--line-2);box-shadow:-12px 0 32px rgba(0,0,0,.12);display:flex;flex-direction:column;
  animation:drin .18s ease}
@keyframes drin{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.dr-hd{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.dr-hd>div{flex:1;min-width:0}
.dr-ttl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dr-ttl .ent-code{font-size:18px}
.dr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 40px}
.dr-sec{font-size:12.5px;margin-bottom:8px;line-height:1.6}
.dr-sec>span{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-2);font-weight:700;margin-right:6px}
.dr-line{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.dr-line-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dr-line .chain{margin-bottom:10px;overflow-x:auto;padding-bottom:4px}
.dr-fold-b>.dr-line:first-child{border-top:0;margin-top:0;padding-top:0}
table.dr-t{font-size:11.5px}
table.dr-t th,table.dr-t td{padding:5px 6px;white-space:nowrap}
/* Popover một công đoạn (bấm vòng tròn) */
.pop{position:fixed;z-index:75;width:min(300px,calc(100vw - 16px));background:var(--panel);border:1px solid var(--line-2);
  border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:12px 13px;font-size:12px;animation:sl .15s ease}
.pop-hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.pop-hd b{font-size:13px}
.pop-hd .muted{margin-left:auto;font-family:var(--f-mono);font-size:11px}
.pop-row+.pop-row{border-top:1px dashed var(--line);margin-top:8px;padding-top:8px}
.pop-sku{margin-bottom:5px}
.pop-kv{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin-top:8px}
.pop-kv>span{color:var(--ink-2);font-size:10px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;align-self:center}
.pop-kv b{font-weight:500;min-width:0;overflow-wrap:anywhere}
.pop-ft{display:flex;gap:6px;justify-content:flex-end;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
@media (max-width:900px){
  .drawer{top:0;width:100vw;z-index:70}
  /* Dãy công đoạn cuộn ngang TRONG ô, không nong bảng ra */
  .wo-ch .chain{max-width:190px;overflow-x:auto;padding-bottom:3px}
    .actbar{bottom:10px}
}
/* Thuộc tính hidden phải THẮNG display của lớp: .drawer{display:flex} từng đè [hidden] của trình duyệt
   nên ngăn chi tiết rỗng vẫn chiếm nửa màn phải dù đã hidden. */
[hidden]{display:none!important}
/* Mã hàng trong bảng lệnh không được gãy giữa chừng trên điện thoại ("F-" / "XS2MS1F") */

/* ---------- Trợ lý (src/ui/assist.js): nút góc phải + ngăn chat + mic ---------- */
.ai-btn.on{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.drawer.ai-dr{width:min(420px,100vw)}
.ai-hd .ico-btn{flex:none}
.ai-msgs{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:8px}
.ai-m{max-width:88%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ai-m.u{align-self:flex-end;background:var(--brand-solid);color:var(--on-brand);border-bottom-right-radius:4px}
.ai-m.a{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.ai-m.a.err{border-color:var(--crit);color:var(--crit-ink);background:var(--crit-soft)}
.ai-m.wait{color:var(--ink-3)}
.ai-m.wait .spin{width:12px;height:12px;vertical-align:-2px;margin-right:4px}
.ai-pend{align-self:stretch;border:1px solid var(--warn);background:var(--warn-soft,var(--panel-2));border-radius:12px;padding:11px 13px}
.ai-pend-h{display:flex;align-items:center;gap:6px;font:700 11px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.5px;color:var(--warn-ink)}
.ai-pend-h .ico{width:14px;height:14px}
.ai-pend-t{margin:8px 0 10px;font-size:13.5px;font-weight:600;line-height:1.45}
.ai-pend-a{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ai-pend-a .muted{font-size:11px}
.ai-in{display:flex;gap:7px;align-items:flex-end;padding:10px 12px 12px;border-top:1px solid var(--line);background:var(--panel)}
.ai-in textarea{flex:1;resize:none;min-height:38px;max-height:120px;padding:9px 11px;font:400 13.5px/1.4 var(--f-sans)}
.ai-in .ico-btn{width:38px;height:38px;flex:none}
.ai-in .ico-btn .ico{width:17px;height:17px}
.ai-send{background:var(--brand-solid);color:var(--on-brand);border-color:var(--brand-solid)}
.ai-send:hover{color:var(--on-brand);filter:brightness(1.08)}
.ai-send:disabled{opacity:.5;cursor:wait}
.ai-mic.rec{background:var(--crit);color:var(--on-brand);border-color:var(--crit);animation:aipulse 1.1s ease-in-out infinite}
@keyframes aipulse{0%,100%{box-shadow:0 0 0 0 rgba(220,60,60,.45)}50%{box-shadow:0 0 0 7px rgba(220,60,60,0)}}
@media (max-width:900px){
  .drawer.ai-dr{width:100vw}
  .ai-in .ico-btn{width:46px;height:46px}
  .ai-in textarea{min-height:46px;font-size:16px}
}

.ai-btn{display:inline-flex;align-items:center;gap:5px;width:auto;padding:0 9px;font-weight:700}
.ai-help{padding:0 12px 10px;font-size:11px;line-height:1.5;color:var(--ink-3);background:var(--panel)}

/* ═══════════ TRANG CHỦ (D12): cột chính + cột phụ 340px ═══════════ */
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.dash-main,.dash-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.dash-side .todo-card{margin-top:0}
.dash-kpis{margin:0}
.dash-kpis.row{gap:10px}
.dash-kpis .kpi{padding:12px}
.dash-kpis .kpi .kv{font-size:22px}
.dash-grid .card .tw{overflow-x:auto}
/* Dây chuyền nhiều khâu (Cánh 12 khâu): cuộn trong khối, không đẩy cả trang tràn ngang */
.dash-grid .line{overflow-x:auto;padding-bottom:6px}
.dash-side .fl-wrap{grid-template-columns:1fr}
@media (max-width:1180px){.dash-grid{grid-template-columns:minmax(0,1fr)}}
.card-h .seg{flex:none}
.card-h .btn.sm{flex:none}
/* Công đoạn: thẻ mỗi công đoạn */
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.sc{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 14px 12px;background:var(--panel)}
.sc-tag{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4;
  font-size:12px;font-weight:600;color:var(--ink);padding:1px 8px 1px 7px;border-left:3px solid var(--c);background:var(--panel-2);border-radius:2px}
.sc-body{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:10px 0 12px}
.sc-n b{display:block;font:600 30px/1.2 var(--f-display);font-variant-numeric:tabular-nums}
.sc-n span{white-space:nowrap;font-size:11px;color:var(--ink-3);line-height:1.4}
.sc-m{display:grid;gap:2px;margin:0;text-align:right}
.sc-m>div{display:flex;justify-content:flex-end;gap:8px;font-size:12px;line-height:1.5}
.sc-m dt{color:var(--ink-3);text-align:right}
.sc-m>div{align-items:baseline}
.sc-m dd{margin:0;min-width:46px;font-weight:600}
.sc-m dd.ok{color:var(--ok-ink)}.sc-m dd.warn{color:var(--warn-ink)}
.sc-p{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-3);line-height:1.4}
.sc-p b{color:var(--ink);font-size:12px;min-width:32px;text-align:right}
.sc-bar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.sc-bar i{display:block;height:100%;background:var(--brand);border-radius:3px}
.sc-note{margin:10px 0 0}
/* Truy cập nhanh */
.pin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.pin-card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.pin-card:hover{border-color:var(--brand);background:var(--panel-2)}
.pin-hit{display:flex;align-items:center;gap:10px;padding:11px 32px 11px 12px;text-decoration:none;color:inherit;min-width:0}
.pin-ic{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-lg);background:var(--brand-soft);color:var(--brand-ink)}
.pin-t{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.pin-t b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin-t span{font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin-x{position:absolute;top:6px;right:6px;width:22px;height:22px;display:grid;place-items:center;border:0;background:none;color:var(--ink-3);border-radius:var(--r);cursor:pointer;opacity:0}
.pin-card:hover .pin-x,.pin-x:focus-visible{opacity:1}
.pin-x:hover{color:var(--crit);background:var(--crit-soft)}
.pin-empty{padding:18px 12px;line-height:1.4}
.pin-empty .ico{width:22px;height:22px;color:var(--ink-3)}
@media (hover:none){.pin-x{opacity:1}}
/* Nút ☆ cạnh tên màn */
.pin-btn{flex:none;width:26px;height:26px;display:grid;place-items:center;border:0;background:none;border-radius:var(--r);color:var(--ink-3);cursor:pointer;padding:0}
.pin-btn[hidden]{display:none}
.pin-btn:hover{background:var(--panel-2);color:var(--warn)}
.pin-btn.on{color:var(--warn)}
.pin-btn.on .ico{fill:currentColor}
.pin-btn .ico{width:16px;height:16px;vertical-align:0}
#dash-wo .dt-chips,#dash-wo .dt-chiplist{flex-wrap:wrap}
@media (min-width:1181px){
  /* Cột phụ 340px: dòng việc xếp dọc (icon+chữ, rồi nút) thay vì dàn ngang */
  .dash-side .todo{flex-direction:column;align-items:stretch;gap:8px}
  .dash-side .td-hit{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 10px;align-items:start}
  .dash-side .td-go{grid-column:2;justify-self:start;line-height:1.4}
  .dash-side .todo>.btn{align-self:flex-start;margin-left:40px}
  .dash-side .fl-row b{max-width:40%}
}
@media (max-width:720px){
  .dash-grid .line{grid-template-columns:minmax(0,1fr)!important;gap:10px}
  .dash-grid .lstep:not(:last-child)::after{display:none}
  .dash-grid .card{padding:14px}
  .card-h{flex-wrap:wrap}
  .card-h>h2{flex:1 0 auto}
}

/* ── Việc được giao (src/views/assign.js) ── */
.as-late{color:var(--crit-ink)}
.as-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.as-hit{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.as-opt{display:flex;gap:8px;align-items:baseline;text-align:left;padding:7px 10px;line-height:1.4;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);cursor:pointer}
.as-opt:hover,.as-opt:focus-visible{border-color:var(--brand);background:var(--brand-soft)}
.as-none{padding:4px 2px;line-height:1.4}
@media (max-width:640px){.as-row{grid-template-columns:1fr}}

/* ── Trợ lý: cuộc trò chuyện, gợi ý nhanh, ghi chú hệ thống ── */
.ai-bar{display:flex;gap:4px;padding:4px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.ai-bar .btn{line-height:1.4}
.ai-threads{max-height:42%;overflow-y:auto;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--panel-2);display:flex;flex-direction:column;gap:4px}
.ai-th{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.ai-th.on{border-color:var(--brand);background:var(--brand-soft)}
.ai-th-o{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:7px 10px;line-height:1.4;border:0;background:none;color:var(--ink);cursor:pointer}
.ai-th-o b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.ai-th-o .muted{font-size:11px}
.ai-th-x{flex:none;width:32px;height:32px;margin-right:4px}
.ai-th-none{padding:6px 2px;line-height:1.4}
.ai-m.s{align-self:center;max-width:94%;padding:2px 8px;background:none;border:0;color:var(--ink-3);font-size:11.5px;text-align:center}
.ai-m.a.sys{color:var(--ink-2)}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 2px;background:var(--panel);border-top:1px solid var(--line)}
.ai-chips .chip{height:auto;min-height:30px;padding:5px 12px;line-height:1.4;cursor:pointer;white-space:normal;text-align:left}
.ai-hint-btn{padding:0 6px;font-size:11px;line-height:1.4;min-height:24px}
@media (max-width:640px){.ai-chips .chip{min-height:38px}.ai-bar .btn{min-height:38px}}

.it-sm{font-size:11px}
.it-rt-h{margin-bottom:8px}

/* Màn "chưa có màn nào để vào": thẻ trung tính, không phải lỗi. */
.noacc{max-width:560px;margin:8vh auto 0;padding:22px 24px}
.noacc h3{margin:0 0 8px;font:700 19px/1.3 var(--f-display)}
.noacc p{margin:0 0 10px;line-height:1.55}
.noacc .noacc-ct{color:var(--ink-2,var(--ink));font-weight:600}
.noacc .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
/* Lối vào xưởng ở đầu trang gốc nhiều xưởng. */
.wsx-enter{margin-bottom:14px}
.wsx-enter>.muted{margin:0 0 6px;font-size:12px}
.us-step{margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.us-step .fld{margin-top:8px}

/* Nhãn CỤM quy trình trong dãy công đoạn (Ent.chain với phases): khung mảnh có nhãn nhỏ phía trên. */
.chain-ph{align-items:flex-start}
.ch-ph{display:inline-flex;flex-direction:column;gap:3px;padding:2px 6px 4px;border-top:2px solid var(--line-2);border-radius:2px}
.ch-pl{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.3px;color:var(--ink-3,var(--ink-2));white-space:nowrap}
.ch-pb{display:inline-flex;align-items:flex-start}
.chain-ph>.ch-l{margin-top:44px}
.chain-ph .ch-ph .ch-l{margin-top:21px}
.chain-ph>.ch-ph{flex:none}   /* cụm không co lại: tên khâu đọc được, dòng cuộn ngang (.dr-line .chain có overflow-x:auto) */
.chain-ph .ch-g .ch-t{max-width:none}

/* ───── src/css/nhiem-vu.css ───── */
/* ── Nhiệm vụ (src/views/assign.js): kanban, checklist, bình luận, chip người ── */
.nv-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.nv-mode{display:flex;gap:4px}
.nv-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.nv-chips .chip{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:3px 10px;cursor:pointer;line-height:1.4}
.nv-chips .chip b{margin-left:4px;color:var(--muted)}
.nv-chips .chip.on{border-color:var(--brand);background:var(--brand-soft)}
.nv-kb{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:10px;overflow-x:auto;align-items:start}
.nv-kb[hidden]{display:none}
.nv-col{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.nv-col h3{font-size:13px;margin:0 0 2px}
.nv-card{min-width:0;overflow-wrap:anywhere;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--bg,var(--panel));display:flex;flex-direction:column;gap:4px;cursor:pointer}
.nv-card:hover,.nv-card:focus-visible{border-color:var(--brand)}
.nv-card.late{border-left:3px solid var(--crit-ink)}
.nv-ct,.nv-cf,.nv-ca{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nv-bar-p,.nv-pmini{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.nv-pmini{display:inline-block;width:56px;vertical-align:middle}
.nv-bar-p i,.nv-pmini i{display:block;height:100%;background:var(--brand)}
.nv-prog{display:flex;gap:8px;align-items:center;margin-bottom:8px}.nv-prog .nv-bar-p{flex:1}
.nv-cl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.nv-cl li{display:flex;gap:8px;align-items:center;justify-content:space-between}
.nv-cl label{display:flex;gap:6px;align-items:center;flex:1}
.nv-done{text-decoration:line-through;color:var(--muted)}
.nv-add{display:flex;gap:6px;margin-top:8px;align-items:flex-end}.nv-add input,.nv-add textarea{flex:1}
.nv-cmts{display:flex;flex-direction:column;gap:8px}
.nv-cmt{border:1px solid var(--line);border-radius:8px;padding:6px 10px}.nv-cmt.me{background:var(--brand-soft)}
.nv-mems{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.nv-mem{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nv-dot{display:inline-block;width:14px;height:14px;border-radius:50%}
@media (max-width:640px){.nv-kb{grid-template-columns:repeat(4,80vw)}}

/* ───── src/css/phan-cong.css ───── */
/* Phân công thợ (tự phân công + ghim) — chỉ token màu của hệ thiết kế. */
.pc-who{display:flex;flex-wrap:wrap;gap:4px 10px;line-height:1.5}
.pc-p{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.pc-p .pill{font-size:10px}
.pc-list{display:flex;flex-direction:column;gap:6px}
.pc-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:6px 10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);line-height:1.5}
.pc-row.off{background:var(--panel-2)}
.pc-nm{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;min-width:0}
.pc-ld{font-size:12px;white-space:nowrap}
.pc-bt{display:flex;gap:4px}
.pc-warn{padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--crit-ink);border-radius:var(--r);background:var(--panel);line-height:1.5}
.pc-auto{align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pc-sel{display:flex;gap:8px;align-items:center;font:600 12px/1.4 var(--f-sans);color:var(--ink-2)}
.pc-sel select{min-height:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);padding:0 8px}
.pc-wl{margin:0;padding-left:18px;line-height:1.6;font-size:13px}
@media (max-width:640px){
  .pc-row{grid-template-columns:1fr auto}
  .pc-ld{grid-column:1}
  .pc-bt{grid-column:2;grid-row:1 / span 2}
}
.pc-more{margin-top:2px}
.pc-more>summary{cursor:pointer;color:var(--ink-2);font:600 12px/1.6 var(--f-sans);padding:4px 0}
.pc-more[open]>summary{margin-bottom:6px}
.pc-more .pc-row{margin-bottom:6px}

/* ───── src/css/ui-boms.css ───── */
/* Màn BOM — bộ sửa dòng con (ô tìm-chọn mục con, công đoạn cấp liệu) và máy tính nhu cầu. */
.bm-ro{padding:8px 10px;margin-bottom:10px;background:var(--panel-2);border-radius:var(--r);line-height:1.5}
.bm-hd,.bm-row{display:grid;grid-template-columns:28px minmax(180px,2.2fr) 84px 84px 84px minmax(130px,1.4fr) minmax(90px,1fr) 36px;gap:8px;align-items:start}
.bm-hd{padding:0 8px;font:600 11px/1.4 var(--f-sans);color:var(--ink-3);text-transform:uppercase}
.bm-lines{display:flex;flex-direction:column;gap:6px;line-height:1.4}
.bm-row{padding:6px 8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.bm-no{font-weight:600;color:var(--ink-2);text-align:center;line-height:30px}
.bm-row input,.bm-row select{width:100%;min-width:0}
.bm-pk{display:flex;flex-direction:column;gap:4px;min-width:0}
.bm-dd{display:flex;flex-direction:column;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);line-height:1.4}
.bm-dd[hidden]{display:none}
.bm-dd-in{margin:8px 0 12px;min-height:44px}
.bm-opt{display:block;width:100%;text-align:left;padding:6px 10px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:inherit;line-height:1.4;cursor:pointer}
.bm-opt:last-child{border-bottom:0}
button.bm-opt:hover,button.bm-opt:focus-visible{background:var(--panel)}
.bm-opt.off{color:var(--ink-3);cursor:default}
.bm-del{height:30px;min-width:30px;padding:0 6px}
.bm-add{margin-top:8px}
.bm-need{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.bm-need .fld{min-width:240px;flex:0 1 320px}
.bm-need-out{margin-bottom:8px}
.bm-formula{line-height:1.5;margin-top:8px}
.bm-go{height:26px;padding:0 8px}
@media (max-width:640px){
  .bm-hd{display:none}
  .bm-row .bm-no{grid-area:n}.bm-row .bm-pk{grid-area:pk}.bm-row .bm-del{grid-area:d}
  .bm-row .bm-stage{grid-area:st}.bm-row .bm-note{grid-area:nt}
  .bm-row{grid-template-columns:28px 1fr 1fr 1fr 36px;grid-template-areas:"n pk pk pk d" ". base qty loss ." "st st st st st" "nt nt nt nt nt"}
  .bm-row .bm-base{grid-area:base}.bm-row .bm-qty{grid-area:qty}.bm-row .bm-loss{grid-area:loss}
  .bm-del{min-height:36px;min-width:36px}
}

/* ───── src/css/ui-costprice.css ───── */
/* Điều chỉnh giá thành (src/views/costprice.js) — dùng chung .rt-* của ui-rates.css */
.gv-steps{display:flex;gap:6px;list-style:none;margin:0 0 14px;padding:0;flex-wrap:wrap}
.gv-steps li{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--muted)}
.gv-steps li b{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;background:var(--line);margin-right:4px;font-size:12px}
.gv-steps li.on{color:var(--ink);border-color:var(--brand);font-weight:600}.gv-steps li.on b{background:var(--brand);color:#fff}
.gv-steps li.done b{background:var(--ok,#1e8e5a);color:#fff}
.gv-kinds{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.gv-in{width:120px;text-align:right}
.gv-tbl td.n,.gv-tbl th.n{text-align:right;font-variant-numeric:tabular-nums}
.gv-ord{padding-left:18px}.gv-ord li{margin:6px 0}
.gv-chk{display:flex;gap:8px;align-items:flex-start;margin:12px 0}

/* Chi phí lệnh (src/views/cost.js): dòng tiêu đề cụm quy trình trong bảng Nhân công theo khâu */
.dt-sub tr.dt-grp td{font-weight:600;background:color-mix(in srgb,var(--line) 35%,transparent);color:var(--ink)}

/* ───── src/css/ui-datatable.css ───── */
/* DataTable (src/ui/datatable.js) — chỉ dùng biến --…, dark mode tự theo. Spec §2. */
.dt-wrap{position:relative}
/* Tab view kiểu Blacklake: ô màu vuông + chữ, tab chọn có chữ xanh và gạch chân xanh. line-height >= 1.4 vì hàng cuộn (overflow) sẽ xén dấu tiếng Việt. */
.dt-views{display:flex;gap:2px;align-items:center;overflow-x:auto;white-space:nowrap;margin-bottom:12px;
  border-bottom:1px solid var(--line);scrollbar-width:thin}
.dt-views .vt{flex:none;border-radius:0;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 8px 8px;
  font:600 13px/1.5 var(--f-sans);color:var(--ink-2);background:none}
.dt-views .vt:hover{background:none;color:var(--ink)}
.dt-views .vt.on{background:none;color:var(--brand-ink);border-bottom-color:var(--brand)}
.dt-views .vt-n{background:none;padding:0;font:500 11px/1.4 var(--f-sans);color:var(--ink-3)}
.dt-views .vt.on .vt-n{background:none;color:var(--brand-ink)}
.dt-views .vt-x{flex:none;margin-left:-6px;border:0;background:none;cursor:pointer;font-size:13px;line-height:1.4;color:var(--ink-3);width:auto;height:auto;border-radius:var(--r)}
.dt-views .vt-add{padding:9px 10px 8px;color:var(--ink-2)}
.dt-views .vt-add .ico{width:15px;height:15px;margin:0}
.vt-c{display:inline-block;width:14px;height:14px;border-radius:3px;background:var(--ink-2);flex:none}
.vt-c.c-info{background:var(--info)}.vt-c.c-ok{background:var(--ok)}.vt-c.c-warn{background:var(--warn)}.vt-c.c-crit{background:var(--crit)}
/* Chip đếm + ô tìm */
.dt-chips{display:flex;align-items:center;gap:6px;overflow-x:auto;margin-bottom:10px;scrollbar-width:thin}
.dt-chiplist{display:flex;gap:6px;flex:1;min-width:0}
.dt-chips .chip{flex:none;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink-2);font:600 12px/1.4 var(--f-sans);cursor:pointer;white-space:nowrap}
.dt-chips .chip:hover{border-color:var(--line-2);color:var(--ink)}
.dt-chips .chip.on{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand-soft)}
.dt-chips .chip b{font:600 11px/1.4 var(--f-sans)}
.dt-search{display:flex;flex:none}
.dt-search input{padding:0 10px;font-size:13px;width:220px;height:var(--h-input);border:1px solid var(--line-2);border-right:0;border-radius:var(--r) 0 0 var(--r);background:var(--panel);color:var(--ink)}
.dt-search .btn{padding:0 11px;border-radius:0 var(--r) var(--r) 0}
.dt-search .btn .ico{margin:0}
/* Thanh công cụ */
.dt-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.dt-bar .sp{flex:1}
.dt-bar .btn .ico{width:15px;height:15px;vertical-align:-2.5px;margin-right:3px}
.dt-bar .btn.on{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand-soft)}
/* Bảng: khung viền, header xám nhạt có icon kiểu dữ liệu, kẻ dọc nhạt giữa các cột */
.dt-tbl{position:relative}
.dt-tbl .tw{border:1px solid var(--line);border-radius:var(--r)}
table.dt{border-collapse:separate;border-spacing:0;width:100%}
table.dt th,table.dt td{white-space:nowrap;border-right:1px solid var(--line)}
table.dt th:last-child,table.dt td:last-child{border-right:0}
table.dt thead th{background:var(--panel-2);color:var(--ink);font-weight:600;line-height:1.5;padding:11px 9px}
table.dt thead th .ico{width:15px;height:15px;margin:-2px 6px 0 0;vertical-align:middle;color:var(--ink-3)}
table.dt th.srt{cursor:pointer;user-select:none}
table.dt th.srt:hover{color:var(--brand-ink)}
table.dt th[aria-sort]{color:var(--brand-ink)}
table.dt th[aria-sort]::after{content:"";display:inline-block;margin-left:6px;border:4px solid transparent;vertical-align:middle}
table.dt th[aria-sort=ascending]::after{border-bottom:5px solid currentColor;border-top:0}
table.dt th[aria-sort=descending]::after{border-top:5px solid currentColor;border-bottom:0}
table.dt td.n,table.dt th.n{text-align:right}
table.dt tbody td{background:var(--panel);padding:12px 9px;line-height:1.5}
table.dt th.pin-l,table.dt td.pin-l,table.dt th.pin-r,table.dt td.pin-r{position:sticky;z-index:1;background:var(--panel)}
table.dt thead th.pin-l,table.dt thead th.pin-r{background:var(--panel-2)}
table.dt th.pin-l,table.dt td.pin-l{left:0;box-shadow:4px 0 8px -6px var(--line-2)}
table.dt th.pin-r,table.dt td.pin-r{right:0;box-shadow:-4px 0 8px -6px var(--line-2)}
table.dt thead th.pin-l,table.dt thead th.pin-r{z-index:2}
table.dt tbody tr:hover td{background:var(--row-hover)}
table.dt tbody tr.sel td{background:var(--brand-soft)}
table.dt tbody tr[data-id]{cursor:pointer}
table.dt tbody tr.dt-empty{cursor:default}
table.dt tbody tr.dt-empty td{border-right:0;background:var(--panel)}
/* Mã chứng từ: link xanh dương */
table.dt .ent-code{color:var(--link);font-family:var(--f-sans);font-weight:500}
table.dt tbody tr:hover .ent-code{text-decoration:underline}
.dt-nil{color:var(--ink-3)}
.dt-sel{width:30px;text-align:center}
.dt-no{width:38px;min-width:38px;color:var(--ink-2);text-align:center}
.dt-act .btn{margin-right:2px;border:0;background:none;color:var(--link);padding:0 7px;font-weight:500}
.dt-act .btn:hover{background:var(--link-soft);color:var(--link)}
.dt-act .btn:last-child{margin-right:0}
tr.dt-sum td{font-weight:700;background:var(--panel-2);border-top:1px solid var(--line-2)}
table.dt tfoot td{line-height:1.5;padding:10px}
.dt-dense td,.dt-dense th{padding-top:3px !important;padding-bottom:3px !important}
.dt-dense td{padding-left:6px;padding-right:6px}
.dt-roomy table.dt tbody td{padding-top:18px;padding-bottom:18px}
/* Trống: minh hoạ + chữ */
table.dt td.empty{padding:40px 20px}
.dt-empty-sub{font-size:12px;color:var(--ink-3)}
/* Đang tải: lớp mờ + vòng xoay đè giữa bảng */
.dt-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;z-index:3;
  background:color-mix(in srgb,var(--panel) 62%,transparent);color:var(--ink-2);font-size:13px;line-height:1.5;border-radius:var(--r)}
.dt-load[hidden]{display:none}
.dt-load .spin{width:20px;height:20px;border-width:3px}
.dt-loading .dt-tbl .tw{pointer-events:none}
/* Phân trang: "N bản ghi · ‹ 1 2 3 … N › · 20 / trang · Đến trang [ ]", lệch phải */
.dt-pg{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--ink-2)}
.dt-total{margin-right:8px}
.dt-pages{display:flex;gap:2px;align-items:center}
.dt-pg .dt-pn{min-width:30px;height:30px;padding:0 6px;font-size:13px;color:var(--ink);border:1px solid transparent;background:none}
.dt-pg .dt-pn:hover{border-color:var(--line-2);background:none;color:var(--ink)}
.dt-pg .dt-pn.on{border-color:var(--brand);color:var(--brand-ink);background:var(--panel)}
.dt-pg .dt-pn .ico{margin:0;width:15px;height:15px}
.dt-gap{padding:0 6px;color:var(--ink-3)}
.dt-pg select,.dt-pg input{padding:0 8px;height:30px;font-size:13px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);color:var(--ink)}
.dt-pg input{width:52px;text-align:center}
.dt-pg label{display:inline-flex;align-items:center;gap:6px}
/* Thanh công cụ và thanh hàng loạt cùng chiều cao: tick dòng thì thay chỗ, không đẩy bảng. */
.dt-bar[hidden],.dt-bulk[hidden],.dt-condchips[hidden]{display:none}
.dt-bar,.dt-bulk{min-height:34px}
.dt-bulk{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px;padding:0 0 0 2px;font-size:13px}
.dt-bulk .sp{flex:1}
.dt-bulk-n{display:inline-flex;align-items:center;gap:5px;padding:0 10px;height:var(--h-input);border-radius:var(--r);background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.dt-bulk .btn .ico,.dt-bs .ico{width:15px;height:15px;vertical-align:-2.5px;margin-right:3px}
.dt-bulk .btn.dgr{margin-left:0}
.dt-bs{flex:none}
.dt-bs.on{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand-soft)}
/* Chip tóm tắt điều kiện lọc */
.dt-condchips{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.dt-cchip{display:inline-flex;align-items:center;max-width:100%;border:1px solid var(--brand-soft);background:var(--brand-soft);color:var(--brand-ink);border-radius:20px;font-size:12px;line-height:1.4}
.dt-cchip button{border:0;background:none;color:inherit;cursor:pointer;font:inherit;padding:3px 4px 3px 10px;border-radius:20px 0 0 20px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.dt-cchip button.dt-cc-x{padding:3px 7px 3px 4px;border-radius:0 20px 20px 0;display:inline-flex;align-items:center}
.dt-cchip button:hover{background:color-mix(in srgb,var(--brand) 14%,transparent)}
.dt-cchip .ico{width:13px;height:13px;margin:0}
/* Popover: một khung chung, rộng theo nội dung */
.pop.dt-pop{padding:12px;max-height:min(70vh,520px);overflow-y:auto}
.pop.dt-pop .pop-hd{margin-bottom:8px}
.dt-hint{font-size:12px;color:var(--ink-2);margin:0 0 8px;line-height:1.5}
.pop-hd .dt-hint{margin:0 0 0 auto}
.dt-afoot{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.dt-afoot .sp{flex:1}
.pop.dt-p-dens,.pop.dt-p-row{padding:4px;width:auto}
/* Menu (mật độ, thao tác dòng, nhóm hàng loạt) */
.dt-mi{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:6px 10px;border:0;border-radius:var(--r);background:none;color:var(--ink);font:500 13px/1.4 var(--f-sans);text-align:left;cursor:pointer;white-space:nowrap}
.dt-mi:hover,.dt-mi:focus-visible{background:var(--panel-2);outline:0}
.dt-mi:focus-visible{box-shadow:inset 0 0 0 2px var(--brand)}
.dt-mi .ico{width:15px;height:15px;margin:0;flex:none;color:var(--ink-2)}
.dt-mi.dgr{color:var(--crit-ink)}.dt-mi.dgr .ico{color:var(--crit-ink)}
.dt-mi.dgr:hover{background:var(--crit-soft)}
.dt-mi[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.dt-mi[aria-disabled=true]:hover{background:none}
.dt-mi-sp,.dt-mi-ck{display:inline-block;width:15px;flex:none;text-align:center;color:var(--brand-ink)}
.dt-mi-t{display:flex;flex-direction:column;min-width:0}
.dt-mi-t small{font:400 11px/1.3 var(--f-sans);color:var(--ink-3);white-space:normal;max-width:220px}
.dt-mi.on{color:var(--brand-ink)}
.dt-msep{height:1px;background:var(--line);margin:4px 6px}
.dt-more{border:0;background:none;color:var(--link);padding:0 7px;font-weight:500}
.dt-more:hover{background:var(--link-soft);color:var(--link)}
.dt-more .ico{width:13px;height:13px;margin:0 0 0 2px}
/* Popover lọc nâng cao */
.dt-arows{display:flex;flex-direction:column;gap:8px}
.dt-arow{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(110px,.9fr) minmax(160px,1.8fr) auto;gap:8px;align-items:start}
.dt-arow select,.dt-arow input[type=text],.dt-arow input[type=number],.dt-arow input[type=date]{width:100%;min-width:0;height:var(--h-input);padding:0 8px;font-size:13px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);color:var(--ink)}
.dt-av{display:flex;align-items:center;gap:6px;min-width:0;min-height:var(--h-input)}
.dt-av.muted{font-size:12px}
.dt-opts{flex-wrap:wrap;gap:4px 12px}
.dt-opt{display:inline-flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;white-space:nowrap}
.dt-adel{width:var(--h-input);height:var(--h-input);padding:0;border-color:transparent;background:none;color:var(--ink-2)}
.dt-adel:hover{background:var(--crit-soft);color:var(--crit-ink);border-color:transparent}
.dt-adel .ico{margin:0;width:15px;height:15px}
.dt-aadd{margin-top:8px}
.dt-aadd .ico{width:13px;height:13px}
/* Tìm hàng loạt */
.dt-bta{display:block;width:100%;box-sizing:border-box;min-height:140px;resize:vertical;padding:8px 10px;font:13px/1.5 var(--f-mono,monospace);border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);color:var(--ink)}
/* Cấu hình cột */
.pop.dt-p-cols .pop-hd{flex-wrap:nowrap}
.pop.dt-p-cols .pop-hd .btn{margin-left:auto;flex:none}
.pop.dt-p-cols .pop-hd .muted{margin-left:8px;white-space:nowrap}
.dt-cq{display:block;width:100%;box-sizing:border-box;height:var(--h-input);padding:0 10px;margin-bottom:6px;font-size:13px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);color:var(--ink)}
.dt-crow{display:flex;align-items:center;gap:6px;padding:4px 0;border-top:1px dashed var(--line);position:relative}
.dt-crow[hidden]{display:none}
.dt-crow label{flex:1;min-width:0;display:flex;align-items:center;gap:6px;cursor:pointer;line-height:1.5}
.dt-crow .dt-cl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-crow select{flex:none;font-size:11px;padding:0 4px;height:26px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);color:var(--ink)}
.dt-grip{flex:none;width:22px;height:28px;border:0;border-radius:var(--r);background:none;color:var(--ink-3);cursor:grab;font-size:16px;line-height:1;letter-spacing:-4px;touch-action:none;user-select:none}
.dt-grip:hover,.dt-grip:focus-visible{background:var(--panel-2);color:var(--ink)}
.dt-crow.drag{opacity:.45}
.dt-crow.drop-t::before,.dt-crow.drop-b::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--brand)}
.dt-crow.drop-t::before{top:-1px}.dt-crow.drop-b::after{bottom:-1px}
.dt-cnone{padding:10px 2px;font-size:12px}
/* Kéo rộng cột: vạch xanh ở mép phải tiêu đề */
table.dt thead th:not(.pin-l):not(.pin-r){position:relative;z-index:0}
.dt-rz{position:absolute;top:0;right:-3px;bottom:0;width:7px;cursor:col-resize;z-index:3;touch-action:none}
.dt-rz::after{content:"";position:absolute;top:20%;bottom:20%;left:3px;width:2px;border-radius:1px;background:transparent}
table.dt th:hover .dt-rz::after,.dt-rz:focus-visible::after,.dt-rz.on::after{background:var(--brand)}
.dt-rz:focus-visible{outline:0}
.dt-resizing,.dt-resizing *{cursor:col-resize !important;user-select:none}
th.dt-sel .dt-rz,th.dt-no .dt-rz,th.dt-act .dt-rz{display:none}

@media (max-width:900px){
  .dt-chips{flex-wrap:wrap;overflow-x:visible}
  .dt-chiplist{flex:1 1 100%;overflow-x:auto;padding-bottom:2px}
  .dt-search{flex:1 1 0;min-width:0}
  .dt-search input{flex:1;width:auto;min-width:0}
  .dt-pg{justify-content:center}
}
/* Dòng của bản ghi đã khoá/ngừng dùng: mờ đi chứ không ẩn (còn phải thấy để mở lại). */
table.dt tr.off td{opacity:.55}
table.dt tr.off td.dt-act{opacity:1}
table.dt tr.await td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
table.dt tr.late td:first-child{box-shadow:inset 3px 0 0 var(--crit)}
/* Dòng của dữ liệu chưa map (plan): mờ, vẫn thấy. */
table.dt tr.dim td{opacity:.5}
/* Cột "Phải xử lý" của progress: các lý do xuống dòng được, xếp ngang cho gọn. */
table.dt .pv-x{display:flex;flex-wrap:wrap;gap:3px 16px;min-width:440px;white-space:normal;line-height:1.5}
/* Nhóm cột kiểu sheet (plan: Từ Bán TP / Net): viền trái đậm + nền nhạt. Không dùng tên .bd vì main.css có .bd{display:flex}. */
table.dt th.grp,table.dt td.grp{border-left:2px solid var(--line-2)}
table.dt td.grp{background:var(--bg-2)}

/* Cây (cfg.tree): thụt lề theo cấp bằng biến --d (đặt trên .dt-ind), nút ▸ xoay thành ▾ khi mở. */
table.dt .dt-ind{display:inline-flex;align-items:center;vertical-align:middle;padding-left:calc(var(--d,0) * 18px);margin-right:4px}
table.dt .dt-tw,table.dt .dt-tw-sp{flex:none;width:20px;height:20px}
table.dt .dt-tw{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--r);background:none;color:var(--ink-2);cursor:pointer;line-height:1.4}
table.dt .dt-tw:hover{background:var(--panel-2);color:var(--ink)}
table.dt .dt-tw .ico{width:14px;height:14px;transition:transform .12s}
table.dt .dt-tw[aria-expanded=true] .ico{transform:rotate(90deg)}
table.dt tr.dt-child td{background:var(--panel-2)}
table.dt tr.dt-child td.pin-l,table.dt tr.dt-child td.pin-r{background:var(--panel-2)}

@media (max-width:900px){
  .dt-bs{flex:none}
  .dt-arow{grid-template-columns:1fr 1fr auto}
  .dt-arow .dt-av{grid-column:1/-1;grid-row:2}
  .dt-arow .dt-adel{grid-column:3;grid-row:1}
  .dt-arow{padding-bottom:8px;border-bottom:1px dashed var(--line)}
  .dt-arow:last-child{border-bottom:0}
  .dt-arow select:first-child{grid-column:1}
  .dt-cchip button{max-width:200px}
  .dt-afoot{flex-wrap:wrap}
  .dt-rz{width:12px;right:-6px}
  .dt-rz::after{left:5px}
}
@media (pointer:coarse){.dt-mi{min-height:44px}.dt-grip{width:32px;height:40px}}

/* Cột Thao tác: ⋯ gọn 36px + tuỳ chọn nút chính; tiêu đề chỉ cho trình đọc màn hình */
.dt-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
th.dt-act{width:1px}
.dt-more{min-width:36px;height:28px;padding:0 6px;font-size:18px;line-height:1;justify-content:center;letter-spacing:0}
td.dt-act{white-space:nowrap;text-align:right}
td.dt-act .dt-pri{border:0;margin-right:4px;padding:0 10px;color:var(--on-brand)}
td.dt-act .dt-pri[aria-disabled=true]{opacity:.45;cursor:not-allowed}
/* Chỉ ghim khi bảng thật sự tràn ngang (class dt-overflow do layoutPins đặt) */
.tw:not(.dt-overflow) table.dt .pin-l,.tw:not(.dt-overflow) table.dt .pin-r{position:static;box-shadow:none}
/* Bóng gợi ý còn cột bị cuộn khuất ở mép phải. Class là dt-hasmore, KHÔNG dùng dt-more: trùng tên nút ⋯ ở cột Thao tác (height:28px) sẽ bóp khung bảng còn 28px. */
.dt-tbl.dt-hasmore::after{content:"";position:absolute;top:1px;bottom:1px;right:1px;width:18px;pointer-events:none;z-index:4;border-radius:0 var(--r) var(--r) 0;background:linear-gradient(to left,color-mix(in srgb,var(--ink) 16%,transparent),transparent)}
.dt-bulk .dt-condchips{margin-left:2px}
table.dt th.dt-act,table.dt td.dt-act{padding-left:4px;padding-right:6px}
/* Ô ghi chú dài (Nhân lực): rộng tối thiểu 220px, cắt còn 2 dòng; đủ chữ nằm ở title. */
table.dt .pp-note{min-width:220px;max-width:280px;font-size:11px;line-height:1.45;white-space:normal}
table.dt .pp-note .ed{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;border-bottom:0;
  text-decoration:underline dashed var(--line-2);text-underline-offset:3px}
table.dt .pp-note .ed-p{display:none !important}
table.dt .pp-note .ed-in{max-width:100%;width:100%}

/* Màn Tiến độ nguồn Dynamik: cột Khách cắt 2 dòng; cột Phải xử lý hẹp lại để không đẩy cột khác ra ngoài 1470px */
table.dt .pv-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;max-width:190px;line-height:1.35}
table.dt .pv-x.pv-x-d{min-width:220px;max-width:300px}

/* ───── src/css/ui-desk.css ───── */
/* Bàn báo công (gói E) — tablet/điện thoại: nút to, chữ lớn, đọc được từ 1 m, vùng chạm >= 44px.
   >= 1024px: hai cột (trái tác vụ / phải form + "Đã báo hôm nay"). < 1024px: một cột, form là sheet từ đáy. */
.dk{display:flex;flex-direction:column;gap:12px;line-height:1.4;--dk-fs:1}
.dk h2{font:700 16px/1.4 var(--f-display);margin:0 0 8px;display:flex;gap:10px;align-items:baseline}
.dk-top{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:var(--r-lg);padding:10px 14px}
.dk-who{display:flex;align-items:center;gap:12px;flex:1 1 260px;min-width:0}
.dk-who .ico{width:30px;height:30px;color:var(--brand);flex:none}
.dk-who-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dk-who-t span{font-size:12px;color:var(--ink-3)}
.dk-who-t b{font:700 22px/1.3 var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-sel{height:48px;font-size:18px;font-weight:600;width:100%;max-width:340px;padding:0 10px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink)}
.dk-tot{display:flex;gap:8px;flex:0 1 auto}
.dk-k{display:flex;flex-direction:column;justify-content:center;min-width:92px;padding:6px 12px;border-radius:var(--r);
  background:var(--panel-2);border:1px solid var(--line);position:relative}
.dk-k span{font-size:11.5px;color:var(--ink-3)}
.dk-k b{font:700 28px/1.2 var(--f-mono);font-variant-numeric:tabular-nums}
.dk-k i{display:block;font:600 12px/1.3 var(--f-sans);color:var(--ink-2);font-style:normal}   /* dòng riêng dưới số: trước đây absolute nên đè lên số */
.dk-lock{opacity:.7;cursor:not-allowed}
.dk-c-lock{font-size:12px;color:var(--ink-3);margin-top:2px}
.dk-noop{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:0 0 12px;border:1px solid var(--warn);border-radius:var(--r);background:var(--warn-bg,transparent);color:var(--ink)}
.dk-noop>div{display:flex;flex-direction:column;gap:2px}.dk-noop b{font-size:14px}.dk-noop span{font-size:13px;color:var(--ink-2)}
.dk-k.ok b{color:var(--ok-ink)} .dk-k.bad b{color:var(--crit-ink)}
.dk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--r-lg);
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);font:600 16px/1.2 var(--f-sans);cursor:pointer}
.dk-btn:hover{border-color:var(--brand)}
.dk-btn:focus-visible,.dk-step:focus-visible,.dk-pm:focus-visible,.dk-chip:focus-visible,.dk-send:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.dk-btn.pri{background:var(--brand-solid);border-color:var(--brand-solid);color:var(--on-brand)}
.dk-btn .ico{width:20px;height:20px}
.dk-big-t{align-self:center;min-width:48px;padding:0 14px}
.dk-big-t b{font:800 20px/1 var(--f-display)}
.dk-big-t[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* Nút quét: to nhất ở thanh trên — Blacklake đặt 扫一扫 góc phải, viền xanh, chữ lớn */
.dk-qr{align-self:center;min-height:60px;padding:0 26px;font-size:20px;font-weight:800;box-shadow:0 2px 0 var(--brand-solid-2)}
.dk-qr .ico{width:28px;height:28px}
.dk-file{cursor:pointer;width:100%}

/* Thông báo thành công lớn */
.dk-done{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r-lg);position:sticky;top:8px;z-index:30;
  background:var(--ok-soft);border:2px solid var(--ok);color:var(--ink);box-shadow:var(--sh-2,0 6px 20px rgba(0,0,0,.14))}
.dk-done.warn{background:var(--warn-soft);border-color:var(--warn)}
.dk-done-i .ico{width:44px;height:44px;color:var(--ok-ink);flex:none}
.dk-done.warn .dk-done-i .ico{color:var(--warn-ink)}
.dk-done-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dk-done-t b{font:800 26px/1.25 var(--f-display)}
.dk-done-t span{font-size:15px;color:var(--ink-2)}
.dk-done-t em{font:700 15px/1.4 var(--f-sans);font-style:normal;color:var(--warn-ink);display:flex;gap:6px;align-items:flex-start}
.dk-done-t em .ico{width:18px;height:18px;flex:none;margin-top:2px}
.dk-done-x{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--ink-2);cursor:pointer;flex:none}
.dk-done-x:hover{background:var(--panel-2)} .dk-done-x .ico{width:22px;height:22px}

.dk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.dk-list{display:flex;flex-direction:column;gap:10px;min-width:0}
.dk-card{background:var(--panel);border:2px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;scroll-margin:80px 0}
.dk-card.on{border-color:var(--brand);background:var(--brand-soft)}
.dk-c-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dk-c-po{font:700 20px/1.3 var(--f-display)}
.dk-tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--info-soft);color:var(--info-ink)}
.dk-c-i{font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}
.dk-c-s{font:600 17px/1.3 var(--f-sans)}
.dk-c-q{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.dk-c-q b{color:var(--ink);font-size:16px}
.dk-bar{height:8px;border-radius:4px;background:var(--bg-2);overflow:hidden}
.dk-bar i{display:block;height:100%;background:var(--brand)}
.dk-c-f{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:4px;font-size:12.5px}
.dk-go{min-width:112px}

.dk-right{display:contents}
.dk-bk{display:none}
/* Bảng "Đã báo hôm nay" */
.dk-rep{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px}
.dk-t{font-size:14px}
.dk-t .r{display:grid;grid-template-columns:52px minmax(0,1fr) 64px 44px 108px;gap:0 8px;align-items:baseline;padding:9px 8px;border-bottom:1px solid var(--line)}
.dk-t .r:last-child{border-bottom:0}
.dk-t .h{padding:4px 8px;font:600 12px/1.4 var(--f-sans);color:var(--ink-3)}
.dk-t .n{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.dk-t .g{font-weight:700;font-size:17px;color:var(--ok-ink)} .dk-t .b{color:var(--crit-ink);font-weight:700}
.dk-t .neg .g{color:var(--warn-ink)}
.dk-t .h .n,.dk-t .h .g{font:600 12px/1.4 var(--f-sans);color:var(--ink-3)}
.dk-t .tm{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.dk-t .tk{overflow-wrap:anywhere} .dk-t .sr{color:var(--ink-2);font-size:12.5px;padding-left:6px}
.dk-fl-w{display:inline-flex;vertical-align:-3px;color:var(--warn-ink)} .dk-fl-w .ico{width:16px;height:16px}
.dk-more{display:none}
.dk-rep-0{padding:18px 4px;color:var(--ink-3);text-align:center}

/* Form báo nhanh */
.dk-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);display:flex;flex-direction:column;min-width:0}
.dk-none{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 12px;text-align:center;color:var(--ink-3)}
.dk-none .ico{width:40px;height:40px}.dk-none b{color:var(--ink);font-size:18px}
.dk-f-top{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:12px 14px 4px}
.dk-f-h{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-f-h b{font:700 20px/1.3 var(--f-display)}
.dk-f-h .muted{overflow-wrap:anywhere}
.dk-x{display:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--panel-2);color:var(--ink);cursor:pointer;flex:none}
.dk-x .ico{width:24px;height:24px}
.dk-f-body{border:0;margin:0;min-inline-size:0;display:flex;flex-direction:column;gap:12px;padding:6px 14px 12px;min-height:0}
.dk-prog{display:flex;flex-direction:column;gap:6px}
.dk-pg-t{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--ink-2)}
.dk-pg-t b{color:var(--ink);font:700 19px/1.2 var(--f-mono)}
.dk-pg-a{color:var(--ok-ink);font-weight:700} .dk-pg-a.over{color:var(--warn-ink)}
.dk-pbar{height:14px;border-radius:7px;background:var(--bg-2);overflow:hidden;display:flex;border:1px solid var(--line)}
.dk-pbar i{display:block;height:100%} .dk-pbar .a{background:var(--brand)}
.dk-pbar .b{background:repeating-linear-gradient(45deg,var(--brand-2),var(--brand-2) 6px,var(--brand-soft) 6px,var(--brand-soft) 12px)}
.dk-pbar .b.over{background:repeating-linear-gradient(45deg,var(--warn),var(--warn) 6px,var(--warn-soft) 6px,var(--warn-soft) 12px)}
.dk-fld{display:flex;flex-direction:column;gap:8px}
.dk-fl{font:700 18px/1.3 var(--f-sans);display:flex;gap:8px;align-items:baseline}
.dk-fl span{font:400 13px/1.4 var(--f-sans);color:var(--ink-3)}
.dk-fld.good .dk-fl{color:var(--ok-ink)} .dk-fld.bad .dk-fl{color:var(--crit-ink)}
.dk-ctl{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;gap:10px}
.dk-pm{height:72px;border-radius:var(--r-lg);border:2px solid var(--line-2);background:var(--panel-2);color:var(--ink);
  font:700 40px/1 var(--f-mono);cursor:pointer;touch-action:manipulation;user-select:none}
.dk-pm:active{background:var(--brand-soft);border-color:var(--brand)}
.dk-fld.bad .dk-pm:active{background:var(--crit-soft);border-color:var(--crit)}
.dk-num{width:100%;min-width:0;height:72px;font:700 56px/1.1 var(--f-mono);text-align:center;border-radius:var(--r-lg);
  border:2px solid var(--line-2);background:var(--bg-2);color:var(--ink);font-variant-numeric:tabular-nums}
.dk-num:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.dk-quick{display:flex;gap:8px;flex-wrap:wrap}
.dk-step{flex:1 1 0;min-width:64px;min-height:52px;padding:0 12px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);
  font:700 20px/1 var(--f-mono);cursor:pointer;touch-action:manipulation}
.dk-step.rem{flex:2 1 0;min-width:120px;white-space:nowrap;font-family:var(--f-sans);font-size:17px;color:var(--brand-ink);border-color:var(--brand)}
.dk-step:disabled{opacity:.45;cursor:not-allowed}
.dk-step:active:not(:disabled){background:var(--brand-soft);border-color:var(--brand)}
.dk-fld.bad .dk-step:active{background:var(--crit-soft);border-color:var(--crit)}
.dk-lbl{font:600 14px/1.4 var(--f-sans);color:var(--ink-2)}
.dk-chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px;border-radius:var(--r-lg);border:2px solid transparent}
.dk-chips[hidden]{display:none}
.dk-chips.need{border-color:var(--crit);background:var(--crit-soft)}
.dk-chips .dk-lbl{flex:1 0 100%}
.dk-chips .req{font-style:normal;font-weight:700;color:var(--crit-ink);margin-left:6px}
.dk-chip{min-height:56px;padding:0 22px;border-radius:99px;border:2px solid var(--line-2);background:var(--panel-2);color:var(--ink);
  font:700 18px/1.2 var(--f-sans);cursor:pointer;touch-action:manipulation}
.dk-chip.on{background:var(--crit-solid);border-color:var(--crit-solid);color:var(--on-crit)}
.dk-note{display:flex;flex-direction:column;gap:6px}
.dk-note input{height:52px;font-size:17px;padding:0 12px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink)}
.dk-err{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-lg);background:var(--crit-soft);border:2px solid var(--crit);color:var(--ink)}
.dk-err>.ico{width:28px;height:28px;color:var(--crit-ink);flex:none}
.dk-err div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dk-err b{font-size:17px} .dk-err span{font-size:14px;color:var(--ink-2)}
.dk-err .dk-btn{flex:none;min-height:56px}
/* Thanh Xoá / GỬI dính đáy form (Blacklake: 清空 + 确定) */
.dk-act{display:flex;flex-direction:column;gap:10px;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));
  position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg)}
.dk-act-r{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px}
.dk-clear{min-height:64px;border-radius:var(--r-lg);border:2px solid var(--line-2);background:var(--panel);color:var(--ink);font:700 18px/1 var(--f-sans);cursor:pointer}
.dk-send{min-height:64px;border-radius:var(--r-lg);border:0;background:var(--brand-solid);color:var(--on-brand);
  font:800 26px/1.2 var(--f-display);letter-spacing:1px;cursor:pointer;touch-action:manipulation}
.dk-send .ico{width:28px;height:28px;vertical-align:-6px;margin-right:6px}
.dk-send:disabled{opacity:.6;cursor:not-allowed}
.dk-send .spin{display:inline-block;vertical-align:-4px}

/* ≥ 1024px: hai cột, mỗi cột tự cuộn (desk.js fit() đặt chiều cao lưới = phần màn còn lại) */
@media (min-width:1024px){
  .dk-grid{grid-template-columns:minmax(300px,5fr) minmax(400px,6fr);height:calc(100vh - 230px);min-height:480px}
  .dk-list{height:100%;overflow:auto;padding:2px 6px 2px 2px;scrollbar-gutter:stable}
  .dk-right{display:flex;flex-direction:column;gap:12px;min-width:0;height:100%;overflow:auto;padding:2px 2px 2px 0;scrollbar-gutter:stable;scroll-padding-bottom:120px}
  .dk-form{flex:none}
}
/* Tablet ngang thấp (1280×800): gọn lại một nhịp để thấy cả đạt, lỗi, hạng mục và nút GỬI */
@media (min-width:1024px) and (max-height:880px){
  .dk-top{padding:6px 12px} .dk-k b{font-size:24px} .dk-qr{min-height:52px} .dk-who-t b{font-size:20px}
  .dk-pm,.dk-num{height:60px} .dk-num{font-size:46px} .dk-pm{font-size:34px}
  .dk-step{min-height:46px;font-size:18px}
  .dk-chip{min-height:48px}
  .dk-f-body{gap:8px} .dk-fld{gap:6px}
  .dk-send,.dk-clear{min-height:58px}
  .dk-big .dk-num{font-size:52px}
}
/* < 1024px: một cột; form là sheet từ đáy */
@media (max-width:1023px){
  .dk-bk{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;opacity:0;pointer-events:none;transition:opacity .18s}
  .dk-bk.open{opacity:1;pointer-events:auto}
  .dk-form{scroll-padding-bottom:120px;position:fixed;left:50%;bottom:var(--dk-kb,0);z-index:91;width:min(100%,680px);max-height:calc(92vh - var(--dk-kb,0px));max-height:calc(92dvh - var(--dk-kb,0px));overflow:auto;overscroll-behavior:contain;
    border-radius:20px 20px 0 0;border-bottom:0;transform:translate(-50%,105%);visibility:hidden;
    transition:transform .22s ease,visibility 0s linear .22s;box-shadow:0 -10px 40px rgba(0,0,0,.28)}
  .dk-form.open{transform:translate(-50%,0);visibility:visible;transition:transform .22s ease}
  .dk-form::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--line-2);margin:8px auto 0;flex:none}
  .dk-x{display:inline-flex;align-items:center;justify-content:center}
  .dk-act{border-radius:0}
  .dk-list{padding-bottom:4px}
  /* hẹp: "Đã báo hôm nay" lên trên danh sách (chỉ 5 dòng, bấm để xem hết); chưa báo gì thì ẩn */
  .dk-rep{order:-1} .dk-rep.empty{display:none}
  .dk-rep:not(.all) .dk-t .r:nth-child(n+7){display:none}
  .dk-more{display:block;width:100%;min-height:48px;margin-top:8px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);font:600 15px/1 var(--f-sans);cursor:pointer}
}
@media (max-width:520px){
  .dk-tot{flex:1 1 100%} .dk-k{flex:1;min-width:0}
  .dk-qr{flex:1 1 100%;order:-1}
  .dk-big-t{flex:0 0 auto}
  .dk-who-t b{font-size:19px}
  .dk-card{padding:10px 12px}
  .dk-ctl{grid-template-columns:64px minmax(0,1fr) 64px}
  .dk-pm{height:64px} .dk-num{height:64px;font-size:46px}
  .dk-done-t b{font-size:22px} .dk-done-i .ico{width:34px;height:34px}
  .dk-err{flex-wrap:wrap} .dk-err .dk-btn{flex:1 1 100%}
  .dk-t .r{grid-template-columns:48px minmax(0,1fr) 56px 40px} .dk-t .sr{display:none}
}
@media (prefers-reduced-motion:reduce){.dk-form,.dk-bk{transition:none}}

/* Chữ to + tương phản cao (nút Aa) */
.dk-big{font-size:118%}
.dk-big .dk-card,.dk-big .dk-rep,.dk-big .dk-form,.dk-big .dk-top{border-width:2px;border-color:var(--ink-2)}
.dk-big .dk-card.on{border-color:var(--ink);box-shadow:0 0 0 3px var(--brand)}
.dk-big .muted,.dk-big .dk-c-i,.dk-big .dk-c-q,.dk-big .dk-who-t span,.dk-big .dk-k span,.dk-big .dk-fl span,.dk-big .dk-t .h,.dk-big .dk-t .sr,.dk-big .dk-t .tm{color:var(--ink)}
.dk-big .dk-c-po{font-size:26px} .dk-big .dk-c-s{font-size:21px} .dk-big .dk-c-i{font-size:16px} .dk-big .dk-c-q{font-size:15px}
.dk-big .dk-k b{font-size:34px} .dk-big .dk-t{font-size:16px}
.dk-big .dk-num{font-size:64px;border-color:var(--ink);background:var(--panel)}
.dk-big .dk-pm,.dk-big .dk-step,.dk-big .dk-chip,.dk-big .dk-clear{border-color:var(--ink-2);border-width:2px}
.dk-big .dk-chip{font-size:21px;min-height:64px}
.dk-big .dk-step{min-height:60px;font-size:23px}
.dk-big .dk-bar{height:12px} .dk-big .dk-pbar{height:18px}
.dk-big .dk-fld.good .dk-fl{color:var(--ok-ink)} .dk-big .dk-fl{font-size:22px}
.dk-big .dk-done-t b{font-size:30px}
.dk-big .dk-btn{border-color:var(--ink-2)} .dk-big .dk-btn.pri,.dk-big .dk-send{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset}

/* ───── src/css/ui-drawer.css ───── */
/* Drawer dùng chung (src/ui/drawer.js) — mở rộng .drawer của main.css; chỉ dùng biến --…. Spec D10.
   Mọi phần tử có overflow/ellipsis giữ line-height >= 1.4 (dấu tiếng Việt không bị xén). */
.drawer{width:min(1100px,calc(100vw - 360px))}
.drawer.dr-wide{width:calc(100vw - 64px)}
/* Đầu ngăn: tiêu đề · tab giữa · hành động · công cụ (phóng to, đóng) */
.drawer .dr-hd{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:0 14px;align-items:center;padding:0 12px 0 16px;
  border-bottom:1px solid var(--line);min-height:48px}
.drawer .dr-hd .dr-ttl{grid-column:1;display:flex;align-items:center;gap:8px;font:600 15px/1.4 var(--f-sans);padding:10px 0;min-width:0}
.drawer .dr-hd .dr-tabs{grid-column:2;grid-row:1;align-self:stretch}
.drawer .dr-hd .dr-acts{grid-column:3;grid-row:1;display:flex;align-items:center;gap:2px}
.drawer .dr-hd .dr-tools{grid-column:4;grid-row:1;display:flex;gap:2px;flex:none}
.dr-tools button{border:0;background:none;color:var(--ink-2);border-radius:var(--r);
  width:28px;height:28px;display:grid;place-items:center;cursor:pointer;padding:0}
.dr-tools button:hover{background:var(--panel-2);color:var(--ink)}
.dr-tools .ico{width:15px;height:15px}
.dr-acts .btn{white-space:nowrap}
.dr-acts .btn.dgr{color:var(--crit-ink)}
.dr-acts .btn .ico{width:14px;height:14px;margin-right:4px}
.dr-acts .btn.pri{height:28px;padding:0 12px;font-size:12px}
/* Tab-neo: gạch chân xanh lá, nằm giữa đầu ngăn; cuộn ngang khi hẹp */
.dr-tabs{display:flex;gap:4px;justify-content:center;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.dr-tabs button{flex:none;border:0;border-bottom:2px solid transparent;background:none;color:var(--ink-2);
  font:600 13px/1.4 var(--f-sans);padding:0 12px;min-height:46px;cursor:pointer}
.dr-tabs button:hover{color:var(--ink)}
.dr-tabs button.on{color:var(--brand-ink);border-bottom-color:var(--brand)}
.dr-badge{display:inline-flex;gap:4px;align-items:center;font:600 11px/1.4 var(--f-sans);vertical-align:middle}
/* Menu "Thêm ▾" */
.dr-more{position:relative;display:inline-flex}
.dr-more .btn .ico{margin:0 0 0 2px}
.dr-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:5;min-width:160px;background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 18%,transparent);padding:4px;display:flex;flex-direction:column;gap:2px}
.dr-menu[hidden]{display:none}
.dr-menu .btn{justify-content:flex-start;width:100%;height:32px}
/* Thân: nền xám rất nhạt, các mục là thẻ */
.drawer .dr-body{padding:12px 16px 40px;background:var(--bg)}
.dr-sec>h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;padding:0;border:0;line-height:1.4}  /* nhãn tab đã ở đầu ngăn */
.dr-sec{margin-bottom:12px;line-height:1.5}
.dr-sec+.dr-sec{border-top:0;padding-top:0;margin-top:0}
/* Mục xổ được: ▼ Thông tin cơ bản */
.dr-fold{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:12px}
.dr-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 14px;
  font:600 14px/1.5 var(--f-sans);color:var(--ink);user-select:none}
.dr-fold>summary::-webkit-details-marker{display:none}
.dr-fold>summary::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--ink-2);transition:transform .15s}
.dr-fold:not([open])>summary::before{transform:rotate(-90deg)}
.dr-fold>.dr-fold-b{padding:2px 14px 14px}
.dr-fold-b>.tw:last-child{margin-bottom:0}
/* Lưới trường: nhãn xám có icon ở trên, giá trị trong ô nền xám nhạt chỉ đọc */
.dr-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.dr-f{min-width:0}
.dr-f.s2{grid-column:span 2}
.dr-f.s3{grid-column:1/-1}
.dr-fl{display:flex;align-items:center;gap:5px;font:500 12px/1.5 var(--f-sans);color:var(--ink-3);margin-bottom:4px}
.dr-fl .ico{width:13px;height:13px;flex:none}
.dr-fv{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;min-height:32px;
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
@media (max-width:900px){
  .drawer,.drawer.dr-wide{width:100vw}
  .drawer .dr-hd{grid-template-columns:minmax(0,1fr) auto;padding:0 8px 0 12px}
  .drawer .dr-hd .dr-ttl{grid-column:1;grid-row:1}
  .drawer .dr-hd .dr-tools{grid-column:2;grid-row:1}
  .drawer .dr-hd .dr-tabs{grid-column:1/-1;grid-row:2;justify-content:flex-start;margin:0 -4px}
  .drawer .dr-hd .dr-acts{grid-column:1/-1;grid-row:3;justify-content:flex-start;flex-wrap:wrap;padding:4px 0 8px}
  .dr-tabs button{min-height:40px}
  .dr-fields{grid-template-columns:1fr}
  .dr-f.s2,.dr-f.s3{grid-column:auto}
  .dr-menu{left:0;right:auto}
}

/* Khung xương lúc tải (thay chữ "Đang tải…"). Có lớp `.skel` dùng chung ở nhánh phản hồi thì đổi sang đó; trước mắt định nghĩa cục bộ. */
.dr-skel{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.dr-skel i,.dr-sk-g i{display:block;height:14px;border-radius:4px;background:linear-gradient(90deg,var(--panel-2) 25%,var(--line) 50%,var(--panel-2) 75%);
  background-size:200% 100%;animation:drsk 1.2s ease-in-out infinite}
.dr-sk-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.dr-sk-g i{height:32px}
.dr-sk.w40{width:40%}.dr-sk.w70{width:70%}.dr-sk.w90{width:90%}
@keyframes drsk{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.dr-skel i,.dr-sk-g i{animation:none}}
@media (max-width:900px){.dr-sk-g{grid-template-columns:1fr}}
/* Chế độ form: thân cuộn, chân dính đáy; 1 nhóm thì ẩn hàng tab (đầu ngăn chỉ còn tiêu đề + đóng) */
.drawer.dr-form .dr-body{padding-bottom:24px}
.drawer.dr-notabs .dr-hd .dr-tabs{display:none}
.dr-ft{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:10px 16px;background:var(--panel);
  border-top:1px solid var(--line);box-shadow:0 -4px 12px color-mix(in srgb,var(--ink) 8%,transparent);padding-bottom:max(10px,env(safe-area-inset-bottom))}
.dr-ft .fm-msg{margin-right:auto;font-size:12px;line-height:1.5;color:var(--crit-ink);min-width:0;overflow-wrap:anywhere}
.dr-ft .btn{height:32px;padding:0 16px}
.dr-ft .btn.busy{opacity:.8;cursor:progress}
@media (max-width:900px){.dr-ft{flex-wrap:wrap}.dr-ft .fm-msg{flex-basis:100%;margin-bottom:2px}.dr-ft .btn{flex:1;min-height:40px}}

/* ───── src/css/ui-feedback.css ───── */
/* ============================================================
   Phản hồi: toast, hộp xác nhận (ask), skeleton, trạng thái rỗng/lỗi.
   Ghi đè khối .tst cũ trong main.css (file này ghép sau main.css).
   ============================================================ */

/* ---------- Toast ---------- */
#toast{position:fixed;right:16px;bottom:16px;z-index:95;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.tst{pointer-events:auto;display:flex;align-items:flex-start;gap:9px;background:var(--panel);color:var(--ink);border:1px solid var(--line-2);
  border-left:3px solid var(--ink-3);padding:10px 8px 10px 12px;border-radius:var(--r-lg);font-size:13px;font-weight:500;line-height:1.45;
  box-shadow:0 8px 24px rgba(0,0,0,.16);width:max-content;min-width:240px;max-width:380px;animation:tst-in .22s ease}
.tst-i{flex:none;display:grid;place-items:center;height:19px}
.tst-i .ico{width:16px;height:16px;vertical-align:0}
.tst-m{flex:1;min-width:0;overflow-wrap:anywhere;padding-top:1px}
.tst-a{flex:none;border:0;background:none;color:var(--link);font:inherit;font-weight:600;cursor:pointer;padding:1px 6px;border-radius:var(--r)}
.tst-a:hover{background:var(--link-soft)}
.tst-x{flex:none;width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r);background:none;color:var(--ink-3);cursor:pointer}
.tst-x:hover{background:var(--panel-2);color:var(--ink)}
.tst-x .ico{width:14px;height:14px;vertical-align:0}
.tst-ok{border-left-color:var(--ok-solid)} .tst-ok .tst-i{color:var(--ok-solid)}
.tst-err{border-left-color:var(--crit-solid)} .tst-err .tst-i{color:var(--crit-solid)}
.tst-warn{border-left-color:var(--warn-solid)} .tst-warn .tst-i{color:var(--warn-solid)}
.tst-info{border-left-color:var(--info-solid)} .tst-info .tst-i{color:var(--info-solid)}
.tst-out{opacity:0;transform:translateX(12px);transition:opacity .16s,transform .16s}
.tst-bump{animation:tst-bump .25s ease}
@keyframes tst-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tst-bump{50%{transform:scale(1.03)}}
@media(max-width:560px){#toast{left:12px;right:12px;bottom:12px;align-items:stretch}.tst{width:auto;min-width:0;max-width:none}}

/* ---------- Hộp xác nhận ---------- */
.ask-ovl{position:fixed;inset:0;z-index:96;background:rgba(0,0,0,.42);display:flex;justify-content:center;align-items:flex-start;padding:16vh 16px 16px;animation:ask-fade .15s ease}
.ask{outline:0;width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 14px 44px rgba(0,0,0,.24);padding:18px 20px 16px;animation:ask-in .18s ease}
.ask-h{display:flex;align-items:flex-start;gap:10px}
.ask-i{flex:none;display:grid;place-items:center;width:22px;height:24px;color:var(--warn-solid)}
.ask-i .ico{width:20px;height:20px;vertical-align:0}
.ask-danger .ask-i{color:var(--crit-solid)}
.ask h3{margin:0;font-size:15px;font-weight:600;line-height:24px;color:var(--ink)}
.ask-t{margin:6px 0 0 32px;font-size:13px;color:var(--ink-2);line-height:1.55;white-space:pre-line}
.ask-f{display:block;margin:12px 0 0 32px}
.ask-f>span{display:block;font-size:12px;color:var(--ink-2);margin-bottom:4px}
.ask-in{width:100%;box-sizing:border-box}
.ask-in.bad{border-color:var(--crit);box-shadow:0 0 0 2px var(--crit-soft)}
.ask-e{display:block;margin-top:4px;font-size:12px;color:var(--crit-ink)}
.ask-a{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
.btn.danger-solid{background:var(--crit-solid);border-color:var(--crit-solid);color:var(--on-brand)}
.btn.danger-solid:hover{filter:brightness(.92);border-color:var(--crit-solid);color:var(--on-brand)}
@keyframes ask-fade{from{opacity:0}to{opacity:1}}
@keyframes ask-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:560px){.ask-ovl{padding-top:10vh}.ask-t,.ask-f{margin-left:0}.ask-a{flex-direction:column-reverse}.ask-a .btn{height:40px}}

/* ---------- Skeleton ---------- */
.skel{display:block;border-radius:var(--r);background:linear-gradient(90deg,var(--bg-2) 25%,var(--line) 50%,var(--bg-2) 75%);background-size:200% 100%;animation:skel 1.3s ease-in-out infinite}
.skel-line{height:12px;max-width:100%}
.skel-row{display:grid;grid-template-columns:repeat(var(--c,4),minmax(0,1fr));gap:14px;align-items:center;padding:13px 12px;border-bottom:1px solid var(--line)}
tr.skel-row{display:table-row}
tr.skel-row>td{padding:13px 12px;border-bottom:1px solid var(--line)}
.skel-box{display:flex;flex-direction:column;gap:10px;padding:14px 12px}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}.tst,.ask,.ask-ovl{animation:none}.tst-out{transition:none}}

/* ---------- Trạng thái rỗng / lỗi ---------- */
.fb-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 20px;color:var(--ink-2)}
.fb-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);color:var(--ink-3);margin-bottom:12px}
.fb-ico .ico{width:22px;height:22px;vertical-align:0}
.fb-error .fb-ico{background:var(--crit-soft);color:var(--crit-ink)}
.fb-state h4{margin:0 0 4px;font-size:14px;font-weight:600;color:var(--ink)}
.fb-state p{margin:0;font-size:13px;max-width:380px;line-height:1.5;overflow-wrap:anywhere}
.fb-act{margin-top:14px}

/* ───── src/css/ui-form.css ───── */
/* Form trên Drawer + Combo (src/ui/form.js). Chỉ dùng biến --…. line-height >= 1.4 (dấu tiếng Việt không bị xén). */
.fm-group{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px 16px;margin-bottom:12px}
.fm-gt{margin:0 0 12px;font:600 14px/1.5 var(--f-sans);color:var(--ink)}
.fm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.fm-f{min-width:0;display:flex;flex-direction:column;gap:5px}
.fm-f.s2{grid-column:1/-1}
.fm-l{font:500 12px/1.5 var(--f-sans);color:var(--ink-2)}
.fm-l .req{color:var(--crit);margin-left:2px}
.fm-f input:not([type=checkbox]),.fm-f select,.fm-f textarea{width:100%}
.fm-f.err input:not([type=checkbox]),.fm-f.err select,.fm-f.err textarea,.fm-f.err .cb-ctl{border-color:var(--crit)}
.fm-f.err input:focus,.fm-f.err select:focus,.fm-f.err textarea:focus,.fm-f.err .cb-ctl.open{box-shadow:0 0 0 2px var(--crit-soft)}
.fm-err{font-size:12px;line-height:1.5;color:var(--crit-ink)}
.fm-err:empty{display:none}
.fm-hint{font-size:12px;line-height:1.5;color:var(--ink-3)}
.fm-chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);padding:6px 0}
.fm-html{font-size:13px;line-height:1.5;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;min-height:32px}
.fm-html:empty{display:none}
@media (max-width:900px){.fm-grid{grid-template-columns:1fr}.fm-f.s2{grid-column:auto}.fm-group{padding:12px}
  .fm-f input:not([type=checkbox]),.fm-f select{height:40px;font-size:16px}.cb-in{font-size:16px}}

/* Combo: ô chọn có tìm kiếm */
.cb{position:relative;min-width:0;width:100%}
.cb-ctl{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-height:var(--h-input);padding:0 28px 0 8px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r);position:relative;cursor:text}
.cb-ctl:hover{border-color:var(--ink-3)}
.cb-ctl.open,.cb-ctl:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.cb-ctl.dis{background:var(--panel-2);cursor:not-allowed}
.cb-chips{display:contents}
.cb-in{flex:1;min-width:60px;width:auto!important;height:calc(var(--h-input) - 2px)!important;border:0!important;box-shadow:none!important;outline:0;background:transparent!important;padding:0 2px!important;
  font:inherit;color:var(--ink);text-overflow:ellipsis}
.cb-in:disabled{color:var(--ink-3);cursor:not-allowed}
.cb-car,.cb-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;color:var(--ink-3);pointer-events:none}
.cb-car .ico,.cb-x .ico{width:14px;height:14px}
.cb-x{right:24px;border:0;background:var(--panel);border-radius:50%;padding:0;cursor:pointer;pointer-events:auto;display:none}
.cb-ctl.has:hover .cb-x,.cb-ctl.has:focus-within .cb-x{display:grid}
.cb-x:hover{color:var(--ink);background:var(--panel-2)}
.cb-x[hidden]{display:none!important}
.cb-chip{display:inline-flex;align-items:center;gap:2px;max-width:100%;background:var(--brand-soft);color:var(--brand-ink);border-radius:var(--r);padding:0 2px 0 7px;font-size:12px;line-height:22px}
.cb-chip button{border:0;background:none;color:inherit;padding:0;width:18px;height:18px;display:grid;place-items:center;cursor:pointer;border-radius:50%}
.cb-chip button:hover{background:color-mix(in srgb,var(--brand-ink) 22%,transparent)}
.cb-chip .ico{width:12px;height:12px}
.cb-pop{position:fixed;z-index:95;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 10px 28px color-mix(in srgb,var(--ink) 22%,transparent);
  padding:4px;min-width:180px;max-width:calc(100vw - 16px);overflow-y:auto;animation:sl .12s ease}
.cb-pop[hidden]{display:none}
.cb-opt{display:flex;align-items:baseline;gap:8px;padding:7px 10px;border-radius:var(--r);cursor:pointer;font-size:13px;line-height:1.5;color:var(--ink)}
.cb-opt.act{background:var(--panel-2)}
.cb-opt.sel{color:var(--brand-ink);font-weight:600}
.cb-opt.sel::after{content:"✓";margin-left:auto;padding-left:8px}
.cb-code{font:600 12px/1.5 var(--f-mono);flex:none}
.cb-lb{min-width:0;overflow-wrap:anywhere}
.cb-sub{margin-left:auto;font-size:11px;color:var(--ink-3);flex:none;padding-left:8px}
.cb-empty{padding:10px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.cb-new{position:sticky;bottom:-4px;background:var(--panel);border-top:1px solid var(--line);border-radius:0;margin:4px -4px -4px;padding:9px 14px;color:var(--brand-ink);font-weight:600}
.cb-new:hover,.cb-new.act{background:var(--brand-soft)}
@media (max-width:900px){.cb-opt{padding:10px}}

.cb-fail{color:var(--crit-ink)}
.cb-retry{border:0;background:none;color:var(--brand-ink);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:0}

/* ───── src/css/ui-machine.css ───── */
/* Tỷ lệ sử dụng máy (đợt 25/10) + ô "Thêm chi tiết" của form báo công */
.mu-bar{align-items:end}
.mu-meta{font-size:12px;align-self:center}
.mu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:12px}
.mu-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px 12px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);cursor:pointer;font:inherit;color:var(--ink);text-align:center}
.mu-card:hover{border-color:var(--line-2);background:var(--row-hover)}
.mu-card:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.mu-card.off{opacity:.65}
.mu-ring{width:112px;height:112px}
.mu-ring .bg{fill:none;stroke:var(--line);stroke-width:10}
.mu-ring .fg{fill:none;stroke-width:10;stroke-linecap:butt}
.mu-ring text{font:600 17px/1 var(--f-sans);fill:var(--ink);font-variant-numeric:tabular-nums}
.mu-ring.idle .fg{stroke:var(--line-2)}
.mu-ring.idle text{fill:var(--ink-3)}
.mu-ring.low .fg{stroke:var(--warn)}
.mu-ring.ok .fg{stroke:var(--ok)}
.mu-ring.over .fg{stroke:var(--crit)}
.mu-ring.over text{fill:var(--crit-ink)}
.mu-n{margin-top:6px;font-weight:600}
.mu-nm{font-size:13px;color:var(--ink-2)}
.mu-s{font-size:12px}
.mu-f{margin-top:4px;font-size:12px;color:var(--ink-2)}
.mu-card.idle .mu-f{color:var(--ink-3)}
/* form báo công: mục "Thêm chi tiết" */
.rf-more{margin-top:10px;border-top:1px dashed var(--line-2);padding-top:6px}
.rf-more>summary{cursor:pointer;font-weight:600;color:var(--link);padding:4px 0}
.rf-more .mgrid{margin-top:8px}
.rf-hm{display:flex;gap:6px;align-items:center}
.rf-hm input{width:72px}
.dk-more-d{margin:8px 0;border-top:1px dashed var(--line-2);padding-top:6px}
.dk-more-d>summary{cursor:pointer;font-weight:600;color:var(--link);padding:6px 0;min-height:44px;display:flex;align-items:center}
.dk-more-d .dk-d-g{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.dk-more-d label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-3)}
.dk-more-d select,.dk-more-d input{min-height:44px;font-size:16px}
.dk-hm{display:flex;gap:6px;align-items:center}
.dk-hm input{width:70px}
.dk-tot-h{white-space:nowrap}

/* ───── src/css/ui-monitor.css ───── */
/* ============================================================
   Giám sát xưởng (TV) — #/monitor. Chỉ dùng token theme (--panel, --ink, --ok…),
   nên nền sáng/tối đổi theo cài đặt chung. Cỡ chữ gốc co theo cả chiều rộng lẫn
   chiều cao màn để 1920×1080 và 1470×900 đều vừa một khung, không cuộn trang.
   ============================================================ */
.mon{--m:min(.9vw,1.6vh);font-size:var(--m);height:calc(100vh - 38px);display:flex;flex-direction:column;gap:.75em;
  min-height:0;overflow:hidden;color:var(--ink)}
.mon-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1em;flex:none}
.mon-ws{display:flex;align-items:center;gap:.8em;font-size:1.7em;font-weight:700}
.mon-dots{display:inline-flex;gap:.35em}
.mon-dots i{width:.55em;height:.55em;border-radius:50%;background:var(--line-2)}
.mon-dots i.on{background:var(--brand)}
.mon-title{font-size:2.1em;font-weight:800;letter-spacing:.02em;text-align:center}
.mon-upd{justify-self:end;display:flex;align-items:center;gap:.5em;font-size:1.25em;color:var(--ink-2);white-space:nowrap}
.mon-upd b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:1.15em}
.mon-live{width:.6em;height:.6em;border-radius:50%;background:var(--ok);animation:mon-pulse 2s ease-in-out infinite}
@keyframes mon-pulse{50%{opacity:.35}}
.mon-fs{background:none;border:1px solid var(--line);color:var(--ink-3);border-radius:6px;padding:.3em .55em;cursor:pointer;opacity:.6;margin-left:.8em}
.mon-fs:hover,.mon-fs:focus-visible{opacity:1;color:var(--ink);border-color:var(--brand)}
.mon-upd .bd-exit{margin-left:.2em}
.mon-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:.75em}
.mon-col{display:flex;flex-direction:column;gap:.75em;min-height:0;min-width:0}
.mon-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:.8em 1em;
  display:flex;flex-direction:column;min-height:0;min-width:0}
.mon-fill{flex:1}
.mon-h{font-size:1.25em;font-weight:700;margin-bottom:.45em;display:flex;align-items:baseline;justify-content:space-between;gap:1em;flex:none}
.mon-lg{font-size:.7em;font-weight:500;color:var(--ink-2);display:inline-flex;align-items:center;gap:.4em;flex-wrap:wrap;justify-content:flex-end}
.mon-lg i{display:inline-block;width:.8em;height:.8em;border-radius:2px;margin-left:.7em}
.mon-lg i:first-child{margin-left:0}
.mon-none{color:var(--ink-3);font-size:1.2em;text-align:center;margin:auto;padding:1em}
.mon-chart{flex:1;min-height:0;display:flex}
.mon-chart svg{width:100%;height:100%}
.mon-gl{stroke:var(--grid);stroke-width:1}
.mon-ax{fill:var(--ink-3);font-size:13px}
.mon-vl{fill:var(--ink-2);font-size:13px;font-weight:600}
.mon-em{fill:var(--ink-3);font-size:19px}
.mon-top5,.mon-par{display:flex;flex-direction:column;justify-content:space-around;flex:1;gap:.3em}
.mon-t5,.mon-pr{display:grid;align-items:center;gap:.7em;font-size:1.3em}
.mon-t5{grid-template-columns:1.4em minmax(0,9em) 1fr auto}
.mon-pr{grid-template-columns:minmax(0,9.5em) 1fr auto 3.3em}
.mon-t5 em{font-style:normal;color:var(--ink-3);font-weight:700}
.mon-t5n,.mon-pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mon-t5b,.mon-pb{height:.9em;background:var(--bg-2);border-radius:3px;overflow:hidden}
.mon-t5b i{display:block;height:100%;background:var(--warn);border-radius:3px}
.mon-pb i{display:block;height:100%;background:var(--crit);border-radius:3px}
.mon-t5 b,.mon-pr b{font-variant-numeric:tabular-nums;text-align:right}
.mon-pr em{font-style:normal;color:var(--ink-3);font-size:.8em;text-align:right;font-variant-numeric:tabular-nums}
/* Ô số lớn */
.mon-tiles4,.mon-tiles3{display:grid;gap:.6em}
.mon-tiles4{grid-template-columns:repeat(4,1fr);margin-bottom:.6em}
.mon-tiles3{grid-template-columns:repeat(3,1fr)}
.mon-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:.7em .9em;text-align:left;min-width:0}
.mon-tl{font-size:1.02em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-tv{font-size:3.6em;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mon-ts{font-size:.95em;color:var(--ink-3);line-height:1.2}
.mon-tile.crit .mon-tv{color:var(--crit-ink)}
.mon-tile.ok .mon-tv{color:var(--ok-ink)}
.mon-mid .mon-card{padding-bottom:.5em}
/* Dải dữ liệu dạng lưới div */
.mon-scroll{flex:1;min-height:0;overflow:hidden;position:relative}
.mon-t{width:100%;font-size:1.15em}
.mon-hd,.mon-r{display:grid;grid-template-columns:var(--cols);gap:0 .6em;align-items:center;padding:.35em .6em}
.mon-hd{position:relative;z-index:2;background:var(--panel);font-weight:600;color:var(--ink-3);font-size:.85em;
  padding-top:.3em;padding-bottom:.3em;border-bottom:1px solid var(--line-2);white-space:nowrap}
.mon-r{border-bottom:1px solid var(--line)}
.mon-hd>span,.mon-r>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mon-t .num{text-align:right;font-variant-numeric:tabular-nums}
.mon-sg{--cols:7.5em minmax(0,1fr) 7em 4.2em minmax(0,1.8fr) 8.5em 9.5em 11em}
.mon-g{color:var(--ok-ink);font-weight:700}
.mon-b{color:var(--crit-ink);font-weight:700}
.mon-z{color:var(--ink-3)}
.mon-sm,.mon-bn{font-size:.8em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-bn{color:var(--warn-ink)}
.mon-pc{font-size:.85em;font-weight:700;color:var(--info-ink)}
.mon-pc.ok{color:var(--ok-ink)}
.mon-r.late>span:first-child{box-shadow:inset 3px 0 var(--crit);padding-left:.4em;margin-left:-.4em}
.mon-chain .chain{vertical-align:middle}
.mon-chain .ch-n{width:2.3em;height:2.3em;font-size:.72em;cursor:default;pointer-events:none}
.mon-chain .ch-l{width:.9em;margin-top:1.1em}
.mon-chain .ch-g .ch-n{width:1.9em;height:1.9em}
.mon-chain .ch-t,.mon-chain .ch-gl{display:none}
.mon-bot{flex:0 0 27vh;padding-bottom:.4em}
.mon-scroll.rolling .mon-body{animation:mon-roll var(--roll-t,30s) linear infinite}
.mon-scroll.rolling:hover .mon-body{animation-play-state:paused}
@keyframes mon-roll{from{transform:translateY(0)}to{transform:translateY(var(--roll,0))}}
@media (prefers-reduced-motion:reduce){.mon-scroll.rolling .mon-body{animation:none}.mon-live{animation:none}}
/* Nhóm song song nằm ngang để hàng không cao gấp đôi */
.mon-chain .ch-gb{grid-auto-flow:column;grid-template-columns:none}
.mon-chain .ch-g{flex-direction:row;padding:2px 4px}
.mon-chain .chain{align-items:center}
.mon-chain .ch-l{margin-top:0}
.mon-anon{margin-top:.5em;font-size:1.05em;color:var(--ink-3)}
.mon-stale{margin-left:.8em;padding:.1em .6em;border-radius:4px;background:var(--crit-soft);color:var(--crit-ink);font-weight:700}
.mon-sg{column-gap:1em}

/* ───── src/css/ui-orders.css ───── */
/* ── Ngăn đơn hàng, tab Vận hành (src/views/orders.js opsHtml) ── */
.ord-ops-h{margin:20px 0 8px;font:600 13px/1.4 var(--f-sans);color:var(--ink)}
.ord-ops-h:first-child{margin-top:0}
.ord-ops-steps{display:flex;flex-wrap:wrap;gap:8px}
.ord-po-summary{margin:0 0 8px;font-size:12px}
.ord-po-wrap{max-width:100%;overflow-x:auto}
.ord-po-table{min-width:760px}
.ord-po-table td{vertical-align:middle}
.ord-po-table .ord-po-bar{width:140px}
.ord-po-sku,.ord-po-late{display:block;margin-top:2px;font-size:11px}
.ord-po-late{color:var(--crit-ink)}
.ord-po-empty{padding:16px;border:1px dashed var(--line);border-radius:var(--r);text-align:center}
.ord-ship-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:640px){.ord-ship-grid{grid-template-columns:minmax(0,1fr)}}
.ord-po-table td:first-child{white-space:nowrap}

/* ───── src/css/ui-po.css ───── */
/* P3 nhánh A — màn Lệnh SX: ô chọn mục trong form "Tạo lệnh", nhãn nguồn, hàng quá hạn. */
.po-pick{width:100%;min-height:144px;line-height:1.5;padding:4px}
.po-pick option{padding:4px 6px;line-height:1.5}
.po-src{font-size:12px;color:var(--ink-2);line-height:1.4;white-space:nowrap}

/* ───── src/css/ui-qc.css ───── */
/* Hộp QC ghi nhận + báo cáo QC — chỉ token màu của hệ thiết kế. */
.qcb-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.qcb-chips[hidden]{display:none}
.qcb-lbl{flex:1 0 100%;font:600 11px/1.4 var(--f-sans);color:var(--ink-3);text-transform:uppercase}
.qcb-lbl .req{font-style:normal;font-weight:700;color:var(--crit-ink);margin-left:6px}
.qcb-chip{min-height:36px;padding:0 14px;border-radius:99px;border:1.5px solid var(--line-2);background:var(--panel-2);color:var(--ink);cursor:pointer;font:inherit}
.qcb-chip:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.qcb-chip.on{background:var(--crit-solid);border-color:var(--crit-solid);color:var(--on-crit)}
.qcr-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;margin-bottom:10px}
.qcr-bar label{display:flex;flex-direction:column;gap:3px;font:600 11px/1.4 var(--f-sans);color:var(--ink-3);text-transform:uppercase}
.qcr-sum{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px;line-height:1.5}
.qcr-bad{color:var(--crit-ink);font-weight:600}

/* ── Xếp loại A/S/B/C, hạng mục nhiều dòng, ảnh lỗi, thống kê lỗi — chỉ token màu của hệ thiết kế ── */
.qcb-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:6px}
.qcb-grid input{width:100%;min-height:44px;font-size:16px}
.qcb-g-a{--g:var(--ok-ink)}.qcb-g-s{--g:var(--info-solid)}.qcb-g-b{--g:var(--warn-ink)}.qcb-g-c{--g:var(--crit-ink)}
.qcb-grid .fld[class*="qcb-g-"]{color:var(--g);font-weight:700}
.qcb-defs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qcb-defs[hidden]{display:none}
.qcb-def{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 12px;border:1.5px solid var(--line-2);border-radius:99px;background:var(--panel-2);font-size:13px;color:var(--ink)}
.qcb-def input{width:64px;min-height:36px;text-align:center;font-size:16px}
.qcp-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qcp-bar .btn{min-height:44px}
.qcp-hint{font-size:12px}
.qcp-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.qcp-th{position:relative;width:84px;height:84px;margin:0;padding:0;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--panel-2);cursor:pointer}
.qcp-th img{width:100%;height:100%;object-fit:cover;display:block}
.qcp-th:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.qcp-rm{position:absolute;top:2px;right:2px;width:32px;height:32px;border-radius:50%;border:0;background:var(--panel);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.qcp-lb{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center}
.qcp-lb img{max-width:96vw;max-height:90vh;object-fit:contain}
.qcp-lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qcp-lb button:focus-visible{outline:3px solid #fff}
.qcp-lbx{top:12px;right:12px}.qcp-lbp{left:12px;top:50%}.qcp-lbq{right:12px;top:50%}
.qcp-lbn{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:#fff;font:600 13px var(--f-sans)}
.qcs-chips{display:flex;flex-wrap:wrap;gap:8px 10px;margin:4px 0 12px}
.qcs-chip{display:flex;flex-direction:column;min-width:92px;padding:6px 12px;border:1px solid var(--line-2);border-left-width:4px;border-radius:var(--r);background:var(--panel)}
.qcs-chip i{font-style:normal;font-size:11px;color:var(--ink-3);text-transform:uppercase}
.qcs-chip b{font-size:20px;line-height:1.2}
.qcs-chip.qcs-a{border-left-color:var(--ok-solid)}.qcs-chip.qcs-s{border-left-color:var(--info-solid)}
.qcs-chip.qcs-b{border-left-color:var(--warn-solid)}.qcs-chip.qcs-c{border-left-color:var(--crit-solid)}
b.qcs-a{color:var(--ok-ink)}b.qcs-s{color:var(--info-solid)}b.qcs-b{color:var(--warn-ink)}b.qcs-c{color:var(--crit-ink)}
th.qcs-a{color:var(--ok-ink)}th.qcs-s{color:var(--info-solid)}th.qcs-b{color:var(--warn-ink)}th.qcs-c{color:var(--crit-ink)}
.qcs-top{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:14px;margin-bottom:14px;align-items:start}
.qcs-top h3{margin:0 0 8px;font:700 14px var(--f-display)}
.qcs-sum,.qcs-chart{padding:12px}
.qcs-hot td{background:var(--warn-soft)}
.qcs-tot td{border-top:2px solid var(--line-2);font-weight:700}
.qcs-note{margin:8px 0 0;font-size:12px}
.qcs-recs{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto;margin-bottom:12px}
.qcs-rec{padding:10px;border:1px solid var(--line-2);border-radius:var(--r);display:flex;flex-direction:column;gap:6px}
.qcs-nt{padding:6px 8px;background:var(--panel-2);border-radius:var(--r);white-space:pre-wrap}
.qcs-entry{overflow:auto;max-width:100%}
.qcs-entry input,.qcs-entry select{min-height:40px;font-size:15px}
.qcs-entry .qe-n{width:64px;text-align:center}
.par{overflow-x:auto}
.par-in{padding:4px 4px 0}
.par-plot{position:relative;height:210px;border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding-top:18px}
.par-cols{position:absolute;inset:18px 0 0 0;display:flex}
.par-c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;min-width:0}
.par-c i{display:block;width:62%;background:var(--c2);border-radius:3px 3px 0 0;min-height:1px}
.par-v{font:700 11px var(--f-sans);color:var(--ink-2);margin-bottom:2px}
.par-line{position:absolute;inset:18px 0 0 0;width:100%;height:calc(100% - 18px);overflow:visible;pointer-events:none}
.par-line polyline{fill:none;stroke:var(--c3);stroke-width:2.5}
.par-line .par-80{stroke:var(--line-2);stroke-dasharray:4 3;stroke-width:1;vector-effect:non-scaling-stroke}
.par-ax{position:absolute;right:2px;font-size:10px;color:var(--c3)}
.par-ax0{top:4px}.par-ax1{top:calc(18px + (100% - 18px) * .2 - 12px)}
.par-xl{display:flex}
.par-xl span{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:11px;line-height:1.3;padding:4px 2px;color:var(--ink-2);overflow-wrap:anywhere}
.par-xl b{color:var(--c3);font-weight:600}
@media (max-width:760px){
  .qcb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qcs-top{grid-template-columns:minmax(0,1fr)}
}
.sh-drill{text-decoration:underline dotted;text-underline-offset:3px}.sh-drill:hover{text-decoration:underline}

/* ───── src/css/ui-rates.css ───── */
/* Đơn giá khoán (src/views/rates.js) */
.rt-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.rt-warn{border:1px solid var(--warn,#d9a400);background:rgba(217,164,0,.08);border-radius:var(--r);padding:10px 14px;margin-bottom:14px}
.rt-ws{margin:18px 0 6px;font-weight:600}
.rt-tbl td.n,.rt-tbl th.n{text-align:right;font-variant-numeric:tabular-nums}
.rt-tbl tr.rt-miss td{color:var(--muted)}
.rt-tbl tr.rt-item td:first-child{padding-left:28px}
.rt-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.rt-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.rt-stages{display:flex;gap:6px 14px;flex-wrap:wrap;margin-bottom:12px}
.rt-stages label{flex-direction:row;align-items:center;gap:6px;color:var(--ink);font-size:13px}
.rt-up{color:var(--crit,#c0392b)}.rt-down{color:var(--ok,#1e8e5a)}
.rt-sum{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;font-size:13px}
.rt-tot td{font-weight:700;border-top:2px solid var(--line)}

/* ───── src/css/ui-report.css ───── */
/* Báo công (P3 nhánh C): ReportForm + màn Báo công. Màu qua biến --…, không hex. */
.rf .mgrid{grid-template-columns:1fr 1fr}
.rf .rf-span{grid-column:1 / -1}
.rf .fld select,.rf .fld input{width:100%;height:var(--h-input)}
.rf .fld input[type=number]{font-size:16px;font-weight:600}
.rf .fld .bar{margin-top:6px}
.rf .rf-lim{font-size:12.5px;line-height:1.5;margin:-2px 0 8px;color:var(--ink-2)}
.rf .rf-eff{font-size:12.5px;line-height:1.5;padding:9px 12px;margin:0 0 6px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);min-height:38px}
.rf .rf-eff:empty{display:none}
.rf .rf-ok{color:var(--ok-ink)}
.rf .rf-mid{color:var(--warn-ink)}
.rf .rf-low{color:var(--crit-ink)}
.rf .rf-err{margin-bottom:12px}
@media (max-width:600px){.rf .mgrid{grid-template-columns:1fr}}

/* Màn Báo công */
.wr-sum{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.wr-sum b{color:var(--ink)}
.wr-sum .wr-eff-ok{color:var(--ok-ink)}
.wr-sum .wr-eff-mid{color:var(--warn-ink)}
.wr-sum .wr-eff-low{color:var(--crit-ink)}
.wr-neg{color:var(--crit-ink);font-weight:600}
.wr-note{font-size:11px;line-height:1.4;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ───── src/css/ui-risk.css ───── */
/* Bảng rủi ro lệnh (src/views/risk.js) — khối đầu Bảng điều hành. Chỉ dùng biến màu của theme nên sáng/tối đều đọc được. */
#risk-card .card-h{margin-bottom:10px}
.risk-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}   /* hàng trên: lệnh · hàng dưới: tác vụ */
.risk-k{padding:11px 13px;margin:0;min-width:0}
.risk-k .kv{font-size:26px}
.risk-k.kpi-go{cursor:pointer}
.risk-k.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--brand-soft)}
.risk-main{margin-bottom:18px}
.risk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.risk-pane{min-width:0}
.risk-h{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.risk-h h3{font-size:13.5px;font-weight:600;margin:0;flex:1;min-width:0}
.risk-lnk a{font-size:12px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.risk-lnk a:hover{color:var(--ink)}
.rk-sub{font-size:10.5px}
.risk-link{cursor:pointer;border-radius:6px}
.risk-link:hover,.risk-link:focus-visible{background:var(--panel-2);outline:none}
#risk-top .hbr{grid-template-columns:minmax(80px,34%) 1fr auto}
#risk-top .hbv span{display:block;font-size:10.5px;color:var(--ink-3);white-space:nowrap}
/* Hoàn tất so với đến hạn: hai cột cạnh nhau mỗi ngày */
.rt{display:flex;align-items:flex-end;gap:3px;height:132px;margin:4px 0 2px}
.rt-c{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;height:100%}
.rt-b{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px;border-bottom:1px solid var(--line)}
.rt-b>i{display:block;width:42%;max-width:14px;border-radius:2px 2px 0 0;min-height:0}
.rt-due{background:var(--c3)} .rt-done{background:var(--c1)}
.rt-x{height:15px;font-size:10px;color:var(--ink-3);text-align:center;white-space:nowrap;overflow:visible}
.rt-sw-due,.rt-sw-done{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.rt-sw-due{background:var(--c3)} .rt-sw-done{background:var(--c1)}
@media (max-width:760px){.risk-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.risk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

.rk-cut{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-w{position:relative}
.rt-none{position:absolute;left:0;right:0;top:38%;text-align:center;font-size:12px;color:var(--ink-3);padding:0 12px;pointer-events:none}
/* Bảng lệnh trong khối hẹp: bảy cột, bố cục cố định, chữ dài cắt bằng dấu ba chấm → không bao giờ tràn ngang (kể cả 1024px) */
#risk-dt table.dt{table-layout:fixed;width:100%}
#risk-dt .dt-no{display:none}
#risk-dt table.dt thead th{padding:10px 6px}
#risk-dt table.dt thead th .ico{display:none}
#risk-dt table.dt th,#risk-dt table.dt td{overflow:hidden;text-overflow:ellipsis}
#risk-dt table.dt tbody td{padding-left:6px;padding-right:6px}
#risk-dt th[data-ck=code]{width:15%} #risk-dt th[data-ck=products]{width:15%} #risk-dt th[data-ck=customer]{width:19%}
#risk-dt th[data-ck=due]{width:15%} #risk-dt th[data-ck=left]{width:10%} #risk-dt th[data-ck=stage]{width:16%} #risk-dt th[data-ck=pct]{width:10%}
/* Liên kết lọc theo danh sách id trên màn Lệnh SX */
.wo-idf{display:flex;align-items:center;gap:8px;margin-bottom:10px}

/* ───── src/css/ui-routings.css ───── */
/* Màn Quy trình công nghệ — bảng bước có thứ tự, sắp bằng kéo-thả hoặc nút lên/xuống. */
.rt-steps{display:flex;flex-direction:column;gap:6px;line-height:1.4}
.rt-row{display:grid;grid-template-columns:28px 32px minmax(120px,1.4fr) 92px minmax(100px,1.2fr) auto;gap:8px;align-items:center;
  padding:6px 8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.rt-row.drag{opacity:.45}
.rt-row.over{border-color:var(--brand);box-shadow:0 -2px 0 var(--brand)}
.rt-grip{cursor:grab;color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;height:28px;border-radius:var(--r);
  background:none;border:0;font-size:16px;line-height:1.4;touch-action:none}
.rt-grip:hover{background:var(--panel-2);color:var(--ink)}
.rt-no{font-weight:600;color:var(--ink-2);text-align:center}
.rt-nm small{color:var(--ink-3);margin-left:4px}
.rt-row input{width:100%;min-width:0}
.rt-btns{display:flex;gap:2px}
.rt-btns .btn{height:28px;min-width:28px;padding:0 6px}
.rt-add{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.rt-add select{flex:1;min-width:160px}
.rt-hd{display:grid;grid-template-columns:28px 32px minmax(120px,1.4fr) 92px minmax(100px,1.2fr) auto;gap:8px;padding:0 8px;
  font:600 11px/1.4 var(--f-sans);color:var(--ink-3);text-transform:uppercase}
.rt-hd span:last-child{width:92px}
.rt-ro{padding:8px 10px;margin-bottom:10px;background:var(--panel-2);border-radius:var(--r);line-height:1.5}
.sg-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;line-height:1.5}
.sg-def{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}
.sg-def .chip{height:auto;min-height:22px;padding:1px 8px;line-height:1.4;cursor:default}
.sg-def label{display:inline-flex;gap:4px;align-items:center;padding:2px 8px;border:1px solid var(--line);border-radius:20px;line-height:1.4;cursor:pointer}
@media (max-width:640px){
  .rt-hd{display:none}
  .rt-row{grid-template-columns:28px 28px minmax(0,1fr) 84px;grid-template-areas:"g n nm r" "x x note note" "b b b b"}
  .rt-row .rt-grip{grid-area:g}.rt-row .rt-no{grid-area:n}.rt-row .rt-nm{grid-area:nm}.rt-row .rt-ratio{grid-area:r}
  .rt-row .rt-note{grid-area:note;grid-column:1/-1}.rt-row .rt-btns{grid-area:b;grid-column:1/-1;justify-content:flex-end}
  .rt-btns .btn{min-height:36px;min-width:40px}
}

.rt-par{display:flex;gap:5px;align-items:center;margin-top:2px;font-size:11px;color:var(--ink-2);cursor:pointer;line-height:1.4}
.rt-par input{width:auto}

/* ───── src/css/ui-task.css ───── */
/* Màn Tác vụ (P3 nhánh B) — chỉ token màu của hệ thiết kế, không mã màu cứng. */
.tk-note{margin-bottom:10px;line-height:1.5}
.tk-seq{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;margin-right:4px;
  border-radius:9px;background:var(--panel-2);color:var(--ink-2);font:600 11px/1.4 var(--f-sans)}
.tk-bad{color:var(--crit-ink)}
.tk-late{color:var(--crit-ink)}
.tk-tm{font-variant-numeric:tabular-nums;line-height:1.4}
.tk-tm.bad{color:var(--warn-ink);font-weight:600}
.tk-form{display:flex;flex-direction:column;gap:8px;line-height:1.5}
.tk-lbl{font:600 11px/1.4 var(--f-sans);color:var(--ink-3);text-transform:uppercase;margin-top:6px}
.tk-modes{display:flex;flex-wrap:wrap;gap:6px 16px}
.tk-mode{display:inline-flex;gap:6px;align-items:center;cursor:pointer;line-height:1.4}
.tk-hint{font-size:12px;line-height:1.5}
.tk-ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.tk-op{display:flex;gap:6px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);cursor:pointer;line-height:1.4}
.tk-op:hover{background:var(--row-hover)}
.tk-op small{margin-left:auto}
.tk-act{display:flex;justify-content:flex-end;margin-top:6px}
tr.tk-cur td{background:var(--brand-soft)}
@media (max-width:640px){
  .tk-ops{grid-template-columns:1fr}
  .tk-op{min-height:40px}
}

/* ───── src/css/ui-today.css ───── */
/* Màn Hôm nay — chỉ token màu của hệ thiết kế, không mã màu cứng; sáng/tối theo token. */
.td{max-width:1180px}
.td-hello{margin:2px 0 14px}
.td-hello h2{margin:0;font:700 22px/1.3 var(--f-display);color:var(--ink)}
.td-hello p{margin:2px 0 0;color:var(--ink-3)}
.td-hello b{color:var(--ink)}
.td-sk-t{height:26px;width:240px;max-width:70%}
.td-sk-h{height:18px;width:55%;margin-bottom:12px}
.td-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.td-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--line-2);border-radius:var(--r-lg)}
.td-card header{display:flex;align-items:center;gap:8px}
.td-card h3{margin:0;flex:1;font:600 14px/1.4 var(--f-sans);color:var(--ink)}
.td-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border-radius:var(--r);
  background:var(--panel-2);color:var(--ink-2)}
.td-ic .ico{width:16px;height:16px}
.td-n{font:700 24px/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.td-c-ok{border-left-color:var(--ok)}.td-c-ok .td-n{color:var(--ok-ink)}
.td-c-info{border-left-color:var(--info)}.td-c-info .td-n{color:var(--info-ink)}
.td-c-warn{border-left-color:var(--warn)}.td-c-warn .td-n{color:var(--warn-ink)}
.td-c-crit{border-left-color:var(--crit)}.td-c-crit .td-n{color:var(--crit-ink)}
.td-wide{grid-column:span 2}
.td-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.td-row{border-top:1px solid var(--line)}
.td-row>a,.td-row:not(:has(>a)){display:flex;align-items:center;gap:8px;padding:8px 0;color:inherit;text-decoration:none;min-height:40px}
.td-row>a:hover .td-rl{color:var(--brand-ink)}
.td-rt{flex:1;min-width:0;display:flex;flex-direction:column}
.td-rl{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-rs{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-rv{font-variant-numeric:tabular-nums;color:var(--ink)}
.td-t-crit .td-rs{color:var(--crit-ink)}
.td-t-warn .td-rs{color:var(--warn-ink)}
.td-prog{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden}
.td-prog i{display:block;height:100%;background:var(--brand-solid)}
.td-pt{font-size:12px;color:var(--ink-3)}
.td-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.td-more{color:var(--brand-ink);font-weight:600;text-decoration:none}
.td-more:hover{text-decoration:underline}
.td-h{margin:22px 0 8px;font:600 12px/1.4 var(--f-sans);color:var(--ink-3);text-transform:uppercase;letter-spacing:.6px}
.td-idles{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:10px}
.td-idle{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel);border:1px dashed var(--line-2);border-radius:var(--r)}
.td-idle>div{flex:1;min-width:0}
.td-idle b{font-weight:600;color:var(--ink-2)}
.td-idle p{margin:0;font-size:12px;line-height:1.5;color:var(--ink-3)}
.td-allclear{display:flex;align-items:center;gap:8px;padding:14px 16px;background:var(--ok-soft);color:var(--ok-ink);border-radius:var(--r-lg);font-weight:600}
.td-hero{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 14px;padding:16px 20px;min-height:64px;border:0;border-radius:var(--r-lg);
  background:var(--brand-solid);color:var(--on-brand);text-align:left;text-decoration:none;cursor:pointer;font:inherit}
.td-hero:hover{background:var(--brand-solid-2)}
.td-hero .ico{width:28px;height:28px;flex:none}
.td-hero span{display:flex;flex-direction:column}
.td-hero b{font:700 20px/1.3 var(--f-display)}
.td-hero small{font-size:13px;opacity:.9}
.td-setup{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 12px;max-width:420px;background:var(--warn-soft);color:var(--warn-ink);
  border:1px solid var(--warn);border-radius:var(--r);text-decoration:none}
.td-setup em{margin-left:auto;font-style:normal;font-weight:600}
.td-setup:hover{border-color:var(--warn-solid)}
@media (max-width:640px){
  .td-grid,.td-idles{grid-template-columns:1fr}
  .td-wide{grid-column:auto}
  .td-hello h2{font-size:20px}
  .td-hero{position:sticky;top:0;z-index:2;box-shadow:0 6px 14px rgba(0,0,0,.12)}
  .td-card footer .btn{min-height:44px}
  .td-row .btn{min-height:40px;min-width:56px}
}

/* ───── src/css/ui-trace.css ───── */
/* ===== Truy vết đơn hàng (views/trace.js) ===== */
.tr-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.tr-box { position: relative; flex: 1 1 320px; max-width: 520px; }
.tr-box input { width: 100%; padding: 8px 10px 8px 32px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--panel); color: var(--ink); }
.tr-ic { position: absolute; left: 9px; top: 9px; color: var(--ink-3); display: inline-flex; }
.tr-sg { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 320px; overflow: auto; }
.tr-sg button { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; font: inherit; cursor: pointer; color: var(--ink); }
.tr-sg button:hover { background: var(--row-hover); }
.tr-sg em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--ink-3); }
.tr-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 12px; }
.tr-no { font-size: 18px; }
.tr-meta { color: var(--ink-3); font-size: 12.5px; }
.tr-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin-bottom: 12px; }
.tr-step { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; display: flex; flex-direction: column; gap: 2px; cursor: default; background: var(--card); }
.tr-step[data-tab]:not([data-tab=""]) { cursor: pointer; }
.tr-step.s-done { border-color: var(--ok-ink, #2a7); }
.tr-step.s-doing { border-color: var(--warn-ink, #c80); }
.tr-step.s-todo { opacity: .75; }
.tr-si { color: var(--ink-3); display: inline-flex; }
.tr-sn { font-size: 20px; font-weight: 600; }
.tr-sc { font-size: 11px; color: var(--ink-3); }
.tr-arrow { display: none; }
.tr-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-bottom: 12px; }
.tr-chip { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 6px; padding: 7px 10px; background: var(--card); }
.tr-chip i { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); }
.tr-chip b { font-size: 17px; }
.tr-chip.ok { border-left-color: var(--ok-ink, #2a7); } .tr-chip.warn { border-left-color: var(--warn-ink, #c80); } .tr-chip.bad { border-left-color: var(--crit-ink, #c33); }
.tr-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 14px 0 8px; }
.tr-tabs button { border: 0; background: none; padding: 8px 12px; font: inherit; cursor: pointer; color: var(--ink-3); border-bottom: 2px solid transparent; }
.tr-tabs button.on { color: inherit; border-bottom-color: var(--brand, #36c); font-weight: 600; }
.tr-tabs em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.tr-row, .tr-pick { cursor: pointer; }
@media (max-width: 640px) { .tr-arrow { display: none; } .tr-step { margin: 0 4px 6px 0; } }