
/* Mobile receipt preview fits the phone while print rules keep the configured paper size. */
@media screen and (max-width:600px){
 #drawer{padding:4px!important}
 #drawer .drawer-box:has(#printReceipt){width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;min-width:0!important;padding:8px!important;overflow-x:hidden!important}
 #drawerContent{width:100%;min-width:0;overflow-x:hidden}
 #drawerContent>#printReceipt{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;margin:0!important;padding:8px!important;overflow:visible!important}
 #printReceipt .web-print-meta{grid-template-columns:minmax(0,1fr)!important;gap:5px!important;overflow-wrap:anywhere}
 #printReceipt .web-print-note{grid-column:1}
 #printReceipt .voucher-brand{max-width:100%;flex-wrap:wrap;overflow-wrap:anywhere}
 #printReceipt .voucher-brand h3{font-size:17px!important;line-height:1.25;overflow-wrap:anywhere}
 #printReceipt .voucher-items{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important}
 #printReceipt .voucher-items th,#printReceipt .voucher-items td{white-space:normal!important;overflow-wrap:anywhere;word-break:normal;padding:4px 3px!important;font-size:10px!important}
 #printReceipt .voucher-items.sale-a5-items{display:block!important;width:100%!important;table-layout:fixed!important;font-size:12px!important}
 #printReceipt .voucher-items.sale-a5-items colgroup,#printReceipt .voucher-items.sale-a5-items thead{display:none!important}
 #printReceipt .voucher-items.sale-a5-items tbody{display:block!important;width:100%}
 #printReceipt .voucher-items.sale-a5-items tbody tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin:8px 0;border:1px solid #9eb4ca;background:#fff}
 #printReceipt .voucher-items.sale-a5-items tbody td{display:block!important;min-width:0!important;width:auto!important;padding:6px!important;border:0!important;border-bottom:1px solid #d9e2ec!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere;font-size:12px!important}
 #printReceipt .voucher-items.sale-a5-items tbody td:nth-child(2){grid-column:1/-1;background:#edf4fb;font-weight:700}
 #printReceipt .voucher-items.sale-a5-items tbody td::before{display:block;margin-bottom:2px;color:#536b82;font-size:10px;font-weight:600}
 #printReceipt .voucher-items.sale-a5-items tbody td:nth-child(1)::before{content:'STT'}
 #printReceipt .voucher-items.sale-a5-items tbody td:nth-child(2)::before{content:'Tên hàng'}
 #printReceipt .voucher-items.sale-a5-items tbody td:nth-child(3)::before{content:'ĐVT'}
 #printReceipt .voucher-items.sale-a5-items tbody td:nth-child(4)::before{content:'Số lượng'}
 #printReceipt .voucher-items.sale-a5-items tbody td:nth-child(5)::before{content:'Đơn giá'}
 #printReceipt .voucher-items.sale-a5-items tbody td:nth-child(6)::before{content:'Thành tiền'}
 #printReceipt .voucher-items.sale-a5-items tbody td:nth-child(7)::before{content:'CK %'}
 #printReceipt .voucher-items.sale-a5-items tbody td:nth-child(8)::before{content:'Tiền CK'}
 #printReceipt .voucher-items.sale-a5-items tbody td:nth-child(9)::before{content:'VAT'}
 #printReceipt .voucher-items.sale-a5-items tbody td:nth-child(10)::before{content:'Tổng tiền'}
 #printReceipt .sale-a5-totals{width:100%!important;max-width:100%;grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;text-align:left}
 #printReceipt .sale-a5-totals>*:nth-child(even){text-align:right;overflow-wrap:anywhere}
 #printReceipt .voucher-signatures{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 6px!important;text-align:center;margin:16px 0!important}
 #printReceipt .seller-name{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere}
 .voucher-actions{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:6px;background:#fff;padding:8px 0!important;z-index:5}
}
/* Compact readable desktop typography; grids scroll within their own containers. */
html{font-family:Arial,"Segoe UI",sans-serif;font-size:15px;-webkit-text-size-adjust:100%}body{font-size:14px;line-height:1.4}input,select,textarea,button{font-family:inherit;font-size:14px}button{min-height:36px}h2{font-size:19px;line-height:1.3}.panelhead h2{font-size:18px}.gridwrap,.fullgrid{max-width:100%;overflow:auto}td,th{font-size:13px;line-height:1.35;padding:7px 8px}.panelhead,.tshop-toolbar,.voucher-filters{gap:8px}.panelhead input{min-width:120px}.web-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px}.web-form label{display:flex;flex-direction:column;gap:5px}.web-form input:not([type=checkbox]),.web-form select{min-height:40px;width:100%;padding:8px;border:1px solid #a9bdd3;border-radius:5px}.web-form fieldset,.web-form .hint,.web-form [role=alert],.web-form [role=status],.web-actions,.web-edit-lines,#webVoucherTotals{grid-column:1/-1;min-width:0}.web-check{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important}.web-check input{width:18px;height:18px}.web-permissions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.web-actions{display:flex;flex-wrap:wrap;gap:8px}.web-form [role=alert]{color:#ad2020}.web-edit-lines input{min-width:85px}#webLogoPreview{width:180px;max-height:100px;object-fit:contain}.web-print-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:8px 0}.web-print-note{grid-column:1/-1}#printReceipt .voucher-brand small{font-size:10px;line-height:1.3}#printReceipt .voucher-items{font-size:11px!important}#printReceipt .voucher-logo{font:900 italic 30px Arial!important}.drawer-box{max-width:calc(100vw - 20px)}.drawer-box:has(.web-form){width:min(1050px,96vw)}
@media(max-width:900px){.layout{grid-template-columns:150px minmax(0,1fr)}.saleform{grid-template-columns:minmax(0,1fr)!important}.saletotals{width:100%;position:static!important}.saleform .salefields{grid-template-columns:repeat(2,minmax(0,1fr))!important}.top{padding:8px 12px}.debt-report-criteria{display:grid;grid-template-columns:1fr!important}.debt-report-criteria fieldset{min-width:0}.debt-checkout{grid-template-columns:1fr!important}.debt-customers{max-height:230px}.edit-sale-shell{grid-template-columns:1fr!important}}
@media(max-width:600px){body{font-size:15px;overflow-x:hidden}input,select,textarea{font-size:16px!important;min-height:42px}button{font-size:14px;min-height:42px;padding:8px 11px}.top{height:auto;min-height:65px;align-items:flex-start;gap:6px;flex-wrap:wrap}.brand{gap:7px}.brand strong{font-size:16px}.brand small{font-size:10px}.brandmark{padding:7px}.top-actions{max-width:100%;display:flex;flex-wrap:wrap;gap:4px}#snapshot{font-size:11px!important;display:block!important;max-width:95vw;overflow-wrap:anywhere}.layout{display:block!important}.sidebar{display:none!important}main{padding:8px!important;min-width:0;width:100%;overflow:hidden}nav{height:auto!important;min-height:44px;display:flex;flex-wrap:wrap;padding:4px!important;gap:2px}nav>.menu-item{position:relative}nav button{padding:8px!important;font-size:13px;white-space:nowrap}.menu-dropdown{position:absolute;max-width:calc(100vw - 16px);max-height:65vh;overflow-y:auto;z-index:110}.panelhead{padding:10px;display:flex;flex-wrap:wrap;align-items:center}.panelhead h2{width:100%;margin:0}.panelhead input{flex:1;min-width:120px;max-width:100%}.panel{min-width:0;max-width:100%;margin:0 0 10px}.tshop-toolbar{display:flex;flex-wrap:wrap;padding:8px}.voucher-filters{display:grid;grid-template-columns:1fr 1fr;padding:8px}.voucher-filters label{min-width:0}.voucher-filters input,.voucher-filters select{width:100%;min-width:0}.voucher-filters>input{grid-column:1/-1}.salehead{display:block;padding:10px}.salehead>div:last-child{display:flex;flex-wrap:wrap;margin-top:8px}.saleform{display:block!important;max-width:100%}.salemain,.saletotals{padding:10px;min-width:0;margin-bottom:10px}.saleform .salefields{grid-template-columns:1fr!important;display:grid;min-width:0}.salefields label{min-width:0}.sale-meta{display:flex;flex-wrap:wrap;font-size:12px}.productsearch input{width:100%}.suggest{max-width:100%;max-height:240px;overflow:auto}.cart{min-width:1050px}.gridwrap{overflow:auto;-webkit-overflow-scrolling:touch;max-width:100%}.gridwrap>table{min-width:650px}.gridwrap:has(.cart):before{content:'Vuốt ngang để xem đủ các cột hàng hóa';display:block;font-size:12px;color:#3e5e7b;padding:6px}.gridwrap td,.gridwrap th{font-size:13px}.drawer{padding:5px!important}.drawer-box,.drawer-box:has(.voucher-paper){width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;max-height:95dvh;padding:8px!important;overflow:auto}.drawerContent,#drawerContent{max-width:100%;min-width:0;overflow:auto}#printReceipt{flex:none;margin:0!important;min-width:184mm}.voucher-actions{position:sticky;bottom:0;display:flex;flex-wrap:wrap;background:#fff;padding:8px;z-index:5}.web-form{grid-template-columns:1fr;padding:8px}.web-permissions{grid-template-columns:1fr}.web-form label{min-width:0}.web-actions{position:sticky;top:0;background:white;padding:6px 0;z-index:2}.debt-report-criteria fieldset{display:grid;grid-template-columns:1fr!important}.debt-report-criteria label{min-width:0}.access-columns,.role-top,.edit-voucher-fields{grid-template-columns:1fr!important}.footer{font-size:11px;flex-wrap:wrap}.auth-card{width:calc(100vw - 20px);max-width:420px}.auth-card label{display:block}.auth-card label input{width:100%}}
@media print{.web-actions,.voucher-actions{display:none!important}.web-print-meta{display:grid;grid-template-columns:1fr 1fr}.web-print-note{grid-column:1/-1}}
.debt-column-head{width:100%;font-weight:700;cursor:pointer}.debt-filter-popup{z-index:150;min-width:230px;max-width:90vw;text-align:left;white-space:normal;background:white;border:1px solid #8aa5bf;box-shadow:0 4px 14px #0003;padding:10px}.owner-options{max-height:240px;overflow:auto}.owner-options label{display:flex;align-items:center;gap:7px;padding:5px}.owner-options input{width:18px;height:18px;min-height:18px!important}.owner-options [hidden]{display:none!important}.debt-filter-popup>input{width:100%;margin:8px 0}.debt-filter-popup button{margin:4px}.web-print-meta,.tshop-head-grid{font-size:11px!important}.voucher-editor .gridwrap{min-width:0}
@media(max-width:600px){.navgroup{position:static!important}.navpop{position:absolute!important;left:8px!important;right:8px!important;top:auto!important;width:auto!important;max-height:65vh;overflow:auto}.navpop button{width:100%;text-align:left}footer{font-size:11px;display:flex;flex-wrap:wrap}.debt-filter-popup{position:fixed!important;left:10px!important;right:10px!important;top:110px!important;max-width:none!important}}

.web-debt-due{background:#ffe200!important;color:#171000!important;font-weight:700!important}.web-debt-overdue{background:#ef7676!important;color:#240808!important;font-weight:700!important}.selected .web-debt-due,.selected .web-debt-overdue{color:#111!important}.web-staff-phone{display:block;font-size:11px;line-height:1.4}.seller-name{display:inline-block;min-width:145px;max-width:235px;white-space:normal;line-height:1.4}
@media print{.web-debt-due,.web-debt-overdue{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.web-default-markup{padding:12px 16px;background:#eef5fc;border-bottom:1px solid #cbdced;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}.web-default-markup label{font-weight:700}.web-default-markup input{width:110px;font-size:16px;padding:7px}.web-default-markup small{flex-basis:100%;color:#435c72;font-size:13px}.web-default-markup p{margin:0;font-weight:600;color:#185b31}@media(max-width:600px){.web-default-markup{padding:10px}.web-default-markup .web-actions{width:100%}.web-default-markup button{flex:1;white-space:normal}}
/* Ensure later phone rules cannot restore the paper width inside the preview drawer. */
@media screen and (max-width:600px){
 #drawer .drawer-box:has(#printReceipt){width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;min-width:0!important}
 #drawerContent>#printReceipt.voucher-paper,#drawerContent>#printReceipt.sale-a5{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
 #printReceipt .voucher-items{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important}
 #printReceipt .voucher-items th,#printReceipt .voucher-items td{white-space:normal!important;overflow-wrap:anywhere;word-break:normal;padding:4px 3px!important;font-size:10px!important}
}

