/* màn nghiệp vụ (đơn bán, …) */
.row.wrap{flex-wrap:wrap} .row.end{justify-content:flex-end} .grow{flex:1;min-width:0}
.grid2,.grid3{display:grid;gap:var(--s3)} .grid2{grid-template-columns:1fr} .grid3{grid-template-columns:1fr 1fr 1fr}
@media (min-width:640px){.grid2{grid-template-columns:1fr 1fr}}
.num{text-align:right} .strong{font-weight:700}
.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s3);padding:var(--s1) 0;border-bottom:1px solid var(--line)} .kv:last-child{border-bottom:0}
.sum .row{padding:var(--s1) 0} .sum .total{border-top:1px solid var(--line);margin-top:var(--s2);padding-top:var(--s3);font-size:var(--fs-lg)}
.pick{margin-top:calc(-1*var(--s2));box-shadow:var(--shadow, 0 4px 14px rgba(0,0,0,.12));position:relative;z-index:5;max-height:260px;overflow:auto}
.pick li{padding:0;border-radius:0} .pick-btn{display:block;width:100%;text-align:left;min-height:var(--tap);padding:var(--s2) var(--s3);background:transparent;border:0;color:var(--ink);font:inherit;cursor:pointer} .pick-btn:hover,.pick-btn:focus-visible{background:var(--accent-weak)}
.num-in{text-align:right}
.ord-link{display:block;color:inherit;text-decoration:none;padding:var(--s3)} .ord-cards>li{padding:0}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs)} .tbl th,.tbl td{padding:var(--s3);text-align:left;border-bottom:1px solid var(--line);white-space:nowrap} .tbl th.num,.tbl td.num{text-align:right} .tbl thead th{background:var(--surface-2);font-weight:600} .tbl tbody th{font-weight:600} .tbl tr:last-child>*{border-bottom:0}
.tbl a{color:var(--accent);min-height:var(--tap);display:inline-flex;align-items:center}
.ord-table{display:none} @media (min-width:768px){.ord-cards{display:none}.ord-table{display:block}}
.line .field{margin:0}
a.btn{text-decoration:none} .tbl td{white-space:normal} .tbl th{white-space:nowrap}
.grid3{align-items:end}
.tbl td.num,.tbl td:last-child{white-space:nowrap} .badge{white-space:nowrap}
.neg{color:var(--err)} .stk-filters{align-items:end} @media (max-width:639px){.stk-filters{grid-template-columns:1fr}}
/* hộp kiểm: vùng chạm 44px, hình 22px */
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:44px;height:44px;flex:none;margin:0;background:transparent;position:relative;cursor:pointer}
input[type=checkbox]::before{content:"";position:absolute;inset:11px;border:2px solid var(--soft);border-radius:5px;background:var(--surface)}
input[type=checkbox]:checked::before{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:checked::after{content:"";position:absolute;left:17px;top:12px;width:6px;height:12px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type=checkbox]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:8px}
label.row{min-height:var(--tap);cursor:pointer}
.row.wrap>.grow{flex:1 1 220px}
.linkbtn{background:none;border:0;padding:0;min-height:var(--tap);color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}

/* ---- In chứng từ ---- */
.pdoc{background:#fff;color:#000;max-width:210mm;margin:0 auto;padding:12mm;border:1px solid var(--line);font-size:13px;line-height:1.45}
.pdoc .phead{border-bottom:1px solid #000;padding-bottom:6px;margin-bottom:6px} .pdoc .ptitle{text-align:center;margin:8px 0 2px;font-size:1.25rem;letter-spacing:.02em;color:#000} .pdoc .psub{text-align:center;margin-bottom:6px}
.pdoc .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;margin:8px 0} .pdoc .pkv{display:flex;gap:6px} .pdoc .pk{color:#333;min-width:90px;font-weight:600}
.pdoc .ptbl{width:100%;border-collapse:collapse;margin:8px 0} .pdoc .ptbl th,.pdoc .ptbl td{border:1px solid #000;padding:3px 5px;text-align:left} .pdoc .ptbl .num,.pdoc .num{text-align:right;font-variant-numeric:tabular-nums}
.pdoc .ptot{margin-left:auto;width:min(320px,100%)} .pdoc .ptot>div{display:flex;justify-content:space-between;gap:12px;padding:1px 0} .pdoc .pwords{margin:6px 0;font-style:italic}
.pdoc .psign{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;text-align:center;margin-top:18px} .pdoc .sigline{height:56px}
@media (max-width:720px){.pdoc{padding:8px;overflow-x:auto}.pdoc .pgrid{grid-template-columns:1fr}.pdoc .ptbl{min-width:520px}}
@media print{
  @page{size:A4;margin:10mm}
  body{background:#fff !important} .noprint,.nav,.top,.topbar,.banner-host,header,.skip,#sync-banner,.tabs,.toast-host,h1{display:none !important}
  main,#main,.main{padding:0 !important;margin:0 !important;max-width:none !important} .pdoc{border:0;padding:0;max-width:none;font-size:11.5pt}
}

.ggt-ln{margin:8px 0;line-height:1.7;font-size:1.02rem}

.cmd-hint{flex-basis:100%}
.ggt-title{text-align:center;margin:28px 0 12px}
.ggt-sign{grid-template-columns:1fr 1fr;margin-top:24px}
/* chừa chỗ dưới cùng để thanh điều hướng điện thoại không che nút cuối trang */
@media (max-width:1023.98px){.main{padding-bottom:calc(var(--nav-h) + var(--s5) + env(safe-area-inset-bottom))}}
@media (min-width:1024px){.main{padding-bottom:var(--s6)}}

/* khoảng ngày thống nhất: Từ ngày | Đến ngày cạnh nhau, có nhãn, mọi cỡ màn hình */
.drange{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:end;max-width:460px} .drange-f{display:flex;flex-direction:column;gap:4px;min-width:0} .drange-f .lbl{margin:0} .drange-f .input,.drange-f .combo{width:100%;min-width:0}
.rp-ctl{align-items:flex-end}
.docno{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .docno input[readonly]{background:var(--surface-2,#f3f4f6)}
.card.stack>.field,.grid2>.field,.grid3>.field,.docno>.field{margin-bottom:0} .card.stack>.field+.field{margin-top:var(--s3)} .grid3r{display:grid;gap:var(--s3);grid-template-columns:1fr} .grid3r>.field{margin-bottom:0} @media (min-width:720px){.grid3r{grid-template-columns:1fr 1fr 1fr}}

/* ===== bố cục form chứng từ gọn (đơn) ===== */
.docno{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} @media (min-width:720px){.docno{grid-template-columns:minmax(0,220px) minmax(0,170px)}}
.ord-who,.ord-meta{display:grid;gap:var(--s3);grid-template-columns:1fr} .ord-who>.field,.ord-meta>.field{margin-bottom:0}
@media (min-width:720px){.ord-who{grid-template-columns:minmax(0,1fr) minmax(0,300px)} .ord-meta{grid-template-columns:minmax(0,170px) minmax(0,220px) minmax(0,1fr)}}
.sum{max-width:380px;margin-left:auto} @media (max-width:719px){.sum{max-width:none}}
details.sign>summary{cursor:pointer;font-weight:600} details.sign[open]>summary{margin-bottom:var(--s3)}
.actbar{position:sticky;bottom:0;z-index:20;background:var(--bg,#f6f7f9);padding:var(--s3) 0;border-top:1px solid var(--line);align-items:center}
.actbar{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px))} @media (min-width:1024px){.actbar{bottom:0}}
@media (max-width:719px){.sum .row{padding-right:52px}}

/* dòng hàng dạng lưới một hàng (nhãn trên, ô dưới, thẳng cột) */
.sline,.tline,.cline,.mline{display:grid;gap:var(--s2) var(--s3);align-items:start} .sline .field,.tline .field,.cline .field,.mline .field,.oline .field{margin:0}
.s-name{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--s1);overflow-wrap:anywhere}
.sline .num,.cline .num,.mline .num{min-height:44px;display:flex;align-items:center;justify-content:flex-end}
.tline .t-x{align-self:end}
.sline{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"it it it" "rm tn sl"} .sline.sin{grid-template-areas:"it it it" "rm sl sl"}
.s-it{grid-area:it} .s-rm{grid-area:rm} .s-tn{grid-area:tn} .s-sl{grid-area:sl}
.tline{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"it x" "sl sl"} .t-it{grid-area:it} .t-x{grid-area:x} .t-sl{grid-area:sl}
.cline{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"it it it" "bk ct df" "nt nt nt"} .c-it{grid-area:it} .c-bk{grid-area:bk} .c-ct{grid-area:ct} .c-df{grid-area:df} .c-nt{grid-area:nt}
.mline{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"it it" "rm sl"} .m-it{grid-area:it} .m-rm{grid-area:rm} .m-sl{grid-area:sl}
@media (min-width:720px){
 .sline{grid-template-columns:minmax(0,1fr) 84px 84px 112px;grid-template-areas:"it rm tn sl"} .sline.sin{grid-template-columns:minmax(0,1fr) 84px 112px;grid-template-areas:"it rm sl"}
 .tline{grid-template-columns:minmax(0,1fr) 160px 44px;grid-template-areas:"it sl x"}
 .cline{grid-template-columns:minmax(0,1fr) 110px 130px 110px;grid-template-areas:"it bk ct df" "nt nt nt nt"}
 .mline{grid-template-columns:minmax(0,1fr) 120px 150px;grid-template-areas:"it rm sl"}
}
/* bảng dữ liệu: đầu bảng nhỏ & dịu, hàng có hover, số thẳng cột */
.tbl thead th{font-size:var(--fs-sm);color:var(--soft);font-weight:600;position:sticky;top:0;z-index:1;border-bottom:1px solid var(--line)}
.tbl tbody tr:hover>*{background:var(--accent-weak)} .tbl td.num,.tbl th.num{font-variant-numeric:tabular-nums}
.tbl tbody th a{font-weight:600}
main h1,.main h1{letter-spacing:-.01em}

/* đầu đơn: gom 2 hàng (PC) để cả đơn vừa một màn hình */
@media (min-width:1100px){
 .main h1{margin-bottom:var(--s2)} .main h2{margin:var(--s3) 0 var(--s2)}
 .sum{max-width:none;margin-left:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s2) var(--s6);padding:var(--s3) var(--s4)}
 .sum .row{flex-direction:column;align-items:flex-end;gap:0;padding:0;margin:0;min-width:120px;flex-wrap:nowrap} .sum .row .grow{flex:none;font-size:var(--fs-sm);color:var(--soft)}
 .sum .total{border:0;margin:0;padding:0;font-size:var(--fs-lg)} .sum>*+*{margin-top:0}
}


/* PC: danh sách dòng hàng cuộn trong khung, dòng gọn, nhãn cột chỉ hiện ở dòng đầu */

@media (min-width:1100px){.main:has(.actbar){padding-bottom:var(--s2)} .actbar{padding:var(--s2) 0}}

/* ===== vận đơn / chuyển kho: 2 khối xếp dọc trên PC (Đơn hàng + hàng giao ở trên, Vận chuyển ở dưới) ===== */
.ship-title{display:block} .ship-meta{display:grid;gap:var(--s3);grid-template-columns:1fr} .ship-meta>.field{margin:0} .ship-meta .docno{grid-template-columns:1fr 1fr}
@media (min-width:1100px){
 .ship-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
 .ship-l>*+*{margin-top:var(--s2)} .ship-l h2{margin:var(--s2) 0 0}
 .ship-meta{grid-template-columns:190px 140px minmax(0,1fr)} .ship-meta .docno{display:contents}
 .ship-addr{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .ship-addr>*{margin:0!important} .ship-addr .hint{display:none}
 .ship-meta.tr-meta{grid-template-columns:190px 140px minmax(0,1fr) minmax(0,1fr)}
 .ship-info{padding:var(--s3) var(--s4)}

 .tcard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2) var(--s3);padding:var(--s3) var(--s4);align-items:start}
 .tcard>*{margin:0!important} .tcard>h2{grid-column:1/-1} .tcard>.field:has(textarea){grid-column:1/-1;order:99} .tcard .grid2{display:contents} .tcard .field{margin:0} .tcard .hint{display:none}
 .tcard textarea.input{min-height:var(--tap);height:var(--tap)} .tcard h2{font-size:1rem;margin:0}
}
@media (min-width:1100px){ .ship-meta.tr-meta{grid-template-columns:1fr 1fr} .ship-meta.tr-meta .docno{display:grid;grid-column:1/-1;grid-template-columns:190px 140px} }

/* kiểm kê & chi tiết chứng từ: gọn trên PC */
@media (min-width:1100px){
 .cnt-head{display:grid!important;grid-template-columns:190px 140px minmax(0,1fr) minmax(0,1.4fr);gap:var(--s3);align-items:start;padding:var(--s3) var(--s4)} .cnt-head>*{margin:0!important} .cnt-head .docno{display:contents} .cnt-head textarea.input{min-height:var(--tap);height:var(--tap)}

 .card:has(>.kv){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s5);padding:var(--s3) var(--s4)} .card:has(>.kv)>:not(.kv){grid-column:1/-1} .card:has(>.kv)>.kv:nth-last-child(-n+3){border-bottom:0}
}

.filt-row{display:block} @media (min-width:1100px){.filt-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end} .filt-row>.grid2{flex:1 1 520px} .filt-row>.drange{flex:0 0 auto;margin:0;max-width:none} .filt-row>.drange{grid-template-columns:170px 170px}
 .tbl th,.tbl td{padding:var(--s2) var(--s3)}}
@media (min-width:1100px){
 .cline{grid-template-columns:minmax(0,1fr) 100px 130px 100px 240px;grid-template-areas:"it bk ct df nt";align-items:end}
 #cnt-lines{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2) var(--s3)} #cnt-lines>*+*{margin-top:0}
 #cnt-lines .cline{border:0;box-shadow:none;border-radius:0;background:transparent;padding:var(--s1) 0;border-top:1px solid var(--line)} #cnt-lines .cline:first-child{border-top:0}
 #cnt-lines .cline:not(:first-child):not(.pg-top) .field>.lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* chia trang tự động (PC) */
.pg-hide{display:none !important}
.pg-bar{display:flex;justify-content:flex-end;align-items:center;gap:var(--s3);margin-top:var(--s2)} .pg-bar .btn{min-height:34px;padding:0 var(--s3)} .pg-info{color:var(--soft);font-size:var(--fs-sm);min-width:12ch;text-align:center}
@media (min-width:1100px){
  .tbl th,.tbl td{padding:5px var(--s3)} .tbl a{min-height:0} .tbl td[colspan]{padding:3px var(--s3)}
  .tbl .btn,.tbl td[colspan] .btn{min-height:28px;padding:0 var(--s3);font-size:var(--fs-sm)}
  .tbl .stage-box{flex-direction:row;align-items:center;gap:var(--s2)}
  .pg-bar{padding-right:64px}
}
@media (min-width:1100px){
  .main{padding-top:var(--s3);padding-bottom:var(--s3) !important} .main h1{font-size:var(--fs-lg);margin-bottom:var(--s1)} .main .stack{gap:var(--s2)}
  .lbar{flex-wrap:nowrap;align-items:center} .lbar>.grow{min-width:180px} .lbar .btn{white-space:nowrap;min-height:36px} .lbar>select.input{width:auto;min-width:170px;flex:none} .lbar>.grow>.tabs{flex-wrap:nowrap}
}

@media (min-width:1100px){
 .acct{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s4);align-items:start}
 .acct>*{grid-column:1}
 .acct>.acct-role{grid-column:2;grid-row:1/span 5}
 .acct>.acct-out{justify-self:start;min-width:160px}
 .acct:not(:has(.acct-role)){grid-template-columns:minmax(0,560px)}
}
@media (min-width:1100px){

  #ord-cmds>div,#ord-cmds .stack{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--s2)} #ord-cmds .btn{font-size:var(--fs-sm)}

}


/* PC: gọn khung — tiêu đề trang chỉ để trình đọc màn hình (menu bên trái đã báo mục đang mở), thanh trên 1 dòng */
@media (min-width:1100px){
  .main>h1{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  .topbar{padding-block:var(--s1)} button.chip,button.chip:has(.chip-m:not(:empty)){min-height:34px;padding-block:0} .chip .chip-b{flex-direction:row;gap:var(--s2);align-items:center}
  .chip .chip-m{max-width:none}
}
@media (min-width:1100px){
  .tabs .btn{min-height:32px;padding:0 var(--s3)} .tabs{padding-bottom:0}
  .debt-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);align-items:end} .debt-card>:nth-child(n+3){grid-column:1/-1} .debt-card .docno{margin:0}
  .cnt-xn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2) var(--s3)} .cnt-xn>strong{grid-column:1/-1} .cnt-xn>.field{margin:0}
  .card{padding:var(--s3)} textarea.input{min-height:56px}
}

@media (min-width:1100px){ #ord-cmds{padding:var(--s2) var(--s3) !important;gap:var(--s1) !important} #ord-cmds .small,#ord-cmds .muted{line-height:1.3} .acct .card{padding:var(--s2) var(--s3)} .acct{gap:var(--s2) var(--s3)} }
.pr-sel{width:auto;min-width:170px}
@media screen and (min-width:1100px){ .pdoc{zoom:var(--pz,1)} }
select.input.pr-sel{width:auto;flex:0 0 auto} @media (min-width:1100px){.row.wrap.noprint{flex-wrap:nowrap;align-items:center}}
@media (min-width:1100px){ .sign-g{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px){ .sign{position:relative} .sign[open]>.sign-g{position:absolute;left:0;right:0;bottom:100%;z-index:30;margin-bottom:var(--s1);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.18));padding:var(--s3) var(--s4)} }
@media (min-width:1100px){ .co-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s5);align-items:start} .co-form>:not(.grid2){grid-column:1/-1} .co-form>.grid2{margin:0} }
@media (min-width:1100px){ .co-form{row-gap:var(--s1)} .co-form .field{margin:0} }
@media (min-width:1100px){ .co-form>.btn{justify-self:end;width:auto} .co-form>[role=alert]:empty{display:none} }

@media (min-width:1100px){ .card:has(>.kv)>.row:has(>#debt-pay,>#debt-cancel){grid-column:auto} .card:has(>.kv)>.row:has(>#debt-cancel){justify-self:start} }
/* điện thoại: dòng hàng không có nút ✕ (đơn 1 dòng) dùng đủ 3 cột, nhãn không xuống dòng nên 3 ô ngang hàng */

@media (min-width:1100px){ .tbl td.it-name{max-width:230px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tbl td.it-code{white-space:nowrap} }
@media (min-width:1100px){ .ord-table .tbl td{min-width:0} .ord-table .tbl td.it-name{max-width:250px} .ord-table .tbl td:nth-child(3){min-width:130px;max-width:200px;overflow:hidden;text-overflow:ellipsis} .ord-table .tbl .stage-t{display:none} }

/* Luồng chứng từ của đơn */
.steps{list-style:none;margin:0;padding:8px 10px;display:flex;flex-wrap:wrap;gap:6px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.steps li{display:flex;align-items:center;gap:6px;min-width:0}
.steps .st-dot{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;font-size:12px;font-weight:700;flex:none;color:var(--soft)}
.steps .st-done .st-dot{background:var(--ok);border-color:var(--ok);color:var(--accent-ink)}
.steps .st-now .st-dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.steps .st-now.mine .st-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.steps .st-todo .st-t{color:var(--soft)}
.steps .st-now .st-t{font-weight:700}
.steps li:not(:last-child)::after{content:"";width:14px;height:2px;background:var(--line);margin-left:2px;flex:none}
@media (max-width:719px){.steps{flex-direction:column;gap:6px}.steps li:not(:last-child)::after{content:none}}
@media (min-width:1100px){.steps{gap:4px 16px;padding:6px 10px}.steps li:not(:last-child)::after{content:none}.steps .st-d{white-space:nowrap}}
/* màn hình PC thấp (≤700px cao): nén khoảng cách để mọi màn vẫn nằm trọn một trang */
@media (min-width:1100px) and (max-height:700px){
  .stack{gap:6px} .card{padding:8px 12px} .card.stack{gap:4px}
  .kv{padding-block:2px;min-height:0} .tbl th,.tbl td{padding-block:3px} .field{gap:2px} .input,select.input{min-height:32px;padding-block:3px}
  .steps{padding:4px 10px} .main{padding-top:6px} h2{margin-bottom:4px;font-size:1.05rem} .btn{min-height:32px}
  .actbar{padding-top:4px;margin-top:0}
}

@media (min-width:1100px) and (max-height:700px){.steps .st-d{display:none}.steps{flex-wrap:nowrap}.steps .st-t{white-space:nowrap}}

#task-table{font-size:.9rem} #task-table th,#task-table td{padding-block:5px} #task-table .doc-flag{margin-left:0}

/* Bảng điện Nhập–Xuất–Tồn: nền tối cố định như bảng giá chứng khoán; tăng xanh, giảm đỏ, không đổi vàng */
.board{--bd-bg:#fff;--bd-row:#fff;--bd-line:#d5dce6;--bd-ink:#14202e;--bd-soft:#4a5b70;--bd-up:#0a8f3c;--bd-dn:#d12b2b;--bd-eq:#b45309;--bd-head:#eef2f7;--bd-even:#f6f8fb;--bd-hover:#e6eefb;--bd-on:#dbe8fb;--bd-onl:#4a6fa5;--bd-z:#9aa7b8;--bd-link:#0b5fc0;--bd-grp:#0b5fc0;--bd-flu:#bbf7d0;--bd-fld:#fecaca;--bd-negbg:#b91c1c;background:var(--bd-bg);color:var(--bd-ink);border-radius:var(--r);border:1px solid var(--bd-line);overflow:hidden}
.bd-tick{display:flex;flex-wrap:wrap;gap:var(--s2);padding:var(--s3);border-bottom:1px solid var(--bd-line);background:var(--bd-head)}
.bd-chip{display:inline-flex;align-items:center;gap:var(--s2);min-height:34px;padding:0 var(--s3);border-radius:6px;border:1px solid var(--bd-line);background:transparent;color:var(--bd-ink);font:inherit;font-size:.875rem;cursor:pointer}
.bd-chip b{font-variant-numeric:tabular-nums;font-size:1rem} .bd-chip.up b{color:var(--bd-up)} .bd-chip.dn b{color:var(--bd-dn)} .bd-chip.eq b{color:var(--bd-eq)} .bd-chip.neg b{color:var(--bd-dn)}
.bd-chip.on{background:var(--bd-on);border-color:var(--bd-onl)}
.bd-wrap{overflow:auto;max-height:70vh}
.board .bd-tbl{background:transparent;color:var(--bd-ink);font-size:.92rem;font-variant-numeric:tabular-nums} .board .bd-tbl th,.board .bd-tbl td{border-bottom:1px solid var(--bd-line);background:transparent;padding:6px var(--s3)}
.board .bd-tbl thead th{background:var(--bd-head);color:var(--bd-soft);position:sticky;top:0;z-index:2;font-weight:600}
.bd-sort{background:none;border:0;color:inherit;font:inherit;font-weight:600;cursor:pointer;padding:0;min-height:0;white-space:nowrap;text-align:inherit}
.board .bd-tbl tbody tr{background:var(--bd-row)} .board .bd-tbl tbody tr:nth-child(even){background:var(--bd-even)} .board .bd-tbl tbody tr:hover>*{background:var(--bd-hover)}
.board .bd-tbl .linkbtn{color:var(--bd-link);font-weight:700;min-height:0}
@media (pointer:coarse){.board .bd-tbl .linkbtn{min-height:32px}}   /* v5.45: vùng chạm mã hàng trên điện thoại */
.kv>*{min-width:0;overflow-wrap:anywhere}   /* v5.45: tên khách dài liền không tràn ngang */
.board .bd-tbl td.num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} /* v5.281: tiêu đề cột giữ phông chữ thường (phông mono lỗi dấu tiếng Việt) */
.board .up{color:var(--bd-up)} .board .dn{color:var(--bd-dn)} .board .eq{color:var(--bd-eq)} .board .num.neg{color:#fff;background:var(--bd-negbg) !important}
.board .cl.up{color:var(--bd-up)} .board .cl.dn{color:var(--bd-dn)} .board .cl.eq{color:var(--bd-eq)}
.bd-empty{padding:var(--s5);color:var(--bd-soft);text-align:center}
@keyframes bd-fu{0%{background:var(--bd-flu)}100%{background:transparent}} @keyframes bd-fd{0%{background:var(--bd-fld)}100%{background:transparent}}
.board tr.flash-up>*{animation:bd-fu 1.4s ease-out} .board tr.flash-dn>*{animation:bd-fd 1.4s ease-out}
@media (prefers-reduced-motion:reduce){.board tr.flash-up>*,.board tr.flash-dn>*{animation:none}}
@media (max-width:720px){.bd-wrap{max-height:none}}
.board td.z{color:var(--bd-z) !important} .board .bd-tbl td.bd-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--bd-ink)}
@media (max-width:720px){.board .bd-tbl th,.board .bd-tbl td{padding:6px 8px}.board .bd-tbl td.bd-name{max-width:150px}}
@media (min-width:721px){.board .bd-tbl{font-size:.86rem}.board .bd-tbl th,.board .bd-tbl td{padding:6px 7px}.board .bd-tbl thead th{white-space:normal;line-height:1.35;vertical-align:bottom}}
@media (min-width:721px){.board .bd-tbl{font-size:.82rem}.board .bd-tbl th,.board .bd-tbl td{padding:6px 6px}.bd-sort{white-space:normal}}
.board .bd-d{display:block;font-size:.78em;font-weight:500;opacity:.9} .board tr.bd-sum th,.board tr.bd-sum td{background:var(--bd-head) !important;font-weight:700;border-top:2px solid var(--bd-line)}
/* Tồn kho tổng (kiểu v34): mỗi kho một nhóm cột */
.bd-opts{gap:var(--s4);margin-block:var(--s2)} .bd-opts label{gap:var(--s2);align-items:center}
.board .bd-sumtbl thead tr:nth-child(2) th{top:33px;z-index:2} .board .bd-sumtbl th.grp{text-align:center;color:var(--bd-eq);border-left:2px solid var(--bd-line)} .board .bd-sumtbl th.grp.tot{color:var(--bd-link)}
.board .bd-sumtbl .gs{border-left:2px solid var(--bd-line)} .board .bd-sumtbl td.tot b{color:var(--bd-link)} .board .bd-sumtbl td.tot.up b{color:var(--bd-up)} .board .bd-sumtbl td.tot.dn b{color:var(--bd-dn)}
.board .bd-sumtbl tbody th.code{position:sticky;left:0;z-index:1;background:var(--bd-bg);text-align:left;min-width:150px} .board .bd-sumtbl thead th:first-child{position:sticky;left:0;z-index:4}
.board .bd-sumtbl td.z b{color:var(--bd-z);font-weight:500} .board .bd-sumtbl td b{font-size:1.05em}
.board td.flash-up{animation:bd-fu 1.4s ease-out} .board td.flash-dn{animation:bd-fd 1.4s ease-out}
@media (max-width:720px){.board .bd-sumtbl tbody th.code{min-width:110px}}
.board .bd-sumtbl th{line-height:1.35}

/* Điện thoại: bảng không bị ép vừa khung (cột ngắn như ĐVT / Loại không còn rộng 200px, cột tên không bị bóp thành nhiều dòng); cuộn ngang trong khung bảng */
@media (max-width:719px){
  .tbl{width:max-content;min-width:100%}
  .tbl td,.tbl th{min-width:0}
  .tbl td:nth-child(3){min-width:0}
  .tbl td{max-width:240px}
  .tbl td.num,.tbl th.num{white-space:nowrap}
}
.tax-sel{width:44px;min-width:44px!important;text-align:center} .tax-sel input{width:20px;height:20px}

.btn.cmd-open.is-reject{background:var(--err-bg);border-color:var(--err);color:var(--ink)}
.tax-sub td{background:var(--bg-soft,transparent);padding-top:0}
.tax-inv{align-items:center;gap:8px}
.tax-inv .input{width:auto;min-width:150px;flex:1 1 150px;max-width:240px}
.tax-inv .err{flex-basis:100%}
@media (max-width:640px){.tax-inv .input{max-width:none;flex:1 1 100%}.tax-inv .btn{flex:1 1 100%}}
.tax-inv{position:sticky;left:0;box-sizing:border-box;width:min(100%,calc(100vw - 64px))}
/* bảng tồn kho kiểu bảng điện chứng khoán */
.stk-board{font-variant-numeric:tabular-nums;font-size:.92rem}
.stk-board thead th{background:#0f1b2d;color:#fff;position:sticky;top:0;z-index:1;white-space:nowrap}
.stk-board td,.stk-board th{padding:6px 10px}
.stk-board td.num{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}
.stk-board tbody tr:hover{background:var(--ok-bg,rgba(0,128,96,.08))}
.stk-board th[scope=row]{color:#b45309;font-weight:700;white-space:nowrap}
.stk-chg.up{color:#0a8f3c;font-weight:700}.stk-chg.dn{color:#d12b2b;font-weight:700}.stk-chg.eq{color:var(--muted,#888)}
.row>select.input.sel-auto{width:auto;flex:0 0 auto;min-width:170px}
@media (max-width:639px){.row>select.input.sel-auto{flex:1 1 100%}}

/* v5.50: cờ đỏ (mới) / xanh (đang xử lý) gắn trên dòng đơn, lệnh, vận đơn */
.rflags{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle}
.rflags .cnt{border-radius:999px;font-size:.7rem;font-weight:700;padding:0 6px;min-width:18px;line-height:18px;text-align:center;color:#fff;background:var(--err-solid)}
.rflags .cnt.xl{background:var(--accent)}

/* v5.53: sang chiết */
.sc-bar{display:inline-block;width:80px;height:8px;border-radius:4px;background:var(--line);overflow:hidden;vertical-align:middle}.sc-bar>span{display:block;height:100%;background:var(--accent)}
#sc-panel h3{margin:var(--s2) 0 0;font-size:1rem}

/* v5.55: chat nội bộ */
.chatbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--tap,44px);height:36px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.chatbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.chatbtn .cnt{position:absolute;top:-4px;right:-4px;border-radius:999px;font-size:.68rem;font-weight:700;padding:0 5px;min-width:18px;line-height:18px;text-align:center;color:#fff;background:var(--err)}
.chatbtn .cnt[hidden]{display:none}
.chat{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);height:calc(100dvh - var(--top-h,60px) - 130px);min-height:360px}
.chat-list,.chat-thread{display:flex;flex-direction:column;min-height:0;min-width:0;border:1px solid var(--line);border-radius:var(--r2,10px);background:var(--surface)}
.chat:not(.has-thread) .chat-thread{display:none}.chat.has-thread .chat-list{display:none}
@media (min-width:900px){.chat{grid-template-columns:320px minmax(0,1fr)}.chat:not(.has-thread) .chat-thread,.chat.has-thread .chat-list{display:flex}.chat-back{display:none!important}}
.chat-head,.chat-top{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);align-items:center;gap:var(--s2)}
.chat-ul{overflow-y:auto;flex:1;margin:0;padding:0}
.chat-item{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);text-decoration:none;color:inherit;min-height:56px}
.chat-item.on,.chat-item:hover{background:var(--bg-soft,rgba(0,0,0,.05))}
.chat-ava{flex:0 0 38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:700}.chat-ava.grp{border-radius:10px;background:#6b7a90}
.chat-mid{flex:1;min-width:0;display:flex;flex-direction:column}.chat-prev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.chat-msgs{flex:1;min-height:0;overflow-y:auto;padding:var(--s3);display:flex;flex-direction:column;gap:6px}
.chat-day{align-self:center;margin:6px 0}
.chat-b{max-width:min(82%,560px);align-self:flex-start;background:var(--bg-soft,#eef1f5);border-radius:14px;padding:6px 10px;overflow-wrap:anywhere}
.chat-b.mine{align-self:flex-end;background:var(--accent);color:#fff}.chat-b.mine a{color:#fff;text-decoration:underline}.chat-b.mine .muted{color:rgba(255,255,255,.8)}
.chat-by{font-weight:700;color:var(--accent)}.chat-tx{white-space:pre-wrap}
.chat-ft{display:flex;gap:8px;justify-content:flex-end;align-items:center}.chat-b.mine .linkbtn{color:#fff}
.chat-img{max-width:100%;max-height:260px;border-radius:8px;display:block;cursor:zoom-in;margin-top:4px}
.chat-big img{max-width:100%;max-height:70vh;display:block;margin:auto}
.chat-compose{padding:var(--s2);border-top:1px solid var(--line);align-items:flex-end;gap:var(--s2)}
.chat-ta{flex:1;min-width:0;resize:none;max-height:140px}
.chat-picked{padding:4px var(--s3)}
.chat-pick{max-height:50vh;overflow:auto}.chat-pickbtn{width:100%;justify-content:flex-start}
@media (max-width:899px){.chat{height:calc(100dvh - var(--top-h,60px) - 150px)}}

/* v5.55: bộ hiệu ứng chuyển động cho chat — chỉ chạy khi hệ thống không bật "giảm chuyển động" */
@media (prefers-reduced-motion:no-preference){
  @keyframes chat-in-l{from{opacity:0;transform:translate(-14px,10px) scale(.92)}to{opacity:1;transform:none}}
  @keyframes chat-in-r{from{opacity:0;transform:translate(14px,10px) scale(.92)}to{opacity:1;transform:none}}
  @keyframes chat-out{to{opacity:0;transform:scale(.85);max-height:0;padding-block:0;margin-block:-3px}}
  @keyframes chat-pend{0%,100%{opacity:1}50%{opacity:.62}}
  @keyframes chat-hot{0%{background:var(--ok-bg,rgba(0,128,96,.18))}100%{background:transparent}}
  @keyframes chat-ring{0%{transform:rotate(0)}15%{transform:rotate(-14deg)}30%{transform:rotate(12deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}100%{transform:rotate(0)}}
  @keyframes chat-bump{0%{transform:scale(.4)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
  @keyframes chat-slide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
  @keyframes chat-fade{from{opacity:0}to{opacity:1}}
  .chat-b{transform-origin:bottom left}.chat-b.mine{transform-origin:bottom right}
  .chat-b.pop{animation:chat-in-l .26s cubic-bezier(.2,.9,.3,1.2) both}.chat-b.mine.pop{animation-name:chat-in-r}
  .chat-b.out{animation:chat-out .24s ease-in forwards;overflow:hidden}
  .chat-b.pend{animation:chat-pend 1.1s ease-in-out infinite}
  .chat-item.hot{animation:chat-hot 1.6s ease-out}
  .chat-item .cnt.moi{animation:chat-bump .35s cubic-bezier(.2,.9,.3,1.4)}
  .chatbtn.ring svg{animation:chat-ring .7s ease-in-out;transform-origin:50% 10%}
  .chatbtn.ring .cnt{animation:chat-bump .4s cubic-bezier(.2,.9,.3,1.4)}
  .chat-day{animation:chat-fade .3s ease both}
  .chat-img{opacity:0;transition:opacity .3s ease,transform .2s ease}.chat-img.in{opacity:1}.chat-img:hover{transform:scale(1.02)}
  #chat-send{transition:transform .12s ease,filter .12s ease}#chat-send:active{transform:scale(.93)}#chat-send:not(:disabled):hover{filter:brightness(1.08)}
  .chat-item{transition:background .15s ease}
  @media (max-width:899px){.chat.has-thread .chat-thread{animation:chat-slide .22s ease-out}}
}
@media (prefers-reduced-motion:reduce){.chat-img{opacity:1}}
.chat{overflow-x:clip}.chat-msgs{overflow-x:hidden}   /* hiệu ứng trượt không làm tràn ngang */

/* v5.58: bộ emoji */
.chat-thread{position:relative}
.emoji-pop{position:absolute;left:var(--s2);right:var(--s2);bottom:68px;max-width:380px;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.18);overflow:hidden}
.emoji-pop[hidden]{display:none}
.emoji-tabs{display:flex;gap:2px;padding:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.emoji-tab{flex:0 0 auto;min-width:40px;height:38px;border:0;border-radius:8px;background:transparent;font-size:1.25rem;cursor:pointer}
.emoji-tab.on{background:var(--bg-soft,rgba(0,0,0,.08));box-shadow:inset 0 -2px 0 var(--accent)}
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:2px;padding:6px;max-height:210px;overflow-y:auto}
.emoji-btn{height:42px;border:0;border-radius:8px;background:transparent;font-size:1.5rem;line-height:1;cursor:pointer;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.emoji-btn:hover,.emoji-btn:focus-visible{background:var(--bg-soft,rgba(0,0,0,.08))}
.chat-b.emo{background:transparent!important;padding:2px 4px}.chat-b.emo .chat-tx{font-size:2.6rem;line-height:1.15}.chat-b.emo .chat-ft{color:var(--muted)}
.chat-b.emo.mine .muted,.chat-b.emo.mine .linkbtn{color:var(--muted)}
.chat-tx{font-family:inherit}
@media (prefers-reduced-motion:no-preference){@keyframes emoji-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}.emoji-pop:not([hidden]){animation:emoji-pop .16s ease-out}.emoji-btn:active{transform:scale(1.3);transition:transform .08s}}

/* v5.59: phản ứng emoji lên tin nhắn */
.chat-rx{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.chat-chip{display:inline-flex;align-items:center;gap:3px;min-height:26px;padding:0 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:.95rem;cursor:pointer;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.chat-chip.mine{border-color:var(--accent);background:var(--ok-bg,rgba(0,128,96,.12));font-weight:700}
.chat-chip-n{font:700 .75rem system-ui,sans-serif}
.chat-rxbtn{opacity:.35;transition:opacity .15s}.chat-b:hover .chat-rxbtn,.chat-rxbtn:focus-visible{opacity:1}
@media (pointer:coarse){.chat-rxbtn{opacity:.8}}
.chat-rxbar{display:flex;gap:2px;margin-top:6px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.15);width:max-content;max-width:100%}
.chat-rxpick{width:40px;height:40px;border:0;border-radius:50%;background:transparent;font-size:1.45rem;cursor:pointer;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.chat-rxpick:hover,.chat-rxpick:focus-visible{background:var(--bg-soft,rgba(0,0,0,.08))}
@media (prefers-reduced-motion:no-preference){
  @keyframes rx-bar{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes rx-chip{0%{transform:scale(.5)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
  .chat-rxbar{animation:rx-bar .16s ease-out}.chat-rxpick:hover{transform:scale(1.25);transition:transform .1s}
  .chat-chip.new{animation:rx-chip .28s cubic-bezier(.2,.9,.3,1.4)}
}
.chat-rxbar.still{animation:none}
@media (max-width:899px){.chat-compose{gap:4px}.chat-compose .btn{padding-inline:10px;min-width:40px}.chat-ta{min-width:0;flex:1 1 auto}.chat-ta::placeholder{font-size:.9rem}}
.chat-compose{flex-wrap:nowrap}@media (max-width:899px){.chat-compose{padding-right:70px}.chat-compose .btn{padding-inline:8px;min-width:38px}}

/* v5.62: bảng hàng hóa / đơn giá của lệnh (DXH…) */
#task-items tbody td{vertical-align:baseline}
#task-items th.ten{text-align:left;font-weight:600;min-width:9rem}
#task-items th.ten .muted{font-weight:400}
#task-items td.num,#task-items th.num{white-space:nowrap}
#task-items .num-in{width:7.5rem;max-width:100%;text-align:right}
#task-items .qty{display:inline-flex;align-items:center;gap:.4rem}
#task-items tfoot th,#task-items tfoot td{font-weight:700;border-top:2px solid var(--line)}

/* ===== v5.63: Đề nghị xuất hóa đơn (DXH) — bố cục theo hóa đơn GTGT ===== */
.dxh{display:flex;flex-direction:column;gap:var(--s4)}
.dxh h3{margin:0 0 var(--s3);font-size:var(--fs);font-weight:700}
.dxh .mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.dxh .warn-txt{color:var(--warn)}
.dxh-head{display:flex;flex-direction:column;gap:var(--s4)}
.dxh-head-top{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:flex-start;justify-content:space-between}
.dxh-title{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.dxh .eyebrow{font-size:var(--fs-sm);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.dxh-idrow{gap:var(--s3);align-items:center}
.dxh-idrow h2{margin:0;font-size:var(--fs-xl);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dxh-actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:flex-end}
/* các bước: chấm + đường nối, chữ dưới chấm */
.dxh-steps{list-style:none;margin:0;padding:var(--s4) 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:var(--s3)}
.dxh-steps .step{position:relative;display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.dxh-steps .step:not(:last-child)::after{content:'';position:absolute;top:13px;left:36px;right:calc(-1 * var(--s3) + 4px);height:2px;background:var(--line)}
.dxh-steps .step.done:not(:last-child)::after{background:var(--ok)}
.dxh-steps .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm);background:var(--surface);color:var(--faint);border:2px solid var(--line)}
.dxh-steps .step.done .dot{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.dxh-steps .step.cur .dot{background:var(--info-bg);color:var(--info);border-color:var(--info);box-shadow:0 0 0 4px var(--info-bg)}
.dxh-steps .step.err .dot{background:var(--err-bg);color:var(--err);border-color:var(--err);box-shadow:0 0 0 4px var(--err-bg)}
.dxh-steps .st-t{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.dxh-steps .step.todo strong{color:var(--faint);font-weight:600}
.dxh-steps .step.err strong{color:var(--err)}
.dxh-steps.off{opacity:.55}
.dxh-alert>div{display:flex;flex-direction:column;gap:2px}
/* hai cột: nội dung hóa đơn | tiến trình + trao đổi */
.dxh-cols{display:grid;gap:var(--s4)}
@media (min-width:1100px){ .dxh-cols{grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);align-items:start} }
.dxh-main,.dxh-side{min-width:0}
/* người mua | căn cứ */
.dxh-buyer{display:grid;gap:var(--s4)}
@media (min-width:720px){ .dxh-buyer{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} .dxh-buyer .dxh-col+.dxh-col{border-left:1px solid var(--line);padding-left:var(--s4)} }
.dxh-dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s2) var(--s4);margin:0}
.dxh-dl dt{color:var(--soft)} .dxh-dl dd{margin:0;overflow-wrap:anywhere}
/* hàng hóa + tiền */
.dxh-goods{display:flex;flex-direction:column;gap:var(--s3)}
.dxh-hint{margin:0}
.dxh-tbl #task-items td.num,.dxh-tbl #task-items th.num{font-variant-numeric:tabular-nums}
.dxh-tbl #task-items .stt{width:2.5rem;color:var(--soft);text-align:center}
.dxh-tbl #task-items th.ten{min-width:0;white-space:normal}
.dxh-tbl #task-items td,.dxh-tbl #task-items td:nth-child(3){min-width:0}
.dxh-tbl #task-items th,.dxh-tbl #task-items td{padding-inline:var(--s2)}
.dxh-tbl #task-items .num-in{width:7.5rem}
.dxh-tbl #task-items td.dvt{width:3.5rem}
.dxh-tbl #task-items td.num>.small{margin-top:2px}
.dxh-sum{align-self:flex-end;width:min(100%,400px);display:flex;flex-direction:column;gap:2px}
.dxh-sum .sum-row{display:flex;justify-content:space-between;gap:var(--s4);padding:3px 0}
.dxh-sum .sum-row .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.dxh-sum .sum-row.total{border-top:2px solid var(--ink);margin-top:var(--s1);padding-top:var(--s2);font-weight:700;font-size:var(--fs-lg)}
.dxh-sum .sum-words{font-style:italic;color:var(--soft);font-size:var(--fs-sm);text-align:right}
/* tiến trình theo thời gian */
.dxh-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dxh-tl .tl-i{position:relative;display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--s3);padding-bottom:var(--s3)}
.dxh-tl .tl-i:not(:last-child)::before{content:'';position:absolute;left:7px;top:18px;bottom:2px;width:2px;background:var(--line)}
.dxh-tl .tl-dot{width:12px;height:12px;border-radius:50%;margin:4px 2px;background:var(--faint)}
.dxh-tl .tl-i.ok .tl-dot{background:var(--ok)} .dxh-tl .tl-i.info .tl-dot{background:var(--info)} .dxh-tl .tl-i.err .tl-dot{background:var(--err)} .dxh-tl .tl-i.warn .tl-dot{background:var(--warn)}
.dxh-tl .tl-i.now .tl-dot{box-shadow:0 0 0 4px var(--accent-weak)}
.dxh-tl .tl-h{gap:var(--s2);align-items:baseline}
.dxh-tl .tl-n{margin-top:2px;overflow-wrap:anywhere}
.dxh-tl .tl-i.err .tl-n{color:var(--err)}
/* trao đổi */
.dxh-thread{list-style:none;margin:0 0 var(--s3);padding:0;display:flex;flex-direction:column;gap:var(--s2);max-height:340px;overflow:auto}
.dxh-thread li{background:var(--surface-2);border-radius:var(--r-sm);padding:var(--s2) var(--s3);max-width:92%;overflow-wrap:anywhere}
.dxh-thread li.me{align-self:flex-end;background:var(--accent-weak)}
.dxh-thread li.empty-li{background:none;padding:0}
.dxh-compose{gap:var(--s2)}
/* điện thoại: nút chính rộng, bước xếp dọc, bảng thành thẻ */
@media (max-width:639px){
  .dxh-actions{width:100%;justify-content:stretch} .dxh-actions .btn{flex:1 1 auto}
  .dxh-steps{grid-auto-flow:row;grid-template-columns:1fr;gap:0}
  .dxh-steps .step{flex-direction:row;align-items:flex-start;gap:var(--s3);padding-bottom:var(--s3)}
  .dxh-steps .dot{flex:0 0 28px}
  .dxh-steps .step:not(:last-child)::after{top:30px;left:13px;right:auto;bottom:0;width:2px;height:auto}
  .dxh-tbl{border:0;background:none;overflow:visible}
  .dxh-tbl #task-items{min-width:0;width:100%;display:block}
  .dxh-tbl #task-items thead{display:none}
  .dxh-tbl #task-items tbody{display:flex;flex-direction:column;gap:var(--s2)}
  .dxh-tbl #task-items tr{display:grid;grid-template-columns:1fr;gap:var(--s2);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
  .dxh-tbl #task-items th.ten{order:-1;padding:0;border:0;min-width:0}
  .dxh-tbl #task-items td{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s3);align-items:center;justify-items:end;text-align:right;padding:0;border:0;white-space:normal}
  .dxh-tbl #task-items td::before{content:attr(data-l);grid-row:1 / span 3;justify-self:start;align-self:start;color:var(--soft);font-size:var(--fs-sm);padding-top:4px}
  .dxh-tbl #task-items td.stt{display:none} .dxh-tbl #task-items td.dvt{width:auto}
  .dxh-tbl #task-items td.tt{font-weight:700}
  .dxh-tbl #task-items .num-in{width:9rem}
  .dxh-sum{width:100%}
}
/* v5.64: chọn người mua */
.buyer-pick{display:flex;gap:var(--s2);align-items:flex-start} .buyer-pick>.combo{flex:1 1 auto;min-width:0} .buyer-pick>.btn{flex:0 0 auto}
.dxh-colh{align-items:center;gap:var(--s2);margin-bottom:var(--s2)} .dxh-colh h3{margin:0}
.dxh-pick{display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s3);padding:var(--s3);border:1px dashed var(--accent);border-radius:var(--r-sm);background:var(--accent-weak)}
@media (max-width:639px){ .buyer-pick{flex-wrap:wrap} .buyer-pick>.btn{flex:1 1 100%} }

/* ===== màn lập đơn (od): [khách hàng | ngày tháng] → bảng hàng hóa → ghi chú/bằng chữ + tổng ===== */
.od{gap:var(--s3)} .od-top,.od-bot{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr)} .od-bot>.stack{min-width:0}
.od-card{padding:var(--s3) var(--s4);display:grid;gap:var(--s3);align-content:start;min-width:0} .od-card .field{margin:0}
.od-h{font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);margin:0}
.od-pgrid,.od-docgrid{display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} .od-pgrid>.od-w2{grid-column:1/-1} .od-pgrid>.od-s2{grid-column:span 2}
.od-docgrid>.docno{grid-column:1/-1;display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}
.od-off{display:none!important}
.od input[readonly]{background:var(--bg,#f6f7f9);color:var(--ink)}
.od-goods{padding:0;overflow:visible} .od-goods>.od-h{padding:var(--s3) var(--s4) 0}
.od-th{display:none}
.od-lines{display:block}
.oline{display:grid;gap:var(--s2) var(--s2);align-items:start;grid-template-columns:repeat(6,minmax(0,1fr)) 44px;grid-template-areas:"cd cd nm nm nm x" "sl sl dg dg ck ck" "dv av vt vt tt tt";padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
.oline{grid-template-areas:"cd cd nm nm nm nm x" "sl sl dg dg ck ck ck" "dv av vt vt tv tv tv" "tt tt tt tt tt tt tt"} .oline.noav{grid-template-areas:"cd cd nm nm nm nm x" "sl sl dg dg ck ck ck" "dv dv vt vt tv tv tv" "tt tt tt tt tt tt tt"}
.oline .field,.oline .o-sl,.oline .o-dg,.oline .o-ck{margin:0} .oline .o-no{display:none}
.oline .o-cd{grid-area:cd;min-width:0} .oline .o-nm{grid-area:nm;min-width:0} .oline .o-x{grid-area:x;align-self:end} .oline .o-sl{grid-area:sl} .oline .o-dg{grid-area:dg} .oline .o-ck{grid-area:ck} .oline .o-dv{grid-area:dv} .oline .o-av{grid-area:av} .oline .o-vt{grid-area:vt} .oline .o-tt{grid-area:tt} .oline .o-tv{grid-area:tv}
.oline .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .oline .num-in{text-align:right}
.od-ro{min-height:44px;display:flex;align-items:center;min-width:0;overflow-wrap:anywhere;line-height:1.3} .od-ro.num,.oline .o-tt>.num{justify-content:flex-end;font-variant-numeric:tabular-nums} .od-ro.low{color:var(--danger,#b42318);font-weight:700}
.oline .o-tv .lbl,.oline .o-vt .lbl,.oline .o-tt .lbl,.oline .o-av .lbl{text-align:right} .oline .o-tt>.num{min-height:44px;display:flex;align-items:center;font-weight:700} .oline .o-tv>.num{min-height:44px;display:flex;align-items:center;justify-content:flex-end;font-variant-numeric:tabular-nums}
.od-foot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;padding:var(--s3) var(--s4);border-top:1px solid var(--line)} .od-foot .hint{font-size:var(--fs-sm);color:var(--soft)}
.od-bot .sum{max-width:none;margin:0;display:block;padding:var(--s3) var(--s4)} .od-bot .sum .row{display:flex;flex-direction:row;align-items:baseline;padding:var(--s1) 0;min-width:0} .od-bot .sum .row .grow{flex:1;font-size:inherit;color:inherit}
.od-bot .sum .total{border-top:2px solid var(--ink);margin-top:var(--s2);padding-top:var(--s2);font-size:var(--fs-lg)}
.od-words{font-style:italic;color:var(--soft);font-size:var(--fs-sm)} .od-words:empty{display:none}
.od textarea.input{min-height:calc(var(--tap) * 1.6);resize:vertical}
@media (min-width:900px){ .od-top{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)} .od-bot{grid-template-columns:minmax(0,1fr) minmax(300px,380px);align-items:start} .od-pgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1100px){
  .od-th,.oline{grid-template-columns:34px 200px minmax(150px,1fr) 56px 104px 92px 116px 60px 56px 120px 104px 36px;grid-template-areas:"no cd nm dv av sl dg ck vt tt tv x";gap:0 var(--s2);align-items:center}
  .od-th.noav,.oline.noav{grid-template-columns:34px 200px minmax(150px,1fr) 56px 92px 116px 60px 56px 120px 104px 36px;grid-template-areas:"no cd nm dv sl dg ck vt tt tv x"}
  .od-th{display:grid;padding:var(--s2) var(--s4);background:var(--bg,#f6f7f9);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--soft)}
  .od-th>span{min-width:0} .od-th>span:nth-child(n+5){text-align:right} .od-th.noav>span:nth-child(n+5){text-align:right}
  .oline{padding:var(--s1) var(--s4)} .oline:first-child{border-top:0}
  .oline .field>.lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .oline .o-no{display:flex;grid-area:no;align-items:center;justify-content:center;color:var(--soft);font-size:var(--fs-sm)}
  .oline .o-x{align-self:center}
}

@media (min-width:900px){
  .oline .input,.oline .od-ro,.oline .o-tt>.num,.oline .o-tv>.num{min-height:36px;height:36px;border-radius:6px}
  .oline{padding-top:2px;padding-bottom:2px}
  .od-th>span:nth-child(n+5){padding-right:13px}
  .oline .od-ro.num,.oline .o-tt>.num,.oline .o-tv>.num{padding-right:13px;box-sizing:border-box}
}
.actbar{padding-left:var(--s3);padding-right:var(--s3)}
.od-right{min-width:0} .od-note .field>.lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .od-note textarea{min-height:96px;width:100%}

/* dòng số lượng: nhãn một dòng, nhãn + số cột số căn phải, số thẳng hàng với ô nhập */
.sline .field>.lbl,.mline .field>.lbl,.cline .field>.lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sline .s-rm .lbl,.sline .s-tn .lbl,.mline .m-rm .lbl,.cline .c-bk .lbl,.cline .c-ct .lbl,.cline .c-df .lbl{text-align:right}
.sline .s-sl .lbl,.mline .m-sl .lbl{text-align:right} .sline .num-in,.mline .num-in{text-align:right}
@media (min-width:720px){.sline{grid-template-columns:minmax(0,1fr) 100px 100px 140px}.sline.sin{grid-template-columns:minmax(0,1fr) 100px 140px}}

/* v5.128: nhóm nút theo mức độ — Hủy / Từ chối đẩy sát phải, nút khóa có biểu tượng khóa, lệnh chờ duyệt màu xanh dương */
#ord-cancel,#ship-cancel,#task-reject{margin-left:auto}
.btn.is-locked::before{content:"\1F512";font-size:.85em;margin-right:4px;opacity:.8}
/* v5.130: màu nút lệnh theo việc — xanh (màu cờ "cần làm") = việc của tôi; vàng = đang chờ bên khác; trắng = hoàn thành. Diễn giải nằm ở tooltip. */
.cmd-grp{display:contents}
.btn.cmd-open.is-open{background:var(--warn-bg);border-color:var(--warn);color:var(--ink)}
.btn.cmd-open.is-done{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn.is-todo,.btn.cmd-open.is-reject{background:var(--accent-weak);border-color:var(--accent);color:var(--accent)}
.btn.is-todo:hover,.btn.cmd-open.is-reject:hover{background:var(--accent-weak);filter:brightness(.97)}
.btn.is-locked::before{content:"\1F512";font-size:.85em;margin-right:4px;opacity:.8}

/* v5.131: bảng màu thống nhất toàn app — XANH (màu cờ cần làm) = việc của tôi; VÀNG = đang chờ bên khác; TRẮNG = hoàn thành; ĐỎ = lỗi / từ chối / hủy */
.tabs .btn.tab-lam{background:var(--accent-weak);border-color:var(--accent);color:var(--accent)}
.tabs .btn.tab-cho{background:var(--warn-bg);border-color:var(--warn);color:var(--ink)}
.tabs .btn.tab-xong,.tabs .btn.tab-all{background:var(--surface);border-color:var(--line);color:var(--ink)}
.tabs .btn.is-sel{font-weight:800;box-shadow:inset 0 -3px 0 currentColor}
/* v5.132: mẫu in theo TT 99/2025/TT-BTC (01-VT, 02-VT, 05-TT) và 03/XKNB */
.pdoc .pf-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:6px}
.pdoc .pf-mau{text-align:center;max-width:46%} .pdoc .pf-mau .small{font-size:.78em;font-style:italic}
.pdoc .pf-no,.pdoc .pf-date{text-align:center} .pdoc .pf-nc{text-align:right;font-size:.9em}
.pdoc .pf-line{margin:3px 0;overflow-wrap:anywhere} .pdoc .pf-dots{color:#555;letter-spacing:1px;overflow:hidden} .pdoc .pf-val{font-weight:600}
.pdoc .pf-tbl th{text-align:center;vertical-align:middle;font-size:.9em} .pdoc .pf-tbl .ctr{text-align:center} .pdoc .pf-tbl tbody td{height:24px} .pdoc .pf-letters th{font-weight:400}
.pdoc .pf-date{text-align:right;font-style:italic;margin-top:8px} .pdoc .pf-sign strong{display:block}
.pdoc .pf-date.c{text-align:center;margin-top:0;font-style:normal}
/* v5.133 sổ nhật ký phát sinh: A4 ngang, tiêu đề bảng lặp lại mỗi trang */
.pso-tbl{font-size:.82rem} .pso-tbl thead{display:table-header-group} .pso-tbl tr{page-break-inside:avoid} .pso-tbl td,.pso-tbl th{padding:3px 5px}
.pf-title{text-align:center;margin:10px 0 2px}
@page so{size:A4 landscape;margin:10mm}
@media print{.pso{page:so}}
/* v5.137 rà soát đa thiết bị: cảm ứng, Safari, bàn phím ảo, tai thỏ ngang */
html{color-scheme:light dark} :root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark}
body{min-height:100vh;min-height:100dvh} #app{min-height:100vh;min-height:100dvh}
.topbar{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.main{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.nav{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
a,button,.btn,.chip,[role=tab],select,summary,label.row,input[type=checkbox],input[type=radio]{touch-action:manipulation}
html{scroll-padding-block:96px}
@media (hover:none){
  .btn:hover{background:var(--surface)} .btn.primary:hover{background:var(--accent)} .btn.danger:hover{background:var(--surface)} .dialog .btn.danger:hover{background:var(--err-solid)}
  .input:hover:not([readonly]):not(:disabled){border-color:var(--line)}
}
@media (pointer:coarse){
  :root{--tap:48px}
  .btn:active{background:var(--surface-2);transform:scale(.97)} .btn.primary:active{background:var(--accent-hover)} .btn.danger:active{background:var(--err-bg)}
  .nav a:active{background:var(--accent-weak)} .tbl tbody tr:active>*{background:var(--accent-weak)}
  .chip,button.chip,.bd-chip,.pg-bar .btn,.combo-add,.lbar .btn,.tabs .btn,.chat-compose .btn{min-height:44px}
  .chat-chip{min-height:36px} .nav a{font-size:.8125rem} .small{font-size:.9rem}
}
@media (max-width:1023.98px){
  body:has(input:focus:not([type=checkbox]):not([type=radio]),textarea:focus,select:focus) .nav{display:none}
  body:has(input:focus:not([type=checkbox]):not([type=radio]),textarea:focus,select:focus) .actbar{bottom:0}
}
@media (orientation:landscape) and (max-height:500px){ .main{padding-top:var(--s2)} .nav a{min-height:48px;flex-direction:row;gap:var(--s2)} :root{--nav-h:48px} }

/* v5.145 — dòng hàng dạng thẻ (điện thoại / máy tính bảng < 1100px) */
.o-steps,.o-stp{display:none} .o-px,.o-wn,.oline .o-warn{display:none}
@media (max-width:1099px){
  .oline,.oline.noav{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"cd cd cd x" "nm nm nm nm" "sl sl sl sl" "dg dg ck ck" "wn wn wn wn" "dv vt tv tv" "tt tt tt tt";border:1px solid var(--line);border-radius:12px;margin:var(--s2) var(--s3);padding:var(--s3);background:var(--card,#fff)}
  .oline .o-nm{margin-top:calc(-1 * var(--s1))} .oline .o-nm .lbl{display:none} .oline .o-nm .od-ro{min-height:0;color:var(--soft);font-size:var(--fs-sm)}
  .oline .o-x{justify-self:end;min-width:44px;min-height:44px} .oline .o-av{display:none}
  .oline .o-sl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);align-items:end} .o-steps{display:flex;gap:var(--s1)} .o-stp{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;font-size:1.25rem;font-weight:700}
  .oline .o-sl .input,.oline .o-dg .input{min-height:48px;font-size:1.0625rem}
  .oline .input,.oline .combo{width:100%;box-sizing:border-box} .oline .o-sl>.field,.oline .o-dg>.field,.oline .o-ck>.field{min-width:0;width:100%} .oline .o-cd,.oline .o-cd .combo{min-width:0}
  .o-wn{display:block;grid-area:wn;font-size:var(--fs-sm);color:var(--soft)} .o-wn:empty{display:none} .o-wn.low{color:var(--danger,#b42318);font-weight:700}
  .o-wn.low .od-ro-av::before{content:'⚠ '}
  .o-px{display:block;margin-top:var(--s1)} .o-px:empty{display:none} .o-pxb{border:0;background:none;padding:var(--s1) 0;min-height:32px;color:var(--link,#0a58ca);font-size:var(--fs-sm);text-align:left;text-decoration:underline}
  .o-px .o-warn{display:block;font-size:var(--fs-sm);color:var(--soft)} .o-px .o-warn.low{color:var(--danger,#b42318);font-weight:700}
  .oline .o-tt>.num{justify-content:flex-start;font-size:1.0625rem} .oline .o-tt .lbl,.oline .o-tv .lbl,.oline .o-vt .lbl{text-align:left}
  .oline .o-tt{border-top:1px dashed var(--line);padding-top:var(--s2)} .oline .o-tv>.num{justify-content:flex-start}
  .od-foot{position:static} .od-foot .btn{min-height:48px;flex:1 1 auto} .od-foot .hint{flex:1 1 100%}
}
@media (pointer:coarse) and (max-width:699px){ .od-multi{display:none} }
.input.is-warn{border-color:var(--danger,#b42318)}
@media (min-width:1100px){ .o-wn{display:none} .oline .o-px{display:none} }

/* v5.146 — tem QR theo mã hàng (in A4) */
.tem-sel{width:auto;min-width:150px} .tem-sheet{display:grid;grid-template-columns:repeat(var(--tc,3),minmax(0,1fr));background:#fff;color:#000;max-width:210mm;margin:var(--s3) auto 0}
.tem{display:flex;align-items:center;gap:3mm;padding:2.5mm;border:1px dashed #b8bec6;min-height:calc(var(--qs,24mm) + 8mm);break-inside:avoid}
.tem-qr{flex:0 0 var(--qs,24mm)} .tem-qr svg{width:var(--qs,24mm);height:var(--qs,24mm);display:block} .tem-t{min-width:0;font-size:9pt;line-height:1.25;overflow-wrap:anywhere} .tem-t strong{font-size:10.5pt}
@media print{ .tem-sheet{margin:0;max-width:none} .tem{border-color:#ccc} }
.tem-sel{flex:0 0 auto !important} .tem-ck{display:inline-flex;align-items:center;gap:6px;min-height:44px} .tem-ck input{width:20px;height:20px}
/* v5.155 danh sách đơn: không tràn ngang, ô dài tối đa 2 dòng */
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;white-space:normal}
.ord-table .tbl td.c-cus{max-width:260px;overflow:visible}
.ord-table .tbl td.it-name{min-width:150px;max-width:300px;white-space:normal;overflow:visible;text-overflow:clip}
.ord-table .badge{white-space:normal;max-width:220px;text-align:left}
.tbl.hp3 .c-p3,.tbl.hp2 .c-p3,.tbl.hp2 .c-p2,.tbl.hp1 .c-p3,.tbl.hp1 .c-p2,.tbl.hp1 .c-p1{display:none}
/* v5.156 bảng dùng chung: ô chữ dài tối đa 2 dòng, cột đầu dính khi cuộn ngang */
.tbl td .cf-t{max-width:320px;min-width:120px}
.tbl-wrap .tbl tr>:first-child{position:sticky;left:0;z-index:1}
.tbl-wrap .tbl tbody tr>:first-child{background:var(--surface)}
.tbl-wrap .tbl thead tr>:first-child{z-index:3}
.tbl tbody tr:hover>:first-child{background:var(--accent-weak)}
/* v5.157 form lập đơn (PC): cột hàng hóa co giãn theo bề rộng khung; thiếu chỗ thì ẩn Tiền thuế rồi Thuế % (xem trong tổng thuế); tổng thanh toán luôn hiện ở thanh lưu */
.od-goods{container:odg / inline-size}
@media (min-width:1100px){
  .od-th,.oline{grid-template-columns:34px minmax(190px,1.2fr) minmax(130px,2fr) 52px 100px 84px minmax(90px,1fr) 52px 74px minmax(100px,1.1fr) minmax(90px,1fr) 36px}
  .od-th.noav,.oline.noav{grid-template-columns:34px minmax(190px,1.2fr) minmax(130px,2fr) 52px 84px minmax(90px,1fr) 52px 74px minmax(100px,1.1fr) minmax(90px,1fr) 36px}
}
@media (min-width:1100px){
@container odg (max-width:1130px){
  .od-th,.oline{grid-template-columns:34px minmax(170px,1.1fr) minmax(130px,2fr) 52px 100px 84px minmax(90px,1fr) 52px 74px minmax(100px,1.1fr) 36px;grid-template-areas:"no cd nm dv av sl dg ck vt tt x"}
  .od-th.noav,.oline.noav{grid-template-columns:34px minmax(170px,1.1fr) minmax(130px,2fr) 52px 84px minmax(90px,1fr) 52px 74px minmax(100px,1.1fr) 36px;grid-template-areas:"no cd nm dv sl dg ck vt tt x"}
  .oline .o-tv,.od-th .th-tv{display:none}
}
@container odg (max-width:1010px){
  .od-th,.oline{grid-template-columns:34px minmax(170px,1.1fr) minmax(130px,2fr) 52px 100px 84px minmax(90px,1fr) 52px minmax(100px,1.1fr) 36px;grid-template-areas:"no cd nm dv av sl dg ck tt x"}
  .od-th.noav,.oline.noav{grid-template-columns:34px minmax(170px,1.1fr) minmax(130px,2fr) 52px 84px minmax(90px,1fr) 52px minmax(100px,1.1fr) 36px;grid-template-areas:"no cd nm dv sl dg ck tt x"}
  .oline .o-vt,.od-th .th-vt{display:none}
}
}
/* v5.158 nút Cột (chọn cột hiển thị) cho bảng trên PC */
.col-off{display:none !important}
.tbl-tools{display:flex;justify-content:flex-end;position:relative;margin-bottom:var(--s1)}
.col-btn{min-height:30px}
.col-pop{position:absolute;right:0;top:100%;z-index:60;min-width:220px;max-height:60vh;overflow:auto;background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--r-sm,8px);box-shadow:0 8px 24px rgba(0,0,0,.18);padding:var(--s2);display:flex;flex-direction:column;gap:var(--s1)}
.col-pop[hidden]{display:none}
.col-it{display:flex;align-items:center;gap:var(--s2);min-height:32px;cursor:pointer;white-space:nowrap}
@media (max-width:1099px){.tbl-tools{display:none}}
/* v5.159 PC ≥1440px: danh sách + chi tiết cạnh nhau (Đơn bán/mua, Điều vận, Việc) */
.split{display:grid;grid-template-columns:minmax(380px,32%) minmax(0,1fr);gap:var(--s4);align-items:start}
.split-list{position:sticky;top:calc(var(--top-h,57px) + var(--s3));max-height:calc(100dvh - var(--top-h,57px) - var(--s5));overflow:auto;overscroll-behavior:contain;padding-right:2px}
.split-list .ord-cards{display:block !important} .split-list .ord-table,.split-list .pg-bar,.split-list .tbl-tools{display:none !important}
.split-list .is-open>.ord-link,.split-list li.is-open,.split-list tr.is-open>*{background:var(--accent-weak)}
.split-list li.is-open{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm,8px)}
.split-detail{min-width:0}
.split-detail{container:spd / inline-size}
@container spd (max-width:1100px){


}
/* v5.160 phím tắt */
.nav-help{margin-top:0 !important}
.kbd{display:inline-block;min-width:2.2em;padding:2px 8px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--surface-2);font:600 .85em/1.4 ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.tbl td .cf-t{min-width:150px}

/* v5.161 màn Lệnh: không ngắt mã chứng từ, tên khách tối đa 2 dòng, trạng thái ngắn, tự ẩn cột phụ, nhóm hàng chip, chú giải */
.tbl td.chain a,.tbl td.chain strong{white-space:nowrap;display:inline}
.tbl td.chain{min-width:0}
#task-table td:nth-child(3){min-width:0}
#task-table td.party{min-width:150px;max-width:260px}
#task-table td.sender{min-width:120px}
#task-table th.num{text-align:right}
.st-cell{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0} .st-cell .badge{max-width:100%}
.tbl-wrap .tbl tbody tr.cmd-row>td{background:var(--surface-2,#f7f8fa);border-top:0;padding-left:var(--s5,28px)}
.tbl tr.cmd-row .rel-l{margin-right:var(--s2);white-space:nowrap}
.tbl tbody tr:has(+.cmd-row)>*{border-bottom-color:transparent}
.tbl-wrap .tbl tbody tr.cmd-row:hover>*{background:var(--surface-2,#f7f8fa)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center}
.legend .lg::before{content:"";display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px;border:1px solid var(--line)}
.legend .lg-todo::before{background:var(--accent-weak);border-color:var(--accent)} .legend .lg-open::before{background:var(--warn-bg);border-color:var(--warn)} .legend .lg-done::before{background:var(--surface)}
.legend .lg-r::before{background:var(--err-solid);border-radius:999px;border-color:transparent} .legend .lg-b::before{background:var(--accent);border-radius:999px;border-color:transparent}
.tbl-tools.in-bar{margin:0;flex:none}
@media (min-width:1100px){ .task-wrap .tbl td,.ord-table .tbl td{padding-block:6px} .task-wrap .tbl td.cmd-row,.tbl tr.cmd-row>td{padding-block:5px} }
/* v5.164 hàng tab dài gom "Khác ▾"; bảng bảng điện tử: số 0 thành "–", cột dính có bóng, hàng đều nhau; ô tích dễ bấm; bảng hàng của đơn không tràn */
.tab-more{flex:none;position:relative}
.tab-pop{position:fixed;min-width:200px;max-height:70vh;overflow:auto;gap:4px;padding:var(--s2)}
.tab-pop:not([hidden]){display:flex;flex-direction:column}
.tab-pop .btn{justify-content:flex-start;width:100%;white-space:nowrap}
.board .bd-sumtbl td.z b{font-size:0}
.board .bd-sumtbl td.z b::before{content:"–";font-size:1rem;font-weight:500}
.board .bd-tbl td.z:not(:has(*)){font-size:0}
.board .bd-tbl td.z:not(:has(*))::before{content:"–";font-size:.82rem}
.board .bd-sumtbl tbody th.code{box-shadow:2px 0 0 var(--bd-line),6px 0 8px -4px rgba(0,0,0,.6)}
.board .bd-sumtbl tbody td{height:46px}
.main label:has(>input[type=checkbox]){display:inline-flex;align-items:center;gap:var(--s2);min-height:32px;cursor:pointer}
.main input[type=checkbox]{width:18px;height:18px}
.det-items td:nth-child(2){min-width:150px;white-space:normal}

/* v5.165 GD CHI TIET 2: ô chọn đơn thay cột danh sách; chi tiết rộng toàn bộ; mặt hàng dạng thẻ trên điện thoại */
.split{display:block}
.split-bar{position:relative;display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.split-pick{min-height:36px;font-weight:600} .split-n{font-variant-numeric:tabular-nums}
.split-list[hidden]{display:none}
.split-list{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:min(440px,92vw);max-height:min(70vh,720px);padding:var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.ord-tong{font-size:1.35rem;color:var(--accent)} .ord-sub{font-size:var(--fs-md,1rem)}
@media (max-width:859.98px){
  .det-items .tbl-wrap,.det-items{overflow:visible}
}
/* v5.168 dòng phụ của bảng Công việc: "Lệnh - Tham chiếu" (xám, chỉ số chứng từ) khác "Thao tác" (xanh nhạt, nút làm việc) khác ô số hóa đơn */
.tbl-wrap .tbl tbody tr.ref-row>td{background:var(--surface-2,#f7f8fa)}
.tbl-wrap .tbl tbody tr.act-row>td,.tbl-wrap .tbl tbody tr.act-row:hover>*{background:var(--accent-weak)}
.tbl tr.act-row .rel-l{color:var(--accent);font-weight:600} .tbl tr.ref-row .rel-l{color:var(--soft)}
/* STT dòng (5.174): cột số thứ tự bằng CSS counter — không thêm ô DOM nên không lệch nth-child, cột chọn, sắp xếp; dòng phụ (colspan) không đánh số; pager.js đặt --stt0 để nối số qua trang */
.tbl-wrap:not(.det-items):not(.dxh-tbl):not(.no-stt):not(.dialog *):not(.pdoc *) .tbl:not(.dxh-form-tbl):not(.bd-tbl):not(.stk-board) tbody{counter-reset:stt var(--stt0,0)}
.tbl-wrap:not(.det-items):not(.dxh-tbl):not(.no-stt):not(.dialog *):not(.pdoc *) .tbl:not(.dxh-form-tbl):not(.bd-tbl):not(.stk-board) tbody tr:not(:has(>[colspan])){counter-increment:stt}
.tbl-wrap:not(.det-items):not(.dxh-tbl):not(.no-stt):not(.dialog *):not(.pdoc *) .tbl:not(.dxh-form-tbl):not(.bd-tbl):not(.stk-board) tbody tr:not(:has(>[colspan]))>:first-child::before,
.tbl-wrap:not(.det-items):not(.dxh-tbl):not(.no-stt):not(.dialog *):not(.pdoc *) .tbl:not(.dxh-form-tbl):not(.bd-tbl):not(.stk-board) thead tr:first-child>:first-child::before{position:absolute;left:var(--s3);top:50%;transform:translateY(-50%);min-width:1.8em;text-align:right;color:var(--soft);font-size:.85em;font-weight:500;font-variant-numeric:tabular-nums;line-height:1}
.tbl-wrap:not(.det-items):not(.dxh-tbl):not(.no-stt):not(.dialog *):not(.pdoc *) .tbl:not(.dxh-form-tbl):not(.bd-tbl):not(.stk-board) tbody tr:not(:has(>[colspan]))>:first-child::before{content:counter(stt)}
.tbl-wrap:not(.det-items):not(.dxh-tbl):not(.no-stt):not(.dialog *):not(.pdoc *) .tbl:not(.dxh-form-tbl):not(.bd-tbl):not(.stk-board) thead tr:first-child>:first-child::before{content:"STT"}
.tbl-wrap:not(.det-items):not(.dxh-tbl):not(.no-stt):not(.dialog *):not(.pdoc *) .tbl:not(.dxh-form-tbl):not(.bd-tbl):not(.stk-board) tbody tr:not(:has(>[colspan]))>:first-child,.tbl-wrap:not(.det-items):not(.dxh-tbl):not(.no-stt):not(.dialog *):not(.pdoc *) .tbl:not(.dxh-form-tbl):not(.bd-tbl):not(.stk-board) thead tr:first-child>:first-child{padding-left:calc(var(--s3) + 2.5em)}

/* ===== 5.176 chuẩn hóa giao diện (design system dùng chung) ===== */
/* 1) Ô tích: bản cũ ép 18px nhưng ::before lùi 11px nên hộp xẹp thành chấm nhỏ — ô tích gần như vô hình ở mọi màn trong .main. Dựng lại: hộp 20px, vùng bấm do nhãn bao (≥44px khi cảm ứng). */
.main input[type=checkbox],.main input[type=radio]{width:22px;height:22px;flex:none}
.main input[type=checkbox]::before{inset:2px;border-width:2px;border-radius:5px}
.main input[type=checkbox]:checked::after{left:8px;top:4px;width:6px;height:11px}
.main input[type=checkbox]:hover::before{border-color:var(--accent)}
.main label:has(>input[type=checkbox]),.main label.row:has(input[type=checkbox]){min-height:36px;gap:var(--s2)}
@media (pointer:coarse){.main label:has(>input[type=checkbox]),.main label.row:has(input[type=checkbox]){min-height:var(--tap)}}
/* 2) Thanh lọc danh sách (đơn bán / mua): ô "Khác…" không chiếm cả dòng; chip một hàng, điện thoại cuộn ngang thay vì xuống 3 hàng */
select.input.more-sel{width:auto;min-width:150px;flex:none}
.lbar>[role=group]{gap:var(--s2);align-items:center}
@media (max-width:719px){
  .lbar>[role=group]{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .lbar>[role=group]::-webkit-scrollbar{display:none}
  .lbar>[role=group]>*{flex:none}
}
/* 3) Dải tổng hợp công nợ: các số tách nhau rõ, tự xuống dòng */
#debt-sum{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);justify-content:flex-end;padding:var(--s2) var(--s1)}
@media (max-width:719px){#debt-sum{justify-content:flex-start}}

@media (min-width:1100px){.lbar>.grow{flex:1 1 140px;min-width:140px}}

/* 5.177: chi tiết lệnh — dải Yêu cầu / Đã lập phiếu / Còn lại; chứng từ liên quan */
.sum-strip{display:flex;flex-wrap:wrap;gap:var(--s3)}
.sum-c{flex:1 1 120px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2) var(--s3);display:flex;flex-direction:column}
.sum-c b{font-size:var(--fs-lg,1.25rem)}
.sum-c.ok b{color:var(--ok)} .sum-c.warn b{color:var(--warn)}
#task-shipped .chip,.ds-card a.chip{text-decoration:none;min-height:36px}

/* 5.178: khung chung màn chi tiết chứng từ (public/js/docshell.js) */
.ds-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.ds-main,.ds-side{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
@media (min-width:1100px){.ds-shell{grid-template-columns:minmax(0,1fr) 340px;align-items:start}.ds-shell>.ds-back,.ds-shell>.ds-head{grid-column:1/-1}}
.ds-head{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3) var(--s4)}
.ds-top{display:flex;gap:var(--s3) var(--s4);align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.ds-id{min-width:0;flex:1 1 320px}
.ds-line{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.ds-code{margin:0;font-size:var(--fs-xl);line-height:1.2;overflow-wrap:anywhere}
.ds-sub{color:var(--soft);margin-top:var(--s1)}
.ds-act{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end;align-items:center}
@media (max-width:719px){.ds-act{width:100%;justify-content:stretch}.ds-act>*{flex:1 1 auto;text-align:center}}
.ds-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s2) var(--s4)}
.ds-fact small,.ds-sc small{display:block;color:var(--faint)} .ds-fact b{font-weight:600;overflow-wrap:anywhere}
.ds-sum{display:flex;flex-wrap:wrap;gap:var(--s3)}
.ds-sc{flex:1 1 140px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2) var(--s3)}
.ds-sc b{font-size:var(--fs-lg)} .ds-sc.ok b{color:var(--ok)} .ds-sc.warn b{color:var(--warn)}
.ds-card{padding:0;gap:0;overflow:hidden}
.ds-ch{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);background:var(--surface-2);min-height:40px}
.ds-t{margin:0;font-size:var(--fs);flex:1;min-width:0}
.ds-tools{display:flex;gap:var(--s2);align-items:center;color:var(--faint);font-size:var(--fs-sm)}
.ds-cb{padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.ds-cb.flush{padding:0;gap:0} .ds-cb.flush .tbl-wrap{border:0;border-radius:0}
.ds-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s1) var(--s4);margin:0}
.ds-kv dt{color:var(--faint)} .ds-kv dd{margin:0;overflow-wrap:anywhere}
.ds-side .list{margin:0}

/* 5.181: khối thanh toán trong khung chung */
.ds-pay .row{justify-content:space-between;align-items:baseline}
.ds-pay .row.total{border-top:1px solid var(--line);padding-top:var(--s2);font-size:var(--fs-lg)}

/* 5.182: hộp chọn chứng từ gọn — số chứng từ · khách hàng · mã hàng + số lượng */
.pick-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s1)}
.pick-it{display:grid;gap:2px;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-sm,8px);background:var(--surface);color:inherit;text-decoration:none}
.pick-it:hover{background:var(--surface-2)}
.split-list li.is-open .pick-it{background:var(--accent-weak);border-color:var(--accent)}
.pk-party{color:var(--soft);overflow-wrap:anywhere}
.pk-items{display:flex;flex-wrap:wrap;gap:2px var(--s3);font-size:var(--fs-sm);color:var(--soft)}
.pk-i b{font-weight:600;color:var(--ink)}
.split-list .pick-list li.is-open{outline:0;background:none}
.pick-it:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pick-list li{border:0;padding:0;background:none;box-shadow:none}

/* 5.184: lưới/hàng bên trong .stack không được thừa margin-top của .stack>*+* (cột sau bị lệch xuống so với cột đầu) */
@media (min-width:1100px){.acct>*,.debt-card>*,.cnt-xn>*,.co-form>*{margin-top:0}}

/* B112: dòng tiêu đề cột có màu nền riêng (bảng .tbl, lưới dòng hàng .od-th); bảng bảng điện tử tối (.bd-tbl, .stk-board) giữ màu riêng */
:root{--th-bg:color-mix(in srgb,var(--accent) 13%,var(--surface));--th-ink:var(--ink)}
.tbl thead th,.od-th{background:var(--th-bg);color:var(--th-ink);border-bottom:1px solid color-mix(in srgb,var(--accent) 28%,var(--line))}
.od-th{border-top:1px solid color-mix(in srgb,var(--accent) 28%,var(--line))}

/* B113: chia cột theo nội dung (tblfit.js sizeCols) — thay quy tắc cũ "cột 3 rộng 200px / mọi ô tối thiểu 80px" */
.tbl td.c-nw{white-space:nowrap} .tbl td.c-tx{min-width:14em}
.tbl th.c-hw{white-space:normal;min-width:7em;line-height:1.25;vertical-align:middle}
.tbl tbody tr.strong{counter-increment:none!important} .tbl tbody tr.strong>:first-child::before{content:none!important} .tbl tbody tr.strong>:first-child{padding-left:var(--s3)!important}
.tbl.t-dense th,.tbl.t-dense td{padding-inline:var(--s2)}
.tbl td.c-nw .clamp2{white-space:nowrap}
.tbl.t-tight{font-size:.9em} .tbl.t-tight th,.tbl.t-tight td{padding-inline:6px}
.tbl td.c-nw *{white-space:nowrap}
.tbl.tw td.c-nw:not(.it-code):not(.num){white-space:normal} .tbl.tw td.c-nw:not(.it-code):not(.num) *{white-space:normal} .tbl.tw td.c-nw .badge,.tbl.tw td.c-nw .chip{white-space:nowrap!important}
/* v5.193 PC ≥1100px: gọn chiều dọc — ô lọc/nhãn cùng hàng, hàng bảng thấp, nút Cột chung hàng với dòng đếm */
@media (min-width:1100px){
  :root{--tap:32px}
  .main{padding-top:var(--s2)} .main .stack{gap:6px} .main h1{margin-bottom:2px}
  .drange-f,.stk-filters>.drange-f{display:flex;flex-direction:row;align-items:center;gap:6px;margin:0} .drange-f>.lbl{margin:0;white-space:nowrap;font-size:var(--fs-sm)} .drange-f>.input,.drange-f>.combo{flex:1 1 auto;min-width:0}
  .stk-filters,.grid3.stk-filters,.rp-ctl,.filt-row{display:flex;flex-wrap:wrap;gap:6px var(--s3);align-items:center} .stk-filters>.drange-f{flex:1 1 200px}
  .drange{gap:6px var(--s3)} .drange .input,.lbar .input,.stk-filters .input,.rp-ctl .input,.filt-row .input{min-height:32px;padding-block:3px}
  .tabs .btn,.lbar .btn,.chip,button.chip{min-height:30px} .tabs{padding-bottom:0;gap:6px}
  .tbl th,.tbl td{padding:3px var(--s3);line-height:1.3} .task-wrap .tbl td,.ord-table .tbl td{padding-block:3px}
  .tbl .btn,.tbl td[colspan] .btn{min-height:24px} .tbl td .badge,.tbl td .chip{padding-block:1px}
  .tbl-tools{margin:0} .col-btn{min-height:26px;padding:0 var(--s3)}
  .tbl-tools.in-line{height:0;position:relative;z-index:3} .tbl-tools.in-line>.col-btn{position:absolute;right:0;top:-2px}
  .tbl-tools.in-line+.muted.small{min-height:26px;display:flex;align-items:center;margin:0}
  .pg-bar{margin-top:2px}
}
@media (min-width:1100px){
  .main .stack:not(.card)>*+*{margin-top:6px} .main .stack:not(.card) .empty{padding-block:var(--s4)}
  select.input{padding-block:0} .drange-f>input[type=date]{min-width:136px;flex:none} .filt-row>.drange{grid-template-columns:auto auto}
  .tbl-tools.in-line+.muted.small,.tbl-tools.in-line+.small{min-height:26px}
}
@media (min-width:1100px){
  .filt-row>.grid2{flex:1 1 340px;display:flex;gap:var(--s3)} .filt-row>.grid2>.drange-f{flex:1 1 0} .filt-row>.bd-opts,.bd-opts{margin:0;gap:4px var(--s3)} .filt-row{margin:0}
  .lbar{gap:6px var(--s3)}
}
@media (min-width:1100px){
  .filt-row>.drange{grid-template-columns:repeat(2,minmax(0,1fr));flex:1 1 320px;max-width:none} .drange-f>input[type=date]{min-width:0;flex:1 1 auto}
  .lbar>select.input{min-width:120px;max-width:150px} .lbar>.row.wrap{flex-wrap:nowrap}

}
/* v5.194 bảng hàng của đơn: chữ nhỏ hơn, tiêu đề không xuống dòng, cột mã đủ rộng */
@media (min-width:1100px){
  .od-th{font-size:.7rem;letter-spacing:.01em} .od-th>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .oline .input,.oline .od-ro,.oline .o-tt>.num,.oline .o-tv>.num{font-size:.9rem} .oline .od-ro.o-nm,.oline .o-nm .od-ro{line-height:1.25}
  .oline .combo>input.input[role=combobox]{padding-left:8px;padding-right:28px;text-overflow:ellipsis}
}
/* v5.197 màn chi tiết chứng từ (PC ≥1100px): khung đầu gọn — mã + loại cùng dòng, dữ kiện và dải số cùng hàng, tiến trình / khối nhỏ lại */
@media (min-width:1100px){
  .ds-shell{gap:var(--s2)} .ds-main,.ds-side{gap:var(--s2)}
  .ds-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--s4);align-items:center;padding:8px var(--s4)}
  .ds-head>*{grid-column:1/-1} .ds-head>.ds-facts{grid-column:1} .ds-head>.ds-sum{grid-column:2;justify-self:end}
  .ds-top{align-items:center} .ds-id{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap} .ds-sub{margin:0}
  .ds-code{font-size:1.2rem} .ds-facts{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2px var(--s4);font-size:.92rem} .ds-fact small,.ds-sc small{font-size:.75rem;line-height:1.2}
  .ds-sum{gap:var(--s2);flex-wrap:nowrap} .ds-sc{flex:0 0 auto;min-width:130px;padding:3px 12px;border-radius:8px} .ds-sc b{font-size:1rem}
  .steps{padding:4px 10px;gap:4px 10px;font-size:.9rem} .steps .st-dot{width:18px;height:18px;font-size:11px}
  .ds-head .banner{padding:6px 12px} .ds-head .muted.small{line-height:1.3}
  .ds-ch{min-height:32px;padding:4px var(--s3)} .ds-t{font-size:.95rem} .ds-cb{padding:var(--s2) var(--s3);gap:6px}
  .ds-ch .tbl-tools.in-bar{margin:0;margin-left:auto} .ds-ch .col-btn{min-height:24px}
}
@media (min-width:1100px){
  .ds-id{flex:1 1 auto} .ds-line{flex-wrap:nowrap;gap:var(--s2)} .ds-facts{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}
/* v5.198 phone: không rớt/mất chữ */
@media (max-width:719.98px){
  .tabs{flex-wrap:wrap;overflow:visible} .tabs .btn{flex:0 1 auto;max-width:100%;white-space:normal;text-align:center;line-height:1.2;padding-block:4px}
  .nav a .cnt,.nav a .cnt.xl{top:3px;left:calc(50% + 6px);font-size:.65rem;padding:0 5px;min-width:16px}
  .nav a .cnt.moi+.cnt.xl{left:calc(50% + 24px);margin-left:0}
  .tbl td:not(.num):not(.it-code):not(:last-child),.tbl th{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
  .tbl td.num,.tbl td:last-child,.ds-sc b,.ds-fact b.num{white-space:nowrap}
  .ds-sum{flex-wrap:wrap} .ds-sc{min-width:0;flex:1 1 130px} .ds-sc b{white-space:nowrap;font-size:.98rem}
  .combo input::placeholder,.combo .input::placeholder{font-size:.8rem;text-overflow:ellipsis}
  .badge,.chip{max-width:100%;overflow-wrap:anywhere}
}
@media (max-width:719.98px){
  .lbar>[role=group]{flex-wrap:wrap;overflow:visible} .lbar>[role=group]>*{flex:0 1 auto;max-width:100%;white-space:normal;line-height:1.2}
}
@media (max-width:719.98px){
  .tbl-wrap .tbl{width:max-content;min-width:100%}
  .tbl th{white-space:nowrap;overflow-wrap:normal;word-break:normal}
  .tbl td:not(.num):not(.it-code):not(:last-child){overflow-wrap:normal;word-break:normal}
  .tbl td .clamp2{-webkit-line-clamp:unset;display:block;overflow:visible}
  .tbl-wrap{background:linear-gradient(to right,var(--surface),var(--surface)) local,linear-gradient(to left,rgba(0,0,0,.12),transparent 14px) scroll 100% 0/14px 100% no-repeat}
  .field>.lbl{white-space:normal;overflow:visible}
}
@media (max-width:719.98px){
  .dxh-buyer{grid-template-columns:minmax(0,1fr)} .dxh-buyer .dxh-col+.dxh-col{border-top:1px solid var(--line);padding-top:var(--s3)}
  .kv{grid-template-columns:minmax(88px,34%) minmax(0,1fr);gap:var(--s2)}
}
@media (max-width:719.98px){
  .dg-ln-n{flex:1 1 100%;order:3} .dg-ln-q{margin-left:auto}
  .dg-f .input,.dg-f select{font-size:.88rem;text-overflow:ellipsis}
  .dg-link a{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;max-width:100%}
}
@media (max-width:719.98px){
  .grid3:not(.stk-filters){grid-template-columns:repeat(2,minmax(0,1fr))} .grid3>.field{min-width:0}
  #sc-plan-form,#sc-done-form{grid-template-columns:minmax(0,1fr)}
}
/* v5.205 chữ nhỏ hơn 1 bậc (gốc 15px phone, PC clamp 14–18px); ô chọn tệp không cắt */
@media (max-width:1023.98px),(max-device-width:600px){html{font-size:15px}}
input[type=file].input{height:auto;min-height:var(--tap);padding:5px var(--s3);line-height:1.5;box-sizing:border-box;cursor:pointer}
input[type=file].input::file-selector-button{font:inherit;font-size:.9em;padding:3px 10px;margin-right:var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);cursor:pointer}
/* v5.205 phone: bảng dạng thẻ */
@media (max-width:859.98px){
  .tbl-wrap:has(>.tbl.m-cards){overflow-x:visible;border:0;background:transparent}
  .tbl.m-cards,.tbl.m-cards tbody{display:block;width:100%;min-width:0}
  .tbl.m-cards thead{display:none}
  .tbl.m-cards tbody tr{display:block;margin:0 0 8px;padding:6px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);position:relative}
  .tbl.m-cards tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:3px 0;border:0;white-space:normal;text-align:right;min-width:0;position:static;background:transparent;overflow-wrap:anywhere}
  .tbl.m-cards tbody td::before{content:attr(data-l);flex:0 0 36%;max-width:42%;text-align:left;color:var(--faint);font-size:.85em;font-weight:500;position:static;display:block;overflow-wrap:normal}
  .tbl.m-cards tbody td:first-child{padding-left:0!important;justify-content:flex-start;font-weight:700;border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:3px;text-align:left}
  .tbl.m-cards tbody td:first-child::before{content:counter(stt) "."!important;flex:none!important;max-width:none!important;color:var(--faint)!important;position:static!important;width:auto!important;height:auto!important;margin:0 4px 0 0!important;left:auto!important;top:auto!important;font-size:.85em!important}
  .tbl.m-cards tbody td[colspan]{display:block;text-align:left;padding:4px 0}
  .tbl.m-cards tbody td[colspan]::before{content:none}
  .tbl.m-cards tbody tr.cmd-row,.tbl.m-cards tbody tr.act-row,.tbl.m-cards tbody tr.ref-row{margin-top:-9px;border-top:0;border-radius:0 0 var(--r) var(--r)}
  .tbl.m-cards td.num,.tbl.m-cards td:last-child{white-space:normal}
  .tbl.m-cards td .clamp2{display:block;-webkit-line-clamp:unset;overflow:visible}
  .tbl.m-cards td .btn{white-space:normal}
}
@media (max-width:859.98px){
  .tbl.m-cards tbody td:first-child{background:transparent!important}
  .tbl.m-cards tbody td[colspan]:first-child::before{content:none!important;display:none!important}
  .tbl.m-cards tbody td[colspan]:first-child{border-bottom:0;margin:0;font-weight:400}
  .tbl.m-cards tbody tr.act-row,.tbl.m-cards tbody tr.act-row:hover{background:var(--accent-weak)}
}
@media (max-width:859.98px){
  .tbl-wrap .tbl.m-cards tbody tr>td:first-child{background:transparent!important;padding-left:0!important}
  .tbl.m-cards.stk-board tbody td:first-child::before{display:none!important}
}
@media (max-width:859.98px){
  .tbl.m-cards tbody tr:not(.cmd-row):not(.act-row):not(.ref-row){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  .tbl.m-cards tbody tr>td{grid-column:1/-1}
  .tbl.m-cards tbody tr>td.num{grid-column:auto}
  .tbl.m-cards td.num::before{flex:0 1 auto;max-width:none}
  .tbl.m-cards td .input,.tbl.m-cards td select{flex:1 1 55%;min-width:0;width:auto}
  .tbl.m-cards td:has(.input,select,textarea)::before{flex:0 0 36%}
}
@media (max-width:859.98px){
  .tbl.m-cards tbody td:first-child{width:auto!important;max-width:none!important;min-width:0!important}
  .tbl.m-cards td .input,.tbl.m-cards td select{max-width:none!important;width:auto!important}
}
.bd-name{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:none!important;min-width:140px}
/* v5.205 bảng đơn vừa khung PC/tablet */
.ord-table .tbl td.c-tx,.ord-table .tbl td.c-cus{min-width:9em}
.ord-table .tbl td.it-name{min-width:110px}
@media (min-width:1100px){.ord-table .tbl td:nth-child(3){min-width:84px;max-width:200px}}
.ord-table .tbl td .badge{max-width:150px;white-space:normal;line-height:1.25}
.ord-table .tbl th[scope=row]{white-space:nowrap}
input.input,select.input{text-overflow:ellipsis}
.tbl .clamp2,.clamp2{display:block;-webkit-line-clamp:unset;overflow:visible}
@media (max-width:859.98px){
  .tbl.m-cards tbody tr>th{display:flex;grid-column:1/-1;align-items:baseline;justify-content:flex-start;gap:4px;padding:0 0 5px!important;margin-bottom:3px;border:0;border-bottom:1px solid var(--line);background:transparent!important;text-align:left;font-weight:700;position:static;white-space:normal;overflow-wrap:anywhere}
  .tbl.m-cards tbody tr>th::before{content:counter(stt) "."!important;position:static!important;width:auto!important;height:auto!important;margin:0 4px 0 0!important;color:var(--faint);font-size:.85em;font-weight:400;left:auto!important;top:auto!important}
  .tbl.m-cards td.num,.tbl.m-cards td:last-child:not(:has(.input,select,textarea)){white-space:nowrap!important;overflow-wrap:normal!important}
  .tbl.m-cards td.num::before{white-space:normal}
}
/* v5.210 xem toàn màn hình */
.fs-exit{display:none}
.fs-area.fs-on{position:fixed;inset:0;z-index:1000;background:var(--bg,var(--surface,#fff));overflow:auto;padding:12px;box-sizing:border-box}
.fs-area:fullscreen{background:var(--bg,var(--surface,#fff));overflow:auto;padding:12px}
.fs-area.fs-on>.fs-exit{display:inline-flex;position:sticky;top:0;z-index:2;margin-bottom:8px}
html.fs-lock,html.fs-lock body{overflow:hidden}
/* v5.211 toàn màn hình: bảng bung hết chiều cao còn lại */
.fs-area.fs-on .bd-wrap,.fs-area:fullscreen .bd-wrap,.fs-area.fs-on .tbl-wrap,.fs-area:fullscreen .tbl-wrap{max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px)}

/* bảng điện: tối khi giao diện Tối (hoặc Theo thiết bị đang tối) */
:root[data-theme="dark"] .board{--bd-bg:#0b1220;--bd-row:#101a2c;--bd-line:#1e2b42;--bd-ink:#e5edf7;--bd-soft:#9fb0c7;--bd-up:#2fd16f;--bd-dn:#ff5b5b;--bd-eq:#f5c542;--bd-head:#0e1628;--bd-even:#0d1626;--bd-hover:#16243d;--bd-on:#1a2a47;--bd-onl:#4a6fa5;--bd-z:#5b6b85;--bd-link:#7fc4ff;--bd-grp:#7fc4ff;--bd-flu:#14532d;--bd-fld:#7f1d1d;--bd-negbg:#7f1d1d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .board{--bd-bg:#0b1220;--bd-row:#101a2c;--bd-line:#1e2b42;--bd-ink:#e5edf7;--bd-soft:#9fb0c7;--bd-up:#2fd16f;--bd-dn:#ff5b5b;--bd-eq:#f5c542;--bd-head:#0e1628;--bd-even:#0d1626;--bd-hover:#16243d;--bd-on:#1a2a47;--bd-onl:#4a6fa5;--bd-z:#5b6b85;--bd-link:#7fc4ff;--bd-grp:#7fc4ff;--bd-flu:#14532d;--bd-fld:#7f1d1d;--bd-negbg:#7f1d1d}}
/* cờ số đơn trên nút lọc trạng thái */
.row.wrap>.btn>.cnt,.row.wrap>.cnt{display:inline-block;margin-left:6px;border-radius:999px;font-size:.72rem;font-weight:700;padding:0 6px;min-width:20px;line-height:18px;text-align:center;color:#fff;background:var(--accent);vertical-align:middle}
.row.wrap>.cnt{margin-left:0;align-self:center}
.row.wrap>.btn>.cnt.zero,.row.wrap>.cnt.zero{background:var(--line);color:var(--soft)}
.row.wrap>.btn.primary>.cnt{background:#fff;color:var(--accent)}
/* thanh trang: chọn trang, đầu, cuối */
.pg-bar{flex-wrap:wrap}.pg-bar .pg-go{width:auto;min-width:96px;min-height:34px;padding-block:0}
@media (max-width:640px){.pg-bar .pg-go{min-height:44px}}
/* khung Thông báo trong lệnh / đơn: màu xanh thay đỏ */
.doc-notes .nt-h{color:var(--ok,#0a8f3c)}
.doc-notes .badge.nt-new{background:var(--ok-bg,rgba(10,143,60,.12));color:var(--ok,#0a8f3c);box-shadow:inset 0 0 0 1px currentColor}
/* thẻ đơn: thông tin xếp hàng ngang, tự xuống dòng khi hẹp (flexible) */
.ord-link{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s3)}
.ord-link>div{min-width:0;overflow-wrap:anywhere}
.ord-link>.row{flex:0 0 auto;gap:var(--s2)}
.ord-link>.row .grow{flex:0 1 auto}
.ord-link>div:not(.row):not(.small){flex:1 1 120px}
.ord-link>div.small:not(.row){flex:2 1 160px}
.ord-link>.row.muted{flex:1 1 200px}
.ord-link>div:not(.row):not(.small){font-size:var(--fs-sm)}
.ord-link>.row.muted{flex-wrap:nowrap;align-items:baseline;justify-content:space-between}
.ord-link>.row.muted .grow{min-width:0}.ord-link>.row.muted>span:last-child{flex:none;white-space:nowrap}
.oline .combo.has-x>input.input[role=combobox]{padding-right:50px}
/* v5.237 điện thoại: thẻ đơn tối giản (mã + trạng thái + khách); hàng / số lượng / giá xem ở tấm xem nhanh */
@media (max-width:767px){.ord-cards .ord-link>div.small,.ord-cards .ord-link>.row.muted{display:none}.ord-cards .ord-link{padding-block:10px}}
/* v5.238 hộp chọn chứng từ gọn: dòng 1 = mã + mã hàng đầu, dòng 2 = khách */
.pick-it{grid-template-columns:minmax(0,1fr) auto;gap:0 var(--s3);padding:7px var(--s3)}
.pick-it{grid-template-columns:auto minmax(0,1fr)}
.pick-it .pk-code{grid-column:1;grid-row:1;white-space:nowrap}
.pick-it .pk-items{grid-column:2;grid-row:1;display:block;min-width:0;justify-self:end;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.pick-it .pk-i{margin-left:var(--s2)}
.pick-it .pk-party{grid-column:1/-1;grid-row:2;font-size:var(--fs-sm)}

/* ===== Quản trị › Quy tắc: thẻ quy tắc chuẩn ===== */
.rc-grid{display:grid;gap:var(--s4);grid-template-columns:1fr;align-items:start}
.rc{display:flex;flex-direction:column;gap:var(--s3);scroll-margin-top:var(--s4)}
.rc.is-dirty{box-shadow:inset 3px 0 0 var(--accent),var(--sh1)}
.rc-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);justify-content:space-between}
.rc-head h2{margin:0;font-size:var(--fs-lg,1.1rem)}
.rc-desc{margin:0;max-width:72ch}
.rc-body{gap:var(--s3)}
.rc-body h3{margin:var(--s2) 0 0;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--soft)}
.rc-sw{min-height:var(--tap);align-items:center;gap:var(--s2)}
.rc-sw input{width:20px;height:20px;flex:none}
.rc-foot{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:flex-end;border-top:1px solid var(--line);padding-top:var(--s3)}
.rc-dirty{margin-right:auto;color:var(--accent);font-size:var(--fs-sm);font-weight:600}
.rc-info{display:grid;gap:2px;padding:var(--s3);border-radius:var(--r);background:var(--surface-2);font-size:var(--fs-sm)}
.dn-tbl{display:grid;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dn-gt{padding:var(--s2) var(--s3) var(--s1);margin-top:var(--s2);background:var(--surface-2);font-size:var(--fs-sm);font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;border-top:1px solid var(--line)}
.dn-hd+.dn-gt{margin-top:0}
.dn-bar{display:flex;justify-content:flex-end}
select.dn-bulk{width:auto;min-width:180px;min-height:36px;height:36px;padding-top:0;padding-bottom:0}
.dn-legend{margin:0;color:var(--soft);font-size:var(--fs-sm);overflow-wrap:anywhere}
.dn-row.is-dirty{box-shadow:inset 3px 0 0 var(--accent);background:var(--surface-2)}
.dn-sym,.dn-per{border-color:var(--ink-3,var(--line))}
.dn-row{display:grid;gap:var(--s1) var(--s2);grid-template-columns:90px 1fr 36px;align-items:center;padding:var(--s2) var(--s3);border-top:1px solid var(--line)}
.dn-hd{display:none;font-size:var(--fs-sm);color:var(--soft);border-top:0;background:var(--surface-2)}
.dn-name{grid-column:1/-1;font-weight:600;min-width:0;line-height:36px}
.dn-ex{grid-column:1/-1;order:5;display:block;justify-self:start;overflow-wrap:anywhere;padding:2px var(--s2);border-radius:6px;background:var(--surface-2);font-size:var(--fs-sm)}
.dn-row .input{min-height:36px;height:36px;padding-top:0;padding-bottom:0}
.dn-sym{text-transform:uppercase;font-weight:600;letter-spacing:.06em}
.dn-sym.is-bad{border-color:var(--err);background:var(--err-bg)}
.dn-rst{justify-self:start;min-width:36px;min-height:36px;padding:0}
.rk{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s2) var(--s3);border-radius:var(--r);background:var(--surface-2)}
.rk .badge{flex:none;margin-top:1px}
.rk span:last-child{min-width:0;overflow-wrap:anywhere}
.rk-err{background:var(--err-bg)} .rk-warn{background:var(--warn-bg)}
.fl-row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.fl-row code{overflow-wrap:anywhere}
.fl-row .btn{margin-left:auto}
@media (min-width:720px){
  .dn-row{grid-template-columns:minmax(200px,1fr) 90px 150px minmax(200px,260px) 36px;padding:var(--s1) var(--s3)}
  .dn-hd{display:grid}
  .dn-name{grid-column:auto;line-height:1.3}
  .dn-ex{grid-column:auto;order:0}
}
@media (min-width:1100px){.rc-grid{grid-template-columns:1fr 1fr}.rc-docno-wide,#rc-docno,#rc-risk{grid-column:1/-1}}

.dn-sum{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;justify-content:space-between;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.dn-sum-t{min-width:0;overflow-wrap:anywhere}
.dn-edit{display:grid;gap:var(--s2)}
.dn-edit[hidden],.dn-row[hidden],.dn-gt[hidden],.dn-bar .btn[hidden]{display:none}
.dn-bar{gap:var(--s2);flex-wrap:wrap}

/* ===== Quy tắc: thanh nhóm, công tắc, chi tiết thu gọn (v5.252) ===== */
.rc-tabs{display:flex;gap:var(--s1);overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:var(--s4);-webkit-overflow-scrolling:touch}
.rc-tab{flex:none;display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s4);border:0;border-bottom:3px solid transparent;background:none;color:var(--soft);font:inherit;font-weight:600;cursor:pointer}
.rc-tab:hover{color:var(--ink);background:var(--surface-2)}
.rc-tab[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}
.rc-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.rc-pn[hidden]{display:none}
.rc-more{font-size:var(--fs-sm)}
.rc-more summary{cursor:pointer;color:var(--accent);font-weight:600;min-height:28px;display:flex;align-items:center}
.rc-more p,.rc-more ul{margin:var(--s1) 0 0}
.rc-more ul{padding-left:var(--s4);display:grid;gap:var(--s1)}
.rk-ok{background:var(--surface-2)}
.rc-sw{display:flex;flex-wrap:nowrap;justify-content:space-between;flex-direction:row-reverse;gap:var(--s3)}
.rc-sw span{min-width:0;flex:1}
.rc-sw input[type=checkbox]{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;flex:none;cursor:pointer;transition:background .15s;margin:0}
.rc-sw input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.rc-sw input[type=checkbox]:checked{background:var(--accent)}
.rc-sw input[type=checkbox]:checked::after{transform:translateX(18px)}
.rc-sw input[type=checkbox]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rc button:disabled,.rc .btn:disabled{opacity:.45;cursor:not-allowed}
.rc input:disabled{opacity:.5}

/* gọn khoảng trắng (v5.252b) */
.rc-grid{gap:var(--s3)}
.rc{gap:var(--s2)}
.rc-act{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.rc-act .rc-dirty{margin:0}
.rc-inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s2) var(--s5)}
.rc-inline .rc-sw{width:auto;justify-content:flex-start;flex-direction:row-reverse}
.rc-inline .field{flex:0 1 220px;min-width:160px;margin:0}
.rc-pn>.rc:only-child{max-width:none}
.dn-sum{justify-content:flex-start}
.dn-sum .btn{margin-left:auto}
@media (min-width:720px){.dn-sum .btn{margin-left:0}}
.rc-foot{padding-top:var(--s2)}
.rc-foot[hidden]{display:none}
.rc-sw{width:100%}
.card.rc,.card.rc:has(.field){background:var(--surface)}
.rc-sw input[type=checkbox]{border:0;box-shadow:none}
.rc-sw input[type=checkbox]:not(:checked){background:#aab2ae}

/* v5.254: thanh lưu chung, nút nguy hiểm, tóm tắt không khung */
.rc-grp .rc-act .btn,.rc-grp .rc-foot{display:none}
.rc-grp .rc-act .rc-dirty{display:none}
.rc-moreb{margin-left:var(--s1);padding:0;min-height:0;font:inherit;color:var(--accent);font-weight:600;background:none;border:0;cursor:pointer;text-decoration:underline}
.rc-savebar{justify-content:flex-end;gap:var(--s3);padding-left:var(--s3);padding-right:var(--s3)}
.rc-savebar[hidden]{display:none}
.rc-savebar .rc-dirty{margin-right:auto}
#rc-renum .btn.primary{background:var(--warn);border-color:var(--warn);color:var(--surface)}
.dn-sum{background:none;border:0;padding:0}
.rc-savebar{flex-wrap:nowrap;gap:var(--s2)}
.rc-savebar .rc-dirty{white-space:nowrap;font-size:var(--fs-sm)}
.rc-savebar .btn{white-space:nowrap;padding-left:var(--s3);padding-right:var(--s3)}

/* v5.255: rủi ro 2 cột, thanh lưu dồn phải */
.rk-cols{display:grid;gap:var(--s3);align-items:start}
@media (min-width:900px){.rk-cols{grid-template-columns:1.4fr 1fr}}
.rk-cols .rk-know{margin:0;padding:var(--s2) var(--s3);border-radius:var(--r);background:var(--surface-2)}
@media (min-width:720px){.rc-savebar .rc-dirty{margin-right:0}}
/* v5.264: phân cấp điều hướng — Menu trái › cấp 1 tab gạch chân (.tabs-top) › cấp 2 nút lọc dạng viên (.tabs-sub) */
.tabs.tabs-top{gap:0;border-bottom:1px solid var(--line);padding-bottom:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.tabs.tabs-top::-webkit-scrollbar{display:none}
.tabs.tabs-top>.btn{flex:none;background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;box-shadow:none;color:var(--soft);font-weight:600;min-height:42px;padding:0 var(--s4);margin-bottom:-1px;white-space:nowrap}
.tabs.tabs-top>.btn:hover{color:var(--ink);background:var(--surface-2)}
.tabs.tabs-top>.btn.is-sel{color:var(--accent);border-bottom-color:var(--accent);font-weight:700;background:transparent;box-shadow:none}
.tabs.tabs-sub{gap:6px}
.tabs.tabs-sub>.btn{border-radius:999px;min-height:32px;padding:0 14px;font-size:var(--fs-sm)}
.tabs.tabs-sub>.btn.is-sel:not([class*=tab-]){background:var(--accent-weak);border-color:var(--accent);color:var(--accent);box-shadow:none}
@media (max-width:719.98px){
  .tabs.tabs-top{flex-wrap:nowrap;overflow-x:auto} .tabs.tabs-top>.btn{flex:none;white-space:nowrap;padding:0 var(--s3);max-width:none}
}
@media (pointer:coarse){ .tabs.tabs-top>.btn{min-height:44px} .tabs.tabs-sub>.btn{min-height:40px} }
/* v5.265: chuẩn hóa — mọi nút / ô / chọn trên thanh công cụ, bộ lọc, phân trang cao bằng var(--tap) (PC 32 · 1024–1099 38 · điện thoại 44 · cảm ứng 48) */
.pg-bar .btn,.pg-bar .pg-go,.pg-bar select.input,.lbar .btn,.lbar .input,.lbar select.input,.tabs:not(.tabs-top)>.btn,.pills>.btn,.pills>select.input,
.filt-row .btn,.stk-filters .btn,.rp-ctl .btn,.drange .btn,.col-btn,select.dn-bulk,.split-pick,.oline .input,.oline .od-ro,.oline .o-tt>.num,.oline .o-tv>.num{min-height:var(--tap);height:auto}
.pg-bar select.input,.lbar select.input,.lbar input.input,.pills>select.input,select.dn-bulk,.oline .input{height:var(--tap)}
@media (min-width:1100px){ .tbl-tools.in-line+.muted.small,.tbl-tools.in-line+.small{min-height:var(--tap)} .tbl-tools.in-line>.col-btn{top:0} }
/* cấp 2 / bộ lọc: một kiểu viên thống nhất (tab trong trang, lọc trạng thái đơn) */
.tabs:not(.tabs-top)>.btn,.pills>.btn{border-radius:999px;padding:0 14px;font-size:var(--fs-sm)}
.tabs:not(.tabs-top)>.btn.is-sel:not([class*=tab-]),.tabs:not(.tabs-top)>.btn[aria-selected=true]:not([class*=tab-]),.pills>.btn.primary{background:var(--accent-weak);border-color:var(--accent);color:var(--accent);font-weight:700;box-shadow:none}
.pills{gap:6px}
.main>.tabs-top{margin-bottom:var(--s2)}
/* bảng: nhãn trạng thái xuống dòng thì bo góc vuông vừa, cột không bị bóp quá hẹp */
.tbl td .badge{border-radius:6px}
.ord-table .tbl td:has(>.badge),.ord-table .tbl td:has(>.st-cell),.ord-table .tbl td:has(>a.badge){min-width:150px}
/* ô ngày đủ rộng, không cắt năm */
input[type=date].input{min-width:140px}
@media (max-width:719.98px){
  .tabs:not(.tabs-top)>.btn,.pills>.btn{min-height:40px}
  #main .row.end>.btn{flex:1 1 0;min-width:0}
  .stk-filters,.grid3.stk-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;align-items:end}
  .stk-filters>:first-child{grid-column:1/-1}
  .stk-filters>.btn{width:100%}
  .tabs.tabs-top.is-scroll{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
  .tabs.tabs-top.is-scroll.at-end{-webkit-mask-image:none;mask-image:none}
}
input[type=file].input{height:auto;min-height:var(--tap);padding-block:3px}
.od-foot .btn{min-height:var(--tap)} .oline .o-sl .input,.oline .o-dg .input{min-height:var(--tap);height:var(--tap)}
.ord-table .tbl td .stage-box .badge{white-space:nowrap;max-width:none}
@media (max-width:719.98px){ .stk-filters>label.row{grid-column:1/-1;flex-wrap:nowrap;align-items:center} }
.oline .o-stp{min-width:var(--tap);min-height:var(--tap)}
@media (max-width:859.98px){
  /* thẻ (bảng dạng thẻ): nhãn trái, mọi phần giá trị dồn phải — không giãn rời các phần (chuỗi chứng từ…) */
  .tbl.m-cards tbody td:not(:first-child):not([colspan]){justify-content:flex-end;gap:4px 6px;flex-wrap:wrap}
  .tbl.m-cards tbody td:not(:first-child):not([colspan])::before{margin-right:auto}
  /* chỉ chia 2 cột khi thẻ có từ 2 ô số trở lên; 1 ô số thì trải hết hàng cho thẳng lề */
  .tbl.m-cards tbody tr:not(:has(>td.num~td.num))>td.num{grid-column:1/-1}
  .tbl.m-cards tbody td{width:auto!important;max-width:none!important}
  .tbl.m-cards tbody td:not(:first-child) .clamp2{text-align:right}
  .tbl.m-cards tbody td:not(:first-child):empty{display:none}
  .tbl.m-cards tbody td:not(:first-child):has(>a){align-items:center} .tbl.m-cards tbody td:not(:first-child)>a{display:inline-flex;align-items:center}
}
@media (min-width:860px){
  /* bảng cuộn ngang: cột thao tác (nút Sửa…) dính mép phải, không bị khuất */
  .tbl-wrap .tbl td:last-child:has(>.btn:only-child){position:sticky;right:0;box-shadow:-6px 0 6px -6px rgba(16,24,32,.18)} .tbl-wrap .tbl tr:not(:hover)>td:last-child:has(>.btn:only-child){background:var(--surface)}
}
@media (min-width:1100px){ .main .stack:not(.card):is(.acct,.debt-card,.cnt-xn,.co-form)>*{margin-top:0} } /* ô lưới: không đẩy thẻ thứ 2 xuống 6px (lệch đỉnh) */
/* v5.280: bảng có ô nhập — mọi ô cùng hàng thẳng theo dòng chữ đầu (chữ trong ô nhập = chữ ô thường), ghi chú dưới ô nhập không kéo lệch ô bên cạnh (toàn app) */
.tbl tbody tr:has(.input)>td,.tbl tbody tr:has(.input)>th{vertical-align:baseline}
/* v5.281 (quét toàn app): tên hàng trên bảng điện kho hiện đủ một dòng (bảng cuộn ngang), không rớt từng chữ, không cắt */
.board .bd-tbl td.bd-name,.board .bd-tbl.tw td.bd-name{max-width:none!important;white-space:nowrap!important;overflow:visible;text-overflow:clip}
/* ô nhập trong ô biểu mẫu là khối: không có khoảng chân chữ dưới ô làm lệch đỉnh với ô bên cạnh */
.field>.input,.field>select.input,.field>textarea.input{display:block}
/* chữ trên nút không xuống dòng; thanh nút (.row) tự xuống hàng khi chật */
.btn{white-space:nowrap}
/* ô báo lỗi trống không chiếm chỗ (làm lệch ô cùng hàng) */
.field .err:empty{display:none}
/* v5.281: tên hàng ở dòng hàng chi tiết lệnh được xuống dòng (cột giá không bị đẩy ra ngoài); bảng đã hết cột phụ để ẩn thì cột chữ dài hẹp lại */
#task-items tbody th.ten{white-space:normal}
.tbl.tw td.c-tx{min-width:10em}
@media (max-width:1099.98px){.tbl.tw td.c-tx,.tbl.tw td .cf-t{min-width:8em}} /* v5.281: máy tính bảng: cột chữ dài hẹp lại trước khi phải cuộn ngang */
/* v5.282 Tin nhắn kiểu Zalo: nút cảm xúc tròn ở góc tin (rê chuột hiện), trạng thái Đã gửi / Đã xem dưới tin cuối của mình */
.chat-b{position:relative;margin-bottom:12px}
.chat-b .chat-ft{padding-right:18px}
.chat-rxq{position:absolute;right:-10px;bottom:-12px;width:26px;height:26px;min-width:0;min-height:0;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.12);cursor:pointer;opacity:0;transition:opacity .15s,transform .1s;z-index:2}
.chat-b:hover .chat-rxq,.chat-rxq:focus-visible,.chat-rxq.on{opacity:1}
.chat-rxq:hover{transform:scale(1.12)}
.chat-rxq:not(.on){filter:grayscale(1)}
@media (pointer:coarse){.chat-rxq{opacity:.85;width:30px;height:30px}}
.chat-b .chat-rxbar{position:absolute;right:0;bottom:calc(100% - 6px);margin:0;z-index:5;max-width:none;white-space:nowrap}
.chat-b:not(.mine) .chat-rxbar{right:auto;left:0}
.chat-st{align-self:flex-end;margin:-4px 2px 6px;padding:2px 10px;border-radius:999px;background:var(--surface-2,#eef1f5);color:var(--muted);font-size:var(--fs-sm)}
.chat-st.seen{color:var(--accent)}
.chat-st.pend{opacity:.7}
/* v5.283 (quy tắc giao diện web): ô nhập khi dùng bàn phím có vòng focus rõ, không chỉ đổi màu viền 1px */
.input:focus-visible,select.input:focus-visible,textarea.input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* 5.284: rà soát a11y (Vercel WIG / ui-ux-pro-max) — tiêu điểm, vùng chạm, tương phản, cỡ chữ tối thiểu 12px */
.dl-list:focus-visible,.split-list .pick-list li:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dialog{overscroll-behavior:contain}
.chatbtn{height:var(--tap,44px)}
@media (pointer:coarse){
  .bd-sort{min-height:44px}
  .board .bd-tbl .linkbtn{min-height:44px}
  a.chip,.ds-card a.chip,#task-shipped .chip{min-height:44px}
}
.board{--bd-up:#08773a;--bd-eq:#9a4508}
.stk-board th[scope=row]{color:#9a4508} .stk-chg.up{color:#08773a}
.ds-fact small,.ds-sc small{color:var(--soft)}
.chat-ava.grp{background:#5a687c}
.cnt{font-size:max(12px,.7rem) !important}
.board .bd-d{font-size:max(12px,.78em)}
.od-th>span{font-size:max(12px,.75rem)}
.ds-fact small,.ds-sc small{font-size:max(12px,.75rem)}
.steps .st-dot{font-size:12px}

/* 5.285: Số dư đầu kỳ — chọn người nhận việc */
.opn-mode{border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2) var(--s3) var(--s3);margin:0;display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.opn-mode>legend{padding:0 var(--s1)}
.opn-opt{display:flex;flex-direction:row;align-items:center;gap:var(--s2);min-height:var(--tap);cursor:pointer}
.opn-opt>input{flex:none;width:20px;height:20px;margin:0}
.opn-opt>span{min-width:0}

/* 5.286: kiêm nhiệm — danh sách bộ phận trong màn sửa người dùng */
.u-kn{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:0 var(--s3)}
.u-kn>label[hidden]{display:none}
.u-kiem>span{min-width:0}
.u-kiem{flex-wrap:nowrap;align-items:center}
.u-kn>label{flex-wrap:nowrap;align-items:center;min-width:0}
.u-kn>label>span{min-width:0}
/* 5.287: Quản trị › Máy chủ */
#srv-card .kv{grid-template-columns:minmax(150px,34%) minmax(0,1fr)}
#srv-new{margin-left:var(--s2)}
.srv-kv{display:flex;flex-direction:column;max-width:760px}
@media (max-width:599.98px){#srv-card .row.end{flex-direction:column;align-items:stretch}}
/* 5.290: dãy lệnh theo luồng (chainBar): lệnh gốc › lệnh điều vận › nút làm việc; cột Tên KH / Tên hàng chia đều, tối đa 2 dòng */
.chain-seg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2)}
.ord-table .tbl td.c-cus,.ord-table .tbl td.it-name{min-width:9em;max-width:18em}
.ord-table .tbl td.c-cus .clamp2,.ord-table .tbl td.it-name .clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tbl td.chain a.is-open{font-weight:600}
/* 5.292: Chuỗi chứng từ 2 cột — lệnh trái, phiếu / hóa đơn phải */
.chain-grid{display:grid;grid-template-columns:max-content max-content;gap:2px var(--s3);align-items:start}
.chain-grid a{white-space:nowrap}

/* 5.296: chat kiểu Zalo — bóng tin, giờ trong bóng, thao tác khi rê chuột, menu "…", trích dẫn, chọn nhiều, thẻ tệp, cỡ chữ chọn được */
.chat-thread{--chat-fs:15px}
.chat-top .chat-ava{flex:0 0 36px;height:36px}
.chat-tt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.chat-tt strong{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-tbtn{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--soft);font:700 .95rem var(--font);cursor:pointer;display:inline-grid;place-items:center}
.chat-tbtn:hover,.chat-tbtn:focus-visible{background:var(--surface-2);color:var(--ink)}
.chat-tbtn.on{color:var(--accent)}.chat-tbtn.on .ic svg{fill:currentColor}
@media (pointer:coarse){.chat-tbtn{width:44px;height:44px}}
.chat-msgs{background:var(--surface-2);padding:12px 16px;gap:2px;font-size:var(--chat-fs)}
.chat-row{display:flex;align-items:flex-end;gap:6px;position:relative;flex:none}
.chat-row.mine{justify-content:flex-end}
.chat-row.rl{margin-bottom:10px}
.chat-ava.sm{flex:0 0 28px;height:28px;font-size:.8rem}.chat-ava.ghost{visibility:hidden}
.chat-b{max-width:min(78%,540px);min-width:0;margin:0;background:var(--surface);color:var(--ink);border-radius:8px;padding:8px 12px 6px;box-shadow:0 1px 1px rgba(0,0,0,.1);font-size:var(--chat-fs);line-height:1.4}
.chat-b.mine{background:color-mix(in srgb,var(--accent) 15%,var(--surface));color:var(--ink)}
.chat-b.mine a{color:var(--accent)}.chat-b.mine .muted{color:var(--faint)}
.chat-b.hasrx{margin-bottom:16px}
.chat-by{font-size:.8em;margin-bottom:2px}
.chat-b .chat-ft{justify-content:flex-start;padding-right:0;margin-top:2px;color:var(--faint);font-size:.78em;gap:4px}
.chat-starmk{display:inline-flex;color:#e0a100}.chat-starmk .ic svg{width:12px;height:12px}
.chat-day{background:rgba(90,100,110,.62);color:#fff;border-radius:999px;padding:2px 12px;font-size:.75rem;margin:10px 0}
.chat-st{background:rgba(90,100,110,.55);color:#fff;font-size:.75rem;margin:-8px 4px 8px}
.chat-st.seen{background:var(--accent);color:var(--accent-ink)}
.chat-fwd{margin-bottom:2px}
.chat-quote{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--accent);background:rgba(0,0,0,.05);border-radius:4px;padding:4px 8px;margin-bottom:4px;font:inherit;font-size:.9em;color:var(--soft);cursor:pointer}
.chat-quote strong{display:block;color:var(--ink);font-size:.95em}
.chat-quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.chat-b.flash{animation:chat-flash 1.2s ease-out}
@keyframes chat-flash{0%,60%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 1px 1px rgba(0,0,0,.1)}}
.chat-acts{flex:none;display:flex;gap:2px;align-self:center;opacity:0;transition:opacity .12s}
.chat-row:hover .chat-acts,.chat-acts:focus-within{opacity:1}
.chat-act{width:28px;height:28px;border-radius:50%;border:0;background:var(--surface);color:var(--soft);display:inline-grid;place-items:center;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.chat-act:hover,.chat-act:focus-visible{color:var(--accent)}
.chat-act .ic svg,.chat-fbtn .ic svg{width:16px;height:16px}
.chat-rx{position:absolute;right:8px;bottom:-13px;margin:0;flex-wrap:nowrap;z-index:2}
.chat-b.hasrx .chat-rx{right:22px}
.chat-chip{min-height:22px;padding:0 6px;font-size:.8rem;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.chat-reply,.chat-replybar{display:flex;align-items:center;gap:8px}
.chat-replybar{padding:6px 12px;border-top:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface-2)}
.chat-replybar[hidden],.chat-selbar[hidden]{display:none}
.chat-rq{display:flex;flex-direction:column;min-width:0}.chat-rq span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-ib{flex:none;border-color:transparent;background:transparent;font-size:1.25rem;padding-inline:8px;min-width:40px}
#chat-send.like{background:transparent;border-color:transparent;box-shadow:none;color:inherit;font-size:1.5rem;padding-inline:8px}
.chat-selbar{padding:var(--s2) var(--s3);border-top:1px solid var(--line);gap:var(--s2);flex-wrap:wrap}
.chat-thread.selmode .chat-compose,.chat-thread.selmode .chat-replybar,.chat-thread.selmode .chat-picked{display:none}
.chat-row.sel{cursor:pointer}.chat-row.picked{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.chat-row.sel .chat-b{pointer-events:none}
.chat-chk{flex:none;width:20px;height:20px;border:2px solid var(--line);border-radius:50%;display:inline-grid;place-items:center;font-size:12px;align-self:center;margin-right:auto;background:var(--surface)}
.chat-row.picked .chat-chk{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chat-menu{position:fixed;z-index:1000;min-width:240px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:6px}
.chat-mi{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 12px;border:0;background:transparent;border-radius:8px;color:inherit;font:inherit;text-align:left;cursor:pointer}
.chat-mi:hover,.chat-mi:focus-visible{background:var(--surface-2)}.chat-mi.danger{color:var(--err)}.chat-mi:disabled{opacity:.45;cursor:default}
.chat-mico{flex:0 0 20px;display:inline-grid;place-items:center;color:var(--soft)}.chat-mi.danger .chat-mico{color:var(--err)}
.chat-mchev{color:var(--faint)}
@media (pointer:coarse){.chat-mi{min-height:48px}}
.chat-file{display:flex;align-items:center;gap:10px;min-width:230px}
.chat-file:has(.chat-img){display:block;min-width:0}
.chat-fico{flex:none;width:40px;height:44px;border-radius:6px;color:#fff;font:700 .7rem var(--font);display:grid;place-items:center}
.chat-fmid{min-width:0;flex:1}
.chat-dl{display:block;max-width:100%;border:0;background:none;padding:0;font:inherit;font-weight:600;color:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.chat-dl[aria-busy=true]{opacity:.6}
.chat-fsub{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--faint)}
.chat-cloud{display:inline-flex;align-items:center;gap:3px}.chat-cloud .ic svg{width:14px;height:14px}
.chat-ftools{flex:none;display:flex;gap:4px}
.chat-fbtn{width:32px;height:32px;border-radius:6px;border:0;background:rgba(0,0,0,.06);color:var(--soft);display:inline-grid;place-items:center;cursor:pointer}
.chat-fbtn:hover,.chat-fbtn:focus-visible{color:var(--accent)}
@media (pointer:coarse){.chat-fbtn{width:40px;height:40px}}
.chat-dl2{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0}.chat-dl2 dt{color:var(--faint)}.chat-dl2 dd{margin:0}
.ic{display:inline-flex}
@media (max-width:899px){.chat-msgs{padding:10px}.chat-b{max-width:84%}}
.chat-b.hasrx{padding-bottom:14px}
@media (pointer:coarse){.chat-rxq:not(.on){opacity:.5;width:26px;height:26px}}
/* 5.297: chat — tìm trong cuộc trò chuyện, kéo thả / dán tệp, @nhắc tên, xem ai thả cảm xúc */
.chat-searchbar{padding:var(--s2) var(--s3);gap:var(--s2);border-bottom:1px solid var(--line);align-items:center}
.chat-searchbar[hidden]{display:none}.chat-searchbar .input{flex:1;min-width:0}
.chat-thread.drop::after{content:"Thả tệp vào đây để gửi";position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,var(--surface) 86%);border:2px dashed var(--accent);border-radius:inherit;color:var(--accent);font-weight:700;pointer-events:none}
.chat-men{font-weight:700;color:var(--accent)}
.chat-menbox{border-top:1px solid var(--line);background:var(--surface);max-height:216px;overflow-y:auto}
.chat-menbox[hidden]{display:none}
.chat-menit{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 12px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.chat-menit.on,.chat-menit:hover{background:var(--surface-2)}
.chat-whorx{margin:0;padding:0}.chat-whorx li{gap:var(--s3);padding:6px 0;align-items:center}.chat-whoe{font-size:1.4rem;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}

/* 5.298 */
.chat-mhr{border:0;border-top:1px solid var(--border);margin:4px 0}
.chat-rxq .chat-rxb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
/* 5.299: bóng mình xanh dương nhạt, nhãn trạng thái xám như Zalo */
.chat-b.mine{background:#e5efff}
:root[data-theme="dark"] .chat-b.mine{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chat-b.mine{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}}
.chat-st.seen{background:rgba(90,100,110,.55);color:#fff}
/* 5.301: điện thoại — thẻ tệp xuống hàng, ô nhập rộng, chip cảm xúc không sát nút */
.chat-b.hasrx .chat-rx{right:36px}
@media (max-width:899px){
  .chat-file{flex-wrap:wrap;min-width:0}
  .chat-fmid{flex:1 1 140px}
  .chat-ftools{order:3;flex:1 0 100%;justify-content:flex-end}
  .chat-compose{padding-right:var(--s2)}
  .chat-ta::placeholder{font-size:.85rem}
}
/* 5.302: điện thoại giống Zalo — toàn màn hình, chữ to, màu xanh, tim viền */
.chat-rxq .ic:nth-child(2){display:none}
@media (pointer:coarse){.chat-rxq .ic:first-child{display:none}.chat-rxq .ic:nth-child(2){display:inline-block}}
@media (max-width:899px){
  .chat-thread{--chat-fs:17px}
  .chat-msgs{background:#e3eaf2}
  .chat-b.mine{background:#d4e8ff}
  .chat-b .chat-t,.chat-b time{opacity:.75}
  body:has(.chat.has-thread) .top,body:has(.chat.has-thread) .nav,body:has(.chat.has-thread) .main>:not(.chat-page){display:none}
  body:has(.chat.has-thread) .main{padding:0!important}
  body:has(.chat.has-thread) .chat{height:100dvh;gap:0}
  body:has(.chat.has-thread) .chat-thread{border:0;border-radius:0}
  .chat-compose{flex-wrap:nowrap}
  .chat-compose #chat-emoji{order:-2}.chat-compose .chat-ta{order:-1}
}
/* 5.303: ghi âm */
.chat-aud{min-width:200px;gap:10px}.chat-abar{flex:1;height:4px;border-radius:2px;background:rgba(0,0,0,.15);overflow:hidden}.chat-abar i{display:block;height:100%;width:0;background:var(--accent)}
.chat-aplay{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff}.chat-aplay:hover,.chat-aplay:focus-visible{color:#fff}
.chat-rec{padding:var(--s2);border-top:1px solid var(--line);gap:10px;align-items:center}.chat-rec[hidden]{display:none}
.chat-recdot{width:10px;height:10px;border-radius:50%;background:#e03131;animation:rec-bl 1s infinite}.chat-rect{font-variant-numeric:tabular-nums}
@keyframes rec-bl{50%{opacity:.25}}
.chat-compose #chat-mic .ic svg{width:22px;height:22px}
/* 5.304: điện thoại — chữ to hơn, tin thưa, nút tim trong lề, tiêu đề + ô nhập gọn như Zalo */
@media (max-width:899px){
  .chat-thread{--chat-fs:19px}
  .chat-msgs{padding:12px 24px 12px 16px;gap:14px}
  .chat-row.rl{margin-bottom:0}
  .chat-ft{font-size:.85rem}
  .chat-day{font-size:.95rem;padding:3px 14px}
  .chat-st{font-size:.95rem;padding:3px 12px}
  .chat-top .chat-back{border:0;background:none;box-shadow:none;font-size:1.5rem;min-width:40px;padding:0}
  .chat-compose .chat-ta{border:0;background:transparent;box-shadow:none;font-size:19px}
  .chat-compose .chat-ta:focus{outline:none;box-shadow:none}
}
/* 5.305: điện thoại — tiêu đề xanh dương như Zalo, emoji lớn không khung */
.chat-b.emo{box-shadow:none!important}
@media (max-width:899px){
  .chat-top{background:linear-gradient(90deg,#1a8cff,#00b4ff);color:#fff;border-bottom:0}
  .chat-top .chat-back,.chat-top .chat-tbtn,.chat-top button{color:#fff}
  .chat-top .chat-ava{background:rgba(255,255,255,.25)}
  .chat-top .chat-tt,.chat-top strong,.chat-top h2{color:#fff}
}
/* 5.306: nhấn giữ / chạm bóng tin mở menu, không bôi chọn chữ */
@media (pointer:coarse){.chat-b{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}

/* 5.308: kênh PO PRO, chứng từ, ghim, chuông */
.chat-sys{align-self:center;max-width:92%;background:#fff;border:1px solid #d6e0ec;border-radius:12px;padding:8px 12px;margin:6px 0;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.chat-sys-t{white-space:pre-wrap;word-break:break-word}
.chat-sys-f{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.chat-ava.sys{background:#0068ff;color:#fff}
.chat-doc{color:#0068ff;font-weight:600;text-decoration:none;border-bottom:1px dashed currentColor}
.chat-pinbar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#fff;border-bottom:1px solid #d6e0ec}
.chat-pinic{color:#f5a623;display:inline-flex}
.chat-pintx{flex:1;min-width:0;text-align:left;background:none;border:0;padding:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;color:inherit;font:inherit}
.chat-pick{max-height:50vh;overflow:auto}
.chat-menit{display:flex;gap:6px;width:100%;padding:10px;background:none;border:0;text-align:left;cursor:pointer;font:inherit;color:inherit;min-height:44px;align-items:center}
#chat-push.on{color:#0068ff}

/* 5.309: chế độ tối cho thẻ hệ thống, thanh ghim, nền chat trên điện thoại */
.chat-sys,.chat-pinbar{background:var(--surface);border-color:var(--line);color:var(--ink)}
.chat-doc{color:var(--accent)}
@media (max-width:899px){
  :root[data-theme="dark"] .chat-msgs{background:var(--bg)}
  :root[data-theme="dark"] .chat-b.mine{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
}
@media (max-width:899px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .chat-msgs{background:var(--bg)}
  :root:not([data-theme="light"]) .chat-b.mine{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
}

/* 5.310: tắt thông báo hội thoại, tin cũ, cảnh báo trình duyệt nhúng */
.chat-muted{display:inline-flex;color:var(--faint);vertical-align:middle}
.chat-muted .ic svg{width:14px;height:14px}
.chat-muted + .cnt.moi{background:var(--faint)}
#chat-mute.on .ic svg{fill:none}
.chat-oldbtn{align-self:center;margin:6px auto;font-size:var(--fs-sm)}
.chat-oldq{white-space:nowrap;font-size:var(--fs-sm)}
.inapp-warn{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:1000;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--warn-bg);color:var(--ink);border:1px solid var(--warn);box-shadow:var(--sh2)}
.inapp-warn .grow{flex:1 1 220px;min-width:0}
.chat-oldbtn{background:none!important;border:0!important;box-shadow:none!important;color:var(--accent);min-height:32px;padding:4px 10px}
@media (pointer:coarse){.chat-oldbtn{min-height:44px}}
.chat-tt .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:899px){
  .chat-top .chat-tt .small{display:none}
  .chat-top .chat-tbtn{width:40px}
  .chat-searchbar{flex-wrap:wrap}
  .chat-searchbar #chat-q{flex:1 1 100%}
}
@media (max-width:400px){.chat-top .chat-ava{display:none}}

/* 5.311: thẻ chứng từ, thẻ tiến trình, nút xử lý trong tin PO PRO */
.chat-card{display:block;margin-top:6px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);text-decoration:none;max-width:320px}
a.chat-card:hover{border-color:var(--accent)}
.chat-card-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.chat-card-b{margin-top:2px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-sys .chat-card{margin:0 0 6px;max-width:none;background:var(--surface-2)}
.chat-steps{margin:6px 0 0;padding-left:18px}
.chat-steps li{margin:2px 0}
.chat-sys-f{flex-wrap:wrap}
.chat-sys-a{gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* 5.311: tin giao việc / cần xác nhận */
.chat-task{margin-top:6px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.chat-task.late{border-color:var(--err)}
.chat-task-c{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.chat-task-a{gap:6px;margin-top:6px;flex-wrap:wrap}
.chat-pickset{border:0;padding:0;margin:0}
.chat-pickp{gap:8px;min-height:var(--tap);align-items:center}

/* 5.311: thẻ Cảnh báo tự động */
.al-row{gap:8px;flex-wrap:wrap;align-items:center}
.al-row .rc-sw{flex:1 1 220px;min-width:0}
.al-n{width:90px;flex:none}

/* 5.311: hướng dẫn lần đầu trong danh sách chat */
.chat-guide{margin:8px;padding:10px 12px;border:1px solid var(--accent);border-radius:12px;background:var(--accent-weak);color:var(--ink)}
.chat-guide-h{align-items:center}
.chat-guide-l{margin:6px 0 0;padding-left:20px;display:grid;gap:8px}
.chat-guide-l li{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.chat-guide-l li.ok{color:var(--ok)}
.chat-guide .install{flex:1 1 100%}
.chat-b a.chat-card,.chat-b a.chat-card *{text-decoration:none}
.chat-guide-l li > .grow{flex:1 1 160px;min-width:140px}.chat-guide-l li > .small{flex:1 1 100%}

/* 5.312: xem trước gõ tắt tiền */
.chat-tien{padding:4px 12px;color:var(--soft);border-top:1px solid var(--line);background:var(--surface-2)}
.chat-tien[hidden]{display:none}

/* 5.313: xem thêm, nhảy ngày, ảnh/tệp/liên kết, mất mạng, hoàn tác, tốc độ nghe */
.chat-tx.clamp{max-height:14em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent)}
.chat-more{background:none;border:0;padding:2px 0;color:var(--accent);font-weight:600;cursor:pointer;min-height:28px}
.chat-date{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;border:0;padding:0}
#chat-date{position:relative}
.chat-net{padding:6px 12px;background:#fff3cd;color:#5c4400;border-bottom:1px solid #e6cf80}
:root[data-theme="dark"] .chat-net{background:#3a3000;color:#ffe08a;border-color:#6b5a10}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chat-net{background:#3a3000;color:#ffe08a;border-color:#6b5a10}}
.chat-net[hidden],.chat-undo[hidden]{display:none}
.chat-undo{position:absolute;left:12px;right:12px;bottom:72px;z-index:5;padding:8px 12px;border-radius:10px;background:var(--ink);color:var(--surface);align-items:center;gap:8px;box-shadow:0 4px 16px #0004}
.chat-thread{position:relative}
.chat-mtabs{flex-wrap:wrap;gap:6px}
.chat-mlist{max-height:50vh;overflow:auto}
.chat-mth{width:44px;height:44px;object-fit:cover;border-radius:6px;flex:none}
.chat-mtx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-aspd{flex:none;min-width:36px;min-height:28px;border:1px solid var(--line);border-radius:14px;background:transparent;color:inherit;font-weight:700;cursor:pointer}

/* 5.314: bình chọn, hẹn giờ, vắng mặt, đang gõ */
.chat-poll{display:flex;flex-direction:column;gap:6px;margin-top:4px;min-width:200px}
.chat-poll-q{font-weight:700}
.chat-poll-o{position:relative;display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.chat-poll-o i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 22%,transparent);pointer-events:none}
.chat-poll-o span,.chat-poll-o b{position:relative}
.chat-poll-o.mine{border-color:var(--accent)}
.chat-away{padding:6px 12px;background:var(--surface-2);color:var(--soft);border-bottom:1px solid var(--line)}
.chat-typ{padding:2px 14px}
.chat-away[hidden],.chat-typ[hidden],.chat-schedbar[hidden]{display:none}
.chat-schedbar{padding:6px 12px;align-items:center;gap:8px;border-top:1px solid var(--line);background:var(--surface-2)}
.chat-editbar{display:flex;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface-2)}
.chat-editbar[hidden]{display:none}

/* 5.315: chat chứng từ, thẻ khách, phiếu đề nghị, lệnh / */
.chat-cust{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer;min-height:32px}
.chat-card.lnk{cursor:pointer}
.chat-card-chat{display:inline-block;margin-top:6px;color:var(--accent);text-decoration:none}
.chat-custd .row{gap:10px;align-items:baseline}
.chat-custd .row>span{min-width:84px}
.chat-req{border:1px solid var(--line);border-left:4px solid #d97706;border-radius:10px;padding:8px 10px;margin-top:6px;display:grid;gap:6px;background:var(--surface)}
.chat-req.ok{border-left-color:#16a34a}
.chat-req.no{border-left-color:#dc2626}
.chat-req-h{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.chat-req-w{white-space:pre-wrap;overflow-wrap:anywhere}
.chat-slash{display:grid;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:0 8px 4px;overflow:hidden}
.chat-slash .chat-menit{display:flex;gap:8px;align-items:baseline;text-align:left;min-height:44px;padding:8px 12px;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.chat-slash .chat-menit:hover{background:var(--line)}
.ds-chatlnk{font-size:.85rem;margin-left:8px;color:var(--accent);text-decoration:none;white-space:nowrap}
/* 5.316: vị trí */
.chat-loc{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:8px 10px;margin-top:6px;display:grid;gap:6px;background:var(--surface);min-width:220px}
.chat-loc.live{border-left-color:#16a34a}
.chat-b.mine a.btn.primary,.chat-b a.btn.primary{color:var(--accent-ink);text-decoration:none}
.chat-map-fr{width:100%;height:min(55vh,420px);border:0;border-radius:8px;background:var(--line)}
.chat-map-er{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;padding:8px;font-size:12px;color:var(--muted,#555)}.chat-map.err .chat-map-er{display:flex}
.chat-card{box-sizing:border-box;max-width:100%;min-width:0}.chat-card-h .badge{white-space:normal;max-width:100%;border-radius:12px;overflow-wrap:anywhere}
.chat-loc .chat-map-fr{height:190px;min-width:240px;display:block}
.chat-loc a.btn{text-decoration:none}

/* 5.328: màn Tin nhắn gọn lại */
.chat-ul{gap:0}.chat-ul>li{padding:0;border:0;border-radius:0;background:none}
.chat-head strong{white-space:nowrap}
.chat-plus{width:36px;min-width:36px;padding:0;font-size:1.4rem;line-height:1}
.chat-item.unread strong{font-weight:800}.chat-item.unread .chat-meta{color:var(--accent);font-weight:700}
.chat-ava.av0{background:#2f7d6b}.chat-ava.av1{background:#b0573c}.chat-ava.av2{background:#6b5bb0}.chat-ava.av3{background:#a8812a}.chat-ava.av4{background:#3a7cb0}.chat-ava.av5{background:#a2456f}
.chat-guide.mini{padding:4px var(--s3)}.chat-guide-b{background:none;border:0;color:var(--accent);font-weight:600;cursor:pointer;padding:4px 0;font:inherit}
#act-banner{padding:4px var(--s3);font-size:.85rem;min-height:0}#act-banner .btn{min-height:30px;padding:2px 10px}
@media (min-width:900px){
  .chat-thread{--chat-fs:16px}
  .chat{height:calc(100dvh - var(--top-h,60px) - 56px)}
  .chat-b{max-width:min(78%,720px)}
}

/* 5.330: báo cáo kho gọn trên điện thoại */
.filt-fold>summary{display:none}
.bd-acts{gap:var(--s2);margin-block:var(--s1)}
@media (max-width:719.98px){
  .filt-fold>summary{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;list-style:none}
  .filt-fold>summary::-webkit-details-marker{display:none}
  .filt-fold>summary::after{content:"▾";margin-left:auto;color:var(--soft)}.filt-fold[open]>summary::after{content:"▴"}
  .filt-fold .ff-s{color:var(--soft);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .filt-fold[open]>summary{margin-bottom:var(--s2)}
  .bd-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;margin-block:4px}.bd-opts label.row{min-height:40px;gap:4px;font-size:var(--fs-sm)}
  .tabs.tabs-sub{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.tabs.tabs-sub::-webkit-scrollbar{display:none}.tabs.tabs-sub>.btn{white-space:nowrap;flex:none}
}
@media (pointer:coarse),(max-width:700px){.combo-x{width:32px;height:32px;right:26px;top:calc((var(--tap) - 32px)/2)}}
/* 5.331: nhập đơn từ tin nhắn */
.mi-t{margin:0;font-size:var(--fs-lg)}
.mi-ta{width:100%;min-height:140px;resize:vertical;font-family:inherit}
.mi-card{display:flex;flex-direction:column;gap:var(--s2)}
.mi-card.mi-bad{border-color:var(--warn);box-shadow:inset 3px 0 0 var(--warn)}
.mi-card.mi-off:not(.mi-bad){opacity:.7}
.mi-h{align-items:center;gap:var(--s2)}.mi-h label{gap:var(--s2);align-items:center;min-height:var(--tap)}
.mi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s3)}
.mi-grid>.drange-f:nth-child(-n+2){grid-column:1/-1}
.mi-items{display:flex;flex-direction:column;gap:var(--s2)}
.mi-it{display:grid;grid-template-columns:minmax(0,1fr) 110px 120px 36px;gap:var(--s2);align-items:end;padding:var(--s2);border-radius:var(--r-sm);background:var(--surface-2)}
.mi-it.mi-need{background:var(--warn-bg);box-shadow:inset 0 0 0 1px var(--warn)}
.mi-it .num{text-align:right}.mi-del{align-self:center}
.mi-err{margin:0;padding-left:1.2em;color:var(--warn-ink,var(--ink))}.mi-err li::marker{color:var(--warn)}
.mi-warn{margin:0;padding-left:1.2em}
.mi-raw summary{cursor:pointer}.mi-raw div{white-space:pre-wrap;padding-top:4px}
.mi-bar{justify-content:flex-end;gap:var(--s2)}
@media (min-width:900px){.mi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.mi-grid>.drange-f:nth-child(-n+2){grid-column:auto}}
@media (max-width:719.98px){
  .mi-it{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px}
  .mi-it>.mi-p{grid-column:1/-1}
  .mi-bar .btn{flex:1 1 0}
}
.mi-card .drange-f{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0}.mi-card .drange-f>.lbl{white-space:normal;font-size:var(--fs-sm)}
.mi-card .drange-f>.input,.mi-card .drange-f>.combo,.mi-card .drange-f>.combo-pair{width:100%;min-width:0}
@media (min-width:900px){.mi-grid{grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}.mi-it{grid-template-columns:minmax(0,1fr) 140px 140px 36px}}

/* 5.339: chế độ riêng tư */
.chat-sec{padding:10px 14px;border-top:1px solid var(--line,#e5e7eb)}
.chat-sec .btn{width:100%}
/* 5.340: cuộn mượt trên iPhone, không kéo dây chuyền ra trang */
.chat-msgs{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}