/* Shared Vĩnh Lộc admin system. Loaded only by staff.html; no public showroom scope. */
body.vl-admin-page{
 --admin-frame:#f3f4ee;--admin-paper:#fff;--admin-subtle:#f5f6f0;--admin-finance:#f4f6ed;
 --admin-ink:#27362d;--admin-muted:#626a60;--admin-line:#e2e3da;--admin-accent:#43583a;--admin-hover:#304528;--admin-focus:#62784b;
 --admin-danger:#8a392b;--admin-danger-bg:#faeee9;--admin-warning:#785c28;--admin-warning-bg:#f6f0df;
 --status-draft:#858c7a;--status-confirmed:#aa842f;--status-fulfilled:#4d7254;--status-returned:#a45f4b;--status-cancelled:#747d83;
 --admin-radius:12px;--admin-control-radius:7px;--admin-control-height:40px;--admin-gap:24px;
 --ink:var(--admin-ink);--ink-2:var(--admin-ink);--muted:var(--admin-muted);--line:var(--admin-line);--paper:var(--admin-paper);--cream:var(--admin-subtle);--gold:var(--admin-focus);
 background:var(--admin-frame)!important;color:var(--admin-ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.5;background-attachment:initial;
}
.vl-admin-page *,.vl-admin-page *::before,.vl-admin-page *::after{box-sizing:border-box}
.vl-admin-page>header{position:static;background:var(--admin-frame);box-shadow:none;backdrop-filter:none;padding:14px 28px;border:0}
.vl-admin-page>header .brand{font-size:20px;letter-spacing:1px}.vl-admin-page>header .brand small{font-size:12px;letter-spacing:0;color:var(--admin-muted)}
.vl-admin-page>header>a{background:transparent;border:1px solid var(--ds-line);border-radius:8px;font:400 13px/1.4 system-ui;min-height:36px;padding:8px 12px;color:var(--admin-ink)}
.vl-admin-page main{max-width:1600px;padding:4px 24px 32px;margin:auto;width:100%}
.vl-admin .app-shell{display:grid;grid-template-columns:228px minmax(0,1fr);gap:24px;align-items:start}
.vl-admin .desktop-rail{position:sticky;top:16px;height:calc(100dvh - 32px);border:0;border-radius:0;padding:12px 0;background:transparent;color:var(--admin-ink);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--ds-line) transparent}
.vl-admin .desktop-rail:before{display:none}.vl-admin .desktop-rail nav{display:block;margin:10px 0;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
.vl-admin .rail-user{border-color:var(--admin-line);padding:8px 12px 20px}.vl-admin .rail-user b{font-size:14px;font-weight:600;overflow-wrap:anywhere}.vl-admin .rail-user small{font-size:12px;color:var(--admin-muted);margin-top:4px}
.vl-admin .user-avatar{flex-shrink:0;background:var(--ds-surface-2);color:var(--ds-text-2);box-shadow:none;border-radius:50%;width:34px;height:34px;font-size:14px}
.vl-admin .desktop-rail nav .nav-group.rail-collapsible{border-color:var(--admin-line);margin:0;background:transparent;padding:4px 0!important}
.vl-admin .desktop-rail nav button{background:transparent;border:1px solid transparent;border-radius:6px!important;color:#525e50;font-size:13px;min-height:40px!important;padding:10px 12px!important;box-shadow:none;transform:none;line-height:1.4}
.vl-admin .desktop-rail nav button:hover{background:var(--ds-surface-2);color:#27362d;border-color:transparent}.vl-admin .desktop-rail nav button.selected{background:var(--ds-surface-2);border-color:transparent;color:#344a28;font-weight:650;box-shadow:none}
.vl-admin .desktop-rail nav .rail-group-toggle{font-size:13px;font-weight:650;color:#2d392d}.vl-admin .rail-subnav{margin:2px 0 0}.vl-admin .rail-subnav .nav-group{padding:0 0 4px 12px!important}
.vl-admin .rail-foot{border-top:1px solid var(--admin-line);padding-top:12px}.vl-admin .rail-foot button{color:var(--admin-muted)!important;background:transparent!important;border:0!important;text-align:left;box-shadow:none;font-size:13px}
.vl-admin .workspace{min-width:0;background:var(--admin-paper);border:1px solid var(--ds-line);border-radius:16px;padding:22px 24px;backdrop-filter:none}
.vl-admin .workspace-head{margin:0 0 24px;min-height:36px;backdrop-filter:none;gap:16px}.vl-admin .workspace-head .eyebrow,.vl-admin .workspace-head p.muted{display:none}
.vl-admin .workspace-head h1,.vl-admin .workspace-head .p1-greeting{font:400 12px/1.5 system-ui;color:var(--ds-text-2);margin:0;letter-spacing:0;max-width:60%}
.vl-admin .head-actions{gap:6px}.vl-admin .head-actions button{background:transparent;border:1px solid var(--ds-line);box-shadow:none;border-radius:7px;color:var(--ds-text-2);font-size:12px;padding:7px 10px;min-height:36px}
.vl-admin .head-actions .icon-action{width:36px;height:36px;padding:0;display:grid;place-items:center}.vl-admin .head-actions svg{flex:none}
/* Typography and native controls share one vocabulary across feature modules. */
.vl-admin-page #app :is(h1,h2,h3,h4,button,input,select,textarea){font-family:inherit}
.vl-admin-page #app h1{font-size:28px;line-height:1.25;letter-spacing:-.025em;font-weight:650}.vl-admin-page #app h2{font-size:19px;line-height:1.35;letter-spacing:-.01em;font-weight:650}.vl-admin-page #app h3{font-size:15px;line-height:1.4;font-weight:600}
.vl-admin-page #app .workspace-head h1{font-size:12px;font-weight:400;letter-spacing:0}.vl-admin-page #app .staff-overview h2{font-size:17px}.vl-admin-page #app .staff-overview h3{font-size:13px}
.vl-admin-page #app p{line-height:1.55}.vl-admin-page #app :is(.muted,.footer-note,small){color:var(--admin-muted)}
.vl-admin-page #app :is(.number,.p1-num,.p2-num,.business-stats strong,dd){font-variant-numeric:tabular-nums}
.vl-admin-page #app .eyebrow{display:none}
.vl-admin-page #app button{font-size:13px;line-height:1.4;min-height:var(--admin-control-height);padding:9px 13px;border:1px solid var(--ds-line);border-radius:var(--admin-control-radius);background:var(--admin-paper);color:var(--admin-ink);box-shadow:none;transform:none;white-space:normal;transition:background .15s ease,color .15s ease}
.vl-admin-page #app button:hover:not(:disabled){background:var(--ds-surface-2);color:var(--admin-ink);transform:none;box-shadow:none}
.vl-admin-page #app button:is(.primary,.overview-primary){background:var(--admin-accent);border-color:var(--admin-accent);color:var(--ds-accent-ink);font-weight:600;box-shadow:none}
.vl-admin-page #app button:is(.primary,.overview-primary):hover:not(:disabled){background:var(--admin-hover);color:var(--ds-accent-ink)}
.vl-admin-page #app button:is(.danger,[data-danger]){color:var(--admin-danger);border-color:var(--ds-danger-soft);background:var(--ds-surface)}
.vl-admin-page #app button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.vl-admin-page #app :is(input,select,textarea):not([type=checkbox]):not([type=radio]){min-height:44px;border:1px solid var(--ds-line);border-radius:6px;background:var(--ds-surface);color:var(--admin-ink);font-size:14px;padding:10px 12px;box-shadow:none;max-width:100%;caret-color:var(--admin-accent)}
.vl-admin-page #app textarea{min-height:96px;resize:vertical}.vl-admin-page #app :is(input[type=checkbox],input[type=radio]){accent-color:var(--admin-accent)}
.vl-admin-page #app input::placeholder,.vl-admin-page #app textarea::placeholder{color:var(--ds-text-3);opacity:1}
.vl-admin-page #app :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--admin-focus)!important;outline-offset:3px!important}
.vl-admin-page ::selection{background:var(--ds-accent-soft);color:var(--admin-ink)}
/* Panels are flat; form grouping is a subtle tone, never glass or gradients. */
.vl-admin-page #app .card,.vl-admin-page #app .p1 section{background:var(--admin-paper);border:1px solid var(--admin-line);border-radius:var(--admin-radius);box-shadow:none;backdrop-filter:none;padding:20px}
.vl-admin-page #panel>.card,.vl-admin-page #panel>.p1>section{margin-top:0}.vl-admin-page #panel>.card+.card{margin-top:24px}
.vl-admin-page #app :is(.note,.invite,.staff-editor,.tier-row,.pos-charges,.catalog-editor,.staff-effective-summary){background:var(--admin-subtle);border-color:var(--admin-line);border-radius:8px;box-shadow:none;color:var(--admin-ink)}
.vl-admin-page #app :is(.error,.p1-error,.p2-error){color:var(--admin-danger);background:var(--admin-danger-bg);border:0;border-radius:7px;padding:12px 14px;font-size:13px}
.vl-admin-page #app :is(.empty,.overview-empty,.p1-empty){color:var(--admin-muted);line-height:1.6;background:transparent}
.vl-admin-page #app .badge{background:var(--ds-surface-2);color:var(--ds-text-2);border-radius:5px;padding:4px 7px;font-size:12px;font-weight:550;box-shadow:none}.vl-admin-page #app .badge.ready{background:var(--ds-surface-2);color:var(--ds-text-2)}
.vl-admin-page #app .table-wrap{max-width:100%;overflow:auto;border:1px solid var(--admin-line);border-radius:9px;box-shadow:none;background:var(--ds-surface);scrollbar-width:thin;scrollbar-color:var(--ds-line) transparent}
.vl-admin-page #app table{width:100%;border-collapse:collapse;background:transparent;font-size:13px}.vl-admin-page #app th{font-size:12px;font-weight:600;color:var(--ds-text-2);text-transform:none;letter-spacing:0;background:var(--ds-surface-2);line-height:1.45;padding:12px}
.vl-admin-page #app td{font-size:13px;line-height:1.5;border-bottom:1px solid var(--ds-line);padding:12px;color:var(--admin-ink)}.vl-admin-page #app tbody tr{background:transparent}.vl-admin-page #app tbody tr:hover{background:var(--ds-accent-soft)}
.vl-admin-page #app :is(.business-tabs,.p1-tabs,.settings-groups){gap:8px}.vl-admin-page #app [role=tab][aria-selected=true]{background:var(--ds-surface-2);color:var(--ds-text);border-color:var(--ds-line);box-shadow:none}
/* Actual dialogs keep their semantics/focus behavior and escape scrolling panels. */
.vl-admin-page :is(dialog,.business-popup-open,#tradeDetail.trade-modal-open,.staff-access-modal){background:var(--ds-surface);color:var(--admin-ink);border:1px solid var(--ds-line);border-radius:14px;box-shadow:0 0 0 100vmax #1f302a70,0 18px 44px #1f302a24;backdrop-filter:none}
.vl-admin-page #app :is(.business-popup-close,.trade-modal-close){border-radius:50%!important;width:40px;min-height:40px!important;padding:0!important;background:var(--ds-surface);color:var(--admin-ink);font-size:24px}
.vl-admin-page .trade-modal-open .business-actions{background:var(--ds-surface);backdrop-filter:none;border-color:var(--admin-line)}
.vl-admin-page #notice:not(:empty){background:var(--ds-accent-soft);color:var(--ds-text-2);border:1px solid var(--ds-line);border-radius:8px;padding:12px 16px;margin:0 0 16px;font-size:13px;line-height:1.5}.vl-admin-page #notice.error{background:var(--admin-danger-bg);color:var(--admin-danger);border-color:var(--ds-danger-soft)}
@media(min-width:721px) and (max-width:1180px){.vl-admin-page main{padding-left:16px;padding-right:16px}.vl-admin .app-shell{grid-template-columns:202px minmax(0,1fr);gap:16px}.vl-admin .workspace{padding:20px}}
@media(max-width:720px){
 body.vl-admin-page{--admin-control-height:44px}.vl-admin-page>header{padding:14px 18px}.vl-admin-page>header .brand{font-size:18px}.vl-admin-page>header .brand small{display:none}.vl-admin-page>header>a{font-size:0!important;width:38px;height:38px;min-height:38px;padding:0;display:grid;place-items:center;white-space:nowrap}.vl-admin-page>header>a:after{content:'↗';font-size:16px}
 body.vl-admin{height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column}.vl-admin>header,.vl-admin>div{flex-shrink:0}.vl-admin main{flex:1;min-height:0;padding:0 10px 84px;margin:0;width:100%}.vl-admin #app,.vl-admin .app-shell{height:100%}.vl-admin .app-shell{display:block}.vl-admin .desktop-rail{display:none}
 .vl-admin .workspace{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding:18px;padding:18px 16px;border-radius:12px;scrollbar-width:thin;scrollbar-color:var(--ds-line) transparent}
 .vl-admin .workspace-head{margin:0 0 20px;min-height:34px;gap:8px}.vl-admin .workspace-head h1,.vl-admin .workspace-head .p1-greeting{max-width:48%;font-size:11px}.vl-admin .head-actions button{min-height:34px;font-size:11px;padding:7px 8px}.vl-admin .head-actions .icon-action{width:34px;height:34px}
 .vl-admin-page #app h1{font-size:24px}.vl-admin-page #app .workspace-head h1{font-size:11px}.vl-admin-page #app h2{font-size:19px}.vl-admin-page #app :is(.card,.p1 section){padding:16px;border-radius:10px}
 .vl-admin-page #app :is(input,select,textarea):not([type=checkbox]):not([type=radio]){font-size:16px!important;min-width:0}.vl-admin-page #app button{min-height:44px}
 .vl-admin-page #app :is(.business-actions,.pos-flow-dock){bottom:0;background:var(--ds-surface-2);backdrop-filter:none;box-shadow:none}.vl-admin-page .trade-modal-open .business-actions{bottom:-22px;background:var(--ds-surface)}
 .vl-admin .mobile-dock{top:auto!important;bottom:0;box-shadow:none;border-color:var(--ds-line);background:var(--ds-surface);padding:8px 16px calc(7px + env(safe-area-inset-bottom))}.vl-admin #app .mobile-dock button{background:transparent;border:0;min-height:50px;font-size:11px;color:var(--ds-text-2);padding:2px}.vl-admin #app .mobile-dock button.selected{color:var(--admin-accent)}.vl-admin .mobile-dock button:nth-child(3) i{background:var(--admin-accent);box-shadow:none}.vl-admin .mobile-dock svg{display:block}
 .vl-admin-page :is(dialog,.business-popup-open,#tradeDetail.trade-modal-open){border-radius:14px 14px 0 0;max-width:100vw}
}
@media(prefers-reduced-motion:reduce){.vl-admin-page #app *{transition:none!important;scroll-behavior:auto!important}}
/* Charts: data geometry only; shared units and semantic status colors. */
.vl-admin-page #app .overview-data-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:'trend attention' 'products states' 'cash cash';gap:24px}
.overview-chart-trend{grid-area:trend}.overview-attention{grid-area:attention}.overview-chart-products{grid-area:products}.overview-chart-states{grid-area:states}.overview-data-grid>.overview-finance{grid-area:cash}
.overview-chart{min-width:0;padding:18px;background:var(--ds-surface-2);border:1px solid var(--admin-line);border-radius:10px}.overview-chart .overview-section-head{margin-bottom:12px}.overview-chart .overview-section-head p{font-size:12px}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;color:var(--admin-muted)}.chart-legend span{display:inline-flex;align-items:center;gap:7px}.chart-legend i{width:14px;height:8px;border-radius:2px;background:var(--admin-accent);display:inline-block}.chart-legend .chart-key-cash{height:3px;background:#617b85}
.chart-unit{font-size:12px;color:var(--admin-muted);line-height:1.5;margin:10px 0}.chart-empty{min-height:180px;display:grid;align-content:center;max-width:50ch;font-size:13px;color:var(--admin-muted);line-height:1.65;margin:0}
.chart-timeseries{width:100%;height:auto;display:block;overflow:visible}.chart-timeseries text{font:12px system-ui;fill:#626a60}.chart-grid{stroke:var(--ds-line);stroke-width:1}.chart-revenue{fill:var(--admin-accent,var(--ds-accent));opacity:.8}.chart-cash{fill:#617b85}.chart-cash-line{fill:none;stroke:var(--ds-line-strong);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart-detail{font-size:12px;color:var(--ds-text-2);line-height:1.6;min-height:40px;margin:10px 0 0;overflow-wrap:anywhere}.chart-period-picker{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--admin-muted)}.chart-period-picker select{max-width:145px!important;min-height:40px!important;font-size:13px!important;margin:0}
.chart-data-table{margin-top:8px;font-size:12px}.chart-data-table summary{min-height:40px;align-content:center;cursor:pointer}.vl-admin-page #app .chart-data-table td:not(:first-child){text-align:right;white-space:nowrap}
.vl-admin-page #app .chart-product-row{display:block;text-align:left;width:100%;border:0;border-radius:6px;background:transparent;padding:12px 0;min-height:56px}.vl-admin-page #app .chart-product-row:hover{background:var(--ds-surface-2)}.chart-product-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px}.chart-product-label>span{overflow-wrap:anywhere;min-width:0}.chart-product-label strong{font-weight:550;white-space:nowrap;font-variant-numeric:tabular-nums}.chart-product-track{display:block;position:relative;height:7px;margin-top:9px;background:var(--ds-surface-2);border-radius:3px}.chart-product-track.is-signed:before{content:'';position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:#9aa88c}.chart-product-fill{position:absolute;height:100%;background:var(--admin-accent,var(--ds-accent));border-radius:3px}.chart-product-fill.is-negative{background:var(--status-returned,var(--ds-danger))}
.chart-state-layout{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:16px;align-items:center}.chart-state-layout svg{width:100%;height:auto}.chart-state-layout text{font:12px system-ui;fill:var(--admin-muted)}.chart-state-layout .chart-state-total{font-size:28px;font-weight:550;fill:var(--admin-ink);font-variant-numeric:tabular-nums}.chart-state-legend{padding:0;margin:0;list-style:none}.chart-state-legend li{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:40px;font-size:12px}.chart-state-legend li>span{display:flex;align-items:center;gap:7px}.chart-state-legend i{width:9px;height:9px;display:inline-block;border-radius:50%;flex:none}.chart-state-legend strong{font-variant-numeric:tabular-nums}
.overview-ranges{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}.vl-admin-page #app .overview-ranges button{min-height:32px;padding:6px 11px;background:transparent;border:1px solid var(--ds-line);font-size:12px;color:var(--ds-text-2)}
.vl-admin-page #app .overview-data-grid>.overview-finance{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,1.5fr) auto;gap:24px;align-items:center}.overview-data-grid>.overview-finance .overview-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.overview-data-grid>.overview-finance .overview-values>div{display:block;border:0;padding:0}.overview-data-grid>.overview-finance .overview-values dd{font-size:18px;margin-top:6px}.overview-data-grid>.overview-finance .overview-values>div:last-child dd{font-size:22px}.overview-data-grid>.overview-finance>.overview-text-link{margin:0;padding:0}
@media(max-width:1180px){.vl-admin-page #app .overview-data-grid{grid-template-columns:1fr;grid-template-areas:'trend' 'attention' 'products' 'states' 'cash'}.vl-admin-page #app .overview-data-grid>.overview-finance{grid-template-columns:1fr}.overview-chart{padding:16px}}
@media(max-width:720px){.chart-state-layout{grid-template-columns:128px minmax(0,1fr);gap:12px}.overview-chart{padding:14px}.overview-data-grid>.overview-finance .overview-values{grid-template-columns:1fr}.overview-data-grid>.overview-finance .overview-values>div{display:flex}.vl-admin-page #app .overview-ranges button{min-height:40px}.chart-product-label{font-size:12px}.chart-timeseries text{font-size:13px}.chart-detail{min-height:60px}.chart-empty{min-height:150px}.vl-admin-page #app .head-actions button{min-height:40px;font-size:12px;padding:7px 9px}.vl-admin-page #app .head-actions .icon-action{width:40px;height:40px;padding:0}.vl-admin .workspace-head h1,.vl-admin .workspace-head .p1-greeting{max-width:35%}}

/* Shared control rules yield to navigation's quieter hierarchy. */
.vl-admin-page #app .desktop-rail nav button{background:transparent;border-color:transparent;box-shadow:none}
.vl-admin-page #app .desktop-rail nav button:hover{background:var(--ds-surface-2)}
.vl-admin-page #app .desktop-rail nav button.selected{background:var(--ds-surface-2);color:#344a28;border-color:transparent}
@media(max-width:720px){.vl-admin .workspace-head>div:first-child{display:none}.vl-admin .workspace-head{justify-content:flex-end}.chart-timeseries text{font-size:23px}}

.vl-admin-page #app .overview-workflows .workspace-flow-links button{min-height:44px!important}

.vl-admin-page #app .more-grid i{background:var(--ds-surface-2);color:var(--admin-accent);box-shadow:none}
.vl-admin-page .business-popup-open{backdrop-filter:none!important;background:#1f302a70!important}
.vl-admin-page .business-popup-open:before{background:var(--ds-surface);box-shadow:0 18px 44px #1f302a24;border-color:var(--admin-line)}
.vl-admin-page .business-popup-open .crm-tabs{background:var(--ds-surface);backdrop-filter:none}

/* Notices are siblings of #app: reserve their real height inside the mobile flex frame. */
@media(max-width:720px){.vl-admin main{display:flex;flex-direction:column}.vl-admin #app{height:auto;flex:1;min-height:0}.vl-admin-page #app .catalog-workspace button{min-height:44px!important}}

/* Legacy feature modules used !important compact controls; shared admin sizing wins deliberately. */
.vl-admin-page #app button{min-height:40px!important}
.vl-admin-page #app :is(input,select):not([type=checkbox]):not([type=radio]){min-height:40px!important}
@media(max-width:720px){.vl-admin-page #app button,.vl-admin-page #app :is(input,select):not([type=checkbox]):not([type=radio]){min-height:44px!important}.vl-admin-page #app .mobile-dock button{min-height:50px!important}}
/* Search and personal shortcuts share the existing permitted route directory. */
.staff-shortcuts{margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid var(--ds-line)}
.vl-admin #app .staff-shortcuts .row{margin:0 0 4px;gap:12px}
.vl-admin #app .staff-shortcuts h2{margin:0;font:600 16px/1.4 system-ui}
.staff-shortcut-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:0}
.staff-shortcuts button{min-height:44px!important}
.staff-nav-dialog{box-sizing:border-box;width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid var(--ds-line);border-radius:12px;background:var(--ds-surface-2);color:var(--ds-text);overflow:auto}
.staff-nav-dialog::backdrop{background:#15251c85}
.staff-nav-dialog h2{font:600 20px/1.4 system-ui;margin:0}
.staff-nav-dialog p{font:400 14px/1.6 system-ui}
.staff-nav-dialog :is(button,input,select){min-height:44px;max-width:100%;box-sizing:border-box}
.staff-nav-dialog button:focus-visible{outline:3px solid var(--ds-warn);outline-offset:2px}
.staff-nav-dialog .row{flex-wrap:nowrap;gap:12px;align-items:center;margin-bottom:20px}
.staff-search-results{display:grid;gap:4px}
.staff-search-results button{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--ds-line);border-radius:0;padding:12px 4px;white-space:normal}
.staff-search-results small{color:var(--ds-text-2);font-size:12px;flex-shrink:0}
.staff-shortcut-editor{padding:0;list-style:none}
.staff-shortcut-editor li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--ds-line)}
.staff-shortcut-editor li>span{min-width:0;overflow-wrap:anywhere}
.staff-shortcut-editor li>div{display:flex;gap:4px;flex-shrink:0}
.staff-shortcut-editor button{min-width:44px;padding:8px;background:var(--ds-surface-2);border:1px solid var(--ds-line);border-radius:6px}
.staff-shortcut-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.staff-shortcut-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:600px){.staff-nav-dialog{padding:16px}.staff-nav-dialog h2{font-size:18px}.staff-nav-dialog .row>button{flex-shrink:0}.staff-shortcut-editor li{font-size:14px}.staff-search-results small{max-width:90px;white-space:normal}.vl-admin .head-actions [data-staff-search]{min-height:44px}}

.workspace.is-overview>#staffQuickLinks{order:0}

.vl-admin .workspace-head>div:first-child{flex:1 1 auto;min-width:0}.vl-admin .workspace-head h1{white-space:normal}



/* VL-GLASS-2026-10-30 BEGIN — popup kính mờ (nền mờ, bảng trong suốt nhẹ, viền sáng). Gỡ khối này để về popup cũ. */
body.vl-admin-page dialog.rm-modal{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ds-text);background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(232,244,236,.58));-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);border:1px solid rgba(255,255,255,.7);border-radius:20px;box-shadow:0 30px 80px rgba(10,38,28,.34),inset 0 1px 0 rgba(255,255,255,.85)}
body.vl-admin-page dialog.rm-modal::backdrop{background:rgba(16,50,38,.34);-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%)}
body.vl-admin-page dialog.rm-modal h3{font:650 20px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.015em;color:var(--ds-text)}
body.vl-admin-page dialog.rm-modal :is(input,select,textarea){background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);border-radius:10px;box-shadow:inset 0 1px 2px rgba(20,52,42,.1),0 1px 0 rgba(255,255,255,.6);color:var(--ds-text)}
body.vl-admin-page dialog.rm-modal :is(input,select,textarea):focus{outline:2px solid var(--ds-focus);outline-offset:1px}
body.vl-admin-page dialog.rm-modal .rm-status.error,body.vl-admin-page dialog.rm-modal p.error{background:rgba(250,232,226,.78);border:1px solid rgba(214,150,134,.45);color:var(--ds-danger);border-radius:12px}
body.vl-admin-page dialog.rm-modal .rm-status.rm-ok{background:rgba(226,240,228,.8);border:1px solid rgba(120,170,130,.4)}
body.vl-admin-page dialog.rm-modal button.primary{background:var(--admin-accent,var(--ds-accent));border:1px solid var(--admin-accent,var(--ds-accent));color:var(--ds-accent-ink);border-radius:10px;box-shadow:0 8px 20px rgba(30,90,60,.25)}
body.vl-admin-page dialog.rm-modal button.outline{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);color:var(--ds-text);border-radius:10px}
body.vl-admin-page .business-popup-open:before{background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(236,246,239,.6));-webkit-backdrop-filter:blur(24px) saturate(165%);backdrop-filter:blur(24px) saturate(165%);border:1px solid rgba(255,255,255,.72);box-shadow:0 30px 90px rgba(8,25,20,.32),inset 0 1px 0 rgba(255,255,255,.85)}
/* VL-GLASS-2026-10-30 END */

/* VL-INLINE-MSG-2026-10-30 BEGIN */
.form-status{margin:12px 0 0;padding:10px 14px;border-radius:12px;font-weight:600;line-height:1.45}
.form-status.error{background:var(--ds-danger-soft);border:1px solid var(--ds-danger-soft);color:var(--ds-danger)}
.form-status.ok{background:var(--ds-accent-soft);border:1px solid var(--ds-line);color:var(--ds-text-2)}
.field-error{display:block;margin:6px 0 0;padding:6px 10px;border-radius:8px;background:var(--ds-danger-soft);border:1px solid var(--ds-danger-soft);color:var(--ds-danger);font-weight:600}
[aria-invalid="true"]{outline:2px solid var(--ds-danger);outline-offset:1px}
#vlToastHost{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:2147483000;display:grid;gap:8px;width:min(92vw,460px);pointer-events:none}
.vl-toast{padding:12px 16px;border-radius:14px;font-weight:600;line-height:1.4;box-shadow:0 14px 40px rgba(10,38,28,.28);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.vl-toast.ok{background:rgba(29,90,60,.94);color:var(--ds-accent-ink)}
.vl-toast.error{background:rgba(138,46,28,.95);color:var(--ds-accent-ink)}
/* VL-INLINE-MSG-2026-10-30 END */

/* VL-TIERS-2026-10-30 BEGIN */
body.vl-admin-page #app .tier-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.8fr) auto;gap:12px 14px;align-items:end;padding:14px 16px;margin:10px 0;border:1px solid rgba(43,106,75,.18);border-radius:14px;background:rgba(255,255,255,.55)}
body.vl-admin-page #app .tier-row label{margin:0;min-width:0}
body.vl-admin-page #app .tier-row input:not([type=checkbox]){width:100%;min-width:0}
body.vl-admin-page #app .tier-row .tier-on{align-self:center;white-space:nowrap;min-height:44px;display:flex;align-items:center;gap:8px;background:transparent;padding:0}
body.vl-admin-page #app .tier-row .field-error{grid-column:1/-1}
@media(max-width:700px){body.vl-admin-page #app .tier-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}body.vl-admin-page #app .tier-row .tier-name,body.vl-admin-page #app .tier-row .tier-on{grid-column:1/-1}}
/* VL-TIERS-2026-10-30 END */

/* VL-PACK-2026-10-30 BEGIN */
.rm-pack{display:grid;gap:8px;margin-top:8px;padding:10px 12px;border-radius:12px;background:rgba(43,106,75,.07);border:1px solid rgba(43,106,75,.18)}
.rm-pack label{margin:0}
.rm-pack small{display:block;line-height:1.45;color:var(--ds-text-2)}
.supplier-pick{display:grid;gap:6px;margin:10px 0;padding:10px 12px;border:1px solid rgba(43,106,75,.22);border-radius:12px}
.supplier-pick legend{font-weight:600;padding:0 6px}
/* VL-PACK-2026-10-30 END */

/* VL-FLASHROW-2026-10-30 BEGIN */
body.vl-admin-page #app .recipe-line.flash-row{background:rgba(43,106,75,.14);border-radius:10px;transition:background .3s}
/* VL-FLASHROW-2026-10-30 END */

/* VL-PROFIT-2026-10-30 BEGIN */
body.vl-admin-page #app .profit-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 14px;margin:10px 0 14px;padding:12px 14px;border-radius:14px;border:1px solid rgba(43,106,75,.2);background:rgba(43,106,75,.07)}
body.vl-admin-page #app .profit-panel div{display:flex;flex-direction:column;gap:2px;min-width:0}
body.vl-admin-page #app .profit-panel span{font-size:.82rem;color:var(--ds-text-2);line-height:1.3}
body.vl-admin-page #app .profit-panel strong{font-size:1.1rem}
body.vl-admin-page #app .profit-panel small{grid-column:1/-1;color:var(--ds-text-2)}
/* VL-PROFIT-2026-10-30 END */

/* VL-COMPACT-2026-10-30 BEGIN */
/* Menu trái: nền 90% đặc, hơi trong; dòng menu gọn hơn */
body.vl-admin .desktop-rail{background:rgba(24,58,45,.9);background:color-mix(in srgb,var(--leaf-deep) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.vl-admin-page #app .desktop-rail nav button{min-height:34px!important;padding:6px 12px!important}
body.vl-admin-page #app .desktop-rail nav .nav-group.rail-collapsible{padding:2px 0!important}
/* Thẻ, tiêu đề, ô nhập gọn hơn trên máy tính */
@media(min-width:761px){
 body.vl-admin #app .card,body.vl-admin #app section.card{padding:14px 18px}
 body.vl-admin-page #app h3{margin:12px 0 6px}
 body.vl-admin-page #app :is(input:not([type=checkbox]):not([type=radio]),select){min-height:38px;padding-top:6px;padding-bottom:6px}
 body.vl-admin-page #app label{margin-bottom:0}
 body.vl-admin-page #app .muted{margin:2px 0 8px}
 /* Màn sản phẩm: dàn nhiều cột, ít phải cuộn */
 body.vl-admin-page #app #productForm [data-product-information]{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px 14px;align-items:end}
 body.vl-admin-page #app #productForm [data-product-information] .two{display:contents}
 body.vl-admin-page #app #productForm [data-product-information]>label:first-child,
 body.vl-admin-page #app #productForm [data-product-information]>label:has([name=name]){grid-column:span 6}
 body.vl-admin-page #app #productForm [data-product-information]>div.two>label:has([name=sale_price_vnd]){grid-column:span 3}
 body.vl-admin-page #app #productForm [data-product-information]>div.two>#manualCost{grid-column:span 3}
 body.vl-admin-page #app #productForm [data-product-information] .computed-cost,
 body.vl-admin-page #app #productForm [data-product-information] .profit-panel{grid-column:1/-1}
 body.vl-admin-page #app #productForm [data-product-information]>label:has([name=specification]){grid-column:span 4}
 body.vl-admin-page #app #productForm [data-product-information]>div.two>label:has(select[name=unit_label]){grid-column:span 2}
 body.vl-admin-page #app #productForm [data-product-information]>div.two>label:has([name=package_grams]){grid-column:span 3}
 body.vl-admin-page #app #productForm [data-product-information]>label:has([name=min_stock]){grid-column:span 3}
 body.vl-admin-page #app #productForm label:has([name=package_grams]) input{display:inline-block;width:calc(100% - 96px);vertical-align:top}
 body.vl-admin-page #app #productForm label:has([name=package_grams]) select{display:inline-block;width:88px;margin:0 0 0 6px;vertical-align:top}
 body.vl-admin-page #app #productForm [data-product-information]>label:has([name=min_stock]) input{width:100%}
 body.vl-admin-page #app .profit-panel{margin:2px 0 4px;padding:8px 12px}
 body.vl-admin-page #app #productForm .check{display:inline-flex;align-items:center;gap:8px;margin:8px 14px 6px 0;padding:6px 12px}
}
/* VL-COMPACT-2026-10-30 END */

/* VL-VIEWMODE-2026-10-30 BEGIN */
body.vl-admin-page #app fieldset.view-lock{border:0;padding:0;margin:0;min-width:0}
body.vl-admin-page #app #productForm [hidden]{display:none!important}
body.vl-admin-page #app fieldset.view-lock:disabled :is(input,select,textarea){background:var(--ds-surface-2);border-color:transparent;color:var(--ds-text);opacity:1;-webkit-text-fill-color:var(--ds-text);cursor:default}
body.vl-admin-page #app fieldset.view-lock:disabled .check{opacity:.85}
@media(min-width:761px){body.vl-admin-page #app #productForm [data-product-information]>.check{grid-column:1/-1;margin:2px 0 0}}
/* VL-VIEWMODE-2026-10-30 END */

/* VL-COSTWARN-2026-10-30 BEGIN */
body.vl-admin-page #app .profit-panel.warn{border:2px solid var(--ds-danger);background:var(--ds-warn-soft)}
body.vl-admin-page #app .profit-panel.danger{border:2px solid var(--ds-danger);background:var(--ds-surface-2)}
body.vl-admin-page #app .profit-alert{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:2px 0}
body.vl-admin-page #app .profit-alert b{color:var(--ds-danger);font-size:1.02rem;line-height:1.4}
body.vl-admin-page #app .profit-alert span{color:var(--ds-danger);line-height:1.5}
body.vl-admin-page #app .profit-fix{border-color:var(--ds-danger);color:var(--ds-danger);font-weight:600}
/* VL-COSTWARN-2026-10-30 END */

/* VL-DETAILSHELL-2026-10-30 */
body.vl-admin-page #app .detail-shell{display:block;margin:0 0 10px;padding:0 0 8px;border-bottom:1px solid var(--ds-line)}
body.vl-admin-page #app .detail-shell-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.vl-admin-page #app .detail-shell-top h2{margin:0;font-size:1.25rem}
body.vl-admin-page #app .detail-badge{padding:2px 10px;border-radius:999px;background:var(--ds-accent-soft);color:var(--ds-text);font-size:.82rem;font-weight:600}
body.vl-admin-page #app .detail-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
body.vl-admin-page #app .detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px;margin:8px 0 0}
body.vl-admin-page #app .detail-grid>div{min-width:0}
body.vl-admin-page #app .detail-grid dt{font-size:.78rem;color:var(--ds-text-2);margin:0}
body.vl-admin-page #app .detail-grid dd{margin:0;overflow-wrap:anywhere}
@media(max-width:700px){body.vl-admin-page #app .detail-grid{grid-template-columns:1fr}}
/* VL-DETAILSHELL-2026-10-30 END */

/* VL-LISTTOTALS-2026-10-30 */
body.vl-admin-page #app .list-totals{display:flex;flex-wrap:wrap;gap:6px 22px;padding:8px 12px;margin:0 0 8px;border:1px solid var(--ds-line);border-radius:10px;background:var(--ds-surface-2);font-size:.92rem}
body.vl-admin-page #app .list-totals b{font-variant-numeric:tabular-nums}
/* VL-LISTTOTALS-2026-10-30 END */
/* VL-DOCTOTALS-2026-10-30 */
body.vl-admin-page #app .doc-totals{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:10px 0 0 auto;max-width:360px;padding:10px 14px;border:1px solid var(--ds-line);border-radius:10px;background:var(--ds-surface-2)}
body.vl-admin-page #app .doc-totals>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;width:100%}
body.vl-admin-page #app .doc-totals>div:nth-last-child(-n+1) strong{font-size:1.15rem}
@media(max-width:700px){body.vl-admin-page #app .doc-totals{max-width:none}}
/* VL-DOCTOTALS-2026-10-30 END */

/* VL-OFFLINE-2026-10-30 */
.vl-offline-bar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 14px;background:var(--ds-warn-soft);color:var(--ds-warn);border-bottom:1px solid var(--ds-warn-soft);font-size:.92rem}
.vl-offline-bar.offline{background:var(--ds-warn);color:var(--ds-warn-soft);border-color:var(--ds-warn)}
.vl-offline-bar.attention{box-shadow:inset 4px 0 0 var(--ds-danger)}
.vl-offline-bar button{min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;font-weight:600}
.vl-offline-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--ds-line)}
.vl-offline-row small{display:block;color:var(--ds-text-2)}
.vl-offline-row.attention .vl-offline-reason{color:var(--ds-danger);font-weight:600}
/* VL-OFFLINE-2026-10-30 END */
/* VL-YIELD-2026-10-30 */
body.vl-admin-page #app tr.warn-row td{background:var(--ds-warn-soft)}
/* VL-YIELD-2026-10-30 END */
/* VL-SETTLE-2026-10-30 */
body.vl-admin-page #app .settle-box{margin:12px 0;padding:12px 14px;border:1px solid var(--ds-line);border-radius:12px;background:var(--ds-surface-2)}
body.vl-admin-page #app .settle-box h3{margin-top:0}
body.vl-admin-page #app .settle-box tr.muted td{color:var(--ds-text-3)}
/* VL-SETTLE-2026-10-30 END */

/* VL-CATHEAD-2026-10-30 */
body.vl-admin-page #app #productWorkspaceTitle .detail-badge{vertical-align:middle;font-size:.8rem}
body.vl-admin-page #app .detail-badge.off{background:var(--ds-danger-soft);color:var(--ds-danger)}
body.vl-admin-page #app .product-summary{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:4px 0 12px;padding:8px 12px;border:1px solid var(--ds-line);border-radius:10px;background:var(--ds-surface-2)}
/* VL-CATHEAD-2026-10-30 END */

/* VL-THEME-2026-10-31 — quản lý giao diện (foundation/theme-app.js). Biến đặt trên body; giá trị dự phòng = mặc định. */
/* 1. Nền trang có họa tiết mềm để hiệu ứng kính của menu nhìn thấy được */
html body.vl-admin-page.vl-admin[data-vl-backdrop="soft"]{background:radial-gradient(900px 600px at 6% 8%,rgba(201,164,106,.38),transparent 60%),radial-gradient(800px 700px at 2% 85%,rgba(43,106,75,.38),transparent 62%),radial-gradient(1000px 700px at 95% 0%,rgba(173,198,180,.45),transparent 60%),var(--ds-surface-2)!important;background-attachment:fixed!important}
/* 2. Menu kính trong: nền trong suốt + làm mờ + viền sáng */
body.vl-admin-page #app .desktop-rail{background:var(--vl-rail-bg,rgba(24,58,45,.78))!important;-webkit-backdrop-filter:blur(var(--vl-rail-blur,18px)) saturate(160%)!important;backdrop-filter:blur(var(--vl-rail-blur,18px)) saturate(160%)!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:0 18px 44px rgba(12,40,30,.22),inset 0 1px 0 rgba(255,255,255,.18)!important;color:var(--vl-rail-ink,var(--ds-nav-ink))!important}
/* 3. Chữ menu luôn đủ tương phản với nền (sửa tiêu đề nhóm và chức danh bị lẫn màu) */
body.vl-admin-page #app .desktop-rail nav button,body.vl-admin-page #app .desktop-rail nav button.rail-group-toggle,body.vl-admin-page #app .desktop-rail nav .rail-group-toggle span{color:var(--vl-rail-ink,var(--ds-nav-ink))!important}
body.vl-admin-page #app .desktop-rail nav button.rail-group-toggle{font-weight:700;letter-spacing:.01em;opacity:1!important}
body.vl-admin-page #app .desktop-rail nav .rail-subnav button{color:var(--vl-rail-ink,var(--ds-nav-ink))!important;opacity:.9}
body.vl-admin-page #app .desktop-rail nav button:hover:not(:disabled){background:var(--vl-rail-hover,rgba(255,255,255,.10))!important;opacity:1}
body.vl-admin-page #app .desktop-rail nav .contains-current>button.rail-group-toggle{background:var(--vl-rail-hover,rgba(255,255,255,.10))!important}
body.vl-admin-page #app .desktop-rail nav button.selected{background:var(--vl-rail-active,rgba(255,255,255,.17))!important;opacity:1;color:var(--vl-rail-ink,var(--ds-nav-ink))!important}
body.vl-admin-page #app .desktop-rail svg,body.vl-admin-page #app .desktop-rail .rail-toggle-icon{color:var(--vl-rail-muted,var(--ds-nav-muted))!important}
body.vl-admin-page #app .desktop-rail .rail-user b{color:var(--vl-rail-ink,var(--ds-nav-ink))!important}
body.vl-admin-page #app .desktop-rail .rail-user small{color:var(--vl-rail-muted,var(--ds-nav-muted))!important}
body.vl-admin-page #app .desktop-rail .rail-user,body.vl-admin-page #app .desktop-rail .rail-foot,body.vl-admin-page #app .desktop-rail nav .nav-group.rail-collapsible{border-color:var(--vl-rail-line,rgba(255,255,255,.14))!important}
body.vl-admin-page #app .desktop-rail .rail-foot button{color:var(--vl-rail-muted,var(--ds-nav-muted))!important}
body.vl-admin-page #app .desktop-rail .rail-foot button:hover{color:var(--vl-rail-ink,var(--ds-nav-ink))!important;background:var(--vl-rail-hover,rgba(255,255,255,.1))!important}
/* 4. Màu nhấn theo bộ màu (bộ mặc định giữ nguyên màu nút hiện có) */
body.vl-admin-page[data-vl-accent="custom"] #app button.primary,body.vl-admin-page[data-vl-accent="custom"] #app .primary{background:var(--vl-accent)!important;border-color:var(--vl-accent)!important}
/* 5. Cỡ chữ toàn trang quản trị */
body.vl-admin-page #app{zoom:var(--vl-scale,1)}
/* 6. Bố cục menu ngang trên cùng (kiểu KiotViet): nhóm việc nằm ngang, rê chuột/chạm để mở danh sách */
@media(min-width:900px){
body.vl-admin-page[data-vl-layout="top"] #app .app-shell{display:block!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail{position:sticky!important;top:8px!important;z-index:40;width:auto!important;height:auto!important;max-height:none!important;overflow:visible!important;display:flex!important;align-items:center;gap:10px;padding:6px 10px!important;margin:0 0 14px;border-radius:14px!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav{display:flex!important;flex-wrap:wrap;align-items:center;gap:2px;margin:0!important;flex:1;min-width:0}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav .nav-group{position:relative;border:0!important;padding:0!important;margin:0!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav button.rail-group-toggle{white-space:nowrap;min-height:38px!important;padding:6px 12px!important;display:flex;align-items:center;gap:6px}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav .nav-group.contains-current>button.rail-group-toggle{background:var(--vl-rail-active,rgba(255,255,255,.17))!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav .rail-subnav{display:none!important;position:absolute;top:100%;left:0;min-width:230px;padding:6px!important;margin:4px 0 0!important;border-radius:12px;background:var(--vl-rail-solid,rgb(24,58,45));box-shadow:0 18px 40px rgba(10,30,22,.3);z-index:60}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav .nav-group:hover>.rail-subnav,body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav .nav-group:focus-within>.rail-subnav{display:block!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav .rail-subnav button{white-space:nowrap}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail .rail-user{order:3;border:0!important;padding:0 4px!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail .rail-user small{display:none}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail .rail-foot{order:2;display:flex;gap:4px;border:0!important;padding:0!important;margin:0!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail .rail-foot button{white-space:nowrap;min-height:34px}
body.vl-admin-page[data-vl-layout="top"] #app .workspace{max-width:none;width:100%}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav{flex:1 1 auto!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail .rail-foot,body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail .rail-user{flex:0 0 auto!important;margin:0!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail .rail-user b{white-space:nowrap}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav button.rail-group-toggle{padding:6px 9px!important;font-size:13px!important}
}
/* 7. Hộp thoại giao diện */
.vl-theme-dialog{width:min(560px,calc(100% - 32px))}
.vl-theme-dialog fieldset{border:1px solid var(--ds-line);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.vl-theme-dialog legend{font-weight:650;padding:0 4px}
.vl-theme-dialog input[type=range]{width:100%}
.vl-theme-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.vl-theme-swatch,.vl-theme-chip{display:inline-flex;align-items:center;gap:8px;margin:4px 12px 4px 0;cursor:pointer}
.vl-theme-swatch i{width:26px;height:26px;border-radius:8px;border:1px solid rgba(0,0,0,.2);display:inline-block}
/* VL-THEME-2026-10-31 END */

/* VL-INLINE-DETAIL-2026-10-31 — chi tiết mở ngay dưới dòng (kiểu KiotViet) */
body.vl-admin-page #app tr.row-open>td{background:var(--ds-surface-2);font-weight:600}
body.vl-admin-page #app tr.row-detail>td{padding:0!important;background:var(--ds-surface);border-left:3px solid var(--ds-accent)}
body.vl-admin-page #app tr.row-detail .row-detail-box{padding:14px 16px 18px;max-width:100%;overflow:auto}
/* VL-INLINE-DETAIL-2026-10-31 END */

/* VL-THEME2-2026-10-31 — menu ngang trên điện thoại, mở nhóm bằng chạm; khung nội dung kính */
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav .nav-group[data-vl-open]>.rail-subnav{display:block!important}
@media(max-width:899px){
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail{display:flex!important;flex-direction:row!important;align-items:center;position:sticky!important;top:0!important;z-index:40;width:auto!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:6px!important;margin:0 0 10px!important;border-radius:12px!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail .rail-user,body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail .rail-foot{display:none!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:4px;margin:0!important;flex:1;min-width:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav::-webkit-scrollbar{display:none}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav .nav-group{flex:0 0 auto;position:static!important;border:0!important;padding:0!important;margin:0!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav button.rail-group-toggle{white-space:nowrap;min-height:40px!important;padding:6px 12px!important;display:flex;align-items:center;gap:6px}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav .rail-subnav{display:none!important}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav .nav-group[data-vl-open]>.rail-subnav{display:grid!important;grid-template-columns:1fr 1fr;gap:4px;position:absolute!important;left:0;right:0;top:100%;margin:6px 0 0!important;padding:8px!important;border-radius:12px;background:var(--vl-rail-solid,rgb(24,58,45));box-shadow:0 18px 40px rgba(10,30,22,.3);z-index:60}
body.vl-admin-page[data-vl-layout="top"] #app .desktop-rail nav .rail-subnav button{white-space:normal;text-align:left;min-height:44px!important}
}
body.vl-admin-page[data-vl-glass-cards="on"] #app .card,body.vl-admin-page[data-vl-glass-cards="on"] #app section.card{background:rgba(255,253,248,var(--vl-card-alpha,.82))!important;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.55)!important}
/* VL-THEME2-2026-10-31 END */

/* VL-THEMEDLG-2026-10-31 — hộp Giao diện: nút chọn đúng cỡ, lựa chọn dạng thẻ */
.vl-theme-dialog input[type=radio]{appearance:auto!important;-webkit-appearance:radio!important;width:18px!important;height:18px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:none!important;flex:none;accent-color:var(--ds-accent)}
.vl-theme-dialog .vl-theme-chip,.vl-theme-dialog .vl-theme-swatch{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:8px;width:auto!important;margin:4px 10px 4px 0!important;padding:6px 10px;border:1px solid var(--ds-line);border-radius:10px;font-weight:500}
.vl-theme-dialog .vl-theme-chip:has(input:checked),.vl-theme-dialog .vl-theme-swatch:has(input:checked){border-color:var(--ds-accent);background:var(--ds-surface-2)}
.vl-theme-dialog .vl-theme-presets{display:flex;flex-wrap:wrap;gap:6px}
.vl-theme-dialog fieldset label:not(.vl-theme-chip):not(.vl-theme-swatch){display:block;margin:6px 0}
.vl-theme-dialog small.note{display:block;padding:0;background:none;margin:-4px 0 6px;color:var(--ds-text-2)}
.vl-theme-dialog input[type=range]{min-height:0!important;padding:0!important;border:0!important;box-shadow:none!important;accent-color:var(--ds-accent)}
/* VL-THEMEDLG-2026-10-31 END */

/* VL-NAVSHEET: điện thoại, menu ngang chạm nhóm → bảng chọn trượt lên từ đáy */
.vl-navsheet{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-end;background:rgba(0,0,0,.38);animation:vlSheetFade .16s ease-out}
.vl-navsheet-panel{width:100%;max-height:72vh;overflow:auto;background:var(--ds-surface);color:var(--ds-text);border-radius:20px 20px 0 0;padding:8px 14px calc(16px + env(safe-area-inset-bottom));box-shadow:var(--ds-shadow-raised);animation:vlSheetUp .2s ease-out}
.vl-navsheet-grab{display:block;width:40px;height:4px;border-radius:4px;background:var(--ds-line);margin:2px auto 8px}
.vl-navsheet-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.vl-navsheet-head b{font-size:17px}
body .vl-navsheet .vl-navsheet-head button{min-height:36px!important;width:36px;height:36px;border-radius:50%;border:0;background:var(--ds-surface-2);color:var(--ds-text);font-size:22px;line-height:1;padding:0}
.vl-navsheet-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body .vl-navsheet .vl-navsheet-list button{min-height:52px!important;height:auto!important;border-radius:14px!important;border:1px solid var(--ds-line)!important;background:var(--ds-surface-2)!important;color:var(--ds-text)!important;font-size:15px!important;font-weight:600;text-align:left;justify-content:flex-start;padding:10px 12px!important;box-shadow:none!important;width:100%}
body .vl-navsheet .vl-navsheet-list button[aria-current]{border-color:var(--ds-accent-text)!important;background:var(--ds-accent-soft)!important;color:var(--ds-accent-text)!important}
html.vl-sheet-open,html.vl-sheet-open body{overflow:hidden}
@keyframes vlSheetUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes vlSheetFade{from{opacity:0}to{opacity:1}}
/* VL-LOCK-2026-10-31 — khóa màn hình */
body.vl-locked>*:not(#vlLockScreen){filter:blur(18px);pointer-events:none;user-select:none}
#vlLockScreen{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px;background:rgba(12,32,24,.72);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
#vlLockScreen form{width:min(360px,100%);display:grid;gap:12px;padding:26px 22px;border-radius:20px;background:var(--ds-surface-2);box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center}
#vlLockScreen h2{margin:0;font-size:1.3rem}
#vlLockScreen p{margin:0;color:var(--ds-text-2)}
#vlLockScreen input{font-size:1.6rem;letter-spacing:.5em;text-align:center;min-height:52px}
#vlLockScreen .vl-lock-msg{color:var(--ds-danger);min-height:1.2em}
#vlLockScreen .vl-lock-mark{width:52px;height:52px;margin:0 auto;border-radius:16px;display:grid;place-items:center;background:var(--ds-accent-strong);color:var(--ds-accent-ink);font-weight:700}
#vlLockScreen button{min-height:46px}
/* VL-LOCK-2026-10-31 END */

/* VL-POSAPP: Bán hàng trên điện thoại kiểu ứng dụng (dòng món có tồn và −/+, chip nhóm, tổng ghim đáy) */
@media (max-width:720px){
#app:has(.pos-app) #workspaceContext,#app:has(.pos-app) .workspace-head{display:none!important}
.pos-app .pos-app-hide{display:none!important}
.pos-app .pos-layout>section.card:first-child{padding:12px!important;background:transparent!important;border:0!important;box-shadow:none!important}
.pos-app .pos-layout>section.card:first-child>.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.pos-app .pos-layout>section.card:first-child>.row h2{font-size:18px!important;margin:0!important}
.pos-app .pos-layout>section.card:first-child>.row label{font-size:12px;max-width:58%}
.pos-app .pos-layout>section.card:first-child>.row select{min-height:38px!important;padding:6px 10px!important;font-size:14px!important;border-radius:999px!important}
.pos-app label.pos-search{position:sticky;top:6px;z-index:20;display:block;font-size:0!important;margin:0 0 8px!important}
.pos-app label.pos-search input{font-size:16px!important;min-height:46px!important;border-radius:14px!important;padding:10px 14px 10px 40px!important;background:var(--ds-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b746f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px 50%!important;box-shadow:var(--ds-shadow)}
.pos-app .pos-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -12px 10px;padding:0 12px}
.pos-app .pos-chips::-webkit-scrollbar{display:none}
.pos-app .pos-chips button{flex:0 0 auto;min-height:34px!important;padding:6px 14px!important;border-radius:999px!important;border:1px solid var(--ds-line)!important;background:var(--ds-surface)!important;color:var(--ds-text)!important;font-size:14px!important;font-weight:600;box-shadow:none!important}
.pos-app .pos-chips button[aria-selected=true]{background:var(--ds-accent)!important;border-color:var(--ds-accent)!important;color:var(--ds-accent-ink)!important}
.pos-app .pos-products{display:flex!important;flex-direction:column;gap:0!important;background:var(--ds-surface);border-radius:16px;overflow:hidden;box-shadow:var(--ds-shadow);padding-bottom:0!important;margin-bottom:96px}
.pos-app .pos-products .pos-product{display:grid!important;grid-template-columns:46px minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:12px;row-gap:2px;align-items:center;text-align:left;width:100%;min-height:76px!important;padding:10px 12px!important;margin:0!important;border:0!important;border-bottom:1px solid var(--ds-line)!important;border-radius:0!important;background:var(--ds-surface)!important;box-shadow:none!important;position:relative}
.pos-app .pos-products .pos-product:last-child{border-bottom:0!important}
.pos-app .pos-products .pos-product>img,.pos-app .pos-products .pos-product>.pos-thumb{grid-column:1;grid-row:1/4;width:46px!important;height:46px!important;border-radius:12px;object-fit:cover;margin:0!important}
.pos-app .pos-products .pos-product>.pos-thumb{display:grid;place-items:center;background:var(--ds-accent-soft);color:var(--ds-accent-text);font:800 18px system-ui;font-style:normal}
.pos-app .pos-products .pos-product>strong{grid-column:2;grid-row:1;font-size:15px!important;line-height:1.3;margin:0!important;color:var(--ds-text);white-space:normal}
.pos-app .pos-products .pos-product>small{grid-column:2;grid-row:2;font-size:12px!important;color:var(--ds-text-3);margin:0!important}
.pos-app .pos-products .pos-product>.pos-stock{grid-column:2;grid-row:3;font-size:12px;font-style:normal;color:var(--ds-accent-text);font-weight:600}
.pos-app .pos-products .pos-product>.pos-stock.is-out{color:var(--ds-danger)}
.pos-app .pos-products .pos-product>b{grid-column:3;grid-row:1;justify-self:end;font-size:15px!important;color:var(--ds-accent);margin:0!important}
.pos-app .pos-products .pos-product>.pos-stepper{position:static!important;transform:none!important;grid-column:3;grid-row:2/4;justify-self:end;min-width:0!important}
.pos-app .pos-products .pos-product:has(.pos-stepper:not(.is-empty)){background:var(--ds-accent-soft)!important}
.pos-app~.pos-flow-dock,.pos-app .pos-flow-dock{left:10px!important;right:10px!important;padding:8px!important;border-radius:16px!important;background:var(--ds-surface)!important}
.pos-flow-dock #posFlowNext{min-height:50px!important;font-size:16px!important;border-radius:12px!important}
.pos-flow-dock #posFlowNext.pos-dock-total{display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:0 16px!important}
.pos-flow-dock #posFlowNext.pos-dock-total b{font-size:17px}
}

/* VL-OVERVIEWAPP: Tổng quan kiểu ứng dụng — chọn kỳ bằng chip, thẻ số lớn lên trước, nút ẩn số tiền */
.staff-overview .overview-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.staff-overview .overview-meta .overview-eye{margin-left:auto}
.staff-overview .overview-eye{display:inline-flex;align-items:center;gap:6px;min-height:30px!important;padding:4px 12px!important;border-radius:999px!important;border:1px solid var(--ds-line)!important;background:var(--ds-surface)!important;color:var(--ds-text)!important;font-size:13px!important;font-weight:600;box-shadow:none!important}
.staff-overview .overview-eye[aria-pressed=true]{background:var(--ds-accent)!important;color:var(--ds-accent-ink)!important;border-color:var(--ds-accent)!important}
.staff-overview [data-overview-range][aria-pressed=true]{background:var(--ds-accent)!important;color:var(--ds-accent-ink)!important;border-color:var(--ds-accent)!important}
body[data-vl-hide-money] .staff-overview .overview-metric dd,body[data-vl-hide-money] .staff-overview .overview-finance td:last-child{position:relative;color:transparent!important;user-select:none}
body[data-vl-hide-money] .staff-overview .overview-metric dd::after,body[data-vl-hide-money] .staff-overview .overview-finance td:last-child::after{content:'••••••';position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--ds-accent);letter-spacing:2px}
body[data-vl-hide-money] .staff-overview .overview-finance td:last-child::after{left:auto;right:0}
body[data-vl-hide-money] .staff-overview :is([data-overview-chart=trend],[data-overview-chart=products]){filter:blur(10px);pointer-events:none}
@media (max-width:720px){
.staff-overview{display:flex;flex-direction:column}
.staff-overview>.overview-heading{order:1}
.staff-overview>.overview-ranges{order:2;display:flex!important;flex-wrap:nowrap!important;gap:6px;overflow-x:auto;scrollbar-width:none;margin:4px 0 6px!important}
.staff-overview>.overview-ranges::-webkit-scrollbar{display:none}
.staff-overview>.overview-ranges button{flex:0 0 auto;min-height:36px!important;padding:6px 14px!important;border-radius:999px!important;border:1px solid var(--ds-line)!important;background:var(--ds-surface)!important;color:var(--ds-text)!important;font-size:14px!important;font-weight:600;box-shadow:none!important}
.staff-overview>.overview-meta{order:3;font-size:12px}
.staff-overview>.overview-metrics{order:4;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
.staff-overview>.overview-metrics .overview-metric{padding:12px!important;border-radius:14px!important}
.staff-overview>.overview-metrics .overview-metric dd{font-size:20px!important;line-height:1.2}
.staff-overview>.overview-metrics .overview-metric p{font-size:11px!important}
.staff-overview>#overviewStatus{order:5}
.staff-overview>.overview-main{order:6}
.staff-overview>.overview-filters{order:7}
.staff-overview>.overview-secondary-grid{order:9}
.staff-overview>.overview-basis{order:10}
.staff-overview .overview-heading p{display:none}
#app .staff-shortcuts .row{margin:0 0 6px!important}
#app .staff-shortcuts .row h2{font-size:15px!important}
#app .staff-shortcuts .staff-shortcut-links{display:flex!important;flex-wrap:nowrap!important;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px}
#app .staff-shortcuts .staff-shortcut-links::-webkit-scrollbar{display:none}
#app .staff-shortcuts .staff-shortcut-links button{flex:0 0 auto;white-space:nowrap;min-height:38px!important;border-radius:999px!important}
}

/* VL-TRADEDAYS: Đơn bán / nhập hàng nhóm theo ngày, dòng tổng phía trên (học KiotViet ảnh Hóa đơn) */
#app .trade-summary{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin:6px 0 10px;padding:10px 14px;border-radius:12px;background:var(--ds-accent-soft);color:var(--ds-text);font-size:14px}
#app .trade-summary b{font-size:16px;color:var(--ds-accent)}
#app tr.trade-day td{background:var(--ds-surface-2)!important;padding:8px 12px!important;font-size:13px;color:var(--ds-text-2);border-bottom:1px solid var(--ds-line)}
#app tr.trade-day td b{color:var(--ds-accent);margin-right:10px}
#app tr.trade-day td span{float:right;font-weight:600;color:var(--ds-accent)}
@media (max-width:720px){
#app .trade-order-list tr.trade-day{display:block!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:12px 0 4px!important}
#app .trade-order-list tr.trade-day td{display:flex!important;justify-content:space-between;align-items:center;border:0!important;border-radius:10px;background:transparent!important;padding:2px 4px!important}
#app .trade-order-list tr.trade-day td::before{content:none!important;display:none!important}
#app .trade-order-list tr.trade-day td span{float:none}
#app #workspaceContext .workspace-purpose>p{font-size:12px}
}

/* VL-CATAPP: Hàng hóa trên điện thoại thành danh sách dòng kiểu ứng dụng (tên, mã, nhóm · quy cách, giá bán bên phải) */
@media (max-width:720px){
#app #catalogRows{display:block}
#app table:has(#catalogRows){display:block;min-width:0!important;width:100%!important}
#app table:has(#catalogRows) thead{display:none}
#app .table-wrap:has(#catalogRows){overflow:visible!important;border-radius:16px!important;margin-left:0!important;margin-right:0!important;border:1px solid var(--ds-line)!important}
#app #catalogRows tr.cat-row{display:grid!important;grid-template-columns:46px minmax(0,1fr) auto;grid-template-areas:"img name price" "img kind state" "img actions actions";column-gap:12px;row-gap:3px;align-items:center;padding:12px!important;border-bottom:1px solid var(--ds-line)}
#app #catalogRows tr.cat-row>td{display:block!important;padding:0!important;border:0!important;min-width:0}
#app #catalogRows tr.cat-row>td::before{content:none!important;display:none!important}
#app #catalogRows .cat-img{grid-area:img;align-self:start}
#app #catalogRows .cat-img img{width:46px!important;height:46px!important;border-radius:12px}
#app #catalogRows .cat-img:not(:has(img)){width:46px;height:46px;border-radius:12px;background:var(--ds-accent-soft);color:transparent;font-size:0;position:relative}
#app #catalogRows .cat-img:not(:has(img))::after{content:attr(data-initial);position:absolute;inset:0;display:grid;place-items:center;color:var(--ds-accent-text);font:800 18px system-ui}
#app #catalogRows .cat-name{grid-area:name;font-weight:650}
#app #catalogRows .cat-name .catalog-product-link{display:inline;padding:0!important;min-height:0!important;border:0!important;background:none!important;box-shadow:none!important;text-align:left;font-size:15px!important;font-weight:650;color:var(--ds-text)!important;text-decoration:none}
#app #catalogRows .cat-name small{display:block;font-size:12px;color:var(--ds-text-3);font-weight:400}
#app #catalogRows .cat-kind{grid-area:kind;font-size:12px;color:var(--ds-text-3)}
#app #catalogRows .cat-kind small{display:inline;margin-left:4px}
#app #catalogRows .cat-kind small::before{content:'· '}
#app #catalogRows tr.cat-row>td.cat-unit,#app #catalogRows tr.cat-row>td.cat-cost{display:none!important}
#app #catalogRows .cat-price{grid-area:price;justify-self:end;font-weight:700;color:var(--ds-accent);font-size:15px;white-space:nowrap}
#app #catalogRows .cat-state{grid-area:state;justify-self:end;font-size:11px}
#app #catalogRows .cat-state .badge{font-size:11px;padding:2px 8px}
#app #catalogRows .cat-state small{display:none}
#app #catalogRows tr.cat-row>td.cat-actions{grid-area:actions;display:flex!important;gap:6px;margin-top:4px}
#app #catalogRows .cat-actions button{min-height:32px!important;padding:4px 12px!important;font-size:13px!important;border-radius:999px!important}
}

/* ==== VL-DS v1 (01/11/2026) — BỘ GIAO DIỆN CHUẨN ==========================================
   Một nguồn duy nhất cho màu, chữ, hình khối. Giá trị do theme-app.js đặt trên <body> (--ds-*);
   các giá trị dưới đây là bộ "Lá dong" mặc định để trang không nháy màu trước khi JS chạy.
   QUY TẮC: khối mới chỉ được dùng var(--ds-*), không viết mã màu tay.
   Vùng: 1 thanh trên · 2 menu/thanh dưới · 3 nền trang · 4 khung nội dung · 5 chữ tiêu đề ·
         6 chữ nội dung (chính/phụ/mờ) · 7 màu nhấn · 8 số tiền/số liệu · 9 trạng thái + ô nhập.
   Thang chữ: --ds-fs-display/h1/h2/h3/body/small/caption. Hình khối: --ds-radius(-sm), --ds-shadow. */
body.vl-admin-page{
 --ds-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--ds-font-head:var(--ds-font);--ds-scale:1;
 --ds-page-bg:#f2f3ef;--ds-appbar-bg:#f2f3ef;--ds-appbar-ink:#1d2a22;
 --ds-nav-bg:#183a2d;--ds-nav-ink:#ffffff;--ds-nav-marker:#c19a5b;--ds-nav-muted:#bec8c4;--ds-nav-active-bg:#3d5a4f;--ds-nav-line:#38564a;
 --ds-surface:#ffffff;--ds-surface-2:#f8f8f6;--ds-card-fill:#ffffff;--ds-line:#e4e5e4;--ds-line-strong:#c9ccca;
 --ds-heading:#12382f;--ds-text:#1d2a22;--ds-text-2:#4a554e;--ds-text-3:#646c67;
 --ds-accent:#2b6a4b;--ds-accent-ink:#ffffff;--ds-accent-strong:#23573d;--ds-accent-soft:#e6ede9;--ds-accent-text:#2b6a4b;--ds-figure:#12382f;
 --ds-success:#2f6b45;--ds-success-soft:#e3f0e6;--ds-warn:#8a5a12;--ds-warn-soft:#f8ecd4;--ds-danger:#a3402b;--ds-danger-soft:#f8e4dd;--ds-info:#2f5f86;--ds-info-soft:#e2edf6;
 --ds-field-bg:#ffffff;--ds-field-line:#bbbfbd;--ds-focus:#2b6a4b;
 --ds-radius:12px;--ds-radius-sm:8px;--ds-control-h:44px;--ds-gap:14px;--ds-pad:16px;
 --ds-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.05);--ds-shadow-raised:0 8px 28px rgba(0,0,0,.16);
 --ds-fs-display:calc(28px*var(--ds-scale));--ds-fs-h1:calc(24px*var(--ds-scale));--ds-fs-h2:calc(19px*var(--ds-scale));--ds-fs-h3:calc(16px*var(--ds-scale));
 --ds-fs-body:calc(15px*var(--ds-scale));--ds-fs-small:calc(13px*var(--ds-scale));--ds-fs-caption:calc(12px*var(--ds-scale));
 /* Bí danh: các khối cũ đọc --admin-* sẽ theo bộ giao diện. */
 --admin-frame:var(--ds-page-bg);--admin-paper:var(--ds-surface);--admin-subtle:var(--ds-surface-2);--admin-ink:var(--ds-text);--admin-muted:var(--ds-text-3);
 --admin-line:var(--ds-line);--admin-accent:var(--ds-accent);--admin-hover:var(--ds-accent-strong);--admin-focus:var(--ds-focus);
 --admin-radius:var(--ds-radius);--admin-control-radius:var(--ds-radius-sm);--admin-control-height:var(--ds-control-h);
 --ink:var(--ds-text);--muted:var(--ds-text-3);--line:var(--ds-line);--paper:var(--ds-surface);--cream:var(--ds-page-bg)}
@media (max-width:720px){body.vl-admin-page{--ds-fs-h1:calc(21px*var(--ds-scale));--ds-fs-h2:calc(17px*var(--ds-scale));--ds-fs-display:calc(26px*var(--ds-scale))}}


/* Bố cục khung (chuyển từ khối "lá dong" 29/10, chỉ giữ phần bố cục; màu lấy từ bộ) */
html body.vl-admin-page[data-vl-ds]>header{background:var(--ds-appbar-bg)}
@media(min-width:900px){body.vl-admin .app-shell{grid-template-columns:240px minmax(0,1fr);gap:20px}}
body.vl-admin .desktop-rail{background:var(--ds-nav-bg);color:var(--ds-nav-ink);border-radius:var(--ds-radius);padding:14px 10px;top:12px;height:calc(100dvh - 24px);scrollbar-color:var(--ds-nav-line) transparent}
body.vl-admin .rail-user{border-color:var(--ds-nav-line);padding:8px 10px 16px}
body.vl-admin .rail-user b{color:var(--ds-nav-ink)}
body.vl-admin .rail-user small{color:var(--ds-nav-muted)}
body.vl-admin .user-avatar{background:var(--ds-nav-marker);color:var(--ds-nav-bg)}
body.vl-admin .desktop-rail nav .nav-group.rail-collapsible{border-color:var(--ds-nav-line)}
body.vl-admin-page #app .desktop-rail nav button{color:var(--ds-nav-ink);background:transparent;border-color:transparent;font-size:calc(13.5px*var(--ds-scale));border-radius:var(--ds-radius-sm)!important}
body.vl-admin-page #app .desktop-rail nav button:hover:not(:disabled){background:var(--ds-nav-active-bg);color:var(--ds-nav-ink)}
body.vl-admin-page #app .desktop-rail nav button.selected{background:var(--ds-nav-active-bg);color:var(--ds-nav-ink);box-shadow:inset 3px 0 0 var(--ds-nav-marker)}
body.vl-admin-page #app .desktop-rail nav button.rail-group-toggle{color:var(--ds-nav-ink);font-weight:650}
body.vl-admin .rail-foot{border-color:var(--ds-nav-line)}
body.vl-admin-page #app .desktop-rail .rail-foot button{color:var(--ds-nav-muted)!important;background:transparent!important}
body.vl-admin-page #app .desktop-rail .rail-foot button:hover{color:var(--ds-nav-ink)!important;background:var(--ds-nav-active-bg)!important}
body.vl-admin-page #app .desktop-rail .rail-toggle-icon{color:var(--ds-nav-muted)}
body.vl-admin .workspace{background:transparent;border:0;padding:6px 4px 28px}
body.vl-admin .workspace-head{margin:0 0 14px}
body.vl-admin #app .card,body.vl-admin #app section.card{padding:20px 22px}
body.vl-admin-page #app button:hover:not(:disabled):not(.primary):not([aria-pressed=true]):not([aria-selected=true]){background:var(--ds-surface-2)}
body.vl-admin-page #app table tbody tr:hover td{background:var(--ds-accent-soft)}
body.vl-admin #app .workspace>p{color:var(--ds-text-2);font-size:var(--ds-fs-small);max-width:74ch;margin:0 0 10px}
body.vl-admin #app .workspace>details{margin:0 0 16px}
body.vl-admin #app .workspace>details>summary{cursor:pointer;color:var(--ds-accent-text);font-weight:600;font-size:var(--ds-fs-small)}
body.vl-admin #app .workspace-head h1{color:var(--ds-text-2)}
/* 3 · Nền trang + chữ chung */
html body.vl-admin-page[data-vl-ds]{background:var(--ds-page-bg)!important;color:var(--ds-text);font-family:var(--ds-font)!important;font-size:var(--ds-fs-body)}
html body.vl-admin-page[data-vl-ds][data-vl-backdrop="plain"]{background-image:none!important}
html body.vl-admin-page[data-vl-ds] :is(button,input,select,textarea){font-family:var(--ds-font)!important}
/* 1 · Thanh trên */
html body.vl-admin-page[data-vl-ds]>header{background:var(--ds-appbar-bg)!important;color:var(--ds-appbar-ink)!important;backdrop-filter:none!important;box-shadow:0 1px 0 var(--ds-line)!important;border:0!important}
html body.vl-admin-page[data-vl-ds]>header .brand,html body.vl-admin-page[data-vl-ds]>header .brand small{color:var(--ds-appbar-ink)!important}
html body.vl-admin-page[data-vl-ds]>header>a{color:var(--ds-appbar-ink)!important;background:transparent!important;border-color:var(--ds-line-strong)!important}
/* 2 · Menu (máy tính) và thanh dưới (điện thoại) */
html body.vl-admin-page[data-vl-ds] #app nav.mobile-dock{background:var(--ds-surface)!important;backdrop-filter:none!important;border-top:1px solid var(--ds-line)!important;box-shadow:0 -2px 10px rgba(0,0,0,.05)!important}
html body.vl-admin-page[data-vl-ds] #app nav.mobile-dock button{color:var(--ds-text-3)!important;background:transparent!important}
html body.vl-admin-page[data-vl-ds] #app nav.mobile-dock button:is(.selected,[aria-current]){color:var(--ds-accent-text)!important}
html body.vl-admin-page[data-vl-ds] #app nav.mobile-dock button:is(.selected,[aria-current]) svg{color:var(--ds-accent-text)!important}
html body.vl-admin-page[data-vl-ds] #app nav.mobile-dock button:nth-child(3) i{background:var(--ds-accent)!important;color:var(--ds-accent-ink)!important;box-shadow:none!important}
html body.vl-admin-page[data-vl-ds] #app nav.mobile-dock button:nth-child(3) i svg{color:var(--ds-accent-ink)!important}
/* 5 · Tiêu đề */
html body.vl-admin-page[data-vl-ds] #app :is(h1,h2,h3,h4){font-family:var(--ds-font-head)!important;color:var(--ds-heading)!important;letter-spacing:0;font-weight:700}
html body.vl-admin-page[data-vl-ds] #app h1{font-size:var(--ds-fs-h1)!important;line-height:1.25}
html body.vl-admin-page[data-vl-ds] #app h2{font-size:var(--ds-fs-h2)!important;line-height:1.3}
html body.vl-admin-page[data-vl-ds] #app h3{font-size:var(--ds-fs-h3)!important;line-height:1.35}
html body.vl-admin-page[data-vl-ds] .brand{font-family:Georgia,"Times New Roman",serif!important}
/* 6 · Thang chữ cho đoạn văn và nút: một cỡ nội dung, một cỡ nút */
html body.vl-admin-page[data-vl-ds] #app p{font-size:var(--ds-fs-body);line-height:1.55}
html body.vl-admin-page[data-vl-ds] #app :is(.staff-overview,.overview-section-head,.workspace-purpose) p{font-size:var(--ds-fs-small);line-height:1.5}
html body.vl-admin-page[data-vl-ds] #app :is(button.primary,button.outline){font-size:calc(14px*var(--ds-scale))!important;min-height:var(--ds-control-h);padding-left:16px;padding-right:16px}
html body.vl-admin-page[data-vl-ds] #app td :is(button.primary,button.outline){min-height:36px;padding-left:12px;padding-right:12px}
/* 6 · Chữ phụ / mờ */
html body.vl-admin-page[data-vl-ds] #app :is(.muted,.footer-note,small,td small,label small){color:var(--ds-text-3)!important}
html body.vl-admin-page[data-vl-ds] #app label{color:var(--ds-text-2)}
html body.vl-admin-page[data-vl-ds] #app .eyebrow{color:var(--ds-text-3)!important;font-size:var(--ds-fs-caption)!important;letter-spacing:.06em}
/* 4 · Khung nội dung */
html body.vl-admin-page[data-vl-ds] #app :is(.card,section.card,.more-card,.store-profile){background:var(--ds-card-fill)!important;color:var(--ds-text);border:1px solid var(--ds-line)!important;border-radius:var(--ds-radius)!important;box-shadow:var(--ds-shadow)!important}
html body.vl-admin-page[data-vl-ds][data-vl-glass-cards="off"] #app :is(.card,section.card,.more-card,.store-profile){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body.vl-admin-page[data-vl-ds] #app :is(.note,.catalog-summary){background:var(--ds-surface-2)!important;color:var(--ds-text-2)!important;border:1px solid var(--ds-line)!important;border-radius:var(--ds-radius-sm)!important}
/* 7 · Nút: chỉ 3 kiểu — chính (màu nhấn), viền, chữ */
html body.vl-admin-page[data-vl-ds] #app button.primary,html body.vl-admin-page[data-vl-ds] dialog button.primary{background:var(--ds-accent)!important;color:var(--ds-accent-ink)!important;border:1px solid var(--ds-accent)!important;border-radius:var(--ds-radius-sm)!important;box-shadow:none!important;font-weight:650}
html body.vl-admin-page[data-vl-ds] #app button.primary:hover:not(:disabled){background:var(--ds-accent-strong)!important;border-color:var(--ds-accent-strong)!important}
html body.vl-admin-page[data-vl-ds] #app button.outline,html body.vl-admin-page[data-vl-ds] dialog button.outline{background:var(--ds-surface)!important;color:var(--ds-text)!important;border:1px solid var(--ds-line-strong)!important;border-radius:var(--ds-radius-sm)!important;box-shadow:none!important}
html body.vl-admin-page[data-vl-ds] #app button.outline:hover:not(:disabled){background:var(--ds-surface-2)!important}
html body.vl-admin-page[data-vl-ds] #app :is([aria-pressed="true"],[aria-selected="true"]):not(.rail-group-toggle){background:var(--ds-accent)!important;color:var(--ds-accent-ink)!important;border-color:var(--ds-accent)!important}
html body.vl-admin-page[data-vl-ds] :is(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--ds-focus)!important;outline-offset:2px}
/* 9 · Ô nhập */
html body.vl-admin-page[data-vl-ds] #app :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea),html body.vl-admin-page[data-vl-ds] dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){background-color:var(--ds-field-bg)!important;color:var(--ds-text)!important;border:1px solid var(--ds-field-line)!important;border-radius:var(--ds-radius-sm)!important;min-height:var(--ds-control-h)}
html body.vl-admin-page[data-vl-ds] #app :is(input,select,textarea):focus{border-color:var(--ds-focus)!important;box-shadow:0 0 0 3px var(--ds-accent-soft)!important;outline:0}
html body.vl-admin-page[data-vl-ds] :is(input[type=checkbox],input[type=radio]){accent-color:var(--ds-accent)}
/* Bảng */
html body.vl-admin-page[data-vl-ds] #app .table-wrap{background:var(--ds-surface)!important;border:1px solid var(--ds-line)!important;border-radius:var(--ds-radius)!important}
html body.vl-admin-page[data-vl-ds] #app table thead{background:var(--ds-surface-2)!important}
html body.vl-admin-page[data-vl-ds] #app th{color:var(--ds-text-3)!important;font-size:var(--ds-fs-caption)!important;font-weight:650}
html body.vl-admin-page[data-vl-ds] #app :is(th,td){border-bottom:1px solid var(--ds-line)!important;color:var(--ds-text)}
html body.vl-admin-page[data-vl-ds] #app tbody tr:hover{background:var(--ds-surface-2)}
/* 9 · Trạng thái */
html body.vl-admin-page[data-vl-ds] #app .badge{background:var(--ds-surface-2)!important;color:var(--ds-text-2)!important;border:1px solid var(--ds-line)!important;font-size:var(--ds-fs-caption)!important;font-weight:650}
html body.vl-admin-page[data-vl-ds] #app .badge.ready{background:var(--ds-success-soft)!important;color:var(--ds-success)!important;border-color:transparent!important}
html body.vl-admin-page[data-vl-ds] #app .badge.wait{background:var(--ds-warn-soft)!important;color:var(--ds-warn)!important;border-color:transparent!important}
html body.vl-admin-page[data-vl-ds] :is(#app,#notice) .error{background:var(--ds-danger-soft)!important;color:var(--ds-danger)!important;border:1px solid transparent!important;border-radius:var(--ds-radius-sm)!important}
/* 8 · Số tiền, số liệu: cùng một màu và chữ số đều cột */
html body.vl-admin-page[data-vl-ds] #app :is(.overview-metric dd,.summary-total strong,.pos-product>b,.cat-price,.trade-total,.business-stats strong,.number,.list-totals strong,.doc-totals strong){color:var(--ds-figure)!important;font-variant-numeric:tabular-nums;font-family:var(--ds-font)!important}
html body.vl-admin-page[data-vl-ds] #app :is(td,.trade-summary,.overview-metric){font-variant-numeric:tabular-nums}
/* Hộp thoại */
html body.vl-admin-page[data-vl-ds] dialog{background:var(--ds-surface)!important;color:var(--ds-text)!important;border:1px solid var(--ds-line)!important;border-radius:var(--ds-radius)!important;box-shadow:var(--ds-shadow-raised)!important}
html body.vl-admin-page[data-vl-ds] dialog :is(h2,h3){color:var(--ds-heading)!important;font-family:var(--ds-font-head)!important}
/* Hộp Bộ giao diện */
.vl-theme-dialog .vl-theme-zones{display:grid;grid-template-columns:1fr;gap:6px}
.vl-theme-dialog .vl-theme-zone{display:grid!important;grid-template-columns:1fr 46px 32px;align-items:center;gap:8px;margin:0!important;font-size:var(--ds-fs-small)}
.vl-theme-dialog .vl-theme-zone input[type=color]{width:46px;height:34px;padding:2px;border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-sm);background:var(--ds-surface);margin:0}
.vl-theme-dialog .vl-zone-reset{min-height:32px!important;width:32px;padding:0!important;border:0!important;background:var(--ds-surface-2)!important;color:var(--ds-text-2)!important;border-radius:50%!important}
.vl-theme-dialog .vl-theme-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vl-theme-dialog .vl-theme-swatch i{display:block;width:100%;height:30px;border-radius:var(--ds-radius-sm);border:1px solid var(--ds-line)}
.vl-theme-dialog .vl-theme-more{margin:10px 0;padding:10px 12px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm)}
.vl-theme-dialog .vl-theme-more summary{cursor:pointer;font-weight:650;color:var(--ds-text-2)}

/* ---- Khung điện thoại (≤720px) dựng trên bộ chuẩn ---- */
#app .head-icon-text svg{flex:0 0 auto}
#app .head-icon-text{display:inline-flex;align-items:center;gap:6px}
@media (max-width:720px){
html body.vl-admin-page[data-vl-ds]::before,html body.vl-admin-page[data-vl-ds]::after{display:none!important}
html body.vl-admin-page[data-vl-ds]{background-image:none!important}
html body.vl-admin-page[data-vl-ds]>header{position:sticky!important;top:0;z-index:60;min-height:56px;padding:10px 128px 10px 16px!important}
html body.vl-admin-page[data-vl-ds]>header .brand{font-size:19px!important;letter-spacing:1.5px}
html body.vl-admin-page[data-vl-ds]>header .brand small,html body.vl-admin-page[data-vl-ds]>header>a{display:none!important}
html body.vl-admin-page[data-vl-ds] main{padding:8px 12px 110px!important}
html body.vl-admin-page[data-vl-ds] #app .desktop-rail{display:none!important}
html body.vl-admin-page[data-vl-ds] #app .app-shell{display:block!important}
html body.vl-admin-page[data-vl-ds] #app .workspace-head{margin:0!important;min-height:0!important;padding:0!important;display:block!important}
html body.vl-admin-page[data-vl-ds] #app .workspace-head>div:first-child{display:none!important}
html body.vl-admin-page[data-vl-ds] #app .workspace-head .head-actions{position:fixed;top:8px;right:12px;z-index:61;display:flex!important;gap:6px;margin:0!important}
html body.vl-admin-page[data-vl-ds] #app .workspace-head .head-actions button{width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;border:0!important;background:var(--ds-surface)!important;color:var(--ds-heading)!important;box-shadow:var(--ds-shadow)!important;display:grid!important;place-items:center}
html body.vl-admin-page[data-vl-ds] #app .workspace-head .head-actions .head-icon-text span{display:none}
html body.vl-admin-page[data-vl-ds] #app .workspace-head .head-actions svg{width:20px;height:20px}
html body.vl-admin-page[data-vl-ds] #app :is(.card,section.card,.more-card,.store-profile){border:0!important;padding:var(--ds-pad)!important}
html body.vl-admin-page[data-vl-ds] #app #workspaceContext .workspace-purpose>p{font-size:var(--ds-fs-caption)!important;color:var(--ds-text-3)!important;margin:0 0 6px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Việc thường dùng: một dải gọn */
#app #staffQuickLinks .staff-shortcuts{margin:2px 0 10px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
#app #staffQuickLinks .staff-shortcuts>p{display:none!important}
#app #staffQuickLinks .staff-shortcuts .row{display:flex!important;justify-content:space-between;align-items:center;margin:0 0 6px!important}
html body.vl-admin-page[data-vl-ds] #app #staffQuickLinks .staff-shortcuts .row h2{font-size:var(--ds-fs-small)!important;margin:0!important;color:var(--ds-text-2)!important}
html body.vl-admin-page[data-vl-ds] #app #staffQuickLinks .staff-shortcuts .row button{min-height:36px!important;padding:0 12px!important;font-size:var(--ds-fs-small)!important;border-radius:999px!important}
#app #staffQuickLinks .staff-shortcut-links{display:flex!important;flex-wrap:nowrap!important;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 12px 2px!important;margin:0 -12px!important}
#app #staffQuickLinks .staff-shortcut-links::-webkit-scrollbar{display:none}
html body.vl-admin-page[data-vl-ds] #app #staffQuickLinks .staff-shortcut-links button{flex:0 0 auto;white-space:nowrap;min-height:34px!important;padding:4px 14px!important;border:0!important;border-radius:999px!important;background:var(--ds-surface)!important;color:var(--ds-heading)!important;font-size:var(--ds-fs-small)!important;font-weight:600;box-shadow:var(--ds-shadow)!important}
/* Tổng quan */
html body.vl-admin-page[data-vl-ds] #app .staff-overview{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
#app .staff-overview>.overview-heading{margin:4px 0 10px!important;display:grid!important;grid-template-columns:1fr;gap:8px}
#app .staff-overview>.overview-heading h1{margin:0!important}
#app .staff-overview .overview-head-actions{display:flex!important;gap:6px}
#app .staff-overview .overview-head-actions{display:grid!important;grid-template-columns:40px 1fr 1fr;gap:6px}
html body.vl-admin-page[data-vl-ds] #app .staff-overview .overview-head-actions :is(button,a){min-height:40px!important;padding:0 14px!important;font-size:var(--ds-fs-small)!important;border-radius:999px!important}
html body.vl-admin-page[data-vl-ds] #app .staff-overview .overview-head-actions :is(button,a){white-space:nowrap}
html body.vl-admin-page[data-vl-ds] #app .staff-overview #overviewRefresh{width:40px;padding:0!important;font-size:0!important;display:grid;place-items:center}
html body.vl-admin-page[data-vl-ds] #app .staff-overview #overviewRefresh::before{content:'';width:18px;height:18px;background:var(--ds-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E") center/18px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E") center/18px no-repeat}
#app .staff-overview .overview-head-actions .overview-primary svg,#app .staff-overview .overview-head-actions .overview-primary i{display:none}
html body.vl-admin-page[data-vl-ds] #app .staff-overview>.overview-ranges{display:grid!important;grid-template-columns:repeat(4,1fr);gap:0!important;padding:4px!important;margin:0 0 8px!important;border-radius:var(--ds-radius)!important;background:var(--ds-surface-2)!important;border:1px solid var(--ds-line)!important;overflow:visible!important}
html body.vl-admin-page[data-vl-ds] #app .staff-overview>.overview-ranges button{min-height:36px!important;padding:0 4px!important;border:0!important;border-radius:calc(var(--ds-radius) - 4px)!important;background:transparent!important;color:var(--ds-text-2)!important;font-size:var(--ds-fs-small)!important;font-weight:600!important;box-shadow:none!important;white-space:nowrap}
html body.vl-admin-page[data-vl-ds] #app .staff-overview>.overview-ranges button[aria-pressed=true]{background:var(--ds-surface)!important;color:var(--ds-heading)!important;box-shadow:var(--ds-shadow)!important}
#app .staff-overview>.overview-meta{font-size:var(--ds-fs-caption)!important;margin:0 0 8px!important;padding:0 2px!important;border:0!important}
#app .staff-overview>.overview-meta span:first-child{display:none}
#app .staff-overview>.overview-meta span{border:0!important;padding:0!important}
html body.vl-admin-page[data-vl-ds] #app .staff-overview .overview-meta .overview-eye{min-height:30px!important;padding:2px 10px!important;border:0!important;background:transparent!important;color:var(--ds-accent-text)!important;font-size:var(--ds-fs-small)!important;box-shadow:none!important}
html body.vl-admin-page[data-vl-ds] #app .staff-overview .overview-meta .overview-eye[aria-pressed=true]{background:transparent!important;color:var(--ds-danger)!important}
#app .staff-overview .overview-meta .overview-eye span{display:none}
#app .staff-overview>.overview-metrics{gap:8px!important;margin:0 0 12px!important}
html body.vl-admin-page[data-vl-ds] #app .staff-overview>.overview-metrics .overview-metric{background:var(--ds-surface)!important;border:1px solid var(--ds-line)!important;border-radius:var(--ds-radius)!important;box-shadow:var(--ds-shadow)!important;padding:12px 14px!important;margin:0!important}
#app .staff-overview>.overview-metrics .overview-metric::before,#app .staff-overview>.overview-metrics .overview-metric::after{display:none!important}
html body.vl-admin-page[data-vl-ds] #app .staff-overview>.overview-metrics .overview-metric dt{font-size:var(--ds-fs-caption)!important;color:var(--ds-text-3)!important;margin:0!important}
html body.vl-admin-page[data-vl-ds] #app .staff-overview>.overview-metrics .overview-metric dd{font-size:calc(20px*var(--ds-scale))!important;font-weight:700!important;margin:4px 0 0!important}
#app .staff-overview>.overview-metrics .overview-metric p{display:none!important}
html body.vl-admin-page[data-vl-ds] #app .staff-overview>.overview-metrics .overview-metric:first-child{grid-column:1/-1;background:var(--ds-accent)!important;border-color:var(--ds-accent)!important;padding:16px!important}
html body.vl-admin-page[data-vl-ds] #app .staff-overview>.overview-metrics .overview-metric:first-child :is(dt,dd){color:var(--ds-accent-ink)!important}
html body.vl-admin-page[data-vl-ds] #app .staff-overview>.overview-metrics .overview-metric:first-child dd{font-size:var(--ds-fs-display)!important}
html body.vl-admin-page[data-vl-ds][data-vl-hide-money] #app .staff-overview>.overview-metrics .overview-metric dd{color:transparent!important}
html body.vl-admin-page[data-vl-ds][data-vl-hide-money] #app .staff-overview>.overview-metrics .overview-metric:first-child dd::after{color:var(--ds-accent-ink)}
#app .staff-overview>.overview-metrics .overview-metric:nth-child(4){grid-column:1/-1;display:flex!important;align-items:center;justify-content:space-between}
#app .staff-overview>.overview-metrics .overview-metric:nth-child(4) dd{margin:0!important}
html body.vl-admin-page[data-vl-ds] #app .staff-overview :is(.overview-attention,.overview-chart,.overview-finance,.overview-secondary-grid>section){background:var(--ds-surface)!important;border:1px solid var(--ds-line)!important;border-radius:var(--ds-radius)!important;box-shadow:var(--ds-shadow)!important;padding:14px!important;margin:0 0 12px!important}
#app .staff-overview .overview-section-head p{display:none}
/* Bán hàng: không lồng khung trong khung */
html body.vl-admin-page[data-vl-ds] #app .pos-app .pos-layout>section.card:first-child{background:transparent!important;box-shadow:none!important;padding:0!important}
html body.vl-admin-page[data-vl-ds] #app .pos-app .pos-layout>section.card:first-child>.row{display:grid!important;grid-template-columns:1fr auto;align-items:center;margin:2px 0 10px!important}
html body.vl-admin-page[data-vl-ds] #app .pos-app .pos-layout>section.card:first-child>.row label{margin:0!important;font-size:0!important;max-width:none}
html body.vl-admin-page[data-vl-ds] #app .pos-app .pos-layout>section.card:first-child>.row select{font-size:var(--ds-fs-small)!important;margin:0!important;border:0!important;box-shadow:var(--ds-shadow)!important;max-width:200px;border-radius:999px!important}
/* Nhiều hơn: lưới biểu tượng 3 cột */
html body.vl-admin-page[data-vl-ds] #app .more-card{padding:14px 10px!important;margin:0 0 12px!important}
html body.vl-admin-page[data-vl-ds] #app .more-card h2{font-size:var(--ds-fs-small)!important;margin:0 6px 10px!important;color:var(--ds-text-2)!important;text-transform:uppercase;letter-spacing:.05em}
#app .more-card .more-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:4px!important}
html body.vl-admin-page[data-vl-ds] #app .more-card .more-grid button{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:84px!important;padding:8px 4px!important;border:0!important;background:transparent!important;box-shadow:none!important;text-align:center!important;font-size:var(--ds-fs-caption)!important;line-height:1.3;color:var(--ds-text)!important}
html body.vl-admin-page[data-vl-ds] #app .more-card .more-grid button i{display:grid!important;place-items:center;width:42px!important;height:42px!important;border-radius:var(--ds-radius)!important;background:var(--ds-accent-soft)!important;color:var(--ds-accent-text)!important;font-style:normal;font-size:18px!important;margin:0!important}
html body.vl-admin-page[data-vl-ds] #app .more-support{padding:4px 14px!important}
html body.vl-admin-page[data-vl-ds] #app .more-support button{min-height:48px!important;border:0!important;border-bottom:1px solid var(--ds-line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--ds-text)!important}
html body.vl-admin-page[data-vl-ds] #app .more-support button:last-child{border-bottom:0!important}
}

/* Bảng rộng trên điện thoại → thẻ dòng (theme-app.js gắn .ds-stack và data-label khi bảng tràn màn) */
@media (max-width:720px){
html body.vl-admin-page[data-vl-ds] #app .table-wrap:has(>table.ds-stack){overflow:visible!important;border:0!important;background:transparent!important;margin-left:0!important;margin-right:0!important}
#app table.ds-stack,#app table.ds-stack tbody{display:block!important;width:100%!important;min-width:0!important}
#app table.ds-stack thead{display:none!important}
html body.vl-admin-page[data-vl-ds] #app table.ds-stack tr{display:grid!important;grid-template-columns:1fr 1fr;gap:6px 12px;padding:12px 14px!important;margin:0 0 8px!important;background:var(--ds-surface)!important;border:1px solid var(--ds-line)!important;border-radius:var(--ds-radius)!important;box-shadow:var(--ds-shadow)!important}
html body.vl-admin-page[data-vl-ds] #app table.ds-stack td{display:block!important;min-width:0!important;padding:0!important;border:0!important;font-size:var(--ds-fs-small)}
html body.vl-admin-page[data-vl-ds] #app table.ds-stack td::before{content:attr(data-label);display:block;margin:0 0 2px;font-size:var(--ds-fs-caption);color:var(--ds-text-3);font-weight:600}
html body.vl-admin-page[data-vl-ds] #app table.ds-stack td:first-child{grid-column:1/-1;font-size:var(--ds-fs-body);font-weight:650}
#app table.ds-stack td:first-child::before{display:none!important}
#app table.ds-stack td[data-label=""]::before{display:none!important}
#app table.ds-stack td.ds-stack-actions{grid-column:1/-1;display:flex!important;flex-wrap:wrap;gap:6px}
html body.vl-admin-page[data-vl-ds] #app table.ds-stack td.ds-stack-actions :is(button,a){min-height:40px!important;margin:0!important}
#app table.ds-stack td.ds-stack-actions::before{display:none!important}
}
/* Hàng của kho */
#app .wh-goods-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);background:var(--ds-surface-2)}
#app .wh-goods-bar p{margin:0;font-size:var(--ds-fs-small)}
#app .wh-goods-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px;max-height:420px;overflow:auto;margin:8px 0;padding:4px}
#app .wh-goods-list .check{margin:0;min-height:44px}

/* Thanh trên (01/11): tìm, thông báo, bánh răng = thiết lập hệ thống, ảnh đại diện = tài khoản.
   Menu trái chỉ còn tác vụ chuyên môn theo quyền. */
html body.vl-admin-page[data-vl-ds]>header>a{display:none!important}
html body.vl-admin-page[data-vl-ds] #app .head-actions .appbar-avatar{background:var(--ds-accent)!important;color:var(--ds-accent-ink)!important;border:0!important;font-weight:700;font-size:16px}
html body.vl-admin-page[data-vl-ds] #app .head-actions [aria-expanded="true"]{box-shadow:0 0 0 3px var(--ds-accent-soft)!important}
#app .appbar-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:90;width:360px;max-height:calc(100vh - 96px);overflow:auto;padding:8px;text-align:left;background:var(--ds-surface);color:var(--ds-text);border:1px solid var(--ds-line);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow-raised)}
#app .appbar-pop[hidden]{display:none!important}
#app .appbar-pop-head{padding:8px 10px 4px;font-size:var(--ds-fs-small);color:var(--ds-text-3);text-transform:uppercase;letter-spacing:.05em}
#app .appbar-group{padding:8px 10px;border-bottom:1px solid var(--ds-line)}
#app .appbar-group:last-child{border-bottom:0}
html body.vl-admin-page[data-vl-ds] #app .appbar-group h3{display:flex;align-items:center;gap:8px;margin:0 0 6px!important;font-size:var(--ds-fs-body)!important;color:var(--ds-text)!important;font-family:var(--ds-font)!important}
#app .appbar-group h3 i{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--ds-radius-sm);background:var(--ds-accent-soft);color:var(--ds-accent-text)}
#app .appbar-group>div{display:flex!important;flex-wrap:wrap;gap:4px;padding-left:36px}
#app .appbar-group>div>button{display:inline-flex!important;flex:0 0 auto}
html body.vl-admin-page[data-vl-ds] #app .appbar-pop .appbar-group button{min-height:32px!important;padding:4px 10px!important;border:0!important;border-radius:999px!important;background:var(--ds-surface-2)!important;color:var(--ds-text-2)!important;font-size:var(--ds-fs-small)!important;box-shadow:none!important;width:auto!important;height:auto!important}
html body.vl-admin-page[data-vl-ds] #app .appbar-pop .appbar-group button:hover{background:var(--ds-accent-soft)!important;color:var(--ds-accent-text)!important}
#app .appbar-user{display:flex;align-items:center;gap:12px;padding:10px 10px 14px;border-bottom:1px solid var(--ds-line);margin-bottom:4px}
#app .appbar-user b{display:block;font-size:var(--ds-fs-body)}
#app .appbar-user small{display:block;color:var(--ds-text-3);font-size:var(--ds-fs-caption)}
#app .appbar-avatar-lg{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:var(--ds-accent);color:var(--ds-accent-ink);font-weight:700;font-size:20px}
html body.vl-admin-page[data-vl-ds] #app .appbar-pop .appbar-item{display:flex!important;align-items:center;gap:12px;width:100%!important;height:auto!important;min-height:48px!important;padding:8px 10px!important;border:0!important;border-radius:var(--ds-radius-sm)!important;background:transparent!important;color:var(--ds-text)!important;font-size:var(--ds-fs-body)!important;text-align:left;text-decoration:none;box-shadow:none!important;place-items:initial}
html body.vl-admin-page[data-vl-ds] #app .appbar-pop .appbar-item:hover{background:var(--ds-surface-2)!important}
#app .appbar-item i{display:grid;place-items:center;width:24px;color:var(--ds-text-2)}
html body.vl-admin-page[data-vl-ds] #app .appbar-pop .appbar-logout{color:var(--ds-danger)!important;border-top:1px solid var(--ds-line)!important;border-radius:0!important;margin-top:4px}
#app .appbar-logout i{color:var(--ds-danger)}
@media (min-width:721px){
html body.vl-admin-page[data-vl-ds]>header{position:sticky!important;top:0;z-index:60;min-height:64px;padding-right:300px!important}
html body.vl-admin-page[data-vl-ds] #app .workspace-head .head-actions{position:fixed;top:12px;right:max(20px,4vw);z-index:70;display:flex;gap:8px;margin:0}
html body.vl-admin-page[data-vl-ds] #app .workspace-head .head-actions .appbar-avatar{width:44px;height:44px;border-radius:50%!important;padding:0!important}
}
@media (max-width:720px){
html body.vl-admin-page[data-vl-ds] #app .workspace-head .head-actions [data-tab="care"]{display:none!important}
#app .appbar-pop{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-height:82vh;border-radius:20px 20px 0 0;padding:10px 10px calc(14px + env(safe-area-inset-bottom))}
html.appbar-open body::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:110}
html.appbar-open body.vl-admin-page[data-vl-ds] #app .workspace-head .head-actions{z-index:120}
html body.vl-admin-page[data-vl-ds] #app .workspace-head .head-actions .appbar-pop button.appbar-item{width:100%!important;height:auto!important;border-radius:var(--ds-radius-sm)!important;display:flex!important;box-shadow:none!important}
html body.vl-admin-page[data-vl-ds] #app .workspace-head .head-actions .appbar-pop .appbar-group button{width:auto!important;height:auto!important;display:inline-flex!important;border-radius:999px!important;box-shadow:none!important}
}
/* Tạo đơn nhanh, QR chuyển khoản, món trong đơn */
#app .pos-quick{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;margin:0 0 10px;padding:2px 0}
#app .pos-quick[hidden]{display:none!important}
#app .pos-quick::-webkit-scrollbar{display:none}
#app .pos-quick b{flex:0 0 auto;font-size:var(--ds-fs-caption);color:var(--ds-text-3);margin-right:2px}
html body.vl-admin-page[data-vl-ds] #app .pos-quick button{flex:0 0 auto;min-height:36px!important;padding:4px 12px!important;border:1px solid var(--ds-line)!important;border-radius:999px!important;background:var(--ds-surface)!important;color:var(--ds-text)!important;font-size:var(--ds-fs-small)!important;white-space:nowrap;box-shadow:none!important}
html body.vl-admin-page[data-vl-ds] #app .pos-quick button.added{background:var(--ds-accent-soft)!important;border-color:var(--ds-accent)!important}
#app .pay-qr{margin:16px 0 0;padding:16px;border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-surface);text-align:center}
/* QR luôn nền trắng để máy quét đọc được ở mọi bộ màu */
#app .pay-qr img{display:block;width:min(260px,100%);height:auto;margin:8px auto;border-radius:var(--ds-radius-sm);background:white}
#app .pay-qr .business-actions{justify-content:center}
#app .trade-items{color:var(--ds-text-2)!important}
/* ==== hết VL-DS v1 ==== */