/* Xuân Thu · B3 09/10: màn laptop của Anna và Bích (Việc của chị · Duyệt kế hoạch · Kế hoạch tuần · Soát từng lô · Tình hình cửa hàng · Khách đặt may · Hỗ trợ).
   Nạp SAU app.css, cùng layer screens. Màu: cam = chỉ nút chính; vàng nâu (--status-warn) = cần làm; đỏ = sai / quá hạn; xanh = xong. Số dùng tabular-nums. */
:root{--buoc-1:#DCE6F2;--buoc-2:#BCCFE6;--buoc-3:#97B4D7;--buoc-4:#7096C4;--buoc-5:#4F79AE;--buoc-6:#365E92;--buoc-7:#22446E}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--buoc-1:#22303F;--buoc-2:#2A4159;--buoc-3:#345676;--buoc-4:#426E96;--buoc-5:#5889B5;--buoc-6:#78A6CF;--buoc-7:#A4C6E6} }
:root[data-theme="dark"]{--buoc-1:#22303F;--buoc-2:#2A4159;--buoc-3:#345676;--buoc-4:#426E96;--buoc-5:#5889B5;--buoc-6:#78A6CF;--buoc-7:#A4C6E6}
@layer screens {
  .tinh-luc{font-size:var(--fs-12);color:var(--fg-muted);font-weight:400;letter-spacing:0;text-transform:none}

  /* ---- Việc của chị #duyet ---- */
  .am-luoi{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-16) var(--s-24);align-items:start}
  @media (min-width:1100px){ .am-luoi{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr)} .am-phai{position:sticky;top:calc(var(--topbar-h) + var(--s-16))} }
  .am-luoi .dq-h,.dq-pad .dq-h,.tq .dq-h{text-transform:none;letter-spacing:0;font-size:var(--fs-14);color:var(--fg-secondary);font-weight:600;margin:var(--s-16) 0 var(--s-8)}
  .am-dau{display:flex;align-items:center;gap:var(--s-12);margin:var(--s-4) 0 var(--s-8)}
  .am-dem{font-size:var(--fs-big);line-height:1;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg-primary)}
  .am-dau span{display:flex;flex-direction:column;font-size:var(--fs-16);font-weight:600;color:var(--fg-primary)}
  .am-dau small{font-size:var(--fs-12);font-weight:400;color:var(--fg-muted)}
  .am-the{border-left-width:4px}
  .am-the.can{border-left-color:var(--status-warn)}
  .am-the.do{border-left-color:var(--status-danger)}
  .am-the.canh{border-left-color:var(--status-warn-line)}   /* v2 bước 4: quá hạn của kế hoạch = ▲ vàng; .do.dm = đặt may đỏ */
  .dq-so{background:var(--bg-sunken);color:var(--fg-primary);border:1px solid var(--border-default)}
  .am-trich{display:block;font-size:var(--fs-13);font-style:italic;color:var(--fg-secondary);quotes:"“" "”";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .am-trich::before{content:open-quote}.am-trich::after{content:close-quote}
  .am-phai{border:1px solid var(--border-default);border-radius:var(--r-lg);background:var(--bg-surface);padding:var(--s-4) var(--s-16) var(--s-16);min-width:0}
  .am-phai .hm{margin:0}
  .am-luc{font-weight:400;font-size:var(--fs-12);color:var(--fg-muted);margin-left:var(--s-6)}
  .am-h3{font-size:var(--fs-13);font-weight:600;color:var(--fg-secondary);margin:var(--s-12) 0 var(--s-4)}
  .am-phai .am-kpi{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .am-ph1{display:flex;align-items:center;gap:var(--s-6);margin-top:var(--s-12);padding:var(--s-8) 0;border-top:1px solid var(--border-subtle);color:var(--fg-primary);text-decoration:none;font-size:var(--fs-13)}
  .am-ph1 span{margin-left:auto;color:var(--accent-text);font-weight:600}
  .am-cach{margin-top:var(--s-8);font-size:var(--fs-13)}.am-cach summary{cursor:pointer;color:var(--fg-secondary)}
  .am-lk{margin-top:var(--s-12)}
  .ktbox.am-sk{cursor:default}
  .am-sk .ktl{margin:2px 0;display:block}
  .am-sk-nut{display:flex;flex-wrap:wrap;gap:var(--s-8);align-items:center;margin-top:var(--s-8)}

  /* ---- bảng: tiêu đề dính dưới thanh trên cùng; nút cuối dòng luôn thấy (dạng ghost) ---- */
  @media (min-width:768px){
    .tblwrap.dinh{overflow:visible}
    .tblwrap.dinh .dtable th{top:var(--topbar-h)}   /* chỉ bảng không nằm trong khung cuộn riêng; bảng trong .tblwrap thường vẫn dính ở 0 của khung đó */
  }
  .dtable td.act .btn{opacity:1}
  .dtable td.num,.dtable th.num{font-variant-numeric:tabular-nums}

  /* ---- Duyệt kế hoạch #duyet-KH-* ---- */
  .dq-sz{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--s-8);margin-top:var(--s-12)}
  .dq-o{border:1px solid var(--border-default);border-radius:var(--r-md);padding:var(--s-8) var(--s-12);background:var(--bg-surface);display:flex;flex-direction:column;gap:var(--s-4)}
  .dq-o-dau{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-8)}
  .dq-o .sz{font-weight:600;font-size:var(--fs-14)}
  .dq-q{font-size:var(--fs-20);font-weight:700;font-variant-numeric:tabular-nums}
  .dq-q s{font-size:var(--fs-14);font-weight:400;color:var(--fg-muted);margin-right:var(--s-4)}
  .dq-o.tc{background:var(--status-danger-bg);border-color:var(--status-danger)}
  .dq-o.tc .dq-q{color:var(--status-danger)}
  .dq-o.doi{box-shadow:0 0 0 2px var(--border-strong) inset}
  .seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border-default);border-radius:var(--r-sm);overflow:hidden;background:var(--bg-sunken)}
  .seg-o{appearance:none;border:0;background:transparent;font:inherit;font-size:var(--fs-13);font-weight:600;color:var(--fg-secondary);min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer}
  .seg-o+.seg-o{border-left:1px solid var(--border-default)}
  .seg-o.nhan[aria-pressed="true"]{background:var(--bg-surface);color:var(--status-ok)}
  .seg-o.bo[aria-pressed="true"]{background:var(--status-danger-bg);color:var(--status-danger)}
  .seg-o:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
  @media (pointer:coarse){ .seg-o{min-height:var(--touch-min)} }
  .dq-ly{margin-top:var(--s-12)}.dq-ly .chips{margin:var(--s-4) 0}
  .dq-ly.sai .linput{border-color:var(--status-danger)}.dq-ly .loi{color:var(--status-danger);font-size:var(--fs-13);margin-top:var(--s-4)}
  .dq-can{color:var(--status-warn);font-weight:600}
  .dq-vs{margin-top:var(--s-8);line-height:1.5}
  .dq-lo.can{border-left:3px solid var(--status-warn)}
  .dq-loi{border:1px solid var(--status-danger);border-left-width:4px;background:var(--status-danger-bg);border-radius:var(--r-md);padding:var(--s-12) var(--s-16);margin:var(--s-8) 0}
  .dq-loi>b{color:var(--status-danger)}
  .dq-loi ul{margin:var(--s-6) 0 var(--s-8);padding-left:var(--s-20)}.dq-loi li{margin:2px 0;font-size:var(--fs-14)}
  .dq-khoa{color:var(--status-danger);font-weight:600;font-size:var(--fs-13)}
  .dq-xl{margin:var(--s-4) 0 var(--s-8);padding-left:var(--s-20);font-size:var(--fs-14);max-height:40vh;overflow:auto}.dq-xl li{margin:2px 0}
  .dq-tu summary{cursor:pointer;padding:var(--s-8) 0}
  .dq-hm{margin:var(--s-12) 0}

  /* ---- Kế hoạch tuần #ke-hoach-tuan ---- */
  .tq-nay-nut{display:flex;align-items:center;justify-content:flex-end}
  .tq-nay-ds>div span{font-size:var(--fs-13)}
  .tq-khs{display:flex;flex-direction:column}
  .tq-kh{display:grid;grid-template-columns:minmax(96px,130px) minmax(0,1fr) 92px 112px auto;gap:var(--s-8) var(--s-16);align-items:center;padding:var(--s-12) 0;border-bottom:1px solid var(--border-subtle)}
  .tq-kh:last-child{border-bottom:0}
  .tq-kh-ten,.tq-kh-so,.tq-kh-tre,.tq-kh-bar{display:flex;flex-direction:column;gap:2px;min-width:0}
  .tq-kh small{font-size:var(--fs-12);color:var(--fg-muted)}
  .tq-kh-ten a{color:var(--fg-primary);text-decoration:none}.tq-kh-ten a:hover{text-decoration:underline}
  .tq-kh-so b{font-size:var(--fs-20);font-variant-numeric:tabular-nums;line-height:1.1}
  .tq-kh-so,.tq-kh-tre{text-align:right;align-items:flex-end}
  .tq-thanh{display:flex;height:14px;border-radius:var(--r-xs);overflow:hidden;background:var(--bg-sunken)}
  .tq-thanh span{display:block;height:100%}
  .tq-thanh span+span{box-shadow:inset 1px 0 0 var(--bg-surface)}
  .t-do{color:var(--status-danger);font-weight:600}.t-warn{color:var(--status-warn);font-weight:600}
  .tq-leg{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-12);margin-top:var(--s-8);font-size:var(--fs-12);color:var(--fg-secondary)}
  .tq-leg span{display:inline-flex;align-items:center;gap:var(--s-4)}.tq-leg i{width:12px;height:12px;border-radius:2px;display:inline-block}
  .tq h2{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-6)}
  .tq-hoi{appearance:none;border:0;background:transparent;color:var(--fg-muted);padding:0;width:24px;height:24px;display:inline-grid;place-items:center;cursor:pointer;border-radius:50%;font-size:var(--fs-16)}
  .tq-hoi:hover,.tq-hoi:focus-visible{color:var(--fg-primary);background:var(--bg-hover)}
  .tq-hoi-chu{flex-basis:100%;font-weight:400;font-size:var(--fs-13);color:var(--fg-secondary);line-height:1.5;background:var(--bg-sunken);border-radius:var(--r-sm);padding:var(--s-8) var(--s-12)}
  .tq-nhac{color:var(--fg-secondary)}
  .tq-tat{margin-top:var(--s-8)}
  @media (max-width:767px){
    .tq-kh{grid-template-columns:1fr auto;grid-template-areas:"ten so" "bar bar" "tre mo"}
    .tq-kh-ten{grid-area:ten}.tq-kh-so{grid-area:so}.tq-kh-bar{grid-area:bar}.tq-kh-tre{grid-area:tre;text-align:left;align-items:flex-start}.tq-kh>a.btn{grid-area:mo;justify-self:end}
    .tq-nay-nut{justify-content:flex-start}
  }
  #view a.btn{text-decoration:none}
  .tq-tre-truc i{background:var(--buoc-3)}
  .tq-tre-d{grid-template-columns:minmax(160px,220px) 1fr 84px}
  .tq-tre-nhan{display:flex;flex-direction:column}

  /* ---- Soát từng lô #tuan ---- */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .tuan-dau-1{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-12)}
  .tuan-cho{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-8) var(--s-16);margin-top:var(--s-12);padding:var(--s-12);border:1px solid var(--status-warn);border-left-width:4px;border-radius:var(--r-md);background:var(--status-warn-bg);font-size:var(--fs-14)}
  .tuan-tb{display:block;margin:var(--s-16) 0 var(--s-8)}   /* F1 09/10: bên trong là bộ lọc dùng chung (.lc-top, .lc-fil, .lc-chips, .lc-count xếp dòng) */
  .tuan-tb .fchips{margin:0;flex-wrap:wrap}
  .tuan-tim{width:240px;flex:none}
  .tuan-tb-phai{display:flex;align-items:center;gap:var(--s-8);margin-left:auto}
  .tuan-bang td.tuan-kenh{max-width:170px;overflow:hidden;text-overflow:ellipsis}
  .tuan-bang td.tuan-sz{max-width:160px;overflow:hidden;text-overflow:ellipsis}
  .tuan-nguon .mono{display:block;font-size:var(--fs-12);color:var(--fg-secondary)}
  .tuan-nguon small{display:block;font-size:var(--fs-12);color:var(--fg-muted);max-width:170px;overflow:hidden;text-overflow:ellipsis}
  .tuan-bang td{height:auto;padding-top:var(--s-8);padding-bottom:var(--s-8)}
  .tuan-them-lk{margin:var(--s-8) 0}
  .tuan-them{display:flex;gap:var(--s-8);justify-content:center;margin-top:var(--s-12)}
  .gcard.tuan-yc{border-color:var(--status-warn);border-left:4px solid var(--status-warn)}
  .tuan-locdon{margin:var(--s-8) 0}
  .tuan-vai-h{margin-top:var(--s-24)}
  .tuan-thay{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-12);margin-top:var(--s-12)}
  @media (min-width:900px){ .tuan-luu{bottom:calc(var(--foot-h,0px) + 16px)} }
  @media (max-width:767px){ .tuan-tim{width:100%} .tuan-tb-phai{margin-left:0} }

  /* ---- thanh hành động (.foot) trên laptop: là con của lưới .app nên trước đây rơi vào cột thanh bên; ghim đáy cột nội dung ---- */
  @media (min-width:768px){
    .app>.foot{position:fixed;left:var(--sidebar-w);right:0;bottom:0;margin:0;z-index:var(--z-bar);justify-content:flex-end;gap:var(--s-12);box-shadow:0 -2px 8px rgba(0,0,0,.04)}
    .app>.foot .sum{margin-right:auto}
    #view{padding-bottom:calc(var(--s-48) + var(--foot-h,0px))}
  }
  @media (min-width:768px) and (max-width:1119px){ .app>.foot{left:var(--sidebar-w-min)} }
  /* Soát từng lô: một nút cam duy nhất là nút Trình ở đáy; nút trong khối cảnh báo vải và trong ngăn chi tiết là nút phụ */
  #vai-cb-tuan .btn:not(.ghost),#tuan-ngan .warnbox .btn:not(.ghost){background:var(--bg-surface);color:var(--fg-primary);border:1px solid var(--border-default)}

  /* ---- Tình hình cửa hàng #ch ---- */
  .ds-muc{position:sticky;top:var(--topbar-h);z-index:var(--z-sticky);display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--s-4)) var(--s-8);padding:var(--s-6) var(--s-4);background:var(--bg-app);border-bottom:1px solid var(--line,var(--border-subtle))}
  .ds-muc::-webkit-scrollbar{display:none}
  .ds-muc button{appearance:none;border:0;background:transparent;font:inherit;font-size:var(--fs-13);font-weight:500;color:var(--ink-2,var(--fg-secondary));padding:0 var(--s-12);min-height:36px;border-radius:var(--r-pill);white-space:nowrap;cursor:pointer}
  .ds-muc button:hover{background:var(--sunken,var(--bg-hover))}
  .ds-muc button[aria-current="true"]{background:var(--ink,var(--fg-primary));color:var(--surface,var(--bg-surface))}
  @media (pointer:coarse){ .ds-muc button{min-height:var(--touch-min)} }
  @media (max-width:767px){ .ds-muc{top:0} }
  .thc [id^="ds-"]{scroll-margin-top:calc(var(--topbar-h) + 64px)}
  .ds-locghi{color:var(--warn,var(--status-warn))}
  /* biểu đồ tháng: số trên mọi cột; màn hẹp chỉ giữ số tháng này và tháng đỉnh, còn lại đọc theo trục dọc */
  .th-chart .th-bars{height:96px}
  .th-barsw{padding-left:0}
  .th-ytruc{position:absolute;inset:0 0 0 0;pointer-events:none}
  .th-ytruc span{position:absolute;left:0;right:0;height:0;border-top:1px dotted var(--line,var(--border-subtle))}
  .th-ytruc em{position:absolute;right:0;top:-15px;font-style:normal;font-size:var(--fs-12);color:var(--ink-3,var(--fg-muted));font-variant-numeric:tabular-nums;background:var(--bg-app);padding-left:4px}
  .th-bar b.phu{font-weight:500;color:var(--ink-2,var(--fg-secondary))}
  @media (max-width:899px){ .th-bar b.phu{display:none} }
  @media (min-width:900px){ .th-ytruc{display:none} }
  /* hàng đang đến: viền trung tính, đỏ chỉ khi trễ */
  .th-band.dd-ve{border:1px solid var(--line,var(--border-default));border-radius:var(--r-lg);padding:var(--s-12) var(--s-16)}
  .th-band.dd-ve.tre{border:2px solid var(--status-danger)}
  .th-band.dd-ve.tre .th-eyebrow{color:var(--status-danger)}
  /* danh sách mã dài: dòng gọn 40px */
  .thc details.dash .prow.ds-dong{margin:0;min-height:40px;padding:4px 0;border:0;border-bottom:1px solid var(--line-soft,var(--border-subtle));border-radius:0;background:transparent;align-items:center;gap:var(--s-8)}
  .thc details.dash .prow.ds-dong .pmeta{font-size:var(--fs-12);line-height:1.35}
  .thc details.dash .prow.ds-dong .btn{min-height:32px;padding:0 var(--s-12)}
  @media (pointer:coarse){ .thc details.dash .prow.ds-dong .btn{min-height:40px} }
  /* một nút chính: nút đầu của thẻ việc đầu tiên; các nút cam còn lại trong màn thành nút phụ */
  .thc .cd-add,.thc .th-card~.th-card .th-btn.pri,.thc .dcard~.dcard .btn:not(.ghost){background:var(--surface,var(--bg-surface));color:var(--ink,var(--fg-primary));border:1px solid var(--line,var(--border-default));box-shadow:none}
  .thc .tui-nut .cd-add{width:auto;height:40px;border-radius:var(--r-md);margin:var(--s-4) var(--s-4) 0 0}
  .thc .tui-nut{display:flex;flex-wrap:wrap}
  .ht-anh{margin-top:var(--s-6);font-size:var(--fs-13)}
  .btn.ghost.canh{border-color:var(--status-warn);color:var(--status-warn)}

  /* ---- Khách đặt may #khach-dat-may ---- */
  .kdm-dau{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-12);margin:0 0 var(--s-12)}
  .kdm-so>div.canh{border-color:var(--status-warn)}.kdm-so>div.canh b{color:var(--status-warn)}
  .kdm-dong{align-items:center;border-left-width:4px}
  .kdm-dong.tre{background:var(--bg-surface);border-color:var(--border-default);border-left-color:var(--status-danger)}
  .kdm-dong.sap{border-left-color:var(--status-warn)}
  .kdm-t a{color:var(--fg-primary);text-decoration:none}.kdm-t a:hover{text-decoration:underline}
  .kdm-nut{display:flex;align-items:center;gap:var(--s-6);margin-left:auto}
  .kdm-chinh{white-space:nowrap}
  .kdm-chinh.canh{border-color:var(--status-warn);color:var(--status-warn)}
  .ibtn.kdm-them{width:36px;height:36px;border:1px solid var(--border-default);border-radius:var(--r-md);background:var(--bg-surface);color:var(--fg-secondary);display:inline-grid;place-items:center;cursor:pointer}
  @media (pointer:coarse){ .ibtn.kdm-them{width:var(--touch-min);height:var(--touch-min)} }
  .xmenu{position:fixed;z-index:var(--z-overlay);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--r-md);box-shadow:var(--e-2,0 8px 24px rgba(0,0,0,.12));padding:var(--s-4);display:flex;flex-direction:column}
  .xmenu button{appearance:none;border:0;background:transparent;font:inherit;font-size:var(--fs-14);color:var(--fg-primary);text-align:left;padding:0 var(--s-12);min-height:40px;border-radius:var(--r-sm);display:flex;align-items:center;gap:var(--s-8);cursor:pointer;white-space:nowrap}
  .xmenu button:hover,.xmenu button:focus-visible{background:var(--bg-hover);outline:none}
  .xmenu button.nguy{color:var(--status-danger)}
  @media (pointer:coarse){ .xmenu button{min-height:var(--touch-min)} }
  @media (max-width:640px){ .kdm-nut{width:100%;justify-content:flex-start} }

  /* ---- Hỗ trợ cửa hàng #hotro (và "Việc tôi phụ trách" ở Tình hình cửa hàng) ---- */
  .htrow{border-left:4px solid var(--border-default)}
  .htrow.tre{border-left-color:var(--status-warn)}   /* rà soát 14/10 bich#15: chỉ đặt may mới đỏ */
  .ht-m1{display:flex;align-items:flex-start;gap:var(--s-8);font-size:var(--fs-14)}
  .ht-m1>b{flex:1;min-width:0}
  .ht-m1 .chip{margin-left:auto;flex:none}
  .ht-m2{margin-top:2px}
  .ht-mt{margin-top:var(--s-4);font-size:var(--fs-13);color:var(--fg-primary);overflow-wrap:anywhere}
  .ht-nut{display:flex;align-items:center;gap:var(--s-6);margin-top:var(--s-8)}
  .ht-hien{margin:var(--s-8) 0 var(--s-16)}

  /* ======== D3 09/10: màn laptop còn lại của Anna và Bích (Máy đề xuất · Xưởng · Sổ · Sale · Đại lý · Quy tắc · Cài đặt · Sản phẩm · Mua ngoài · Phiếu lấy hàng · Hướng dẫn · Việc hôm nay) ======== */
  /* đầu màn: tên + số đếm + "tính lúc" bên trái, một nút chính bên phải */
  .d3-dau{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-16);margin:0 0 var(--s-12)}
  .d3-dau h2{font-size:var(--fs-16);font-weight:600;margin:0;display:flex;align-items:baseline;gap:var(--s-8);flex-wrap:wrap}
  .d3-dau h2 .tinh-luc{font-size:var(--fs-12)}
  .d3-dau .d3-nut{margin-left:auto;display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap}
  /* ô số: nhãn (đang đếm gì) · số · dòng phụ (tính đến lúc nào). Màu chỉ khi có nghĩa: đỏ sai / quá hạn, vàng nâu cần làm, xanh xong */
  .d3-o-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-8);margin:0 0 var(--s-12)}
  .d3-o{display:flex;flex-direction:column;gap:2px;border:1px solid var(--border-default);border-radius:var(--r-md);background:var(--bg-surface);padding:var(--s-8) var(--s-12);min-width:0;color:inherit;text-decoration:none}
  a.d3-o:hover{background:var(--bg-hover)}
  .d3-o .l{font-size:var(--fs-12);color:var(--fg-muted);font-weight:500;line-height:1.3}
  .d3-o .n{font-size:var(--fs-24);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--fg-primary)}
  .d3-o .n small{font-size:var(--fs-13);font-weight:500;color:var(--fg-secondary);margin-left:var(--s-4)}
  .d3-o .s{font-size:var(--fs-12);color:var(--fg-secondary);line-height:1.35}
  .d3-o.do{border-color:var(--status-danger)}.d3-o.do .n{color:var(--status-danger)}
  .d3-o.canh{border-color:var(--status-warn)}.d3-o.canh .n{color:var(--status-warn)}
  .d3-o.ok .n{color:var(--status-ok)}
  .d3-o.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
  /* lưới hai cột: nội dung chính bên trái, ngăn tình hình / bộ lọc dính bên phải */
  .d3-luoi{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-16) var(--s-24);align-items:start}
  .d3-phai{min-width:0}
  @media (min-width:1100px){ .d3-luoi{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)} .d3-luoi.hep{grid-template-columns:minmax(0,1fr) minmax(280px,.6fr)} .d3-phai{position:sticky;top:calc(var(--topbar-h) + var(--s-16));max-height:calc(100vh - var(--topbar-h) - var(--s-32));overflow:auto} }
  .d3-khung{border:1px solid var(--border-default);border-radius:var(--r-lg);background:var(--bg-surface);padding:var(--s-12) var(--s-16)}
  .d3-khung+.d3-khung{margin-top:var(--s-12)}
  .d3-khung h3,.d3-h3{font-size:var(--fs-13);font-weight:600;color:var(--fg-secondary);margin:0 0 var(--s-8);display:flex;align-items:baseline;gap:var(--s-8);flex-wrap:wrap}
  .d3-khung h3 .tinh-luc{margin-left:auto}
  /* nhóm nút chọn (tuần, kỳ, cách xem): .seg với 3, 4 ô */
  .seg.n3{grid-template-columns:repeat(3,1fr)}.seg.n4{grid-template-columns:repeat(4,1fr)}.seg.tu{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,auto)}
  .seg-o.chon[aria-pressed="true"]{background:var(--bg-surface);color:var(--fg-primary);box-shadow:inset 0 -2px 0 var(--accent)}
  .seg-o small{font-weight:400;color:var(--fg-muted);font-size:var(--fs-12)}
  .seg-o.chon[aria-pressed="true"] small{color:var(--fg-secondary)}
  /* bảng xem trước trong tấm hỏi (giảm đều, duyệt hàng loạt): tiêu đề dính, số thẳng cột */
  .d3-xem{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-13);margin:var(--s-8) 0}
  .d3-xem th{position:sticky;top:0;background:var(--bg-sunken);color:var(--fg-secondary);font-size:var(--fs-12);font-weight:600;text-align:left;padding:var(--s-6) var(--s-8);border-bottom:1px solid var(--border-default)}
  .d3-xem td{padding:var(--s-6) var(--s-8);border-bottom:1px solid var(--border-subtle);vertical-align:middle}
  .d3-xem .num{text-align:right;font-variant-numeric:tabular-nums}
  .d3-xem td.giam{color:var(--status-danger);font-weight:600}
  .d3-xem-khung{max-height:46vh;overflow:auto;border:1px solid var(--border-default);border-radius:var(--r-md)}
  .d3-xem-khung .d3-xem{margin:0}
  .hoi-than .chu.chu-html{white-space:normal;color:var(--fg-primary)}
  .hoi-than .d3-tom{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-16);margin:var(--s-4) 0 var(--s-8);font-size:var(--fs-14)}
  .hoi-than .d3-tom b{font-variant-numeric:tabular-nums}
  /* bảng đọc: hàng 40px, tối đa một chip trạng thái, nút cuối dòng dạng ghost luôn thấy */
  .d3-bang .dtable td{white-space:normal}
  .d3-bang .dtable td.ma{font-weight:600;white-space:nowrap}
  .d3-bang .dtable td .pmeta{display:block;font-size:var(--fs-12);line-height:1.35}
  .d3-bang .dtable td.act{white-space:nowrap}
  .d3-bang .dtable td.act .btn,.d3-bang .dtable td.act .linkbtn{opacity:1;margin-left:var(--s-4)}
  .d3-bang .dtable tbody tr.tre td:first-child{box-shadow:inset 3px 0 var(--status-danger)}
  .d3-bang .dtable tbody tr.cho-lau td:first-child{box-shadow:inset 3px 0 var(--status-warn-line)}
  .d3-bang .dtable tbody tr.canh td:first-child{box-shadow:inset 3px 0 var(--status-warn)}
  .d3-bang .dtable tbody tr.mo td{background:var(--bg-sunken)}
  /* tab cửa hàng (.th-tab) của màn Tình hình / Sale tại cửa hàng: chữ trắng trên nền đậm (trước dùng --bg không có) */
  .th-tab[aria-selected="true"]{color:var(--bg-surface)}
  /* đơn vị cạnh số to (.th-unit 45%) không được nhỏ hơn 12px (Gửi thêm có chữ 7,2px, Quy tắc 10,8px) */
  .th-unit{font-size:max(var(--fs-12),45%)}
  .dl-dx small,.dl-dx-d small{font-size:var(--fs-12)}
  .d3-hien{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap;margin:var(--s-8) 0;font-size:var(--fs-13);color:var(--fg-secondary)}
  .d3-hien .btn{margin-left:auto}
  /* thanh lọc: ô tìm + chip lọc + sắp xếp trên một dòng */
  .d3-loc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8);margin:0 0 var(--s-12)}
  .d3-loc .linput{height:var(--control-h-lg);flex:0 1 260px;min-width:160px}
  .d3-loc .fchips{margin:0;flex-wrap:wrap;overflow:visible}
  .d3-loc .d3-phai-nut{margin-left:auto;display:flex;gap:var(--s-8);align-items:center}
  .d3-loc .lab{font-size:var(--fs-12);color:var(--fg-muted);text-transform:uppercase;letter-spacing:var(--ls-caps);font-weight:600}
  /* ---- Xưởng #xuong: bảng theo bước thật, mỗi cột một bước, cuộn ngang khi hẹp ---- */
  .kb2-dau{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-8) var(--s-12);margin:var(--s-16) 0 var(--s-8)}
  .kb2-dau h2{font-size:var(--fs-16);font-weight:600;margin:0}
  .kb2-dau .pmeta{margin-left:auto}
  .kb2{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(164px,1fr);gap:var(--s-8);align-items:start;overflow-x:auto;padding-bottom:var(--s-8);scrollbar-width:thin}
  .kb2-cot{background:var(--bg-sunken);border:1px solid var(--border-subtle);border-radius:var(--r-md);padding:var(--s-8);min-width:0;display:flex;flex-direction:column;gap:var(--s-6)}
  .kb2-cot>header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-6);padding:0 2px var(--s-4);border-bottom:2px solid var(--buoc-3)}
  .kb2-cot>header b{font-size:var(--fs-13);font-weight:600;color:var(--fg-primary)}
  .kb2-cot>header span{font-size:var(--fs-12);color:var(--fg-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
  .kb2-cot.b1>header{border-bottom-color:var(--buoc-1)}.kb2-cot.b2>header{border-bottom-color:var(--buoc-2)}.kb2-cot.b3>header{border-bottom-color:var(--buoc-3)}.kb2-cot.b4>header{border-bottom-color:var(--buoc-4)}.kb2-cot.b5>header{border-bottom-color:var(--buoc-5)}.kb2-cot.b6>header{border-bottom-color:var(--buoc-6)}
  .kb2-rong{font-size:var(--fs-12);color:var(--fg-muted);text-align:center;padding:var(--s-12) 0}
  .kb2-the{display:block;background:var(--bg-surface);border:1px solid var(--border-default);border-left:3px solid var(--border-default);border-radius:var(--r-sm);padding:var(--s-6) var(--s-8);font-size:var(--fs-13);color:inherit;text-decoration:none;min-width:0}
  .kb2-the:hover{background:var(--bg-hover)}
  .kb2-the.tre{border-left-color:var(--status-warn-line)}   /* v2 bước 4: lô thường quá hạn bước = ▲ vàng */
  .kb2-the.dm{border-left-color:var(--status-info)}
  .kb2-the.dm.tre{border-left-color:var(--status-danger)}   /* chỉ đặt may quá hạn mới đỏ */
  .kb2-m1{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s-6);font-weight:600}.kb2-m1>span:first-child{white-space:nowrap}
  .kb2-m1 .chip{margin-left:auto;flex:none}
  .kb2-m2{display:flex;justify-content:space-between;gap:var(--s-6);font-size:var(--fs-12);color:var(--fg-secondary);margin-top:2px;font-variant-numeric:tabular-nums}
  .kb2-m3{font-size:var(--fs-12);color:var(--fg-muted);margin-top:2px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px var(--s-6);font-variant-numeric:tabular-nums}.kb2-m3>*{white-space:nowrap}
  .kb2-m3 .do{color:var(--status-danger);font-weight:600}
  .kb2-the .linkbtn{padding:2px 0;font-size:var(--fs-12)}
  /* bàn giao chưa nhận: bảng gọn, đỏ khi quá giờ */
  .d3-cn{margin:0 0 var(--s-8)}
  .d3-cn .dtable td{white-space:normal}
  .d3-cn .dtable td.act{white-space:nowrap}
  @media (max-width:767px){ .kb2{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;overflow:visible} }
  /* ---- Sale: bảng dtable thay saletab; ô sửa được viền nhạt, không nền vàng ---- */
  .d3-sale .dtable .linput.pctin{width:64px;height:30px;text-align:right;font-variant-numeric:tabular-nums}
  .d3-sale .dtable .linput.ntin{width:160px;height:30px}
  .d3-sale .dtable input[type=checkbox]{width:18px;height:18px}
  .d3-sale .dtable td.am{color:var(--status-danger);font-weight:600}
  .d3-sale .dtable td.chua{color:var(--fg-muted);font-style:italic}
  .d3-bac{display:flex;flex-wrap:wrap;gap:var(--s-6) var(--s-16);margin:var(--s-4) 0 var(--s-12);font-size:var(--fs-13);color:var(--fg-secondary)}
  .d3-bac b{color:var(--fg-primary)}
  .d3-trang{display:inline-flex;align-items:center;gap:var(--s-6);font-size:var(--fs-13);color:var(--fg-secondary)}
  .d3-buoc{display:flex;align-items:center;gap:var(--s-4);font-size:var(--fs-12);color:var(--fg-muted);flex-wrap:wrap}
  .d3-buoc span{padding:2px var(--s-8);border-radius:var(--r-pill);border:1px solid var(--border-default)}
  .d3-buoc span.xong{background:var(--status-ok-bg);color:var(--status-ok);border-color:transparent}
  .d3-buoc span.dang{background:var(--accent-subtle-bg);color:var(--accent-text);border-color:var(--accent)}
  .d3-buoc i.ti{font-size:12px}
  /* ---- Hướng dẫn: mục bên trái, nội dung đọc bên phải ---- */
  .hd-luoi{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-16) var(--s-24);align-items:start}
  @media (min-width:1000px){ .hd-luoi{grid-template-columns:240px minmax(0,var(--maxw-read))} .hd-muc-ds{position:sticky;top:calc(var(--topbar-h) + var(--s-16))} }
  .hd-muc-ds{display:flex;flex-direction:column;gap:2px}
  .hd-muc-ds a{display:flex;justify-content:space-between;gap:var(--s-8);padding:var(--s-6) var(--s-12);border-radius:var(--r-sm);color:var(--fg-secondary);text-decoration:none;font-size:var(--fs-13)}
  .hd-muc-ds a:hover{background:var(--bg-hover);color:var(--fg-primary)}
  .hd-muc-ds a[aria-current="true"]{background:var(--accent-subtle-bg);color:var(--accent-text);font-weight:600}
  .hd-muc-ds a small{color:var(--fg-muted);font-variant-numeric:tabular-nums;font-size:var(--fs-12)}
  .hd-noi .hd-muc{scroll-margin-top:calc(var(--topbar-h) + var(--s-16))}
  .hd-noi .hd-muc>summary{font-size:var(--fs-16)}
  @media (max-width:999px){ .hd-muc-ds{flex-direction:row;flex-wrap:wrap} }
  /* ---- Cài đặt: bảng tài khoản ---- */
  .d3-tk .dtable td{white-space:normal}
  .d3-tk .dtable td.act{white-space:nowrap}
  .d3-tk .dtable tr.khoa td{color:var(--fg-muted)}
  .d3-pin{font-size:var(--fs-24);font-weight:700;letter-spacing:4px;font-variant-numeric:tabular-nums;text-align:center;padding:var(--s-12);border:1px dashed var(--border-strong);border-radius:var(--r-md);background:var(--bg-sunken);margin:var(--s-8) 0}
  .d3-cd-nhom{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-12)}
  .d3-cd-nhom .pcard{margin:0;display:flex;flex-direction:column;gap:var(--s-6)}
  .d3-cd-nhom .pcard>b{font-size:var(--fs-14)}
  .d3-cd-nhom .pcard .btn{align-self:flex-start}
  .d3-cd-nhom .pcard .btn.block{align-self:stretch}
  /* ---- Sản phẩm: lưới / bảng ---- */
  .sp-luoi-bang .spgrid{display:none}
  .sp-the .d3-bang{display:none}
  .sp-img{width:40px;height:40px;object-fit:cover;border-radius:var(--r-xs);background:var(--bg-sunken);vertical-align:middle}
  .spno.sp-img{display:inline-grid;place-items:center;font-size:var(--fs-12);color:var(--fg-muted);font-weight:600}
  /* ---- Việc hôm nay của Bích trên laptop: việc trước mặt bên trái, kế hoạch / đơn / hỗ trợ bên phải ---- */
  @media (min-width:1100px){ .vh .d3-luoi{grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr)} .vh .d3-phai .vh-khoi{margin-bottom:var(--s-12)} .vh .vtt{margin-top:0} }
  /* ---- Máy đề xuất: hai cột trên laptop (danh sách · tuần đang lên), dòng lô dạng lưới cột thẳng ---- */
  @media (min-width:1100px){
    .dx-luoi{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--s-16);align-items:start}
    .dx-luoi>.wsbar{grid-column:2;grid-row:1;position:sticky;top:calc(var(--topbar-h) + var(--s-16));box-shadow:none;margin:0;max-height:calc(100vh - var(--topbar-h) - var(--s-32));overflow:auto}
    .dx-luoi>.dx-trai{grid-column:1;grid-row:1;min-width:0}
    .dx-luoi .wsb1{font-size:var(--fs-12)}.dx-luoi .wsb1 .wsl{display:block;line-height:1.5}.dx-luoi .wsb1 .d3-lai{margin-top:var(--s-6)}
    .dx-luoi .wsb1{flex-wrap:wrap}
    .wsline .wsma{flex:1 1 150px;min-width:150px}
    .wsline .wsq{width:64px}.wsline .wst{width:auto;min-width:72px;flex:none;white-space:nowrap}.wsline .wst .uoc{margin-left:3px;font-style:italic;text-decoration:none;border-bottom:1px dotted currentColor}
    .dx-luoi .wsb1{text-transform:none;letter-spacing:0;font-size:var(--fs-13)}
    .wsline>.chip{flex:none}
  }
  .wsline .wsvai em{font-style:normal}
  .wsline .wsdl{justify-self:start}
  .ws-tuan{margin:0 0 var(--s-8)}
  @media (max-width:767px){ .seg.tu.ws-tuan{display:flex;overflow-x:auto;scrollbar-width:none;max-width:100%} .ws-tuan .seg-o{flex:none;padding:0 var(--s-12);white-space:nowrap} }
  .wsb1 .d3-lai{display:inline-flex;align-items:center;gap:var(--s-4);text-transform:none;letter-spacing:0}
  .wsbar .wsb3 .btn{background:var(--bg-surface);color:var(--fg-primary);border:1px solid var(--border-default)}
  .wsdang .btn:not(.ghost){background:var(--bg-surface);color:var(--fg-primary);border:1px solid var(--border-default)}
  .wsph .btn:not(.ghost){background:var(--bg-surface);color:var(--fg-primary);border:1px solid var(--border-default)}
  .wsdet .btn.sm:not(.ghost){background:var(--bg-surface);color:var(--fg-primary);border:1px solid var(--border-default)}
  .dxdl{background:var(--status-info-bg);color:var(--status-info)}
  /* một nút chính mỗi màn: nút cam còn lại trong vùng này là nút phụ */
  .d3-phu .btn:not(.ghost):not(.danger){background:var(--bg-surface);color:var(--fg-primary);border:1px solid var(--border-default)}
  /* chip: tối đa một chip trạng thái mỗi dòng; chip phụ (đặt may, cũ) là viền xám */
  .chip.nhe{background:transparent;border:1px solid var(--border-default);color:var(--fg-secondary)}
  /* xem toàn bộ / đang hiện N trên M */
  .d3-them{display:flex;justify-content:center;margin:var(--s-8) 0}
  /* mục dạng chữ xám cuối màn */
  .ns-dong{font-size:var(--fs-12);color:var(--fg-muted);margin:var(--s-16) 0 0}
}

  /* ---- Đặt so với bán (E1 09/10): bộ lọc, ba ô số có nhãn, bảng trên laptop thành thẻ hai tầng trên điện thoại (.dtable), size mở ra trong dòng ---- */
  .dvb-loc{display:flex;flex-wrap:wrap;gap:var(--s-8);align-items:center;margin:0 0 var(--s-12)}
  .dvb-loc select.linput{height:var(--control-h-lg);font-size:var(--fs-13);width:auto;min-width:150px;max-width:100%}
  .dvb-tong .db-bang th,.dvb-tong .db-bang td{white-space:normal}
  .dvb-bang .dtable th:first-child{min-width:200px}
  .dvb-bang .dtable th:nth-child(6){min-width:140px}   /* C2 09/10: 220/150 làm bảng rộng 1282px ở laptop 1280, trang trượt ngang 2px */
  .dvb-bang .dtable td.m1 b{white-space:nowrap}
  .dvb-so{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-12);margin:var(--s-12) 0 var(--s-8)}
  .dvb-o{border:1px solid var(--line,var(--border-default));border-radius:var(--r-md);padding:var(--s-12);background:var(--surface,var(--bg-surface));min-width:0}
  .dvb-o .dvb-nhan{display:block;font-size:var(--fs-12);color:var(--ink-2,var(--fg-secondary));margin-bottom:4px}
  .dvb-o b{display:block;font-size:var(--fs-24);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink,var(--fg-primary))}
  .dvb-o b .dvb-dv{font-size:var(--fs-13);font-weight:500;color:var(--ink-2,var(--fg-secondary))}
  .dvb-o small{display:block;font-size:var(--fs-12);color:var(--ink-3,var(--fg-muted));margin-top:4px;line-height:1.4}
  .dvb-chua{font-size:var(--fs-12);color:var(--fg-muted);font-style:italic;white-space:normal}
  .dvb-bang .dtable td{white-space:normal;height:auto;padding-top:var(--s-6);padding-bottom:var(--s-6);vertical-align:top}
  .dvb-bang .dtable td .pmeta{display:block;font-size:var(--fs-12);line-height:1.35;color:var(--fg-muted);font-weight:400}
  .dvb-bang .dtable td .chip{white-space:nowrap}
  .dvb-bang .dtable tr.dvb-chi td{background:var(--bg-sunken);cursor:default}
  .dvb-bang .dtable tr.dvb-chi .tblwrap{margin:0;border-radius:var(--r-sm)}
  .dvb-bang .dvb-sz th{position:static}
  .dvb-bang .dvb-sz td{white-space:normal}
  .dvb-bang .dtable tbody tr.dvb-r td:first-child{box-shadow:inset 3px 0 transparent}
  .dvb-bang .dtable tbody tr.dvb-r[aria-expanded="true"] td{background:var(--bg-hover)}
  @media (max-width:767px){
    .dvb-so{grid-template-columns:1fr 1fr;gap:var(--s-8)} .dvb-so .dvb-o:first-child{grid-column:1/-1}
    .dvb-bang .dtable td.m2{white-space:normal;line-height:1.45}
    .dvb-bang .dtable tr.dvb-chi{padding:var(--s-8) var(--s-12)} .dvb-bang .dvb-sz,.dvb-bang .dvb-sz tbody,.dvb-bang .dvb-sz tr,.dvb-bang .dvb-sz td{display:revert} .dvb-bang .dvb-sz thead{display:table-header-group}
    .dvb-bang .dvb-sz td{font-size:var(--fs-12);padding:4px var(--s-8);height:auto;border-bottom:1px solid var(--border-subtle)}
    .dvb-loc .seg.tu{max-width:100%} .dvb-loc select.linput{width:100%}
    .dvb-bang .dtable td.m1{flex-wrap:nowrap} .dvb-bang .dtable td.m1 .pmeta{flex:1 1 auto;min-width:0}
    .dvb-bang .dtable th:first-child{min-width:0}
  }

/* ================= BỘ LỌC DÙNG CHUNG .lc-* (F1 09/10): mẫu lấy từ thanh lọc màn Vải (vai.css cũ), nằm ngoài @layer như vai.css để cùng độ ưu tiên.
   Thứ tự: .lc-top (ô tìm · sắp xếp · nút phụ) → .lc-fil (nút từng nhóm lọc, bảng rơi .lc-pop; điện thoại: nút Lọc mở tấm .lc-sheet) → .lc-chips (Đang lọc) → .lc-count (Đang hiện N trên M).
   Chỉ dùng token của tokens.css nên sáng / tối tự đúng. Chữ ≥ 13px; ở tấm lọc điện thoại 14px. */
.lc-top{display:flex;flex-wrap:wrap;gap:var(--s-8);align-items:center;margin:0 0 var(--s-8)}
.lc-qw{position:relative;flex:1 1 220px;min-width:160px}
.lc-qw>i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--fg-muted);pointer-events:none;font-size:16px}
.lc-qw input{width:100%;box-sizing:border-box;height:var(--control-h);padding:0 34px 0 32px;border:1px solid var(--border-default);border-radius:var(--r-md);background:var(--bg-surface);color:var(--fg-primary);font:inherit;font-size:var(--fs-14)}
.lc-qw input:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.lc-qw .lc-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--fg-muted);width:28px;height:28px;border-radius:var(--r-sm);cursor:pointer;display:none;align-items:center;justify-content:center}
.lc-qw.co .lc-x{display:inline-flex}
.lc-sort{height:var(--control-h);border:1px solid var(--border-default);border-radius:var(--r-md);background:var(--bg-surface);color:var(--fg-primary);font:inherit;font-size:var(--fs-13);padding:0 var(--s-8);max-width:200px}
.lc-nut{height:var(--control-h);border:1px solid var(--border-default);border-radius:var(--r-md);background:var(--bg-surface);color:var(--fg-primary);font:inherit;font-size:var(--fs-13);font-weight:500;padding:0 var(--s-12);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lc-nut:hover{background:var(--bg-hover)}
.lc-nut.on{background:var(--accent-subtle-bg);border-color:var(--accent);color:var(--accent-text)}
.lc-fil{display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:center;position:relative;margin:0 0 var(--s-6)}
.lc-fb{height:34px;border:1px solid var(--border-default);border-radius:var(--r-pill);background:var(--bg-surface);color:var(--fg-primary);font:inherit;font-size:var(--fs-13);padding:0 10px 0 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lc-fb:hover{background:var(--bg-hover)}
.lc-fb.on{background:var(--accent-subtle-bg);border-color:var(--accent);color:var(--accent-text);font-weight:600}
.lc-fb.mo{border-color:var(--border-strong);box-shadow:var(--e-1)}
.lc-fb .n{background:var(--fg-primary);color:var(--fg-inverse);border-radius:var(--r-pill);font-size:var(--fs-11);padding:0 6px;min-width:12px;text-align:center;line-height:16px}
.lc-fb .ti{font-size:14px;color:var(--fg-muted)}
.lc-xoa{border:0;background:transparent;color:var(--accent-text);font:inherit;font-size:var(--fs-13);font-weight:500;cursor:pointer;padding:0 var(--s-8);height:34px}
.lc-xoa:hover{text-decoration:underline}
.lc-pop{position:absolute;z-index:40;top:calc(100% + 4px);left:0;min-width:240px;max-width:min(360px,calc(100vw - 32px));max-height:min(60vh,420px);overflow:auto;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--r-md);box-shadow:var(--e-2);padding:var(--s-6)}
.lc-pop .hd{font-size:var(--fs-11);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--fg-muted);padding:6px 8px 4px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.lc-pop .hd button{border:0;background:transparent;color:var(--accent-text);font:inherit;font-size:var(--fs-12);cursor:pointer;padding:0}
.lc-pop input.tim{width:100%;box-sizing:border-box;height:32px;border:1px solid var(--border-default);border-radius:var(--r-sm);padding:0 8px;margin:2px 0 6px;background:var(--bg-app);color:var(--fg-primary);font:inherit;font-size:var(--fs-13)}
.lc-o{display:flex;align-items:center;gap:8px;padding:0 8px;min-height:36px;border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-13);color:var(--fg-primary);user-select:none}
.lc-o:hover{background:var(--bg-hover)}
.lc-o.on{background:var(--accent-subtle-bg)}
.lc-o.mo0{opacity:.45}
.lc-o input{width:18px;height:18px;margin:0;accent-color:var(--accent);flex:none}
.lc-o .sw{width:14px;height:14px;border-radius:3px;border:1px solid var(--border-subtle);flex:none}
.lc-o .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-o .t small{color:var(--fg-muted);margin-left:4px}
.lc-o .n{color:var(--fg-muted);font-variant-numeric:tabular-nums;font-size:var(--fs-12)}
.lc-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 var(--s-8);font-size:var(--fs-12);color:var(--fg-muted)}
.lc-chip{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 4px 0 10px;border-radius:var(--r-pill);background:var(--bg-sunken);border:1px solid var(--border-subtle);color:var(--fg-primary);font-size:var(--fs-12);font-weight:500}
.lc-chip .sw{width:10px;height:10px;border-radius:50%;border:1px solid var(--border-subtle)}
.lc-chip button{border:0;background:transparent;color:var(--fg-muted);width:22px;height:22px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.lc-chip button:hover{background:var(--bg-hover);color:var(--fg-primary)}
.lc-count{display:flex;justify-content:space-between;align-items:center;gap:var(--s-8);flex-wrap:wrap;margin:0 0 var(--s-8);font-size:var(--fs-13);color:var(--fg-secondary)}
.lc-count b{color:var(--fg-primary);font-variant-numeric:tabular-nums}
.lc-count .ghi{font-size:var(--fs-12);color:var(--fg-muted)}
.lc-sheet .gr{border-bottom:1px solid var(--border-subtle);padding:4px 0}
.lc-sheet .gr summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:var(--fs-14);padding:10px 2px;min-height:44px}
.lc-sheet .gr summary::-webkit-details-marker{display:none}
.lc-sheet .gr summary .sel{font-weight:400;color:var(--accent-text);font-size:var(--fs-12);margin-left:auto;margin-right:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.lc-sheet .lc-o{min-height:44px;font-size:var(--fs-14)}
.lc-sheet .lc-o input{width:22px;height:22px}
.lc-sheet .foot{position:sticky;bottom:0;background:var(--bg-surface);padding:10px 0 0}
.lc-sheet input.tim{width:100%;box-sizing:border-box;height:36px;border:1px solid var(--border-default);border-radius:var(--r-sm);padding:0 8px;margin:2px 0 6px;font:inherit;background:var(--bg-app);color:var(--fg-primary)}
.lc-top .linput{height:var(--control-h);min-height:0}
.lc-14 input,.lc-14 select,.lc-14 .lc-fb,.lc-14 .lc-xoa,.lc-14 .lc-chip,.lc-14.lc-count,.lc-14.lc-count .ghi{font-size:var(--fs-14)}   /* màn xưởng (cfg.chu14): chữ ≥ 14px */
.lc-14 .lc-fb,.lc-14 .lc-xoa,.lc-14 .lc-sort,.lc-14 .lc-qw input{height:44px}   /* màn xưởng: chỗ bấm ≥ 44px */
@media (max-width:767px){
  .lc-top{position:sticky;top:var(--topbar-h);z-index:20;background:var(--bg-app);padding:8px 0 6px;margin:-8px 0 0;border-bottom:1px solid var(--border-subtle)}
  .lc-top .only-desk{display:none !important}
  .lc-qw{flex:1 1 100%}
  .lc-fil .lc-fb{display:none}.lc-fil .lc-fb.loc{display:inline-flex}.lc-fil .lc-xoa{display:none}
  .lc-count{font-size:var(--fs-12)}
}
@media (min-width:768px){
  .lc-fil .lc-fb.loc{display:none}
}
@media print{ .lc-top,.lc-fil,.lc-chips{display:none !important} }
.lc-nhan{font-size:var(--fs-12);color:var(--fg-muted);text-transform:uppercase;letter-spacing:var(--ls-caps);font-weight:600}   /* nhãn của ô chọn kèm (vd Kỳ ở Sổ xưởng) */
.lc-top .btn{height:var(--control-h);min-height:0;padding-top:0;padding-bottom:0}
.cs-tim .lc-qw{margin:0 0 var(--s-8)}
/* g31 10/10 (rà soát đêm, điện thoại): ngoài layer, nạp sau cùng nên thắng các quy tắc màn.
   1. iPhone phóng to cả trang khi chạm ô nhập chữ < 16px: ô tìm / ô sắp xếp của bộ lọc chung, ô chọn màu ở Quy tắc, ô KPI, ô nhóm hàng ở Đặt hàng.
   2. Chỗ bấm ≥ 44px: bộ lọc chung, nút bỏ một lọc (22px → vùng chạm 44px), tab bước ở Đặt may cho khách, nút trên thẻ Tình hình cửa hàng, Nhắc xưởng. */
@media (max-width:767px){
  #view .lc-qw input,#view .lc-sort,#view .qt-chon select,#view .kn-d .linput,#view .cd-nhomsel{font-size:16px}
  #view .lc-qw input,#view .lc-sort,#view .lc-fb{height:44px}
  #view .lc-chip button{position:relative}
  #view .lc-chip button::after{content:"";position:absolute;inset:-11px}
  #view .hv-c{min-height:44px}
  #view .th-btn{min-height:44px;display:inline-flex;align-items:center}
  #view .thc .tui-nut .cd-add{height:44px}
  #view .btn.sm{min-height:44px}
  /* đợt 4: mục mở / gập ở Tình hình cửa hàng (18-40px), "Cách dùng" (32px), Theo màu / Theo mã vải ở Vải (36px), ô KPI của Lily (40px), tên mã ở Hàng sắp về (20px) */
  #view .thc summary{min-height:44px;padding-top:10px;padding-bottom:10px;box-sizing:border-box}
  #view details.howto summary{min-height:44px}
  #view .vx-seg button{min-height:44px}
  #view .kn-d .linput{min-height:44px}
  #view .hv-dau{min-height:44px}
}
/* g31 10/10: cửa hàng (Hường, Vy, Lily) và chị Hà không có ô tìm trên thanh trên, nên chuông, nút sáng / tối, nút tên dồn vào giữa thanh thay vì sát phải */
#topbar #qbadge{margin-left:auto}