/* KhoViet 1.7.25 — original visual system, studied from user-provided
   saved-page measurements and screenshots. No third-party code or brand assets imported.
   Presentation layer only: all API routes, field names, and forms stay intact. */
:root {
 --kv25-primary:#0878e8; --kv25-primary-deep:#0067ca; --kv25-accent:#0094ed;
 --kv25-text:#273443; --kv25-muted:#728090; --kv25-bg:#f5f6f8;
 --kv25-surface:#fff; --kv25-border:#e2e6eb; --kv25-blue-soft:#eff7ff;
 --kv25-row:#f7faff; --kv25-shadow:0 2px 10px rgba(30,48,70,.055);
 --kv25-focus:0 0 0 3px rgba(0,127,246,.14);
}
html {scroll-behavior:auto}
body:not(.pos-fullscreen):not(.return-pos-fullscreen) {font-family:Arial,"Segoe UI",sans-serif;background:var(--kv25-bg);color:var(--kv25-text);font-size:14px}
input,select,textarea,button {font-family:inherit}
button, summary {touch-action:manipulation}
input[type="checkbox"],input[type="radio"] {accent-color:var(--kv25-primary)}
:where(button,a,input,select,textarea,summary):focus-visible {outline:2px solid var(--kv25-primary);outline-offset:2px}
/* Compact, calm administrative chrome. Menu remains usable under dialogs. */
.app-shell .app-header{height:59px;min-height:59px;display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid #e7ebf0;padding:0 20px;position:relative;z-index:151}
.app-header .brand{gap:11px}
.app-header .brand-mark{width:35px;height:35px;border-radius:10px;background:linear-gradient(140deg,#29b5e6 0%,#0876db 80%);font-size:21px;box-shadow:none}
.app-header .brand-copy b{font-size:21px;letter-spacing:-.5px;color:#173451}
.app-header .brand-copy small{font-size:11px;color:#7c8b9a;margin-top:2px}
.kv25-hamburger{appearance:none;background:transparent;color:#0878e8;border:0;width:37px;height:37px;flex:0 0 37px;border-radius:5px;display:grid;place-items:center;cursor:pointer;padding:6px}
.kv25-hamburger:hover,.kv25-hamburger[aria-expanded="true"]{background:#eaf4ff}
.kv25-hamburger .kv25-lines{display:flex;flex-direction:column;gap:4px;width:20px}
.kv25-hamburger .kv25-lines i{height:2px;background:currentColor;width:100%;border-radius:4px;display:block}
.kv25-brand-wrap{display:flex;align-items:center;gap:12px;min-width:0}
.app-header .profile-dropdown>summary{padding:4px 7px;border-radius:7px}
.app-header .profile-avatar{width:34px;height:34px;background:#eaf4ff;color:#1476d7}
.app-header .profile-name b{font-size:13px}
.app-header .profile-name small{font-size:11px;color:#8090a1}
.app-shell .main-nav{height:47px;min-height:47px;background:#fff;color:#354252;border-bottom:1px solid #e1e6eb;box-shadow:0 2px 5px rgba(30,55,80,.035);padding:0 18px;gap:2px;position:relative;z-index:140;overflow:visible}
.app-shell .nav-item,.app-shell .nav-dropdown>summary{height:47px;border-radius:0;color:#35475b;font-size:13px;font-weight:600;padding:0 16px;box-shadow:none;position:relative}
.app-shell .nav-item:hover,.app-shell .nav-dropdown>summary:hover{color:#0074d8;background:#f1f7ff}
.app-shell .nav-item.is-current,.app-shell .nav-dropdown.is-current>summary{color:#0075df;background:#f1f8ff;box-shadow:inset 0 -3px 0 #0982ed}
.app-shell .nav-menu{min-width:212px;top:100%;padding:5px;border:1px solid #dce4ed;box-shadow:0 12px 26px #132f5128;border-radius:0 0 7px 7px;z-index:300}
.app-shell .nav-menu a{border-radius:4px;color:#344659;font-size:13px;padding:11px 12px}
.app-shell .nav-menu a:hover{background:#eff7ff;color:#006ed5}
.app-shell .nav-sales-cta{height:33px;min-width:123px;border-radius:5px;box-shadow:none;background:#0878e8;color:#fff;font-size:13px;padding:0 14px;font-weight:700}
.app-shell .nav-sales-cta:hover{background:#006acb;color:#fff}
/* Desktop hamburger: nav becomes a side-mounted quick-access panel. */
body.kv25-nav-open .app-shell .main-nav {display:flex;position:fixed;left:0;top:59px;bottom:0;height:auto;min-height:0;width:252px;flex-direction:column;gap:2px;padding:12px 8px;align-items:stretch;overflow-y:auto;overflow-x:visible;border-right:1px solid #dce4ed;box-shadow:10px 12px 28px #18365225;z-index:400}
body.kv25-nav-open .app-shell .nav-dropdown{display:block;flex:0 0 auto}
body.kv25-nav-open .app-shell .nav-item,body.kv25-nav-open .app-shell .nav-dropdown>summary{width:100%;height:43px;border-radius:6px;justify-content:space-between;padding:0 13px}
body.kv25-nav-open .app-shell .nav-sales-cta{margin:9px 6px 0;min-height:38px}
body.kv25-nav-open .app-shell .nav-menu{position:static;box-shadow:none;border-radius:5px;border-color:#e8edf4;min-width:0;margin-bottom:5px}
.kv25-nav-scrim{position:fixed;inset:59px 0 0;background:rgba(18,35,56,.15);z-index:350;display:none}
body.kv25-nav-open .kv25-nav-scrim{display:block}
body.pos-fullscreen .kv25-nav-scrim,body.return-pos-fullscreen .kv25-nav-scrim{display:none!important}
/* Administration: practical dense spacing inspired by reference layouts. */
.app-shell .app-main{background:var(--kv25-bg);min-height:calc(100vh - 106px)}
.app-shell .app-main .page{padding:20px 22px 28px}
.app-main footer{background:transparent;border-top:1px solid #e7eaee;color:#97a2af;padding:12px 22px}
.page-heading{margin-bottom:18px;gap:14px}
.page-heading h1{font-size:22px;line-height:1.35;color:#252f3b;font-weight:700;letter-spacing:0}
.page-heading p{font-size:12px;color:var(--kv25-muted);line-height:1.5;margin-top:3px}
.eyebrow{font-size:10px;letter-spacing:.75px;font-weight:700;color:#8c96a3}
.panel,.metric,.quick-card,.master-data,.master-filter,.kv19-data,.kv19-sidebar,.kv-prod-data,.kv-prod-sidebar {background:#fff;border:1px solid var(--kv25-border);border-radius:7px;box-shadow:var(--kv25-shadow)}
.panel-heading{padding:14px 17px;min-height:54px;border-bottom:1px solid #e7edf2}
.panel-heading h2{font-size:16px;color:#243548}
.panel-heading p{font-size:12px;color:#8390a0}
.btn{font-size:13px;font-weight:600;min-height:35px;border-radius:4px;padding:7px 13px;box-shadow:none;transition:background .15s,border-color .15s}
.btn.primary{background:var(--kv25-primary);color:#fff}
.btn.primary:hover{background:var(--kv25-primary-deep)}
.btn.secondary{background:#fff;color:#33475c;border-color:#d8e1e9}
.btn.secondary:hover{background:#f5f9fd}
.form-grid input,.form-grid select,.stack-form input,.stack-form select,.search-form input,.inline-form input,.inline-form select,.summary-left input,
.kv18-purchase-filter input,.kv18-purchase-filter select{border-radius:4px;min-height:36px;border:1px solid #d3dce6;font-size:13px}
.form-grid input:focus,.form-grid select:focus,.stack-form input:focus,.stack-form select:focus,.search-form input:focus,.inline-form select:focus,.summary-left input:focus{outline:none;border-color:#1489ed;box-shadow:var(--kv25-focus)}
label, .form-grid label,.stack-form label,.inline-form label{font-size:13px}
.table-wrap thead th,.master-table thead th,.kv19-table thead th,.kv-prod-table thead th{background:#f3f7fb;color:#334759;border-bottom:1px solid #dbe5ee;font-size:12px;letter-spacing:0;font-weight:650;padding:12px 12px}
.table-wrap tbody td,.master-table tbody td,.kv19-table tbody td,.kv-prod-table tbody td{font-size:13px;padding:11px 12px;color:#34465a;border-color:#edf0f3}
.table-wrap tbody tr:hover,.master-table tbody tr:hover,.kv19-table tbody tr:hover,.kv-prod-table tbody tr:not(.kv-prod-summary):hover{background:#eff8ff}
.kv19-table tr,.kv-prod-table tr{transition:background-color .13s}
.strong-link,.text-link,.kv-prod-code,.kv19-table a{color:#0874d8}
.pill,.count-badge{border-radius:4px}
.metric-grid{gap:15px}
.metric{padding:17px 19px;min-height:129px;border-color:#e5e9ef}
.metric strong{font-size:23px;font-variant-numeric:tabular-nums}
.metric-top{font-size:13px;color:#637385}
.kv-chart,.kv-month-total{background:#fff}
.kv-chart-bar{background:#0878e8}
.kv-rank-panel,.kv-recent-activity{box-shadow:none}
.quick-card{min-height:76px}
/* Reference: gray workspace, separate left filter stack, clean white data grid. */
.kv-prod-toolbar,.kv19-directory-toolbar{background:transparent;padding-top:4px;padding-bottom:16px;gap:12px}
.kv-prod-toolbar h1,.kv19-directory-toolbar h1{font-size:22px;letter-spacing:0;color:#263849;font-weight:700}
.kv-prod-search,.kv19-search{background:#fff;border:1px solid #d6dee8;border-radius:5px;min-height:39px;box-shadow:none}
.kv-prod-search:focus-within,.kv19-search:focus-within{border-color:#1787e6;box-shadow:var(--kv25-focus)}
.kv-prod-search input,.kv19-search input{font-size:13px}
.kv-prod-action,.kv19-action{font-size:12px;font-weight:600;min-height:37px;border-radius:4px;background:#fff;border:1px solid #d7e1eb;color:#365169;box-shadow:none}
.kv-prod-add,.kv19-add{background:#0878e8;color:#fff;border-color:#0878e8}
.kv-prod-add:hover,.kv19-add:hover{background:#006bd1;color:#fff}
.kv-prod-layout,.kv19-layout{gap:15px;align-items:start}
.kv-prod-sidebar,.kv19-sidebar{border-radius:6px;overflow:hidden}
.kv-prod-filter,.kv19-filter-block{border-bottom:1px solid #edf0f4;padding:15px 14px}
.kv-prod-filter>strong,.kv19-filter-block>strong,.kv-prod-filter-heading strong,.kv19-filter-header strong{font-size:13px;color:#304153;font-weight:700}
.kv-prod-filter>small,.kv19-muted{color:#8898a8;font-size:11px}
.kv-prod-filter select,.kv-prod-filter input,.kv19-filter-block select,.kv19-filter-block input{border-color:#dae2e8;font-size:12px;border-radius:4px;min-height:34px}
.kv-prod-data,.kv19-data{overflow:visible}
.kv-prod-table-scroll,.kv19-scroll{overflow-x:auto}
.kv-prod-table,.kv19-table{background:#fff}
.kv-prod-image{border-radius:5px;background:#f3f7fa;color:#92a6b8}
.kv-prod-footer,.kv19-footer{background:#fff;border-top:1px solid #e5ebf1}
.kv-prod-summary{background:#f8fbfe}
/* Purchasing and document directories */
.kv18-purchase-heading{display:block;padding:16px 17px 10px}
.kv18-purchase-heading h2{margin-bottom:12px}
.kv18-purchase-filter{gap:10px;align-items:end}
.kv18-purchase-filter>label{font-size:12px}
.kv18-purchase-filter .kv18-purchase-search{max-width:none}
.kv18-purchase-filter input,.kv18-purchase-filter select{background:#fff}
/* Shared popovers, dropdowns, dialogs. */
.master-create-popover,.kv19-create-popover,.kv-prod-create-panel,.pos-search-popover,.pos-customer-results,.kv14-suggest,.search-suggest-popover{border:1px solid #dce5ed;border-radius:6px;box-shadow:0 14px 30px rgba(19,47,78,.19)}
.master-create-popover{z-index:600}
input[type=search]::-webkit-search-cancel-button{cursor:pointer}
/* POS: tighter rows and reference-like, edge-to-edge cashier layout. */
body.pos-fullscreen,body.return-pos-fullscreen{background:#edf0f3}
body.pos-fullscreen .app-main>.page,body.return-pos-fullscreen .app-main>.page{padding:0!important}
body.pos-fullscreen .pos-v173.pos-workspace{background:#edf0f3;min-height:100dvh;border:0;box-shadow:none}
body.pos-fullscreen .pos-v173 .pos-toolbar{height:60px;min-height:60px;background:#0879ed;padding:6px 12px;gap:8px}
.pos-v173 .pos-search-wrap{width:min(34%,520px)}
.pos-v173 .pos-search-wrap input{background:#fff;min-height:42px;height:42px;border-radius:6px;font-size:14px;box-shadow:none}
.pos-v173 .pos-add-invoice{font-weight:600;font-size:24px}
.pos-v173 .pos-v173-tab{height:47px;min-height:47px;border-radius:6px 6px 0 0}
.pos-v173 .pos-list-link{font-size:12px;white-space:nowrap}
.pos-v173 .kv22-menu-toggle{font-size:22px;min-width:40px}
body.pos-fullscreen .pos-sales-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(385px,30.5%);gap:12px;padding:12px;min-height:calc(100dvh - 60px)}
body.pos-fullscreen .pos-sales-center{min-height:calc(100dvh - 84px)}
.pos-v173-lines{gap:5px}
.pos-v173-line{min-height:93px;padding:11px 13px;border:1px solid #e6ebf0;border-radius:6px;box-shadow:0 1px 2px #0c30551a;gap:9px}
.pos-v173-line-name strong{font-size:14px;color:#182c42}
.pos-v173-line-name small{font-size:11px;color:#8795a5}
.pos-v173-line input{font-size:14px;border-radius:3px}
.pos-v173-line .pos-line-total{font-size:15px}
.pos-v173-note{border-radius:6px;min-height:55px;border:1px solid #e9edf1;box-shadow:none}
.pos-v173-note input{font-size:13px}
.pos-v173-checkout{padding:15px 17px 14px;border:1px solid #e5ebf0;border-radius:10px;box-shadow:0 1px 4px #17355712;gap:11px;background:#fff}
.pos-v173-checkout .pos-operator{font-size:13px}
.pos-v173-checkout .pos-operator span{font-size:11px;color:#7a889a}
.pos-v173-checkout .kv24-client-price-row{grid-template-columns:minmax(0,1fr) minmax(145px,39%);gap:9px}
.pos-v173-checkout .pos-customer-search>input,.pos-v173-checkout .pos-v173-list select{height:40px;border-radius:5px;background:#f2f4f7;font-size:13px}
.pos-v173-checkout .pos-money-row{font-size:13px;min-height:32px}
.pos-v173-checkout .pos-money-row.grand{padding:12px 0;border-top:1px solid #e4e9ef;border-bottom:1px solid #e4e9ef;font-size:15px}
.pos-v173-checkout .pos-money-row.grand strong:last-child{font-size:19px;color:#0782ed}
.pos-v173-checkout .pos-v173-methods{font-size:12px;gap:8px 12px}
.pos-v173-checkout .pos-v173-cash{background:#f3f4f6;border-radius:5px}
.pos-v173-checkout .pos-checkout-actions{position:sticky;bottom:0;background:#fff;padding:10px 0 0;z-index:5}
.pos-v173-checkout .pos-checkout-actions button{min-height:57px;border-radius:6px;font-size:15px}
.pos-v173-checkout .pos-checkout-btn{background:#0577ec}
.pos-v173-checkout .pos-print-btn{background:#66788b}
.kv22-pos-menu{background:#fff;border:1px solid #e0e6ed;box-shadow:0 18px 36px #12284540;border-radius:6px;z-index:250}
.kv22-menu-row{font-size:13px}
/* Sales return: mirrored POS split, distinct blue search bars. */
.kv14-pos-return{--blue:#0879ed;background:#edf0f3}
.kv14-pos-bar,.kv14-exchange-bar{background:#0879ed;box-shadow:none}
.kv14-pos-grid{grid-template-columns:minmax(0,1fr) minmax(385px,30.5%);gap:11px;min-height:calc(100dvh - 60px)}
.kv14-pos-side{border-radius:9px;margin:12px 12px 12px 0;box-shadow:var(--kv25-shadow)}
.kv14-pos-side form{padding:16px 17px;min-height:calc(100vh - 84px)}
.kv14-side-meta{font-size:13px}
.kv14-side-meta input{font-size:12px}
.kv14-money-row{font-size:13px;min-height:33px}
.kv14-total{border-top:1px solid #e7edf2;padding:11px 0;color:#086fd6}
.kv14-return-actions{padding:11px 0 0;background:#fff}
.kv14-return-actions button{border-radius:6px;min-height:57px}
.kv14-order-note{border:1px solid #e5eaf0;background:#fff;border-radius:6px}
.kv14-cart-head{font-size:13px}
.kv14-return-cart,.kv14-exchange-cart{background:transparent}
/* Smaller displays keep controls accessible without clipping suggestion panels. */
@media(max-width:1250px){
 .app-shell .nav-item,.app-shell .nav-dropdown>summary{padding:0 10px;font-size:12px}
 .app-shell .main-nav{padding:0 8px}
 body.pos-fullscreen .pos-sales-grid,.kv14-pos-grid{grid-template-columns:minmax(0,1fr) minmax(350px,34%)}
 .kv24-client-price-row{grid-template-columns:1fr!important}
}
@media(max-width:900px){
 .app-shell .app-header{height:55px;min-height:55px;padding:0 12px}
 body.kv25-nav-open .app-shell .main-nav{top:55px}
 .kv25-nav-scrim{inset:55px 0 0}
 .app-shell .main-nav{height:46px;min-height:46px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
 .app-shell .nav-item,.app-shell .nav-dropdown>summary{height:46px}
 body.kv25-nav-open .app-shell .main-nav{overflow-y:auto;overflow-x:visible}
 .app-shell .app-main .page{padding:14px 12px 24px}
 .kv-prod-layout,.kv19-layout{gap:10px}
 body.pos-fullscreen .pos-sales-grid{grid-template-columns:1fr;gap:9px}
 .kv14-pos-grid{grid-template-columns:1fr}
 .pos-v173-checkout{min-height:540px}
 .kv14-pos-side{margin:8px}
}
@media(max-width:620px){
 .app-header .brand-copy small{display:none}
 .app-shell .app-main .page{padding:12px 8px}
 .kv25-hamburger{width:33px;flex-basis:33px}
 .kv25-brand-wrap{gap:8px}
 .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .kv-prod-toolbar,.kv19-directory-toolbar{align-items:flex-start}
 .kv-prod-search,.kv19-search{width:100%}
 .kv-prod-layout,.kv19-layout{display:block}
 .kv-prod-sidebar,.kv19-sidebar{margin-bottom:12px}
 .kv-prod-data,.kv19-data{min-width:0}
 body.pos-fullscreen .pos-sales-grid{padding:8px}
 .pos-v173-checkout .kv24-client-price-row{grid-template-columns:minmax(0,1fr) minmax(120px,35%)!important}
 .pos-v173 .pos-search-wrap{width:51%;min-width:135px}
}
/* Never restyle a printed invoice with workspace rules. */
@media print{.kv25-hamburger,.kv25-nav-scrim{display:none!important}}
/* Navigation at tablet/phone sizes is intentionally drawer-only: prevent
   native horizontal-scroll containers from clipping dropdown popovers. */
@media(max-width:900px){
 .app-shell .main-nav{display:none}
 body.kv25-nav-open .app-shell .main-nav{display:flex;top:55px;width:min(282px,86vw);overflow-y:auto;overflow-x:hidden}
 body.kv25-nav-open .app-shell .nav-menu{position:static;max-height:none;overflow:visible}
}