/* VK · Material đơn sắc đen-trắng — gọn, dày đặc. Chỉ màn hình, không ảnh hưởng in/PDF */
@media screen{
html[data-theme],html:not([data-theme]){
  --navy:#111111;--navy2:#000000;--navy3:#333333;--navy4:#444444;
  --white:#fff;--bg:#f7f7f7;--bg2:#efefef;--card:#fff;--border:#dde1e5;--border2:#c7cdd3;
  --text:#212121;--muted:#616161;--light:#8a8a8a;--accent:#111111;--gold:#111111;
  --stripe:#fafafa;--hover:#f2f2f2;--overlay:rgba(0,0,0,.4);--radius:4px;--radius2:4px;--sidebar-w:210px;
}
body{font-family:Roboto,"Segoe UI",system-ui,sans-serif!important;font-size:14.5px;color:#212121;background:#f7f7f7;-webkit-font-smoothing:antialiased;letter-spacing:.005em}
.main,.content{background:#f7f7f7!important}
/* app bar */
.topbar{background:#111111!important;color:#fff!important;border:0!important;box-shadow:0 2px 4px rgba(0,0,0,.24)!important;min-height:44px}
.topbar *{color:inherit}
.topbar .btn,.topbar button{background:transparent!important;color:#fff!important;border:0!important;box-shadow:none!important}
.topbar .btn:hover,.topbar button:hover{background:rgba(255,255,255,.14)!important}
/* sidebar: drawer trắng */
.sidebar{background:#fff!important;color:#212121!important;border-right:1px solid #dde1e5;box-shadow:1px 0 3px rgba(0,0,0,.08)!important}
.sidebar *{color:inherit}
.sidebar .nav-group-label{color:#757575!important;font-size:11.5px!important;font-weight:500!important;letter-spacing:.06em!important;padding:6px 14px 2px!important;margin:0!important}
.nav-item{color:#212121!important;font-size:14px!important;font-weight:500!important;border-left:0!important;border-radius:0 18px 18px 0;margin:0 6px 0 0;width:calc(100% - 6px)!important;padding:6px 14px!important;min-height:32px}
.nav-item:hover{background:#f7f7f7!important}
.nav-item.active{background:#ececec!important;color:#111111!important;font-weight:700!important}
/* nút Material */
.btn{border-radius:4px!important;font-size:13px!important;font-weight:500!important;letter-spacing:.04em!important;text-transform:uppercase;padding:5px 12px!important;background-image:none!important;transition:background .15s,box-shadow .15s;position:relative;overflow:hidden}
.btn-primary{background:#111111!important;color:#fff!important;border:0!important;box-shadow:0 1px 3px rgba(0,0,0,.28)!important}
.btn-primary:hover{background:#333333!important;box-shadow:0 2px 6px rgba(0,0,0,.3)!important}
.btn-primary:active{box-shadow:0 4px 10px rgba(0,0,0,.3)!important}
.btn-outline{background:#fff!important;color:#111111!important;border:1px solid #c7cdd3!important;box-shadow:none!important}
.btn-outline:hover{background:#f2f2f2!important}
.btn-ghost{background:transparent!important;color:#111111!important;border:0!important;box-shadow:none!important}
.btn-ghost:hover{background:rgba(0,0,0,.06)!important}
.btn:active{background-image:radial-gradient(circle,rgba(255,255,255,.35) 10%,transparent 11%)!important}
.btn:disabled,.btn[disabled]{opacity:.42;box-shadow:none!important}
.btn-sm{font-size:12px!important;padding:2px 8px!important}
/* bảng gọn */
.tbl{font-size:14px;background:#fff;border-collapse:separate!important;border-spacing:0;border:0;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.16)!important}
.tbl th{background:#f5f6f7!important;color:#424242!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.02em!important;border:0!important;border-bottom:1px solid #dde1e5!important;padding:6px 6px!important}
.tbl td{border:0!important;border-bottom:1px solid #f7f7f7!important;padding:5px 6px!important;font-size:14px;height:32px}
.tbl tbody tr:hover td{background:#f5f5f5!important}
/* card / elevation */
.card,.sl-home .card,.sl-home1,.kpi,.sl-kpi2>div,.sl-kpi:not(.sl-kpi2)>div{background:#fff!important;border:0!important;border-radius:4px!important;box-shadow:0 1px 3px rgba(0,0,0,.16)!important}
input,select,textarea{font-family:inherit!important;font-size:14px;border:1px solid #c7cdd3!important;border-radius:4px!important;background:#fff!important;color:#212121}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:#111111!important;box-shadow:inset 0 -2px 0 #111111!important}
label{font-size:12px;color:#616161;font-weight:500}
/* dialog */
.modal{border-radius:4px!important;overflow:hidden;background:#fff!important;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14)!important}
.modal-header{background:#111111!important;color:#fff!important;border:0;padding:8px 14px!important}
.modal-header h3{font-size:16px!important;font-weight:500!important;color:#fff!important}
.modal-header .close{color:#fff!important;background:transparent!important}
.modal-footer{border-top:1px solid #f7f7f7;background:#fff;padding:6px 12px!important}
.modal-overlay{background:rgba(0,0,0,.4)!important;backdrop-filter:none}
/* chip */
.sl-chip{border-radius:16px!important;font-size:12.5px!important;font-weight:500!important;border:0!important;background:#e0e0e0!important;color:#212121!important;padding:3px 10px!important}
.sl-chip:hover{background:#d0d0d0!important}
.sl-chip.on{background:#111111!important;color:#fff!important}
.toast{border-radius:4px!important;background:#323232!important;color:#fff!important;box-shadow:0 3px 5px rgba(0,0,0,.3)!important}
#content .sl-scroll table.tbl td{font-size:13.5px!important}#content .sl-scroll table.tbl th{font-size:12.5px!important}#content .sl-scroll .pill{font-size:11px!important;padding:1px 6px!important;white-space:nowrap}#content .sl-row button.sl-cp{padding:1px 4px!important}
/* trang chủ */
.home-wrap{background:#f7f7f7!important;background-image:none!important}
.home-card,.mod,.hub-card,.tile,.login-card{background:#fff!important;background-image:none!important;border:0!important;border-radius:4px!important;box-shadow:0 1px 3px rgba(0,0,0,.18)!important;color:#212121!important}
.mod:hover{box-shadow:0 4px 10px rgba(0,0,0,.22)!important}
.mod *{color:inherit}
.hm-corner,.brand-rule{display:none!important}
.brand-title,.home-head h1,.home-head h2{color:#111111!important}
.brand-sub,.brand-kicker{color:#616161!important}
}
@media screen{
.sidebar .sidebar-header{background:#111111!important;color:#fff!important;padding:10px 14px!important;margin:0 0 4px!important}
.sidebar .sidebar-header *{color:#fff!important}
.sidebar .sidebar-header h1{font-size:16px!important;margin:2px 0 0!important}
.topbar .label{color:rgba(255,255,255,.72)!important;font-size:10.5px!important;line-height:1.2}
.topbar .title{color:#fff!important;font-size:17px!important;font-weight:500!important;line-height:1.25}
.topbar{padding-top:4px!important;padding-bottom:4px!important}
.topbar .btn-primary{background:#111111!important;box-shadow:0 2px 4px rgba(0,0,0,.3)!important}
}
@media screen{
body,.main,.content,.home-wrap{background:#fff!important}
.tbl,.card,.kpi,.mod,.home-card{box-shadow:none!important;border:1px solid #e5e5e5!important}
.sidebar{box-shadow:none!important;border-right:1px solid #e5e5e5!important}
.sl-chip{background:#f2f2f2!important}.sl-chip.on{background:#111!important;color:#fff!important}
#content button.btn:disabled{display:none!important}
.tbl tbody tr.sl-row{cursor:pointer}
.tbl tbody tr.sl-row td:last-child button{opacity:.35;transition:opacity .12s}.tbl tbody tr.sl-row:hover td:last-child button{opacity:1}
.sl-chip.on[data-x]::after{content:" ×";opacity:.7}
.kbd-hint{font-size:11px;color:#888;margin-left:6px}
}
@media screen{
#content a,.modal a{color:#111!important}
#content .tbl a b{text-decoration:none}
.modal .sl-chip.on,.modal .on{background:#111!important;color:#fff!important}
.badge,.pill{background:#f2f2f2!important;color:#333!important;border-color:#ddd!important}
.sl-paid{background:#fdecee!important;color:#b42318!important}
}
@media screen{
#content td .sl-qb{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle;float:right}
#content td .sl-qb .sl-qbt{min-height:28px;padding:0 9px;font:600 12px Roboto,sans-serif;letter-spacing:.03em;border:1px solid #bdbdbd;background:#fff;color:#111;border-radius:4px;cursor:pointer;opacity:1!important;white-space:nowrap}
#content td .sl-qb .sl-qbt:hover{background:#111;color:#fff;border-color:#111}
/* top bar 2 dòng */
.topbar{min-height:0!important;padding:4px 12px!important}
.topbar .label:first-child{display:none!important}
.topbar .title{display:inline!important;font-size:16px!important;margin-right:10px}
.topbar .title+.label{display:inline!important}
}
@media screen{
#content td .sl-qb{float:none;margin-left:6px}
#content .sl-scroll tr.sl-row td:nth-child(4){white-space:nowrap}
}
@media screen and (max-width:1400px){ #content td .sl-qb .t{display:none} #content td .sl-qb .sl-qbt{min-width:30px;padding:0 6px;font-size:14px} }
@media screen and (max-width:600px){
#content td .sl-qb{display:flex;margin:4px 0 0}#content td .sl-qb .t{display:inline}#content td .sl-qb .sl-qbt{flex:1;font-size:12px;min-height:32px}
#content .sl-scroll tr.sl-row td:nth-child(4){white-space:normal}
.topbar .title+.label{display:none!important}
.tbl tbody tr.sl-row td:last-child button{opacity:1}
}
@media screen and (max-width:600px){
table.tbl.m-cards tr.sl-row td:nth-child(4){grid-column:1/-1!important}
table.tbl.m-cards td .sl-qb{display:flex!important;gap:6px;width:100%}
table.tbl.m-cards td .sl-qb .sl-qbt{flex:1;min-height:34px!important;display:inline-flex;align-items:center;justify-content:center}
table.tbl.m-cards tr.sl-row td{background:transparent!important}
}
@media screen and (max-width:600px){ table.tbl.m-cards td{height:auto!important} }
@media screen and (min-width:601px){ #content .sl-scroll tr.sl-row td:nth-child(4) .sl-qb{float:right;margin-left:12px} }
@media screen and (min-width:601px){ #content .sl-scroll tr.sl-row td:nth-child(4){min-width:430px} }
@media screen and (min-width:601px) and (max-width:1400px){ #content .sl-scroll tr.sl-row td:nth-child(4){min-width:300px} }
@media screen and (min-width:601px){
#content .sl-scroll tr.sl-row td:nth-child(4){min-width:0}
#content .sl-cw{display:flex;align-items:center;gap:10px}
#content .sl-cw .sl-cn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#content .sl-cw .sl-qb{float:none!important;margin-left:auto!important;flex:none}
}
@media screen and (min-width:601px){ #content .sl-scroll tr.sl-row td:nth-child(4){width:380px;max-width:380px} #content .sl-cw .sl-cn{white-space:nowrap} }
@media screen and (min-width:601px) and (max-width:1400px){ #content .sl-scroll tr.sl-row td:nth-child(4){width:270px;max-width:270px} }
/* danh sách phiếu: vừa 1280/1500 không cuộn ngang */
@media screen and (min-width:601px){
#content .sl-scroll table.tbl td,#content .sl-scroll table.tbl th{padding-left:4px!important;padding-right:4px!important}
#content .sl-scroll tr.sl-row td:nth-child(4){width:330px;max-width:330px}
#content .sl-cw .sl-cn{font-weight:700}
#content .sl-cw .sl-cn a{font-weight:700;text-decoration:none}
#content .sl-scroll tr.sl-row td:nth-child(3) a b{font-weight:400}
#content .sl-scroll tr.sl-row td:nth-child(3) a{text-decoration:none}
#content .sl-scroll .badge,#content .sl-scroll [class*="sl-st"]{font-size:10px!important;padding:1px 5px!important;white-space:nowrap}
#content .sl-scroll .sl-paid{font-size:9.5px;padding:0 4px;margin-left:2px}
#content .sl-scroll tr.sl-row td:last-child{white-space:nowrap}
#content .sl-scroll tr.sl-row td:last-child .btn-sm{padding:2px 3px!important;min-width:0}
#content td .sl-qb .sl-qbt{padding:0 7px}
}
@media screen and (min-width:601px) and (max-width:1600px){ #content td .sl-qb .t{display:none} #content td .sl-qb .sl-qbt{min-width:30px;padding:0 6px;font-size:14px} #content .sl-scroll tr.sl-row td:nth-child(4){width:260px;max-width:260px} }
@media screen and (min-width:601px) and (max-width:1400px){ #content .sl-scroll tr.sl-row td:nth-child(4){width:220px;max-width:220px} #content .sl-scroll table.tbl td{font-size:12.5px!important} }
@media screen and (min-width:601px) and (max-width:1400px){ #content .sl-scroll tr.sl-row td:nth-child(4){width:200px;max-width:200px} #content .sl-scroll table.tbl th{font-size:11.5px!important} }
@media screen{
#content table.sl-gt .slg{color:#8a8a8a!important;font-weight:400!important;font-size:12px!important;width:38px;padding-left:2px!important;padding-right:3px!important}
#content table.sl-gt th.slg{font-size:10.5px!important;color:#777!important}
#content table.sl-gt td.slkg{font-weight:700}
}
@media screen and (min-width:601px) and (max-width:1600px){ #content .sl-scroll tr.sl-row td:nth-child(4){width:220px;max-width:220px} }
@media screen and (min-width:601px) and (max-width:1400px){ #content .sl-scroll tr.sl-row td:nth-child(4){width:170px;max-width:170px} #content table.sl-gt .slg{font-size:11px!important;width:32px} }
@media screen and (min-width:601px) and (max-width:1400px){
#content .sl-scroll tr.sl-row td:nth-child(4){width:140px;max-width:140px}
#content .sl-scroll table.tbl td,#content .sl-scroll table.tbl th{padding-left:2px!important;padding-right:2px!important;font-size:12px!important}
#content .sl-scroll .badge,#content .sl-scroll [class*="sl-st"]{font-size:9px!important;padding:1px 3px!important;letter-spacing:0!important}
#content td .sl-qb{gap:2px;margin-left:4px}#content td .sl-qb .sl-qbt{min-width:26px;padding:0 4px;font-size:13px}
#content .sl-scroll tr.sl-row td:last-child .btn-sm{padding:2px 2px!important;font-size:10px!important}
}
@media screen and (min-width:601px) and (max-width:1400px){ #content .sl-scroll table.tbl th{white-space:normal!important;font-size:10.5px!important;line-height:1.15} }
@media screen and (min-width:601px) and (max-width:1400px){ #content .sl-scroll tr.sl-row td:nth-child(4){width:190px;max-width:190px} }
@media screen{
#content td .sl-qb .sl-qbt{min-height:26px!important;height:26px;font-size:11.5px!important;padding:0 6px!important;min-width:0!important}
#content td .sl-qb .sl-qbt.sq{width:26px;padding:0!important;font:800 11px Roboto,sans-serif!important;letter-spacing:0}
#content td .sl-qb .sl-qbt.zl{color:#0068ff;font-size:14px!important;border-color:#9cc2ff}
#content td .sl-qb .sl-qbt.zl:hover{background:#0068ff;color:#fff;border-color:#0068ff}
}
@media screen and (max-width:600px){ #content td .sl-qb .sl-qbt,#content td .sl-qb .sl-qbt.sq{height:34px;flex:1;width:auto} }
@media screen and (min-width:1401px) and (max-width:1600px){ #content .sl-scroll tr.sl-row td:nth-child(4){width:262px;max-width:262px} #content .sl-scroll table.tbl td,#content .sl-scroll table.tbl th{padding-left:3px!important;padding-right:3px!important} }
@media screen{
#content table.sl-gt .slud{white-space:nowrap;font-size:12px!important;width:70px}
#content table.sl-gt td.slud b{font-weight:700}
#content table.sl-gt td.slud small{color:#b42318;font-size:10.5px;font-weight:600}
#content table.sl-gt td.slud .udi{color:#aaa}
#content table.sl-gt th.slud{font-size:10.5px!important}
}
@media screen and (min-width:1401px) and (max-width:1600px){ #content .sl-scroll tr.sl-row td:nth-child(4){width:225px;max-width:225px} }
@media screen and (min-width:601px) and (max-width:1400px){ #content .sl-scroll tr.sl-row td:nth-child(4){width:150px;max-width:150px} #content table.sl-gt .slud{font-size:11px!important;width:58px} }
@media screen{ #content table.sl-gt .slud{width:52px!important;text-transform:none} #content table.sl-gt th.slud{white-space:normal!important;line-height:1.1} }
@media screen and (min-width:601px){ #content .sl-cw .sl-cn,#content .sl-cw .sl-cn a{letter-spacing:0!important;font-size:13px!important} #content .sl-cw{gap:6px} #content td .sl-qb{margin-left:auto!important} }
/* cột thao tác giờ là kế cuối (ƯĐ CÒN ở cuối) */
@media screen and (min-width:601px){
#content table.sl-gt tr.sl-row td:nth-last-child(2){white-space:nowrap}
#content table.sl-gt tr.sl-row td:nth-last-child(2) .btn-sm{padding:2px 3px!important;min-width:0}
.tbl tbody tr.sl-row td:nth-last-child(2) button{opacity:.35;transition:opacity .12s}.tbl tbody tr.sl-row:hover td:nth-last-child(2) button{opacity:1}
}
@media screen and (min-width:601px) and (max-width:1400px){ #content table.sl-gt tr.sl-row td:nth-last-child(2) .btn-sm{padding:2px 2px!important;font-size:10px!important} }