@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{--red:#d93836;--ink:#20232a;--muted:#8b8f99;--line:#e9e9ee;--bg:#f7f8fa}*{box-sizing:border-box}body{margin:0;font:14.5px 'Be Vietnam Pro',Arial,sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}button:disabled{opacity:.55;cursor:wait}button,a,input,select,textarea{outline-color:var(--red)}button{transition:background .15s,transform .15s}input,select,textarea{color:var(--ink)}button:hover{filter:brightness(.97)}.app-shell{display:flex;min-height:100vh}.sidebar{width:238px;background:#fff;border-right:1px solid var(--line);position:fixed;height:100vh;padding:35px 21px 0;display:flex;flex-direction:column;z-index:20}.brand{padding:0 13px 41px}.brand>span{font-size:43px;font-style:italic;font-weight:800;letter-spacing:-3px;line-height:1.2}.brand-dot{color:var(--red)}.brand small{display:block;font-size:7.5px;letter-spacing:1.3px;font-weight:700;margin-top:7px}.nav-label{color:#9a9ca5;font-size:10px;font-weight:600;letter-spacing:1.2px;margin:0 12px 15px}nav{display:grid;gap:7px}nav button{border:0;background:transparent;color:#707581;justify-content:flex-start;border-radius:8px;padding:14px 15px;font-size:13px;font-weight:500}nav button.active{color:var(--red);background:#fff0ee;font-weight:600}.nav-count{margin-left:auto;font-size:11px;border-radius:4px;background:#ffdcd9;padding:2px 6px}.side-bottom{margin-top:auto}.trial{border:1px solid var(--line);border-radius:9px;display:flex;gap:10px;align-items:center;padding:14px 11px;margin-bottom:20px;color:#6b7280}.trial b{font-size:11px;color:#555a65}.trial p{font-size:10px;margin:4px 0 0}.profile{border-top:1px solid var(--line);padding:20px 0;display:flex;align-items:center;gap:11px}.profile-icon,.user-dot{width:37px;height:37px;border-radius:50%;background:#25282d;color:white;display:grid;place-items:center;font-weight:600}.profile b{font-size:12px}.profile small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.profile>svg{margin-left:auto;color:#a1a4ad}main{margin-left:238px;width:calc(100% - 238px)}header{height:75px;display:flex;align-items:center;gap:21px;padding:0 38px;background:#fff;border-bottom:1px solid var(--line)}.breadcrumb{display:flex;gap:13px;align-items:center;font-size:11px;color:#989ba4}.breadcrumb b{color:#464b54;font-weight:500}.header-date{margin-left:auto;color:#8b8e98;font-size:11px}.user-dot{width:31px;height:31px;font-size:12px;background:#f2ebe8;color:#896b5d}.content{padding:37px 38px 19px;max-width:1800px;margin:auto}.page-title{display:flex;justify-content:space-between;align-items:center;gap:21px;margin-bottom:30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#a2a4ac}h1{font-size:31px;letter-spacing:-1.1px;line-height:1.35;margin:9px 0 10px;font-weight:700}.page-title p,.section-heading p{font-size:12px;color:#8a8e98;margin:0;line-height:1.7}.primary{background:var(--red);color:#fff;border:1px solid var(--red);border-radius:7px;padding:12px 16px;font-size:12px;font-weight:600;box-shadow:0 3px 5px #d9383614;white-space:nowrap}.secondary{background:#fff;border:1px solid #dedfe5;border-radius:7px;padding:11px 15px;font-size:12px;font-weight:500;white-space:nowrap}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:34px}.stat{padding:19px 22px 20px;border:1px solid var(--line);border-radius:10px;background:white}.stat-label{display:flex;align-items:center;justify-content:space-between;color:#7f8490;font-size:12px}.stat-icon{width:33px;height:33px;display:grid;place-items:center;border-radius:8px}.red{background:#fff0ee;color:#dc6e65}.orange{background:#fff5e9;color:#dc9a4a}.purple{background:#f4f0fc;color:#9b80d3}.green{background:#eef7f3;color:#65a384}.stat strong{display:block;font-size:34px;line-height:1.4;font-weight:600;letter-spacing:-1px;margin-top:4px}.stat small{display:block;color:#a2a5ad;font-size:10px;margin-top:5px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.section-heading h2{font-size:17.5px;letter-spacing:-.3px;margin:0 0 7px}.pill{display:inline-block;font-size:10px;letter-spacing:0;font-weight:500;color:#89909b;background:#eceef1;border-radius:5px;padding:5px 7px;margin-left:8px;vertical-align:middle}.text-btn{border:0;background:none;color:#747985;font-size:11px;padding:5px 0}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.search{display:flex;align-items:center;gap:10px;background:white;border:1px solid #e3e5ea;border-radius:7px;padding:0 13px;width:330px;height:40px;color:#a1a5af}.search input{width:100%;border:0;background:none;outline:none;font-size:11px}.search input::placeholder{color:#adb0b8}.tool-actions{display:flex;align-items:center;gap:8px}.tool-actions select{height:38px;background:#fff;border:1px solid #e3e5ea;border-radius:6px;padding:0 10px;font-size:11px;color:#858a94}.icon-btn{border:0;background:transparent;color:#989da7;padding:5px;border-radius:5px}.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;align-items:stretch}.column{background:#f0f1f4;border:1px solid #e9eaef;border-radius:9px;padding:0 11px 13px;min-height:310px}.column-head{display:flex;align-items:center;gap:7px;height:53px;padding:0 2px}.column-head b{font-size:11px;font-weight:600}.status-dot{width:7px;height:7px;border-radius:50%;background:#9ca9bb}.working .status-dot{background:#da9e58}.waiting .status-dot{background:#a58cc9}.done .status-dot{background:#79a58d}.column-count{color:#959ba5;border:1px solid #dfe1e7;display:grid;place-items:center;border-radius:4px;min-width:19px;height:18px;font-size:10px}.column-head .icon-btn{margin-left:auto}.cards{display:grid;gap:11px}.job-card{background:white;border-radius:7px;padding:15px 13px 12px;border:1px solid #e7e8ed;box-shadow:0 2px 2px #25282d04;cursor:grab;transition:box-shadow .2s,transform .2s}.job-card:hover{box-shadow:0 5px 15px #25282d0d;transform:translateY(-2px)}.card-top{display:flex;justify-content:space-between;align-items:center;color:#b1b5bd}.priority{padding:4px 6px;font-size:9px;border-radius:4px;font-weight:500;color:#8b92a0;background:#f4f5f7}.priority.high{color:#d77b6e;background:#fdf0ec}.job-card h3{font-size:12px;font-weight:600;line-height:1.8;margin:12px 0 12px}.plate-line{display:flex;align-items:center;gap:5px;font-size:9px;color:#999eaa;flex-wrap:wrap}.plate-line b{color:#6c7380;font-size:10px}.customer-line{font-size:10px;color:#9b9faa;margin:8px 0 15px}.progress{height:3px;background:#f0f1f5;border-radius:4px;margin:15px 0}.progress span{display:block;height:100%;background:#aab6ab;border-radius:4px}.card-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f1f1f5;padding-top:11px;color:#a2a7b1;font-size:9px}.card-bottom>span:first-child{display:flex;align-items:center;gap:5px}.avatar{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#eeeaf4;font-size:7.5px;color:#9883ac}.late{color:#cf6464!important}.empty-column{display:grid;place-items:center;border:1px dashed #dcdfe6;border-radius:7px;min-height:107px;font-size:11px;color:#a7abb5}.board-hint{font-size:10px;color:#a5a8b1;margin:15px 0 28px;line-height:1.8}.board-hint span{font-size:7.5px;color:#bbbfc8;margin-right:5px}.welcome{background:#fff;border:1px solid #e7e8ed;border-radius:9px;display:flex;align-items:center;gap:17px;padding:25px;margin:24px 0}.welcome-icon{height:50px;width:50px;border-radius:10px;background:#fff0ee;color:#d87267;display:grid;place-items:center;flex-shrink:0}.welcome h3{margin:0 0 7px;font-size:14.5px}.welcome p{margin:0;color:#9296a0;font-size:11px;line-height:1.7}.welcome>.secondary{margin-left:auto}footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e4e6ed;margin-top:30px;padding:20px 0 0;color:#a5a9b2;font-size:9px}footer>span{letter-spacing:.5px}.footer-sep{padding:0 10px;color:#d1d3d9}.table-wrap{background:white;border:1px solid var(--line);border-radius:9px;overflow:auto}table{border-collapse:collapse;width:100%;text-align:left;min-width:630px}th{background:#fcfcfd;font-size:11px;color:#989da7;padding:17px 21px;font-weight:500;border-bottom:1px solid var(--line)}td{padding:19px 21px;font-size:12px;border-bottom:1px solid #f1f2f5;color:#858b95}tbody tr:last-child td{border-bottom:0}tbody tr{cursor:pointer}tbody tr:hover{background:#fcfcfd}.table-name{display:flex;gap:13px;align-items:center}.table-name b{font-size:12px;color:#4b515c;font-weight:600}.table-name small{display:block;font-size:10px;margin-top:6px;color:#a1a6b0}.record-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:#f5f0ee;color:#b89988}.record-icon.car{background:#eef1f7;color:#9ca9bd}.note-cell{max-width:230px;overflow:hidden;text-overflow:ellipsis}.empty-table{padding:55px 21px;text-align:center;color:#9ca2ad;font-size:12px}.muted{color:#999faa;font-size:11px}.overlay{position:fixed;inset:0;background:#171d2d66;backdrop-filter:blur(3px);z-index:40;padding:34px 19px;display:flex;justify-content:center;align-items:flex-start;overflow:auto}.dialog{background:white;border-radius:13px;box-shadow:0 20px 90px #15192333;width:580px;max-width:100%;overflow:hidden}.dialog-head{padding:24px 27px 21px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.dialog h2{font-size:21px;margin:9px 0 0;line-height:1.5}.dialog form{padding:24px 27px}.dialog label{display:block;font-size:12px;font-weight:500;margin-bottom:17px}.dialog input,.dialog select,.dialog textarea{display:block;width:100%;border:1px solid #dfe1e7;border-radius:6px;padding:11px 12px;margin-top:8px;background:white;font-size:13px}.dialog textarea{resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dialog-actions{display:flex;gap:11px;justify-content:flex-end;padding-top:20px;border-top:1px solid var(--line);margin-top:24px}.form-help{font-size:11px;line-height:1.8;color:#bf8868;margin:-5px 0 18px}.details>.dialog-actions{margin:0;padding:19px 27px;justify-content:space-between}.detail-body{padding:25px 27px}.detail-body h3{font-size:13px;margin:23px 0 13px}.detail-body p{line-height:1.8;font-size:13px}.detail-body>p>svg{vertical-align:middle;margin-right:6px}.detail-link{display:flex;gap:13px;align-items:center;background:#f7f8fa;border-radius:8px;padding:16px;color:#8e98a5}.detail-link b{font-size:13px;color:#4b525e}.detail-link small{display:block;font-size:11px;margin-top:6px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:23px;margin:24px 0}.detail-grid small{display:block;color:#a0a5af;font-size:11px;margin-bottom:7px}.detail-grid b{font-size:13px;font-weight:500;overflow-wrap:anywhere}.dialog .check-row{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid #eceef1;border-radius:6px;margin-bottom:8px;font-weight:400}.check-row input{width:17px;height:17px;margin:0;accent-color:var(--red)}.checked{text-decoration:line-through;color:#a3a7af}.linked-record{display:flex;width:100%;text-align:left;background:#fafbfc;border:1px solid #ebeef2;border-radius:7px;padding:14px;margin-bottom:8px;color:#989fab;justify-content:flex-start}.linked-record span{flex:1}.linked-record b{font-size:12px;font-weight:500;color:#555e6c}.linked-record small{display:block;font-size:10px;margin-top:6px}.note-text{white-space:pre-wrap;color:#858d9a}.danger{color:#ce6c65}.error{background:#fff0ee;color:#b6473c;padding:13px 16px;border-radius:7px;display:flex;justify-content:space-between;gap:11px;margin-bottom:16px;font-size:13px}.error button{border:0;background:none;color:inherit}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:60;background:#242d29;color:white;box-shadow:0 5px 20px #0002;border-radius:8px;padding:14px 21px;font-size:13px;display:flex;gap:10px;align-items:center}.toast svg{color:#9dc4aa}.loading{text-align:center;color:#959ca9;padding:21px}.mobile-toggle{display:none}.scrim{display:none}
@media(min-width:1500px){.content{padding-top:44px}.job-card{padding:18px}.job-card h3{font-size:14.5px}.plate-line,.customer-line{font-size:11px}.column-head b{font-size:13px}.column{min-height:380px}}@media(max-width:1100px){.sidebar{width:200px;padding-left:14px;padding-right:14px}main{margin-left:200px;width:calc(100% - 200px)}.content{padding:30px 25px}header{padding:0 25px}.board{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:15px}.stats{gap:11px}.stat-label{font-size:11px}.stat-icon{width:27px;height:27px}.welcome{flex-wrap:wrap}.welcome>.secondary{margin-left:62px}h1{font-size:27.5px}}@media(max-width:760px){.sidebar{transform:translateX(-100%);width:238px;transition:transform .2s}.sidebar.open{transform:translateX(0)}.scrim{display:block;position:fixed;inset:0;background:#0005;z-index:19}main{margin-left:0;width:100%}header{height:60px;padding:0 19px;gap:13px}.mobile-toggle{display:flex}.header-date{display:none}.user-dot{margin-left:auto}.content{padding:28px 19px 19px}.page-title{align-items:flex-start;gap:11px;flex-wrap:wrap;margin-bottom:22px}.page-title p{max-width:330px}h1{font-size:27.5px}.page-title .primary{margin-top:5px}.stats{grid-template-columns:repeat(2,1fr);gap:11px;margin-bottom:27px}.stat{padding:16px}.stat strong{font-size:32px}.board{gap:13px}.column{padding:0 8px 10px;min-height:230px}.job-card{padding:13px 11px}.job-card h3{font-size:12px}.plate-line{font-size:10px}.column-head{gap:5px}.column-head b{font-size:10px}.section-heading h2{font-size:15.5px}.section-heading p{font-size:10px}.pill{font-size:9px;padding:4px}.toolbar{gap:8px}.search{width:100%;height:41px}.search input{font-size:11px}.tool-actions select{max-width:115px;font-size:10px}.tool-actions>.icon-btn{display:none}.welcome{padding:18px;gap:13px}.welcome>div{flex:1}.welcome h3{font-size:13px}.welcome>.secondary{margin-left:0}.welcome p{font-size:11px}.board-hint{font-size:9px}footer{gap:16px;align-items:flex-start;flex-wrap:wrap;line-height:1.8}.overlay{padding:16px 11px}.dialog-head{padding:21px}.dialog form,.detail-body{padding:21px}.form-grid{gap:11px}.dialog h2{font-size:20px}.dialog input,.dialog select,.dialog textarea{font-size:17.5px}.toast{width:max-content;max-width:90%;bottom:18px}.breadcrumb{font-size:11px}}

/* ===== Bảng xưởng kiểu Trello (giao diện tối) ===== */
:root{--side:238px;--vb-text:#dee4ea;--vb-muted:#9fadbc;--vb-card:#22272b;--vb-card-hover:#2c333a;--vb-pop:#282e33;--vb-line:#38414a;--vb-blue:#579dff;--vb-head:56px}
@media(max-width:1100px){:root{--side:200px}}
@media(max-width:760px){:root{--side:0px;--vb-head:52px}}
body.board-mode{background:#1d2125}
.board-main{flex:none;margin-left:var(--side);width:max-content!important;min-width:calc(100vw - var(--side));min-height:100vh;background:radial-gradient(1200px 600px at 70% 0%,#5a1414 0%,transparent 60%),linear-gradient(160deg,#1d2125 0%,#16191c 55%,#2a0d0d 100%);background-attachment:fixed;color:var(--vb-text)}
.vb{min-height:100vh}
.vb button{font:inherit;color:inherit}
.vb-head{position:sticky;left:var(--side);top:0;z-index:30;width:calc(100vw - var(--side));height:var(--vb-head);display:flex;align-items:center;gap:15px;padding:0 19px;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #ffffff14}
@media(max-width:760px){.vb-head{left:0;width:100vw;padding:0 11px;gap:8px}}
.vb-head h1{font-size:17.5px;font-weight:800;letter-spacing:.3px;margin:0;color:#fff;white-space:nowrap}
.vb-search{display:flex;align-items:center;gap:8px;background:#ffffff1a;border:1px solid #ffffff22;border-radius:8px;padding:0 11px;height:37px;flex:0 1 320px;min-width:0;color:var(--vb-muted)}
.vb-search input{background:transparent;border:0;outline:0;color:#fff;flex:1;min-width:0}
.vb-search input::placeholder{color:var(--vb-muted)}
.vb-search button{background:none;border:0;padding:0}
.vb-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.vb-members{display:flex;margin-right:4px}.vb-members .avatar{margin-left:-6px;border:2px solid #1d2125}
@media(max-width:760px){.vb-members,.vb-user>span:not(.avatar),.vb-head h1{display:none}.vb-user{padding:3px}}
.vb-icon{background:transparent;border:0;border-radius:8px;width:37px;height:37px;display:inline-flex;align-items:center;justify-content:center;color:var(--vb-text)!important;cursor:pointer;flex:none}
.vb-icon:hover{background:#ffffff1f}.vb-icon.sm{width:30px;height:30px}
.mobile-only{display:none}@media(max-width:760px){.mobile-only{display:inline-flex}}
.vb-user{display:flex;align-items:center;gap:8px;background:#ffffff14;border:0;border-radius:20px;padding:3px 13px 3px 3px;font-size:13px;font-weight:600;cursor:pointer}
.avatar{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:none;letter-spacing:-.3px;user-select:none}
.avatar.more{width:30px;height:30px;background:#454f59;font-size:12px;margin-left:-6px}
.vb-error{position:sticky;left:var(--side);width:calc(100vw - var(--side) - 32px);margin:12px 16px 0;background:#5d1f1a;color:#ffd5d2;border:1px solid #ae2e24;border-radius:8px;padding:11px 15px;display:flex;justify-content:space-between;align-items:center;gap:11px;z-index:5}
@media(max-width:760px){.vb-error{left:0;width:calc(100vw - 32px)}}
.vb-error button{background:none;border:0;cursor:pointer}
.vb-loading{padding:42px;color:var(--vb-muted)}
.vb-canvas{display:flex;align-items:flex-start;gap:13px;padding:15px 17px 25px;width:max-content}
@media(max-width:760px){.vb-canvas{padding:11px 11px 21px;gap:11px}}

/* Cột */
.vb-list{width:272px;flex:none;border-radius:12px;display:flex;flex-direction:column;max-height:calc(100vh - var(--vb-head) - 34px);box-shadow:0 1px 1px #0005,0 0 1px #0006;position:relative}
@media(max-width:760px){.vb-list{width:min(82vw,300px)}}
.vb-list-head{display:flex;align-items:flex-start;gap:4px;padding:11px 6px 6px 13px;position:relative}
.vb-list-head h2{flex:1;margin:0;padding:4px 0;font-size:14.5px;font-weight:700;color:#fff;text-transform:none;line-height:1.35;cursor:pointer;word-break:break-word}
.vb-list-head textarea{flex:1;font:inherit;font-size:14.5px;font-weight:700;background:#22272b;color:#fff;border:2px solid var(--vb-blue);border-radius:6px;padding:3px 6px;resize:none}
.vb-list-head .count{font-size:13px;color:#ffffffaa;padding:5px 4px 0}
.vb-cards{overflow-y:auto;overflow-x:hidden;padding:2px 8px 4px;min-height:8px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:#ffffff33 transparent}
.vb-cards.over{background:#ffffff0d;border-radius:8px}
.vb-list-foot{padding:6px 8px 8px}
.add-card{width:100%;background:transparent;border:0;border-radius:8px;padding:8px;display:flex;align-items:center;gap:6px;justify-content:flex-start!important;color:#ffffffcc!important;cursor:pointer;font-weight:600}
.add-card:hover{background:#ffffff1f}
.vb-list.collapsed{width:48px;max-height:none}
.collapsed-body{display:flex;flex-direction:column;align-items:center;gap:11px;background:none;border:0;padding:13px 0;min-height:200px;cursor:pointer;color:#fff!important}
.collapsed-body .vt{writing-mode:vertical-rl;font-weight:700;font-size:14.5px;white-space:nowrap}
.collapsed-body .count{font-size:13px;opacity:.8}

/* Thẻ xe */
.vb-card{background:var(--vb-card);border-radius:8px;box-shadow:0 1px 1px #091e4240,0 0 1px #091e424f;cursor:pointer;overflow:hidden;color:var(--vb-text);outline:0;border:2px solid transparent;flex:none}
.vb-card:hover{border-color:#ffffff40}
.vb-card:focus-visible{border-color:var(--vb-blue)}
.vb-card.dragging{transform:rotate(3deg);box-shadow:0 12px 24px #000a}
.vb-cover{background:#101214;line-height:0}
.vb-cover img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.vb-card-body{padding:8px 11px 6px}
.vb-title{font-size:14.5px;line-height:1.4;font-weight:500;text-transform:uppercase;word-break:break-word}
.done-ico{color:#4bce97;vertical-align:-3px;margin-right:4px}
.vb-badges{display:flex;flex-wrap:wrap;align-items:center;gap:4px 11px;margin-top:6px;color:var(--vb-muted);font-size:13px;min-height:6px}
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:4px;padding:1px 2px}
.badge.complete{background:#1f845a;color:#fff;padding:1px 5px}
.badge.due.late{background:#ae2e24;color:#fff;padding:1px 5px}
.badge.due.soon{background:#946f00;color:#fff;padding:1px 5px}
.badge.due.ok{background:#1f845a;color:#fff;padding:1px 5px}
.vb-avatars{margin-left:auto;display:flex;gap:2px}
.vb-composer{display:flex;flex-direction:column;gap:6px;background:var(--vb-card);border-radius:8px;padding:8px}
.vb-composer input,.vb-addlist input{background:#1d2125;border:1px solid var(--vb-line);border-radius:6px;padding:7px 10px;color:#fff;outline-color:var(--vb-blue)}
.preview-title{font-size:13px;color:var(--vb-muted);text-transform:uppercase;padding:2px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.end{justify-content:flex-end;margin-top:14px}
.vb-addlist{width:272px;flex:none;background:#ffffff3d;border:0;border-radius:12px;padding:13px;display:flex;align-items:center;gap:6px;justify-content:flex-start!important;color:#fff!important;font-weight:600;cursor:pointer;backdrop-filter:blur(4px)}
.vb-addlist:hover{background:#ffffff52}
.vb-addlist.open{flex-direction:column;align-items:stretch;background:#101204;cursor:default}

/* Nút chung */
.primary-btn{background:var(--vb-blue);color:#1d2125!important;border:0;border-radius:6px;padding:7px 15px;font-weight:700;cursor:pointer}
.primary-btn:disabled{opacity:.5;cursor:not-allowed}
.ghost-btn{background:#ffffff14;border:0;border-radius:6px;padding:6px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--vb-text)!important}
.ghost-btn:hover{background:#ffffff26}
.danger,.pop-item.danger{color:#fd9891!important}
button.danger{background:#ae2e24;color:#fff!important;border:0;border-radius:6px;padding:6px 13px;cursor:pointer}

/* Popover */
.popover{position:absolute;z-index:60;top:100%;left:0;margin-top:6px;width:304px;max-width:calc(100vw - 24px);background:var(--vb-pop);color:var(--vb-text);border-radius:10px;box-shadow:0 8px 24px #000b,0 0 0 1px #ffffff14;padding:13px;display:flex;flex-direction:column;gap:6px;max-height:70vh;overflow:auto;cursor:default}
.popover.right{left:auto;right:12px}
.list-menu{left:auto;right:0;top:40px}
.pop-head{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14.5px;color:var(--vb-muted);position:relative;padding:2px 25px 8px}
.pop-head h3{margin:0;color:#fff;font-size:17.5px}
.pop-close{position:absolute;right:-4px;top:-4px;background:none;border:0;border-radius:6px;width:30px;height:30px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pop-close:hover{background:#ffffff1f}
.pop-item{background:none;border:0;border-radius:6px;padding:8px;display:flex;align-items:center;gap:11px;justify-content:flex-start!important;text-align:left;cursor:pointer;width:100%}
.pop-item:hover{background:#ffffff14}.pop-item.current{background:#579dff22}
.pop-item svg:last-child:not(:first-child){margin-left:auto}
.pop-sub{font-size:13px;font-weight:700;color:var(--vb-muted);margin-top:6px}
.pop-note{color:var(--vb-muted);font-size:13px;margin:0}
.pop-add{display:flex;gap:6px}.pop-add input{flex:1;min-width:0}
.popover input,.small-dialog input,.small-dialog select{background:#1d2125;border:1px solid var(--vb-line);border-radius:6px;padding:7px 10px;color:#fff;outline-color:var(--vb-blue)}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.swatch{width:15px;height:15px;border-radius:4px;display:inline-block;flex:none;border:0}
.swatch.big{width:100%;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;border:2px solid transparent}
.swatch.big.on{border-color:#fff}
.confirm-box{background:#1d2125;border-radius:8px;padding:11px;font-size:13px;line-height:1.5}
.confirm-box div{display:flex;gap:6px;margin-top:8px}
.confirm-box button:not(.danger){background:#ffffff14;border:0;border-radius:6px;padding:6px 11px;cursor:pointer}
.label-row{display:flex;align-items:center;gap:8px}
.label-chip{display:inline-flex;align-items:center;min-height:35px;padding:0 13px;border-radius:4px;color:#1d2125;font-weight:600;font-size:14.5px}
.label-chip.wide{flex:1;cursor:pointer}
.pop-btn{background:#ffffff14;border:0;border-radius:6px;padding:8px;cursor:pointer;margin-top:4px}
.chip-btn{background:#ffffff14;border:0;border-radius:14px;padding:4px 11px;font-size:13px;cursor:pointer}

/* Cửa sổ chi tiết thẻ */
.cm-overlay{position:fixed;inset:0;z-index:100;background:#000000b3;display:flex;align-items:flex-start;justify-content:center;padding:42px 17px;overflow:auto}
@media(max-width:760px){.cm-overlay{padding:0}}
.cm-loading{color:#fff;padding:60px}
.cm{background:#323940;color:var(--vb-text);width:min(1080px,100%);border-radius:12px;position:relative;box-shadow:0 12px 40px #000c;margin-bottom:40px}
@media(max-width:760px){.cm{border-radius:0;min-height:100vh;margin:0}}
.cm button{font:inherit;color:inherit}
.cm-cover{height:160px;border-radius:12px 12px 0 0;display:flex;align-items:center;justify-content:center;position:relative}
@media(max-width:760px){.cm-cover{border-radius:0;height:180px}}
.cm-cover img{height:100%;max-width:100%;object-fit:contain;cursor:zoom-in}
.cm-cover-left{position:absolute;left:16px;top:14px}
.cm-cover-right{position:absolute;right:12px;top:12px;display:flex;gap:8px}
.list-pill{display:inline-flex;align-items:center;gap:4px;background:#1d2125d9;border:1px solid #ffffff2a;border-radius:6px;padding:4px 11px;font-weight:700;font-size:13px;cursor:pointer;text-transform:uppercase}
.round-btn{width:37px;height:37px;border-radius:50%;background:#1d2125cc;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.round-btn:hover{background:#1d2125}
.cm-cover .popover{top:52px;left:16px;margin:0}
.cm-cover .popover.right{left:auto;right:12px}
.cm-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
@media(max-width:860px){.cm-body{grid-template-columns:1fr}}
.cm-main{padding:21px 25px 30px;min-width:0}
@media(max-width:760px){.cm-main{padding:17px}}
.cm-side{border-left:1px solid #ffffff14;padding:17px 19px 30px;background:#2b3137;border-radius:0 0 12px 0;min-width:0}
@media(max-width:860px){.cm-side{border-left:0;border-top:1px solid #ffffff14;border-radius:0}}
.cm-title{display:flex;gap:11px;align-items:flex-start}
.done-toggle{background:none;border:0;padding:4px 0 0;cursor:pointer;color:var(--vb-muted)!important}
.done-toggle.on{color:#4bce97!important}
.cm-title textarea{flex:1;background:transparent;border:2px solid transparent;border-radius:6px;color:#fff;font-size:24px;font-weight:700;line-height:1.3;resize:none;field-sizing:content;padding:0 4px;text-transform:uppercase;min-width:0}
.cm-title textarea:focus{border-color:var(--vb-blue);background:#22272b;outline:0}
.cm-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 12px 30px;position:relative}
@media(max-width:760px){.cm-actions{margin-left:0}}
.cm-actions>button{background:#ffffff0f;border:1px solid #ffffff2a;border-radius:6px;padding:6px 11px;display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.cm-actions>button:hover{background:#ffffff22}
.cm-meta{display:flex;flex-wrap:wrap;gap:17px 25px;margin:0 0 6px 30px}
@media(max-width:760px){.cm-meta{margin-left:0}}
.cm-meta h4{margin:0 0 6px;font-size:13px;color:var(--vb-muted);font-weight:600}
.add-round{width:35px;height:35px;border-radius:50%;background:#ffffff14;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.due-chip{display:inline-flex;align-items:center;gap:8px;background:#ffffff14;border-radius:6px;padding:6px 11px;cursor:pointer}
.due-chip em{font-style:normal;font-size:12px;font-weight:700;border-radius:3px;padding:1px 5px;background:#454f59}
.due-chip.overdue em{background:#ae2e24}.due-chip.done em{background:#1f845a}.due-chip.soon em{background:#946f00}
.cm-section{margin-top:22px}
.cm-section h3{display:flex;align-items:center;gap:11px;font-size:16.5px;margin:0 0 10px;color:#fff}
.sec-btn{margin-left:auto;background:#ffffff14;border:0;border-radius:6px;padding:6px 13px;font-size:14.5px;font-weight:600;cursor:pointer}
.sec-btn:hover{background:#ffffff26}
.inline-confirm{margin-left:auto;display:flex;gap:6px}.inline-confirm .sec-btn{margin-left:0}
.vehicle-grid{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:11px;margin-left:28px}
@media(max-width:760px){.vehicle-grid{grid-template-columns:1fr 1fr;margin-left:0}}
.vehicle-grid label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--vb-muted);font-weight:600}
.vehicle-grid input{background:#22272b;border:1px solid var(--vb-line);border-radius:6px;padding:7px 10px;color:#fff;text-transform:uppercase;outline-color:var(--vb-blue)}
.desc-view{margin-left:28px;white-space:pre-wrap;line-height:1.6;cursor:pointer;border-radius:6px;padding:4px}
.desc-view:hover{background:#ffffff0a}
.desc-empty,.drop-hint{margin-left:28px;width:calc(100% - 28px);text-align:left;justify-content:flex-start!important;background:#ffffff0f;border:0;border-radius:6px;padding:15px 13px;color:var(--vb-muted)!important;cursor:pointer}
.drop-hint{border:1px dashed #ffffff33;background:transparent}
@media(max-width:760px){.desc-view,.desc-empty,.drop-hint,.desc-edit{margin-left:0!important;width:100%}}
.desc-edit{margin-left:28px;display:flex;flex-direction:column;gap:8px}
.desc-edit textarea,.composer textarea{background:#22272b;border:1px solid var(--vb-line);border-radius:8px;color:#fff;padding:11px;line-height:1.5;resize:vertical;outline-color:var(--vb-blue)}
.att-row,.upload-row{display:flex;align-items:center;gap:13px;padding:6px 0 6px 30px}
@media(max-width:760px){.att-row,.upload-row{padding-left:0}}
.att-thumb{width:64px;height:52px;flex:none;border-radius:6px;background:#ffffff1a;border:0;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}
.att-thumb img{width:100%;height:100%;object-fit:cover}
.type{font-weight:800;font-size:13px;color:#c7d1db;letter-spacing:.5px}
.play{position:absolute;inset:auto;width:26px;height:26px;border-radius:50%;background:#000a;color:#fff;display:flex;align-items:center;justify-content:center}
.play.big{width:48px;height:48px;left:50%;top:50%;transform:translate(-50%,-50%)}
.att-info{flex:1;min-width:0;background:none;border:0;text-align:left;display:flex;flex-direction:column;align-items:flex-start!important;gap:2px;cursor:pointer;padding:0}
.att-info b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.att-info small,.upload-info small{color:var(--vb-muted);font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cover-tag{display:inline-flex;align-items:center;gap:3px;background:#ffffff1a;border-radius:3px;padding:0 5px}
.icon-link{width:32px;height:32px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--vb-text);flex:none}
.icon-link:hover{background:#ffffff1f}
.upload-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.upload-info b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-row.error small{color:#fd9891}
.bar{height:6px;border-radius:3px;background:#ffffff1f;overflow:hidden;flex:1}
.bar i{display:block;height:100%;background:var(--vb-blue);transition:width .2s}
.bar.full i{background:#4bce97}
.wide-btn{width:calc(100% - 28px);margin:8px 0 0 28px;background:#ffffff14;border:0;border-radius:6px;padding:8px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.wide-btn.subtle{justify-content:flex-start;width:auto;padding:8px 13px}
@media(max-width:760px){.wide-btn{margin-left:0;width:100%}}
.cl-progress{display:flex;align-items:center;gap:11px;margin:2px 0 10px;min-height:22px;font-size:13px;line-height:1.3;color:var(--vb-muted)}
.cl-progress b{flex:none;min-width:41px;text-align:right;font-weight:700;color:var(--vb-text,#b6c2cf);font-variant-numeric:tabular-nums}
.cl-progress.full b{color:#4bce97}
.cl-progress small{flex:none;font-size:12px;font-variant-numeric:tabular-nums}
.cl-bar{flex:1;min-width:43px;height:8px;border-radius:4px;background:#ffffff1f;overflow:hidden}
.cl-bar i{display:block;height:100%;border-radius:4px;background:var(--vb-blue);transition:width .2s}
.cl-progress.full .cl-bar i{background:#4bce97}
.cl-title{flex:1;background:transparent;border:2px solid transparent;border-radius:6px;color:#fff;font-weight:700;font-size:16.5px;padding:2px 4px;min-width:0}
.cl-title:focus{border-color:var(--vb-blue);background:#22272b;outline:0}
.cl-item{display:flex;align-items:center;gap:11px;padding:5px 4px;border-radius:6px}
.cl-item:hover{background:#ffffff0a}
.cl-item input[type=checkbox]{width:17px;height:17px;accent-color:#579dff;flex:none;margin:0 6px}
.cl-item span{flex:1;cursor:pointer;line-height:1.4}
.cl-item.done span{text-decoration:line-through;color:var(--vb-muted)}
.cl-item .ghost-btn{opacity:0;padding:3px 6px}.cl-item:hover .ghost-btn{opacity:1}
@media(pointer:coarse){.cl-item .ghost-btn{opacity:.6}}
.cl-edit,.cl-add input{flex:1;background:#22272b;border:1px solid var(--vb-blue);border-radius:6px;padding:6px 8px;color:#fff}
.cl-add{display:flex;flex-direction:column;gap:6px;margin-left:30px}
.checklist .wide-btn.subtle{margin-left:30px}

/* Bình luận & hoạt động */
.side-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.side-head h3{display:flex;align-items:center;gap:8px;font-size:16.5px;margin:0;color:#fff}
.composer{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.composer textarea{width:100%}
.composer .upload-row{padding-left:0}
.attach-link{background:none;border:0;color:var(--vb-muted)!important;font-size:13px;cursor:pointer;justify-content:flex-start!important;padding:0;display:inline-flex;gap:5px;align-items:center}
.attach-link:hover{color:#fff!important}
.comment-files{display:flex;flex-wrap:wrap;gap:6px}
.file-chip{display:inline-flex;align-items:center;gap:6px;background:#ffffff14;border:0;border-radius:6px;padding:4px 8px;font-size:13px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip button{background:none;border:0;padding:0;cursor:pointer;display:inline-flex}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.feed-item{display:flex;gap:11px;font-size:14.5px;line-height:1.45}
.feed-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.feed-body time{color:var(--vb-blue);font-size:13px;cursor:default}
.feed-item.small .feed-body time{display:block}
.bubble{background:#22272b;border-radius:8px;padding:8px 13px;box-shadow:0 1px 1px #0004}
.bubble p{margin:0;white-space:pre-wrap;word-break:break-word}
.bubble-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.bubble-file{max-width:100%}
.preview{position:relative;display:block;background:#101214;border:0;border-radius:8px;overflow:hidden;padding:0;cursor:zoom-in;max-width:100%;margin-top:4px}
.preview img{display:block;max-width:100%;max-height:220px;object-fit:cover}
.link{background:none;border:0;padding:0;color:var(--vb-blue)!important;text-decoration:underline;cursor:pointer;display:inline!important;text-align:left}
.feed-tools{font-size:13px;color:var(--vb-muted)}
.feed-tools button{background:none;border:0;padding:0;color:var(--vb-muted)!important;text-decoration:underline;cursor:pointer;margin-right:6px}

/* Hộp thoại nhỏ */
.small-dialog{background:#323940;color:var(--vb-text);border-radius:12px;padding:21px;width:min(420px,100%);margin-top:10vh;box-shadow:0 12px 40px #000c;display:flex;flex-direction:column;gap:11px}
.small-dialog.wide{width:min(520px,100%)}
.small-dialog h3{margin:0;color:#fff;font-size:18.5px}
.small-dialog h4{margin:10px 0 0;color:var(--vb-muted);font-size:13px}
.small-dialog p{margin:0;color:var(--vb-muted);line-height:1.5}
.small-dialog button{font:inherit}
.who-list{display:flex;flex-direction:column;max-height:40vh;overflow:auto}
.set-row{display:flex;gap:8px;align-items:center}.set-row input{flex:1;min-width:0}
.set-row select{width:90px;color:#1d2125;font-weight:700}

/* Lightbox xem file ngay trên trang */
.lightbox{position:fixed;inset:0;z-index:200;background:#000000eb;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 64px 0;color:#fff}
@media(max-width:760px){.lightbox{padding:52px 0 0}}
.lb-stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 8px 40px #000}
.lb-video{max-width:100%;max-height:100%;background:#000;border-radius:4px;outline:0}
.lb-pdf{width:min(1100px,100%);height:100%;border:0;background:#fff;border-radius:4px}
.lb-pdfjs{width:min(1000px,100%);height:100%;overflow:auto;background:#525659;border-radius:4px;position:relative;-webkit-overflow-scrolling:touch}
.lb-pdf-pages{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px}
.lb-pdf-pages canvas{background:#fff;box-shadow:0 2px 8px #0008;max-width:100%}
.lb-pages{position:sticky;top:6px;left:0;margin:6px auto 0;width:max-content;background:#000a;border-radius:12px;padding:2px 11px;font-size:13px;z-index:2}
.lb-msg{color:#ddd;padding:42px;text-align:center}
.lb-close{position:fixed;top:12px;right:14px;width:43px;height:43px;border-radius:50%;background:#ffffff1f;border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:72px;border-radius:8px;background:#ffffff14;border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.lb-nav:hover,.lb-close:hover{background:#ffffff33}
.lb-nav.prev{left:8px}.lb-nav.next{right:8px}
@media(max-width:760px){.lb-nav{top:auto;bottom:130px;width:43px;height:56px;background:#0008}}
.lb-footer{flex:none;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 12px max(14px,env(safe-area-inset-bottom));text-align:center}
.lb-name{font-size:18.5px;font-weight:700;word-break:break-all}
.lb-meta{font-size:14.5px;color:#c7d1db}
.lb-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 19px;margin-top:6px}
.lb-actions a,.lb-actions>button{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;background:none;border:0;font:inherit;font-size:14.5px;cursor:pointer;padding:6px 4px;border-bottom:1px solid transparent}
.lb-actions a:hover,.lb-actions>button:hover{border-bottom-color:#fff}
.lb-confirm{display:inline-flex;align-items:center;gap:8px;font-size:14.5px}
.lb-confirm button{background:#ffffff26;border:0;border-radius:6px;padding:4px 11px;color:#fff;cursor:pointer;font:inherit}
.lb-confirm button.danger{background:#c9372c}

/* Cửa sổ nổi luôn bằng đúng màn hình, kể cả khi bảng rộng hơn màn hình */
.cm-overlay,.lightbox{width:100vw;height:100vh;height:100dvh;right:auto;bottom:auto}
.pop-item.danger{background:none}.pop-item.danger:hover{background:#ae2e2433}

/* ===== Chống tràn khung: tên file dài, ảnh xem trước, MP3 ===== */
.cm-side,.cm-main,.feed,.feed-item,.feed-body,.bubble,.bubble-files{min-width:0;max-width:100%}
.feed-body{overflow-wrap:anywhere;word-break:break-word}
.fname{overflow-wrap:anywhere;word-break:break-all}
.link.fname{display:inline!important;white-space:normal}
.bubble-file{min-width:0;max-width:100%}
.preview{max-width:100%}
.preview img{width:auto;height:auto;max-width:100%;max-height:240px;object-fit:contain}
.file-chip{display:flex!important;max-width:100%;min-width:0}
.file-chip .fc-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip .type{flex:none}
.att-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.att-info b{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.att-thumb .type.audio{color:#c39bff;display:grid;place-items:center}
audio{max-width:100%;color-scheme:dark}
.att-audio,.feed-audio{width:100%;height:39px}
.bubble-audio{display:flex;flex-direction:column;gap:6px;width:100%;min-width:0}
.bubble-audio audio{width:100%;height:39px}
.bubble-files .bubble-file:has(.bubble-audio){flex:1 1 100%}
.limit-hint{margin:4px 0 0 28px;font-size:12.5px;color:var(--vb-muted)}
@media(max-width:760px){.limit-hint{margin-left:0}}
.attach-link .lim{opacity:.75}
.lb-audio{display:flex;flex-direction:column;align-items:center;gap:15px;background:#1d2125;border-radius:12px;padding:30px 25px;width:min(520px,92vw);color:#dee4ea;text-align:center;overflow-wrap:anywhere}
.lb-audio-icon{width:72px;height:72px;border-radius:50%;background:#6e5dc6;display:grid;place-items:center;font-size:37.5px;color:#fff}
.lb-audio audio{width:100%}
.lb-name{overflow-wrap:anywhere}
.stage-pick{display:flex;gap:4px;padding:2px 0 4px}.stage-pick button{flex:1;border:1px solid #ffffff2a;background:#ffffff10;color:#dee4ea;border-radius:6px;padding:6px 4px;font-size:13px;cursor:pointer}
.stage-pick button.on{background:#579dff;border-color:#579dff;color:#1d2125;font-weight:700}
.stage-help{display:block;color:var(--vb-muted);font-size:12px;padding:0 2px 6px}
.stage-badge{font-size:11px;font-weight:800;background:#ffffff26;color:#fff;border-radius:4px;padding:1px 5px;white-space:nowrap;text-transform:uppercase}.stage-badge.done{background:#4bce9744}
.vb-dates{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--vb-muted);flex-wrap:wrap}
.vb-dates select,.vb-dates input{background:#22272b;border:1px solid #ffffff2a;color:#dee4ea;border-radius:6px;padding:4px 6px;font:inherit;color-scheme:dark}
.vb-dates button{background:none;border:0;color:#dee4ea;cursor:pointer;display:inline-flex}
.vb-dates em{font-style:normal;color:#9fadbc}
/* Bước 11: tiêu đề tạo từ thông tin xe — bấm để mở form */
.cm-title .title-btn{flex:1;text-align:left;background:transparent;border:2px solid transparent;border-radius:6px;color:#fff;font-size:24px;font-weight:700;line-height:1.3;padding:0 4px;text-transform:uppercase;min-width:0;cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap;word-break:break-word}
.cm-title .title-btn:hover:not(:disabled){background:#22272b;border-color:var(--vb-line)}
.cm-title .title-btn:disabled{cursor:default;opacity:1}
.cm-title .title-btn svg{color:var(--vb-muted);flex:none}
.title-form,.title-legacy,.title-conflict,.title-err{margin:10px 0 4px 30px;padding:11px 13px;border-radius:8px;font-size:14.5px;line-height:1.45}
.title-form{background:#1d2125;border:1px solid var(--vb-blue)}
.title-form .vehicle-grid{margin-left:0;grid-template-columns:1fr 1.3fr .8fr}
.title-form .vehicle-grid .wide{grid-column:1/-1}
.title-form .preview-title{margin:8px 0;color:#9fadbc;font-weight:700}
.title-legacy{background:#3a2f12;border:1px solid #a5800b;color:#f5e2a8}
.title-conflict{background:#3d1d1a;border:1px solid #c9372c;color:#ffd5d2}
.title-err{background:#3d1d1a;border:1px solid #c9372c;color:#ffd5d2}
.tl-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tl-actions .btn-sm,.tl-actions .btn-primary{border-radius:6px;padding:6px 13px;font-weight:600;font-size:14.5px;cursor:pointer;border:1px solid var(--vb-line);background:#2c333a;color:#dee4ea}
.tl-actions .btn-primary{background:var(--vb-blue);border-color:var(--vb-blue);color:#1d2125}
.tl-actions button:disabled{opacity:.6;cursor:default}
@media(max-width:760px){.title-form,.title-legacy,.title-conflict,.title-err{margin-left:0}.title-form .vehicle-grid{grid-template-columns:1fr 1fr}}
/* ===== Lưu trữ thẻ ===== */
.vb-archive{display:inline-flex;align-items:center;gap:6px;height:35px;padding:0 11px;border-radius:8px;background:#ffffff14;border:1px solid #ffffff22;color:#dee4ea;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.vb-archive:hover{background:#ffffff24}
.vb-archive b{background:#579dff;color:#0b1b33;border-radius:10px;padding:0 6px;font-size:12px;line-height:18.5px}
@media(max-width:760px){.vb-archive{padding:0 8px}.vb-archive{font-size:0;gap:4px}.vb-archive b{font-size:12px}}
.stage-warn{display:block;margin:0 2px 8px;padding:6px 8px;border-radius:6px;background:#5d1f1a;color:#ffd5d2;font-size:12px;line-height:1.4}
.arch-pill{display:inline-flex;align-items:center;gap:4px;margin-left:6px;background:#f5cd47;color:#3a2f12;border-radius:6px;padding:3px 8px;font-size:12px;font-weight:700}
.cm-archived{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0;padding:11px 17px;background:#3a2f12;border-bottom:1px solid #a5800b;color:#f5e2a8;font-size:14.5px;line-height:1.45}
.cm-archived>span{flex:1 1 300px}
.arch-modal{display:contents}
.arch-modal button{font:inherit;color:inherit}
.restore-wrap{position:relative;display:inline-flex}
.restore-pop{position:absolute;z-index:60;top:calc(100% + 6px);right:0;width:min(340px,86vw);background:#fff;color:#172b4d;border:1px solid #d5d9e0;border-radius:8px;box-shadow:0 8px 24px #0003;padding:13px;font-size:14.5px;line-height:1.45;text-align:left}
.restore-pop.warn{border-color:#e2b203;background:#fffbe6}
.restore-pop p{margin:0 0 8px}
.restore-pop select{width:100%;padding:6px;border:1px solid #c7ccd6;border-radius:6px;font:inherit;margin-bottom:8px}
.restore-pop .row{display:flex;gap:6px;flex-wrap:wrap}
.cm-archived .btn-sm{background:#f5cd47;color:#3a2f12!important;border:0;border-radius:6px;padding:6px 13px;font-weight:700;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.cm-archived .btn-sm:hover{background:#ffd95e}

/* ===== Bước 13: ảnh bình luận theo đúng tỷ lệ ===== */
.feed .preview{display:block;position:relative;max-width:100%;max-height:240px;padding:0;border:0;border-radius:8px;overflow:hidden;background:#101214;cursor:zoom-in;margin-top:4px}
.feed .preview img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.feed .preview.measuring{background:#ffffff0d}

/* ===== Kéo thả file vào thẻ ===== */
.cm-drop{position:fixed;inset:12px;z-index:180;border:3px dashed #579dff;border-radius:12px;background:#0b1b33d9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;pointer-events:none;text-align:center;padding:21px}
.cm-drop b{font-size:22px}.cm-drop span{color:#9fadbc;font-size:14.5px;max-width:80%}

/* ===== Hàng chờ upload ===== */
.bar.busy i{background:repeating-linear-gradient(45deg,#579dff 0 10px,#85b8ff 10px 20px);background-size:28px 28px;animation:q-busy 1s linear infinite}
@keyframes q-busy{to{background-position:28px 0}}
.upload-row.queued small,.upload-row.waitnet small{color:#f5cd47}
.upload-row.needfile small{color:#fea362}
.upload-row.processing small{color:#85b8ff}
.q-actions{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;flex:none;max-width:45%}
.q-actions .ghost-btn{display:inline-flex;align-items:center;gap:4px;min-height:35px}
.q-msg{color:#fd9891;font-size:12px;flex-basis:100%;text-align:right}
.q-card{color:#85b8ff;font-size:13px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-notice{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:4px 0 4px 28px;padding:6px 11px;border-radius:6px;background:#533f04;color:#f5e2a8;font-size:13px}
.q-notice button{background:none;border:0;color:inherit;cursor:pointer}
.q-dock{position:fixed;z-index:150;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(420px,calc(100vw - 32px));background:#22272b;color:#dee4ea;border:1px solid #38414a;border-radius:12px;box-shadow:0 10px 30px #0008;font-size:14.5px}
.q-dock button{font:inherit;color:inherit}
.q-head{width:100%;display:flex;align-items:center;gap:8px;background:none;border:0;padding:13px 15px;cursor:pointer;text-align:left;font-weight:700;min-height:52px}
.q-head span{flex:1}
.q-body{max-height:min(60vh,520px);overflow:auto;padding:0 13px 13px;border-top:1px solid #38414a;overscroll-behavior:contain}
.q-body .upload-row{padding-left:0}
.q-note{color:#9fadbc;font-size:13px;line-height:1.45;margin:10px 0}
.q-clear{margin-top:8px}
@media(max-width:760px){.q-dock{right:8px;left:8px;width:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px))}}

/* ===== Bố cục điện thoại (≤760px) — PC giữ nguyên ===== */
@media(max-width:760px){
  .vb-search{flex:1 1 120px;min-width:110px}
  .vb-dates>span,.vb-dates em,.vb-dates input[type=date]{display:none}
  .vb-dates select{height:39px}
  .vb-icon.sm{width:39px;height:39px}
  /* iPhone tự phóng to khi chữ ô nhập < 16px → giữ 16px để không bị nhảy / che màn hình */
  input,textarea,select{font-size:17.5px!important}
  .cm-actions button,.ghost-btn,.sec-btn,.btn-sm,.primary-btn{min-height:43px}
  .cm-title .title-btn{font-size:18.5px}
  .q-actions .ghost-btn{min-height:39px}
  .feed-item{font-size:15.5px}
  .att-row .icon-link{width:43px;height:43px}
}

/* ===== Hình nền bảng (cố định sau nội dung, không ảnh hưởng kéo thả) ===== */
.vb-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background-color:var(--bgc,#1d2125);background-image:var(--bgi,none);background-size:var(--bgs,cover);background-repeat:var(--bgr,no-repeat);background-position:center}
.vb-bg::after{content:'';position:absolute;inset:0;background:#000;opacity:var(--dim,0)}
@media(max-width:760px){.vb-bg{background-image:var(--bgi-m,var(--bgi,none));background-size:var(--bgs,cover)}}
.vb.has-bg .vb-canvas{position:relative;z-index:1}
.vb.has-bg .vb-head{background:#000a}
.vb.has-bg .vb-list{box-shadow:0 2px 10px #0006}
.bg-dialog h4{margin:14px 0 8px}
.bg-preview{position:relative;height:150px;border-radius:10px;overflow:hidden;background:radial-gradient(600px 300px at 70% 0%,#5a1414 0%,transparent 60%),linear-gradient(160deg,#1d2125 0%,#16191c 55%,#2a0d0d 100%)}
.bg-preview .vb-bg{position:absolute}
.bg-preview.def .vb-bg{display:none}
.bgp-cols{position:relative;z-index:1;display:flex;gap:8px;padding:13px}
.bgp-col{flex:1;min-width:0;background:#101204;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:#dee4ea}
.bgp-col:nth-child(2){background:#0b3a7a}.bgp-col:nth-child(3){background:#164b35}
.bgp-col span{background:#22272b;border-radius:5px;padding:5px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swatch.custom{position:relative;overflow:hidden;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)!important}
.swatch.custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.bg-dim{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:14.5px}
.bg-err{color:#fd9891;font-size:14.5px}

/* ===== Bước 15: nút “đã xong” (giống Trello), tag nhân viên, chụp ảnh ===== */
.vb-title-row{display:flex;align-items:flex-start;gap:6px}
.vb-title-row .vb-title{flex:1;min-width:0}
.done-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin:-2px 0 -2px -3px;padding:0;border:0;border-radius:50%;background:none;color:#8c9bab;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.done-btn svg{display:block;transition:transform .12s}
.done-btn:hover{color:#dee4ea}.done-btn:hover svg{transform:scale(1.1)}
.done-btn:focus-visible{outline:2px solid var(--vb-blue);outline-offset:1px}
.done-btn.ro{cursor:default}
.done-btn.busy{opacity:.55;pointer-events:none}
.done-btn.busy::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:#4bce97;animation:doneSpin .8s linear infinite}
@keyframes doneSpin{to{transform:rotate(360deg)}}
/* Vùng chạm rộng hơn trên màn hình cảm ứng mà không làm to biểu tượng */
@media(pointer:coarse){.done-btn::before{content:"";position:absolute;inset:-9px}}
.vb-title-row.is-done .vb-title{color:#b6c2cf}
.cm-done{flex:none;padding-top:3px}
.cm-done .done-btn{width:32px;height:32px;margin:0}
.cm-done-info{margin:6px 0 4px 40px;font-size:14px;color:#9fadbc}
.cm-done-info b{color:#4bce97}
.cm-done-info span{color:#738496}
@media(max-width:760px){.cm-done-info{margin-left:0}}
.done-word{color:#4bce97}
/* Tag nhân viên */
.mention-wrap{display:flex;flex-direction:column;gap:6px;min-width:0}
.mention-wrap textarea{width:100%}
.mention-list{list-style:none;margin:0;padding:4px;background:#282e33;border:1px solid #ffffff1f;border-radius:8px;box-shadow:0 8px 24px #0008;max-height:min(46vh,300px);overflow:auto;overscroll-behavior:contain}
.mention-list li{display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:6px;cursor:pointer;min-height:43px}
.mention-list li.on{background:#0c66e4;color:#fff}
.mention-list li .avatar{width:30px;height:30px;font-size:12px;flex:none}
.mention-list li b{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mention-list li small{color:#9fadbc;font-size:12.5px}.mention-list li.on small{color:#dbe7ff}
@media(pointer:coarse){.mention-list li{min-height:50px}}
.mention-none{font-size:13px;color:#9fadbc;padding:2px 4px}
.mention-field{position:relative;min-width:0}
.mention-chips{position:absolute;left:0;right:0;z-index:30;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;padding:6px;background:#22272b;border:1px solid #ffffff26;border-radius:10px;box-shadow:0 6px 18px #0009}
.mention-chips::-webkit-scrollbar{display:none}
.mention-chips.below{top:calc(100% + 4px)}.mention-chips.above{bottom:calc(100% + 4px)}
.mention-chips.none{font-size:14.5px;color:#9fadbc;padding:11px 13px}
.mention-chip{flex:none;display:inline-flex;align-items:center;gap:6px;max-width:72vw;height:43px;padding:0 13px 0 5px;border-radius:20px;border:1px solid #ffffff1f;background:#2c333a;color:#dee4ea;font:inherit;font-size:15.5px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-x}
.mention-chip .avatar{width:32px;height:32px;font-size:12px;flex:none}
.mention-chip b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mention-chip.on{background:#0c66e4;border-color:#0c66e4;color:#fff}
.mention-will{font-size:13px;color:#9fadbc;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.mention{display:inline;padding:0 3px;border-radius:4px;background:#1c2b41;color:#85b8ff;font-weight:600}
.mention.me{background:#0c66e4;color:#fff}
.attach-row{display:flex;flex-wrap:wrap;gap:4px 15px;align-items:center}
.only-touch{display:none!important}
@media(pointer:coarse){.only-touch{display:inline-flex!important}}
/* Ô thông tin xe trên điện thoại: không đẩy cửa sổ thẻ rộng quá màn hình (tràn ngang) */
.vehicle-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}
.vehicle-grid label{min-width:0}.vehicle-grid input{width:100%;min-width:0;box-sizing:border-box}
@media(max-width:760px){.vehicle-grid,.title-form .vehicle-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* iPhone: ô nhập cỡ chữ < 16px làm Safari tự phóng to trang khi chạm → giữ 16px trên màn hình cảm ứng */
@media(pointer:coarse){.composer textarea,.mention-wrap textarea,.vehicle-grid input,.desc-edit textarea,.cl-add input,.cl-edit,.vb-composer input,.vb-search input{font-size:17.5px}}
.mention-wrap{scroll-margin-top:12px}
@media(max-width:760px){.attach-link .lim{display:none}.attach-row{justify-content:space-between}}

/* ---- Nhãn duyệt giá (hệ thống, không sửa được) trên thẻ thu gọn: góc trên bên trái, nền màu đặc ---- */
.vb-cover{position:relative}
.vb-qa{display:inline-block;padding:3px 8px;border-radius:4px;font-size:12px;line-height:1.35;font-weight:800;letter-spacing:.3px;white-space:nowrap;box-shadow:0 1px 3px #0007,0 0 0 1px #0002}
.vb-qa.pending{background:#f5cd47;color:#172b4d}
.vb-qa.approved{background:#1f9d55;color:#fff}
.vb-cover .vb-qa{position:absolute;top:6px;left:6px;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis}
.vb-qa-row{margin:0 0 6px}
/* ---- Nhãn tùy chỉnh: dưới ảnh bìa, trên tên xe; tự xuống dòng ---- */
.vb-labels{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}
.vb-label{display:inline-block;max-width:100%;padding:2px 8px;border-radius:4px;font-size:13px;line-height:1.35;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.vb-label{white-space:normal;overflow-wrap:anywhere}}
.lbl-chip{display:inline-flex;align-items:center;min-height:35px;max-width:100%;padding:4px 13px;border-radius:4px;border:0;font-size:15.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;text-align:left}
.lbl-chip:disabled{opacity:1;cursor:default}
button.lbl-chip:not(:disabled):hover{filter:brightness(.92)}
.cm-labels .row{flex-wrap:wrap;gap:6px}
.cm-actions button.on{background:#579dff33}
/* ---- Popover Nhãn ---- */
.labels-pop{width:320px}
.pop-back{position:absolute;left:-4px;top:-4px;background:none;border:0;border-radius:6px;width:30px;height:30px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:inherit}
.pop-back:hover{background:#ffffff1f}
.lp-search{width:100%;padding:8px 11px;border-radius:6px;border:1px solid #738496;background:#22272b;color:var(--vb-text)}
.lp-search:focus{outline:2px solid var(--vb-blue);border-color:transparent}
.lp-sub{font-size:13px;font-weight:700;color:var(--vb-muted);margin-top:4px}
.lp-list{display:flex;flex-direction:column;gap:4px}
.lp-row{display:flex;align-items:center;gap:6px}
.lp-row label{flex:1;min-width:0;display:flex;align-items:center;gap:8px;cursor:pointer}
.lp-row input[type=checkbox]{width:17px;height:17px;flex:none;margin:0 4px;accent-color:#579dff}
.lbl-chip.wide{flex:1;min-width:0}
.lp-edit{flex:none;width:35px;height:35px;border:0;border-radius:6px;background:none;color:var(--vb-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.lp-edit:hover{background:#ffffff1f;color:#fff}
.lp-create{margin-top:4px;width:100%;padding:8px;border:0;border-radius:6px;background:#ffffff14;color:var(--vb-text);font-weight:600;cursor:pointer}
.lp-create:hover{background:#ffffff24}
.lp-preview{display:flex;justify-content:center;padding:15px 8px;margin:0 -12px 4px;background:#1d2125}
.lp-preview .lbl-chip{min-width:60%;justify-content:center}
.lp-field{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--vb-muted)}
.lp-field input{padding:8px 11px;border-radius:6px;border:1px solid #738496;background:#22272b;color:var(--vb-text);font-weight:400;font-size:15.5px}
.lp-colors{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.lp-swatch{height:35px;border:0;border-radius:4px;cursor:pointer;padding:0}
.lp-swatch.on{outline:2px solid #fff;outline-offset:2px}
.lp-swatch:hover{filter:brightness(1.1)}
.lp-err{background:#5d1f1a;color:#ffd5d2;border-radius:6px;padding:6px 8px;font-size:13px}
.lp-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.lp-confirm{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--vb-muted);flex-basis:100%}
.lp-confirm>span{display:flex;gap:6px}
@media(max-width:760px){.lp-search,.lp-field input{font-size:17.5px}.lp-swatch{height:41px}.lp-edit{width:41px;height:41px}}

/* ===== Đăng nhập ===== */
.boot{min-height:100vh;display:grid;place-items:center;font-size:48px;font-weight:800;font-style:italic;letter-spacing:-3px;background:#16191c;color:#fff}
.boot span,.login-logo span{color:var(--red)}
.boot-error{max-width:420px;margin:15vh auto;padding:25px;text-align:center}
.boot-error button{margin-top:12px;padding:8px 17px;border-radius:7px;border:1px solid var(--line);background:#fff}
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:#f7f8fa}
.login-brand{background:radial-gradient(900px 500px at 80% 10%,#7a1414 0%,transparent 60%),linear-gradient(160deg,#1d2125 0%,#111315 60%,#3a0b0b 100%);color:#fff;padding:64px 56px;display:flex;align-items:center;justify-content:center}
/* Logo VES Workshop giữ đúng tỷ lệ 420:81, “Garage Manager” canh giữa bên dưới */
.login-mark{display:flex;flex-direction:column;align-items:center;gap:19px;width:min(440px,86%)}
.login-mark img{display:block;width:100%;height:auto;aspect-ratio:420/81}
.login-mark span{font-size:16.5px;letter-spacing:3px;font-weight:700;color:#c7cbd1;text-align:center;padding-left:5px}
.login-logo{font-size:84px;font-weight:800;font-style:italic;letter-spacing:-5px;line-height:1}
.login-logo.small{display:none;font-size:46px;letter-spacing:-3px;margin-bottom:18px}
.login-brand small{font-size:12px;letter-spacing:2.4px;font-weight:700;margin-top:10px;opacity:.9}
.login-brand p{max-width:420px;color:#c7cbd1;line-height:1.7;margin:28px 0 0;font-size:15.5px}
.login-card{align-self:center;justify-self:center;width:min(380px,100%);padding:25px;display:flex;flex-direction:column}
.login-card h1{font-size:31px;margin:0}
.login-sub{color:var(--muted);margin:6px 0 26px;font-size:14.5px}
.login-card label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:#555a65;margin-bottom:16px}
.login-card input{width:100%;border:1px solid #dedfe5;border-radius:9px;padding:13px 14px;font-size:16.5px;background:#fff}
.login-card input:focus{border-color:var(--red);outline:2px solid #d9383622}
.pw{position:relative;display:block}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:#8b8f99;padding:6px}
.login-error{background:#fff0ee;color:#b42318;border:1px solid #ffd2cc;border-radius:8px;padding:11px 13px;font-size:14.5px;margin-bottom:14px}
.login-btn{background:var(--red);color:#fff;border:0;border-radius:9px;padding:14px;font-size:16.5px;font-weight:700}
.login-foot{color:var(--muted);font-size:13px;text-align:center;margin-top:18px}
@media(max-width:820px){.login{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start}.login-brand{padding:44px 23px 38px}.login-mark{gap:13px;width:min(320px,82vw)}.login-mark span{font-size:12px;letter-spacing:4px}.login-card{padding:32px 23px 42px;align-self:start}}

/* ===== Người dùng trên sidebar / header ===== */
.u-avatar{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:none;letter-spacing:-.3px}
.profile{gap:10px}
.profile-text{min-width:0;flex:1}
.profile-text b,.profile-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile .icon-btn{border:0;background:none;color:#8b8f99;padding:5px;border-radius:6px}
.profile .icon-btn:hover{background:#f1f1f4;color:var(--ink)}
.user-chip{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:13px;color:#6b7280;min-width:0}
.user-chip b{color:var(--ink)}
.user-chip>span:not(.u-avatar){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-chip .icon-btn{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px}
@media(max-width:760px){.user-chip>span:not(.u-avatar){display:none}}
.vb-user{white-space:nowrap}.vb-user b{font-weight:700}.vb-user .dim{opacity:.6}
.vb-readonly{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#f5cd47;background:#533f04aa;border-radius:12px;padding:4px 11px;white-space:nowrap}
@media(max-width:760px){.vb-readonly{display:none}}
.ro-note{font-size:13px;color:var(--vb-muted);align-self:center}
.desc-none{margin:0 0 0 28px;color:var(--vb-muted)}
.desc-view.ro{cursor:default}.desc-view.ro:hover{background:none}
.list-pill:disabled{cursor:default;opacity:1}
.done-toggle:disabled{cursor:default}

/* ===== Nhân sự & Phân quyền ===== */
.staff{display:flex;flex-direction:column;gap:19px}
.staff-top{display:flex;gap:17px;align-items:flex-start;flex-wrap:wrap}
.staff-roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:13px;flex:1;min-width:280px}
@media(max-width:900px){.staff-roles{grid-template-columns:1fr}}
.role-card{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px}
.role-card b{display:flex;align-items:center;gap:7px;font-size:14.5px}
.role-card b span{font-size:12px;background:#f1f1f4;border-radius:10px;padding:1px 8px}
.role-card small{display:block;color:var(--muted);font-size:12px;margin-top:4px;line-height:1.45}
.role-card.manager svg,.role-badge.manager,.role-opt.manager svg{color:#c9372c}
.role-card.advisor svg,.role-badge.advisor,.role-opt.advisor svg{color:#0c66e4}
.role-card.technician svg,.role-badge.technician,.role-opt.technician svg{color:#1f845a}
.staff-list{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.staff-row{display:grid;grid-template-columns:minmax(200px,2fr) 1.2fr 1.2fr 1.1fr 170px;gap:13px;align-items:center;padding:13px 17px;border-top:1px solid var(--line);font-size:14.5px}
.staff-row.head{border-top:0;background:#fafafb;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.3px}
.staff-row.locked{opacity:.6}
.staff-row .who{display:flex;align-items:center;gap:11px;min-width:0}
.staff-row .who b{display:flex;align-items:center;gap:6px}
.staff-row .who em{font-style:normal;font-size:11px;background:#fff0ee;color:var(--red);border-radius:4px;padding:1px 6px}
.staff-row .who small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.role-badge{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:13px;border-radius:6px;padding:3px 8px;background:currentColor}
.role-badge{background:none;border:1px solid currentColor}
.status{font-size:13px;font-weight:600;border-radius:12px;padding:3px 10px}
.status.on{background:#e3fcef;color:#1f845a}.status.off{background:#f1f1f4;color:#6b7280}
.staff-row .acts{display:flex;gap:6px;justify-content:flex-end}
.staff-row .acts .secondary{margin:0;padding:7px 11px;display:inline-flex;gap:5px}
@media(max-width:760px){.staff-row{grid-template-columns:1fr auto;row-gap:6px}.staff-row.head{display:none}.staff-row>span:nth-child(2){display:none}.staff-row .acts{grid-column:1/-1;justify-content:flex-start}}
.dialog-body{padding:21px 27px}
.dialog-body label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#555a65;margin-bottom:14px}
.dialog-body input{border:1px solid #dedfe5;border-radius:8px;padding:11px 13px;font-size:15.5px;width:100%;background:#fff}
.dialog-body input:disabled{background:#f4f4f6;color:#8b8f99}
.dialog-body label.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500}
.dialog-body label.check input{width:auto;margin-top:2px}
.dialog.small{width:440px}
.field-label{font-size:13px;font-weight:600;color:#555a65;margin:4px 0 8px}
.role-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
@media(max-width:600px){.role-pick{grid-template-columns:1fr}}
.role-opt{flex-direction:column;align-items:flex-start!important;text-align:left;gap:4px!important;border:1.5px solid #dedfe5;background:#fff;border-radius:10px;padding:12px}
.role-opt b{font-size:14.5px}.role-opt small{font-size:12px;color:var(--muted);line-height:1.4}
.role-opt.on{border-color:var(--red);background:#fff6f5;box-shadow:0 0 0 3px #d9383614}
.role-opt:disabled{opacity:.45;cursor:not-allowed}
.color-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.color-pick>button{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #dedfe5;color:#fff;padding:0}
.color-pick>button.on{box-shadow:0 0 0 2px var(--ink)}
.color-pick .av-preview{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#555a65}
.pw-row{display:flex;gap:8px}.pw-row .secondary{margin:0;flex:none;display:inline-flex;gap:5px}
.hint{font-size:13px;color:#6b7280;line-height:1.5;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ok-msg{color:#1f845a;font-size:14.5px}
.cred{display:flex;gap:11px;align-items:flex-start;background:#f7f8fa;border:1px solid var(--line);border-radius:10px;padding:13px}
.cred pre{margin:0;flex:1;font-size:14.5px;white-space:pre-wrap;font-family:ui-monospace,Menlo,monospace}
.cred .secondary{margin:0;display:inline-flex;gap:5px}
.staff-dialog .dialog-actions{margin:0;padding:17px 27px;justify-content:flex-end;gap:11px;display:flex}
.staff-dialog .dialog-actions .primary{margin:0}
.staff-dialog .dialog-head h2{margin:6px 0 0;font-size:21px}
.role-card.accountant svg,.role-badge.accountant,.role-opt.accountant svg{color:#a54800}
.role-card.marketing svg,.role-badge.marketing,.role-opt.marketing svg{color:#ae4787}

/* ===== Khung ứng dụng: thanh menu ngang thay sidebar ===== */
:root{--side:0px;--tn-h:52px;--e-blue:#1d4f91;--e-plate:#14467e;--e-line:#e3e6ec;--e-bg:#f2f4f7;--e-head:#e9ecf1}
body{background:var(--e-bg)}
.shell{display:flex;flex-direction:column;min-width:100vw;width:max-content;min-height:100vh}
.shell:not(.on-board){width:100vw}
main.board-main,main.erp-main{margin-left:0!important;width:auto}
main.erp-main{width:100vw;min-height:calc(100vh - var(--tn-h))}
main.board-main{min-height:calc(100vh - var(--tn-h))}

header.topnav{position:sticky;top:0;left:0;z-index:60;width:100vw;height:var(--tn-h);display:flex;align-items:center;gap:6px;padding:0 15px;
  background:linear-gradient(90deg,#16191c 0%,#1f2328 55%,#3a1010 100%);border-bottom:2px solid var(--red);color:#fff}
.topnav button,.topnav a{font:inherit;color:inherit}
.tn-logo{background:none;border:0;display:flex;align-items:baseline;gap:6px;font-size:26.5px;font-weight:800;font-style:italic;letter-spacing:-1.5px;padding:0 11px 0 2px;cursor:pointer;color:#fff}
.tn-logo span{color:var(--red)}
.tn-logo small{font-size:10px;font-style:normal;letter-spacing:1.6px;font-weight:700;opacity:.75}
.tn-logo.static{font-size:28.5px}
.tn-burger{display:none;background:none;border:0;padding:6px;border-radius:6px}
nav.tn-menu{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.tn-space{display:inline-flex;align-items:center;gap:7px;background:#ffffff12;border:1px solid #ffffff22;border-radius:8px;padding:7px 13px;font-weight:600;font-size:14.5px;cursor:pointer;white-space:nowrap;margin-right:4px}
.tn-space:hover{background:#ffffff22}
.tn-space.on{background:var(--red);border-color:var(--red);box-shadow:0 2px 8px #d9383655}
.tn-sep{width:1px;height:26px;background:#ffffff26;margin:0 6px}
.tn-group{position:relative}
.tn-group>button{display:inline-flex;align-items:center;gap:3px;background:none;border:0;border-radius:7px;padding:8px 11px;font-size:14.5px;cursor:pointer;white-space:nowrap;color:#e4e7eb}
.tn-group>button:hover,.tn-group.open>button{background:#ffffff1a;color:#fff}
.tn-group.active>button{color:#fff;box-shadow:inset 0 -2px 0 var(--red)}
.tn-drop{display:none;position:absolute;top:100%;left:0;min-width:220px;background:#23272d;border:1px solid #ffffff1a;border-radius:0 0 10px 10px;box-shadow:0 12px 30px #0008;padding:6px;z-index:70}
.tn-group.open .tn-drop,.tn-drop.show{display:flex;flex-direction:column}
.tn-drop.right{right:0;left:auto;top:calc(100% + 6px);border-radius:10px}
.tn-drop button,.tn-drop a{display:flex;align-items:center;gap:10px;justify-content:flex-start!important;background:none;border:0;border-radius:6px;padding:10px 12px;text-align:left;font-size:14.5px;color:#e6e8eb;text-decoration:none;cursor:pointer;white-space:nowrap}
.tn-drop button:hover,.tn-drop a:hover{background:#ffffff14}
.tn-drop button.on{background:#d9383633;color:#fff}
.tn-who{padding:8px 12px 11px;border-bottom:1px solid #ffffff1a;margin-bottom:4px}.tn-who b,.tn-who small{display:block}.tn-who small{opacity:.7;margin-top:2px}
.tn-user{position:relative;display:flex;align-items:center;gap:4px;margin-left:auto}
.tn-me{display:flex;align-items:center;gap:8px;background:#ffffff12;border:0;border-radius:20px;padding:3px 11px 3px 3px;font-size:13px;cursor:pointer;white-space:nowrap;max-width:280px}
.tn-me>span:not(.u-avatar){overflow:hidden;text-overflow:ellipsis}
.tn-logout{background:none;border:0;padding:7px;border-radius:7px;cursor:pointer;opacity:.85}.tn-logout:hover{background:#ffffff1a;opacity:1}
@media(max-width:1180px){.tn-logo small{display:none}.tn-group>button{padding:8px 7px;font-size:14px}.tn-me>span:not(.u-avatar){display:none}}
@media(max-width:980px){nav.tn-menu,.tn-me{display:none}.tn-burger{display:inline-flex}.tn-logo{margin-right:auto}}
.tn-drawer-bg{position:fixed;inset:0;background:#0007;z-index:90}
.tn-drawer{position:absolute;left:0;top:0;bottom:0;width:min(300px,86vw);background:#1d2125;color:#fff;padding:15px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.tn-drawer button{font:inherit;color:inherit}
.tn-drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.tn-drawer-head button{background:none;border:0}
.tn-drawer .tn-space{justify-content:flex-start;margin:0}
.tn-dnav{display:flex;flex-direction:column;margin-top:8px;border-top:1px solid #ffffff14}
.tn-dgroup{display:flex;flex-direction:column;border-bottom:1px solid #ffffff14}
.tn-dhead{display:flex;align-items:center;gap:8px;width:100%;min-height:52px;padding:0 8px;background:none;border:0;text-align:left;cursor:pointer;color:#c7d1db!important;font-size:14px!important;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.tn-dhead span{flex:1}.tn-dhead svg{flex:none;color:#8c9bab}
.tn-dhead em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600;font-size:13px;color:#ff8f73;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-dgroup.has-on .tn-dhead{color:#fff!important}.tn-dgroup.has-on .tn-dhead span::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#e2483d;margin-right:8px;vertical-align:1px}
.tn-ditems{display:flex;flex-direction:column;padding:0 0 8px 11px}
.tn-ditems button{background:none;border:0;text-align:left;padding:0 13px;min-height:48px;border-radius:6px;justify-content:flex-start;display:flex;align-items:center;cursor:pointer}
.tn-ditems button.on{background:#d9383640;color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #e2483d}
.tn-dfoot{margin-top:auto;display:flex;align-items:center;gap:10px;border-top:1px solid #ffffff1a;padding-top:13px}.tn-dfoot div{flex:1;min-width:0}.tn-dfoot b,.tn-dfoot small{display:block}.tn-dfoot small{opacity:.7}
.tn-dfoot button{background:#ffffff12;border:0;border-radius:7px;padding:7px}

/* Bảng tiến độ dưới thanh menu */
.vb-head{left:0!important;width:100vw!important;top:var(--tn-h)!important}
.vb-error{left:0!important}
.vb-list{max-height:calc(100vh - var(--vb-head) - var(--tn-h) - 34px)}

/* ===== Trang nghiệp vụ (giao diện sáng kiểu Open24h) ===== */
.erp-main{color:#1f2430;font-size:14.5px}
.e-page{padding:17px 19px 32px}
.e-page-head{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.e-page-head h1,.wb-left h1{font-size:23px;margin:0;letter-spacing:-.3px;line-height:1.3}
.e-card{background:#fff;border:1px solid var(--e-line);border-radius:8px;box-shadow:0 1px 2px #0000000d}
.e-scroll{overflow-x:auto}
table.e-table{width:100%;min-width:0;border-collapse:collapse;font-size:14.5px}
.e-table th{background:var(--e-head);color:#2a2f38;font-weight:700;font-size:14px;padding:11px;border-bottom:1px solid var(--e-line);text-align:left;white-space:nowrap}
.e-table td{padding:11px;border-bottom:1px solid #edf0f3;white-space:nowrap;vertical-align:middle}
.e-table .n{text-align:right}
.e-table tr.trow{cursor:pointer}.e-table tr.trow:hover td{background:#f6f8fb}
.e-table tr.sel td{background:#eef4fc!important;border-bottom-color:#cddcf0}
.e-table .plate,.plate{color:var(--e-plate);font-weight:700}
.e-table .elink,.elink{color:#1f63b5}
.e-table .clip{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.e-table .debt,.debt{color:#c9372c;font-weight:600}
.empty-row{text-align:center;color:#8b919c;padding:28px!important;white-space:normal!important}
.num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;font-size:12px;font-weight:700;background:#5cb85c}
.num.st-blue{background:#5cb85c}.num.st-green{background:#1f6fd1}.num.st-gray{background:#9aa1ab}
.has-card{color:#8a6bd1;margin-left:6px;vertical-align:-1px}
.st{display:inline-block;font-size:12.5px;font-weight:600;border-radius:12px;padding:2px 10px;margin-left:8px;vertical-align:middle;white-space:nowrap}
td>.st{margin-left:0}
.st-amber{background:#fff4d6;color:#8a5a00}.st-green{background:#e2f6ea;color:#1f7a4a}.st-blue{background:#e5effc;color:#1d4f91}.st-gray{background:#eceef1;color:#5d6470}

.e-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #d5d9e0;background:#fff;color:#2a2f38;border-radius:6px;padding:8px 14px;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.e-btn:hover{filter:brightness(.97)}.e-btn:disabled{opacity:.5;cursor:not-allowed}
.e-btn.primary{background:var(--e-blue);border-color:var(--e-blue);color:#fff}
.e-btn.primary.dark,.e-btn.dark{background:#3a3f47;border-color:#3a3f47;color:#fff}
.e-btn.green{background:#1f8a4c;border-color:#1f8a4c;color:#fff}
.e-btn.danger{background:#c9372c;border-color:#c9372c;color:#fff}
.e-btn.danger-text{color:#c9372c;border-color:transparent;background:none}
.e-btn.sm{padding:6px 11px;font-size:14px;background:#e9ecf1;border-color:#e0e3e8}
.e-btn.sm.primary{background:var(--e-blue);border-color:var(--e-blue);color:#fff}.e-btn.sm.danger{background:#c9372c;border-color:#c9372c;color:#fff}
.e-btn.trello{background:#efe9fb;border-color:#ddd2f6;color:#5b3fb0}
.e-icon{background:none;border:0;border-radius:6px;padding:5px;color:#6b7280;cursor:pointer;display:inline-flex}.e-icon:hover{background:#eef0f3;color:#1f2430}
.grow{flex:1}
.e-alert{background:#fff0ee;border:1px solid #ffd2cc;color:#b42318;border-radius:7px;padding:10px 13px;margin:0 0 10px;display:flex;justify-content:space-between;cursor:pointer}
.e-err{color:#c9372c;font-size:14.5px}.ok{color:#1f7a4a;font-weight:600}
.inline-confirm{display:inline-flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap}

/* Bàn làm việc chia đôi */
.wb{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:17px;padding:15px 17px 25px;align-items:start}
@media(max-width:1100px){.wb{grid-template-columns:minmax(0,1fr)}}
.wb-left h1{margin-bottom:10px}
.wb-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.wb-search{display:flex;flex:1;min-width:220px;max-width:420px;margin-left:auto}
.wb-search.wide{margin-left:0;max-width:460px}
.wb-search input{flex:1;min-width:0;border:1px solid #d5d9e0;border-right:0;border-radius:6px 0 0 6px;padding:8px 13px;font-size:14.5px;background:#fff}
.wb-search button{border:0;background:var(--e-blue);color:#fff;border-radius:0 6px 6px 0;padding:0 14px;display:flex;align-items:center}
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;background:#fff;border:1px solid var(--e-line);border-radius:8px;box-shadow:0 8px 24px #0002;padding:5px;min-width:180px;display:flex;flex-direction:column}
.dd-menu button{background:none;border:0;text-align:left;padding:8px 11px;border-radius:5px;font-size:14.5px;justify-content:flex-start;cursor:pointer;white-space:nowrap}
.dd-menu button:hover{background:#f1f3f6}.dd-menu button.on{background:#e5effc;color:#1d4f91;font-weight:600}
.wb-confirm{background:#fff8e6;border:1px solid #f1d8a0;border-radius:7px;padding:10px 13px;margin-bottom:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.table-card{overflow:hidden}
.actions-row td{background:#eef4fc;padding:8px 11px!important;white-space:normal}
.row-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pick-quote{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:14px}
.pager{display:flex;align-items:center;gap:15px;flex-wrap:wrap;padding:11px 13px;background:#f3f5f8;border-top:1px solid var(--e-line);font-size:14px;color:#4a505b}
.pager label{display:flex;align-items:center;gap:6px;font-weight:600;margin:0;font-size:14px;color:#2a2f38}
.pager select{border:1px solid #d5d9e0;border-radius:5px;padding:4px 6px;background:#fff}
.pg{display:flex;gap:3px;margin-left:auto}
.pg button{min-width:30px;height:30px;border:0;background:none;border-radius:5px;color:#1f63b5;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pg button.on{background:var(--e-blue);color:#fff}.pg button:disabled{opacity:.35}
.wb-right{display:flex;flex-direction:column;gap:17px}
.wb-pane .pane-head{display:flex;align-items:center;gap:13px;margin-bottom:8px;min-height:39px}
.pane-for{font-size:14px;color:#5d6470}
.empty-pane{padding:32px;text-align:center;color:#6b7280}

/* Hộp thoại sáng */
.e-overlay{position:fixed;inset:0;width:100vw;height:100vh;z-index:120;background:#141a2466;backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding:30px 15px;overflow:auto}
.e-modal{background:#fff;color:#1f2430;border-radius:12px;width:min(620px,100%);box-shadow:0 20px 60px #0004;display:flex;flex-direction:column;font-size:14.5px}
.e-modal.wide{width:min(1180px,100%)}
.e-modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:17px 21px;border-bottom:1px solid var(--e-line)}
.e-modal-head h2{margin:4px 0 0;font-size:21px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.e-modal-body{padding:17px 21px}
.e-modal-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:13px 21px;border-top:1px solid var(--e-line);background:#fafbfc;border-radius:0 0 12px 12px;position:sticky;bottom:0}
.e-modal label,.e-page label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#4a505b;margin:0 0 12px}
.e-modal input,.e-modal select,.e-modal textarea{border:1px solid #d5d9e0;border-radius:7px;padding:10px 12px;font-size:15px;background:#fff;color:#1f2430;width:100%;font-family:inherit}
.e-modal input:focus,.e-modal textarea:focus,.e-modal select:focus{outline:2px solid #1d4f9133;border-color:var(--e-blue)}
.e-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 13px}.e-grid2 .span2{grid-column:1/-1}
.e-grid3{display:grid;grid-template-columns:1fr 1.3fr .8fr;gap:0 13px}
@media(max-width:640px){.e-grid2,.e-grid3{grid-template-columns:1fr}}
.e-sec{font-size:13px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#1d4f91;margin:4px 0 8px}
.e-hint{color:#5d6470;margin:0 0 12px;line-height:1.5}
.e-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:6px}
.e-check{flex-direction:row!important;align-items:center;gap:8px!important;font-weight:500!important}.e-check input{width:auto!important}
.cust-fields{position:relative}
.cust-linked{display:flex;align-items:center;gap:8px;background:#e2f6ea;color:#1f7a4a;border-radius:7px;padding:7px 11px;margin-bottom:10px;font-size:14px}
.cust-linked button{margin-left:auto;background:none;border:0;text-decoration:underline;color:inherit;cursor:pointer}
.cust-sug{border:1px solid #cddcf0;background:#f5f9ff;border-radius:8px;padding:6px;margin:-4px 0 12px;display:flex;flex-direction:column;gap:2px}
.cust-sug small{color:#5d6470;padding:2px 6px}
.cust-sug button{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid #e3e9f3;border-radius:6px;padding:7px 10px;cursor:pointer;text-align:left;justify-content:flex-start}
.cust-sug button:hover{border-color:var(--e-blue)}.cust-sug em{margin-left:auto;font-style:normal;color:var(--e-plate);font-weight:700;font-size:13px}

/* Báo giá / hóa đơn */
.veh-strip{display:flex;flex-wrap:wrap;gap:8px 23px;align-items:center;background:#f3f6fa;border:1px solid #e1e7ef;border-radius:9px;padding:11px 15px;margin-bottom:14px}
.veh-strip small{display:block;color:#6b7280;font-size:12px;margin-bottom:2px}.veh-strip b{font-size:15.5px}.veh-strip span{display:block;font-size:13px;color:#4a505b}
.veh-strip .plate{font-size:17.5px}
.veh-strip .trello{margin-left:auto}
.quote-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:19px;align-items:start}
@media(max-width:900px){.quote-grid{grid-template-columns:1fr}}
.items-block{margin-bottom:16px}
.items-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14.5px;text-transform:uppercase;letter-spacing:.4px;color:#1d4f91;margin-bottom:6px}
.items-title span{background:#e5effc;border-radius:10px;padding:0 8px;font-size:12px}.items-title b{margin-left:auto;color:#1f2430}
table.items td{padding:5px 6px}table.items th{padding:8px 6px}
table.items input{border:1px solid transparent;border-radius:5px;padding:6px 7px;font-size:14.5px;width:100%;background:transparent}
table.items input:hover{border-color:#e1e5ea}table.items input:focus{border-color:var(--e-blue);background:#fff;outline:none}
table.items .name{min-width:220px;white-space:normal}table.items .name small{display:block;color:#8b919c;font-size:12px;padding-left:7px}
table.items .unit{width:70px}table.items .qty{width:64px}table.items .price{width:120px}table.items .disc{width:62px}table.items .total{width:120px;font-weight:700}
table.items .qty input,table.items .price input,table.items .disc input{text-align:right}
.add-item{position:relative;display:flex;align-items:center;gap:7px;border:1px dashed #b9c6d8;border-radius:7px;padding:2px 11px;margin-top:6px;color:#6b7280;background:#fbfcfe}
.add-item input{border:0!important;outline:0!important;flex:1;padding:8px 0!important;background:none!important}
.add-sug{position:absolute;left:0;right:0;top:100%;z-index:10;background:#fff;border:1px solid var(--e-line);border-radius:8px;box-shadow:0 10px 26px #0002;padding:4px;margin-top:3px}
.add-sug button{display:flex;width:100%;justify-content:space-between;gap:11px;background:none;border:0;padding:8px 11px;border-radius:5px;text-align:left;cursor:pointer;font-size:14.5px;color:#1f2430}
.add-sug button.on,.add-sug button:hover{background:#eef4fc}.add-sug em{font-style:normal;color:#8b919c;margin-right:8px;font-size:13px}
.quote-sum{background:#f7f9fb;border:1px solid #e3e8ee;border-radius:10px;padding:13px 15px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0}
.quote-sum>div{display:flex;justify-content:space-between;align-items:center;gap:11px;padding:6px 0;border-bottom:1px dashed #e1e5ea}
.quote-sum>div span{color:#4a505b}
.quote-sum .sum-input{width:130px!important;text-align:right;padding:6px 8px!important}
.quote-sum .vat{display:flex;align-items:center;gap:8px}.quote-sum .vat select{width:70px;padding:5px}
.quote-sum .grand{border-bottom:0;padding-top:11px}.quote-sum .grand b{font-size:22px;color:#1d4f91}
.quote-sum .grand.debt b{color:#c9372c}.quote-sum .okc{color:#1f7a4a}
.quote-sum label{margin-top:10px}
.quote-sum .meta{color:#8b919c;margin-top:6px}
.pays{display:flex;flex-direction:column;border:0!important}
.pays>div{display:flex;align-items:center;gap:6px;font-size:13px;padding:4px 0}.pays span{flex:1}.pays small{display:block;color:#8b919c}
.pay-form{display:flex;flex-direction:column;gap:6px!important;border:0!important;align-items:stretch!important;margin-top:8px}
.pay-form input,.pay-form select{width:100%}

/* Trang danh sách */
.seg{display:inline-flex;background:#e9ecf1;border-radius:7px;padding:3px}
.seg button{border:0;background:none;border-radius:5px;padding:6px 12px;font-size:14px;font-weight:600;color:#4a505b;cursor:pointer}
.seg button.on{background:#fff;color:#1d4f91;box-shadow:0 1px 2px #0002}
.sum-chips{display:flex;gap:15px;margin-left:auto;font-size:14.5px}
.coming{max-width:620px;margin:40px auto;padding:36px;text-align:center;color:#4a505b}
.coming svg{color:var(--red)}.coming h1{font-size:24px;margin:10px 0}.coming .muted{color:#8b919c;font-size:14px;line-height:1.6}
.erp-main .staff{margin-top:4px}

/* ===== Liên kết từ thẻ Trello (giao diện tối) ===== */
/* Hàng 1: khung thông tin (mã PTN + số báo giá / khách · SĐT ở dòng dưới) co giãn; cụm nút gọn bên phải.
   Không đủ chỗ (cửa sổ hẹp / điện thoại) → cụm nút tự xuống hàng 2, hai nút chia đều chiều ngang. */
.quote-link{margin:14px 0 0 28px;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
@media(max-width:760px){.quote-link{margin-left:0}}
.ql-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.quote-btn{display:inline-flex!important;align-items:center;justify-content:center!important;gap:6px;background:#1f8a4c!important;color:#fff!important;border:0;border-radius:8px;padding:8px 14px;font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;box-shadow:0 2px 8px #1f8a4c55;white-space:nowrap}
.quote-btn:hover{filter:brightness(1.08)}
/* Màu theo trạng thái duyệt giá (cùng quy tắc với nhãn ngoài bảng): vàng = còn báo giá chưa duyệt, xanh lá = tất cả đã duyệt, trung tính = chưa có báo giá */
.quote-btn.qs-none{background:#454f59!important;box-shadow:0 2px 6px #0005}
.quote-btn.qs-pending{background:#f5cd47!important;color:#172b4d!important;box-shadow:0 2px 8px #f5cd4755}
.quote-btn.qs-approved{background:#1f8a4c!important;box-shadow:0 2px 8px #1f8a4c55}
.ql-info{flex:1 1 280px;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 11px;background:#1d2125;border:1px solid #38414a;border-radius:8px;padding:8px 13px;cursor:pointer;text-align:left;justify-content:flex-start!important;line-height:1.35}
.ql-info:hover{border-color:#579dff}
.ql-code{font-weight:800;color:#579dff;white-space:nowrap}.ql-sub{margin-left:auto;color:var(--vb-muted);font-size:14px;white-space:nowrap}
.ql-go{flex:none}
.ql-cust{flex:1 1 100%;min-width:0;color:#dee4ea;overflow-wrap:anywhere}
@media(max-width:760px){.ql-info{flex-basis:100%}.ql-actions{flex:1 1 100%}.ql-actions>button{flex:1 1 0;min-height:45px}}
.ql-none{flex:1;align-self:center;color:var(--vb-muted);font-size:14px}

/* ===== Bước 5: Trang Báo giá toàn màn hình (kiểu Open24h) ===== */
.del-file{color:#f87168;text-decoration:line-through;text-decoration-thickness:1px}
.ql-blocked{flex-basis:100%;font-size:14px;color:#f5cd47}.ql-blocked a{color:#85b8ff;font-weight:700}
.quote-info .mono,input.mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.5px}
.seg.big{display:flex;margin-bottom:14px}.seg.big button{flex:1;padding:11px;font-size:15px}.seg.big b{color:#1d4f91;margin-right:4px}
.pcode{font-weight:700;font-family:ui-monospace,Menlo,monospace;font-size:14px}.pcode.hh{color:#3a3f47}.pcode.dv{color:#1769c2}
.unit-blue{color:#1769c2;font-weight:600}
.e-table .name small.wty{display:block;color:#1f8a4c;font-weight:600}

.shell.quote-mode main.erp-main{min-height:0}
.qs{height:calc(100dvh - var(--tn-h));display:flex;flex-direction:column;background:#eef0f4;color:#1f2329;font-size:15px}
.qs-loading{margin:auto;display:flex;flex-direction:column;gap:13px;align-items:center;color:#5d6470}
.qs-top{display:flex;align-items:center;gap:11px;padding:8px 13px;background:#fff;border-bottom:1px solid #d9dde4;flex:none}
.qs-back{border:1px solid #d5d9e0;background:#fff;border-radius:7px;width:39px;height:39px;display:grid;place-items:center;cursor:pointer;color:#3a3f47;flex:none}
.qs-search{position:relative;flex:0 1 560px;min-width:240px;display:flex;align-items:center;border:1px solid #c9ced8;border-radius:7px;background:#fff;padding-left:12px;height:41px}
.qs-search:focus-within{border-color:#1769c2;box-shadow:0 0 0 3px #1769c222}
.qs-search>svg{color:#7a828f;flex:none}
.qs-search input{flex:1;border:0;outline:0;background:none;padding:0 11px;font-size:15.5px;height:100%;min-width:0}
.qs-plus{flex:none;height:100%;width:45px;border:0;border-left:1px solid #c9ced8;background:#f5f7fa;color:#1769c2;cursor:pointer;border-radius:0 7px 7px 0;display:grid;place-items:center}
.qs-plus:hover{background:#e8f0fb}
.qs-sug{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;background:#fff;border:1px solid #d5d9e0;border-radius:8px;box-shadow:0 12px 32px #0003;max-height:min(440px,60vh);overflow:auto;padding:4px}
.qs-sug button{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:15px;color:#1f2329}
.qs-sug button.on{background:#e8f0fb}
.qs-sug .code{flex:none;min-width:62px;font:700 13px ui-monospace,Menlo,monospace;padding:2px 6px;border-radius:4px;text-align:center}
.qs-sug .code.hh{background:#eceef2;color:#3a3f47}.qs-sug .code.dv{background:#dcebfb;color:#1769c2}
.qs-sug .nm{flex:1;min-width:0}.qs-sug .nm small{display:block;color:#1f8a4c;font-size:12.5px}
.qs-sug .un{color:#1769c2;font-size:14px;flex:none}.qs-sug b{flex:none;min-width:90px;text-align:right}
.qs-sug .create{color:#1769c2;font-weight:600;border-top:1px solid #eceef2;border-radius:0 0 6px 6px}
.qs-sug-empty{padding:10px;color:#7a828f;font-size:14.5px}
.qs-tabs{display:flex;align-items:flex-end;gap:4px;overflow-x:auto;flex:1;min-width:0;align-self:stretch;margin-bottom:-8px}
.qs-tab{flex:none;border:1px solid #d5d9e0;border-bottom:0;background:#f1f3f6;color:#4a505b;border-radius:8px 8px 0 0;padding:6px 15px 7px;cursor:pointer;font-weight:600;font-size:14.5px;display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.qs-tab small{font-weight:500;font-size:11.5px;color:#7a828f}
.qs-tab.on{background:#eef0f4;color:#1769c2;border-color:#c9ced8;box-shadow:inset 0 3px 0 #1769c2}
.qs-tab.inv{color:#9a5b00}.qs-tab.add{align-self:center;margin-bottom:8px;border-radius:7px;border-bottom:1px solid #d5d9e0;padding:7px 10px;color:#1769c2;background:#fff}

.qs-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,72fr) minmax(300px,28fr);gap:11px;padding:11px 13px 13px}
.qs-main{background:#fff;border:1px solid #d9dde4;border-radius:8px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.qs-lock{background:#fff6e0;border-bottom:1px solid #f1d9a0;color:#7a5200;padding:8px 13px;font-size:14.5px}.qs-lock .elink{border:0;background:none;cursor:pointer;color:#1769c2;font-weight:700}
.qs-table-wrap{flex:1;overflow:auto;min-height:0;position:relative}
.qs-table{width:100%;min-width:960px;border-collapse:separate;border-spacing:0;table-layout:fixed}
.qs-table col.c-stt{width:48px}.qs-table col.c-code{width:76px}.qs-table col.c-unit{width:62px}.qs-table col.c-qty{width:82px}.qs-table col.c-wty{width:150px}
.qs-table col.c-price{width:100px}.qs-table col.c-disc{width:66px}.qs-table col.c-total{width:104px}.qs-table col.c-act{width:84px}
.qs-table th{position:sticky;top:0;z-index:2;background:#e4e8ee;color:#2a2f38;font-weight:700;font-size:14px;text-align:left;padding:8px 5px;border-bottom:1px solid #cfd4dc;line-height:1.2}
.qs-table th.n{text-align:right}
.qs-table td{padding:4px 4px;border-bottom:1px solid #eceef2;vertical-align:middle}
.qs-table tr:hover td{background:#f8fafc}
.qs-table textarea{display:block;width:100%;resize:none;field-sizing:content;min-height:32px;line-height:1.3;border:1px solid transparent;background:transparent;border-radius:5px;padding:6px 5px;font:inherit;color:inherit;outline:0}
.qs-table textarea:hover:not(:disabled){border-color:#d5d9e0;background:#fff}.qs-table textarea:focus{border-color:#1769c2;background:#fff;box-shadow:0 0 0 2px #1769c222}.qs-table textarea:disabled{color:inherit;-webkit-text-fill-color:currentColor;opacity:1}
.qs-table input{width:100%;border:1px solid transparent;background:transparent;border-radius:5px;padding:6px 6px;font:inherit;color:inherit;outline:0}
.qs-table input:hover:not(:disabled){border-color:#d5d9e0;background:#fff}
.qs-table input:focus{border-color:#1769c2;background:#fff;box-shadow:0 0 0 2px #1769c222}
.qs-table input:disabled{color:inherit;-webkit-text-fill-color:currentColor;opacity:1}
.qs-table .stt{text-align:center;color:#4a505b;font-weight:600}
.stt-dv{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#1769c2;color:#fff;font-size:13px;font-weight:700}
.qs-table .code{font:600 13px ui-monospace,Menlo,monospace;color:#3a3f47;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-table tr.dv .code{color:#1769c2}
.qs-table .name textarea{font-weight:600}
.qs-table .unit input{color:#1769c2;font-weight:600}
.qty-box{display:flex;align-items:center;border:1px solid #d5d9e0;border-radius:6px;background:#fff;overflow:hidden}
.qty-box input{border:0!important;box-shadow:none!important;text-align:center;padding:6px 2px;min-width:0}
.qty-box .spin{display:flex;flex-direction:column;border-left:1px solid #d5d9e0;flex:none}
.qty-box .spin button{border:0;background:#f5f7fa;width:24px;height:16px;display:grid;place-items:center;cursor:pointer;color:#4a505b;padding:0}
.qty-box .spin button:hover{background:#dcebfb;color:#1769c2}
.qty-box .spin button+button{border-top:1px solid #d5d9e0}
.qs-table .wty textarea{color:#1f6d3e;font-size:14px}
.qs-table .price input,.qs-table .disc input{text-align:right}
.qs-table .total{text-align:right;font-weight:700;white-space:nowrap}
.qs-table .act{white-space:nowrap;text-align:right}
.qs-table .act button{width:26px;height:26px;border:1px solid #d5d9e0;background:#fff;border-radius:5px;cursor:pointer;display:inline-grid;place-items:center;margin-left:3px;color:#4a505b;padding:0}
.qs-table .act button:hover{border-color:#1769c2;color:#1769c2}
.qs-table .act button.del:hover{border-color:#c9372c;color:#fff;background:#c9372c}
.qs-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:70px 21px;color:#7a828f;text-align:center}.qs-empty p{margin:6px 0 0;font-size:16.5px;font-weight:600;color:#4a505b}
.qs-foot{flex:none;display:flex;gap:23px;justify-content:flex-end;padding:10px 15px;border-top:1px solid #e3e6ec;background:#f8f9fb;font-size:14.5px;color:#4a505b;flex-wrap:wrap}

.qs-side{background:#fff;border:1px solid #d9dde4;border-radius:8px;display:flex;flex-direction:column;gap:11px;padding:15px;overflow:auto;min-height:0}
.qs-cust{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:1px solid #eceef2;padding-bottom:8px}
.qs-cust .nm{font-size:17.5px;font-weight:800;color:#1769c2}
.qs-cust .debt{font-weight:700;color:#4a505b;white-space:nowrap}.qs-cust .debt.has{color:#c9372c}
.qs-meta{display:flex;justify-content:space-between;gap:8px;align-items:center}
.qs-meta .ptn{font-weight:700;color:#1f2329;background:#f1f3f6;border-radius:5px;padding:5px 8px;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qs-meta .when{color:#5d6470;font-size:14px;white-space:nowrap}
.qs-veh{color:#5d6470;font-size:14px;line-height:1.45}
.qs-trello{align-self:flex-start}
.qs-status{font-size:14px;color:#4a505b}
.qs-calc{display:flex;flex-direction:column;border-top:1px solid #eceef2;padding-top:6px}
.qs-calc>div{display:flex;justify-content:space-between;align-items:center;gap:11px;padding:7px 0;border-bottom:1px dashed #e3e6ec}
.qs-calc>div>span:first-child{color:#3a3f47}
.qs-calc b{font-size:15.5px}
.qs-calc .calc-in{width:140px;text-align:right;border:1px solid #d5d9e0;border-radius:6px;padding:6px 8px;font:inherit;font-weight:700}
.qs-calc .vat{display:flex;align-items:center;gap:11px}.qs-calc select{border:1px solid #d5d9e0;border-radius:6px;padding:5px 6px;font:inherit}
.qs-calc .due b{color:#c9372c;font-size:20px}
.qs-calc .grand b{color:#1769c2;font-size:20px}
.qs-calc textarea{margin-top:10px;border:1px solid #d5d9e0;border-radius:6px;padding:8px;font:inherit;resize:vertical;min-height:62px}
.qs-ok{background:#e3f5ea;color:#1f6d3e;border-radius:6px;padding:7px 11px;font-weight:600;font-size:14.5px}
.qs-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.qs-save{margin-top:auto;display:flex;align-items:stretch;gap:11px;border-top:1px solid #eceef2;padding-top:13px;position:sticky;bottom:-14px;background:#fff;padding-bottom:2px}
.qs-save{flex-wrap:wrap}
/* Nút DUYỆT GIÁ (xanh lá) / BỎ DUYỆT (đỏ) — thao tác ngay trên báo giá đang mở */
.approve-btn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;min-height:58px;border:0;border-radius:8px;padding:8px 11px;font-size:16.5px;font-weight:800;letter-spacing:.3px;color:#fff;cursor:pointer;line-height:1.2;text-align:center}
.approve-btn.on{background:#1f8a4c;box-shadow:0 4px 14px #1f8a4c55}
.approve-btn.off{background:#c9372c;box-shadow:0 4px 14px #c9372c55}
.approve-btn:hover:not(:disabled){filter:brightness(1.08)}
.approve-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.approve-btn[aria-busy=true]{cursor:progress;opacity:.8}
.approve-why{order:3;flex:1 1 100%;font-size:12.5px;line-height:1.35;color:#8a5a00}
.qs-save .qs-save-btn{flex:1 1 0;min-width:0}
.tgl{position:relative;width:78px;height:35px;border-radius:16px;border:0;background:#c9ced8;cursor:pointer;padding:0;transition:background .15s}
.tgl span{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:0 10px 0 0;color:#fff;font-weight:800;font-size:14px}
.tgl::before{content:'';position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0004;transition:left .15s}
.tgl.on{background:#1f8a4c}.tgl.on span{justify-content:flex-start}.tgl.on::before{left:49px}
.qs-save-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;background:#1769c2;color:#fff;font-size:20px;font-weight:800;cursor:pointer;min-height:58px;box-shadow:0 4px 14px #1769c255}
.qs-save-btn:hover{background:#1a77dc}.qs-save-btn:disabled{opacity:.6}

.pp-overlay{position:fixed;inset:0;z-index:300;background:#3b3f46;display:flex;flex-direction:column}
.pp-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;background:#24272c;color:#fff;font-size:15.5px;flex-wrap:wrap}
.pp-bar .grow{flex:1}
.pp-frame{flex:1;border:0;background:#fff;width:min(900px,100%);margin:14px auto;box-shadow:0 6px 30px #0007;border-radius:2px}

@media (max-width:900px){
  .qs{height:auto;min-height:calc(100dvh - var(--tn-h))}
  .qs-top{flex-wrap:wrap}.qs-search{flex:1 1 100%;order:2}.qs-tabs{order:3;flex-basis:100%;margin-bottom:-8px}
  .qs-body{grid-template-columns:1fr;padding:8px}
  .qs-main{min-height:340px}.qs-table-wrap{max-height:none}
  .qs-save{position:sticky;bottom:0}
  .pp-frame{margin:0;width:100%}
}
.opening{min-height:calc(100dvh - var(--tn-h));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;color:#3a3f47;text-align:center;padding:21px;background:#eef0f4}
.opening h2{margin:0;font-size:18.5px}.opening p{max-width:460px;color:#5d6470}
.opening .spinner{width:41px;height:41px;border-radius:50%;border:4px solid #d5dbe4;border-top-color:#1769c2;animation:opspin .8s linear infinite}
@keyframes opspin{to{transform:rotate(360deg)}}

/* ===== Bước 7: tỷ lệ báo giá / hóa đơn — khung phải hẹp, bảng chữ lớn ===== */
.qs{font-size:16px}
.qs-body{grid-template-columns:minmax(0,1fr) clamp(300px,23vw,360px)}
.qs-table{min-width:880px;font-size:16.5px}
.qs-table th{font-size:15px;padding:11px 6px;white-space:normal}
.qs-table th.c{text-align:center}
.qs-table td{padding:6px 5px}
.qs-table col.c-stt{width:50px}.qs-table col.c-code{width:84px}.qs-table col.c-unit{width:66px}.qs-table col.c-qty{width:96px}
.qs-table col.c-wty{width:16%}.qs-table col.c-price{width:118px}.qs-table col.c-disc{width:72px}.qs-table col.c-total{width:126px}.qs-table col.c-act{width:100px}
.qs-table textarea,.qs-table input{font-size:16.5px;min-height:39px}
.qs-table .name textarea,.qs-table .ro-text{font-weight:600;line-height:1.35}
.qs-table .ro-text{white-space:normal;overflow-wrap:anywhere;padding:6px 5px}
.qs-table .ro-text.wty-t{font-weight:500;color:#1f6d3e;font-size:15px}
.qs-table .ro-num{text-align:right;padding:6px 5px;white-space:nowrap}.qs-table .ro-num.c{text-align:center}
.qs-table .ro-unit{color:#1769c2;font-weight:600;padding:0 5px}
.qs-table .code{font-size:14.5px}
.qs-table .wty textarea{font-size:15px}
.qs-table .price input{text-align:right}
.qs-table .total{font-size:17px;padding-right:8px}
.qty-box input{font-size:16.5px;padding:7px 2px}
.qty-box .spin button{width:28px;height:19px}
.qs-table .act button{width:30px;height:30px}
.stt-dv{width:28px;height:28px;font-size:14.5px}
.qs-side{padding:13px;gap:8px}
.qs-cust .nm{font-size:17.5px;overflow-wrap:anywhere}
.qs-calc>div{padding:6px 0}
.qs-calc .calc-in{width:130px}
.qs-calc .due b,.qs-calc .grand b{font-size:18.5px}
.qs-save-btn{min-height:54px;font-size:18.5px}
.qs-tab span{display:flex;align-items:center;gap:5px}
.qs-tab .dot{width:7px;height:7px;border-radius:50%;background:#e8920c;display:inline-block}
.qs-plus-wrap{position:relative;align-self:center;margin-bottom:8px}
.qs-plus-wrap .qs-tab.add{margin:0}
.qs-plus-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;background:#fff;border:1px solid #d5d9e0;border-radius:9px;box-shadow:0 12px 32px #0003;min-width:300px;padding:6px;display:flex;flex-direction:column}
.qs-plus-menu button{display:flex;align-items:center;gap:8px;border:0;background:none;padding:10px 11px;border-radius:6px;cursor:pointer;font-size:15.5px;color:#1f2329;text-align:left}
.qs-plus-menu button:hover:not(:disabled){background:#e8f0fb}.qs-plus-menu button span{flex:1}
.qs-plus-menu .sep{font-size:12.5px;font-weight:700;color:#5d6470;padding:8px 11px 4px;border-top:1px solid #eceef2;margin-top:4px;letter-spacing:.3px}
.qs-plus-menu .none,.qs-plus-menu .blocked{font-size:14px;color:#7a828f;padding:6px 11px;display:flex;align-items:center;gap:6px}
.qs-tabs{overflow:visible;flex-wrap:wrap}
.qs-draft{background:#fff3df;border-bottom:1px solid #f1d39a;color:#6b4a00;padding:8px 13px;font-size:15px}
.qs-draft .elink,.qs-lock .elink{border:0;background:none;cursor:pointer;color:#1769c2;font-weight:700;display:inline-flex;align-items:center;gap:3px}
.qs-lock{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:15px}
.qs-lock.info{background:#eef4fc;border-color:#cfe0f5;color:#24476e}
.qs-doc-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17.5px;color:#1f2329;flex:0 1 auto}
.qs-doc-title small{font-weight:500;color:#5d6470;font-size:14px}
.qs-hint{margin:0;font-size:14px;color:#8a5a00;display:flex;gap:5px;align-items:center}
.qs-pays>div{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed #e3e6ec;font-size:14.5px}
.qs-pays span{flex:1;min-width:0}.qs-pays small{display:block;color:#7a828f}.qs-pays b{color:#1f6d3e}
.qs-payform{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qs-payform input,.qs-payform select{border:1px solid #d5d9e0;border-radius:6px;padding:7px 8px;font:inherit;min-width:0}
.qs-payform .calc-in{width:auto}
.qs-payform input:not(.calc-in){grid-column:1/-1}.qs-payform button{grid-column:1/-1;justify-content:center}
.okc{color:#1f6d3e}
.e-warn{background:#fff3df;border:1px solid #f1d39a;color:#6b4a00;border-radius:7px;padding:10px 12px;margin:10px 0;font-size:15px;display:flex;gap:11px;align-items:center;flex-wrap:wrap}
@media (max-width:1100px){.qs-body{grid-template-columns:minmax(0,1fr) 300px}}
@media (max-width:900px){.qs-body{grid-template-columns:1fr}.qs-table{min-width:760px;font-size:16px}}

/* ===== Danh sách xe + hồ sơ lịch sử ===== */
.vcount{color:#5d6470;font-weight:600}
.veh-filters{display:flex;flex-wrap:wrap;gap:11px;align-items:flex-end;margin-bottom:10px}
.veh-filters .wb-search{flex:1 1 360px}
.vf{display:flex;flex-direction:column;gap:3px;font-size:13px;color:#5d6470;font-weight:600}
.vf input,.vf select{border:1px solid #d5d9e0;border-radius:6px;padding:7px 8px;font:inherit;font-size:15px;color:#1f2329;background:#fff;min-width:130px}
.vf-note{margin:0 0 8px;font-size:14px;color:#5d6470}
.plate-link{border:0;background:none;padding:0;color:var(--e-plate);font-weight:800;cursor:pointer;font-size:15.5px}
.plate-link:hover{text-decoration:underline}
.veh-table .vin{display:block;color:#7a828f;font:12px ui-monospace,Menlo,monospace}
.st.sm{font-size:12px;padding:1px 6px;margin-left:6px}
.vp-head{display:flex;flex-wrap:wrap;gap:15px;align-items:center;margin-bottom:12px}
.vp-title h1{margin:0;font-size:26.5px;color:var(--e-plate)}.vp-title span{color:#5d6470;font-weight:600}
.vp-facts{display:flex;gap:19px;flex-wrap:wrap;margin-left:auto}
.vp-facts>div{display:flex;flex-direction:column;background:#fff;border:1px solid var(--e-line);border-radius:8px;padding:7px 13px;min-width:120px}
.vp-facts small{color:#7a828f;font-size:12.5px}.vp-facts span{color:#5d6470;font-size:14px}
.vp-search{margin-bottom:10px;max-width:640px}
.visits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.visit{background:#fff;border:1px solid var(--e-line);border-radius:10px;overflow:hidden}
.visit.open{border-color:#b9cbe4;box-shadow:0 2px 10px #1d4f9114}
.visit-head{display:flex;gap:11px;width:100%;border:0;background:none;text-align:left;padding:13px 15px;cursor:pointer;color:#1f2329;align-items:flex-start}
.visit-head:hover{background:#f7f9fc}
.vh-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.vh-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vh-date{font-size:16.5px}.vh-code{font-weight:700;color:#1769c2}.vh-odo{font-weight:700;background:#f1f3f6;border-radius:5px;padding:2px 8px;font-size:14.5px}
.vh-warn{display:inline-flex;gap:4px;align-items:center;color:#a35a00;background:#fff3df;border-radius:5px;padding:2px 8px;font-size:14px;font-weight:600}
.vh-sum{font-size:15.5px;overflow-wrap:anywhere}.vh-meta{font-size:14px;color:#6b7280}
.visit-body{border-top:1px solid var(--e-line);padding:13px 15px;background:#fbfcfd}
.vb-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.vb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:17px}
.vb-col section{margin-bottom:12px}.vb-col h4{margin:0 0 5px;font-size:14px;color:#5d6470;text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;gap:5px}
.vb-col p{margin:0;font-size:15.5px;overflow-wrap:anywhere}.vb-col .pre{white-space:pre-wrap;margin-top:4px;color:#3a3f47}
.vb-col .muted,.muted{color:#7a828f;font-size:14.5px}
.doc-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:7px 0;border-bottom:1px dashed #e3e6ec}
.doc-row .elink{border:0;background:none;cursor:pointer;color:#1769c2;font-weight:700;display:inline-flex;gap:5px;align-items:center;padding:0;font-size:15px}
.doc-row b{margin-left:auto}.doc-row small{color:#7a828f}
.doc-items{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 11px;font-size:14px;color:#4a505b}
.ch-check{list-style:none;margin:0;padding:0;font-size:15px}.ch-check li.done{color:#6b7280;text-decoration:line-through}
.ch-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.ch-file{position:relative;border:1px solid var(--e-line);background:#fff;border-radius:7px;padding:0;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;min-width:0}
.ch-file img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ch-file .t{width:100%;aspect-ratio:4/3;display:grid;place-items:center;background:#eef1f5;color:#4a505b;font-weight:800;font-size:13px}
.ch-file small{font-size:12px;padding:3px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3a3f47}
.ch-file .pl{position:absolute;top:6px;left:6px;background:#0009;color:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}
.ch-cmt{font-size:14.5px;padding:5px 0;border-bottom:1px dashed #e3e6ec;overflow-wrap:anywhere}.ch-cmt time,.ch-log time{color:#7a828f;font-size:13px}.ch-cmt p{margin:2px 0 0}
.ch-log{list-style:none;margin:0;padding:0;font-size:14px;max-height:220px;overflow:auto;overflow-wrap:anywhere}.ch-log li{padding:2px 0}
@media (max-width:860px){.vb-grid{grid-template-columns:1fr}.vp-facts{margin-left:0}.vf input,.vf select{min-width:0;width:100%}.veh-filters .vf{flex:1 1 45%}}
/* Ghi đè quy tắc cũ td{font-size:12px;color:xám} ở styles.css cho bảng chứng từ */
.qs-table td{font-size:16.5px;color:#1f2329}
.qs-table td.code{font-size:14.5px;color:#3a3f47}.qs-table tr.dv td.code{color:#1769c2}
.qs-table td.stt{color:#4a505b}
.qs-plus-menu{left:auto;right:0}
/* Điện thoại / máy tính bảng: bảng cuộn ngang, cột tên luôn đủ rộng (≥ 240px) */
.qs-table{min-width:1000px}
@media (max-width:900px){.qs-table{min-width:980px;font-size:16px}.qs-table col.c-wty{width:150px}}
@media (min-width:1400px){.qs-table{min-width:0}}
.qs-table col.c-stt{width:45px}.qs-table col.c-code{width:76px}.qs-table col.c-unit{width:60px}.qs-table col.c-qty{width:92px}
.qs-table col.c-wty{width:14%}.qs-table col.c-price{width:112px}.qs-table col.c-disc{width:64px}.qs-table col.c-total{width:120px}.qs-table col.c-act{width:94px}
.qs-table{min-width:920px}
@media (max-width:900px){.qs-table{min-width:980px}}

/* ===== Bước 8: Báo cáo, hoa hồng, năng suất ===== */
.rep .period{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.period select,.period input{border:1px solid #d5d9e0;border-radius:6px;padding:6px 8px;font:inherit;font-size:14.5px;background:#fff}
.period-label{font-weight:700;color:#1f2329;margin-left:auto;font-size:15px}
.rep-note{display:flex;gap:6px;align-items:flex-start;font-size:14px;color:#4a505b;background:#f3f6fa;border:1px solid #e1e7ef;border-radius:8px;padding:8px 11px;margin:0 0 12px;line-height:1.5}
.rep-note.muted{background:none;border:0;color:#7a828f;padding:0}.rep-note.warn{background:#fff3df;border-color:#f1d39a;color:#6b4a00}
.rep-note .elink,.elink.btnlike{border:0;background:none;padding:0;color:#1769c2;font-weight:700;cursor:pointer}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px;margin-bottom:12px}
.kpis.small{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.kpi{position:relative;text-align:left;background:#fff;border:1px solid var(--e-line);border-radius:10px;padding:13px 15px;display:flex;flex-direction:column;gap:4px;color:#1f2329;font:inherit;cursor:default}
.kpi.click{cursor:pointer}.kpi.click:hover{border-color:#9fbbe0;box-shadow:0 2px 10px #1d4f9112}
.kpi:disabled{opacity:1}
.kpi-head{display:flex;justify-content:space-between;gap:8px;font-size:14px;color:#4a505b;font-weight:600;padding-right:15px}
.kpi .tag{font-style:normal;font-size:11.5px;font-weight:700;background:#eef2f7;color:#4a505b;border-radius:4px;padding:1px 6px;white-space:nowrap;align-self:flex-start}
.kpi .tag.bal{background:#fff1d6;color:#8a5a00}
.kpi-v{font-size:24px;font-weight:800;letter-spacing:-.3px;font-variant-numeric:tabular-nums}.kpi-v small{font-size:14.5px;font-weight:600;color:#5d6470}
.kpi-sub{font-size:13px;color:#5d6470}.kpi-go{position:absolute;right:8px;top:12px;color:#9aa3b0}
.delta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600}
.delta.up{color:#1f6d3e}.delta.down{color:#b3261e}.delta.flat{color:#7a828f}
.charts{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:11px}
.charts .chart:last-child{grid-column:1/-1}
.chart{padding:13px 15px}.chart h3{margin:0 0 8px;font-size:15.5px}
.bars{position:relative}.bars-scroll{overflow-x:auto}
.bars svg .grid{stroke:#eceef2;stroke-width:1}.bars svg .base{stroke:#c9ced8;stroke-width:1}.bars svg .hover{fill:#1769c20d}
.bars svg .tick{font-size:11px;fill:#7a828f}
.bars-legend{display:flex;gap:15px;align-items:center;font-size:14px;color:#3a3f47;margin-bottom:4px;flex-wrap:wrap}
.bars-legend i,.bars-tip i,.mix-t i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.bars-legend small{margin-left:auto;color:#7a828f}
.bars-tip{position:absolute;top:22px;right:4px;background:#fff;border:1px solid #d5d9e0;border-radius:7px;box-shadow:0 6px 18px #0002;padding:7px 11px;font-size:14px;display:flex;flex-direction:column;gap:2px;pointer-events:none}
.mix{display:flex;height:24px;border-radius:5px;overflow:hidden;gap:2px;margin:6px 0 10px}.mix i{display:block;height:100%}
.mix-t{width:100%;font-size:14.5px;border-collapse:collapse}.mix-t td{padding:4px 0;border:0;color:#1f2329;font-size:14.5px}.mix-t .n{text-align:right;font-variant-numeric:tabular-nums}
.rep-h{margin:16px 0 8px;font-size:16.5px}
.row-btns{white-space:nowrap}.row-btns .e-btn{margin-right:4px}
.ws-box{background:#f3f6fa;border:1px solid #e1e7ef;border-radius:8px;padding:8px 13px;font-size:14.5px;align-self:center}.ws-box small{color:#7a828f}
.num-link{border:0;background:#eef4fc;color:#1769c2;font-weight:800;font-size:16.5px;border-radius:6px;padding:3px 13px;cursor:pointer;min-width:45px}
.num-link:hover{background:#dcebfb}.num-link.bad{background:#fde8e6;color:#b3261e}
.e-table tr.sel td{background:#f1f6fd}
.tech-cards{margin-top:12px;padding:13px 15px}
.tc-head{display:flex;flex-wrap:wrap;gap:11px;align-items:center}.tc-head h3{margin:0;font-size:16.5px;display:flex;gap:6px;align-items:center}
.tc-head .wb-search{margin-left:auto;max-width:260px}
.items-cell span{display:block;font-size:14px;color:#1f6d3e}
.comm-btn{display:inline-flex!important;align-items:center;justify-content:center!important;gap:6px;background:#6e5dc6!important;color:#fff!important;border:0;border-radius:8px;padding:8px 14px;font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;white-space:nowrap}
.comm-btn:disabled{opacity:.45;cursor:not-allowed}
.cm-sec{border:1px solid var(--e-line);border-radius:9px;padding:11px 13px;margin-bottom:10px}
.cm-sec h3{margin:0 0 8px;font-size:15.5px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}.cm-sec h3 small{font-weight:500;color:#6b7280;font-size:13px}
.cm-sec.void{opacity:.7;background:#fafafa}
.cm-rows select,.cm-rows input{border:1px solid #d5d9e0;border-radius:6px;padding:6px 7px;font:inherit;font-size:14.5px;width:100%;min-width:0}
.cm-rows input.rate{width:80px;text-align:right}
.cm-rows-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:11px;flex-wrap:wrap}
.cm-reason{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;margin-top:8px}.cm-reason input{border:1px solid #d5d9e0;border-radius:6px;padding:7px 8px;font:inherit}
.void-row td{text-decoration:line-through;color:#9aa3b0}.sum-row td{background:#f7f8fa;font-weight:700}
.cm-log{margin-top:8px;max-height:260px;overflow:auto;font-size:14px;border-top:1px solid var(--e-line);padding-top:6px}.cm-log>div{padding:5px 0;border-bottom:1px dashed #e3e6ec}
.cm-ba{display:flex;flex-direction:column;color:#5d6470;padding-left:8px}
.no-perm{font-size:12px;color:#8a5a00}
.void-amt{text-decoration:line-through;color:#9aa3b0!important}.void-tag{display:block;color:#b3261e;font-size:12.5px}
.inline-confirm.col{display:flex;flex-direction:column;gap:6px;align-items:stretch;width:100%}.inline-confirm.col input{border:1px solid #d5d9e0;border-radius:6px;padding:6px 8px;font:inherit}
.inline-confirm.col>span{display:flex;gap:6px}
.inv-note{display:flex;flex-direction:column;gap:6px}.inv-note textarea{border:1px solid #d5d9e0;border-radius:6px;padding:7px 8px;font:inherit;resize:vertical}
.wb-comm{margin-left:10px;vertical-align:middle}
@media (max-width:900px){.charts{grid-template-columns:1fr}.period-label{margin-left:0;flex-basis:100%}.tc-head .wb-search{margin-left:0;max-width:none}}
.mix-t,.cm-rows table,.cm-sec table{min-width:0}
/* Thanh trên cùng nhiều mục hơn: thu gọn tên tài khoản trên màn hình vừa để không đè lên menu */
header.topnav nav{min-width:0}
@media (max-width:1620px){.tn-me span{display:none}.tn-space{padding:7px 11px}}
.rep-note{display:block}.rep-note>svg{vertical-align:-2px;margin-right:4px}

/* ===== Bước 9: màu cột tiến độ trên Bàn làm việc, bộ lọc ngày, cọc ===== */
.wb-table tr.tinted td{background:var(--rbg)}
.wb-table tr.tinted td:first-child{box-shadow:inset 4px 0 0 var(--rc)}
.wb-table tr.tinted.sel td{background:color-mix(in srgb, var(--rc) 18%, #fff);font-weight:600}
.wb-table tr.tinted.sel td:first-child{box-shadow:inset 6px 0 0 var(--rc)}
.wb-table tr.tinted:hover td{background:color-mix(in srgb, var(--rc) 14%, #fff)}
.rc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--rc);margin-right:6px;vertical-align:1px}
.list-chip{display:block;font-weight:600;font-size:11.5px;color:#4a505b;margin-left:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.date-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;font-size:14.5px}
.date-filter input[type=date]{border:1px solid #d5d9e0;border-radius:6px;padding:5px 7px;font:inherit;background:#fff}
.df-label{font-weight:700;color:#3a3f47}.df-count{margin-left:auto;font-weight:700;color:#1769c2}
a.e-btn{text-decoration:none}
.dep-box{border:1px dashed #b9cbe4;border-radius:8px;padding:8px 11px;background:#f6f9fd;font-size:14.5px;display:flex;flex-direction:column;gap:6px}
.dep-box .dep-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.dep-box b{color:#1f2329}
.dep-box input,.dep-box select{border:1px solid #d5d9e0;border-radius:6px;padding:5px 7px;font:inherit;min-width:0}
.dep-box .calc-in{width:120px}
.dep-list{margin:0;padding:0;list-style:none;font-size:14px}.dep-list li{padding:3px 0;border-bottom:1px dashed #e3e6ec}
/* Cột ĐVT đủ rộng, không cắt chữ (Cái, Chai, Lần, Giờ…); ẩn mũi tên datalist chiếm chỗ */
.qs-table col.c-unit{width:84px}
.qs-table{min-width:950px}
.qs-table td.unit{overflow:visible}
.qs-table .unit input{padding:6px 4px;text-overflow:clip;min-width:0}
.qs-table .unit input::-webkit-calendar-picker-indicator{display:none!important;opacity:0}
.qs-table .ro-unit{white-space:nowrap}
@media (max-width:900px){.qs-table{min-width:1010px}}
.pp-msg{margin:40px auto;color:#fff;font-size:16.5px}.pp-msg.err{color:#ffb4ab}
.pp-frame{min-height:0}
.qs-table .unit select{width:100%;border:1px solid transparent;background:transparent;border-radius:5px;padding:6px 2px;font:inherit;color:#1769c2;font-weight:600;cursor:pointer}
.qs-table .unit select:hover,.qs-table .unit select:focus{border-color:#d5d9e0;background:#fff}
/* Màu nền theo cột tiến độ: tô CẢ dòng xe + thanh thao tác khi mở rộng; dòng chọn dùng viền màu cột, không phủ xanh */
.wb-table tr.tinted td,.wb-table tr.tinted.sel td,.wb-table tr.tinted:hover td{background:var(--rbg)!important;color:#15181d}
.wb-table tr.tinted:hover td{background:var(--rbg2)!important}
.wb-table tr.tinted td:first-child{box-shadow:inset 5px 0 0 var(--rc)}
.wb-table tr.tinted.sel td{font-weight:600;box-shadow:inset 0 2px 0 var(--rc)}
.wb-table tr.tinted.sel td:first-child{box-shadow:inset 5px 0 0 var(--rc),inset 0 2px 0 var(--rc)}
.wb-table tr.tinted.sel td:last-child{box-shadow:inset -2px 0 0 var(--rc),inset 0 2px 0 var(--rc)}
.wb-table tr.sel-actions td{box-shadow:inset 5px 0 0 var(--rc),inset -2px 0 0 var(--rc),inset 0 -2px 0 var(--rc)!important;border-top:0}
.wb-table tr.tinted .elink,.wb-table tr.tinted td.plate{color:#0d2f5c}
.wb-table tr.tinted .list-chip{color:#2a2f38}
.wb-table tr.sel-actions .e-btn.sm{background:#ffffffd9;border-color:#00000022}
.rc-dot{display:none}
.pop-menu{z-index:400;background:#fff;border:1px solid #d5d9e0;border-radius:8px;box-shadow:0 12px 32px #0003;padding:4px;min-width:200px;overflow:auto;display:flex;flex-direction:column}
.pop-menu button{border:0;background:none;text-align:left;padding:8px 11px;border-radius:6px;cursor:pointer;font:inherit;font-size:15px;color:#1f2329;white-space:nowrap}
.pop-menu button:hover{background:#e8f0fb}
.pop-menu button{display:flex;justify-content:flex-start}
.tn-build{display:block;opacity:.6;font-size:12px;margin-top:2px}
.e-warn.conflict{display:flex;flex-direction:column;gap:8px;border-color:#c9372c;background:#fdecea;color:#5d1f1a}
.e-warn.conflict .e-actions{justify-content:flex-start;flex-wrap:wrap;margin:0}
/* Bước 11: STT nổi rõ trên mọi màu nền dòng (nền trắng, chữ đậm tối, viền) */
.num.stt{background:#fff;color:#172b4d;border:1.5px solid #44546f;font-weight:800;font-size:13px;width:auto;min-width:28px;height:28px;padding:0 5px;border-radius:13px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
/* ===== Bước 11: THU CHI ===== */
.cash-page .e-page-head{flex-wrap:wrap;gap:11px}
.cash-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.cash-actions a.e-btn{text-decoration:none}
.cash-tools select,.cash-tools input[type=date],.cash-tools .party-in{border:1px solid #d5d9e0;border-radius:6px;padding:7px 8px;font-size:14.5px;background:#fff;color:#2a2f38;max-width:100%}
.cash-tools .party-in{width:140px}
.cash-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:0 0 12px}
.cash-cards>div{background:#fff;border:1px solid var(--e-line);border-radius:8px;padding:13px 15px;display:flex;flex-direction:column;gap:3px}
.cash-cards small{color:#5d6470;font-weight:600}.cash-cards b{font-size:22px;color:#1f2329;font-variant-numeric:tabular-nums}
.cash-cards em{font-style:normal;font-size:12.5px;color:#5d6470}
.cash-cards .in b{color:#1f7a4a}.cash-cards .out b{color:#c9372c}.cash-cards .close{border-color:#1769c2;background:#f3f8ff}
@media(max-width:760px){.cash-cards{grid-template-columns:1fr 1fr}.cash-cards b{font-size:18.5px}.cash-actions{margin-left:0}}
.cash-open{justify-content:space-between;flex-wrap:nowrap}.cash-open>span{flex:1}@media(max-width:640px){.cash-open{flex-wrap:wrap}.cash-open>span{flex-basis:100%}}
.cash-funds{margin-bottom:12px}
.e-table td.in,.cash-sum .in{color:#1f7a4a}.e-table td.out,.cash-sum .out{color:#c9372c}
.cash-sum{display:flex;flex-wrap:wrap;gap:6px 19px;padding:11px 13px;border-bottom:1px solid var(--e-line);font-size:14.5px;color:#3a3f47;align-items:center}
.cash-sum b{font-variant-numeric:tabular-nums}
.cash-table .kind{display:inline-block;font-weight:800;font-size:12.5px;border-radius:4px;padding:2px 7px}
.cash-table .kind.in{background:#e2f6ea;color:#1f7a4a}.cash-table .kind.out{background:#fde8e6;color:#b3261e}
.cash-table td.amt{font-weight:700;font-variant-numeric:tabular-nums}.cash-table td.amt.in{color:#1f7a4a}.cash-table td.amt.out{color:#c9372c}
.e-table small.sub{display:block;font-size:12px;color:#6b7280;font-weight:500}.e-table small.sub.warn{color:#a05a00}
.e-table small.tag{display:inline-block;margin-left:5px;background:#eef1f5;color:#44546f;border-radius:3px;padding:0 5px;font-size:11.5px;font-weight:700}
.e-table tr.voided td{color:#9aa1ab!important;text-decoration:line-through}.e-table tr.voided td .st{text-decoration:none}
.cash-foot{font-size:13px;color:#5d6470;margin:10px 2px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cash-foot .link{border:0;background:none;color:#1769c2;cursor:pointer;display:inline-flex;gap:4px;align-items:center;font-size:13px}
.e-ok{background:#e9f8ef;border:1px solid #b6e3c7;color:#1f6b3f;border-radius:7px;padding:10px 13px;margin:0 0 10px;display:flex;justify-content:space-between;cursor:pointer}
.e-ok-text{color:#1f7a4a;font-weight:600}
.e-hint.words{margin-top:-6px;font-style:italic}
.sugg-wrap{position:relative}
.sugg{position:absolute;top:100%;left:0;right:0;z-index:20;background:#fff;border:1px solid #d5d9e0;border-radius:6px;box-shadow:0 6px 18px #0002;max-height:240px;overflow:auto}
.sugg button{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;background:#fff;padding:7px 11px;cursor:pointer;text-align:left;font-size:14.5px}
.sugg button:hover{background:#f1f6fd}.sugg span{font-size:12.5px;color:#5d6470;font-weight:500}
.pick-chip{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:#f3f8ff;border:1px solid #cddcf0;border-radius:6px;padding:7px 11px;margin:0 0 12px;font-size:14.5px}
.alloc{border:1px solid var(--e-line);border-radius:8px;padding:11px;margin:0 0 12px;background:#fafbfc}
.alloc .e-sec small{text-transform:none;letter-spacing:0;color:#5d6470;font-weight:500}
.alloc-row{display:grid;grid-template-columns:auto auto 1fr 130px auto;gap:8px;align-items:center;margin-bottom:6px;font-size:14.5px}
.alloc-row input{border:1px solid #d5d9e0;border-radius:6px;padding:6px 8px;text-align:right}
.alloc-sum{font-size:14.5px;margin:4px 0 8px}
.alloc>input{width:100%;border:1px solid #d5d9e0;border-radius:6px;padding:7px 10px;box-sizing:border-box}
.alloc-opts{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.alloc-opts button{border:1px solid #e3e7ec;background:#fff;border-radius:6px;padding:6px 10px;text-align:left;cursor:pointer;font-size:14px}
.alloc-opts button:hover{background:#f1f6fd}
.muted{color:#8a919c}
@media(max-width:640px){.alloc-row{grid-template-columns:1fr 1fr}.alloc-row small{grid-column:1/-1}}
.cash-detail dl{display:grid;grid-template-columns:130px 1fr;gap:6px 13px;margin:0 0 12px;font-size:15px}
.cash-detail dt{color:#5d6470;font-weight:600}.cash-detail dd{margin:0}.cash-detail .pre{white-space:pre-wrap}
@media(max-width:640px){.cash-detail dl{grid-template-columns:1fr}.cash-detail dt{margin-top:4px}}
.e-table.mini td{padding:6px 8px}
.cash-files{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.cash-files a{display:inline-flex;gap:4px;align-items:center;background:#f3f5f8;border-radius:5px;padding:5px 10px;font-size:14px;color:#1f63b5;text-decoration:none}
.cash-log{list-style:none;padding:0;margin:0 0 12px;font-size:14px;color:#3a3f47}
.cash-log li{padding:5px 0;border-bottom:1px dashed #e6e9ee}.cash-log small{display:block;color:#6b7280}
.e-actions.wrap{flex-wrap:wrap}
.fund-row,.fund-new{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 0;border-bottom:1px solid #eef0f3}
.fund-row.off,.cat-row.off{opacity:.55}
.fund-row input,.fund-new input,.fund-new select,.cat-row input{border:1px solid #d5d9e0;border-radius:6px;padding:6px 8px;font-size:14.5px;min-width:0}
.fund-row>input:first-child{font-weight:700;width:190px}
.fund-open{display:inline-flex;gap:5px;align-items:center;font-size:13px;color:#5d6470;flex-wrap:wrap}.fund-open input{width:120px}
.cat-cols{display:grid;grid-template-columns:1fr 1fr;gap:15px}.cat-cols h4{margin:0 0 6px}
@media(max-width:640px){.cat-cols{grid-template-columns:1fr}}
.cat-row{display:flex;gap:6px;align-items:center;margin-bottom:5px}.cat-row input{flex:1}
/* Bước 11: logo "VES Workshop" PNG trên thanh tối — giữ đúng tỷ lệ 420×81 */
.tn-logo img{display:block;height:32px;width:auto;max-width:170px;object-fit:contain}
.tn-logo{align-items:center;padding:0 13px 0 2px}
.tn-logo.static img{height:32px}
@media(max-width:760px){.tn-logo img{height:28px;max-width:140px}}
/* Bước 11: thêm nhóm "Thu Chi" → thanh menu gọn hơn trên màn hình laptop, chuyển sang menu ☰ sớm hơn để không đẩy mất menu tài khoản */
@media(max-width:1500px){.tn-me>span:not(.u-avatar){display:none}.tn-group>button{padding:8px 6px;font-size:14px}.tn-space{padding:7px 10px;margin-right:2px}.tn-sep{margin:0 3px}}
@media(max-width:1300px){nav.tn-menu,.tn-me{display:none}.tn-burger{display:inline-flex}.tn-logo{margin-right:auto}}
.alloc-opts button{display:block;width:100%;text-align:left!important;justify-content:flex-start}
/* ===== Thẻ đã lưu trữ ===== */
.arch-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;background:#fff6;border:1px solid #0003;color:#3a2f12;font-size:11.5px;font-weight:700;vertical-align:1px;white-space:nowrap}
.arch-page .e-page-head{flex-wrap:wrap}
.arch-page .e-page-head h1{display:flex;align-items:center;gap:8px}
.arch-page .e-page-head .e-btn{margin-left:auto}
.arch-filters{padding:13px 15px;display:flex;flex-direction:column;gap:11px;margin-bottom:12px}
.arch-row{display:flex;flex-wrap:wrap;gap:11px;align-items:flex-end}
.arch-row label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:#5e6c84;font-weight:600}
.arch-row select{min-width:150px;max-width:240px;padding:7px 8px;border:1px solid #d5d9e0;border-radius:6px;font:inherit;font-weight:400;color:#172b4d;background:#fff}
.arch-q{flex:1 1 340px;max-width:none;margin-left:0}
.arch-count{display:flex;align-items:center;gap:11px;font-size:14.5px;color:#44546f}
.arch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:13px;margin-bottom:12px}
.arch-item{display:flex;gap:13px;background:#fff;border:1px solid var(--e-line);border-radius:10px;padding:11px;cursor:pointer;min-width:0}
.arch-item:hover,.arch-item:focus-visible{border-color:#8fb2e6;box-shadow:0 2px 10px #1d4f9122;outline:0}
.arch-thumb{flex:none;width:112px;height:112px;border-radius:8px;overflow:hidden;background:#eef1f5}
.arch-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.arch-thumb .ph{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#8590a2;font-size:12px;text-align:center}
.arch-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.arch-info h3{margin:0;font-size:15.5px;line-height:1.35;word-break:break-word}
.arch-sub{font-size:14px;color:#44546f}
.arch-sub b{color:var(--e-plate)}
.arch-info dl{margin:2px 0;display:grid;gap:2px;font-size:13px}
.arch-info dl div{display:flex;gap:6px}
.arch-info dt{color:#6b778c;flex:none;width:128px}
.arch-info dd{margin:0;color:#172b4d;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;flex:1;min-width:0}
.arch-info dd small{color:#6b778c}
.arch-info dd em{color:#97a0af;font-style:italic}
.arch-info .sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.arch-badges{display:flex;align-items:center;gap:8px;font-size:13px;color:#44546f}
.arch-badges span{display:inline-flex;align-items:center;gap:3px}
.arch-badges span.ok{color:#1f845a;font-weight:700}
.arch-badges .lb{width:24px;height:8px;border-radius:4px;display:inline-block}
.arch-badges .grow{flex:1}
.arch-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
@media(max-width:520px){.arch-grid{grid-template-columns:1fr}.arch-thumb{width:72px;height:72px}.arch-info dt{min-width:110px}.arch-row select{max-width:none;min-width:0;width:100%}.arch-row label{flex:1 1 45%}}
/* Điện thoại: ô tìm kiếm Bàn làm việc chiếm cả dòng, ô nhập 16px (iPhone không tự phóng to) */
@media(max-width:760px){.wb{padding:11px 11px 90px}.wb-search{min-width:0;flex:1 1 100%;margin-left:0}.date-filter{flex-wrap:wrap}.e-page{padding-bottom:90px}}
/* ===== Trung tâm thông báo ===== */
.tn-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:41px;height:41px;border-radius:8px;background:none;border:0;color:inherit;cursor:pointer;flex:none}
.tn-bell:hover,.tn-bell.on{background:#ffffff1f}
.tn-badge{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#e2483d;color:#fff;font-size:11.5px;line-height:18.5px;font-weight:800;text-align:center;box-shadow:0 0 0 2px #1d2125}
.nc-bg{position:fixed;inset:0;z-index:200;background:#0003}
.nc{position:absolute;top:calc(var(--tn-h) + 6px);right:10px;width:min(420px,calc(100vw - 20px));max-height:calc(100dvh - var(--tn-h) - 18px);display:flex;flex-direction:column;background:#f4f5f7;color:#172b4d;border-radius:12px;box-shadow:0 12px 40px #0006;overflow:hidden;font-size:15px}
.nc-head{display:flex;align-items:center;gap:11px;padding:15px 15px 11px;background:#fff;border-bottom:1px solid #e3e6ec}
.nc-head h2{margin:0;font-size:21px;flex:1}
.nc-only{display:flex;align-items:center;gap:6px;font-size:14px;color:#44546f;cursor:pointer}
.nc-x{background:none;border:0;cursor:pointer;color:#44546f;display:flex;padding:4px}
.nc-tools{display:flex;justify-content:space-between;align-items:center;padding:8px 15px;font-size:13px;color:#626f86}
.nc-tools button{display:inline-flex;align-items:center;gap:5px;background:none;border:0;color:#0c66e4;font:inherit;font-weight:600;cursor:pointer;padding:4px}
.nc-list{overflow:auto;padding:0 11px 11px;display:flex;flex-direction:column;gap:11px;overscroll-behavior:contain}
.nc-item{position:relative;background:#fff;border-radius:10px;box-shadow:0 1px 2px #091e4240;padding:0 36px 11px 0;overflow:hidden}
.nc-item.unread{box-shadow:0 1px 2px #091e4240,inset 3px 0 0 #0c66e4;background:#f5f9ff}
.nc-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:calc(100% + 34px);margin-bottom:8px;border:0;padding:11px 13px;color:#fff;text-align:left;cursor:pointer;overflow:hidden;min-height:58px}
.nc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.nc-card .nc-title{position:relative;background:#fff;color:#172b4d;border-radius:6px;padding:5px 8px;font-weight:600;font-size:14.5px;max-width:100%;overflow-wrap:anywhere}
.nc-card small{position:relative;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow:0 1px 2px #0008}
.nc-body{display:flex;gap:8px;padding:0 0 0 13px;cursor:pointer;line-height:1.45;overflow-wrap:anywhere}
.nc-body .avatar{width:30px;height:30px;font-size:12px;flex:none}
.nc-body time{display:block;color:#626f86;font-size:12.5px;margin-top:2px}
.nc-kind{color:#626f86}
.nc-dot{position:absolute;right:6px;top:66px;width:28px;height:28px;border-radius:50%;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.nc-dot i{width:11px;height:11px;border-radius:50%;border:2px solid #8590a2}
.nc-item.unread .nc-dot i{background:#0c66e4;border-color:#0c66e4}
.nc-empty{text-align:center;color:#626f86;padding:32px 11px}
.nc-more{border:0;background:#e9ecf1;border-radius:8px;padding:10px;font:inherit;font-weight:600;cursor:pointer}
.nc-push{border-top:1px solid #e3e6ec;background:#fff;padding:11px 15px}
.nc-push-row{display:flex;align-items:center;gap:11px}
.nc-push-row span{flex:1;display:flex;flex-direction:column}
.nc-push-row small{color:#626f86;font-size:12.5px}
.nc-push-row button{border:0;border-radius:7px;background:#0c66e4;color:#fff;font:inherit;font-weight:700;padding:8px 15px;cursor:pointer;min-height:39px}
.nc-push-row button:disabled{opacity:.5}
.nc-test{margin-top:8px;display:inline-flex;align-items:center;gap:5px;border:1px solid #d5d9e0;background:#fff;border-radius:7px;padding:5px 11px;font:inherit;font-size:14px;cursor:pointer}
.nc-msg{margin:8px 0 0;font-size:13px;color:#ae2e24;line-height:1.45}
.nc-log{margin-top:8px;max-height:38vh;overflow:auto;border:1px solid #e3e6ec;border-radius:8px;font-size:13px}
.nc-log-h{display:flex;gap:8px;align-items:center;padding:6px 8px;background:#f4f5f7;position:sticky;top:0}
.nc-log-h b{flex:1}.nc-log-h button{border:1px solid #d5d9e0;background:#fff;border-radius:6px;font:inherit;font-size:13px;padding:3px 8px;cursor:pointer}
.nc-log p{margin:8px}.nc-log-r{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;padding:6px 8px;border-top:1px solid #eef0f3}
.nc-log-r time{color:#626f86;font-variant-numeric:tabular-nums}.nc-log-r span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-log-r small{grid-column:1/-1;color:#44546f}
.nc-toast{position:fixed;z-index:210;right:16px;top:calc(var(--tn-h) + 10px);display:flex;gap:11px;align-items:flex-start;max-width:min(360px,calc(100vw - 32px));background:#172b4d;color:#fff;border-radius:10px;padding:12px 15px;box-shadow:0 10px 30px #0006;cursor:pointer;font-size:14.5px}
.nc-toast div{display:flex;flex-direction:column;gap:2px}.nc-toast span{color:#c7d1db}
@media(max-width:760px){.nc{right:6px;left:6px;width:auto;top:calc(var(--tn-h) + 4px)}.nc-toast{left:12px;right:12px;max-width:none}}
.nc-item{flex:none}
.nc-push{display:block;flex:none}
.nc-push-row span{min-width:0}
.nc-push-row small{display:block}
.nc-card small{color:#fff!important}.nc-card .nc-title{color:#172b4d!important}

/* ===== Bước 15: PWA — thanh mất mạng / bản mới, vùng tai thỏ & thanh điều hướng ===== */
.net-banner,.upd-banner{position:fixed;z-index:400;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 8px);display:flex;align-items:flex-start;gap:11px;width:min(560px,calc(100vw - 16px));padding:11px 13px;border-radius:10px;font:14.5px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;box-shadow:0 8px 28px #0007}
.net-banner svg,.upd-banner svg{flex:none;margin-top:2px}
.net-banner.off{background:#5d1f1a;color:#ffe2df;border:1px solid #c9372c}
.net-banner.on{background:#164b35;color:#d3f5e6;border:1px solid #1f845a}
.upd-banner{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);background:#0c2a59;color:#e3edff;border:1px solid #1d7afc;align-items:center}
.upd-banner span{flex:1;min-width:0}.upd-banner em{display:block;font-style:normal;color:#ffd5a8;margin-top:3px}
.upd-go{flex:none;border:0;border-radius:7px;background:#1d7afc;color:#fff;font-weight:700;padding:8px 15px;min-height:39px;cursor:pointer}
.upd-x{flex:none;border:0;background:none;color:#c8d6ee;width:39px;height:39px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* iPhone tai thỏ khi xoay ngang + thanh Home: không để nút / chữ nằm dưới vùng che */
header.topnav{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
@media(max-width:760px){
  .vb-list{max-height:calc(100dvh - var(--vb-head) - var(--tn-h) - 34px - env(safe-area-inset-bottom,0px))}
  .vb-canvas{padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .cm{padding-bottom:env(safe-area-inset-bottom,0px)}
  .nc{max-height:calc(100dvh - var(--tn-h) - 18px - env(safe-area-inset-bottom,0px))}
}

/* Cỡ hiển thị (menu điện thoại) */
.ui-scale-wrap{margin-top:auto;padding:11px 4px 4px;border-top:1px solid #ffffff14}
.ui-scale{display:flex;align-items:center;gap:6px}
.ui-scale-note{margin:8px 0 0;font-size:13px;line-height:1.45;color:#f5cd47}
.ui-scale span{flex:1;min-width:0;font-size:14.5px;color:#c7d1db;white-space:nowrap}
.ui-scale button{display:inline-flex;align-items:center;justify-content:center;width:43px;height:43px;border-radius:8px;border:1px solid #ffffff26;background:#2c333a;color:#fff;cursor:pointer}
.ui-scale button:disabled{opacity:.35}
.ui-scale output{min-width:50px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.ui-scale-wrap + .tn-dfoot{margin-top:0}

/* Bàn làm việc: trạng thái duyệt giá của lượt xe (cùng quy tắc với nhãn trên Bảng tiến độ) */
.qa-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;font-size:11.5px;font-weight:800;line-height:1.5;vertical-align:middle;white-space:nowrap}
.qa-tag.pending{background:#f5cd47;color:#172b4d}
.qa-tag.approved{background:#1f9d55;color:#fff}
/* Cỡ chữ lớn hơn: cột “Lần gần nhất” (ngày + trạng thái) được xuống dòng thay vì đẩy bảng tràn ngang trên màn 1280px */
@media(max-width:1440px){.veh-table td:nth-child(7){white-space:normal}.veh-table td:nth-child(7) .st{display:inline-block;margin-top:2px}}
.qs-calc .due.over{background:#fff4e5;border-radius:6px;padding:4px 6px}.qs-calc .due.over span{color:#8a4b00;font-weight:700}.qs-calc .due.over b{color:#b35c00}
/* Bàn làm việc: hàng thao tác ngay dưới dòng báo giá / hóa đơn được chọn */
.doc-actions-row td{background:#f2f6fc!important;padding:8px 11px!important;white-space:normal!important}
.doc-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.doc-actions .e-btn.approve{background:#1f8a4c;color:#fff;border-color:#1f8a4c;font-weight:800}
.doc-actions .e-btn.unapprove{background:#c9372c;color:#fff;border-color:#c9372c;font-weight:800}
.doc-actions .e-btn:disabled{opacity:.5;cursor:not-allowed}
.doc-why{flex-basis:100%;font-size:12.5px;color:#8a5a00}
.doc-pay{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex-basis:100%}
.doc-pay input,.doc-pay select{border:1px solid #d5d9e0;border-radius:6px;padding:6px 8px;font:inherit;min-width:0}
.doc-pay input{width:140px}
tr.trow.sel td{background:#e8f0fb}
@media(max-width:760px){.doc-actions .e-btn{min-height:43px;flex:1 1 calc(50% - 6px);justify-content:center}.doc-pay input,.doc-pay select{font-size:17.5px;flex:1 1 40%}}
@media(max-width:760px){.doc-actions{position:sticky;left:0;width:calc(100vw - 52px);max-width:100%}.doc-actions-row td{padding:8px 6px!important}}
.doc-actions .e-btn.green{background:#1f8a4c;color:#fff;border-color:#1f8a4c;font-weight:700}
.doc-actions .e-btn.primary{background:#1769c2;color:#fff;border-color:#1769c2;font-weight:700}

/* ===== Cỡ chữ trang quản lý trên PC (2026-11-12) =====
   Giá trị viết ở đây là giá trị GỐC: build.mjs nhân chữ ×1.10, khoảng đệm ×1.06 → chữ nội dung hiển thị ~15px, tiêu đề cột ~14px, chữ phụ ~13px.
   Chỉ áp dụng màn hình PC (chuột, ≥1024px) → điện thoại / máy tính bảng cảm ứng giữ nguyên bố cục đã tối ưu + nút “Cỡ hiển thị”.
   Chỉ @media screen → bản in / PDF (vesDocHtml, CSS riêng) không bị ảnh hưởng. Bảng nhiều cột cuộn ngang trong .e-scroll, không ép nhỏ chữ.
   Đồng thời gỡ quy tắc cũ td{11px; xám #858b95} ở styles.css đang làm chữ trong bảng nhỏ và nhạt. */
@media screen and (min-width:1024px) and (hover:hover) and (pointer:fine){
  .erp-main{font-size:15px}
  .e-page{padding:19px 23px 34px}
  .e-page-head{gap:15px;margin-bottom:14px}
  .e-page-head h1,.wb-left h1{font-size:24px}
  table.e-table{font-size:15px}
  .e-table th{font-size:14px;color:#1f2430;padding:12px 13px;line-height:1.3}
  .e-table td{font-size:15px;color:#1f2430;padding:12px 13px;line-height:1.45}
  .e-table td.empty-row{color:#6b7280}
  .e-table.mini td{padding:7px 10px}
  .wb-right .e-table th,.wb-right .e-table td{padding-left:10px;padding-right:10px}
  .e-table .clip{white-space:normal;min-width:160px;max-width:260px;overflow-wrap:break-word}
  .wb-table td.plate{white-space:normal;min-width:250px;line-height:1.6}
  .arch-tag,.qa-tag{font-size:12.5px}
  .e-table td small{font-size:13px}
  .e-table td.wrap{white-space:normal;min-width:130px;max-width:230px}
  .e-table td.wrap .st{margin-left:0}
  .e-table small.sub{font-size:13px;color:#5d6470}
  .e-table small.tag{font-size:12px}
  .e-table .plate,.plate{font-weight:800}
  .st{font-size:13px;padding:2px 11px}
  .num{width:28px;height:28px;font-size:13px}
  .num.stt{font-size:14px;min-width:30px;height:30px}
  .list-chip{font-size:12.5px;max-width:200px}
  .plate-link{font-size:16.5px}
  .veh-table .vin{font-size:13px}
  /* nút, ô tìm kiếm, bộ lọc */
  .e-btn{font-size:15px;padding:10px 15px}
  .e-btn.sm{font-size:14px;padding:7px 12px}
  .wb-search input{font-size:15px;padding:10px 13px}
  .wb-search button{padding:0 16px}
  .dd-menu button{font-size:15px;padding:10px 12px}
  .seg button{font-size:14.5px;padding:7px 13px}
  .date-filter{font-size:15px;gap:8px}
  .date-filter input,.date-filter select,.date-filter button{font-size:14.5px}
  .period select,.period input{font-size:15px;padding:7px 10px}
  .period-label{font-size:15.5px}
  .vf{font-size:14px}
  .vf input,.vf select{font-size:15px;padding:8px 10px}
  .cash-tools select,.cash-tools input[type=date],.cash-tools .party-in{font-size:15px;padding:8px 10px}
  .pane-for{font-size:14.5px}
  /* phân trang + tổng hợp */
  .pager{font-size:14.5px;padding:12px 15px}
  .pager label{font-size:14.5px}
  .pager select{font-size:14.5px;padding:5px 8px}
  .pg button{min-width:35px;height:35px;font-size:15px}
  .sum-chips{font-size:15.5px}
  .cash-sum{font-size:15.5px;padding:13px 15px}
  .cash-sum b{color:#1f2329}
  .cash-cards small{font-size:14px}
  .cash-cards b{font-size:23px}
  .cash-cards em{font-size:13px}
  .cash-foot,.cash-foot .link{font-size:14.5px}
  .cash-table .kind{font-size:13px}
  .kpi-head{font-size:14.5px}
  .kpi-sub{font-size:14px}
  .rep-note{font-size:14.5px}
  .rep-h{font-size:17.5px}
  .mix-t,.mix-t td{font-size:15px}
  .muted{font-size:14.5px}
}

:where(svg.lucide[width="10"]){width:11px;height:11px}:where(svg.lucide[width="11"]){width:12px;height:12px}:where(svg.lucide[width="12"]){width:13px;height:13px}:where(svg.lucide[width="13"]){width:14px;height:14px}:where(svg.lucide[width="14"]){width:15px;height:15px}:where(svg.lucide[width="15"]){width:17px;height:17px}:where(svg.lucide[width="16"]){width:18px;height:18px}:where(svg.lucide[width="17"]){width:19px;height:19px}:where(svg.lucide[width="18"]){width:20px;height:20px}:where(svg.lucide[width="19"]){width:21px;height:21px}:where(svg.lucide[width="20"]){width:22px;height:22px}:where(svg.lucide[width="22"]){width:24px;height:24px}:where(svg.lucide[width="24"]){width:26px;height:26px}:where(svg.lucide[width="26"]){width:29px;height:29px}:where(svg.lucide[width="28"]){width:31px;height:31px}