/* Xuân Thu · D1 09/10: màn laptop của Hiếu (mua hàng) và Tiến (in tem). Nạp sau van_phong.css, cùng layer screens.
   Màu: cam = chỉ nút chính; vàng nâu = cần làm; đỏ = quá hạn; xanh = xong. Số dùng tabular-nums. */
@layer screens {
  .hh-luoi,.mn-luoi,.tem-luoi{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-16) var(--s-24);align-items:start}
  @media (min-width:1100px){
    .hh-luoi{grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr)}
    .mn-luoi{grid-template-columns:minmax(0,1fr) minmax(380px,460px)}
    .tem-luoi{grid-template-columns:minmax(0,1fr) minmax(340px,420px)}
    .hh-phai,.mn-ngan,.tem-ngan{position:sticky;top:calc(var(--topbar-h) + var(--s-16));max-height:calc(100vh - var(--topbar-h) - var(--s-32));overflow:auto}
  }
  @media (max-width:1099px){ .tem-ngan{display:none} .mn-ngan:empty{display:none} }
  .hh-phai,.mn-ngan,.tem-ngan{border:1px solid var(--border-default);border-radius:var(--r-lg);background:var(--bg-surface);padding:var(--s-12) var(--s-16) var(--s-16);min-width:0}
  .hh-o{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-8);margin:0 0 var(--s-12)}
  .hh-o a{display:flex;flex-direction:column;gap:2px;padding:var(--s-8) var(--s-12);border:1px solid var(--border-default);border-radius:var(--r-md);background:var(--bg-surface);color:var(--fg-primary);text-decoration:none;min-height:72px}
  .hh-o a:hover{background:var(--bg-hover)} .hh-o a:focus-visible{outline:var(--focus-ring);outline-offset:2px}
  .hh-o .l{font-size:var(--fs-12);color:var(--fg-secondary);font-weight:500}
  .hh-o .n{font-size:var(--fs-24);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
  .hh-o .s{font-size:var(--fs-12);color:var(--fg-muted)}
  .hh-o a.do{border-left:3px solid var(--status-danger)} .hh-o a.do .n{color:var(--status-danger)}
  .hh-o a.can{border-left:3px solid var(--status-warn)}
  .hh-o .errbox{grid-column:1/-1}
  .hh-muc{margin:var(--s-16) 0 var(--s-8);font-size:var(--fs-14);font-weight:600;color:var(--fg-secondary);display:flex;align-items:center;gap:var(--s-8)}
  .hh-muc small{font-weight:400;color:var(--fg-muted);font-size:var(--fs-12)}
  .hh-viec{display:flex;align-items:center;gap:var(--s-12);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);margin:0 0 var(--s-8);color:inherit;text-decoration:none}
  .hh-viec:hover{background:var(--bg-hover)} .hh-viec:focus-visible{outline:var(--focus-ring);outline-offset:2px}
  .hh-viec.do{border-left-color:var(--status-danger)} .hh-viec.can{border-left-color:var(--status-warn)} .hh-viec.cho{border-left-color:var(--border-strong)}
  .hh-viec>div{flex:1;min-width:0} .hh-viec b{display:block;font-size:var(--fs-14)} .hh-viec small{display:block;color:var(--fg-secondary);font-size:var(--fs-12);margin-top:2px}
  .hh-viec .chip{flex:none} .hh-viec>i{color:var(--fg-muted)}
  .hh-phai .am-h3{margin-top:var(--s-16)}
  .loc-thanh{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8);margin:0 0 var(--s-12)}
  .loc-thanh .fchips{margin:0;flex-wrap:wrap}
  .loc-thanh .tim{width:240px;flex:none}
  .loc-thanh .phai{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8);margin-left:auto}
  @media (max-width:767px){ .loc-thanh .tim{width:100%} .loc-thanh .phai{margin-left:0;width:100%} .loc-thanh .phai .tim{flex:1 1 100%} }
  .fchip b{margin-left:4px;font-variant-numeric:tabular-nums;font-weight:600}
  .mn-dong{cursor:pointer} .mn-dong.on td{background:var(--bg-selected)} .mn-dong:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
  .mn-dong:hover td{background:var(--bg-hover)}
  .mn-ct h3{margin:0;font-size:var(--fs-16);line-height:1.3} .mn-ct .mn-meta{font-size:var(--fs-13);color:var(--fg-secondary);margin:var(--s-4) 0 var(--s-12);line-height:1.5}
  .mn-bang{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
  .mn-bang th{text-align:left;font-size:var(--fs-12);color:var(--fg-muted);font-weight:600;padding:var(--s-4) var(--s-6);border-bottom:1px solid var(--border-default)}
  .mn-bang td{padding:var(--s-6);border-bottom:1px solid var(--border-subtle);vertical-align:top}
  .mn-bang td.num,.mn-bang th.num{text-align:right;font-variant-numeric:tabular-nums}
  .mn-bang .field{margin:0;align-items:flex-end} .mn-bang .field .linput{height:var(--control-h);width:92px;text-align:right}
  .mn-bang .field .loi{font-size:var(--fs-12);color:var(--status-danger);white-space:normal;text-align:right}
  .mn-tong{display:flex;justify-content:space-between;font-weight:600;padding:var(--s-8) var(--s-6);font-variant-numeric:tabular-nums}
  .mn-hanh{display:flex;flex-wrap:wrap;gap:var(--s-8);align-items:center;margin-top:var(--s-12)}
  .mn-hanh .btn.phu{margin-left:auto}
  .mn-dat{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8) var(--s-12);margin-top:var(--s-12)}
  .mn-dat .field{margin:0}
  @media (max-width:480px){ .mn-dat{grid-template-columns:1fr} }
  .mn-ngan .errbox,.mn-ngan .okbox{margin-top:var(--s-12)}
  .ncc-gan{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
  .ncc-gan .chip .ibtn{width:18px;height:18px;min-height:0;min-width:0;border:0;background:transparent;color:inherit;padding:0;margin-left:2px;cursor:pointer;display:inline-grid;place-items:center;border-radius:50%}
  .ncc-gan .chip .ibtn:hover{background:rgba(0,0,0,.08)} .ncc-gan .chip .ibtn:focus-visible{outline:var(--focus-ring)}
  .chip.ngung{background:var(--bg-sunken);color:var(--fg-muted)}
  .dx-ly{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dx-ghi{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;color:var(--fg-secondary)}
  @media (max-width:767px){ .dx-ly,.dx-ghi{max-width:none;white-space:normal} }
  .cay-chon{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-12);padding:var(--s-8) var(--s-12);border:1px solid var(--accent);background:var(--accent-subtle-bg);border-radius:var(--r-md);margin:0 0 var(--s-8)}
  .cay-chon b{flex:1}
  .tem-ngan h3{margin:0 0 var(--s-4);font-size:var(--fs-20)} .tem-ngan .tn-meta{font-size:var(--fs-13);color:var(--fg-secondary);line-height:1.5}
  .tn-sz{display:flex;flex-wrap:wrap;gap:var(--s-6);margin:var(--s-8) 0}
  .tn-sz span{border:1px solid var(--border-default);border-radius:var(--r-sm);padding:2px var(--s-8);font-size:var(--fs-13);font-variant-numeric:tabular-nums}
  .tn-tl{list-style:none;margin:var(--s-12) 0;padding:0;font-size:var(--fs-13)} .tn-tl li{display:flex;gap:var(--s-8);padding:var(--s-6) 0;border-top:1px solid var(--border-subtle)}
  .tn-tl li i{color:var(--fg-muted);font-size:var(--fs-16)} .tn-tl li.xong i{color:var(--status-ok)}
  .tn-nut{display:flex;flex-direction:column;gap:var(--s-8);margin-top:var(--s-12)} .tn-nut .btn{width:100%}
  @media (min-width:1100px){ .tem-ds .xl-the{cursor:pointer} .tem-ds .xl-the.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .tem-ds .xl-nut{min-height:40px;font-size:var(--fs-14)} }
  .vt-buoc.vt-cho .vte{display:none}
  .vt-xoa{margin-top:var(--s-12);color:var(--status-danger)}
  .tblwrap.dinh .dtable td.num{font-variant-numeric:tabular-nums}
  .tblwrap.dinh .dtable tr:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
}
@layer screens {
  /* bảng của Hiếu: ô được xuống dòng để bảng vừa khung (tiêu đề vẫn dính), không trượt ngang cả trang */
  .mn-luoi .dtable td,#nccwrap .dtable td,#dxwrap .dtable td,#cwrap .dtable td{white-space:normal;vertical-align:top;padding-top:var(--s-8);padding-bottom:var(--s-8);height:auto}
  .mn-luoi .dtable td:first-child b,#dxwrap .dtable td .mono,#cwrap .dtable td b{white-space:nowrap}
  .dx-ly{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:none}
  .dx-ghi{white-space:normal;max-width:none}
  @media (min-width:1100px){ .mn-luoi{grid-template-columns:minmax(0,1fr) minmax(340px,400px)} }
  .tblwrap.dinh{max-width:100%}
}
@layer screens {
  /* Mua ngoài: khi ngăn chi tiết mở, bảng đơn cuộn ngang trong khung thay vì chui xuống dưới ngăn */
  @media (min-width:768px){ .mn-luoi .tblwrap.dinh{overflow:auto} .mn-luoi .tblwrap.dinh .dtable th{top:0} }
  .mn-bang th{white-space:nowrap} .mn-bang .field .linput{width:84px}
}
/* 15/10 (Mua ngoài v2): tab Cần đặt của chị Bích, một dòng một việc (giữ / bỏ + số đặt), số liệu gập. Vàng nâu = cần làm, không có ô xanh. */
@layer screens {
  .mn-o{margin-bottom:var(--s-12)}
  .cd-trong{border:1px solid var(--status-warn);border-left-width:4px;border-radius:var(--r-md);background:var(--status-warn-bg);color:var(--fg-primary);padding:var(--s-8) var(--s-12);margin:0 0 var(--s-12);font-size:var(--fs-14);line-height:1.5}
  .cd-trong .btn{margin-left:var(--s-8)}
  .cd-ncc{padding:var(--s-12) var(--s-16);margin:0 0 var(--s-12)}
  .cd-dau{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-8);margin-bottom:var(--s-8)} .cd-dau h3{margin:0;font-size:var(--fs-16)}
  .cd-canh{display:flex;gap:6px;align-items:flex-start;font-size:var(--fs-13);color:var(--status-warn);margin:0 0 var(--s-8)}
  .cd-dong{display:flex;align-items:flex-start;gap:var(--s-8);padding:var(--s-8) 0;border-top:1px solid var(--border-subtle)}
  .cd-dong.bo .cd-nd{opacity:.55} .cd-dong.bo .cd-ten b{text-decoration:line-through}
  .cd-giu{width:22px;height:22px;margin-top:2px;flex:none}
  .cd-nd{flex:1;min-width:0} .cd-ten{font-size:var(--fs-14);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center} .cd-ten span{color:var(--fg-secondary);font-size:var(--fs-13)}
  .cd-vi{font-size:var(--fs-13);color:var(--fg-secondary);margin-top:2px;line-height:1.45}
  .cd-chi summary{cursor:pointer;font-size:var(--fs-12);color:var(--fg-muted);margin-top:4px} .cd-chi[open] summary{margin-bottom:4px}
  .cd-sl-ds{display:grid;grid-template-columns:max-content 1fr;gap:2px var(--s-12);margin:0;font-size:var(--fs-13)} .cd-sl-ds dt{color:var(--fg-muted)} .cd-sl-ds dd{margin:0;font-variant-numeric:tabular-nums}
  .cd-so{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px} .cd-so .linput{width:76px;text-align:right;font-variant-numeric:tabular-nums} .cd-so small{font-size:var(--fs-12);color:var(--fg-muted)}
  .cd-hanh{display:flex;justify-content:flex-end;padding-top:var(--s-8);border-top:1px solid var(--border-subtle)}
  .cd-chon{display:flex;gap:var(--s-8);flex-wrap:wrap;justify-content:flex-end} .cd-chon .linput{min-width:200px}
  @media (max-width:767px){ .cd-sl-ds{grid-template-columns:1fr} .cd-sl-ds dd{margin-bottom:4px} .cd-hanh .btn{width:100%} .cd-chon{width:100%} .cd-chon .linput{flex:1 1 100%} }
  .dc-mua .chip{font-size:var(--fs-12)}
}
@layer screens {
  @media (max-width:767px){ .mn-o{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .mn-o a{padding:6px 8px;min-height:0} .mn-o .n{font-size:var(--fs-18)} .mn-o .l,.mn-o .s{font-size:11px;line-height:1.3} }
}
@layer screens {
  .dc-mua{margin:var(--s-8) 0;padding:var(--s-8) var(--s-12);border:1px solid var(--border-default);border-radius:var(--r-md);background:var(--bg-sunken, var(--bg-surface));font-size:var(--fs-13);line-height:1.5}
  .dc-mua>div{margin-top:4px} .dc-mua small{color:var(--fg-secondary)}
}
@layer screens {
  /* 15/10: thẻ Đơn đã gửi ở điện thoại: chip bước dài (vd "Chờ chị Bích lập đơn mua ngoài") xuống dòng, mã đơn không bị ép thành cột hẹp */
  @media (max-width:767px){ .dc-dau{flex-wrap:wrap} .dc-dau>div{flex:1 1 100%;min-width:0} }
}