/* Xuân Thu · D2 09/10: màn laptop của Ly (CH Online, Kho sàn TM) và Thiết kế (Linh, Hậu, Zaly). Nạp SAU van_phong.css, cùng layer screens.
   Màu: cam = nút chính; vàng nâu = cần làm; đỏ = quá hạn / thiếu khi đang sản xuất; xanh = đã lưu, đủ. Số dùng tabular-nums. Mọi ô số có nhãn và "tính lúc". */
@layer screens {
  /* ---- Việc của chị (Ly, Thiết kế): hai cột, trái là việc, phải là số ---- */
  .ly-luoi .am-dau{margin-bottom:var(--s-12)}
  .ly-the{align-items:center}
  .ly-the .btn{flex:none}
  .ly-the.do{border-left:4px solid var(--status-danger)}
  .ly-the>.ti{color:var(--fg-muted)}
  .ly-phai .am-so{grid-template-columns:1fr;margin:var(--s-4) 0 var(--s-8)}
  .ly-phai .am-so a{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:var(--s-4) var(--s-8);padding:var(--s-8) var(--s-12)}
  .ly-phai .am-so a b{font-size:var(--fs-24);min-width:56px}
  .ly-phai .am-so a span{font-size:var(--fs-13);color:var(--fg-primary)}
  .ly-phai .am-so a small{flex-basis:100%;font-size:var(--fs-12);color:var(--fg-muted)}
  .ly-phai .am-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ly-phai .am-kpi .am-ghi{grid-column:1/-1}
  @media (max-width:1099px){ .ly-phai{position:static} .ly-phai .am-so{grid-template-columns:repeat(3,minmax(0,1fr))} .ly-phai .am-so a{flex-direction:column;align-items:flex-start;flex-wrap:nowrap} .ly-phai .am-so a small{flex-basis:auto} .ly-phai .am-kpi{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} }   /* 22/10: ô số trên điện thoại xếp cột, dòng phụ không bị đẩy sang cột bên phải và tràn ra ngoài ô */
  @media (max-width:640px){ .ly-phai .am-so{grid-template-columns:1fr} }
  .am-ph1{text-decoration:none}
  .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-8) var(--s-12);margin:var(--s-8) 0;font-size:var(--fs-14)}
  /* ---- tấm NGĂN BÊN PHẢI trên laptop (giỏ hàng, chi tiết thẻ Hàng sắp về): không che bảng, không nhảy ---- */
  @media (min-width:768px){
    .hoi-nen.ngan-phai{justify-content:flex-end;align-items:stretch;padding:0}
    .hoi-nen.ngan-phai .hoi{width:min(520px,100%);max-height:none;height:100%;border-radius:0;border-top:0;border-bottom:0;border-right:0;transform:translateX(16px)}
    .hoi-nen.ngan-phai.open .hoi{transform:none}
    .hoi-nen.ngan-phai .hoi-than{flex:1}
  }
  /* ---- Yêu cầu từ cửa hàng: hộp thư hai cột ---- */
  .yc-loc{display:flex;flex-wrap:wrap;gap:var(--s-8);align-items:center;margin:var(--s-8) 0 var(--s-12)}
  .yc-q{flex:1 1 220px;max-width:360px}   /* 22/10: ô tìm đứng cùng hàng với chip nhóm, không trôi sang cột phải */
  .yc-luoi.yc-rong{grid-template-columns:minmax(0,1fr)}
  .ly-viec{display:flex;flex-wrap:wrap;gap:var(--s-6);margin:var(--s-4) 0 var(--s-12)} .ly-viec .btn{text-decoration:none}
  .yc-luoi{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-16) var(--s-24);align-items:start}
  @media (min-width:1000px){ .yc-luoi{grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr)} .yc-chi{position:sticky;top:calc(var(--topbar-h) + var(--s-16))} }
  .yc-ds{display:flex;flex-direction:column;gap:var(--s-6)}
  .yc-dong{appearance:none;width:100%;text-align:left;font:inherit;color:inherit;display:grid;gap:2px;padding:var(--s-8) var(--s-12);border:1px solid var(--border-default);border-left-width:4px;border-radius:var(--r-md);background:var(--bg-surface);cursor:pointer}
  .yc-dong:hover{background:var(--bg-hover)}
  .yc-dong.on{border-color:var(--accent);background:var(--bg-selected)}
  .yc-dong.tre{border-left-color:var(--status-danger)}
  .yc-dong:focus-visible{outline:var(--focus-ring);outline-offset:2px}
  .yc-d1{display:flex;align-items:center;gap:var(--s-8);font-size:var(--fs-14)} .yc-d1 b{flex:1;min-width:0}
  .yc-d2{font-size:var(--fs-12);color:var(--fg-muted)}
  .yc-d3{font-size:var(--fs-13);color:var(--fg-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .yc-chi{padding:var(--s-12) var(--s-16) var(--s-16)}
  .yc-chi-dt{margin:-6px 0 var(--s-6);border:1px solid var(--border-default);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);background:var(--bg-surface)}
  .yc-h{display:flex;align-items:center;gap:var(--s-8);font-size:var(--fs-16);font-weight:600;margin:var(--s-4) 0 var(--s-8)} .yc-h b{flex:1;min-width:0}
  .yc-meta{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4) var(--s-12);margin:0 0 var(--s-8);font-size:var(--fs-13)} .yc-meta dt{color:var(--fg-muted)} .yc-meta dd{margin:0}
  .yc-mota{font-size:var(--fs-14);line-height:1.5;white-space:pre-line;margin:0 0 var(--s-8);max-width:70ch}
  .yc-kq{border-radius:var(--r-md);padding:var(--s-8) var(--s-12);font-size:var(--fs-14);margin:var(--s-8) 0;background:var(--bg-sunken)} .yc-kq.ok{background:var(--status-ok-bg)} .yc-kq.bad{background:var(--status-danger-bg)} .yc-kq small{display:block;color:var(--fg-muted);font-size:var(--fs-12);margin-top:2px}
  .yc-tl{height:auto;min-height:88px;padding:var(--s-8) var(--s-12);font:inherit;line-height:1.45;resize:vertical}
  .doc .yc-chi .doc-nut .btn{min-height:40px}
  /* ---- KPI ---- */
  .kn-pad{max-width:980px}
  .kn-dau{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-16);margin:0 0 var(--s-8)} .kn-dau h2{margin:0}
  .kn-thang{display:flex;align-items:center;gap:var(--s-6);font-size:var(--fs-13);color:var(--fg-secondary)} .kn-thang .linput{width:auto;min-width:150px}
  .kn-han{margin-left:auto;font-size:var(--fs-13);font-weight:600}
  .doc .kn-bang{display:table;background:transparent;border:0;padding:0;margin:0}
  .kn-bang tr.kn-d{display:table-row;border-top:0;padding:0;gap:0}   /* .kn-d cũ là lưới cho màn điện thoại; ở bảng mới là hàng thường */
  .kn-bang tr.kn-d>td:first-child{grid-column:auto;font-weight:400}
  .kn-bang td,.kn-bang th{vertical-align:middle} .kn-bang .so{font-variant-numeric:tabular-nums} .kn-bang input.so{width:120px;text-align:right;margin-left:auto;min-height:36px}
  .kn-bang tbody tr{cursor:default} .kn-bang tr.sai .linput{border-color:var(--status-danger)} .kn-bang .loi{font-size:var(--fs-12);color:var(--status-danger);text-align:right}
  .kn-bang tfoot td{background:var(--bg-sunken);border-top:2px solid var(--border-default)} .kn-khong td{color:var(--fg-muted)}
  .kn-canh{color:var(--status-warn);font-size:var(--fs-13)}
  .kn-nut{align-items:center} .kn-thieu{margin-left:var(--s-4)}
  .kl-bang td small{display:block;font-size:var(--fs-12);color:var(--fg-muted);min-height:1em}
  .kn-sua tbody tr,.kl-bang tbody tr{cursor:default}
  @media (max-width:640px){ .kn-bang input.so{width:96px} .kn-han{margin-left:0} }
  /* ---- Tác phong ---- */
  .tp-bang th{white-space:normal;max-width:170px;line-height:1.3} .tp-bang{table-layout:auto}
  .tp-bang td{vertical-align:middle} .tp-bang tbody tr{cursor:default} .tp-o{min-width:72px} .tp-diem{font-size:var(--fs-16);font-variant-numeric:tabular-nums}
  .tp-gt{margin:0 0 var(--s-12);font-size:var(--fs-13);color:var(--fg-secondary)} .tp-gt summary{cursor:pointer;font-weight:600;color:var(--fg-primary);min-height:32px;display:flex;align-items:center} .tp-gt p{margin:var(--s-6) 0 0;max-width:80ch}
  /* ---- Hàng sắp về: chi tiết thẻ trong ngăn ---- */
  .hv-chi-dau{display:flex;align-items:center;gap:var(--s-8);margin:0 0 var(--s-8)} .hv-chi-dau b{font-size:var(--fs-20);font-variant-numeric:tabular-nums;margin-left:auto}
  .hv-szb{margin-top:var(--s-8)} .hv-szb tbody tr{cursor:default}
  /* ---- Kỹ thuật: danh sách bảng ---- */
  .kt-tom{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width:640px){ .kt-tom{grid-template-columns:1fr} }
  .kt-bang td{vertical-align:middle} .kt-anh{width:44px;padding-right:0} .kt-anh img{width:40px;height:52px;object-fit:cover;border-radius:var(--r-xs);display:block;background:var(--bg-sunken)} .kt-anh-ph{display:grid;place-items:center;width:40px;height:52px;border-radius:var(--r-xs);background:var(--bg-sunken);font-family:var(--font-mono);font-size:var(--fs-12);color:var(--fg-muted)}
  .kt-tick{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-12);padding:1px 8px;border-radius:999px;border:1px solid var(--border-subtle);color:var(--fg-muted);white-space:nowrap} .kt-tick.ok{color:var(--status-ok);background:var(--status-ok-bg);border-color:transparent} .kt-tick.no{color:var(--status-warn);background:var(--status-warn-bg);border-color:transparent}
  .kt-bang tr:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
  .kt-dem{margin:0 0 var(--s-8)}
  .hv-c.fchip{height:auto}
  /* ---- Kỹ thuật: hồ sơ một mã ---- */
  .kt-lo{display:flex;align-items:center;gap:var(--s-8);padding:var(--s-8) var(--s-12);border:1px solid var(--status-info);border-left-width:4px;border-radius:var(--r-md);background:var(--status-info-bg);color:var(--status-info);font-size:var(--fs-13);margin:0 0 var(--s-12)}
  .ktwrap{grid-template-columns:300px minmax(0,1fr)}
  @media (max-width:767px){ .ktwrap{grid-template-columns:1fr} }
  .kt-dau{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8);margin:0 0 var(--s-4)} .kt-dau>div{flex:1 1 auto;min-width:0} .kt-dau .ktchk{margin:0} .ktchk span{white-space:nowrap}
  .kt-tt{margin-left:auto;flex:none;white-space:nowrap;font-size:var(--fs-12);color:var(--fg-muted);display:inline-flex;align-items:center;gap:4px} .kt-tt.luu{color:var(--status-ok)} .kt-tt.loi{color:var(--status-danger)} .kt-tt.cho{color:var(--status-warn)} .kt-tt .linkbtn{padding:0;font-size:var(--fs-12)}
  .kt-up{display:inline-flex;margin-top:var(--s-8);cursor:pointer}
  .kt-maus{display:flex;flex-direction:column;gap:var(--s-6)} .kt-mau{display:flex;gap:var(--s-8);align-items:center;font-size:var(--fs-13)} .kt-mau .sw{width:20px;height:20px;border-radius:50%;border:1px solid var(--border-default);flex:none}
  .kt-dm{border:1px solid var(--border-default);border-radius:var(--r-md);padding:var(--s-8) var(--s-12);font-size:var(--fs-14)} .kt-dm>div{display:flex;justify-content:space-between;gap:var(--s-8);padding:2px 0} .kt-dm b{font-variant-numeric:tabular-nums}
  .kt-npl{margin-top:var(--s-16)}
  .ktnpl td:first-child{min-width:180px} .ktnpl td:nth-child(2) .linput{width:72px;text-align:right} .ktnpl td:nth-child(3) .linput{width:64px} .ktnpl td:nth-child(4){min-width:160px} .ktnpl td:nth-child(5) .linput{width:96px} .ktnpl td.kt-luu-o{width:88px;white-space:nowrap}
  .ktnpl tbody tr{cursor:default} .ktnpl .linput{height:var(--control-h);width:100%}
  .kt-luu{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-12);color:var(--fg-muted)} .kt-luu.ok{color:var(--status-ok)} .kt-luu.cho{color:var(--status-warn)} .kt-luu.loi{color:var(--status-danger)} .kt-luu.dang i,.kt-tt.dang i{animation:kt-xoay 1s linear infinite}
  .kt-chuan{display:flex;flex-wrap:wrap;gap:var(--s-6)} .kt-chuan span{font-size:var(--fs-13);padding:4px 10px;border-radius:999px;background:var(--bg-sunken)}
  .kt-thieu .chip{white-space:normal;height:auto;padding:3px 8px;line-height:1.3}
  @keyframes kt-xoay{to{transform:rotate(360deg)}}
}