:root{ --ground:#EDF0F5; --surface:#FFFFFF; --surface-2:#F5F7FA; --line:#D8DDE7; --line-2:#E6EAF1; --ink:#161C2A; --ink-2:#465066; --ink-3:#768096; --accent:#2344C4; --accent-ink:#FFFFFF; --accent-soft:#E2E8FB; --bad:#BE3328; --bad-soft:#FBE6E3; --wait:#A86A12; --wait-soft:#FBEFD9; --ok:#1C7548; --ok-soft:#DCF1E4; --paper:#FCFCF8; --paper-line:#C9D3E6; --shadow:0 1px 2px rgba(22,28,42,.06),0 6px 20px rgba(22,28,42,.07); --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --ground:#0D111A; --surface:#151A26; --surface-2:#1B2130; --line:#2A3143; --line-2:#222939; --ink:#E7EAF2; --ink-2:#AFB7C9; --ink-3:#7F889C; --accent:#8EA3FF; --accent-ink:#0D111A; --accent-soft:#1F2848; --bad:#FF8074; --bad-soft:#3A1E1C; --wait:#EDB65C; --wait-soft:#352A16; --ok:#62D49C; --ok-soft:#15301F; --paper:#1F2430; --paper-line:#3A4459; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); }} :root[data-theme="dark"]{ --ground:#0D111A; --surface:#151A26; --surface-2:#1B2130; --line:#2A3143; --line-2:#222939; --ink:#E7EAF2; --ink-2:#AFB7C9; --ink-3:#7F889C; --accent:#8EA3FF; --accent-ink:#0D111A; --accent-soft:#1F2848; --bad:#FF8074; --bad-soft:#3A1E1C; --wait:#EDB65C; --wait-soft:#352A16; --ok:#62D49C; --ok-soft:#15301F; --paper:#1F2430; --paper-line:#3A4459; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); } *{box-sizing:border-box} [hidden]{display:none!important} html,body{background:var(--ground)} body{font-family:var(--font);color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .wrap{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:0 110px} .mono{font-family:var(--mono);letter-spacing:.01em} .muted{color:var(--ink-3)} .small{font-size:13px} /* top bar */ .top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)} .top-in{max-width:760px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px} .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.01em} .brand-mark{width:34px;height:37px;object-fit:contain;display:block;flex:none} .brand small{display:block;font-weight:500;font-size:12px;color:var(--ink-3);letter-spacing:0} .brline{display:flex;align-items:center;gap:4px;background:var(--accent-soft);color:var(--accent);border:0;border-radius:999px;padding:2px 9px;margin-top:2px;font-size:12px;font-weight:600;max-width:190px} .brline span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .brline i{font-style:normal;font-size:10px;opacity:.8} .brline.one i{display:none} .me{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px 4px 4px;font-size:14px} .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:12px;flex:none;background:var(--accent-soft);color:var(--accent)} .av.r-gd{background:var(--ink);color:var(--surface)} .av.r-kho{background:var(--wait-soft);color:var(--wait)} .av.r-giao{background:var(--ok-soft);color:var(--ok)} .av.r-sale{background:var(--bad-soft);color:var(--bad)} .r-cnql,.av.r-cnql{background:#e0e7ff;color:#3730a3} .r-cnb,.av.r-cnb{background:#fce7f3;color:#9d174d} .me .role{color:var(--ink-3);font-size:12px} .me{white-space:nowrap;max-width:55%;overflow:hidden} @media (max-width:440px){.me .role{display:none}.brand small{display:none}.brline{max-width:130px}.me{max-width:46%}} .banner{margin:12px 0 0;padding:11px 13px;border-radius:10px;background:var(--wait-soft);border:2px solid var(--wait);color:var(--ink);font-size:13.5px;display:flex;gap:10px;align-items:flex-start} .banner b{color:var(--wait)} h1.vt{font-size:22px;font-weight:700;letter-spacing:-.015em;margin:20px 0 4px;text-wrap:balance} .sub{color:var(--ink-3);font-size:13.5px;margin:0 0 14px} h2.sec{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600;margin:22px 0 8px} /* ticket card */ .list{display:flex;flex-direction:column;gap:8px} .tk{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:12px;text-align:left;width:100%} .tk:hover{border-color:var(--line)} .tk .kind{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:12px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2)} .tk .kind.nhap{background:var(--accent-soft);color:var(--accent);border-color:transparent} .tk .t1{font-weight:600;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} .tk .t1 .mono{font-size:12px;color:var(--ink-3);font-weight:500} .tk .t2{font-size:13px;color:var(--ink-3);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center} .tk .right{display:flex;flex-direction:column;align-items:flex-end;gap:6px} .dot{width:8px;height:8px;border-radius:50%;background:var(--bad);display:inline-block} .pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .tone-wait{background:var(--wait-soft);color:var(--wait)} .tone-go{background:var(--accent-soft);color:var(--accent)} .tone-bad{background:var(--bad-soft);color:var(--bad)} .tone-ok{background:var(--ok-soft);color:var(--ok)} .tone-mute{background:var(--surface-2);color:var(--ink-3)} .tag{font-size:11px;font-weight:600;border:1px solid var(--line);color:var(--ink-3);border-radius:6px;padding:0 6px} .empty{padding:28px 16px;text-align:center;color:var(--ink-3);border:1px dashed var(--line);border-radius:12px;font-size:14px} /* pipeline */ .pipe{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:14px;margin-bottom:10px} .pipe-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px} .pipe-h b{font-size:15px} .stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px} .stage{border:1px solid var(--line-2);background:var(--surface-2);border-radius:10px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:2px} .stage .n{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1} .stage .l{font-size:12px;color:var(--ink-3)} .stage .w{font-size:11px;color:var(--ink-3)} .stage.hot{background:var(--bad-soft);border-color:transparent} .stage.hot .n{color:var(--bad)} .stage.zero .n{color:var(--ink-3)} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px} .stat{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:12px} .stat .n{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1} .stat .l{font-size:12.5px;color:var(--ink-3)} .stat.bad .n{color:var(--bad)} /* chấm công */ .att-card{background:linear-gradient(135deg,var(--accent-soft),var(--surface));border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:14px;padding:14px;margin:10px 0 14px;display:flex;gap:12px;align-items:center;justify-content:space-between} .att-card .att-main{display:flex;flex-direction:column;gap:3px;min-width:0}.att-card .att-main b{font-size:16px}.att-card .att-main span{font-size:13px;color:var(--ink-3)} .att-card .actions{flex:0 0 auto;margin:0}.att-list{display:flex;flex-direction:column;gap:6px}.att-row{display:grid;grid-template-columns:minmax(90px,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line-2);background:var(--surface);border-radius:11px;padding:10px 12px;text-align:left;width:100%} .att-row .meta{font-size:12.5px;color:var(--ink-3);margin-top:2px}.att-state{font-size:12px;font-weight:700;border-radius:999px;padding:4px 9px;background:var(--surface-2);color:var(--ink-3);white-space:nowrap}.att-state.full{background:var(--ok-soft);color:var(--ok)}.att-state.half{background:var(--wait-soft);color:var(--wait)}.att-state.absent{background:var(--bad-soft);color:var(--bad)} @media (max-width:520px){.att-card{align-items:flex-start;flex-direction:column}.att-card .actions{width:100%}.att-card .actions .btn{width:100%}} /* filters */ .bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 12px} .search{flex:1 1 220px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 12px;height:40px} .search input{border:0;outline:0;background:transparent;flex:1;min-width:0;height:100%} /* trong hộp thoại (xếp dọc) thì "flex:1 1 220px" của .search làm ô tìm giãn cao 220px — giữ đúng 40px */ .dlg-card>.search{flex:0 0 auto} .chips{display:flex;gap:6px;flex-wrap:wrap} .chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;color:var(--ink-2)} .chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)} /* bottom tabs */ .tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)} .tabs-in{max-width:760px;margin:0 auto;display:flex;padding:6px 8px;gap:4px;align-items:center} .tab{flex:1;border:0;background:transparent;border-radius:10px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:500;color:var(--ink-3);position:relative} .tab svg{width:22px;height:22px} .tab[aria-current="page"]{color:var(--accent)} .tab .badge{position:absolute;top:2px;left:calc(50% + 6px);background:var(--bad);color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px} .fab{flex:none;border:0;background:var(--accent);color:var(--accent-ink);border-radius:14px;height:46px;padding:0 16px;display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;box-shadow:var(--shadow)} .fab svg{width:20px;height:20px} @media (max-width:520px){.fab span{display:none}.fab{padding:0 12px}.tab{font-size:11px}} .linkbtn{border:0;background:none;padding:0;color:var(--accent);font-weight:600;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .ct{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;text-align:left;width:100%} .ct .nm{font-weight:600} .ct .meta{font-size:13px;color:var(--ink-3);display:flex;gap:6px;flex-wrap:wrap} .ct .cnt{font-size:12px;color:var(--ink-3);text-align:right;white-space:nowrap} .ct.sel{border-color:var(--accent);background:var(--accent-soft)} .cav{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2)} .cav.si{background:var(--accent-soft);color:var(--accent);border-color:transparent} .cav.ncc{background:var(--wait-soft);color:var(--wait);border-color:transparent} .gtag{font-size:11px;font-weight:700;border-radius:6px;padding:1px 7px;background:var(--surface-2);color:var(--ink-2)} .gtag.si{background:var(--accent-soft);color:var(--accent)} .gtag.ncc{background:var(--wait-soft);color:var(--wait)} .pickfield{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;min-height:56px;width:100%;text-align:left} .pickfield .ph0{color:var(--ink-3)} .pickfield .chg{margin-left:auto;font-size:13px;font-weight:600;color:var(--accent)} .pk-list{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto} .inc{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14px;text-align:left;width:100%;background:none;border-left:0;border-right:0;border-top:0} .inc:last-child{border-bottom:0} .inc .d{font-family:var(--mono);font-size:12px;color:var(--ink-3);padding-top:2px;white-space:nowrap} .inc .x{color:var(--bad);font-weight:600} .warnbox{background:var(--wait-soft);border-radius:10px;padding:10px 12px;font-size:13.5px;display:flex;flex-direction:column;gap:8px} /* buttons */ .btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 14px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px} .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))} .btn.ok{background:var(--ok);color:#fff;border-color:var(--ok)} .btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)} .btn[disabled]{opacity:.45;cursor:not-allowed} .btn.block{width:100%} .actions{display:flex;flex-wrap:wrap;gap:8px} .actions .btn{flex:1 1 160px} /* sheet */ .sheet{position:fixed;inset:0;z-index:50;background:rgba(10,14,24,.45);display:flex;justify-content:center;align-items:flex-end} .sheet-card{background:var(--ground);width:100%;max-width:760px;height:min(94vh,100%);border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)} @media (min-width:800px){.sheet{align-items:center}.sheet-card{border-radius:18px;height:90vh}} .sheet-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-2);background:var(--surface)} .sheet-head h3{margin:0;font-size:16px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .xbtn{border:0;background:var(--surface-2);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none} .sheet-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px} .sheet-foot{border-top:1px solid var(--line-2);background:var(--surface);padding:10px 12px calc(10px + env(safe-area-inset-bottom))} .box{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:14px} .hd{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap} .hd .party{font-size:19px;font-weight:700;letter-spacing:-.01em;text-wrap:balance} .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin-top:10px} .kv dt{color:var(--ink-3)} .kv dd{margin:0;white-space:pre-wrap;word-break:break-word} /* stepper */ .steps{display:flex;gap:0;margin-top:14px} .st{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:11.5px;color:var(--ink-3);text-align:center;padding:0 2px} .st::before{content:"";position:absolute;top:10px;left:-50%;right:50%;height:2px;background:var(--line)} .st:first-child::before{display:none} .st i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;z-index:1;font-style:normal;font-size:11px;font-weight:700} .st.done i{background:var(--ok);border-color:var(--ok);color:#fff} .st.done::before,.st.cur::before{background:var(--ok)} .st.cur i{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)} .st.cur{color:var(--ink);font-weight:600} .st.cur.bad i{background:var(--bad);border-color:var(--bad)} .holder{margin-top:12px;display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:14px} .holder b{font-weight:600} /* photos */ .photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px} .ph{border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--surface-2);display:flex;flex-direction:column;text-align:left;padding:0} .ph .img{aspect-ratio:4/3;width:100%;max-width:100%;background:var(--surface-2);display:grid;place-items:center;overflow:hidden} .ph img{width:100%;height:100%;object-fit:cover;display:block} .ph span{font-size:12px;color:var(--ink-3);padding:6px 8px} .slip{width:78%;height:78%;background:var(--paper);border:1px solid var(--paper-line);border-radius:3px;padding:6px 7px;display:flex;flex-direction:column;gap:4px;transform:rotate(-2deg)} .slip b{font-size:8px;letter-spacing:.06em;color:var(--ink-2)} .slip u{display:block;height:1px;background:var(--paper-line);text-decoration:none} .slip em{font-style:normal;font-size:8px;color:var(--ink-3);margin-top:auto} .checklist{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;font-size:14px} .checklist li{display:flex;gap:8px;align-items:center} .ck{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none} .ck.y{background:var(--ok);color:#fff} .ck.n{background:var(--bad-soft);color:var(--bad)} /* timeline */ .tl{display:flex;flex-direction:column;gap:0} .ev{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:8px 0;position:relative} .ev::before{content:"";position:absolute;left:13.5px;top:36px;bottom:-8px;width:1px;background:var(--line)} .ev:last-child::before{display:none} .ev .av{width:28px;height:28px} .ev .who{font-size:13px;color:var(--ink-3)} .ev .who b{color:var(--ink);font-weight:600} .ev .msg{margin-top:3px;font-size:14.5px;white-space:pre-wrap;word-break:break-word} .ev.status .msg{font-size:13.5px;color:var(--ink-2)} .ev.comment .msg{background:var(--surface);border:1px solid var(--line-2);border-radius:4px 12px 12px 12px;padding:8px 12px;display:inline-block;max-width:100%} .ev.edit .msg{font-size:13px;color:var(--ink-2);background:var(--wait-soft);border-radius:8px;padding:6px 10px;display:inline-block} .ev.incident .msg{font-size:14px;color:var(--ink);background:var(--bad-soft);border-radius:8px;padding:6px 10px;display:inline-block} .icd{border-top:1px solid var(--line-2);padding:10px 0;display:flex;flex-direction:column;gap:6px} .icd:first-of-type{border-top:0} .icd .top{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap} .icd .fix{font-size:13.5px;background:var(--ok-soft);border-radius:8px;padding:6px 10px} .mention{color:var(--accent);font-weight:600} .ev .shot{margin-top:6px;max-width:220px;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);display:block;padding:0;background:none} .ev .shot img{display:block;width:100%} /* composer */ .comp{display:flex;gap:8px;align-items:flex-end} .comp textarea{flex:1;resize:none;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:10px 12px;min-height:44px;max-height:120px;outline:0} .icbtn{border:1px solid var(--line);background:var(--surface);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--ink-2)} .icbtn svg{width:20px;height:20px} .icbtn.send{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .picker{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 8px} .pk{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px 4px 4px;display:flex;gap:6px;align-items:center;font-size:13px} .pk .av{width:22px;height:22px;font-size:10px} .attach{display:flex;gap:8px;align-items:center;padding-bottom:8px;font-size:13px;color:var(--ink-3)} .attach img{width:44px;height:44px;object-fit:cover;border-radius:8px} /* forms */ .field{display:flex;flex-direction:column;gap:6px} .field label,.field .lb{font-size:13px;font-weight:600;color:var(--ink-2)} .field input,.field select,.field textarea{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;min-height:44px;outline:0;width:100%} .field textarea{min-height:80px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)} .opt{display:flex;flex-direction:column;gap:6px} .opt label{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;font-weight:500;color:var(--ink);font-size:14px} .opt input{width:18px;height:18px;min-height:0;accent-color:var(--accent)} .shotpick{border:1.5px dashed var(--line);border-radius:12px;background:var(--surface);min-height:120px;display:grid;place-items:center;text-align:center;color:var(--ink-3);font-size:14px;padding:12px;width:100%;overflow:hidden} .shotpick img{max-height:220px;max-width:100%;border-radius:8px;display:block} .req{color:var(--bad)} .err{color:var(--bad);font-size:13px} /* dialog */ .dlg{position:fixed;inset:0;z-index:70;background:rgba(10,14,24,.5);display:flex;align-items:flex-end;justify-content:center} .dlg-card{background:var(--ground);width:100%;max-width:520px;max-height:92vh;overflow-y:auto;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px} @media (min-width:600px){.dlg{align-items:center}.dlg-card{border-radius:18px}} .dlg-card h4{margin:0;font-size:17px} /* login */ .who-list{display:flex;flex-direction:column;gap:6px} .who-btn{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;text-align:left;width:100%} .who-btn .nm{font-weight:600} /* report */ .notes{display:flex;flex-direction:column;gap:6px} .note{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px} .note .tx{font-size:14px} .rowline{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14px} .rowline:last-child{border-bottom:0} .rowline .mono{font-size:12.5px;color:var(--ink-3)} .foot-note{font-size:12.5px;color:var(--ink-3);margin-top:10px} .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:90;background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:12px;font-size:14px;font-weight:500;max-width:calc(100% - 32px);box-shadow:var(--shadow);cursor:pointer} .stamp{display:inline-grid;place-items:center;border:2px solid var(--ok);color:var(--ok);border-radius:8px;padding:2px 10px;font-weight:700;font-size:12px;letter-spacing:.08em;transform:rotate(-4deg)} .lightbox{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.9);display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:16px} .lb-bar{display:flex;justify-content:space-between;align-items:center;color:#fff;font-family:var(--mono);font-size:14px} .lb-img{display:grid;place-items:center;min-height:0} .lb-img img{max-width:100%;max-height:78vh;border-radius:8px} .lb-nav{display:flex;justify-content:center;gap:16px} .lb-btn{border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:12px;min-width:52px;height:48px;font-size:22px;font-weight:600} @media (prefers-reduced-motion:no-preference){.sheet-card,.dlg-card{animation:up .18s ease-out}@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}} .dayh{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--ink-2);margin:16px 0 8px;position:sticky;top:52px;z-index:4;background:var(--ground);padding:6px 0} .dayh i{flex:1;height:1px;background:var(--line)} .dayh .dc{font-size:11px;font-weight:600;color:var(--ink-3);background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums} .sheet-body .dayh,.pk-list .dayh{top:-16px;margin-top:8px} .pk-list .dayh{top:0} .day+.day{margin-top:4px} .filters{display:flex;flex-direction:column;gap:10px;margin-bottom:4px} .frow{display:flex;gap:8px;flex-wrap:wrap} .frow .field{flex:1 1 150px} .frow .field label{font-size:12px} .frow select,.frow input{min-height:40px;padding:6px 10px} .rowline{width:100%;background:none;border:0;border-bottom:1px solid var(--line-2);text-align:left;padding:10px 0;display:flex;gap:10px;justify-content:space-between;align-items:center;font-size:14px} .rowline:last-child{border-bottom:0} .shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px} .shot-t{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);max-width:100%;background:var(--surface-2)} .shot-t img{width:100%;height:100%;object-fit:cover;display:block} .shot-x{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.62);color:#fff;font-size:12px;display:grid;place-items:center} .shot-add{aspect-ratio:1;border:1.5px dashed var(--line);border-radius:10px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-3);font-size:12px;font-weight:500;padding:6px;text-align:center;max-width:100%} .shot-add svg{width:24px;height:24px} .cthumbs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px} .cthumbs .shot-t,.cthumbs .shot-add{width:64px;flex:none} .thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px} .th{aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line-2);padding:0;background:var(--surface-2);max-width:100%;display:grid;place-items:center} .th img{width:100%;height:100%;object-fit:cover;display:block} .pgroup+.pgroup{margin-top:12px} .evthumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px} .evthumbs .th{width:72px} .tl-day{font-size:12px;color:var(--ink-3);font-weight:600;text-align:center;margin:12px 0 4px;display:flex;align-items:center;gap:8px} .tl-day::before,.tl-day::after{content:"";flex:1;height:1px;background:var(--line-2)} .icd .thumbs{max-width:320px} .notebox{border:1.5px solid var(--bad);background:var(--bad-soft);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px} .notebox .lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bad)} .notebox .tx{font-size:15.5px;font-weight:600;color:var(--ink);white-space:pre-wrap;word-break:break-word} .t2.notered{color:var(--bad);font-weight:600} /* hàng đặt */ .tk .kind.dat{background:var(--wait-soft);color:var(--wait);border-color:transparent} .tk .kind.bh{background:var(--bad-soft);color:var(--bad);border-color:transparent} .tk .kind.ret{background:var(--ok-soft);color:var(--ok);border-color:transparent} .tk .kind.retn{background:var(--wait-soft);color:var(--wait);border-color:transparent} .vids{display:flex;flex-direction:column;gap:10px;margin-top:8px} .vid{position:relative;border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--line-2)} .vid video{width:100%;max-height:60vh;display:block} .panebar{margin:2px 0 10px} .tk.ocard{grid-template-columns:auto 1fr} .ostat{display:inline-flex;align-items:center;gap:8px;margin-top:6px} .loginlogo{display:flex;justify-content:center;padding:4px 0 10px} .loginlogo img{width:170px;height:auto;display:block} .menub{width:40px;height:40px;border:0;background:var(--surface-2);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:none;margin-left:6px} .menub span{display:block;width:17px;height:2px;border-radius:2px;background:var(--ink-2)} .mnu{display:flex;flex-direction:column;gap:2px} .mnu button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;border-bottom:1px solid var(--line-2);padding:14px 2px;text-align:left;font-size:15.5px;font-weight:600;color:var(--ink)} .mnu button:last-child{border-bottom:0} .mnu .mi{width:34px;height:34px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;flex:none;font-size:16px} .mnu .ms{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:1px} .backb{border:0;background:var(--surface-2);color:var(--ink-2);font-weight:600;font-size:14px;border-radius:9px;padding:7px 14px;margin-bottom:10px} .tfbar{margin-bottom:12px} .pr{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:11px 13px;text-align:left} .pcode{font-family:var(--mono);font-weight:600;font-size:13px;background:var(--accent-soft);color:var(--accent);border-radius:8px;padding:6px 9px;flex:none;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pmid{min-width:0} .pn{display:block;font-weight:600;font-size:15px;line-height:1.3;word-break:break-word} .pmeta{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px} .pst{text-align:right;font-weight:700;font-size:17px;flex:none;line-height:1.1} .pst i{display:block;font-style:normal;font-size:11px;font-weight:500;color:var(--ink-3)} .pst.zero{color:var(--bad)} .lns{display:flex;flex-direction:column;gap:2px} .ln{padding:10px 0;border-bottom:1px solid var(--line-2)} .ln:last-child{border-bottom:0} .lnm{font-size:14.5px;line-height:1.35;word-break:break-word} .lnm b{font-family:var(--mono);font-size:13px;color:var(--accent)} .lnq{font-size:13.5px;color:var(--ink-2);margin-top:4px;display:flex;gap:8px;align-items:center} .lnq b{margin-left:auto;color:var(--ink);font-size:15px} .lnf{display:flex;gap:6px;align-items:center;margin-top:7px} .lnf .qin{width:64px}.lnf .pin{width:104px} .lnf input{padding:8px 9px;border:1px solid var(--line);border-radius:9px;font-size:14.5px;font-family:var(--mono);text-align:right;background:var(--surface);color:var(--ink);min-width:0} .lnf .x{color:var(--ink-3);font-size:13px} .lnf b{margin-left:auto;font-size:15px;white-space:nowrap} .tot{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--line-2);font-size:15px} .tot b{font-size:17px;font-weight:700} .tot.bad b{color:var(--bad)} .pplist{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:4px;margin:10px 0} .pp{display:flex;gap:10px;align-items:center;width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;text-align:left} .gtag.cn{background:var(--accent);color:#fff;border-color:transparent} .cav.cn{background:var(--accent);color:var(--accent-ink)} .citems{display:flex;flex-direction:column;gap:5px;margin:8px 0 2px} .ci{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--ink-2)} .ci i{font-style:normal;font-weight:700;color:var(--ink-3);flex:none;width:14px} .ci.on i{color:var(--ok)} .ci.on b{color:var(--ok);font-weight:600} .items{display:flex;flex-direction:column;gap:2px} .item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line-2)} .item:last-child{border-bottom:0} .item .ibody{flex:1 1 auto;min-width:0} .item .itx{font-size:15px;font-weight:500;word-break:break-word} .item.on .itx{color:var(--ink-2)} .tick{width:28px;height:28px;flex:none;border-radius:8px;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:15px;font-weight:700;color:transparent;margin-top:1px;padding:0} .tick.on{background:var(--ok,#1E7A4B);border-color:transparent;color:#fff} .idel{border:0;background:none;color:var(--ink-3);width:30px;height:30px;flex:none;display:grid;place-items:center;padding:0} .prow+.prow{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)} .phead{display:flex;align-items:center;gap:10px;margin-bottom:6px} .phead .cnt{margin-left:auto;font-weight:700;color:var(--accent);font-size:15px;white-space:nowrap} .prow .rowline>span:first-child{flex:1 1 auto;min-width:0} .prow .rowline .mono{white-space:nowrap} .prow .rowline>span:last-child{flex:0 0 auto;text-align:right;max-width:52%} .t2.whoLine{color:var(--ink-2)} .t2.whoLine b{color:var(--ink);font-weight:600} .thw{position:relative;display:block;max-width:100%} .thw .th{width:100%} .evthumbs .thw{width:72px} .th-x{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;border:2px solid var(--surface);background:var(--bad);color:#fff;font-size:11px;line-height:1;display:grid;place-items:center;padding:0;z-index:2} .shots.dzon{outline:2px dashed var(--accent);outline-offset:4px;border-radius:12px} .dzhint{margin:6px 0 0} .soanbar{display:flex;gap:18px;flex-wrap:wrap;padding:12px 14px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px} .soanbar span{display:flex;flex-direction:column;gap:2px;min-width:120px} .soanbar i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .soanbar b{font-size:15.5px;font-weight:600;color:var(--ink)} /* catalog */ .catcard{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;text-align:left;width:100%} .cat-ic{width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;flex:none;border:1px solid var(--line-2)} .cat-ic img{width:100%;height:100%;object-fit:cover;display:block} .cat-ic.pdf{background:var(--bad-soft);color:var(--bad);font-family:var(--mono);font-weight:600;font-size:13px;border-color:transparent} .cat-in{min-width:0} .cat-in .nm{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cat-in .meta{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px} .catbig{display:grid;place-items:center} .catbig img{max-width:100%;border-radius:10px;display:block} .pdfview{width:100%;height:min(70vh,620px);border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2)} .filelist{display:flex;flex-direction:column;gap:6px;margin-bottom:8px} .filerow{display:flex;gap:8px;align-items:center;justify-content:space-between;background:var(--surface-2);border-radius:8px;padding:6px 8px;font-size:13.5px} .filerow .shot-x{position:static;background:var(--line);color:var(--ink-2)} /* chat */ .mact{border:0;background:none;color:var(--ink-3);font-weight:700;padding:0 4px;margin-left:6px;line-height:1} .bub.recalled{opacity:.75} .quote{border-left:3px solid var(--accent);padding:2px 8px;margin:2px 0 6px;font-size:13px;color:var(--ink-2);background:color-mix(in srgb,var(--accent-soft) 60%,transparent);border-radius:0 8px 8px 0} .quote b{display:block;font-size:12px;color:var(--accent)} .replybar{display:flex;gap:8px;align-items:center;justify-content:space-between;background:var(--surface-2);border-radius:10px;padding:6px 10px;margin-bottom:8px;font-size:13px} .chat-top{padding:2px 0 6px;text-align:center} .seen-row{display:flex;padding:0 2px 6px} .seen-btn{background:none;border:0;padding:2px 4px;font:inherit;font-size:12px;cursor:pointer;text-align:inherit} .seen-btn:hover{text-decoration:underline} .mrow{display:flex;gap:8px;align-items:flex-end;margin:8px 0;width:100%} .mrow.mine{flex-direction:row-reverse} .bub{min-width:0;background:var(--surface);border:1px solid var(--line-2);border-radius:4px 14px 14px 14px;padding:8px 12px;max-width:82%} .mrow.mine .bub{background:var(--accent-soft);border-color:transparent;border-radius:14px 4px 14px 14px} .bub .bh{font-size:12px;color:var(--ink-3);margin-bottom:2px} .bub .bt{font-size:15px;white-space:pre-wrap;word-break:break-word} .codebox{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);border-radius:10px;padding:12px} .codebox .mono{font-size:26px;font-weight:600;letter-spacing:.14em} .ct.sel .cnt{color:var(--accent);font-weight:700} /* ===== đợt 2b: nhóm hàng · bảng giá · bán hàng · sổ quỹ ===== */ .modtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 4px} .brtag{margin-left:auto;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:4px 11px} /* THÊM 12/11/2026 — nút chọn nhiều chi nhánh ở các màn CHỈ XEM */ .brpickbtn{font-size:12px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 11px;cursor:pointer} .brtag+.brpickbtn{margin-left:0} .brpickbtn.on{color:var(--accent);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent)} .vwnote{margin:0 0 10px} .vwnote b{color:var(--ink)} /* nhãn phạm vi cho ô số trộn hai nguồn (tồn kho vs doanh thu) — AGENTS.md điều 12 */ .vwscope{display:block;font-size:11px;line-height:1.35;color:var(--muted);margin:6px 0 10px} .alertbar{display:block;width:100%;text-align:left;background:var(--wait-soft);color:var(--wait);border:1px solid color-mix(in srgb,var(--wait) 30%,transparent);border-radius:12px;padding:11px 14px;font-size:14px;line-height:1.4;margin-bottom:12px} .alertbar b{color:var(--wait)} .alertbar.draft{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)} .alertbar.draft b{color:var(--accent)} .stat.warn .n{color:var(--wait)} .gtag.low{background:var(--wait-soft);color:var(--wait)} .pst.low{color:var(--wait)} /* nhóm hàng */ .pgbar{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;margin-bottom:10px} .pgcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13.5px} .pgcrumb .cs{color:var(--ink-3)} .crumb{background:none;border:0;padding:3px 5px;border-radius:7px;color:var(--ink-2);font-weight:600;font-size:13.5px} .crumb.on{color:var(--accent);background:var(--accent-soft)} .chips.pgk{margin-top:8px} .chips.pgk .chip b{margin-left:5px;color:var(--ink-3);font-weight:600} .pgrow.lv2{padding-left:14px} .pgrow.lv3{padding-left:28px} .linkbtn+.linkbtn{margin-left:8px} /* bảng danh mục: điện thoại 3 cột, máy tính 6 cột */ .ptab{display:flex;flex-direction:column;gap:8px} .phead{display:none} .pcol{display:none} .pset .pin{width:100%;text-align:right} .pr .pset{flex:none} .psr{align-items:center} .psr.dirty{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .savebar{position:sticky;bottom:78px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:14px;box-shadow:var(--shadow);font-size:14px;font-weight:600} .savebar.off{display:none} .savebar .actions{margin:0} .chkline{display:flex!important;align-items:center;gap:9px;font-weight:600;font-size:14.5px;color:var(--ink)} .chkline input{width:20px;height:20px;min-height:auto;flex:none} /* dòng hàng khi lập phiếu */ .lnm .idel{float:right;margin-left:8px;background:none;border:0;color:var(--ink-3);padding:2px} .lnstock{display:inline-block;margin-left:8px;font-style:normal;font-size:12px;font-weight:600;color:var(--ok)} .lnstock.bad{color:var(--bad)} .lnstock.last{color:var(--ink-3);display:block;margin:2px 0 0} .lnstock.last.up{color:var(--bad)} .lnstock.last.down{color:var(--ok)} .qstep{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface);flex:none} .qstep .qb{width:38px;height:40px;border:0;background:var(--surface-2);font-size:19px;font-weight:700;color:var(--ink-2);line-height:1} .qstep .qin{width:58px;border:0!important;border-radius:0!important;text-align:center!important} .ckwrap{display:inline-flex;align-items:center;gap:2px;flex:none} .ckwrap .ckin{width:48px;padding:8px 5px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:var(--mono);text-align:right;background:var(--surface);color:var(--ink)} .ckwrap .ckb{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);border-radius:8px;width:30px;height:38px;font-size:13px;font-weight:700;padding:0} .ckwrap .ckin.wide{width:92px} .lnf{flex-wrap:wrap} .tot.big{border-top:2px solid var(--line);padding-top:12px} .tot.big b{font-size:21px;color:var(--accent)} .bigmoney{font-size:22px!important;font-weight:700;font-family:var(--mono);text-align:right} button.rowline{cursor:pointer} button.rowline:hover{background:var(--surface-2)} @media (min-width:900px){ body.modon .wrap{max-width:1180px} body.modon .top-in{max-width:1180px} .ptab{gap:0;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;overflow:hidden} .phead{display:grid;grid-template-columns:120px minmax(0,1fr) 170px 130px 130px 110px;gap:12px;align-items:center; padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line-2);font-size:12.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em} .phead span:nth-child(n+4){text-align:right} .ptab .pr{grid-template-columns:120px minmax(0,1fr) 170px 130px 130px 110px;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:10px 14px} .ptab .pr:last-child{border-bottom:0} .ptab .pr:hover{background:var(--surface-2)} .ptab .pmeta{display:none} .pcol{display:block;text-align:right;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pcol.pgc{text-align:left;font-size:13px;color:var(--ink-3)} .pstab .phead{grid-template-columns:120px minmax(0,1fr) 130px 130px 160px} .pstab .pr{grid-template-columns:120px minmax(0,1fr) 130px 130px 160px} .pstab .phead span:nth-child(n+3){text-align:right} .sheet-card{max-width:720px} .savebar{bottom:16px} } @media (max-width:899px){ .pstab .pcol{display:none} } /* ===== in phiếu ===== */ #printroot{display:none} .ptpl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px} .pcard{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 12px} .pcard b{display:block;font-size:14.5px} .pcard span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.35} .pcard.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)} .pcard.on b{color:var(--accent)} .pprev{overflow:hidden;background:var(--surface-2);border-radius:12px;padding:12px} .ppaper{background:#fff;color:#111;margin:0 auto;box-shadow:0 2px 12px rgba(0,0,0,.18)} .ppaper.a4{width:794px;padding:34px 38px} .ppaper.a5{width:559px;padding:24px 26px} .ppaper.a4.land{width:1123px} .ppaper.a5.land{width:794px;padding:26px 30px} .pprev .ppaper{transform-origin:top left;margin:0} .psheet{font-family:var(--font);color:#111;font-size:13px;line-height:1.4} .psheet .prhead{display:flex;gap:14px;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:10px} .psheet .prlogo{height:46px;width:auto;flex:none} .psheet .prco{flex:1 1 auto;min-width:0} .psheet .prco b{display:block;font-size:15px;text-transform:uppercase} .psheet .prco span{display:block;font-size:12px;color:#333} .psheet .prno{text-align:right;flex:none} .psheet .prno b{display:block;font-size:17px;letter-spacing:.02em} .psheet .prno span{display:block;font-size:12px;color:#333} .psheet .prparty{margin:12px 0 10px;font-size:13px} .psheet .prparty div{margin-bottom:3px} .psheet table{width:100%;border-collapse:collapse;font-size:12.5px} .psheet .prtab th,.psheet .prtab td{border:1px solid #999;padding:5px 7px;vertical-align:top} .psheet .prtab th{background:#eee;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em} .psheet .prtab td.c,.psheet .prtab th.c{text-align:center} .psheet .prtab td.r,.psheet .prtab th.r{text-align:right;font-variant-numeric:tabular-nums} .psheet .prtab td.b{font-weight:700} .psheet .prtab td.mono{font-family:var(--mono);font-size:11.5px} .psheet .prpic{width:66px} .psheet .prpic img{width:56px;height:56px;object-fit:contain;display:block;margin:0 auto} .psheet .prnopic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px dashed #bbb;color:#bbb;font-size:9px;line-height:1.2;text-align:center;margin:0 auto;box-sizing:border-box;padding:3px} .psheet .prtot{width:auto;margin:8px 0 0 auto;min-width:290px} .psheet .prtot td{padding:4px 7px;border-bottom:1px solid #ddd} .psheet .prtot tr.b td{font-weight:700;font-size:14px;border-bottom:2px solid #111} .psheet .prtot td.r{text-align:right;font-variant-numeric:tabular-nums} .psheet .prwords{margin-top:8px;font-size:12.5px} .psheet .prwords i{color:#555} .psheet .prbank{margin-top:4px;font-size:12px;color:#333} .psheet .prfoot{margin-top:10px;font-size:11.5px;color:#444;font-style:italic;border-top:1px dashed #bbb;padding-top:6px} .psheet .prsign{display:flex;gap:10px;margin-top:18px;text-align:center} .psheet .prsign div{flex:1} .psheet .prsign b{display:block;font-size:12.5px} .psheet .prsign i{display:block;font-size:11px;color:#555} .psheet .prsign .prnm{display:block;margin-top:44px;font-size:12.5px;font-weight:600} .pin.nogia{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;background:var(--surface-2);border:1px dashed var(--line-2)} .fstep{border:1px solid var(--line-2);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--surface-2)} .fsh{display:flex;align-items:center;gap:10px} .fsh .n{width:26px;height:26px;flex:none;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center} .fsn{flex:1 1 auto;min-width:0;border:1px solid var(--line-2);border-radius:9px;padding:8px 10px;font-size:15px;font-weight:600;background:var(--surface);color:var(--ink)} .fsb{display:flex;gap:4px;flex:none} .stepper{display:flex;gap:6px;margin-top:12px;overflow-x:auto;padding-bottom:4px} .stp{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:74px;text-align:center} .stp .n{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);color:var(--muted);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center} .stp .l{font-size:11px;color:var(--muted);line-height:1.25} .stp.done .n{background:var(--ok);border-color:var(--ok);color:#fff} .stp.done .l{color:var(--ink)} .stp.now .n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .stp.now .l{color:var(--accent);font-weight:700} .brpick{display:flex;flex-wrap:wrap;gap:8px} .brchk{display:flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:14px} .brchk input{width:18px;height:18px;accent-color:var(--accent)} .brchk:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-weight:600} .pqrow{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line-2);cursor:pointer} .pqrow:last-child{border-bottom:0} .pqrow input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--accent)} .pqrow b{display:block;font-size:15px;font-weight:600;line-height:1.35} .pqrow i{display:block;font-size:12.5px;color:var(--muted);font-style:normal;margin-top:2px} .pqrow i.pqwarn{color:var(--bad);font-weight:600} .gtab.ltab td,.gtab.ltab th{font-size:13px;white-space:nowrap} .gtab.ltab td.w2 b{display:block;font-weight:600} .gtab.ltab td.w2 span{display:block;font-size:11.5px;color:var(--muted)} .gtab.ltab td,.gtab.ltab th{padding-left:10px;padding-right:10px} .gtab.ltab td.c0 b{display:block} .gtab.ltab td.c0 span{display:block;font-size:11.5px;color:var(--muted)} .tkgoods{display:flex;flex-direction:column;gap:2px} .tkg{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-2)} .tkg:last-child{border-bottom:0} .tkgimg{width:56px;height:56px;object-fit:contain;border-radius:8px;background:var(--surface-2);display:block} .tkgno{width:56px;height:56px;border-radius:8px;border:1px dashed var(--line-2);color:var(--muted);font-size:9px;line-height:1.2;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;box-sizing:border-box} .tkgm{min-width:0;display:flex;flex-direction:column;gap:2px} .tkgm b{font-size:12px;color:var(--accent)} .tkgm span{font-size:14px;font-weight:600;line-height:1.3} .tkgq{font-size:20px;font-weight:700;text-align:right;white-space:nowrap} .tkgq i{display:block;font-size:11px;font-weight:500;color:var(--muted);font-style:normal} .repmnu button{min-height:66px} .dlg-card.sure h4{color:var(--bad)} .psheet .prtab th.prstt,.psheet .prtab td:first-child{width:34px} .psheet .prtab th.prdvt{width:52px} .psheet .prtab th.prsl{width:56px} .psheet .prtab th.prchk{width:92px} .psheet .prtab td.prchk{height:26px} .psheet .prtab th.prnote{width:150px} .psheet .prtab tr.prsum td{background:#f4f4f4;font-size:12.5px} .psheet .prdot{color:#999;letter-spacing:1px} .psheet .prby{float:right;font-size:12px;color:#333} .psheet.prnp .prtab td{padding:7px} .psheet.prnp .prsign{margin-top:22px} .psheet .prlien{text-align:right;font-size:11px;color:#666;margin-bottom:4px} @media print{ body>*{display:none!important} #printroot{display:block!important;background:#fff} .ppage{page-break-after:always} .ppage:last-child{page-break-after:auto} .psheet{font-size:12.5px} /* đơn dài sang trang 2: lặp lại dòng tiêu đề bảng, không cắt đôi dòng hàng, không để khối tổng tiền hay ô ký tên rơi sang tờ giấy trống */ .psheet .prtab thead{display:table-header-group} .psheet .prtab tfoot{display:table-footer-group} .psheet .prtab tr,.psheet .prtab td,.psheet .prtab th{page-break-inside:avoid;break-inside:avoid} .psheet .prtab tr.prsum{page-break-before:avoid;break-before:avoid} .psheet .prhead,.psheet .prparty{page-break-inside:avoid;break-inside:avoid} .psheet .prtot{page-break-inside:avoid;break-inside:avoid;page-break-before:avoid;break-before:avoid} .psheet .prwords,.psheet .prbank,.psheet .prfoot{page-break-inside:avoid;break-inside:avoid} .psheet .prsign{page-break-inside:avoid;break-inside:avoid} .psheet .prsign div{page-break-inside:avoid;break-inside:avoid} } /* bảng giá nhiều cột */ .gwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border:1px solid var(--line-2);border-radius:14px} .gtab{border-collapse:separate;border-spacing:0;width:100%;font-size:14px} .gtab th,.gtab td{padding:8px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap;background:var(--surface)} .gtab thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em;text-align:right} .gtab th.c0,.gtab td.c0{position:sticky;left:0;z-index:3;text-align:left;min-width:180px;max-width:230px;border-right:1px solid var(--line)} .gtab thead th.c0{z-index:4} .gtab th.edit{color:var(--accent)} .gtab td.c0 b{font-family:var(--mono);font-size:12.5px;color:var(--accent);display:block} .gtab th.c0 span,.gtab td.c0 span{display:block;font-weight:500;font-size:13px;color:var(--ink);white-space:normal;line-height:1.3;text-transform:none;letter-spacing:0} .gtab th.c0 span{color:var(--ink-3);font-size:11px} .gtab td.num,.gtab th.num{text-align:right;font-variant-numeric:tabular-nums} .gtab td.muted{color:var(--ink-3)} .gtab tbody tr:last-child td{border-bottom:0} .gin{width:120px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;text-align:right;font-family:var(--mono);font-size:14px;background:var(--surface);color:var(--ink)} .gin.inherit{color:var(--ink-3);border-style:dashed;background:var(--surface-2)} .gin.dirty{border-color:var(--accent);color:var(--accent);font-weight:700;background:var(--accent-soft)} .gin:focus{border-color:var(--accent);color:var(--ink)} .stats.big .stat .n{font-size:22px} .readout{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:10px 12px;min-height:44px;display:flex;align-items:center;justify-content:flex-end;font-family:var(--mono);font-weight:600} .optbox{display:flex!important;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px;background:var(--surface)} .optbox input{margin-top:3px;width:20px;height:20px;flex:none} .optbox b{display:block;font-size:14.5px} .optbox i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.4} .gtab tr.rowclick{cursor:pointer} .gtab tr.rowclick:hover td{background:var(--surface-2)} .gtab tr.sumrow td{background:var(--surface-2);font-weight:700;border-top:2px solid var(--line)} .pthumb{width:44px;height:44px;object-fit:contain;background:var(--surface-2);border-radius:9px;flex:none} .rowline .pin{width:120px} /* hàng nút phụ: không kéo giãn hết chiều ngang */ .actions.left{justify-content:flex-start} .actions.left .btn{flex:0 0 auto} .savebar{position:fixed;left:16px;right:16px;bottom:92px;max-width:728px;margin:0 auto} @media (min-width:900px){ body.modon .savebar{max-width:1148px} } .panebar,.filters .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;mask-image:linear-gradient(90deg,#000 92%,transparent)} .panebar::-webkit-scrollbar,.filters .chips::-webkit-scrollbar,.stages.strip::-webkit-scrollbar{display:none} .panebar .chip,.filters .chips .chip{flex:none;white-space:nowrap} .panebar{margin:2px 0 6px} .pnsub{font-size:13px;margin:0 0 12px} .stages.strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 10px} .stages.strip .stage{flex:none;flex-direction:row;align-items:baseline;gap:6px;padding:7px 12px;border-radius:999px} .stages.strip .stage .n{font-size:15px} .frow.mini{gap:8px}.frow.mini .field select{min-height:38px;padding-top:6px;padding-bottom:6px;font-size:14px} #view{min-height:100vh} .fabmenu{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .fabmenu .fm{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);min-height:74px} .fabmenu .fm b{font-size:15px}.fabmenu .fm span{font-size:12px;color:var(--muted)} .fmsec{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:14px 2px 8px} @media (min-width:700px){.panebar{flex-wrap:wrap;overflow:visible;mask-image:none}} .nbcard{background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:14px 16px;margin-bottom:12px} .nbt{font-weight:700;font-size:15px;margin-bottom:10px} .nbparty{min-height:56px} .nbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:12px} .nbgrid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:8px 0} .nbl{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:var(--surface-2)} .nbl1{display:flex;justify-content:space-between;align-items:flex-start;gap:8px} .nbst{display:inline-block;font-size:12px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-3);margin-left:4px} .nbst.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))} .nbl2{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin-top:8px} .nbl2>div{display:flex;flex-direction:column;gap:4px} .nbk{font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em} .nbl2 .pin{width:130px} .nbamt{margin-left:auto;text-align:right}.nbamt b{font-size:17px;line-height:40px} .nbnet{text-align:right}.nbnet b{font-size:15px;line-height:40px;font-family:var(--mono);color:var(--ink-3);font-weight:600} .nbnet b.on{color:var(--accent);font-weight:800} .nbadd{width:100%;min-height:46px;border:1.5px dashed var(--accent);border-radius:12px;background:transparent;color:var(--accent);font-weight:700;font-size:15px;margin-top:4px} .nbclr{color:var(--bad);margin-top:10px;font-size:13px} .nbfoot{position:sticky;bottom:-1px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;margin:0 -2px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 -6px 18px rgba(0,0,0,.08)} .nbfoot b{font-size:20px}.nbfoot .btn{min-width:170px} .nbl2 input{padding:8px 10px;height:42px;border:1px solid var(--line);border-radius:9px;font-size:15px;font-family:var(--mono);text-align:right;background:var(--surface);color:var(--ink);min-width:0;box-sizing:border-box} .nbl2 .qstep input{border:0!important;text-align:center;height:40px} .nbl2 .ckwrap .ckin{height:42px}.nbl2 .ckwrap .ckb{height:42px} .nbl2 .pin.nogia{display:inline-flex;align-items:center;height:42px;color:var(--ink-3)} .modepick{display:grid;gap:8px} .modepick .mp{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);cursor:pointer} .modepick .mp:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));box-shadow:0 0 0 1px var(--accent) inset} .modepick .mp input{width:20px;height:20px;flex:none} .modepick .mp b{display:block;font-size:15px}.modepick .mp i{font-style:normal;font-size:12.5px;color:var(--muted)} .modetag{display:inline-block;margin-top:4px;font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)} .rowline .thumbs{margin-top:6px} .rowline .thumbs .th{width:70px;height:70px} .grabbox{border:1px dashed var(--line-2);border-radius:12px;padding:10px 12px 2px;margin-top:4px} .wm{border:1px dashed var(--line-2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px} .wmck{display:flex;align-items:center;gap:10px;font-weight:600;padding:8px 10px;border:1px solid var(--line-2);border-radius:10px} .wmck input{width:20px;height:20px} .wsub{display:none;padding:2px 2px 4px 12px;border-left:3px solid var(--accent)} .wm:has(#wmThu:checked) .wsub-thu,.wm:has(#wmThue:checked) .wsub-thue{display:block} .dlg-card:has(input[name="dPay"][value="datthu"]:checked) .wsub-pay{display:block} /* ô nhập nhà xe mới chỉ hiện khi chọn "Bên khác, nhập tay" (hoặc khi chưa lưu nhà xe nào) */ .dlg-card.nxmoi .wsub-nx{display:block} .ckline{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px} .ckline input{width:20px;height:20px;flex:none} .wmsum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .wmsum>div{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column} .wmsum .l{font-size:12px;color:var(--muted)} body.ro .comp,body.ro #fabNew,body.ro [data-act],body.ro [data-wact],body.ro [data-boact],body.ro #cAddBtn,body.ro #ctEdit,body.ro .picker{display:none!important} .pqrow.pqoff{opacity:.45} /* ---- TINH CHỈNH GIAO DIỆN 27/09/2026: hết nhảy chữ, hết cắt chữ, các ô cùng cỡ ---- */ /* tên người dùng dài thì cắt có dấu ba chấm, không tràn ra mép */ .me{text-overflow:ellipsis} .me>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* thanh dưới: mỗi nhãn một dòng, không xuống dòng làm cao thấp lệch nhau */ .tab>span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} @media (max-width:420px){.tab{font-size:10.5px;padding:6px 2px}.tab svg{width:20px;height:20px}} /* hàng nút lọc: cho xuống dòng thay vì cuộn ngang làm mờ mất chữ nút cuối */ .panebar,.filters .chips{flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none;row-gap:6px} .panebar .chip,.filters .chips .chip{flex:0 0 auto} /* ô số liệu: cùng một cỡ chữ, số dài tự co, ô lẻ cuối chiếm trọn hàng cho cân */ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:640px){.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}} .stat{min-width:0} .stat .n{font-size:clamp(15px,4.7vw,25px);white-space:nowrap;letter-spacing:-.01em} .stat .l{line-height:1.3} @media (max-width:640px){.stats>.stat:last-child:nth-child(odd){grid-column:1 / -1}} /* nhãn nhỏ (loại khách, trạng thái): một dòng, dài thì ba chấm — không vỡ chữ giữa từ */ .tag{white-space:nowrap;max-width:min(62vw,240px);overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle;line-height:1.7} /* mã phiếu không bị ngắt làm đôi giữa dòng */ .mono{white-space:nowrap} .gtab .mono,.psheet .mono{white-space:normal} /* mọi con số tiền thẳng cột, không nhảy khi đổi số */ .money,.num,.stat .n,.stage .n,.party,.rowline b{font-variant-numeric:tabular-nums} /* mỗi cụm "· abc" đi liền một khối, không để dấu chấm giữa đứng trơ cuối dòng */ .seg{white-space:nowrap} /* tên khách trên thẻ phiếu: một dòng, dài thì ba chấm — mã phiếu xuống dòng dưới cho đều */ .tk .t1{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk .t2{display:block} /* tên trong danh sách: một dòng, dài thì ba chấm, để các hàng cao bằng nhau */ .ct .nm,.ct .meta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ct{align-items:center} /* hai nút cạnh nhau cao bằng nhau dù chữ dài ngắn khác nhau */ .actions{align-items:stretch} .actions .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center} /* số tiền bên phải mỗi hàng: không tràn khỏi thẻ, tên bên trái tự co lại */ .ct>*{min-width:0} .ct .cnt,.ct>span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right} /* cột phải của dòng sổ quỹ: gọn trong hai dòng, tên quỹ không kéo dài ra */ .rowline>span:last-child{max-width:44%;min-width:0} .rowline>span:last-child>br+*,.rowline .tag{max-width:100%} /* nhãn trạng thái bên phải thẻ phiếu: luôn nằm gọn trong thẻ, không tràn ra ngoài */ .tk{grid-template-columns:auto minmax(0,1fr) auto;align-items:start} .tk>span:nth-child(2){min-width:0} .tk .right{max-width:34vw;min-width:0;align-items:flex-end} .tk .right .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk .t1{flex-wrap:nowrap;overflow:hidden} .tk .t2{overflow-wrap:anywhere} .tk .t2{flex-wrap:wrap} /* nút lọc gọn hơn trên điện thoại để bớt số hàng */ @media (max-width:440px){.chip{padding:5px 10px;font-size:12.5px}.chips{gap:5px}} /* nút phụ vẫn phải nhìn ra là nút: có viền rõ */ .btn.ghost{border:1px solid var(--line);background:var(--surface)} /* dòng trong sổ quỹ: chữ dài thì xuống dòng, không cắt mất chữ */ .rowline{align-items:flex-start;flex-wrap:wrap} .rowline>span:first-child{flex:1 1 60%;min-width:0;overflow-wrap:anywhere} .rowline>span:last-child{flex:0 0 auto} /* nút nhỏ: nới vùng bấm cho vừa đầu ngón tay */ .linkbtn{min-height:32px;padding:4px 8px;display:inline-flex;align-items:center} .chkline{min-height:36px;display:flex;align-items:center;gap:8px} input[type=checkbox]{width:22px;height:22px;cursor:pointer} .sheet-head .x,.dlg-card .x{min-width:36px;min-height:36px} /* ---- báo cáo: bảng không để tên dài đè lên cột số ---- */ .gtab td.c0{white-space:normal;overflow-wrap:anywhere} .gtab td.c0 b{display:block} .gtab.txt td.c0 b{font-family:inherit;font-size:14px;color:var(--ink);font-weight:600} @media (max-width:520px){ .gtab th.c0,.gtab td.c0{min-width:118px;max-width:156px} .gtab th,.gtab td{padding:7px 8px;font-size:13px} .gtab thead th{font-size:11px} } /* ---- báo cáo: biểu đồ, mũi tên tăng giảm, tiêu đề có nút tải ---- */ .chartbox{margin:2px 0 0} .chart{width:100%;height:120px;display:block} .chartx{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-top:4px} .dlt{font-weight:700;font-size:11.5px;margin-left:4px;white-space:nowrap} .dlt.up{color:var(--ok)} .dlt.down{color:var(--bad)} .dlt.eq{color:var(--ink-3)} .sechd{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .sechd .sec{margin-bottom:6px} .qlist{padding:4px 0} .qrow{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line-2)} .qrow:last-child{border-bottom:0} .qrow.sum{background:var(--surface-2);border-radius:10px;margin-top:4px} .qn{min-width:0;flex:1} .qn>b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .qn .qio b{display:inline;font-weight:700} .qn span{display:block;font-size:11.5px;color:var(--ink-3)} .qn .qio{font-size:12px;margin-top:2px} .qv{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .qv span{display:block;font-size:11px;font-weight:500;color:var(--ink-3)} /* Đổi tên 31/10/2026: luật này là THANH TIẾN ĐỘ, trước đặt tên `.bar` trùng với thanh công cụ ở dòng 117 và đè mất nó trên toàn app (19 thanh công cụ bị ép cao 4px, cắt mất ô tìm kiếm và các nút bên trong). Chỉ dùng ở js/09-congno-baocao.js. */ .tiendo{display:block;height:4px;border-radius:999px;background:var(--line-2);margin-top:5px;overflow:hidden} .tiendo i{display:block;height:100%;border-radius:999px} .stat.ok .n{color:var(--ok)} .repmnu button .mi{font-size:20px} /* khoảng cách trong khối cho thoáng và đều nhau */ .sec{margin:16px 0 8px} .box+.box{margin-top:10px} /* ===== Thanh nhóm hàng BA HÀNG + thanh tìm kiếm — Chủ Công chốt 31/10/2026 ===== Làm theo bản mẫu cộng tác viên: khu vực › nhóm lớn › nhóm nhỏ, ba hàng luôn hiện. `.thanhtim` sinh ra vì trong tệp này có HAI luật `.bar` trùng tên: luật thanh công cụ (dòng 117) bị luật thanh tiến độ 4px (dòng 834) đè mất, nên ô tìm kiếm bị ép cao 4px và `overflow:hidden` cắt mất. Đặt lớp riêng để khỏi đụng luật cũ. */ .bar.thanhtim{display:flex;height:auto;overflow:visible;background:none;border-radius:0; gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 12px} /* Ô tìm kiếm giãn hết chỗ còn lại nhưng KHÔNG chiếm trọn hàng, để nút "Thêm" nằm cùng hàng cho gọn (Chủ Công chốt 01/11/2026). Hàng nào chỉ có ô tìm kiếm thì nó vẫn rộng hết bề ngang nhờ flex-grow. Cao 44px cho khớp chiều cao nút (nút giữ `min-height:44px` của luật .btn — mức bấm tối thiểu trên điện thoại, không hạ xuống 40px). */ .bar.thanhtim .search{flex:1 1 150px;width:auto;min-width:0;height:44px} .bar.thanhtim>.btn{flex:0 0 auto;white-space:nowrap} .pgbar .pgrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-top:8px} .pgbar .pgrow::-webkit-scrollbar{display:none} .pgbar .pgrow:first-child{margin-top:0} /* Nút phải giữ một dòng, không co lại. Luật nowrap sẵn có chỉ áp cho `.panebar .chip` và `.filters .chips .chip`, không với tới `.pgbar`, nên nút bị bóp hẹp và chữ xuống dòng (Chủ Công bắt lỗi 31/10 13:32). */ .pgbar .pgrow .chip{flex:0 0 auto;white-space:nowrap} .pgbar .pgrow .chip b{margin-left:5px;color:var(--ink-3);font-weight:600} .pgbar .chip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)} .pgbar .chip.on b{color:var(--surface);opacity:.65} .pgbar .pgduong{margin-top:8px} /* ---- dòng hàng trong hoá đơn, xếp theo kiểu KiotViet (04/11/2026) ---- */ .ln.hd2{display:flex;gap:10px;align-items:flex-start;padding:11px 0} .lnimg{width:46px;height:46px;flex:0 0 46px;border-radius:8px;object-fit:cover; background:var(--line-2);border:1px solid var(--line-2)} .lnimg.none{display:block} .lnbody{flex:1 1 auto;min-width:0} .lnten{font-size:14.5px;font-weight:650;line-height:1.3;color:var(--ink);word-break:break-word} .lnma{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:2px} .lngia{font-size:13.5px;color:var(--ink-2);margin-top:4px} .lngia s{color:var(--ink-3)} .lngiam{display:inline-block;background:#fdeaf1;color:#c2185b;border-radius:5px; padding:1px 6px;font-size:12px;font-weight:600;margin-left:4px} .ln.hd2 .lntt{flex:0 0 auto;align-self:center;font-size:15px;color:var(--ink);white-space:nowrap} /* ---- sổ công nợ kiểu KiotViet (04/11/2026) ---- */ .box.nosum{padding:14px 16px} .nohd{display:flex;align-items:center;justify-content:space-between;gap:12px} .nolb{font-size:15px;font-weight:650;color:var(--ink)} .nobal{font-size:22px;white-space:nowrap} .nolist{display:flex;flex-direction:column;gap:8px;margin-top:10px} .noit{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;width:100%; background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px; text-align:left;font:inherit;color:inherit} .noit.rowclick{cursor:pointer} .noit.rowclick:active{background:var(--line-2)} .noleft{min-width:0} .nocode{font-family:var(--mono);font-size:14.5px;font-weight:650;color:var(--ink);word-break:break-all} .nodate{font-size:12.5px;color:var(--ink-3);margin-top:2px} .noright{text-align:right;flex:0 0 auto} .noamt{font-size:15.5px;white-space:nowrap} .notag{display:inline-block;margin-top:4px;background:#e6f6ec;color:#1b7a3d; border-radius:6px;padding:2px 8px;font-size:12px;font-weight:600} /* ===== DÒNG HÀNG BẤM ĐƯỢC (05/11/2026) ===== Dòng hàng trên hoá đơn và phiếu giao nay là