/* ============================================================
   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}
.wsmenu-li{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:7px;
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.wsmenu-li:hover{background:var(--panel-2);color:var(--ink)}
.wsmenu-li.on{background:var(--brand-soft);color:var(--brand-ink)}
.nav-wspick{padding:6px 8px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.nav-ws-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);color:inherit;font:inherit;cursor:pointer}
.nav-ws-btn:hover{border-color:var(--brand)}
.nav-ws-btn .nl{flex:1;font-weight:600;font-size:13px;text-align:left}
.nav-ws-menu{left:8px;right:8px}

/* 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: 12px; 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: 12px; 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:fixed;z-index:70;max-width:min(300px,86vw);margin:0;
  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);
  overflow:auto;-webkit-overflow-scrolling:touch}
.hint-p p{margin:0}
.hint-p p+p{margin-top:.55em}

/* ---------- 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 (#/print-work-order): 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 (#/work-orders) ═══════════ */
/* 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-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.ai-grid{grid-template-columns:1fr}}
.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}

/* CAM */
.cam-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.cam-warn{color:var(--crit);font-size:13px;margin:4px 0}
.cam-calib{font-variant-numeric:tabular-nums}
.cam-calib-weak,.cam-calib.cam-calib-weak{color:var(--ink-3,var(--muted))}
.cam-outdated td{background:color-mix(in srgb,var(--warn-bg) 45%,transparent)}

/* Lỗi đánh cánh */
.cl-bar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin-bottom:12px}
.cl-bar .seg button{min-height:36px;padding:6px 12px}
.cl-kpis{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.cl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.cl-grid-2{align-items:start}
.cl-block h3{margin:0 0 8px;font-size:15px}
.cl-heat-wrap{overflow-x:auto;max-width:100%}
.cl-heat th,.cl-heat td{font-size:11.5px;padding:4px 6px}
.cl-heat-th{max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-heat-size{white-space:nowrap;font-weight:600;position:sticky;left:0;background:var(--panel);z-index:1}
.cl-heat-cell{cursor:pointer;transition:filter .12s}
.cl-heat-cell:hover{filter:brightness(.92)}
.cl-heat-cell.lv-0{background:var(--panel-2)}
.cl-heat-cell.lv-1{background:color-mix(in srgb,var(--warn) 18%,var(--panel))}
.cl-heat-cell.lv-2{background:color-mix(in srgb,var(--warn) 32%,var(--panel))}
.cl-heat-cell.lv-3{background:color-mix(in srgb,var(--crit) 28%,var(--panel))}
.cl-heat-cell.lv-4{background:color-mix(in srgb,var(--crit) 42%,var(--panel))}
.cl-entry{margin-top:8px}
.cl-entry-t input.cl-n{width:52px;text-align:right;padding:4px}
.cl-entry-t input.cl-note{min-width:88px}
.cl-entry-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cl-entry-act .btn{min-height:42px;padding:8px 16px}
@media (max-width:900px){.cl-grid{grid-template-columns:1fr}}
@media (max-width:640px){
  .cl-bar .fld{width:100%}
  .cl-bar .btn{width:100%;min-height:44px}
  .cl-entry-act .btn{flex:1;min-height:48px}
}

/* BTP Cánh */
.cbp-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.cbp-bar .btn,.cbp-bar .chip{min-height:38px}
.cbp-kpis{margin-bottom:10px}
.cbp-odd{color:var(--warn);font-weight:600}
.cbp-cards{display:none}
.cbp-card{margin-bottom:10px;padding:12px}
.cbp-ch{font-weight:600;margin-bottom:8px}
.cbp-mgrid{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:8px}
.cbp-mc{display:flex;flex-direction:column;align-items:center;min-width:44px}
.cbp-msum{font-size:13px;margin-bottom:10px}
.cbp-mact{display:flex;flex-wrap:wrap;gap:8px}
.cbp-mact .btn{flex:1;min-height:44px}
.cbp-log-f{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:10px}
.cbp-log th,.cbp-log td{font-size:12px}
.cbp-hint{margin:6px 0;font-size:12.5px}
@media (max-width:768px){
  #cbp-dt{display:none}
  .cbp-cards{display:block}
}

/* Mua hàng */
.pur-subnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pur-subnav .chip{text-decoration:none;min-height:36px;display:inline-flex;align-items:center}
.pur-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.pur-bar .chip{min-height:36px}
.pur-trk{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pur-line{align-items:end;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.pur-grpick{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.pur-cards{display:none}
.pur-card{margin-bottom:10px;padding:12px}
.pur-ch{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;font-weight:600}
.pur-mgrid{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;font-size:13px}
.pur-mact{display:flex;flex-wrap:wrap;gap:8px}
.pur-mact .btn{flex:1;min-height:44px}
@media (max-width:768px){
  #pur-dt{display:none}
  .pur-cards{display:block}
  .pur-bar .btn,.pur-bar .chip{min-height:42px}
  .pur-mact .btn{min-height:48px}
}

/* ───── 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}
.bm-thumb{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--r);background:var(--panel-2);overflow:hidden;vertical-align:middle;cursor:pointer}
.bm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bm-thumb-cad{cursor:default;opacity:.92}
.bm-thumb-ph{display:inline-block;width:36px;height:36px;border-radius:var(--r);background:var(--panel-2);vertical-align:middle}
@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-bomsheet.css ───── */
/* ============ BẢNG BOM THEO CHI TIẾT (BOM sheet) ============ */
.bs-wrap {
  display: flex;
  gap: 16px;
  align-items: stretch;
  min-height: calc(100vh - 120px);
}

.bs-sidebar {
  width: 320px;
  flex: 0 0 320px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--rad, 8px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bs-side-head {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.bs-side-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 8px;
}

.bs-search-box {
  position: relative;
}

.bs-search-input {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--rad, 6px);
  background: var(--bg);
  color: var(--ink);
  box-sizing: border-box;
}

.bs-parent-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bs-parent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--rad, 6px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  user-select: none;
}

.bs-parent-item:hover {
  background: var(--row-hover);
}

.bs-parent-item.active {
  background: var(--brand-soft);
  border-color: var(--brand);
}

.bs-parent-thumb {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-parent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bs-parent-thumb .ico {
  width: 20px;
  height: 20px;
  color: var(--ink-3);
}

.bs-parent-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bs-parent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.bs-parent-sku {
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bs-parent-badges {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

.bs-badge-child, .bs-badge-wo {
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}

.bs-badge-child {
  background: var(--panel-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}

.bs-badge-wo {
  background: var(--warn-bg, var(--panel-2));
  color: var(--warn-ink, var(--brand));
  border: 1px solid var(--warn, var(--line));
}

.bs-parent-name {
  font-size: 12px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bs-empty-hint {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}

.bs-sheet-container {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--rad, 8px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bs-empty-sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--ink-3);
  text-align: center;
  gap: 12px;
}

.bs-empty-sheet .ico {
  width: 48px;
  height: 48px;
  color: var(--line-2);
}

.bs-empty-text {
  font-size: 14px;
  max-width: 360px;
  line-height: 1.5;
}

/* Toolbar */
.bs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  flex-wrap: wrap;
}

.bs-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bs-parent-img-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
  overflow: hidden;
}

.bs-parent-img-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bs-toolbar-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bs-toolbar-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.bs-title-code {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--f-display, var(--f-mono));
}

.bs-title-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}

.bs-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bs-kit-qty-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bs-kit-qty-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.bs-kit-qty-input {
  width: 72px;
  padding: 5px 8px;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  border: 1px solid var(--line-2);
  border-radius: var(--rad, 4px);
  background: var(--bg);
  color: var(--ink);
}

.bs-table-wrap {
  flex: 1;
  overflow: auto;
}

/* Excel-like BOM sheet table */
.bs-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
}

.bs-table th, .bs-table td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  vertical-align: middle;
}

.bs-tr-group th {
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 8px;
}

.bs-th-sku {
  background: var(--panel-2);
  color: var(--ink);
  text-align: left !important;
  font-size: 13px !important;
}

.bs-th-proc {
  background: var(--brand-soft);
  color: var(--brand-ink, var(--ink));
}

.bs-th-ops {
  background: var(--panel-2);
  color: var(--ink);
}

.bs-tr-cols th {
  position: sticky;
  top: 0;
  background: var(--panel-2);
  z-index: 2;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: left;
  white-space: nowrap;
}

.bs-col-num {
  text-align: center;
  width: 38px;
}

.bs-col-img {
  text-align: center;
  width: 44px;
  padding: 3px !important;
}

.bs-thumb {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bs-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bs-thumb-cad {
  position: relative;
}

.bs-thumb-cad::after {
  content: '3D';
  position: absolute;
  bottom: 1px;
  right: 1px;
  font-size: 8px;
  font-weight: 800;
  background: var(--brand);
  color: var(--on-brand);
  padding: 0 2px;
  border-radius: 2px;
  line-height: 1.1;
}

.bs-col-sku {
  font-family: var(--f-mono);
  font-weight: 600;
  white-space: nowrap;
}

.bs-col-name {
  font-weight: 500;
  min-width: 140px;
}

.bs-col-mat {
  white-space: nowrap;
}

.bs-col-qty {
  text-align: right;
  font-family: var(--f-mono);
  font-weight: 600;
  white-space: nowrap;
}

.bs-col-vendor {
  white-space: nowrap;
}

.bs-col-step {
  white-space: nowrap;
  font-size: 11.5px;
}

.bs-col-need {
  text-align: right;
  font-family: var(--f-mono);
  font-weight: 700;
  white-space: nowrap;
}

.bs-col-stock {
  text-align: right;
  white-space: nowrap;
}

.bs-col-wos {
  text-align: center;
  font-family: var(--f-mono);
  white-space: nowrap;
}

.bs-col-acts {
  text-align: center;
  width: 40px;
}

.bs-need {
  color: var(--brand-ink, var(--ink));
}

.bs-td-empty {
  text-align: center;
  padding: 24px;
  color: var(--ink-3);
}

.bs-lb img {
  max-width: min(92vw, 840px);
  max-height: 88vh;
  object-fit: contain;
  background: var(--panel);
  border-radius: var(--rad, 8px);
}

@media (max-width: 768px) {
  .bs-wrap {
    flex-direction: column;
  }
  .bs-sidebar {
    width: 100%;
    flex: none;
    max-height: 240px;
  }
}

/* ───── src/css/ui-cad-viewer.css ───── */
/* CAD — khung xem độc lập, dùng màu và kiểu chữ chung của ứng dụng.
   Màu cảnh 3D là biến --cadv-* (JS đọc qua getComputedStyle, không viết mã màu trong JS).
   Mô hình + đèn GIỐNG NHAU ở hai giao diện: ảnh thu nhỏ vẽ một lần (nền trong suốt) rồi dùng chung cho mọi người. */
:root{
  --cadv-bg:var(--bg-2); --cadv-model:#9fb5c9; --cadv-sky:#e6f0ff; --cadv-ground:#65606b; --cadv-key:#ffffff; --cadv-fill:#c2dbff;
  --cadv-grid:#778899; --cadv-edge:#23394b; --cadv-bounds:#54b9cb; --cadv-axis-x:#d9534f; --cadv-axis-y:#3f9e63; --cadv-axis-z:#3f7fd6;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --cadv-grid:#8a96a3; --cadv-edge:#0f1a24; --cadv-bounds:#5fd0e2; --cadv-axis-x:#e68c86; --cadv-axis-y:#8dcba5; --cadv-axis-z:#83b7ef;
}}
:root[data-theme="dark"]{
  --cadv-grid:#8a96a3; --cadv-edge:#0f1a24; --cadv-bounds:#5fd0e2; --cadv-axis-x:#e68c86; --cadv-axis-y:#8dcba5; --cadv-axis-z:#83b7ef;
}
.cadv-thumb{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;width:160px;height:120px;padding:0;overflow:hidden;vertical-align:middle;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:radial-gradient(120% 95% at 50% 28%,var(--panel) 0%,var(--bg-2) 72%);color:var(--ink-2);font:500 11px/1.5 var(--f-sans);cursor:pointer;isolation:isolate;transition:border-color .15s,box-shadow .15s,background .15s}
.cadv-thumb:hover{border-color:var(--brand);box-shadow:0 4px 14px color-mix(in srgb,var(--ink) 12%,transparent)}
.cadv-thumb img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .25s ease}
.cadv-thumb:hover img{transform:scale(1.04)}
.cadv-thumb.is-ready .cadv-thumb-caption{opacity:0;transition:opacity .15s}
.cadv-thumb.is-ready:is(:hover,:focus-visible) .cadv-thumb-caption{opacity:1}
.cadv-thumb.is-fresh img{animation:cadv-in .35s ease-out}
@keyframes cadv-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.cadv-thumb-caption{position:absolute;right:6px;bottom:6px;left:6px;padding:2px 5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:var(--r);background:var(--panel);color:var(--ink-2);font-size:10px;text-align:left;pointer-events:none}
.cadv-thumb-error{max-width:130px;padding:0 8px;color:var(--ink-3);font-size:11px;line-height:1.5}
.cadv-thumb .ico{width:22px;height:22px}
.cadv-thumb:focus-visible,.cadv-modal :is(button,a,select,input,canvas):focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.cadv-spinner{display:inline-block;flex:none;width:20px;height:20px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:cadv-spin .8s linear infinite}
@keyframes cadv-spin{to{transform:rotate(360deg)}}
.cadv-modal.ovl,.cadv-modal{position:fixed;inset:0;z-index:9100;display:flex;align-items:stretch;justify-content:stretch;padding:0;background:var(--bg);color:var(--ink);font-family:var(--f-sans);overscroll-behavior:contain}
dialog.cadv-modal{width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;border:0}
dialog.cadv-modal:not([open]){display:none}
.cadv-modal::backdrop{background:var(--bg)}
.cadv-shell{display:flex;flex-direction:column;width:100%;height:100%;height:100dvh;min-width:0;min-height:0;background:var(--bg)}
.cadv-header{display:flex;align-items:center;gap:20px;flex:none;min-height:78px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--panel)}
.cadv-heading{flex:1;min-width:0}
.cadv-title{margin:0;font-size:18px;font-weight:650;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cadv-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:3px;color:var(--ink-3);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.cadv-meta>span:first-child{max-width:min(600px,65vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cadv-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:none;min-height:58px;padding:10px 24px;border-bottom:1px solid var(--line);background:var(--panel)}
.cadv-toolbar-group{display:inline-flex;align-items:center;gap:3px;padding-right:10px;margin-right:4px;border-right:1px solid var(--line)}
.cadv-toolbar-group:last-child{padding-right:0;margin-right:0;border-right:0}
.cadv-modal button,.cadv-modal select,.cadv-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;flex:none;padding:6px 11px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);color:var(--ink-2);font:500 12px/1.5 var(--f-sans);text-decoration:none;cursor:pointer}
.cadv-modal button:hover,.cadv-btn:hover,.cadv-modal select:hover{background:var(--panel-2);border-color:var(--ink-3);color:var(--ink)}
.cadv-modal button:disabled{opacity:.45;cursor:default}
.cadv-modal button:is(.on,[aria-pressed=true]){background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}
.cadv-modal .ico{width:16px;height:16px;flex:none}
.cadv-modal [data-close]{min-width:36px;height:36px}
.cadv-toolbar label{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
.cadv-modal input[type=range]{width:120px;accent-color:var(--brand);cursor:pointer}
.cadv-section{margin-left:auto}
.cadv-workspace{display:grid;grid-template-columns:minmax(0,1fr) 252px;flex:1;min-height:0;min-width:0}
.cadv-stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--bg-2)}
.cadv-stage>canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.cadv-info{min-width:0;overflow-y:auto;padding:22px 20px;background:var(--panel);border-left:1px solid var(--line);font-size:12px;overscroll-behavior:contain}
.cadv-info h3{margin:0 0 18px;font-size:11px;font-weight:650;line-height:1.5;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3)}
.cadv-info h4{margin:22px 0 10px;font-size:12px;font-weight:600;color:var(--ink-2)}
.cadv-info dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 10px;margin:0}
.cadv-info dt{color:var(--ink-3)}
.cadv-info dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.cadv-info p{margin:18px 0 0;color:var(--ink-3);line-height:1.7}
.cadv-info .cadv-note{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);font-size:11px}
.cadv-status{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;text-align:center;background:var(--bg-2);color:var(--ink-2);font-size:13px;line-height:1.6}
.cadv-status[hidden]{display:none}
.cadv-status h3{margin:0;color:var(--ink);font-size:17px;font-weight:600}
.cadv-status p{max-width:420px;margin:0;overflow-wrap:anywhere}
.cadv-status-actions,.cadv-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.cadv-error{display:flex;flex-direction:column;align-items:center;gap:14px}
.cadv-labels{position:absolute;inset:0;z-index:1;pointer-events:none}
.cadv-dim-label{position:absolute;z-index:1;pointer-events:none;white-space:nowrap;padding:3px 7px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);color:var(--ink);font:600 11px/1.5 var(--f-sans);font-variant-numeric:tabular-nums;transform:translate(-50%,-50%)}
.cadv-hint{position:absolute;left:20px;bottom:16px;z-index:1;pointer-events:none;color:var(--ink-3);font-size:11px;line-height:1.6}
.cadv-gizmo{position:absolute;right:18px;bottom:18px;width:78px;height:78px;z-index:1;pointer-events:none}
@media(max-width:900px){
  .cadv-header{padding:12px 16px;min-height:70px}
  .cadv-toolbar{padding:8px 16px;gap:5px}
  .cadv-workspace{grid-template-columns:minmax(0,1fr) 210px}
  .cadv-info{padding:18px 14px}
}
@media(max-width:600px){
  .cadv-header{gap:10px;padding:10px 12px;min-height:70px}
  .cadv-title{font-size:16px}
  .cadv-meta{gap:2px 8px;font-size:11px}
  .cadv-meta>span:first-child{max-width:65vw}
  .cadv-toolbar{padding:8px 10px;gap:5px;max-height:154px;overflow-y:auto}
  .cadv-toolbar-group{padding-right:5px;margin-right:0;gap:2px}
  .cadv-section{margin-left:0}
  .cadv-modal button,.cadv-modal select,.cadv-btn{min-height:36px;padding:7px 9px;font-size:11px}
  .cadv-workspace{display:flex;flex-direction:column}
  .cadv-stage{flex:1;min-height:180px}
  .cadv-info{flex:none;max-height:155px;padding:12px 14px;border-left:0;border-top:1px solid var(--line)}
  .cadv-info h3{margin-bottom:9px;font-size:10px}
  .cadv-info dl{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:7px 10px;font-size:11px}
  .cadv-info p{margin-top:10px;font-size:11px}
  .cadv-hint{left:12px;bottom:10px;max-width:calc(100% - 100px);font-size:10px}
  .cadv-gizmo{right:10px;bottom:10px;width:64px;height:64px}
}
@media(prefers-reduced-motion:reduce){.cadv-spinner{animation:none;border-style:dotted}.cadv-thumb,.cadv-thumb img{transition:none}.cadv-thumb.is-fresh img{animation:none}}

/* Ảnh CAD ở nơi khác (đặt cùng file trình xem): cột Ảnh danh mục, vùng thả tệp tab Hồ sơ kỹ thuật, ngăn CAM */
.it-thumb.it-thumb-cad{position:relative;background:radial-gradient(120% 95% at 50% 28%,var(--panel) 0%,var(--bg-2) 72%)}
.it-thumb.it-thumb-cad img{object-fit:cover;transform:scale(1.15)}   /* ảnh 4:3 trong ô vuông 40px: lấp đầy, mô hình nằm giữa */
.it-thumb-cad .it-thumb-tag{position:absolute;right:1px;bottom:1px;padding:0 3px;border-radius:3px;background:var(--panel);color:var(--ink-3);font:700 8px/1.4 var(--f-sans);letter-spacing:.3px;pointer-events:none}
.it-cad-drop{position:relative;border-radius:var(--r-lg)}
.it-cad-up{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 0 10px}
.it-cad-hint{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);font-size:12px;line-height:1.5}
.it-cad-hint .ico{width:14px;height:14px}
.it-cad-veil{position:absolute;inset:-6px;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--brand);border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--brand-soft) 88%,transparent);color:var(--brand-ink);font:600 14px/1.5 var(--f-sans);text-align:center;pointer-events:none}
.it-cad-veil .ico{width:26px;height:26px}
.it-cad-veil small{font-weight:500;font-size:12px;color:var(--ink-2)}
.it-cad-drop.is-drag .it-cad-veil,.it-cad-drop.is-busy .it-cad-veil{display:flex}
.it-cad-drop.is-busy .it-cad-veil{border-style:solid}
.it-cad-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 12px;border:1px dashed var(--line-2);border-radius:var(--r-lg);color:var(--ink-3);font-size:13px;line-height:1.5;text-align:center}
.it-cad-empty .ico{width:24px;height:24px}
tr.it-cad-new>td{animation:it-cad-flash 2.4s ease-out}
@keyframes it-cad-flash{from{background:color-mix(in srgb,var(--brand-soft) 90%,transparent)}to{background:transparent}}
.cam-cad{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.cam-cad .cadv-thumb{width:240px;height:180px}
.cam-cad-meta{display:flex;flex-direction:column;gap:6px;min-width:200px;flex:1;font-size:13px;line-height:1.5}
.cam-cad-meta .cam-cad-file{font-weight:600;overflow-wrap:anywhere}
.cam-cad-note{color:var(--ink-3);font-size:12px;line-height:1.5}
.cam-cad-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
@media(prefers-reduced-motion:reduce){tr.it-cad-new>td{animation:none}}

/* ───── 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-dash.css ───── */
/* ═══════════ BẢNG ĐIỀU HÀNH TUỲ CHỈNH (src/views/dash.js) ═══════════
   Lưới 3 cột: khối full = hết hàng · wide = 2/3 · narrow = 1/3. Thứ tự + bật/tắt theo người (ui.prefs 'dashboard').
   Mỗi khối có nút phóng to (phủ vùng nội dung, Esc để thu) và nút ẩn ở cuối hàng tiêu đề. */
.dw-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 12px}
.dw-bar-n{font-size:12px;color:var(--ink-3)}
.dw-bar .btn .ico{margin-right:5px}

.dw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;grid-auto-flow:row dense;align-items:stretch}
.dw{min-width:0;display:flex;flex-direction:column}
.dw-full{grid-column:1/-1}
.dw-wide{grid-column:span 2}
.dw>.card{margin:0;flex:1;min-width:0}
.dw .card .tw{overflow-x:auto}
.dw .line{overflow-x:auto;padding-bottom:6px}
.dw-none{grid-column:1/-1}
/* Chỉ số chính: hàng hết bề rộng thì 4 ô một hàng (khối hẹp giữ 2×2) */
.dw-full .dash-kpis,.dw-wide .dash-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){
  .dw-grid{grid-template-columns:minmax(0,1fr)}
  .dw-wide,.dw-narrow{grid-column:1/-1}
}

/* Nút trên khối: chèn đầu .card-h, order đẩy về cuối hàng (sau các nút riêng của khối) */
.dw-tools{order:99;flex:none;display:inline-flex;gap:2px;margin-left:2px}
.dw-b{width:26px;height:26px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:var(--r);
  background:none;color:var(--ink-3);cursor:pointer}
.dw-b:hover{background:var(--panel-2);border-color:var(--line);color:var(--brand-ink)}
.dw-b[data-dw-hide]:hover{color:var(--crit-ink)}
.dw-b .ico{width:14px;height:14px;vertical-align:0}

/* Khối hẹp (1/3 hàng): dòng việc xếp dọc, điểm đứt một cột — chỉ khi lưới còn 3 cột */
@media (min-width:1181px){
  .dw-narrow .todo{flex-direction:column;align-items:stretch;gap:8px}
  .dw-narrow .td-hit{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 10px;align-items:start}
  .dw-narrow .td-go{grid-column:2;justify-self:start;line-height:1.4}
  .dw-narrow .todo>.btn{align-self:flex-start;margin-left:40px}
  .dw-narrow .fl-wrap{grid-template-columns:1fr}
  .dw-narrow .fl-row b{max-width:40%}
}

/* Phóng to: phủ vùng nội dung (chừa thanh bên --dw-l và thanh trên), cuộn trong khối.
   z-index dưới thanh trên (40) để menu thả xuống của thanh trên vẫn nổi lên trên. */
.dw.dw-max{position:fixed;top:var(--toph);left:var(--dw-l,0px);right:0;bottom:0;z-index:39;
  padding:16px 22px;background:var(--bg);overflow:auto;overscroll-behavior:contain}
.dw.dw-max>.card{flex:1 0 auto}
.dw.dw-max .card-h{position:sticky;top:-16px;z-index:3;background:var(--panel);margin:-16px -18px 12px;padding:14px 18px 10px;
  border-bottom:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0}
.dw.dw-max [data-dw-max]{color:var(--brand-ink);background:var(--brand-soft)}
body.dw-maxed{overflow:hidden}

/* Ngăn Tuỳ chỉnh: danh sách khối, công tắc + kéo thả + ↑↓ */
.dwc-hs{margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--ink-3)}
.dwc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dwc-i{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 6px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.dwc-i.off{background:var(--panel-2)}
.dwc-i.off b{color:var(--ink-3);font-weight:500}
.dwc-i.drag{opacity:.5;border-style:dashed;border-color:var(--brand)}
.dwc-grip{flex:none;display:grid;place-items:center;width:20px;color:var(--ink-3);cursor:grab}
.dwc-l{flex:1;min-width:0;display:flex;align-items:center;gap:10px;cursor:pointer}
.dwc-l>span{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.dwc-l b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dwc-l small{font-size:11px;color:var(--ink-3)}
/* Công tắc: checkbox role=switch */
.dwc-sw{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:32px!important;height:18px!important;margin:0;
  border:0;border-radius:9px;background:var(--line-2);cursor:pointer;transition:background .15s}
.dwc-sw::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.dwc-sw:checked{background:var(--brand-solid)}
.dwc-sw:checked::after{transform:translateX(14px)}
.dwc-sw:focus-visible{outline:2px solid var(--brand);outline-offset:2px;box-shadow:none}
.dwc-mv{flex:none;width:26px;height:26px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);color:var(--ink-2);cursor:pointer}
.dwc-mv:hover:not(:disabled){border-color:var(--brand);color:var(--brand-ink)}
.dwc-mv:disabled{opacity:.35;cursor:default}
.dwc-mv.up .ico{transform:rotate(180deg)}
.dwc-mv .ico{width:14px;height:14px;vertical-align:0}
.dr-ft [data-dwc-reset]{margin-right:auto}
.dr-ft [data-dwc-reset] .ico{margin-right:5px}

@media (max-width:720px){
  .dw .line{grid-template-columns:minmax(0,1fr)!important;gap:10px}
  .dw .lstep:not(:last-child)::after{display:none}
  .dw .card{padding:14px}
  .dw .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dw.dw-max{left:0;padding:10px}
}

/* ───── 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: hiển thị 1 dòng gọn gàng, xem đủ trong title. */
table.dt .pv-x{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;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 1 dòng; cột Phải xử lý 1 dòng để không đẩy cột khác ra ngoài */
table.dt .pv-clamp{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;display:inline-block;vertical-align:middle;line-height:1.35}
table.dt .pv-x.pv-x-d{min-width:auto;max-width:none}
table.dt .pv-i{font-size:12px;line-height:1.5;white-space:nowrap}
table.dt .pv-i span{font-size:12px}

/* ── Bảng con dt-sub (ngăn kéo, ô bento) ──
   Bảng có cột đầu ghim trái (vd bảng dòng vật tư: style inline position:sticky;left:0;z-index:1) mà các ô tiêu đề
   khác cũng sticky z-index:1 → khi cuộn ngang, ô tiêu đề sau đè lên ô tiêu đề cột đầu: mất chữ "Vật tư", tiêu đề lệch
   với dữ liệu. Ô tiêu đề cột ghim luôn nằm trên, cùng nền với hàng tiêu đề; có bóng mép phải cho thấy đang ghim. */
table.dt-sub thead th{z-index:2}
table.dt-sub thead th[style*="sticky"]{z-index:3 !important;background:var(--panel-2) !important}
table.dt-sub th[style*="sticky"],table.dt-sub td[style*="sticky"]{box-shadow:4px 0 8px -6px var(--line-2)}
table.dt-sub tbody tr:hover td[style*="sticky"]{background:linear-gradient(var(--row-hover),var(--row-hover)),var(--panel) !important}

/* ───── 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-c-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dk-go{min-width:112px}
/* Thẻ khoá ẩn sau công tắc có đếm; thẻ vừa báo mờ đi trong 8 giây hoàn tác */
.dk-cards{display:flex;flex-direction:column;gap:10px}
.dk-lk-t{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;padding:0 14px;border-radius:var(--r-lg);
  border:1px dashed var(--line-2);background:transparent;color:var(--ink-2);font:600 14px/1.2 var(--f-sans);cursor:pointer}
.dk-lk-t:hover{border-color:var(--brand);color:var(--ink)} .dk-lk-t .ico{width:18px;height:18px}
.dk-lk-t:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.dk-card.dk-just{opacity:.5;transition:opacity .3s}
.dk-undo{flex:none;min-width:120px}

.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:minmax(0,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}
/* Tiêu đề có trần bề ngang: tên dài thì xuống dòng 2 + cắt "…" (đủ chữ ở title=), KHÔNG ép hàng tab hẹp tới mức xén nhãn */
.drawer .dr-hd .dr-ttl{grid-column:1;display:flex;align-items:center;gap:2px 8px;font:600 15px/1.4 var(--f-sans);padding:10px 0;min-width:0;max-width:min(420px,34vw)}
.drawer .dr-hd .dr-badge{display:block;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.5}
.drawer .dr-hd .dr-badge>.pill{vertical-align:1px}
.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.
   Căn giữa bằng margin:auto ở tab đầu/cuối (không dùng justify-content:center): khi tràn, margin về 0 nên tab đầu
   KHÔNG bị đẩy ra ngoài mép trái (lỗi cũ: "Routing" chỉ còn "ting"). Mép mờ fade-l/fade-r do drawer.js bật khi còn chữ khuất. */
.dr-tabs{display:flex;gap:4px;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-x:contain}
.dr-tabs::-webkit-scrollbar{display:none}
.dr-tabs>button:first-child{margin-left:auto}
.dr-tabs>button:last-child{margin-right:auto}
.dr-tabs.fade-l{-webkit-mask-image:linear-gradient(to right,transparent,black 28px);mask-image:linear-gradient(to right,transparent,black 28px)}
.dr-tabs.fade-r{-webkit-mask-image:linear-gradient(to left,transparent,black 28px);mask-image:linear-gradient(to left,transparent,black 28px)}
.dr-tabs.fade-l.fade-r{-webkit-mask-image:linear-gradient(to right,transparent,black 28px,black calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,black 28px,black calc(100% - 28px),transparent)}
@media (prefers-reduced-motion:reduce){.dr-tabs{scroll-behavior:auto}}
/* Tab không vừa một hàng với tiêu đề + nút (drawer.js bật dr-tabrow): tab xuống hàng 2, canh trái, đủ nhãn. Điện thoại có bố cục riêng bên dưới. */
@media (min-width:901px){
  .drawer.dr-tabrow .dr-hd{grid-template-columns:minmax(0,1fr) auto auto}
  .drawer.dr-tabrow .dr-hd .dr-ttl{grid-column:1;grid-row:1;max-width:none}
  .drawer.dr-tabrow .dr-hd .dr-acts{grid-column:2;grid-row:1}
  .drawer.dr-tabrow .dr-hd .dr-tools{grid-column:3;grid-row:1}
  .drawer.dr-tabrow .dr-hd .dr-tabs{grid-column:1/-1;grid-row:2;margin:0 -12px 0 -16px;padding:0 8px;border-top:1px solid var(--line)}
  .drawer.dr-tabrow .dr-tabs>button:first-child{margin-left:0}
  .drawer.dr-tabrow .dr-tabs>button:last-child{margin-right:0}
  .drawer.dr-tabrow .dr-tabs button{min-height:40px}
}
.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-ttl{max-width:none}
  .dr-tabs>button:first-child{margin-left:0}
  .dr-tabs>button:last-child{margin-right:0}
  .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}}
/* Ngăn lệnh — tầng tổ (wo.js) */
.wo-tl{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.wo-tl-row{display:block;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);cursor:pointer;color:var(--ink)}
.wo-tl-row b{color:inherit}
.wo-tl-row:hover{border-color:var(--info);background:var(--panel-2)}
.wo-tl-row.wo-tl-hold{border-color:var(--warn);box-shadow:inset 3px 0 0 var(--warn)}
.wo-tl-row.wo-tl-sum{opacity:.92}
.wo-tl-main{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wo-tl-sub{font-size:12px;margin-top:4px}
.wo-tl-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;margin-top:6px;align-items:center}
.wo-tl-re{font-size:11.5px;margin-top:4px;color:var(--crit-ink)}
.wo-th-int{margin-top:8px;font-size:12.5px}
.wo-tb-crumb{margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dr-body>.wo-tb-crumb-sticky{position:sticky;top:0;z-index:3;margin:0 -14px 10px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 4px 12px color-mix(in srgb,var(--ink) 6%,transparent)}
.dr-fold-sum-hint{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dr-fold-sum-hint>.hint-b{flex:none}

/* ───── 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-items.css ───── */
/* Màn Danh mục (items): ảnh thumbnail + lightbox xem lớn */
.it-thumb-ph{display:inline-block;width:40px;height:40px;border-radius:var(--rad,6px);background:var(--soft);vertical-align:middle}
.it-thumb{display:inline-flex;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:var(--rad,6px);overflow:hidden;background:var(--soft);cursor:pointer;vertical-align:middle}
.it-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.it-lb{position:fixed;inset:0;z-index:9000;background:color-mix(in srgb,var(--nav-bg) 82%,transparent);display:flex;align-items:center;justify-content:center;padding:24px}
.it-lb img{max-width:min(92vw,720px);max-height:88vh;object-fit:contain;border-radius:var(--rad,8px);box-shadow:var(--sh,0 8px 32px rgba(0,0,0,.35))}
.it-lbx{position:absolute;top:16px;right:16px}
/* Hồ sơ kỹ thuật (tab CAD / ước tính) */
.it-sm{font-size:12px}
.it-cad-cur td{background:color-mix(in srgb,var(--ok-bg) 35%,transparent)}
.it-cad-sub{font-size:12.5px;font-weight:600;margin:8px 0 4px;color:var(--ink-2)}
.it-cad-act{white-space:nowrap}
.it-cam-outdated td{background:color-mix(in srgb,var(--warn-bg) 40%,transparent)}
.it-est-warn{margin-bottom:10px}

/* ───── src/css/ui-khoi-tao.css ───── */
/* ui-khoi-tao.css */
.kt { max-width: 820px; margin: 0 auto; padding: 16px 16px 96px; }
.kt-head { margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.kt-progress { flex: 1; min-width: 0; }
.kt-save { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.kt-prog { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.kt-prog-bar { flex: 1; height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; min-width: 0; }
.kt-prog-bar i { display: block; height: 100%; background: var(--brand); transition: width .2s; }
.kt-body { min-height: 280px; }
.kt-modes { display: flex; gap: 8px; margin-bottom: 12px; justify-content: flex-start; flex-wrap: wrap; }
.kt-modes .btn.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.kt-q h2.kt-hoi { font-size: 22px; font-weight: 700; margin: 0 0 8px; text-align: left; }
.kt-gt { color: var(--ink-2); margin: 0 0 20px; text-align: left; font-size: 15px; }
.kt-in input { width: 100%; padding: 12px 14px; font-size: 17px; border: 1px solid var(--line); border-radius: 8px; }
.kt-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.kt-opt { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; text-align: center; font-size: 16px; font-weight: 500; }
.kt-opt.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.kt-grid { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kt-excel { margin-top: 14px; }
.kt-subh { margin: 18px 0 6px; font-size: 15px; color: var(--ink-2); }
.kt-lbl { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }
.kt-wsblk { margin-bottom: 16px; }
.kt-wsblk h4 { margin: 0 0 6px; font-size: 15px; color: var(--ink-2); }
.kt-ai-chat, .kt-file-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; margin-top: 20px; }
.kt-file-box { border-style: dashed; margin-bottom: 12px; margin-top: 0; }
.kt-ai-chat-h { font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.kt-ai-row { display: flex; gap: 8px; align-items: flex-end; }
.kt-ai-text { width: 100%; min-height: 64px; flex: 1; padding: 10px 12px; font-size: 15px; border: 1px solid var(--line); border-radius: var(--r-lg); box-sizing: border-box; resize: vertical; }
.kt-tpl-list { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.kt-tpl-list-h { font-weight: 600; margin-bottom: 8px; }
.kt-tpl-rows { display: flex; flex-direction: column; gap: 6px; }
.kt-tpl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.kt-tpl-row:last-child { border-bottom: 0; }
.kt-foot { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; border-top: 1px solid var(--line); }
.kt-foot-in { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.kt-sum { display: grid; gap: 8px; }
.kt-sum-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; }
.kt-sum-row .bad { color: var(--crit); }
.kt-sum-row .ok { color: var(--ok); }
.kt-sum-row .warn { color: var(--warn); }
.kt-sum-row .info { color: var(--info); }
.kt-find-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.kt-find-row .btn { margin-left: auto; flex-shrink: 0; }
.kt-sum-errs { display: block; width: 100%; margin-top: 4px; color: var(--ink-2); }
.kt-pw { margin-top: 12px; }
.card.empty.kt-empty { text-align: center; padding: 20px 16px; }
.card.empty.kt-empty .btn { margin-top: 10px; }
@media (max-width: 900px) {
  .kt { padding: 12px 12px 80px; }
  .kt-q h2.kt-hoi { font-size: 20px; }
  .kt-opts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kt { padding-bottom: 150px; }
  .kt-foot-in { display: grid; grid-template-columns: 1fr 1fr; }
  .kt-foot-in .btn.pri { grid-column: 1 / -1; }
}

/* ───── src/css/ui-kt-bang.css ───── */
/* KtBang — bảng sửa tại chỗ / ma trận / Excel cho Khởi tạo */
.kt-grid { display: flex; flex-direction: column; gap: 8px; }
.kt-tbl { width: 100%; }
.kt-c { position: relative; }
.kt-c input, .kt-c select { width: 100%; box-sizing: border-box; }
.kt-bad { background: var(--crit-soft); }
.kt-wrn { background: var(--warn-soft); }
.kt-err { display: block; font-size: 11px; color: var(--crit); margin-top: 2px; }
.kt-src { white-space: nowrap; }
.kt-chip { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 999px; margin-right: 4px; }
.kt-chip-mau { background: var(--info-soft); color: var(--info); }
.kt-chip-file { background: var(--ok-soft); color: var(--ok); }
.kt-empty { text-align: center; padding: 12px; color: var(--ink-2); }
.kt-matrix { overflow: auto; }
.kt-mtbl { width: 100%; }
.kt-mcell { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.kt-mcell.on { background: var(--brand); color: var(--on-brand); }
.kt-mlabel { text-align: left; }
.kt-mlabel small { display: block; color: var(--ink-2); font-size: 11px; }
.kt-excel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kt-excel .btn[disabled], .kt-excel label.btn[disabled] { opacity: .55; pointer-events: none; }
.kt-status { font-size: 12px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.kt-status.bad { color: var(--crit); }

/* ───── 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) — #/workshop-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-order-peek.css ───── */
/* Thẻ xem nhanh đơn hàng (src/ui/order-peek.js) — nổi trên ngăn lệnh */
.opk-ovl .modal{width:min(640px,100%)}
.opk{padding-top:16px}
.opk-hd{display:flex;align-items:center;gap:8px;padding-right:36px;font-size:16px}
.opk-sw{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 2px;font-size:12px}
.opk-chip{border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);border-radius:999px;padding:2px 10px;font:inherit;font-family:var(--f-mono,monospace);cursor:pointer}
.opk-chip.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.opk-kv{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:4px 10px;margin:12px 0;font-size:13px;align-items:baseline}
.opk-kv>span{color:var(--ink-3)}
.opk-sum{margin:0 0 8px;padding:8px 10px;border-radius:8px;background:var(--ok-soft);color:var(--ok-ink);font-size:13px}
.opk-tw{max-height:46vh;overflow:auto}
.opk-nm{font-size:10.5px}
.opk tr.opk-exact td,.opk tr.opk-model td{background:var(--ok-soft)}
.opk tr.opk-exact td:first-child,.opk tr.opk-model td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.opk tr.opk-size td{background:var(--warn-soft)}
.opk tr:not(.opk-exact):not(.opk-model):not(.opk-size) td{color:var(--ink-3)}
.opk-pos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:12px}
.opk-po{border:1px solid var(--line-2);border-radius:6px;padding:2px 8px;font-family:var(--f-mono,monospace);color:var(--ink-2);text-decoration:none}
.opk-po i{font-style:normal;color:var(--ink-3);font-family:var(--f-sans,sans-serif)}
.opk-po.on{border-color:var(--ok);background:var(--ok-soft);color:var(--ok-ink);font-weight:600}
.opk-ft{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
a.ent-code.opk-link{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
@media (max-width:560px){.opk-kv{grid-template-columns:auto 1fr}}

/* ───── src/css/ui-order-tracking.css ───── */
/* ============ THEO DÕI ĐƠN HÀNG (src/views/order-tracking.js) ============
   Bảng kiểu Excel: khung cuộn hai chiều riêng (.ot-scroll) để tiêu đề + hàng Tổng dính trên, cột trái dính trái.
   Bề ngang cột cố định (colgroup + table-layout:fixed) nên vị trí left của cột dính tính sẵn trong JS, không cần đo. */
.ot{min-width:0}
.ot-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.ot-ttl{margin:0;font-size:17px}
.ot-compact .ot-ttl{font-size:14px}
.ot-upd,.ot-cnt{font-size:12.5px;color:var(--ink-2)}
.ot-compact .ot-hd .btn{margin-left:auto}

/* thanh lọc */
.ot-bar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:0 0 8px}
.ot-chips{display:flex;flex-wrap:wrap;gap:4px;align-self:center}
.ot-chip{height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:14px;background:var(--panel);color:var(--ink-2);
  font:inherit;font-size:12.5px;cursor:pointer}
.ot-chip b{font-weight:600;color:var(--ink-3);margin-left:2px}
.ot-chip.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}
.ot-chip.on b{color:var(--brand-ink)}
.ot-f{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--ink-2)}
.ot-f select,.ot-f input{height:28px;min-width:120px}
.ot-fq input{min-width:180px}
.ot-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}

/* chọn cột (kiểu 字段配置) */
.ot-colsp{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--panel);padding:10px 12px;margin:0 0 8px;
  display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,3fr);gap:8px 20px}
.ot-colsp[hidden]{display:none}
.ot-cp-g{display:flex;flex-direction:column;gap:3px;min-width:0}
.ot-cp-g>b{font-size:12px;color:var(--ink-2);margin-bottom:2px}
.ot-cb{display:flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer}
.ot-cp-skus{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:2px 10px;max-height:180px;overflow:auto;margin-top:4px;
  padding-top:4px;border-top:1px solid var(--line)}
.ot-cp-ft{grid-column:1/-1}

/* khung cuộn + bảng */
.ot-scroll{position:relative;overflow:auto;max-height:calc(100vh - 250px);min-height:200px;border:1px solid var(--line-2);
  border-radius:var(--r-lg);background:var(--card);overscroll-behavior:contain}
.ot-scroll:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ot-compact .ot-scroll{max-height:420px;min-height:120px}
table.t.grid.ot-t{border:0;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:12.5px;max-width:none}
table.t.grid.ot-t th,table.t.grid.ot-t td{box-sizing:border-box;padding:4px 6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
/* main.css dính cột đầu của mọi t grid; ở đây cột dính do .ot-pin quyết định */
table.t.grid.ot-t th:first-child,table.t.grid.ot-t td:first-child{position:sticky;left:0}
.ot-t thead th{position:sticky;top:0;z-index:3;background:var(--panel-2);color:var(--ink-2);font-weight:600;font-size:12px}
/* độ ưu tiên cao hơn luật first-child của main.css: góc trái trên (dính hai chiều) phải nằm TRÊN mọi ô khác */
.ot-t thead tr.ot-h1 th.ot-l{vertical-align:bottom;white-space:normal}
.ot-t thead tr.ot-h2 th{top:var(--ot-h1,36px);border-bottom:2px solid var(--line-2)}
table.t.grid.ot-t td.ot-pin{position:sticky;z-index:2;background:var(--card)}
table.t.grid.ot-t thead th.ot-pin{position:sticky;z-index:5;background:var(--panel-2)}
.ot-t .ot-pin-last{box-shadow:inset -2px 0 0 var(--line-2)}
.ot-t tbody tr:hover td{background:var(--row-hover)}
table.t.grid.ot-t tbody tr:hover td.ot-pin{background:var(--bg-2)}

/* tiêu đề SKU: ảnh + mã */
table.t.grid.ot-t th.ot-s{text-align:center;vertical-align:bottom;white-space:normal;padding:4px 3px}
.ot-ph{display:flex;align-items:center;justify-content:center;width:100%;height:58px;margin:0 0 3px;border-radius:var(--r);
  background:var(--panel);overflow:hidden;color:var(--ink-3)}
.ot-ph img{width:100%;height:100%;object-fit:contain}
.ot-ph .ico{width:20px;height:20px;opacity:.45}
.ot-compact .ot-ph{height:40px}
.ot-code{display:block;font-size:11px;font-weight:700;color:var(--ink);word-break:break-all;line-height:1.2}

/* hàng Tổng — chữ đỏ như Excel */
.ot-t thead th.ot-tot,.ot-t thead th.ot-totl{color:var(--crit-ink);font-weight:700;font-size:12.5px}
.ot-t th.ot-tot{text-align:center}
.ot-t th.ot-totl{text-align:left}

/* ô */
.ot-t td.ot-c-no{text-align:right;color:var(--ink-3)}
table.t.grid.ot-t td.ot-q{text-align:center;padding:0}
.ot-qb{display:block;width:100%;min-height:28px;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;
  font-variant-numeric:tabular-nums}
.ot-qb:hover,.ot-qb:focus-visible{background:var(--brand-soft);color:var(--brand-ink)}
.ot-no{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--link);cursor:pointer;max-width:100%;
  overflow:hidden;text-overflow:ellipsis}
.ot-no:hover{text-decoration:underline}
.ot-t td.ot-ed{cursor:text}
.ot-t td.ot-ed:hover,.ot-t td.ot-ed:focus-visible{box-shadow:inset 0 0 0 1px var(--line-2)}
table.t.grid.ot-t td.is-edit{padding:1px 2px;overflow:visible}
.ot-in{width:100%;height:26px;padding:0 4px;font-size:12.5px}
.ot-t .pill{font-size:11px;padding:1px 6px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ot-empty{text-align:center;color:var(--ink-3);padding:24px !important}

/* toàn màn hình (Esc để thu) */
.ot.is-full{position:fixed;inset:0;z-index:60;background:var(--bg);padding:12px 16px;display:flex;flex-direction:column}
.ot.is-full .ot-scroll{max-height:none;flex:1 1 auto}
body.ot-noscroll{overflow:hidden}

/* xem lệnh của ô SKU */
.ot-m-h{margin:0 0 4px;font-size:15px}
.ot-pos{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ot-pos li{display:flex;flex-wrap:wrap;align-items:center;gap:6px}

@media (max-width:700px){
  .ot-bar{gap:6px}
  .ot-f{flex:1 1 44%}
  .ot-f select,.ot-f input,.ot-fq input{min-width:0;width:100%}
  .ot-acts{margin-left:0}
  .ot-acts [data-act="full"] span{display:none}
  .ot-scroll{max-height:calc(100vh - 170px)}
  .ot-colsp{grid-template-columns:1fr}
  .ot.is-full{padding:8px}
}

/* ───── 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-plan-cnc.css ───── */
/* Cân đối nhu cầu — xưởng CNC (src/views/plan-cnc.js). Chỉ dùng biến màu có sẵn: sáng/tối tự theo. */
.pc{min-width:0}
/* Thanh tham số: một hàng, xuống dòng khi hẹp */
.pc-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin-bottom:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.pc-bar .sp{flex:1}
.pc-lb{font-size:12px;font-weight:600;color:var(--ink-2)}
.pc-f{display:inline-flex;align-items:center;gap:8px;min-width:0}
.pc-bar input[type=date],.pc-bar select{height:var(--h-input);min-width:0}
.pc-bar select{max-width:280px}
.pc-bar .btn .ico{width:15px;height:15px;vertical-align:-2.5px;margin-right:3px}
.pc-busy .spin{vertical-align:middle}

/* KPI: cùng kiểu ô ở kế hoạch tổng thể (.mps-kpis) */
.pc-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px}
.pc-kpi .kpi{display:block;text-align:left;font:inherit;color:inherit;cursor:pointer;min-width:0;
  border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--panel);transition:border-color .12s}
.pc-kpi .kpi:hover{border-color:var(--brand)}
.pc-kpi .kpi:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pc-kpi .kpi .kl{justify-content:flex-start}
.pc-kpi .kpi .kv{font-size:24px}
.pc-kpi .kpi .ks{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-of{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:2px}
.pc-crit,.pc-kpi .kv.pc-crit{color:var(--crit-ink)}
.pc-ok{color:var(--ok-ink)}
.pc-ok .ico{width:14px;height:14px;vertical-align:-2px}
.pc-zero{color:var(--ink-3)}
.pc-late{color:var(--crit-ink);font-weight:600}

/* Cảnh báo một dòng (chi tiết trong dấu (!)) */
.pc-warn{position:relative;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--warn-ink);
  background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:var(--r);padding:6px 10px 6px 32px;margin-bottom:10px}
.pc-warn>.ico{position:absolute;left:10px;top:9px;width:15px;height:15px}
.pc-warn .pc-dot{color:var(--ink-3)}
.pc-wa{margin-left:auto;color:var(--link);font-weight:600;text-decoration:none}
.pc-wa:hover{text-decoration:underline}
/* SKU chưa có BOM: một dòng chữ nhỏ xám, phụ (dòng của chúng ẩn ở cuối bảng) */
.pc-nb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);margin:-2px 0 10px 2px}
.pc-nb .pc-wa{margin-left:6px;font-weight:500}

/* Dòng chưa đủ dữ liệu (ẩn mặc định, bật ở nút dưới bảng): mờ, ở cuối */
/* mờ phần chữ, không mờ nền ô (cột mã dính trái vẫn che nội dung cuộn ngang) */
.pc tr.pc-x>td{color:var(--ink-3)}
.pc tr.pc-x>td>*{opacity:.6}
.pc tr.pc-x:hover>td>*{opacity:.9}
.pc-more{display:flex;align-items:center;gap:4px;min-height:0;margin-top:8px}
.pc-more:empty{display:none}
.pc-more-b{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12.5px;color:var(--ink-2);background:none;
  border:1px dashed var(--line-2);border-radius:var(--r);padding:4px 10px;cursor:pointer}
.pc-more-b:hover{color:var(--ink);border-color:var(--ink-3);background:var(--row-hover)}
.pc-more-b:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pc-more-b .ico{width:14px;height:14px;transition:transform .12s}
.pc-more-b[aria-expanded="true"] .ico{transform:rotate(180deg)}
.pc-tree-0{text-align:center;padding:16px}

/* Tab */
.pc-tabs{margin-bottom:12px}
.pc-tabs>button{display:inline-flex;align-items:center;min-width:0}
.pc-tl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-tn{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.pc-tn.crit{background:var(--crit-soft);color:var(--crit-ink);border-color:var(--crit-soft);margin-left:4px}
.pc-body{min-width:0}
.pc-pane[hidden]{display:none}
.pc-empty{padding:28px 12px;text-align:center;color:var(--ink-3);background:var(--panel);border:1px dashed var(--line-2);border-radius:var(--r)}

/* Bảng: ô số bấm được, ô SL lập lệnh */
.pc .dt-bulk{display:none!important}           /* thanh hàng loạt riêng: .pc-act dính đáy */
.pc .dt-bar[hidden]{display:flex!important}   /* giữ thanh công cụ khi chọn dòng: bảng không nhảy */
.pc-lnk{font:inherit;font-variant-numeric:tabular-nums;color:var(--link);background:none;border:0;padding:0 2px;cursor:pointer;
  border-bottom:1px dashed var(--line-2);border-radius:0}
.pc-lnk:hover{border-bottom-color:var(--link)}
.pc-lnk:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.pc-name{display:inline-block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
tr.pc-short td.pc-netc{background:var(--crit-soft)}
.pc-qi{display:inline-flex;align-items:center;gap:3px}
.pc-q{width:76px;height:26px;padding:0 6px;text-align:right;font-variant-numeric:tabular-nums;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);color:var(--ink)}
.pc-q::placeholder{color:var(--ink-3)}
.pc-q:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.pc-q.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.pc-q.bad{border-color:var(--crit);background:var(--crit-soft)}
.pc-eq{min-width:26px;padding:0 6px;font-weight:600}
.pc-st{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.pc-draft td{color:var(--ink-3)}
.pc-note{font-size:11.5px;white-space:normal}

/* Cây BOM */
.pc-tree-bar{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.pc-tree-w{max-height:70vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.pc-tree{width:100%}
.pc-tree th{position:sticky;top:0;z-index:1;background:var(--panel-2)}
.pc-tree td{white-space:nowrap}
.pc-tree th.n,.pc-tree td.n{width:120px}
.pc-tree th:nth-child(3),.pc-tree td:nth-child(3){width:110px}
.pc-tree td:nth-child(2){width:40%}
.pc-tree tr.d0 td{font-weight:600;background:var(--panel-2)}
.pc-ind{display:inline-flex;align-items:center;gap:4px;padding-left:calc(var(--d, 0) * 20px)}
.pc-tw{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;background:none;
  color:var(--ink-2);cursor:pointer;border-radius:var(--r)}
.pc-tw:hover{background:var(--row-hover);color:var(--ink)}
.pc-tw .ico{width:14px;height:14px;transition:transform .12s}
.pc-tw[aria-expanded="true"] .ico{transform:rotate(90deg)}
.pc-tw-sp{display:inline-block;width:20px}

/* Popover */
.pop.pc-pop{width:min(420px,calc(100vw - 16px))}
.pc-pop .pop-hd b{flex:1;min-width:0}
.pc-pop-x{margin-left:auto;padding:0 6px}
.pc-pop p{margin:4px 0}
.pc-pop-t{max-height:300px;overflow:auto}
.pc-cut{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-m-t{max-height:46vh;overflow:auto;margin-bottom:12px}
.pc-mq{width:96px}

/* Thanh hành động dính đáy — chỉ hiện khi có dòng được chọn */
.pc-act{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding:10px 12px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 -4px 14px var(--grid)}
.pc-act[hidden]{display:none}
.pc-act .sp{flex:1}
.pc-act .btn .ico{width:15px;height:15px;vertical-align:-2.5px;margin-right:3px}
.pc-act-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;font-size:13px}
.pc-act-s{font-size:12px}

@media(max-width:1100px){.pc-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .pc-bar{padding:8px}
  .pc-bar .sp{display:none}
  .pc-bar select{max-width:100%;flex:1 1 160px}
  .pc-kpi{gap:8px}
  .pc-kpi .kpi{padding:8px 10px}
  .pc-kpi .kpi .kv{font-size:20px}
  .pc-name{max-width:150px}
  .pc-f{flex-wrap:wrap}
  /* 4 tab vừa màn: lưới 2×2, ẩn số đếm tổng (giữ số thiếu đỏ) */
  .pc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 4px}
  .pc-tabs>button{padding:10px 6px;justify-content:flex-start}
  .pc-tabs .pc-tn:not(.crit){display:none}
  .pc-act{gap:6px;padding:8px}
  .pc-act .btn{flex:1 1 auto}
  .pc-act .sp{display:none}
}

/* ───── src/css/ui-plan-overview.css ───── */
/* Tổng quan đơn & kế hoạch — xưởng CNC (src/views/plan-overview.js). Dựa trên khung .pc-* của Cân đối nhu cầu
   (thanh tham số, ô KPI, tab). Chỉ dùng biến màu có sẵn: sáng/tối tự theo. */
.ov{min-width:0}
.ov-main{min-width:0}
/* Bảng SKU mở: chia đôi kiểu master–detail — ma trận ~55%, bảng SKU ~45%, bảng SKU dính khi cuộn trang */
.ov.side-on{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:12px;align-items:start}
.ov-side{position:sticky;top:8px;max-height:calc(100vh - 96px);overflow:auto;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg)}
.ov-side[hidden]{display:none}

/* Thanh tham số */
.ov-bar{row-gap:8px}
.ov-chips{gap:4px;flex-wrap:wrap}
.ov-chips .chip{cursor:pointer;font:inherit;font-size:12.5px}
.ov-q input{height:var(--h-input);width:180px;min-width:0}
.ov-tabrow{display:flex;align-items:flex-end;gap:8px 12px;flex-wrap:wrap;margin-bottom:12px;border-bottom:1px solid var(--line)}
.ov-tabrow .ov-tabs{flex:1 1 auto;margin-bottom:0;border-bottom:0;min-width:0}
.ov-go{display:inline-flex;gap:6px;flex-wrap:wrap;padding-bottom:6px}
.ov-go .btn{height:30px}
.ov-go .btn .ico{width:15px;height:15px;vertical-align:-2.5px;margin-right:3px}
.ov-warn,.pc-kpi .kv.ov-warn{color:var(--warn-ink)}
.ov-ok{color:var(--ok-ink)}
.ov-kpi .kpi{cursor:default}
.ov-kpi .kpi:hover{border-color:var(--line)}
/* Bảng SKU đang mở chiếm chỗ: KPI một hàng gọn (bỏ dòng phụ), ô tìm hẹp lại */
.ov.side-on .ov-kpi .kpi{padding:8px 10px}
.ov.side-on .ov-kpi .kv{font-size:20px}
.ov.side-on .ov-kpi .ks{display:none}
.ov.side-on .ov-q input{width:150px}
.ov.side-on .ov-go .btn{padding-left:8px;padding-right:8px}

/* Ma trận đơn: cuộn trong khung; cột mã dính trái, cột tổng dính phải, hàng tổng dính đáy */
.ov-mx-w{max-height:calc(100vh - 340px);min-height:220px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table.t.grid.ov-mx{border:0;border-collapse:separate;border-spacing:0;min-width:100%;width:max-content}
.ov-mx th,.ov-mx td{white-space:nowrap;border-bottom:1px solid var(--line)}
table.t.ov-mx td{padding-top:4px;padding-bottom:4px}
table.t.ov-mx th{padding-top:6px;padding-bottom:6px}
.ov-mx thead th{position:sticky;top:0;z-index:2;background:var(--panel-2);vertical-align:bottom}
.ov-mx thead th:first-child{z-index:4}
.ov-mx tfoot th{position:sticky;bottom:0;z-index:2;background:var(--panel-2);border-top:1px solid var(--line-2);font-weight:700}
.ov-mx tfoot th:first-child{z-index:4}
.ov-mx .ov-tot{position:sticky;right:0;z-index:1;background:var(--panel-2);border-left:1px solid var(--line-2);min-width:64px}
.ov-mx thead .ov-tot,.ov-mx tfoot .ov-tot{z-index:3}
.ov-cc{min-width:58px}
.ov-cc small{display:block;font-size:10.5px;font-weight:400;color:var(--ink-3)}
.ov-th-late{color:var(--crit-ink)}
.ov-code{min-width:190px;max-width:260px}
.ov-mx tbody tr:hover td.ov-code{background:var(--row-hover)}
.ov-mx tbody tr.sel td.ov-code{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
.ov-sku{display:flex;flex-direction:column;align-items:flex-start;gap:0;max-width:100%;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;line-height:1.4}
.ov-sku .ent-code{color:var(--link)}
.ov-sku:hover .ent-code{text-decoration:underline}
.ov-sku:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:var(--r)}
.ov-nm{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--ink-3);line-height:1.4}
.ov-cw{display:flex;align-items:center;gap:6px;min-width:0}
.ov-cw .ov-sku{min-width:0}
.ov-cw .pill{flex:none;font-size:10.5px}
.ov-st{display:inline-block;padding:0 6px;border:1px solid var(--line-2);border-radius:var(--r);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.ov-c{display:block;width:100%;min-height:24px;padding:0 2px;border:0;background:none;font:inherit;font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right;color:inherit;cursor:pointer}
.ov-c:hover{text-decoration:underline}
.ov-c:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* Thang cường độ một sắc (--c3) — 4 bậc; Quá hạn đỏ; Chưa có hạn nền xám */
.ov-mx td.ov-h1{background:color-mix(in srgb,var(--c3) 9%,transparent)}
.ov-mx td.ov-h2{background:color-mix(in srgb,var(--c3) 18%,transparent)}
.ov-mx td.ov-h3{background:color-mix(in srgb,var(--c3) 30%,transparent)}
.ov-mx td.ov-h4{background:color-mix(in srgb,var(--c3) 44%,transparent)}
.ov-mx td.ov-late,.ov-mx th.ov-late{background:var(--crit-soft);color:var(--crit-ink)}
.ov-mx td.ov-nd{background:var(--panel-2);color:var(--ink-2)}
.ov-z{color:var(--ink-3)}
/* (!) cạnh mã: popover đơn mở (cùng dáng dấu (!) của Ent.hint, lớp riêng để không lẫn với Hint) */
.ov-ob{display:inline-flex;align-items:center;justify-content:center;flex:none;width:19px;height:19px;padding:0;border:0;border-radius:50%;
  background:var(--panel-2);color:var(--ink-3);cursor:pointer;transition:background .12s,color .12s}
.ov-ob:hover,.ov-ob:focus-visible{background:var(--brand-soft);color:var(--brand-ink)}
.ov-ob:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ov-ob .ico{width:13px;height:13px}
/* SL đưa vào KH: ô gõ số + nút "=" (chép SL cần) */
.ov-mx .ov-qp{min-width:104px;text-align:right}
.ov-qw{display:inline-flex;align-items:center;gap:3px}
.ov-qi{width:64px;height:26px;padding:0 6px;text-align:right;font:inherit;font-variant-numeric:tabular-nums;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);color:var(--ink)}
.ov-qi:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.ov-qi.bad{border-color:var(--crit);background:var(--crit-soft)}
.ov-eq{min-width:26px;height:26px;padding:0 6px;font-weight:700}
.ov-sd-q{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.ov-sd-ql{font-weight:600;color:var(--ink-2)}
/* Thanh Thêm vào kế hoạch (dính đáy, khung .pc-act) */
.ov-act-f{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:13px}
.ov-act select{height:var(--h-input);max-width:min(360px,60vw)}
.ov-act input[data-act-name]{height:var(--h-input);width:240px;min-width:0}

/* Dòng thiếu dữ liệu (chưa có BOM / chưa có thời gian): tạm ẩn ở cuối, một dòng nút Hiện/Ẩn; bật Hiện thì các dòng mờ hơn */
table.t.ov-mx tr.ov-miss-r td{padding:6px 8px;background:var(--panel);border-bottom:1px solid var(--line-2)}
.ov-miss{position:sticky;left:8px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100vw - 48px)}
.ov-miss-b{height:28px;font-weight:600;color:var(--ink-2)}
.ov-miss-b .ico{width:14px;height:14px;vertical-align:-2.5px}
.ov tr.ov-dim td{color:var(--ink-3)}
.ov tr.ov-dim td>*{opacity:.6}
.ov tr.ov-dim .ov-sku .ent-code{color:var(--ink-2)}
.ov-hid{margin-left:4px;font-size:11px;font-weight:400;color:var(--ink-3)}
.ov-miss-bar{margin-top:10px}
.ov-miss-bar:empty{display:none}

/* Tab Chi tiết dùng chung: ô tìm của bảng ẩn — thanh tham số trên cùng đã lọc */
.ov [data-pane="shared"] .dt-search{display:none}

/* Tab Cùng phôi: lưới thẻ theo vật liệu */
.ov-bl{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.ov-blg{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.ov-blh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ov-blh b{font-size:14px}
.ov-blq{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.ov-blg .tw{max-height:240px;overflow:auto}
.ov-blg .ov-sku{flex-direction:row}

/* Tab Tải theo tuần */
.ov-ld-note{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12.5px}
.ov-ld-w{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table.t.grid.ov-ld{border:0;min-width:100%;width:max-content}
.ov-ld td,.ov-ld th{white-space:nowrap}
.ov-ld td small{display:block;font-size:11px;font-weight:600}
.ov-ld td.ov-ld-ok{background:var(--ok-soft)}.ov-ld td.ov-ld-ok small{color:var(--ok-ink)}
.ov-ld td.ov-ld-warn{background:var(--warn-soft)}.ov-ld td.ov-ld-warn small{color:var(--warn-ink)}
.ov-ld td.ov-ld-crit{background:var(--crit-soft)}.ov-ld td.ov-ld-crit small{color:var(--crit-ink)}

/* Popover ô ma trận */
.pop.ov-pop{width:min(520px,calc(100vw - 16px))}

/* ── Bảng SKU ── */
.ov-sd-hd{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:start;
  padding:10px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.ov-sd-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0;font-size:15px;line-height:1.4}
.ov-sd-t .ent-code{font-size:15px;font-weight:700}
.ov-sd-nm{min-width:0;color:var(--ink-2);font-size:13px;overflow-wrap:anywhere}
.ov-sd-x{padding:0 6px}
.ov-sd-meta{grid-column:1 / -1;display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.ov-sd-b{padding:10px 12px 14px;display:flex;flex-direction:column;gap:14px}
.ov-sd-sec h4{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:13px}
.ov-sd-sec h4 .pc-tn{margin-left:0}
.ov-sd-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ov-mk{min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.ov-mk span{display:block;font-size:11px;font-weight:600;color:var(--ink-2)}
.ov-mk b{display:block;margin-top:2px;font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-mk small{font-size:11.5px;font-weight:500;color:var(--ink-3)}
.ov-sd-wip{font-size:12.5px;line-height:1.7}
.ov-sd-ord{max-height:220px;overflow:auto}
.ov-sd-ord td:first-child{white-space:nowrap}
/* Thẻ công nghệ: mỗi chi tiết một khối, 5 ô lưới (desktop có hàng tiêu đề; điện thoại nhãn trong từng ô, 3+2) */
.ov-tk{border:1px solid var(--line);border-radius:var(--r)}
.ov-tk-hd,.ov-tk-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.5fr);gap:0 8px}
.ov-tk-hd{padding:6px 10px;background:var(--panel-2);border-bottom:1px solid var(--line);font-size:11px;font-weight:600;color:var(--ink-2);line-height:1.35}
.ov-tk-r{padding:6px 10px 8px;border-bottom:1px solid var(--line)}
.ov-tk-r:last-child{border-bottom:0}
.ov-tk-p{min-width:0;margin-bottom:4px}
.ov-tk-p .ov-nm{display:inline;margin-left:6px;font-size:12px}
.ov-ind{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;padding-left:calc(var(--d, 0) * 14px)}
.ov-tk-c{min-width:0}
.ov-tk-l{display:none;font-size:10.5px;font-weight:600;color:var(--ink-3);line-height:1.4}
.ov-tc{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 5px;max-width:100%;min-height:26px;padding:2px 4px;margin-left:-4px;border:1px solid transparent;
  border-radius:var(--r);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;line-height:1.35}
button.ov-tc:hover{border-color:var(--line-2);background:var(--row-hover)}
button.ov-tc:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ov-tc.ro{cursor:default}
.ov-tv{font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ov-src{display:inline-block;padding:0 5px;border-radius:3px;font-size:10px;font-weight:600;line-height:1.5;white-space:nowrap}
.ov-add{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--link)}
.ov-add .ico{width:11px;height:11px}
.ov-ed{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.ov-ed input{flex:1 1 100%;min-width:0;width:100%;height:26px;padding:0 6px;font-variant-numeric:tabular-nums;
  border:1px solid var(--brand);border-radius:var(--r);background:var(--panel);color:var(--ink)}
.ov-ed input:focus{outline:none;box-shadow:0 0 0 2px var(--brand-soft)}
.ov-ed input.bad{border-color:var(--crit);background:var(--crit-soft)}
.ov-ed .btn{min-width:26px;height:24px;padding:0 5px}
.ov-ed .btn .ico{width:13px;height:13px}

/* Biểu đồ SL đặt theo tuần (Chart.weekBars) */
.wb-plot{display:flex;align-items:flex-end;gap:2px;height:130px;border-bottom:1px solid var(--line-2)}
.wb-c{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.wb-c i{display:block;width:100%;max-width:22px;background:var(--c1);border-radius:3px 3px 0 0}
.wb-c.nx i{background:var(--c3)}
.wb-c.wb-cut{border-left:1px dashed var(--line-2);margin-left:3px;padding-left:2px}
.wb-c:hover i{filter:brightness(1.12)}
.wb-v{font:600 10.5px var(--f-mono);color:var(--ink-2);margin-bottom:2px;white-space:nowrap}
.wb-xl{display:flex;gap:2px;margin-top:4px}
.wb-xl span{flex:1;min-width:0;font-size:10.5px;color:var(--ink-3);text-align:center;white-space:nowrap;overflow:visible}
.wb-xl span:first-child{text-align:left}
.wb-xl span:last-child{display:flex;justify-content:flex-end}   /* nhãn ngày dài hơn cột: tràn vào trong, không bị cắt ở mép khung */

@media(max-width:1280px){.ov.side-on .ov-sd-k{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Hẹp: bảng SKU thành lớp toàn màn hình (không phải ngăn kéo hẹp) */
@media(max-width:1000px){
  .ov.side-on{display:block}
  .ov.side-on .ov-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ov-side{position:fixed;inset:0;z-index:70;max-height:none;border:0;border-radius:0}
}
@media(max-width:640px){
  .ov-q{flex:1 1 100%}
  .ov-q input{flex:1;width:auto}
  .ov-tabrow{border-bottom:0}
  .ov-go{flex:1 1 100%;padding-bottom:0}
  .ov-go .btn{flex:1 1 0;justify-content:center;padding-left:6px;padding-right:6px;font-size:12.5px}
  .ov-mx-w{max-height:62vh}
  /* điện thoại: cột Tổng không dính (chừa chỗ cho cột tuần), bỏ cột Store (chip Store ở trên đã lọc) */
  .ov-mx .ov-tot{position:static}
  .ov-mx thead .ov-tot,.ov-mx tfoot .ov-tot{position:sticky;right:auto}
  .ov-mx tr>:nth-child(2){display:none}
  .ov-tk-hd{display:none}
  .ov-tk-g{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px}
  .ov-tk-g .ov-tk-c:last-child{grid-column:span 2}
  .ov-tk-l{display:block}
  /* bảng đơn: bỏ cột Ngày đặt cho vừa bề ngang (đủ ở desktop) */
  .ov-ord th:nth-child(3),.ov-ord td:nth-child(3){display:none}
  .ov-code{min-width:140px;max-width:170px}
  .ov-nm{max-width:150px}
  .ov-sd-k{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ov-bl{grid-template-columns:1fr}
  .ov-act-f,.ov-act select,.ov-act input[data-act-name]{flex:1 1 100%;width:100%;max-width:none}
}
/* Tiêu đề cột ngày hai dòng + "Chưa có hạn" xuống dòng: ma trận gọn, cột Tổng dính phải không che cột cuối ở 1440. */
.ov-mx thead th.ov-cc{white-space:normal;max-width:84px;line-height:1.25}

/* ───── src/css/ui-plans.css ───── */
/* Production plans: lưới theo lô, cuộn ngang giữ cột nhận diện. */
.plans-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:14px}.plans-head h2{margin:0}.plans-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}.plans-tabs .btn.sel{background:var(--ink);color:var(--bg)}
.plans-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.plans-form .fld{display:flex;flex-direction:column;gap:5px}.plans-form textarea{min-height:62px}.plans-lines input,.plans-lines select{max-width:120px}.plans-lines .sku-link{cursor:pointer;text-decoration:underline}.plans-summary{display:flex;gap:18px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:8px;margin:10px 0;color:var(--ink-2)}
.plan-track{overflow:auto;max-height:calc(100vh - 230px);border:1px solid var(--line);border-radius:8px}.plan-track table{border-collapse:separate;border-spacing:0;min-width:max-content;width:100%}.plan-track th{position:sticky;top:0;background:var(--card);z-index:2}.plan-track th:first-child,.plan-track td:first-child{position:sticky;left:0;background:var(--card);z-index:1}.plan-track th:first-child{z-index:3}.plan-track .n{text-align:right}.plan-short{color:var(--danger-ink);font-weight:700}.sku-drawer .sku-order{display:grid;grid-template-columns:1fr auto;gap:7px;padding:9px 0;border-bottom:1px solid var(--line)}.sku-drawer .sku-totals{display:flex;gap:14px;margin:10px 0}.plans-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.plan-material-short td{background:color-mix(in srgb,var(--danger) 7%,transparent)}
@media(max-width:800px){.plans-form{grid-template-columns:1fr}.plans-head{display:block}.plans-head .btn{margin-top:8px}}
/* Kế hoạch tổng thể 4 bước (plan-mps.js) — bố cục theo MISA AMIS Sản xuất: thanh bước trên, chân nút cố định dưới */
.mps{display:flex;flex-direction:column;gap:12px;padding-bottom:64px}
.mps-steps{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.mps-st{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 2px;color:var(--ink-2);font:inherit;font-weight:600;cursor:pointer}
.mps-st[disabled]{cursor:default;color:var(--ink-3)}
.mps-st.on,.mps-st.done{color:var(--brand-ink)}
.mps-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);font-size:12px}
.mps-st.on .mps-n{background:var(--brand-solid);border-color:var(--brand-solid);color:var(--on-brand)}
.mps-st.done .mps-n{border-color:var(--brand);color:var(--brand-ink)}
.mps-n svg{width:14px;height:14px}
.mps-ln{width:48px;height:2px;background:var(--line-2)}
.mps-card h3{margin:0 0 10px}
.mps-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}.mps-h h3{margin:0}
.mps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.mps-grid .fld{display:flex;flex-direction:column;gap:5px}
.mps-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mps-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin-top:16px}
.mps-opts>div>div{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
.mps-r{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.mps-search{max-width:280px}
.mps-in input[type=number]{width:96px}.mps-in input[type=date]{width:140px}
.mps-grid-t{overflow:auto;max-height:calc(100vh - 330px)}
.mps-grid-t table{min-width:max-content}
.mps-grid-t th{position:sticky;top:0;background:var(--card);z-index:1}
.mps-grid-t td input[type=number]{width:84px}
.mps-grid-t tr[data-row]{cursor:pointer}
.mps-grid-t tr.sel td{background:var(--brand-soft)}
.mps-hist{background:var(--panel-2);color:var(--ink-2)}
th.mps-grp{text-align:center;font-weight:600;border-bottom:1px solid var(--line)}
.mps-over,.mps-over input{background:var(--crit-soft)!important;color:var(--crit-ink)}
.mps-warn{color:var(--warn-ink);font-weight:600}
.mps-plan-row td{color:var(--brand-ink);font-weight:600}
.mps-sub td{background:var(--panel);font-weight:600;color:var(--ink-2)}
.mps-in-s{width:84px;display:inline-block}
.mps-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px;font-size:13px}
.mps-hchip{display:inline-flex;gap:4px;padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2)}
.mps-pick{max-height:52vh;overflow:auto;margin:8px 0}
.mps-foot{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
@media(max-width:800px){.mps-grid,.mps-opts{grid-template-columns:1fr}.mps-ln{width:16px}.mps-st{font-size:13px}}
.mps-grid-t td,.mps-in td{padding-top:4px;padding-bottom:4px}
.mps-grid-t input,.mps-in input{height:30px}
.mps-grid-t tbody td:first-child,.mps-grid-t thead tr:last-child th:first-child{position:sticky;left:0;z-index:2;background:var(--card)}
.mps-grid-t thead tr:last-child th:first-child{z-index:3}
.mps-grid-t thead tr:first-child:not(:last-child) th:first-child{left:auto}
.mps-grid-t thead tr:first-child th{top:0}.mps-grid-t thead tr:nth-child(2) th{top:33px}
.mps-main{max-height:46vh}
.mps-grid-t tbody td:nth-child(2):not(.n),.mps-main tbody td:nth-child(3){max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Bước 2 · tổng quan đơn & tồn kho */
.mps-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.mps-kpis .kpi{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--panel)}
.mps-ov-g{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:14px;align-items:start}
.mps-ov-g>*{min-width:0}
.mps-ov-t{max-height:440px}.mps-ov-ord{max-height:220px;margin:8px 0}
.mps-ov-side{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--panel)}
.mps-ov .btn.sel{background:var(--ink);color:var(--bg)}
.mps-ov-t tr[data-ov]{cursor:pointer}
/* Biểu đồ nhịp bán + mốc tồn kho (Chart.salesStock) */
.ss-plot{position:relative;height:150px;border-bottom:1px solid var(--line-2)}
.ss-cols{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px}
.ss-c{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;min-width:0}
.ss-c i{display:block;width:100%;max-width:26px;background:var(--c1);border-radius:4px 4px 0 0;min-height:0}
.ss-c.ss-now i{opacity:.5}
.ss-c:hover i{filter:brightness(1.12)}
.ss-v{font:600 10.5px var(--f-mono);color:var(--ink-2);margin-bottom:2px;white-space:nowrap}
.ss-ref{position:absolute;left:0;right:0;height:0;pointer-events:none}
.ss-ref span{position:absolute;right:0;bottom:2px;font:600 10.5px var(--f-sans);color:var(--ink);background:var(--panel);padding:0 4px;border-radius:3px}
.ss-stock{border-top:2px dashed var(--ink-2)}
.ss-open{border-top:2px solid var(--c2)}
.ss-open span{bottom:auto;top:2px}
.ss-xl{display:flex;gap:2px;margin-top:4px}.ss-xl span{flex:1;min-width:0;font-size:10.5px;color:var(--ink-3);text-align:center;white-space:nowrap;overflow:visible}
.ss-lg-stock{background:none!important;border-top:2px dashed var(--ink-2);height:0!important;width:12px!important;border-radius:0!important}
.ss-spark{display:inline-flex;align-items:flex-end;gap:1px;height:22px;width:84px;vertical-align:middle}
.ss-spark i{flex:1;background:var(--c1);border-radius:1.5px 1.5px 0 0}
.ss-spark i.now{opacity:.5}
@media(max-width:1100px){.mps-ov-g{grid-template-columns:1fr}.mps-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mps-kpis .kpi{min-height:0;height:auto;display:block;text-align:left}
.mps-kpis .kpi .kl{justify-content:flex-start}
.mps-kpis .kpi .kv{font-size:24px}
.mps-chip-n{margin-left:6px;font-family:var(--f-mono)}
.mps-ov-g{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.mps-ov-t td,.mps-ov-t th,.mps-ov-ord td,.mps-ov-ord th{padding-left:7px;padding-right:7px;font-size:13px}
.mps-ov-t tbody td:nth-child(2),.mps-ov-ord tbody td:nth-child(2){max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-cols{right:78px}
.ss-ref{right:0}
.ss-ref span{right:0;bottom:auto;top:-8px;width:74px;text-align:right;background:none;padding:0;line-height:14px}
.ss-open span{top:-8px}
.ss-xl{margin-right:78px}
.ss-near span{top:auto;bottom:-8px}
.mps-kt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-ref span{top:-16px}.ss-near span{top:auto;bottom:-16px}
.mps-ov-t tbody td:nth-child(2){max-width:none;white-space:normal}
.mps-sku{max-width:170px}.mps-sku .muted{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Đối chiếu lũy kế (Chart.mpsLines): một trục Y, màu theo vai trò — đặt hàng cam, cần có đỏ, sẽ có xanh dương, dự tính xanh lá nét đứt. */
.mps-lines{min-width:0;margin-bottom:12px}
.mps-l-top{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:4px 0 6px}
.mps-l-summary{font-size:22px;font-weight:700;line-height:1.2}.mps-l-summary small{font-size:13px;font-weight:400;color:var(--ink-2)}
.mps-l-summary.short{color:var(--crit-ink)}.mps-l-summary.ok{color:var(--ok-ink)}
.mps-l-ext{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.mps-l-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-2)}
.mps-l-legend span{display:inline-flex;align-items:center;gap:5px}.mps-l-legend i,.mps-l-tip i{display:inline-block;width:18px;height:0;border-top:3px solid}
.mps-l-legend i.mps-l-forecast,.mps-l-tip i.mps-l-forecast{border-top-style:dashed}
.mps-l-legend i.mps-l-sw{width:12px;height:10px;border:0;border-radius:2px}.mps-l-sw.short{background:var(--crit-soft);box-shadow:inset 0 0 0 1px var(--crit)}.mps-l-sw.ok{background:var(--ok-soft);box-shadow:inset 0 0 0 1px var(--ok)}
.mps-l-ordered{stroke:var(--c2);color:var(--c2);fill:var(--c2)}.mps-l-need{stroke:var(--crit);color:var(--crit);fill:var(--crit)}
.mps-l-have{stroke:var(--c3);color:var(--c3);fill:var(--c3)}.mps-l-forecast{stroke:var(--c1);color:var(--c1);fill:var(--c1)}
.mps-l-plot path{stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;fill:none}.mps-l-plot path.mps-l-forecast{stroke-dasharray:7 5}.mps-l-plot path.mps-l-dot{stroke-width:6;stroke-dasharray:none}
.mps-l-scroll{overflow-x:auto;max-width:100%}.mps-l-plot{min-width:300px;padding:8px 8px 40px 44px}
.mps-l-box{position:relative;height:220px}.mps-l-box svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mps-l-yl{position:absolute;left:-6px;transform:translate(-100%,-50%);font-size:11px;color:var(--ink-2);font-family:var(--f-mono);white-space:nowrap}
.mps-l-xl{position:absolute;top:100%;margin-top:6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:11px;line-height:1.35;color:var(--ink-2);white-space:nowrap;pointer-events:none}
.mps-l-xl[hidden]{display:none}.mps-l-xl.now b{color:var(--ink)}.mps-l-xl em{font-style:normal;font-weight:700}.mps-l-xl em.short{color:var(--crit-ink)}.mps-l-xl em.ok{color:var(--ok-ink)}
.mps-l-grid{stroke:var(--line);stroke-width:1}.mps-l-grid.zero{stroke:var(--line-2)}
.mps-l-now{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:3 4}
.mps-l-area{stroke:none}.mps-l-area.short{fill:var(--crit);fill-opacity:.16}.mps-l-area.surplus{fill:var(--ok);fill-opacity:.14}
.mps-l-hits{position:absolute;inset:0;pointer-events:none}
.mps-l-hit{position:absolute;top:0;bottom:0;width:20px;transform:translateX(-50%);padding:0;border:0;background:transparent;pointer-events:auto;cursor:default}
.mps-l-hit:hover,.mps-l-hit:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.mps-l-hit:focus-visible{outline:2px solid var(--brand)}
.mps-l-tip{display:none;position:absolute;z-index:4;top:4px;left:50%;transform:translateX(-50%);width:230px;padding:8px 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);box-shadow:var(--shadow);font-size:12px;text-align:left;line-height:1.45}
.mps-l-tip>b{display:block;margin-bottom:3px}.mps-l-tip span{display:flex;align-items:center;gap:6px}.mps-l-tip span b{margin-left:auto;font-family:var(--f-mono)}
.mps-l-tip .mps-l-tb{margin-top:3px;font-weight:700}.mps-l-tb.short{color:var(--crit-ink)}.mps-l-tb.ok{color:var(--ok-ink)}
.mps-l-hit:nth-child(-n+3) .mps-l-tip{left:0;transform:none}.mps-l-hit:nth-last-child(-n+3) .mps-l-tip{left:auto;right:0;transform:none}
.mps-l-hit:hover .mps-l-tip,.mps-l-hit:focus .mps-l-tip{display:block}
.mps-l-caption{font-size:12px;color:var(--ink-2);margin:6px 0}.mps-l-data summary{cursor:pointer;font-size:12px}
.mps-l-warn{display:flex;gap:8px;align-items:flex-start;margin:4px 0 8px;padding:8px 10px;border-radius:var(--r);background:var(--warn-soft);color:var(--warn-ink);font-size:12.5px}
.mps-l-warn svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.mps-l-data .mps-grid-t{max-height:280px}.mps-l-data tbody th{position:sticky;left:0;z-index:2;background:var(--card);font-weight:500;text-align:left}
.mps-grid-t th.mps-plan-in,.mps-grid-t td.mps-plan-in{background:color-mix(in srgb,var(--c3) 7%,var(--card))}
@media(max-width:1100px){.mps-ov-g{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.mps-foot{flex-wrap:wrap}.mps-foot>.muted{width:100%}.mps-foot .btn{white-space:normal}.mps-st{min-width:0;font-size:11px}.mps-ln{width:6px;flex-shrink:0}.mps-card{min-width:0}.mps-l-summary{font-size:18px}.mps-l-ext{margin-left:0}.mps-2{grid-template-columns:minmax(0,1fr)}.mps-kpis{grid-template-columns:minmax(0,1fr)}}

/* ───── 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}
/* Bảng "Công đoạn sản xuất" theo quy trình (WoRoute) — form tạo lệnh và tab Các tổ */
/* Danh sách lệnh: gộp tab view + chip trạng thái một hàng (kiểu MISA) */
.wo-dt-head{display:flex;align-items:center;gap:6px;overflow-x:auto;margin-bottom:10px;border-bottom:1px solid var(--line);scrollbar-width:thin}
.wo-dt-head .dt-views,.wo-dt-head .dt-chips{flex:none;margin-bottom:0;border-bottom:0}
.wo-dt-head .dt-chips{display:flex;align-items:center;gap:6px;flex:1;min-width:min(320px,40vw)}
.wo-dt-head .dt-chiplist{flex:1;min-width:0;overflow-x:auto;display:flex;gap:6px;scrollbar-width:none}
.wo-dt-head .dt-search{margin-left:auto;flex:none}

.wo-rt-box{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.wo-rt-box>b{display:block;margin-bottom:6px}
.wo-rt td,.wo-rt th{font-size:12.5px}
.wo-rt-out td{color:var(--ink-3)}
.wo-rt-warn{margin:6px 0;padding:7px 10px;border-radius:var(--r);background:var(--warn-soft);color:var(--warn-ink);font-size:12.5px;display:flex;gap:6px;align-items:flex-start}
.wo-rt-sum{margin-top:6px;font-size:12px}
/* Thông tin lệnh toàn trang: giữ lưới hai cột khi dùng lại Drawer.fields. */
.wof .dr-fields{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Xem nhanh vật tư và bộ lọc cảnh báo của danh sách lệnh. */
.wo-filter{width:auto;max-width:230px;flex:none}
.wo-filter.on{border-color:var(--warn-ink)}
.wo-dt-head [data-view][hidden]{display:none}
.wo-mat-btn{border:0;background:none;padding:0;cursor:pointer;font:inherit}
.wo-mat-btn:focus-visible{outline:2px solid var(--info);outline-offset:3px;border-radius:var(--r)}
.wo-mat-pop{width:min(560px,calc(100vw - 16px))}
.wo-mat-pop .pop-hd .btn{margin-left:auto}
.wo-mat-pop td,.wo-mat-pop th{white-space:nowrap}
/* Hàng 1: tab xem + Lọc lệnh; hàng 2: chip trạng thái + tìm nhanh (không đè nhau khi hẹp) */
.wo-dt-head{flex-wrap:wrap;row-gap:8px;overflow-x:visible;padding-bottom:8px}
.wo-dt-head .dt-chips{flex:1 1 100%;min-width:0}

/* ───── src/css/ui-purchases.css ───── */
/* Sổ mua hàng (tab "Sổ mua hàng" của màn Mua hàng): bộ lọc, bảng luỹ kế, khung lịch sử từng lần, form ghi. */
.pur-tabs{margin-bottom:10px}
.pur-lf{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin-bottom:8px}
.pur-f{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0;padding:0;border:0}
.pur-f select,.pur-f input{min-height:36px}
.pur-lb{font-size:12px;color:var(--ink-3);padding:0}
.pur-per{flex-direction:row;align-items:center;gap:6px;flex-wrap:wrap}
.pur-per .pur-lb{flex-basis:100%}
.pur-chk{flex-direction:row;align-items:center;gap:6px;min-height:36px}
.pur-chk input{min-height:0}
.pur-sp{flex:1}
.pur-lf .btn{min-height:36px}
.pur-lmsg{margin-bottom:6px;font-size:12.5px}
.pur-lmsg:empty{display:none}
.pur-asof{font-size:12.5px}
.pur-nw{white-space:nowrap}
.pur-n,.pur-ht .n{text-align:right;font-variant-numeric:tabular-nums}
.pur-short{color:var(--warn-ink);font-weight:600}
.pur-copy{margin-left:4px}
.pur-lpg{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:8px;font-size:12.5px}
.pur-ex{border:0;background:none;padding:2px 4px;cursor:pointer;min-width:28px;min-height:28px}
.pur-ex:focus-visible{outline:2px solid var(--info);outline-offset:2px;border-radius:var(--r)}
.pur-hr>td{padding:0;background:var(--panel)}
.pur-hist{padding:10px 12px;width:var(--pur-w,auto);max-width:100%;position:sticky;left:0;box-sizing:border-box}
.pur-hh{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.pur-hl{margin:6px 0}
.pur-ht td,.pur-ht th{font-size:12.5px;vertical-align:top}
.pur-ht .qcp-grid{margin:0}
.pur-ha{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pur-ref{display:block;color:var(--ink-3)}
.pur-h-before td,.pur-h-after td{opacity:.55}
.qcp-th.qcp-broken{outline:1px dashed var(--line);background:var(--panel)}
/* form ghi */
.pur-qw{display:flex;align-items:center;gap:6px}
.pur-qw input{flex:1;min-width:0}
.pur-rg{margin-bottom:6px}
.pur-sumline{margin:4px 0 8px;font-size:12.5px}
.pur-bd{margin:0 0 8px;font-size:12.5px}
.pur-proj{display:flex;align-items:center;gap:8px}
.pur-flb{display:block;margin-bottom:4px}
@media (max-width:768px){
  .pur-lf{flex-direction:column;align-items:stretch}
  .pur-sp{display:none}
  .pur-lf .btn,.pur-f select,.pur-f input,.pur-ha .btn{min-height:44px}
  .pur-lpg{justify-content:space-between}
}

/* ───── 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-setup.css ───── */
/* ============================================================
   Màn Thiết lập bằng AI (src/views/setup.js). Mọi class mang tiền tố .sx-
   — không đụng class khung. Màu qua biến --…, nhất quán với main.css.
   ============================================================ */
.sx{--sx-chat:380px;position:relative}
.sx-hero{display:flex;gap:18px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.sx-hero h2{font-size:21px;margin:2px 0 4px;font-weight:650}
.sx-hero p{margin:0;color:var(--ink-2);font-size:13px;max-width:70ch}
.sx-pills{display:flex;gap:8px;flex-wrap:wrap}
.sx-pills .pill{font-size:11.5px}
.sx-pills .pill .ico{width:13px;height:13px}

/* Thanh 4 bước */
.sx-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.sx-step{display:flex;align-items:center;gap:11px;text-align:left;padding:11px 13px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);cursor:pointer;font-family:inherit;color:var(--ink);position:relative;min-width:0;transition:border-color .15s,background .15s}
.sx-step:hover{border-color:var(--line-2)}
.sx-step.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 -3px 0 var(--brand)}
.sx-step.done .sx-n{background:var(--brand-solid);color:var(--on-brand);border-color:var(--brand-solid)}
.sx-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink-2)}
.sx-step.on .sx-n{background:var(--brand-solid);border-color:var(--brand-solid);color:var(--on-brand)}
.sx-n .ico{width:15px;height:15px}
.sx-st{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.sx-st b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-st small{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-sp{display:flex;flex-direction:column;gap:3px;align-items:flex-end;flex:none}
.sx-sp .pill{font-size:11px;padding:0 8px}
.sx-enter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 12px;font-size:12px}
.sx-enter .chip{text-decoration:none}

/* Thân: bản nháp + chat */
.sx-body{display:grid;grid-template-columns:minmax(0,1fr) var(--sx-chat);gap:14px;align-items:start}
.sx-main{min-width:0}
.sx-top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.sx-top-l{min-width:0;flex:1 1 320px}
.sx-top h3{margin:0;font-size:17px;font-weight:650}
.sx-top p{margin:3px 0 0;font-size:12px;color:var(--ink-3);max-width:70ch}
.sx-top-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sx-sv{font-size:12px;color:var(--ink-3);display:inline-flex;align-items:center;gap:5px;min-width:96px;justify-content:flex-end}
.sx-sv .ico{width:13px;height:13px}
.sx-sv.saved{color:var(--ok-ink)} .sx-sv.error{color:var(--crit-ink)}
.sx-sv .spin{width:11px;height:11px}
#sx-sum .alert{margin-bottom:10px}
#sx-sum .alert a{color:inherit;font-weight:600}
.sx-applied{margin-bottom:12px}
.sx-applied-a{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:12px}

/* Màn bắt đầu */
.sx-start{text-align:center;padding:28px 22px;margin-bottom:12px;border-style:dashed}
.sx-start-i{width:46px;height:46px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;margin:0 auto 10px}
.sx-start-i .ico{width:22px;height:22px}
.sx-start h3{margin:0 0 4px;font-size:17px}
.sx-start p{margin:0 auto 14px;max-width:56ch;color:var(--ink-2);font-size:13px}
.sx-start-p{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.sx-start-a{display:flex;gap:10px;justify-content:center;align-items:center;font-size:12px}
.sx-start .chip{height:auto;min-height:28px;padding:4px 12px;white-space:normal;text-align:left}

/* Khối, thẻ xưởng / quy trình */
.sx-blk{margin-bottom:16px}
.sx-blk-h{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:8px}
.sx-blk-h h3{margin:0;font-size:14.5px;font-weight:650}
.sx-blk-h p{margin:2px 0 0;font-size:12px;color:var(--ink-3)}
.sx-intro{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px}
.sx-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:12px;border-left:3px solid var(--line-2)}
.sx-card.src-ai{border-left-color:var(--plum)} .sx-card.src-file{border-left-color:var(--info)}
.sx-card.has-bad{border-color:var(--crit);border-left-color:var(--crit)}
.sx-card-h{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:6px}
.sx-ico{width:34px;height:34px;border-radius:8px;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;flex:none;align-self:flex-end}
.sx-f{flex:1 1 130px;min-width:110px;max-width:260px}
.sx-f:first-of-type{flex:2 1 200px;max-width:340px}
.sx-card-r{margin-left:auto;display:flex;gap:8px;align-items:center}
.sx-sub{margin:14px 0 6px;font-size:12px;font-weight:650;color:var(--ink-2);text-transform:uppercase;letter-spacing:.5px}
.sx-sub small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-3)}
.sx-add-big{width:100%;height:42px;border-style:dashed;color:var(--ink-2);margin-bottom:12px}

/* Lưới sửa tại chỗ */
.sx-grid{margin-bottom:6px}
.sx-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:8px}
.sx-tbl{min-width:max-content;width:100%}
.sx-h,.sx-r{display:grid;grid-template-columns:var(--sx-cols);gap:0;align-items:start}
.sx-h{background:var(--panel-2);border-bottom:1px solid var(--line);position:sticky;top:0}
.sx-h .sx-c{padding:7px 6px;font-size:11px;font-weight:650;color:var(--ink-2);line-height:1.25}
.sx-r{border-bottom:1px solid var(--line);position:relative;box-shadow:inset 3px 0 0 transparent}
.sx-r:last-child{border-bottom:0}
.sx-r.src-ai{box-shadow:inset 3px 0 0 var(--plum)} .sx-r.src-file{box-shadow:inset 3px 0 0 var(--info)}
.sx-r:hover{background:var(--row-hover)}
.sx-r.has-bad{background:var(--crit-soft)}
.sx-r.dragging{opacity:.4}
.sx-c{padding:5px 4px;min-width:0;display:flex;flex-direction:column;gap:2px}
.sx-c input:not([type=checkbox]),.sx-c select{width:100%;height:30px;font-size:12.5px;padding:0 7px}
.sx-c input[type=number]{text-align:right}
.sx-c.bad input,.sx-c.bad select{border-color:var(--crit);background:var(--crit-soft)}
.sx-c.wrn input,.sx-c.wrn select{border-color:var(--warn)}
.sx-err{font-size:11px;line-height:1.3;color:var(--crit-ink)}
.sx-c.wrn .sx-err{color:var(--warn-ink)}
.sx-nb input,.sx-nb select{height:var(--h-input)}
.sx-idx{align-items:center;justify-content:center;color:var(--ink-3);font-size:12px;font-weight:600;cursor:grab;padding-top:11px}
.sx-ck{display:flex;justify-content:center;padding-top:7px}
.sx-src{align-items:flex-start;padding-top:9px}
.sx-ac{flex-direction:row;gap:3px;align-items:flex-start;justify-content:flex-end;padding:3px 6px 0 0}
.sx-ac .ico-btn{width:26px;height:26px}
.sx-up .ico{transform:rotate(180deg)}
.sx-del:hover{color:var(--crit-ink);border-color:var(--crit)}
.sx-rowmsg{grid-column:1/-1;padding:3px 10px 7px;font-size:11.5px;width:100%}
.sx-rowmsg.bad{color:var(--crit-ink)} .sx-rowmsg.wrn{color:var(--warn-ink)}
.sx-card-h .sx-rowmsg{padding:0}
.sx-none{padding:14px;text-align:center;color:var(--ink-3);font-size:12.5px}
.sx-tgs{display:flex;flex-wrap:wrap;gap:4px;padding-top:2px}
.sx-tg{font:inherit;font-size:11.5px;height:24px;padding:0 9px;border-radius:20px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);cursor:pointer}
.sx-tg:hover{border-color:var(--brand)}
.sx-tg.on{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.sx-chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.sx-chip .ico{width:11px;height:11px}
.sx-chip.ai{background:var(--plum-soft);color:var(--plum-ink)}
.sx-chip.file{background:var(--info-soft);color:var(--info-ink)}
.sx-chip.err{background:var(--crit-soft);color:var(--crit-ink)}
.sx-chip button{border:0;background:none;color:inherit;cursor:pointer;padding:0;margin-left:2px;display:inline-grid;place-items:center}
.sx-flash{animation:sxflash 2s ease-out}
@keyframes sxflash{0%,35%{background:var(--brand-soft);outline:2px solid var(--brand);outline-offset:-2px}100%{outline:2px solid transparent}}

/* Hộp tóm tắt áp dụng */
.sx-plan{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.sx-plan-g{border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 14px;background:var(--panel-2)}
.sx-plan-g.add{border-color:var(--ok);background:var(--ok-soft)}
.sx-plan-g h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;display:flex;gap:5px;align-items:center}
.sx-plan-g ul{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.sx-plan-g .num{font-size:16px;margin-right:4px}
.sx-plan-g p{margin:0;font-size:12.5px}
/* Bảng mật khẩu tạm */
.sx-pw .modal{width:min(640px,100%)}
.sx-pw-sheet{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:14px 16px;margin:12px 0;background:var(--panel)}
.sx-pw-h{display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px}
.sx-pw-r{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.sx-pw-r.h{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase}
.sx-pw-r:last-of-type{border-bottom:0}
.sx-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.sx-temp{font-weight:700;letter-spacing:.5px}
.sx-pw-f{margin:10px 0 0;font-size:11.5px;color:var(--ink-3)}
.sx-confirm{display:flex;gap:8px;align-items:center;font-size:13px;margin-bottom:4px;cursor:pointer}
.sx-pw .alert{margin-bottom:6px}

/* Chat */
.sx-chat{position:sticky;top:calc(var(--toph) + 12px);height:calc(100dvh - var(--toph) - 28px);min-height:420px;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.sx-ch-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.sx-ch-h>.ico{width:26px;height:26px;padding:5px;border-radius:8px;background:var(--brand-soft);color:var(--brand-ink);flex:none}
.sx-ch-h div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.sx-ch-h small{color:var(--ink-3);font-size:11.5px}
.sx-quota{font-size:11px;color:var(--ink-3);white-space:nowrap}
.sx-ch-x{display:none}
.sx-ch-help{margin:0;padding:8px 14px;font-size:11.5px;color:var(--ink-3);background:var(--panel-2);border-bottom:1px solid var(--line)}
.sx-msgs{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:8px}
.sx-m{max-width:90%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.sx-m.u{align-self:flex-end;background:var(--brand-solid);color:var(--on-brand);border-bottom-right-radius:4px}
.sx-m.a{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.sx-m.a.err{border-color:var(--crit);background:var(--crit-soft);color:var(--crit-ink)}
.sx-m.wait{color:var(--ink-3)}
.sx-m .spin{width:12px;height:12px;margin-right:4px;vertical-align:-2px}
.sx-m-f{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.sx-m.u .sx-chip{background:var(--on-brand);color:var(--brand-solid)}
.sx-m-c{margin-top:6px;font-size:11.5px;color:var(--ok-ink);display:flex;gap:4px;align-items:center}
.sx-m-c .ico{width:12px;height:12px}
.sx-prompts{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:4px}
.sx-prompts .chip{height:auto;min-height:28px;padding:5px 12px;white-space:normal;text-align:left;font-size:12px}
.sx-att{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px}
.sx-att:not(:empty){padding-top:8px}
.sx-link{padding:8px 12px 0}
.sx-link input{width:100%}
.sx-in{display:flex;gap:6px;align-items:flex-end;padding:10px 12px 12px}
.sx-in textarea{flex:1;resize:none;min-height:38px;max-height:120px;padding:9px 11px;font:400 13.5px/1.4 var(--f-sans)}
.sx-in .ico-btn{width:38px;height:38px;flex:none}
.sx-in .ico-btn .ico{width:17px;height:17px}
.sx-in .ico-btn.on{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}
.sx-send{background:var(--brand-solid);color:var(--on-brand);border-color:var(--brand-solid)}
.sx-send:hover{color:var(--on-brand);filter:brightness(1.08)}
.sx-send:disabled{opacity:.5;cursor:wait}
.sx-dropmsg{display:none;position:absolute;inset:0;background:var(--brand-soft);border:2px dashed var(--brand);border-radius:var(--r-lg);
  align-items:center;justify-content:center;gap:8px;font-weight:600;color:var(--brand-ink);z-index:2}
.sx-chat.drop .sx-dropmsg{display:flex}
.sx-fab,.sx-scrim{display:none}

/* Tablet / điện thoại: chat thành ngăn kéo bên phải, mở bằng nút nổi */
@media (max-width:1100px){
  .sx-body{grid-template-columns:minmax(0,1fr)}
  .sx-chat{position:fixed;top:var(--toph);right:0;bottom:0;width:min(420px,100vw);height:auto;min-height:0;z-index:60;border-radius:0;border-width:0 0 0 1px;
    transform:translateX(102%);visibility:hidden;transition:transform .2s ease,visibility 0s .2s}
  .sx-chat.open{transform:none;visibility:visible;transition-delay:0s;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .sx-ch-x{display:grid}
  .sx-fab{display:inline-flex;position:fixed;right:18px;bottom:18px;z-index:50;height:48px;padding:0 18px;border-radius:24px;gap:7px;align-items:center;
    background:var(--brand-solid);color:var(--on-brand);border:0;font:600 14px var(--f-sans);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25)}
  .sx-fab .ico{width:18px;height:18px}
  .sx-scrim.on{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.4)}
  .sx-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-in .ico-btn{width:44px;height:44px}
  .sx-in textarea{min-height:44px;font-size:16px}
}
@media (max-width:620px){
  .sx-steps{grid-template-columns:minmax(0,1fr)}
  .sx-plan,.sx-intro{grid-template-columns:1fr}
  .sx-chat{width:100vw}
}
@media (pointer:coarse){.sx-c input:not([type=checkbox]),.sx-c select{height:38px}.sx-ac .ico-btn{width:34px;height:34px}.sx-tg{height:32px}}

/* In bảng mật khẩu: chỉ còn bảng, không menu, không nút */
@media print{
  body.sx-print .app,body.sx-print #toast,body.sx-print .sx-noprint,body.sx-print .m-x{display:none!important}
  body.sx-print .ovl{position:static;background:none;padding:0;display:block}
  body.sx-print .modal{border:0;box-shadow:none;max-width:none;width:auto;max-height:none;overflow:visible;padding:0}
  body.sx-print .modal>h3{border:0}
  body.sx-print .sx-pw-sheet{border:0}
}
.fx-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px}.fx-head .eyebrow{margin:0}

/* ───── src/css/ui-stock.css ───── */
/* Kho thành phẩm / bán thành phẩm — xưởng không kiểu AVL (src/views/stock-cnc.js). Dựa trên khung .pc-* (ô KPI, tab, thanh tham số)
   và bảng DataTable dùng chung. Chỉ dùng biến màu có sẵn: sáng/tối tự theo. */
.kho{min-width:0}
.kho-main{min-width:0}
/* Khung bên mở: chia đôi master–detail — bảng ~55%, sổ của mã ~45%, khung bên dính khi cuộn trang */
.kho.side-on{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:12px;align-items:start}
.kho-side{position:sticky;top:8px;max-height:calc(100vh - 96px);overflow:auto;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg)}
.kho-side[hidden]{display:none}

/* 4 ô số: bấm để lọc; ô đang lọc có viền đậm */
.kho-kpi .kpi .kl{gap:6px}
.kho-kpi .kpi .mps-kt{white-space:normal;overflow:visible;line-height:1.25}
.kho-kpi .kpi .sw{flex:none;width:8px;height:8px;border-radius:50%}
.kho-sw-ok{background:var(--ok)}.kho-sw-info{background:var(--info)}.kho-sw-warn{background:var(--warn)}.kho-sw-plum{background:var(--plum)}
.kho-kpi .kpi.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--brand-soft)}
.kho.side-on .kho-kpi .kpi{padding:8px 10px}
.kho.side-on .kho-kpi .kv{font-size:20px}
.kho.side-on .kho-kpi .ks{display:none}

/* Hàng tab + (!) cách đọc */
.kho-tabrow{display:flex;align-items:flex-end;gap:8px 12px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.kho-tabrow .kho-tabs{flex:1 1 auto;margin-bottom:0;border-bottom:0;min-width:0}
.kho-help{display:inline-flex;align-items:center;gap:8px;padding-bottom:8px}

/* Chip lọc nhanh của tab */
.kho-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.kho-chips .chip{cursor:pointer;font:inherit;font-size:12.5px}
.kho-chips .chip b{font-variant-numeric:tabular-nums}
.kho-chips .chip.kho-chip-crit:not(.on){color:var(--crit-ink);border-color:var(--crit-soft)}
/* Chip riêng của màn đã lọc: ẩn hàng chip trống của DataTable (ô tìm vẫn còn) */
.kho .dt-chiplist:empty{display:none}

/* Bảng DataTable trong màn kho: bỏ hàng view (màn đã có tab + chip riêng), ô tìm và thanh công cụ nằm một hàng;
   bảng cuộn TRONG khung — hàng tiêu đề dính trên, cột mã dính trái, hàng Tổng dính đáy: cuộn chiều nào cũng không mất tiêu đề */
.kho .dt-views{display:none}
.kho .dt-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.kho .dt-chips{flex:0 1 300px;min-width:0;overflow:visible}
.kho .dt-bar{flex:1 1 auto;min-width:0;justify-content:flex-end}
.kho .dt-bar .sp{display:none}
.kho .dt-bulk,.kho .dt-tbl,.kho .dt-pg{flex:1 1 100%;min-width:0}
.kho .dt-tbl .tw{max-height:max(280px,calc(100vh - 372px));overflow:auto}
.kho .dt-tbl .tw table.dt thead th{position:sticky;top:0;z-index:2}
.kho .dt-tbl .tw table.dt thead th.pin-l,.kho .dt-tbl .tw table.dt thead th.pin-r{z-index:3}
.kho .dt-tbl .tw table.dt tfoot td{position:sticky;bottom:0;z-index:2;background:var(--panel-2);border-top:1px solid var(--line-2)}
.kho .dt-tbl .tw table.dt tfoot td.pin-l,.kho .dt-tbl .tw table.dt tfoot td.pin-r{z-index:3}
.kho table.dt thead th.kho-w{white-space:normal;line-height:1.3;min-width:78px;max-width:112px;vertical-align:bottom}
.kho table.dt tbody td{padding-top:8px;padding-bottom:8px}
.kho table.dt td[data-ck="code"] .ent-name{display:block;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Ô trong bảng */
.kho .num{font-variant-numeric:tabular-nums}
.kho-main-n{font-size:14px}
.kho-zero{color:var(--ink-3);font-weight:500}
.kho-neg{color:var(--crit-ink)}
.kho-pos{color:var(--ok-ink)}
.kho-dimn{color:var(--ink-3)}
.kho-role{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.kho-last{display:inline-block;white-space:nowrap;line-height:1.35}
.kho-last small{display:block;font-size:11px;color:var(--ink-3)}
.kho-nw{white-space:nowrap}
.kho-sub{display:block;font-size:11px;color:var(--ink-3);line-height:1.35}
.kho-note{display:inline-block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;color:var(--ink-2)}
.kho-open{display:block;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.kho-open:hover .code{text-decoration:underline}
.kho-open:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:var(--r)}
.kho table.dt tbody tr.kho-dim td{color:var(--ink-3)}
.kho table.dt tbody tr.kho-dim td:not(.dt-act)>*{opacity:.62}

/* Nút Hiện/Ẩn mã chưa có tồn */
.kho-empty-bar{margin-top:10px}
.kho-empty-bar:empty{display:none}
.kho-miss{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.kho-miss-b{height:28px;font-weight:600;color:var(--ink-2)}
.kho-miss-b .ico{width:14px;height:14px;vertical-align:-2.5px}

/* Thanh lọc tab Sổ xuất nhập */
.kho-mbar{row-gap:8px}
.kho-mbar .btn .ico{width:13px;height:13px}

/* Popover "Dùng cho" */
.pop.kho-pop{width:min(360px,calc(100vw - 16px))}

/* ── Khung bên phải: sổ của một mã ── */
.kho-sd-hd{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:start;
  padding:10px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.kho-sd-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0;font-size:15px;line-height:1.4}
.kho-sd-t .ent-code{font-size:15px;font-weight:700}
.kho-sd-nm{min-width:0;color:var(--ink-2);font-size:13px;overflow-wrap:anywhere}
.kho-sd-x{padding:0 6px}
.kho-sd-meta{grid-column:1 / -1;display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.kho-sd-meta:empty{display:none}
.kho-sd-used{min-width:0;overflow-wrap:anywhere}
.kho-sd-b{padding:10px 12px 14px;display:flex;flex-direction:column;gap:12px}
.kho-sd-k{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kho-mk{min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.kho-mk-tp{border-left:3px solid var(--ok)}
.kho-mk-btp{border-left:3px solid var(--info)}
.kho-mk span{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.kho-mk b{display:block;margin-top:2px;font-size:22px;font-variant-numeric:tabular-nums;line-height:1.25}
.kho-mk small{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-3);line-height:1.45}
.kho-mk small i{font-style:normal;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.kho-sd-act{display:flex;gap:6px;flex-wrap:wrap}
.kho-sd-act .btn .ico{width:14px;height:14px;vertical-align:-2.5px;margin-right:3px}
.kho-sd-sec h4{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:13px}
.kho-sd-sec h4 .sp{flex:1}
.kho-sd-seg button{padding-left:9px;padding-right:9px}
.kho-lg{max-height:none;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table.t.kho-lg-t{border:0;min-width:100%}
.kho-lg-t th{position:sticky;top:0;z-index:1;background:var(--panel-2);white-space:nowrap}
.kho-lg-t td{vertical-align:top}
.kho-kn{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
table.t.kho-lg-t th,table.t.kho-lg-t td{padding-left:8px;padding-right:8px}
.kho-ref{margin-top:3px;font-size:12px}
.kho-ref .ent-code{font-size:12px}
/* nhãn ngăn cạnh loại: chỉ hiện ở điện thoại (khi cột Ngăn ẩn) */
.kho-bm,.kho-rm{display:none}
.kho-open-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;padding:6px 10px;border:1px dashed var(--line-2);
  border-radius:var(--r);font-size:12.5px;color:var(--ink-2)}
.kho-more{margin:8px 0 0;font-size:12px}

/* ── Hộp nhỏ: điều chỉnh / chuyển ngăn / trả lại ── */
.kho-box{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;min-width:min(380px,calc(100vw - 80px))}
.kho-box-r{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.kho-box-l{flex:none;min-width:84px;font-size:12px;font-weight:500;color:var(--ink-2)}
.kho-box .fld input{height:var(--h-input)}
.kho-box input.bad{border-color:var(--crit);background:var(--crit-soft)}
.kho-box-calc{font-size:12.5px;color:var(--ink-2);padding:6px 10px;border-radius:var(--r);background:var(--panel-2)}
.kho-box-calc:empty{display:none}
.kho-box-e{margin:0;font-size:12.5px;color:var(--crit-ink);font-weight:600}
.kho-box-e[hidden]{display:none}

/* ── Đơn hàng: khối "Lấy hàng từ kho" (trong ngăn chi tiết đơn) ── */
.ost-w{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table.t.ost-t{border:0;min-width:100%}
.ost-t th,.ost-t td{white-space:nowrap}
.ost-t th{background:var(--panel-2)}
.ost-t td{vertical-align:middle}
.ost-t th:first-child,.ost-t td.ost-c{position:sticky;left:0;z-index:1;background:var(--panel)}
.ost-t th:first-child{background:var(--panel-2);z-index:2}
.ost-t td.ost-c{white-space:normal;min-width:150px;max-width:260px}
.ost-both{margin-top:3px}
.ost-sub{display:block;font-size:11px;font-weight:400;color:var(--ink-3);line-height:1.35}
.ost-t .ost-p{text-align:right}
.ost-pick{display:inline-flex;align-items:center;gap:4px}
.ost-q{width:64px;height:28px;padding:0 6px;text-align:right;font:inherit;font-variant-numeric:tabular-nums;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);color:var(--ink)}
.ost-q:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.ost-b{height:28px;max-width:150px;font:inherit;font-size:12.5px}
.ost-act{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:8px}
.ost-note{flex:1 1 180px;min-width:0;height:var(--h-input)}
.ost-act .btn .ico{width:15px;height:15px;vertical-align:-2.5px;margin-right:3px}
.ost-ra{text-align:right}
.ost-ra .btn .ico{width:13px;height:13px;vertical-align:-2px;margin-right:3px}
.ost-bm{margin-left:6px}
.ost-ro{margin:0 0 8px;font-size:12.5px}

@media(max-width:1280px){
  .kho.side-on{grid-template-columns:minmax(0,50fr) minmax(0,50fr)}
}
/* Hẹp: khung bên thành lớp toàn màn hình (không phải ngăn kéo hẹp) */
@media(max-width:1000px){
  .kho.side-on{display:block}
  .kho-side{position:fixed;inset:0;z-index:70;max-height:none;border:0;border-radius:0}
  .kho-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kho.side-on .kho-kpi .ks{display:block}
}
@media(max-width:640px){
  .kho-kpi .kpi{padding:8px 10px}
  .kho-kpi .kpi .kv{font-size:20px}
  /* 3 tab một hàng, chữ gọn; (!) cách đọc xuống cạnh chip */
  .kho-tabrow{gap:0 4px}
  .kho-tabs.pc-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .kho-tabs.pc-tabs>button{justify-content:center;padding:10px 2px;font-size:12.5px}
  .kho-tabs .pc-tl{white-space:normal;text-align:center;line-height:1.2}
  .kho .dt-chips{flex:1 1 100%}
  .kho .dt-bar{justify-content:flex-start}
  .kho .dt-tbl .tw{max-height:64vh}
  .kho table.dt td[data-ck="code"] .ent-name{max-width:150px}
  .kho table.dt .kho-rd{display:none}
  .kho-rm{display:block;margin-top:3px}
  .kho-rm .pill{font-size:10.5px}
  .kho table.dt th.dt-no,.kho table.dt td.dt-no{display:none}
  .kho table.dt thead th.kho-w{min-width:78px;max-width:96px}
  .kho-mbar .pc-f{flex:1 1 100%}
  .kho-mbar select,.kho-mbar input[type=date]{flex:1;width:auto}
  .kho-mbar .seg{flex:1}
  .kho-mbar .seg button{flex:1 1 auto;padding-left:4px;padding-right:4px;white-space:nowrap}
  .kho-mbar .pc-f.kho-md{flex:1 1 calc(50% - 4px);flex-direction:column;align-items:stretch;gap:2px}
  .kho-note{max-width:180px}
  .kho-box{min-width:0}
  /* sổ trong khung bên: ẩn cột Ngăn, nhãn ngăn đứng trước loại → đủ 4 cột trong bề ngang điện thoại */
  .kho-bd{display:none}
  .kho-bm{display:inline-flex}
  .kho-kn{flex-wrap:wrap;white-space:normal;gap:3px 5px}
  table.t.kho-lg-t th,table.t.kho-lg-t td{padding-left:6px;padding-right:6px}
  /* khối Lấy hàng từ kho: mỗi dòng đơn thành một thẻ — mã ở trên, 5 số có nhãn, ô lấy ở dưới; không cuộn ngang */
  .ost-t.ost-lines thead{display:none}
  .ost-t.ost-lines tbody tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px 8px;padding:10px;border-bottom:1px solid var(--line)}
  .ost-t.ost-lines tbody tr:last-child{border-bottom:0}
  .ost-t.ost-lines td,.ost-t.ost-lines td.n{display:block;grid-column:span 2;padding:0;border:0;white-space:normal;text-align:left;min-width:0}
  .ost-t.ost-lines td[data-l]:nth-child(n+5){grid-column:span 3}
  .ost-t.ost-lines td.ost-c{grid-column:1 / -1;position:static;min-width:0;max-width:none;background:none}
  .ost-t.ost-lines td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:500;color:var(--ink-3);line-height:1.35}
  .ost-t.ost-lines td.ost-p{grid-column:1 / -1;text-align:left}
  .ost-pick{display:flex}
  .ost-q{flex:0 0 84px;height:34px}
  .ost-b{flex:1;max-width:none;height:34px}
  .ost-act .btn{flex:1 1 auto;justify-content:center}
  .ost-rl{display:none}
  .ost-ra .btn .ico{margin-right:0}
  .ost-t th,.ost-t td{padding-left:8px;padding-right:8px}
  .ost-t td.ost-c{min-width:0}
}

/* ───── src/css/ui-stockcard.css ───── */
/* Thẻ kho (stockcard.js) */
.sc-pick{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;position:relative}
.sc-pick-wide .sc-search{flex:1;min-width:min(420px,100%);max-width:640px;font-size:15px;padding:10px 12px}
.sc-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:4px}
.sc-home-card{margin-bottom:0}
.sc-home-list{display:flex;flex-direction:column}
.sc-home-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:baseline;padding:9px 12px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.sc-home-row:hover{background:var(--row-hover)}
.sc-home-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-home-sub{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-home-empty{padding:12px 14px 14px}
@media(max-width:900px){.sc-home{grid-template-columns:1fr}}
.sc-pick .btn.sel{background:var(--ink);color:var(--bg)}
.sc-sug{position:absolute;top:40px;left:0;z-index:20;width:min(560px,100%);max-height:340px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.sc-sug a{display:flex;gap:8px;align-items:baseline;padding:7px 10px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.sc-sug a:hover{background:var(--row-hover)}
.sc-flow{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.sc-box{flex:1;min-width:130px;border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;background:var(--panel)}
.sc-bl{font-size:11px;font-weight:600;color:var(--ink-2)}
.sc-bv{font:600 20px var(--f-display);margin-top:4px;font-variant-numeric:tabular-nums}
.sc-bs{font-size:11px;color:var(--ink-3);margin-top:3px}
.sc-warn{border-color:var(--warn)}.sc-crit{border-color:var(--crit);background:var(--crit-soft)}.sc-ok{border-color:var(--ok)}
.sc-ar{align-self:center;width:0;height:0;border-left:7px solid var(--line-2);border-top:6px solid transparent;border-bottom:6px solid transparent}
.sc-note{margin-top:8px;font-size:12.5px}
.sc-bar{display:inline-block;width:110px;height:8px;border-radius:4px;background:var(--grid);overflow:hidden;vertical-align:middle}
.sc-bar i{display:block;height:100%;background:var(--c1);border-radius:4px}
.sc-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.sc-card{max-height:460px;overflow:auto}
a.sc-link{color:inherit;text-decoration:none;border-bottom:1px dashed var(--line-2)}
a.sc-link:hover{border-bottom-color:var(--brand)}
@media(max-width:900px){.sc-2{grid-template-columns:1fr}.sc-ar{display:none}}

/* ───── 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; } }

/* ───── src/css/ui-usp.css ───── */
/* USP — Báo giá & đóng lệnh (quotes.js, jobclose.js). Chỉ biến --… có sẵn. */

.drawer.dr-wide,
.drawer:not([hidden]) {
  z-index: 65;
}
@media (max-width: 780px) {
  .drawer,
  .drawer.dr-wide {
    z-index: 72;
  }
}

.jc-card {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0 12px;
  background: var(--card);
}
.jc-card-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  margin-bottom: 10px;
}
.jc-margin {
  font: 700 28px/1.1 var(--f-sans);
  letter-spacing: -0.02em;
}
.jc-margin--neg {
  color: var(--crit);
}
.jc-card-money {
  font-size: 13px;
  color: var(--text-2);
}
.jc-cmp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
@media (max-width: 420px) {
  .jc-cmp {
    grid-template-columns: 1fr;
  }
}
.jc-cmp-cell {
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
  background: var(--panel);
}
.jc-cmp-lab {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 4px;
}
.jc-cmp--bad {
  background: color-mix(in srgb, var(--crit) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--crit) 35%, var(--line-2));
}
.jc-cmp--good {
  background: color-mix(in srgb, var(--ok) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--ok) 30%, var(--line-2));
}
.jc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.jc-setup-warn {
  color: var(--crit);
}
.jc-vi-sao textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

[data-view="quotes"] .ent-code[data-qg-code] {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent);
}

/* ───── src/css/ui-wo-full.css ───── */
/* ============================================================
   LỆNH SẢN XUẤT TOÀN MÀN HÌNH (BENTO GRID)
   Hợp đồng giao diện cho màn Lệnh SX toàn màn hình (spec 2026-11-10)
   Quy tắc:
   - 100% biến màu từ main.css (--card, --panel, --ink, --brand...)
   - Không mã màu hex/rgb/hsl cứng
   - Số dùng font-variant-numeric: tabular-nums
   - ≥1280px: không cuộn trang, ô tự cuộn bên trong
   - 900–1279px: bx-c3 → 6 cột, bx-c4/6/8 → 12 cột
   - <900px: 1 cột xếp dọc, cuộn trang
   ============================================================ */

/* ── Container gốc toàn màn hình (.wof) ── */
.wof {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--toph, 56px));
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
}

/* Khi màn .wof được gắn vào #view trong .main, triệt tiêu padding của layout cũ */
.main:has(.wof) {
  padding: 0;
  max-width: none;
  overflow: hidden;
}
.main:has(.wof) .pg-sub:empty {
  display: none;
}

/* ── Header một dòng gọn, dính trên (.wof-head) ── */
.wof-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: none;
  z-index: 10;
  min-width: 0;
  overflow: hidden;
}

/* Nút quay lại danh sách lệnh */
.wof-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  font: 500 13px/1 var(--f-sans);
  transition: background .15s, color .15s, border-color .15s;
  flex: none;
  text-decoration: none;
}
.wof-back:hover {
  background: var(--panel-2);
  color: var(--ink);
  border-color: var(--line-2);
}
.wof-back .ico {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

/* Khối nhận diện lệnh: Mã lệnh + Prio + Pill trạng thái + Mã mục + Tên mục */
.wof-id {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: none;
}
.wof-id > b {
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wof-id .ent-code {
  font-size: 12.5px;
  white-space: nowrap;
}
.wof-id-name {
  font-size: 12.5px;
  color: var(--ink-2);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Thanh bước trạng thái lệnh (Nháp → Đã phát → Đang làm → Xong; Huỷ tách riêng) */
.wof-steps {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  max-width: min(360px, 32vw);
  overflow-x: auto;
  flex: none;
  scrollbar-width: none;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.wof-st {
  font-weight: 500;
  color: var(--ink-3);
}
.wof-st.done {
  color: var(--ink-2);
}
.wof-st.on {
  font-weight: 700;
  color: var(--ink);
}
.wof-st--cancel {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  font-weight: 700;
  color: var(--crit-ink);
}
.wof-st-sep {
  display: inline-block;
  width: 14px;
  height: 1px;
  margin: 0 4px;
  vertical-align: middle;
  background: var(--line-2);
  position: relative;
}
.wof-st-sep::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  margin-top: -3px;
  border: 3px solid transparent;
  border-left-color: var(--line-2);
}

/* Khối siêu dữ liệu ngắn: Số lượng · Hạn · ETA · Tiến độ % */
.wof-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 6px;
  min-width: 0;
  flex: 1;
}
.wof-m {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  white-space: nowrap;
}
.wof-m small {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  text-transform: none;
}
.wof-m b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Cụm nút hành động */
.wof-act {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.wof-act .btn {
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
}
.wof-act .dr-more {
  position: relative;
  display: inline-flex;
}

/* ── Thanh tab cuộn ngang theo tổ (.wof-tabs) ── */
.wof-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 38px;
  min-height: 38px;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  flex: none;
  white-space: nowrap;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.wof-tabs::-webkit-scrollbar {
  display: none;
}

.wof-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-2);
  font: 500 13px/1 var(--f-sans);
  cursor: pointer;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
  flex: none;
}
.wof-tab:hover {
  color: var(--ink);
  background: var(--panel-2);
}
.wof-tab.on,
.wof-tab[aria-selected="true"] {
  color: var(--brand-ink);
  font-weight: 600;
  border-bottom-color: var(--brand);
}

/* Huy hiệu tỷ lệ tiến độ trên tab (vd 12/40) */
.wof-tab-p {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--ink-3);
  font-weight: 500;
  line-height: 1.3;
}
.wof-tab.on .wof-tab-p,
.wof-tab[aria-selected="true"] .wof-tab-p {
  background: var(--brand-soft);
  color: var(--brand-ink);
}

/* Chấm trạng thái công đoạn của tổ (.wof-dot) */
.wof-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.wof-dot--wait {
  background: var(--ink-3);
  opacity: .5;
}
.wof-dot--run {
  background: var(--warn);
}
.wof-dot--done {
  background: var(--ok);
}
.wof-dot--late {
  background: var(--crit);
}
.wof-dot--block {
  background: var(--crit-solid);
}

/* ── Thân chính (.wof-body): Bọc lưới Bento ── */
.wof-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 14px 14px;
  background: var(--bg);
}

/* ── Lưới BENTO 12 cột (.bento) ── */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

/* Ô Bento (.bx) */
.bx {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color .15s;
}
.bx:hover {
  border-color: var(--line-2);
}

/* Cột chiếm dụng trên lưới 12 cột (.bx-c*) */
.bx-c3  { grid-column: span 3; }
.bx-c4  { grid-column: span 4; }
.bx-c6  { grid-column: span 6; }
.bx-c8  { grid-column: span 8; }
.bx-c12 { grid-column: span 12; }

/* Chiều cao gấp đôi (.bx-r2) */
.bx-r2  { grid-row: span 2; }

/* Đầu ô (.bx-h) */
.bx-h {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  flex: none;
}
.bx-h h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bx-h .bx-act {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.bx-h .bx-act .btn {
  height: 24px;
  padding: 0 8px;
  font-size: 11.5px;
}
.bx-h .hint-b {
  flex: none;
}

/* Thân ô (.bx-b): Tự cuộn độc lập */
.bx-b {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
  -webkit-overflow-scrolling: touch;
}

/* Ô trống (.bx-empty) */
.bx-empty {
  padding: 16px 8px;
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.4;
}

/* ── Ô KPI (.bx-kpi): Thiết kế vắn tắt, số lớn, dòng phụ ngắn ── */
.bx-kpi {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 84px;
}
.bx-kpi .bx-h {
  padding: 0;
  border-bottom: 0;
  margin-bottom: 2px;
  background: transparent;
}
.bx-kpi .bx-h h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink-2);
}
.bx-kpi .bx-v {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.bx-kpi .bx-v .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
}
.bx-kpi .bx-s {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* Màu ngữ nghĩa cho KPI */
.bx-kpi.is-ok .bx-v    { color: var(--ok-ink); }
.bx-kpi.is-warn .bx-v  { color: var(--warn-ink); }
.bx-kpi.is-crit .bx-v  { color: var(--crit-ink); }

/* Bảng trong ô Bento: Kế thừa chuẩn .t .dt-sub
   Ô hẹp KHÔNG cuộn ngang: chữ xuống dòng, mã + tên 2 dòng, cột phụ thành dòng phụ (.wof-sub) hoặc (!).
   Nếu bảng vẫn rộng hơn ô (dữ liệu bất thường): CHỈ .bx-b cuộn (không có .tw cuộn riêng) nên
   hàng tiêu đề dính trên và cột đầu dính trái cùng một khung cuộn → không bao giờ lệch nhau. */
.bx .tw {
  overflow: visible;
}
.bx .t.dt-sub {
  width: 100%;
  margin: 0;
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 0;
}
.bx .t.dt-sub th {
  font-size: 11.5px;
  line-height: 1.3;
  padding: 6px 8px;
  color: var(--ink-3);
  background: var(--panel-2);
  white-space: normal;
  vertical-align: bottom;
  position: sticky;
  top: -10px; /* bù padding-top của .bx-b: dính sát mép ô, không hở khe cho dòng trôi qua */
  z-index: 2;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.bx .t.dt-sub td {
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.4;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: break-word; /* bẻ ở khoảng trắng / dấu gạch; không bẻ giữa ngày 04/11 */
  border-bottom: 1px solid var(--line);
}
.bx .t.dt-sub tr:last-child td {
  border-bottom: 0;
}
.bx .t.dt-sub tr:hover td {
  background: var(--row-hover);
}
.bx .t.dt-sub .n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Số, ngày, nút, nhãn trạng thái: giữ một dòng (không bẻ 1.234 thành hai dòng). Mã dài được ngắt ở dấu gạch. */
.bx .t.dt-sub td.n,
.bx .t.dt-sub td.wof-nw,
.bx .t.dt-sub td .btn,
.bx .t.dt-sub td .pill {
  white-space: nowrap;
  overflow-wrap: normal;
}
/* Cột đầu dính trái + ô tiêu đề cột đầu nằm TRÊN các ô tiêu đề khác (chỉ có tác dụng khi .bx-b phải cuộn ngang) */
.bx .t.dt-sub > thead > tr > th:first-child,
.bx .t.dt-sub > tbody > tr > td:first-child {
  position: sticky;
  left: -12px; /* bù padding-left của .bx-b */
}
.bx .t.dt-sub > tbody > tr > td:first-child {
  z-index: 1;
  background: var(--card);
}
.bx .t.dt-sub > tbody > tr:hover > td:first-child {
  background: linear-gradient(var(--row-hover), var(--row-hover)), var(--card);
}
.bx .t.dt-sub > thead > tr > th:first-child {
  z-index: 3;
  background: var(--panel-2);
}
/* Dòng phụ dưới ô chính: thay cho cột phụ */
.bx .wof-sub {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-3);
  font-weight: 400;
}
.bx .t.dt-sub td.n .wof-sub {
  white-space: nowrap;
}
/* Dòng phụ dưới ô ngày (người thao tác…) được xuống dòng dù dòng chính giữ một dòng */
.bx .t.dt-sub td.wof-nw .wof-sub {
  white-space: normal;
}
/* Ô vật tư hẹp: số lớn + đơn vị dài thì đơn vị / dòng phụ được xuống dòng, nhường chỗ cho cột mã + tên */
.bx .wof-mat td.n,
.bx .wof-mat td.n .wof-sub {
  white-space: normal;
}
/* Ô vật tư: dòng 1 mã (+ (!)), dòng 2 tên xuống dòng tự do */
.bx .wof-cd {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Mã, tên, tên file dài liền một khối (P-9C-020_op20_finish_…nc): được bẻ giữa chữ khi không còn chỗ, không đẩy ô tràn ngang */
.bx .wof-cd .ent-code,
.bx .wof-nm,
.bx .wof-brk,
.bx .t.dt-sub td .wof-sub {
  overflow-wrap: anywhere;
  min-width: 0;
}
.bx .wof-nm {
  color: var(--ink-2);
  line-height: 1.35;
}
.bx .wof-mat > thead > tr > th:first-child,
.bx .wof-mat > tbody > tr > td:first-child {
  width: 100%;
}
.bx .wof-log > tbody > tr > td:first-child {
  width: 1%;
}

/* Bảng WoRoute có thể bấm dòng để chuyển sang tab tổ tương ứng */
.bx tr.wo-rt-clickable {
  cursor: pointer;
  transition: background .12s;
}
.bx tr.wo-rt-clickable:hover td {
  background: var(--brand-soft);
  color: var(--brand-ink);
}

/* Lưới 2 cột cho Khối Thông tin lệnh */
.bx-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  font-size: 12px;
}
.bx-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bx-info-item.span-2 {
  grid-column: span 2;
}
.bx-info-lbl {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bx-info-val {
  font-size: 12.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  word-break: break-word;
}
.bx-info-val b {
  font-weight: 600;
}

/* ── PHÂN ĐOẠN ĐÁP ỨNG (RESPONSIVE) ── */

/* 1. MÀN HÌNH RỘNG (Desktop ≥ 1280px):
      Không cuộn toàn trang! Chiều cao fit 100dvh trừ header,
      lưới bento tự thích ứng, thân mỗi ô (.bx-b) tự cuộn bên trong. */
@media (min-width: 1280px) {
  .wof {
    height: calc(100dvh - var(--toph, 56px));
    overflow: hidden;
  }
  .wof-body {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /* Hàng đầu (ô KPI) cao theo nội dung; các hàng sau chia đều phần còn lại để cả tab vừa một màn. */
  .bento {
    min-height: 100%;
    grid-template-rows: auto;
    grid-auto-rows: minmax(140px, 1fr);
  }
  .bx {
    min-height: 0;
  }
  .bx-kpi {
    grid-row: span 1;
    min-height: 80px;
  }
}

/* 2. MÀN HÌNH TRUNG BÌNH (Tablet ngang / laptop nhỏ: 900px – 1279px):
      Co giãn tự nhiên: bx-c3 → 6 cột (2 ô/hàng), bx-c4/6/8 → 12 cột (1 ô/hàng).
      Vùng thân .wof-body cuộn mượt. */
@media (min-width: 900px) and (max-width: 1279px) {
  .wof {
    height: auto;
    min-height: calc(100dvh - var(--toph, 56px));
    overflow: visible;
  }
  .wof-body {
    overflow: visible;
    height: auto;
  }
  .bento {
    grid-auto-rows: auto;
  }
  .bx-c3 { grid-column: span 6; }
  .bx-c4 { grid-column: span 12; }
  .bx-c6 { grid-column: span 12; }
  .bx-c8 { grid-column: span 12; }
  .bx-r2 { grid-row: span 1; }
  .bx-b {
    max-height: 380px;
  }
  .wof-head {
    flex-wrap: wrap;
    height: auto;
    min-height: 48px;
    padding: 8px 16px;
    gap: 8px 12px;
  }
  .wof-meta {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

/* 3. MÀN HÌNH HẸP (Điện thoại & Tablet dọc < 900px):
      Xếp dọc một cột duy nhất, trang cuộn tự nhiên, nút và tap target rộng rãi. */
@media (max-width: 899px) {
  .wof {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .wof-head {
    height: auto;
    min-height: 48px;
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .wof-id {
    flex: 1 1 auto;
  }
  .wof-id-name {
    max-width: 140px;
  }
  .wof-act {
    order: 2;
  }
  .wof-meta {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
  }
  .wof-tabs {
    padding: 0 10px;
  }
  .wof-body {
    padding: 8px;
    overflow: visible;
    height: auto;
  }
  .bento {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .bx {
    grid-column: span 12 !important;
    grid-row: span 1 !important;
    width: 100%;
  }
  .bx-b {
    max-height: 340px;
  }
  .bx-info-grid {
    grid-template-columns: 1fr;
  }
  .bx-info-item.span-2 {
    grid-column: span 1;
  }
}

/* Thông tin lệnh trong ô bento: trường dạng chữ gọn (không khung nhập), 2 cột */
.wof .bx .dr-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.wof .bx .dr-fv{background:none;border:0;padding:0;min-height:0}
.wof .bx .dr-fl{margin-bottom:1px;font-size:11px}

/* Mở lệnh bằng bấm hàng (không vẽ lại trang) → dòng phụ đề của danh sách còn ở trên, đẩy trang cuộn 30px. */
.main:has(.wof) .pg-sub { display: none; }

/* Chip MÀU của SKU Cánh (Ent.colorChip) và nhãn đơn vị cái/cặp (Ent.unitTag): màu chấm theo tên màu, chữ giữ màu thường để đọc được. */
.pill.p-color { background: var(--bg-2, #f3f4f6); color: var(--ink-2); box-shadow: inset 3px 0 0 var(--cc, var(--line-2)); padding-left: 9px; }
.pill.p-color.c-black  { --cc: #222; }
.pill.p-color.c-white  { --cc: #fff; box-shadow: inset 3px 0 0 #fff, inset 0 0 0 1px var(--line-2); }
.pill.p-color.c-red    { --cc: #d33; }
.pill.p-color.c-blue   { --cc: #2f6fd6; }
.pill.p-color.c-green  { --cc: #2f9e57; }
.pill.p-color.c-yellow { --cc: #e5b800; }
.pill.p-color.c-orange { --cc: #f08a24; }
.pill.p-color.c-purple { --cc: #7b4bc7; }
.pill.p-color.c-pink   { --cc: #e86aa6; }
.pill.p-color.c-silver { --cc: #b4b8c0; }
.pill.p-color.c-gold   { --cc: #c9a227; }
.pill.p-color.c-grey, .pill.p-color.c-gray { --cc: #888; }
.unit-tag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: 10.5px; line-height: 16px; background: var(--info-soft); color: var(--info-ink); }
.unit-tag.u-pair { background: var(--ok-soft); color: var(--ok-ink); }
.qty-u { white-space: nowrap; }