@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap";:root{--primary:#533afd;--primary-deep:#4434d4;--primary-press:#2e2b8c;--primary-soft:#665efd;--primary-subdued:#b9b9f9;--brand-dark:#1c1e54;--ink:#0d253d;--ink-secondary:#273951;--ink-mute:#4f6076;--on-primary:#fff;--canvas:#fff;--canvas-soft:#f6f9fc;--hairline:#dbe1ea;--hairline-input:#9fb2c8;--ruby:#ea2261;--green:#0a8a4a;--r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:9999px;--shadow-1:#0037701a 0 1px 3px, #0037700f 0 1px 2px;--shadow-2:#0037701f 0 8px 24px, #0037700f 0 2px 6px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-feature-settings:"ss01";background:var(--canvas-soft);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Inter,SF Pro Display,system-ui,-apple-system,sans-serif;font-size:15px;font-weight:400;line-height:1.45}input::placeholder{color:#9aa7b8;opacity:1}.text-right,.data-table td,.hang-hoa-table td,.kh-no strong{font-feature-settings:"tnum"}.navbar{background:var(--canvas);border-bottom:1px solid var(--hairline);color:var(--ink);align-items:center;gap:8px;height:56px;padding:0 24px;display:flex}.navbar .brand{letter-spacing:-.3px;color:var(--ink);margin-right:24px;font-size:17px;font-weight:600}.navbar a{color:var(--ink-mute);border-radius:var(--r-pill);padding:7px 14px;font-size:15px;text-decoration:none;transition:all .15s}.navbar a:hover{color:var(--ink);background:var(--canvas-soft)}.navbar a.active{color:var(--primary);background:var(--primary-subdued);font-weight:500}.page-hoadon{flex-direction:column;gap:12px;height:calc(100vh - 56px);padding:16px 20px;display:flex;overflow:hidden}.kh-section{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-1);flex-shrink:0;padding:14px 18px}.kh-row{flex-wrap:wrap;align-items:flex-end;gap:14px;display:flex}.kh-field{flex-direction:column;gap:5px;display:flex}.kh-field label{color:var(--ink-mute);text-transform:uppercase;letter-spacing:.4px;font-size:11px;font-weight:500}.kh-field input{border:1px solid var(--hairline-input);border-radius:var(--r-sm);color:var(--ink);padding:8px 12px;font-family:inherit;font-size:15px}.kh-field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-subdued);outline:none}.kh-no{background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--r-md);flex-direction:column;gap:2px;min-width:150px;padding:8px 16px;display:flex}.kh-no span{color:var(--ink-mute);text-transform:uppercase;letter-spacing:.4px;font-size:11px}.kh-no strong{font-size:20px;font-weight:600}.main-cols{flex:1;gap:14px;min-height:0;display:flex}.col-left{flex-direction:column;flex-shrink:0;gap:12px;width:320px;display:flex;overflow:auto}.col-right{flex-direction:column;flex:1;gap:10px;display:flex;overflow:auto}.section-box{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden}.section-header{background:var(--canvas-soft);color:var(--ink);border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:center;padding:10px 16px;font-size:13px;font-weight:500;display:flex}.data-table{border-collapse:collapse;width:100%}.data-table th{background:var(--canvas);color:var(--ink-mute);text-align:left;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--hairline);padding:9px 14px;font-size:11px;font-weight:600}.data-table td{border-bottom:1px solid var(--hairline);padding:9px 14px;font-size:14px}.data-table tbody tr:hover{background:var(--canvas-soft);cursor:pointer}.data-table tr.selected{background:var(--primary-subdued)!important}.data-table tfoot tr,.footer-total{color:var(--ink);background:var(--canvas-soft)!important}.data-table tfoot td{border:none;border-top:2px solid var(--hairline);padding:10px 14px;font-weight:600}.empty-row{text-align:center;color:var(--ink-mute);font-style:italic;padding:14px!important}.hang-hoa-table{border-collapse:collapse;width:100%}.hang-hoa-table th{background:var(--canvas);color:var(--ink-mute);text-align:left;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--hairline);padding:9px 12px;font-size:11px;font-weight:600}.hang-hoa-table td{border-bottom:1px solid var(--hairline);padding:5px 8px}.hang-hoa-table tbody tr.row-saved{background:var(--canvas-soft);color:var(--ink-secondary)}.hang-hoa-table tfoot td{background:var(--canvas-soft);border-top:2px solid var(--hairline);padding:10px 12px;font-size:14px}.hang-hoa-table input{border:1px solid var(--hairline-input);border-radius:var(--r-sm);width:100%;color:var(--ink);padding:6px 8px;font-family:inherit;font-size:14px}.hang-hoa-table input:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-subdued);outline:none}.tt-input-row{background:var(--canvas-soft);border-top:1px solid var(--hairline);align-items:center;gap:10px;padding:12px 14px;display:flex}.tt-input-row input{border:1px solid var(--hairline-input);border-radius:var(--r-sm);flex:1;min-width:0;padding:8px 12px;font-family:inherit;font-size:14px}.tt-input-row input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-subdued);outline:none}.tt-input-row .btn-primary{white-space:nowrap;flex-shrink:0;padding-left:16px;padding-right:16px}.suggest-list{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);z-index:200;max-height:200px;box-shadow:var(--shadow-2);margin-top:4px;list-style:none;position:absolute;top:100%;left:0;right:0;overflow-y:auto}.suggest-list li{cursor:pointer;padding:8px 14px;font-size:14px}.suggest-list li:hover{background:var(--primary-subdued);color:var(--primary-deep)}.btn-primary{background:var(--primary);color:var(--on-primary);border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;border:none;padding:8px 18px;font-family:inherit;font-size:15px;font-weight:500;transition:background .15s;box-shadow:0 1px 2px #533afd40}.btn-primary:hover{background:var(--primary-deep)}.btn-primary:active{background:var(--primary-press)}.btn-secondary{background:var(--canvas);color:var(--primary);border:1px solid var(--primary);border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;padding:8px 18px;font-family:inherit;font-size:15px;font-weight:500;transition:background .15s}.btn-secondary:hover{background:var(--primary-subdued)}.btn-del{color:var(--ruby);cursor:pointer;border-radius:var(--r-sm);background:0 0;border:none;padding:2px 6px;font-size:14px}.btn-del:hover{background:#fde8ee}.btn-new{background:var(--primary-subdued);color:var(--primary-deep);border-radius:var(--r-pill);cursor:pointer;border:none;padding:4px 12px;font-size:12px;font-weight:500}.btn-new:hover{background:var(--primary-soft);color:#fff}.btn-open{background:var(--primary-subdued);color:var(--primary-deep);border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;border:none;padding:5px 12px;font-family:inherit;font-size:13px;font-weight:500}.btn-open:hover{background:var(--primary);color:#fff}.actions{flex-shrink:0;gap:12px;display:flex}.msg-ok{color:var(--green);font-size:14px;font-weight:500}.msg-err{color:var(--ruby);font-size:14px;font-weight:500}.page{padding:24px}.search-row{align-items:center;gap:14px;display:flex}.search-row input{border:1px solid var(--hairline-input);border-radius:var(--r-sm);padding:8px 12px;font-family:inherit;font-size:15px}.search-row input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-subdued);outline:none}.text-right{text-align:right}.page>div{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:20px}.page .search-row{margin-bottom:16px}.inline-edit{border-radius:var(--r-sm);width:100%;color:var(--ink);background:0 0;border:1px solid #0000;padding:5px 8px;font-family:inherit;font-size:14px}.inline-edit:hover{border-color:var(--hairline)}.inline-edit:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-subdued);background:var(--canvas);outline:none}.login-screen{background:var(--canvas-soft);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-box{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-2);text-align:center;flex-direction:column;gap:14px;width:340px;padding:40px 36px;display:flex}.login-box h1{letter-spacing:-.5px;color:var(--ink);font-size:24px;font-weight:600}.login-box p{color:var(--ink-mute);margin-bottom:6px;font-size:14px}.login-box input{border:1px solid var(--hairline-input);border-radius:var(--r-sm);padding:10px 14px;font-family:inherit;font-size:15px}.login-box input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-subdued);outline:none}.login-box .btn-primary{padding:10px;font-size:15px}.btn-logout{border:1px solid var(--hairline);color:var(--ink-mute);border-radius:var(--r-pill);cursor:pointer;background:0 0;margin-left:auto;padding:6px 14px;font-family:inherit;font-size:14px}.btn-logout:hover{border-color:var(--ruby);color:var(--ruby)}.print-header{text-align:center;margin-bottom:16px;display:none}.print-header h2{font-size:17px;font-weight:600}.print-header h3{margin:8px 0;font-size:14px;font-weight:600}.print-header p{color:var(--ink-secondary);margin:2px 0;font-size:12px}.print-footer{margin-top:18px;font-size:12px;display:none}.print-totals{display:none}.print-totals table{border-collapse:collapse;min-width:300px;margin-top:12px;margin-left:auto}.print-totals td{padding:4px 10px;font-size:13px}.print-totals tr.grand td{border-top:1px solid #000;padding-top:6px;font-size:15px}@media (width<=820px){body{font-size:14px}.navbar{flex-wrap:wrap;gap:2px 4px;height:auto;min-height:52px;padding:0 12px}.navbar .brand{margin-right:10px;font-size:16px}.navbar a{padding:6px 12px}.page-hoadon{gap:12px;height:auto;padding:12px;overflow:visible}.main-cols{flex-direction:column;gap:12px}.col-left{width:100%;overflow:visible}.col-right{gap:12px;overflow:visible}.col-right .section-box{overflow:visible}.kh-section{padding:12px 14px}.kh-row{flex-direction:column;align-items:stretch;gap:10px}.kh-no{flex-direction:row;justify-content:space-between;align-items:center;min-width:0}.kh-no strong{font-size:18px}.section-header{flex-wrap:wrap;gap:6px;padding:9px 12px}.hang-hoa-table th{letter-spacing:0;padding:6px 4px;font-size:10px}.hang-hoa-table td{padding:4px;font-size:13px}.hang-hoa-table input{padding:6px 5px;font-size:13px}.hang-hoa-table td:first-child,.hang-hoa-table th:first-child{padding-left:2px;padding-right:2px}.actions{flex-wrap:wrap;gap:10px}.actions .btn-primary,.actions .btn-secondary{text-align:center;flex:auto;padding:11px 14px}.page{padding:12px}.page>div{-webkit-overflow-scrolling:touch;padding:12px;overflow-x:auto}.page .data-table{min-width:640px}.search-row{flex-wrap:wrap;gap:10px}.search-row input{flex:180px;max-width:none!important}}@media print{.navbar,.actions,.no-print,.col-left,.kh-no,.tt-input-row,.section-header{display:none!important}.page-hoadon{height:auto;padding:0;overflow:visible}.main-cols{display:block}.col-right{overflow:visible}.section-box{box-shadow:none;border:none}.print-header,.print-footer,.print-totals{display:block}.hang-hoa-table tfoot{display:none}body{background:#fff}}