/* cssV2 — style cho các page V2 của WebApp. Port từ OrderAppMobile FnBWide.razor.css + theme-light.css.
   Chỉ áp trong .cssV2-pos / .cssV2-modal; mọi class tiền tố cssV2-, token tiền tố --cssV2-. */
@font-face {
    font-family: "InterV2";
    src: url("../fonts/Inter-Variable.ttf") format("truetype");
    font-display: swap;
    font-weight: 100 900;
    font-style: normal;
}
.cssV2-pos, .cssV2-modal {
    --cssV2-navbar-h: 50px;
    /* theme-light.css */
    --cssV2-bg-app: #F3F6FA; --cssV2-bg-card: #FFFFFF; --cssV2-bg-input: #FFFFFF;
    --cssV2-text: #1E293B; --cssV2-text-2: #64748B; --cssV2-text-hint: #94A3B8; --cssV2-text-disabled: #CBD5E1; --cssV2-text-inverse: #FFFFFF;
    --cssV2-primary: #2563EB; --cssV2-primary-hover: #1D4ED8; --cssV2-primary-light: #3B82F6; --cssV2-primary-bg: #EFF6FF;
    --cssV2-border: #E2E8F0; --cssV2-border-strong: #CBD5E1; --cssV2-divider: #E5E9F0;
    --cssV2-success: #059669; --cssV2-success-bg: #D1FAE5;
    --cssV2-warning: #F59E0B; --cssV2-warning-bg: #FEF3C7;
    --cssV2-error: #DC2626; --cssV2-error-bg: #FEE2E2;
    --cssV2-info: #3B82F6; --cssV2-info-bg: #DBEAFE;
    --cssV2-gradient-primary: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    --cssV2-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --cssV2-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --cssV2-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    --cssV2-radius-sm: 8px; --cssV2-radius-md: 12px; --cssV2-radius-lg: 16px; --cssV2-radius-full: 9999px;
    /* app.css typography */
    --cssV2-font: "InterV2", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    --cssV2-fs-page-title: 21px; --cssV2-fs-section-title: 18px; --cssV2-fs-card-title: 16px;
    --cssV2-fs-body: 15px; --cssV2-fs-body-small: 14px; --cssV2-fs-caption: 12px;
    font-family: var(--cssV2-font); font-size: var(--cssV2-fs-body-small); color: var(--cssV2-text); line-height: 1.45;
}
.cssV2-pos *, .cssV2-pos *::before, .cssV2-pos *::after, .cssV2-modal *, .cssV2-modal *::before, .cssV2-modal *::after { box-sizing: border-box; }
.cssV2-pos [hidden] { display: none !important; }
.cssV2-pos button, .cssV2-pos select, .cssV2-pos input, .cssV2-pos textarea { font: inherit; }
.cssV2-pos button { touch-action: manipulation; cursor: pointer; }
.cssV2-pos button:disabled { cursor: default; opacity: .5; }
.cssV2-pos button:focus-visible, .cssV2-pos select:focus-visible, .cssV2-pos [tabindex]:focus-visible { outline: 2px solid var(--cssV2-primary); outline-offset: -2px; }
.cssV2-pos input:focus, .cssV2-pos input:focus-visible, .cssV2-pos textarea:focus { outline: none; box-shadow: none; }
.cssV2-pos h1 { font-family: inherit; }

/* ===== Khung trang (.pos-v2 / .pos-v2-layout) ===== */
.cssV2-pos { position: fixed; top: var(--cssV2-navbar-h); right: 0; bottom: 0; left: 0; z-index: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 8px 16px 16px; background: var(--cssV2-bg-app); }
.cssV2-layout { display: grid; grid-template-columns: minmax(320px, 28%) minmax(0, 1fr); gap: 16px; flex: 1; min-height: 0; overflow: hidden; }
.cssV2-invoice, .cssV2-browser { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; border: 1px solid var(--cssV2-border); border-radius: var(--cssV2-radius-lg); background: var(--cssV2-bg-card); box-shadow: var(--cssV2-shadow-md); }
.cssV2-browser { position: relative; }

/* ===== Pane hóa đơn (.invoice-pane) ===== */
.cssV2-invoice-header { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 64px; padding: 12px 16px; background: var(--cssV2-gradient-primary); color: var(--cssV2-text-inverse); }
.cssV2-invoice-header > i { font-size: 22px; }
.cssV2-invoice-heading { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cssV2-invoice-header { flex-wrap: wrap; row-gap: 6px; }
.cssV2-invoice-header h1 { margin: 0; font-size: var(--cssV2-fs-section-title); font-weight: 700; line-height: 1.25; color: inherit; white-space: nowrap; }
.cssV2-table-badge { max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.cssV2-header-tools { flex-basis: 100%; justify-content: flex-start; }
.cssV2-invoice-heading > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cssV2-fs-caption); font-variant-numeric: tabular-nums; opacity: .9; }
.cssV2-table-badge { padding: 6px 10px; border-radius: var(--cssV2-radius-full); background: rgba(255,255,255,.18); font-size: var(--cssV2-fs-caption); white-space: nowrap; }
.cssV2-header-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cssV2-header-tools button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 10px; border: 1px solid rgba(255,255,255,.45); border-radius: var(--cssV2-radius-full); background: rgba(255,255,255,.18); color: var(--cssV2-text-inverse); font-size: var(--cssV2-fs-caption); font-weight: 600; white-space: nowrap; }
.cssV2-header-tools button.cssV2-active { background: var(--cssV2-bg-card); color: var(--cssV2-primary); border-color: var(--cssV2-bg-card); }
.cssV2-invoice-body { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* time-card (loại hình 004) */
.cssV2-time-card { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin: 8px 12px 0; padding: 7px 10px; border: 1.5px solid var(--cssV2-border); border-radius: 12px; background: var(--cssV2-bg-card); }
.cssV2-time-card.cssV2-running { border-color: var(--cssV2-primary); background: var(--cssV2-primary-bg); }
.cssV2-time-card .cssV2-time-text { display: grid; flex: 1; min-width: 0; gap: 1px; }
.cssV2-time-card .cssV2-time-text strong { font-size: var(--cssV2-fs-body-small); font-weight: 600; }
.cssV2-time-card .cssV2-time-text small { color: var(--cssV2-text-2); font-size: var(--cssV2-fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cssV2-time-card .cssV2-time-run { display: grid; text-align: right; flex-shrink: 0; }
.cssV2-time-card .cssV2-time-run b { color: var(--cssV2-primary); font-size: 16px; font-weight: 800; }
.cssV2-time-card .cssV2-time-run small { color: var(--cssV2-text-2); font-size: var(--cssV2-fs-caption); }
.cssV2-time-card .cssV2-switch { position: relative; flex-shrink: 0; width: 42px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: var(--cssV2-border-strong); transition: background .15s; }
.cssV2-time-card .cssV2-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--cssV2-shadow-sm); transition: transform .15s; }
.cssV2-time-card .cssV2-switch.cssV2-on { background: var(--cssV2-primary); }
.cssV2-time-card .cssV2-switch.cssV2-on span { transform: translateX(18px); }
.cssV2-time-card .cssV2-switch.cssV2-on:disabled { opacity: 1; }
.cssV2-time-card .cssV2-time-calc { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--cssV2-primary); color: var(--cssV2-text-inverse); font-weight: 700; }

/* invoice-summary */
.cssV2-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; flex-shrink: 0; border-bottom: 1px solid var(--cssV2-divider); }
.cssV2-summary-cell { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--cssV2-bg-app); color: var(--cssV2-text); text-align: left; }
.cssV2-summary-cell > span { font-size: 10px; font-weight: 700; white-space: nowrap; text-transform: uppercase; }
.cssV2-summary-cell > b { font-size: var(--cssV2-fs-body-small); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.cssV2-summary-cell > b .bi { margin-right: 4px; font-size: 11px; color: var(--cssV2-warning); }
button.cssV2-summary-cell { background: var(--cssV2-warning-bg); }
button.cssV2-summary-cell:hover:not(:disabled) { outline: 1px solid var(--cssV2-warning); outline-offset: -1px; }
.cssV2-summary-cell.cssV2-total { grid-column: 1 / -1; background: var(--cssV2-gradient-primary); color: var(--cssV2-text-inverse); }
.cssV2-summary-cell.cssV2-total > b { font-size: var(--cssV2-fs-section-title); }

/* invoice-lines / invoice-line */
.cssV2-lines { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--cssV2-border-strong) transparent; padding: 12px 4px 12px 12px; }
.cssV2-lines::-webkit-scrollbar { width: 8px; }
.cssV2-lines::-webkit-scrollbar-track { background: transparent; }
.cssV2-lines::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--cssV2-border-strong); }
.cssV2-line { display: flex; flex-direction: column; gap: 5px; padding: 9px 12px; border: 1px solid var(--cssV2-border); border-radius: var(--cssV2-radius-md); margin-bottom: 8px; background: var(--cssV2-bg-card); box-shadow: var(--cssV2-shadow-sm); cursor: pointer; }
.cssV2-line:last-child { margin-bottom: 0; }
.cssV2-line.cssV2-selected { border-color: var(--cssV2-primary); outline: 1px solid var(--cssV2-primary); outline-offset: -2px; }
.cssV2-line.cssV2-addon { margin-left: 16px; }
.cssV2-line-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; }
.cssV2-line-heading strong { min-width: 0; overflow-wrap: anywhere; font-size: 15px; font-weight: 600; }
.cssV2-line-heading strong.cssV2-kitchen { color: #FF0000; }
.cssV2-line-heading strong.cssV2-invoiced { color: #0000FF; }
.cssV2-line-heading b { flex-shrink: 0; color: var(--cssV2-primary); font-size: 16px; font-variant-numeric: tabular-nums; }
.cssV2-line-details { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-variant-numeric: tabular-nums; }
.cssV2-line-quantity { display: inline-flex; align-items: baseline; gap: 4px; min-height: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--cssV2-text); font-weight: 700; }
.cssV2-line-quantity span, .cssV2-line-note { font-size: var(--cssV2-fs-caption); color: var(--cssV2-text-2); font-weight: 400; }
.cssV2-line-multiply { color: var(--cssV2-text-2); }
.cssV2-line-unit-price { padding: 0; border: 0; background: transparent; color: var(--cssV2-text); font-weight: 600; }
.cssV2-line-discount { margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--cssV2-text-2); font-size: var(--cssV2-fs-caption); white-space: nowrap; }
.cssV2-line-vat { color: var(--cssV2-text-2); font-size: var(--cssV2-fs-caption); white-space: nowrap; }
.cssV2-line-note { flex-basis: 100%; font-style: italic; }
.cssV2-line-actions { display: flex; align-items: center; gap: 30px; margin-top: 3px; margin-bottom: -5px; padding-top: 4px; border-top: 1px solid var(--cssV2-divider); }
.cssV2-line-action { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: var(--cssV2-text-inverse); font-size: 18px; }
.cssV2-line-delete { background: var(--cssV2-error); }
.cssV2-line-note-button { background: #2E8B32; }
.cssV2-line-action-spacer { flex: 1; }
.cssV2-line-more { background: var(--cssV2-primary); }
.cssV2-line-menu-anchor { position: relative; display: inline-flex; }
.cssV2-line-menu { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; width: 170px; padding: 4px; border: 1px solid var(--cssV2-border); border-radius: var(--cssV2-radius-sm); background: var(--cssV2-bg-card); box-shadow: var(--cssV2-shadow-md); }
.cssV2-line-menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 6px 10px; border: 0; background: transparent; color: var(--cssV2-text); font-size: var(--cssV2-fs-caption); font-weight: 500; text-align: left; white-space: nowrap; }
.cssV2-line-menu button + button { border-top: 1px solid var(--cssV2-divider); }
.cssV2-line-menu.cssV2-up { top: auto; bottom: calc(100% + 6px); }
.cssV2-line-menu button:hover:not(:disabled) { background: var(--cssV2-primary-bg); }
.cssV2-line-menu button:disabled { cursor: not-allowed; color: var(--cssV2-text-disabled); opacity: .55; }
.cssV2-line-action:disabled { opacity: .45; cursor: not-allowed; }
.cssV2-line-topping-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 0 10px; border: 1px solid var(--cssV2-primary); border-radius: 10px; background: var(--cssV2-bg-card); color: var(--cssV2-primary); font-size: var(--cssV2-fs-caption); font-weight: 700; white-space: nowrap; }
.cssV2-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 100%; padding: 24px 12px; text-align: center; color: var(--cssV2-text-2); }
.cssV2-empty > i { font-size: 36px; }
.cssV2-empty > span { font-size: var(--cssV2-fs-caption); }
.cssV2-empty strong { color: var(--cssV2-text); }
.cssV2-card-grid > .cssV2-empty { grid-column: 1 / -1; grid-row: span 2; }

/* ===== Pane bàn / thực đơn (.browser-pane) ===== */
.cssV2-toolbar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 64px; padding: 10px 14px; border-bottom: 1px solid var(--cssV2-divider); flex-shrink: 0; }
.cssV2-toast { position: absolute; z-index: 2; top: 50%; right: 140px; transform: translateY(-50%); display: flex; align-items: center; gap: 7px; max-width: calc(100% - 155px); padding: 8px 12px; border: 1px solid var(--cssV2-success); border-radius: 8px; background: var(--cssV2-bg-card); color: var(--cssV2-success); box-shadow: var(--cssV2-shadow-md); font-weight: 600; white-space: nowrap; }
.cssV2-view-switch { display: flex; flex-shrink: 0; gap: 2px; padding: 3px; border: 1px solid var(--cssV2-border-strong); border-radius: var(--cssV2-radius-full); background: var(--cssV2-bg-app); }
.cssV2-view-switch button { min-height: 38px; padding: 8px 14px; border: 0; border-radius: var(--cssV2-radius-full); background: transparent; color: var(--cssV2-text-2); font-weight: 600; }
.cssV2-view-switch button.cssV2-active { background: var(--cssV2-primary); color: var(--cssV2-text-inverse); }
.cssV2-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; max-width: 480px; margin: 0; padding: 0 12px; border: 1px solid var(--cssV2-border-strong); border-radius: var(--cssV2-radius-sm); background: var(--cssV2-bg-input); color: var(--cssV2-text-2); font-weight: 400; }
.cssV2-search input { min-width: 0; width: 100%; min-height: 42px; border: 0; padding: 8px 0; background: transparent; color: var(--cssV2-text); font-size: 15px; }
.cssV2-search-clear { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: -6px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--cssV2-text); font-size: 16px; }
.cssV2-search-clear i { -webkit-text-stroke: 1px currentColor; }
.cssV2-search-clear:active { background: var(--cssV2-bg-app); }
.cssV2-toolbar-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.cssV2-toolbar-right button { min-height: 36px; padding: 6px 10px; border: 1px solid var(--cssV2-border-strong); border-radius: var(--cssV2-radius-sm); background: var(--cssV2-bg-card); color: var(--cssV2-text); font-size: var(--cssV2-fs-caption); }
.cssV2-init-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; flex-shrink: 0; padding: 10px 14px; border-bottom: 1px solid var(--cssV2-divider); color: var(--cssV2-text-2); font-size: var(--cssV2-fs-caption); }
.cssV2-init-error { background: var(--cssV2-error-bg); color: var(--cssV2-error); }
.cssV2-init-status button { margin-left: auto; min-height: 36px; padding: 6px 12px; border: 1px solid var(--cssV2-border-strong); border-radius: var(--cssV2-radius-sm); background: var(--cssV2-bg-card); color: var(--cssV2-text); }
.cssV2-panel-view { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.cssV2-filter-strip { display: flex; gap: 8px; overflow-x: auto; flex-shrink: 0; padding: 10px 14px; border-bottom: 1px solid var(--cssV2-divider); scrollbar-width: thin; }
.cssV2-filter-strip[aria-label="Nhóm hàng"] { scrollbar-color: var(--cssV2-border-strong) transparent; }
.cssV2-filter-strip[aria-label="Nhóm hàng"]::-webkit-scrollbar { height: 8px; }
.cssV2-filter-strip[aria-label="Nhóm hàng"]::-webkit-scrollbar-track { background: transparent; }
.cssV2-filter-strip[aria-label="Nhóm hàng"]::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--cssV2-border-strong); }
.cssV2-filter-strip button { flex-shrink: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--cssV2-border-strong); border-radius: var(--cssV2-radius-sm); background: var(--cssV2-bg-card); color: var(--cssV2-text); font-size: var(--cssV2-fs-caption); }
.cssV2-filter-strip button.cssV2-active { background: var(--cssV2-primary); border-color: var(--cssV2-primary); color: var(--cssV2-text-inverse); }
.cssV2-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows: 100px; align-content: start; gap: 12px; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 14px; }
.cssV2-card-grid.cssV2-product-grid { grid-template-columns: repeat(auto-fill, 145px); grid-auto-rows: 90px; gap: 8px; overflow: hidden; }
.cssV2-product-pager { position: relative; display: flex; flex: 1; min-height: 0; min-width: 0; padding: 0 46px; }
.cssV2-product-pager .cssV2-product-grid { scrollbar-gutter: stable; padding: 10px 0; }
.cssV2-page-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--cssV2-primary); color: var(--cssV2-text-inverse); font-size: 22px; }
.cssV2-page-arrow.cssV2-previous { left: 1px; }
.cssV2-page-arrow.cssV2-next { right: 1px; }
.cssV2-page-arrow:disabled { opacity: .4; }
.cssV2-page-info { position: absolute; right: 50px; bottom: 2px; font-size: 11px; color: var(--cssV2-text-hint); font-variant-numeric: tabular-nums; pointer-events: none; }
.cssV2-table-card, .cssV2-product-card { display: flex; flex-direction: column; min-width: 0; gap: 4px; padding: 12px; text-align: left; border: 1px solid var(--cssV2-border-strong); border-radius: var(--cssV2-radius-md); background: var(--cssV2-bg-card); color: var(--cssV2-text); }
.cssV2-table-card { position: relative; min-height: 0; padding: 8px; gap: 3px; overflow: hidden; }
.cssV2-table-card > .cssV2-table-status { align-self: stretch; flex-shrink: 0; min-height: 24px; margin: -8px -8px 3px; padding: 4px; background: var(--cssV2-bg-app); color: var(--cssV2-text-2); text-align: right; font-size: var(--cssV2-fs-caption); line-height: 16px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cssV2-status-ordering > .cssV2-table-status { background: #20A5DD; color: #fff; }
.cssV2-status-kitchen > .cssV2-table-status { background: #DE5921; color: #fff; }
.cssV2-status-invoiced > .cssV2-table-status { background: #DF21A7; color: #fff; }
.cssV2-table-card strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; flex: 1; min-height: 0; overflow: hidden; overflow-wrap: anywhere; color: #18A4FF; font-size: 17px; line-height: 18px; }
.cssV2-table-card b { align-self: stretch; flex-shrink: 0; border-top: 1px solid var(--cssV2-border); padding-top: 4px; text-align: right; color: #FF0100; font-size: 15px; line-height: 18px; font-variant-numeric: tabular-nums; }
.cssV2-table-card.cssV2-selected { outline: 2px solid var(--cssV2-primary); outline-offset: -2px; }
.cssV2-table-card.cssV2-selected strong { padding-right: 24px; }
.cssV2-table-check { position: absolute; top: 27px; right: 5px; color: #008000; font-size: 24px; line-height: 24px; pointer-events: none; }
.cssV2-product-card { position: relative; width: 145px; height: 90px; min-height: 0; padding: 5px; gap: 2px; overflow: hidden; border-radius: var(--cssV2-radius-sm); }
.cssV2-product-card strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; flex-shrink: 0; max-height: 48px; overflow: hidden; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; line-height: 16px; }
.cssV2-product-card small { display: none; }
.cssV2-product-card b { margin-top: auto; flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #FF3600; font-size: 13px; font-weight: 400; line-height: 16px; font-variant-numeric: tabular-nums; }
.cssV2-product-check { position: absolute; top: 1px; right: 2px; color: #008000; font-size: 30px; line-height: 30px; pointer-events: none; }
.cssV2-product-check::before { -webkit-text-stroke: 1.2px currentColor; }

/* browser-footer */
.cssV2-footer { flex-shrink: 0; padding: 10px 12px; border-top: 1px solid var(--cssV2-divider); }
.cssV2-footer-buttons, .cssV2-sales-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cssV2-footer-buttons { justify-content: space-between; }
.cssV2-footer-buttons button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--cssV2-border-strong); border-radius: var(--cssV2-radius-sm); background: var(--cssV2-bg-card); color: var(--cssV2-text); font-size: var(--cssV2-fs-caption); font-weight: 600; }
.cssV2-footer-buttons button .bi { font-size: 16px; }
.cssV2-footer-menu { position: relative; }
.cssV2-footer-dropdown { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20; width: 240px; max-height: min(360px, 60vh); overflow-y: auto; padding: 4px; border: 1px solid var(--cssV2-border); border-radius: var(--cssV2-radius-sm); background: var(--cssV2-bg-card); box-shadow: var(--cssV2-shadow-md); }
.cssV2-footer-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 0; background: transparent; color: var(--cssV2-text); text-align: left; white-space: normal; font-weight: 500; }
.cssV2-footer-dropdown button + button { border-top: 1px solid var(--cssV2-divider); }
.cssV2-footer-dropdown button:hover:not(:disabled) { background: var(--cssV2-primary-bg); }
.cssV2-sales-actions button { border-color: transparent; color: var(--cssV2-text-inverse); }
.cssV2-sales-actions button:disabled { opacity: .45; cursor: not-allowed; }
.cssV2-sales-actions .cssV2-label-print { background: #DCB721; color: var(--cssV2-text); }
.cssV2-sales-actions .cssV2-transfer { background: var(--cssV2-info); }
.cssV2-sales-actions .cssV2-merge { background: var(--cssV2-success); }
.cssV2-sales-actions .cssV2-payment { background: var(--cssV2-primary); }
.cssV2-sales-actions .cssV2-kitchen { background: var(--cssV2-warning); color: var(--cssV2-text); }
.cssV2-sales-actions .cssV2-invoice-print { background: #EF9037; }
.cssV2-sales-actions .cssV2-sign-out { background: var(--cssV2-bg-card); color: var(--cssV2-text); border-color: var(--cssV2-border-strong); }
.cssV2-footer-hint { margin: 0 0 8px; color: var(--cssV2-text-2); font-size: var(--cssV2-fs-caption); }

/* Loading + overlay panel */
.cssV2-spinner { width: 32px; height: 32px; border: 3px solid var(--cssV2-border); border-top-color: var(--cssV2-primary); border-radius: 50%; animation: cssV2-spin .8s linear infinite; }
@keyframes cssV2-spin { to { transform: rotate(360deg); } }
/* Giữ showloading/closeloading dùng chung; chỉ thay hình thức spinner khi đang ở TouchScreenV2. */
body:has(.cssV2-pos) #spinnerLoadingImg { top: 50% !important; right: auto !important; left: 50%; z-index: 100000 !important; width: max-content; max-width: calc(100% - 24px); padding: 20px; border: 1px solid #E2E8F0; border-radius: 12px; background: #FFFFFF; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); transform: translate(-50%, -50%); text-align: center; font: 700 14px/1.45 "InterV2", "Inter", "Segoe UI", Roboto, Arial, sans-serif; animation: cssV2-loading-appear .12s ease-out .18s both; }
body:has(.cssV2-pos) #spinnerLoadingImg img, body:has(.cssV2-pos) #spinnerLoadingImg br { display: none; }
body:has(.cssV2-pos) #spinnerLoadingImg::before { content: ""; display: block; width: 32px; height: 32px; margin: 0 auto 10px; border: 3px solid #E2E8F0; border-top-color: #2563EB; border-radius: 50%; animation: cssV2-spin .8s linear infinite; }
/* Modal thanh toán sở hữu loading khi đang in/lưu, kể cả lúc tải lại bàn. */
body:has(.cssV2-payment-busy-overlay) #spinnerLoadingImg { display: none !important; }
/* PrintJS tiếp quản loading PDF sau request in; không bị modal thanh toán che. */
body:has(.cssV2-payment) #printJS-Modal { z-index: 110013 !important; }
body:has(.cssV2-payment):has(#printJS-Modal) .cssV2-payment-busy-overlay,
body:has(.cssV2-payment):has(#printJS-Modal) #spinnerLoadingImg { display: none !important; }
body:has(.cssV2-pos) #spinnerLoadingImg::after { content: "Vui lòng chờ…"; display: block; color: #1E293B; }
@keyframes cssV2-loading-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body:has(.cssV2-pos) #spinnerLoadingImg { animation-duration: .001s; } body:has(.cssV2-pos) #spinnerLoadingImg::before { animation: none; } }
.cssV2-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; display: flex; align-items: stretch; justify-content: center; padding: 12px; background: rgba(15,23,42,.35); }
.cssV2-panel { display: flex; flex-direction: column; width: min(100%, 960px); border: 1px solid var(--cssV2-border); border-radius: var(--cssV2-radius-lg); background: var(--cssV2-bg-card); box-shadow: var(--cssV2-shadow-lg); overflow: hidden; }
.cssV2-panel-title { padding: 12px 16px; font-size: var(--cssV2-fs-section-title); font-weight: 700; background: var(--cssV2-gradient-primary); color: var(--cssV2-text-inverse); }
.cssV2-panel-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; }
.cssV2-panel-body table { width: 100%; border-collapse: collapse; }
.cssV2-panel-body th, .cssV2-panel-body td { padding: 6px 8px; border-bottom: 1px solid var(--cssV2-border); text-align: left; vertical-align: middle; }
.cssV2-panel-body th { background: var(--cssV2-bg-app); font-weight: 600; }
.cssV2-panel-body input[type="text"], .cssV2-panel-body input:not([type]), .cssV2-panel-body select, .cssV2-panel-body textarea, .cssV2-panel-body .form-control { min-height: 36px; height: auto; padding: 6px 10px; border: 1px solid var(--cssV2-border-strong); border-radius: var(--cssV2-radius-sm); width: 100%; box-shadow: none; }
.cssV2-panel-body input[readonly], .cssV2-panel-body .form-control[readonly] { background: var(--cssV2-bg-card); }
.cssV2-panel-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--cssV2-divider); background: var(--cssV2-bg-app); }
.cssV2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--cssV2-border-strong); border-radius: var(--cssV2-radius-sm); background: var(--cssV2-bg-card); color: var(--cssV2-text); font-weight: 600; white-space: nowrap; }
.cssV2-btn.cssV2-btn-primary { background: var(--cssV2-primary); border-color: var(--cssV2-primary); color: var(--cssV2-text-inverse); }
.cssV2-btn.cssV2-btn-sm { min-height: 32px; padding: 4px 10px; font-size: var(--cssV2-fs-caption); }

/* ===== Modal V2 ($uibModal windowClass cssV2-modal-window; theo AppModalShell + SalesLineInputModal của OAM) ===== */
.cssV2-modal-window .modal-dialog { width: min(410px, calc(100vw - 24px)); margin: 40px auto; }
.cssV2-modal-window .modal-content { border: 0; border-radius: var(--cssV2-radius-lg); box-shadow: var(--cssV2-shadow-lg); overflow: hidden; }
.cssV2-modal { font-family: var(--cssV2-font); color: var(--cssV2-text); background: var(--cssV2-bg-card); }
.cssV2-modal button { font: inherit; touch-action: manipulation; }
.cssV2-line-edit label { display: flex; flex-direction: column; gap: 4px; margin: 0; color: var(--cssV2-text-2); font-size: var(--cssV2-fs-caption); font-weight: 400; }
.cssV2-line-edit button { min-height: 44px; padding: 8px; border: 1px solid var(--cssV2-border); border-radius: 10px; background: var(--cssV2-bg-app); color: var(--cssV2-text); }
.cssV2-line-edit button:disabled { opacity: .5; }
.cssV2-line-edit-types, .cssV2-line-edit-keypad { display: grid; gap: 8px; }
.cssV2-line-edit-types { grid-template-columns: 1fr 1fr; }
.cssV2-line-edit-types button.cssV2-active { border-color: var(--cssV2-primary); background: var(--cssV2-primary); color: var(--cssV2-text-inverse); }
.cssV2-line-edit-value-wrap { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1.5px solid var(--cssV2-border-strong); border-radius: 12px; background: var(--cssV2-bg-card); }
.cssV2-line-edit-value-wrap > span { flex: 0 0 auto; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-line-edit .cssV2-line-edit-value { box-sizing: border-box; width: 100%; min-width: 0; height: 50px; padding: 2px 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--cssV2-text); font-size: 34px; font-weight: 700; line-height: 1.05; text-align: right; font-variant-numeric: tabular-nums; }
.cssV2-line-edit .cssV2-line-edit-value:disabled { color: var(--cssV2-text-2); }
.cssV2-line-edit:has(.cssV2-line-quantity-limit) .cssV2-line-edit-value:disabled { color: var(--cssV2-text); }
.cssV2-line-keypad-layout { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; }
.cssV2-line-edit-keypad { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, 48px); }
.cssV2-line-edit .cssV2-line-edit-keypad button { min-height: 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cssV2-line-keypad-actions { display: grid; grid-template-rows: 48px 1fr 48px; gap: 8px; }
.cssV2-line-keypad-actions button { min-height: 0; font-weight: 600; }
.cssV2-line-keypad-actions button:last-child:not(.cssV2-primary), .cssV2-line-note-actions button:not(.cssV2-primary) { border-color: #BFD3FA; background: var(--cssV2-primary-bg); color: var(--cssV2-primary); font-weight: 700; }
.cssV2-line-keypad-actions button.cssV2-primary, .cssV2-line-note-actions button.cssV2-primary { border-color: var(--cssV2-primary); background: var(--cssV2-primary); color: var(--cssV2-text-inverse); font-weight: 700; }
.cssV2-line-note-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

@media (max-width: 1000px) {
    .cssV2-pos { padding-right: 10px; padding-left: 10px; }
    .cssV2-layout { grid-template-columns: 310px minmax(0, 1fr); gap: 10px; }
    .cssV2-toolbar { padding: 10px; }
    .cssV2-card-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding: 10px; }
}
@media (max-height: 650px) {
    .cssV2-invoice-header { min-height: 50px; padding: 8px 12px; }
    .cssV2-summary { padding: 8px 12px; gap: 6px; }
    .cssV2-summary-cell { min-height: 34px; padding: 6px 8px; }
}
/* ===== Khung modal V2 (port AppModalShell.razor <style>) ===== */
.cssV2-modal-window .modal-dialog { width: min(100vw - 32px, var(--cssV2-shell-max, 410px)); margin: 20px auto; }
.cssV2-modal-window .modal-content { display: flex; flex-direction: column; max-height: min(640px, calc(100vh - 40px)); overflow: hidden; border: 1px solid rgba(255,255,255,.68); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.97) 100%); box-shadow: 0 28px 80px rgba(15,23,42,.24), 0 6px 22px rgba(15,23,42,.12); }
.cssV2-modal-window.cssV2-shell-720 .modal-dialog { --cssV2-shell-max: 720px; }
.cssV2-modal-window.cssV2-shell-780 .modal-dialog { --cssV2-shell-max: 780px; }
.cssV2-modal { display: flex; flex-direction: column; min-height: 0; font-family: var(--cssV2-font); color: var(--cssV2-text); }
.cssV2-modal button { font: inherit; touch-action: manipulation; }
.cssV2-shell-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 10px; text-align: left; }
.cssV2-shell-heading { display: grid; gap: 6px; min-width: 0; flex: 1 1 auto; }
.cssV2-shell-heading h2 { margin: 0; color: #111827; font-size: 20px; font-weight: 700; line-height: 1.2; }
.cssV2-modal .cssV2-shell-heading p { margin: 0; color: #667085; font-size: 14px; line-height: 1.45; }
.cssV2-modal .cssV2-shell-close { min-height: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: rgba(15,23,42,.06); color: #475467; }
.cssV2-modal .cssV2-shell-close:active { background: rgba(15,23,42,.1); }
.cssV2-shell-body { padding: 10px 22px 18px; overflow: auto; min-height: 0; }
.cssV2-shell-body.cssV2-no-scroll { display: flex; flex-direction: column; overflow: hidden; }
.cssV2-shell-footer { padding: 0 22px 22px; }
.cssV2-shell-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); justify-content: center; gap: 10px; }
.cssV2-shell-button { min-height: 48px; padding: 8px 12px; border: 0; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.2; }
.cssV2-shell-button.cssV2-primary { background: var(--cssV2-primary); color: var(--cssV2-text-inverse); }
.cssV2-shell-button.cssV2-secondary { background: rgba(15,23,42,.06); color: #344054; }
.cssV2-shell-button:disabled { opacity: .5; }

/* ===== LineInputV2 (port SalesLineInputModal.razor.css; bổ sung phần M1 chưa có) ===== */
.cssV2-line-edit { position: relative; display: flex; flex-direction: column; gap: 10px; }
.cssV2-line-edit .cssV2-shell-body { display: flex; flex-direction: column; gap: 10px; }
.cssV2-line-edit-note { box-sizing: border-box; width: 100%; height: 56px; min-height: 56px; resize: none; padding: 8px; border: 1px solid var(--cssV2-border); border-radius: var(--cssV2-radius-sm); background: var(--cssV2-bg-card); color: var(--cssV2-text); font-size: var(--cssV2-fs-body); box-shadow: none; }
.cssV2-line-edit-note:focus, .cssV2-line-edit-note:focus-visible { outline: none; box-shadow: none; }
.cssV2-line-quantity-limit { display: flex; justify-content: space-between; gap: 8px; margin-top: -4px; color: var(--cssV2-text-2); font-size: var(--cssV2-fs-caption); }
.cssV2-line-quantity-limit strong { color: var(--cssV2-text); }
.cssV2-line-return-reasons { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--cssV2-divider); }
.cssV2-line-return-reasons > span { color: var(--cssV2-text-2); font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.cssV2-line-return-reasons > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cssV2-line-return-reasons button { min-height: 30px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.cssV2-line-return-reasons button.cssV2-active { border-color: var(--cssV2-primary); background: var(--cssV2-primary-bg); color: var(--cssV2-primary); }
.cssV2-line-return-reasons button.cssV2-custom { border-style: dashed; }
.cssV2-line-return-reasons input { box-sizing: border-box; width: 100%; height: 40px; padding: 8px 10px; border: 1.5px solid var(--cssV2-border); border-radius: 10px; background: var(--cssV2-bg-card); color: var(--cssV2-text); font-size: 13px; }
.cssV2-line-edit p { margin: 0; color: var(--cssV2-text-2); font-size: var(--cssV2-fs-caption); }
.cssV2-line-edit .cssV2-input-error { color: var(--cssV2-error); font-weight: 600; }

/* ===== ToppingV2 — port SalesToppingModal.razor.css (tablet only) ===== */
.cssV2-modal-window.cssV2-shell-720 .modal-content { max-height: min(720px, calc(100vh - 40px)); }
.cssV2-topping button, .cssV2-topping select, .cssV2-topping input { font: inherit; }
.cssV2-topping button { touch-action: manipulation; }
.cssV2-topping button:focus-visible, .cssV2-topping [tabindex]:focus-visible { outline: 2px solid var(--cssV2-primary); outline-offset: -2px; }
.cssV2-topping button:disabled { cursor: default; }
.cssV2-topping-editor { display: flex; flex-direction: column; gap: 14px; height: min(475px, calc(100vh - 185px)); min-height: 0; }
.cssV2-topping-toolbar { display: flex; align-items: center; gap: 12px; }
.cssV2-topping-sizes { display: flex; flex: 1; min-width: 0; gap: 6px; }
.cssV2-topping-sizes button { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 52px; padding: 5px; border: 1px solid var(--cssV2-border); border-radius: 12px; background: var(--cssV2-bg-card); color: var(--cssV2-text); }
.cssV2-topping-sizes button.cssV2-active { border-color: var(--cssV2-primary); background: var(--cssV2-primary); color: var(--cssV2-text-inverse); }
.cssV2-topping-sizes button strong { font-size: 15px; }
.cssV2-topping-sizes button span { font-size: 12px; }
.cssV2-topping-quantity { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--cssV2-bg-app); }
.cssV2-topping-quantity button { width: 42px; height: 42px; border: 0; border-radius: 9px; background: var(--cssV2-bg-card); color: var(--cssV2-text); font-size: 20px; }
.cssV2-topping-quantity button:disabled { opacity: .45; }
.cssV2-topping-quantity > span { display: grid; justify-items: center; min-width: 52px; }
.cssV2-topping-quantity strong { font-size: 18px; }
.cssV2-topping-quantity small { color: var(--cssV2-text-2); font-size: 11px; }
.cssV2-topping-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--cssV2-text-2); font-size: 12px; }
.cssV2-topping-heading strong { text-transform: uppercase; letter-spacing: .04em; }
.cssV2-topping-heading span { color: var(--cssV2-primary); font-weight: 700; }
.cssV2-topping-options { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-content: start; padding-right: 4px; }
.cssV2-topping-tile { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; height: 78px; padding: 8px 10px; border: 1px solid var(--cssV2-border); border-radius: 12px; background: var(--cssV2-bg-app); cursor: pointer; }
.cssV2-topping-tile:focus-visible { outline: 2px solid var(--cssV2-primary); outline-offset: 2px; }
.cssV2-topping-tile.cssV2-selected { border-color: var(--cssV2-primary); background: var(--cssV2-bg-card); }
.cssV2-topping-tile { position: relative; }
.cssV2-topping-tile.cssV2-selected .cssV2-topping-tile-main { padding-right: 26px; }
.cssV2-topping-tile-check { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--cssV2-primary); color: var(--cssV2-text-inverse); cursor: pointer; }
.cssV2-topping-tile-check:disabled { opacity: .4; }
.cssV2-topping-tile-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: var(--cssV2-text); text-align: left; }
.cssV2-topping-tile-main strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.cssV2-topping-tile-main span { color: var(--cssV2-text-2); font-size: 12px; }
.cssV2-topping-tile-stepper { display: flex; align-items: center; justify-content: space-between; color: var(--cssV2-primary); font-size: 14px; }
.cssV2-topping-tile-stepper button { width: 30px; height: 26px; border: 0; border-radius: 7px; background: var(--cssV2-bg-card); color: var(--cssV2-primary); font-size: 16px; }
.cssV2-topping-tile-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.cssV2-topping-error { margin: 0; color: var(--cssV2-error); font-size: var(--cssV2-fs-caption); }
.cssV2-topping-actions { grid-template-columns: repeat(2, minmax(0, 220px)); }
.cssV2-topping-section-label, .cssV2-topping-summary-short, .cssV2-topping-tile-add, .cssV2-topping-quantity-row { display: none; }
.cssV2-topping-save { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cssV2-topping-save-total::before { content: "· "; }
/* ===== Danh sách trả món (port SalesV2ReturnListModal.razor.css; bỏ cards/menu in/phone; rule ::deep .app-modal-shell-card bỏ vì là .modal-content) ===== */
.cssV2-return .cssV2-shell-header { flex-shrink: 0; padding: 20px 24px 16px; border-bottom: 1px solid var(--cssV2-divider, var(--cssV2-border)); }
.cssV2-return .cssV2-shell-heading h2 { color: var(--cssV2-text); font-size: 19px; }
.cssV2-return .cssV2-shell-heading p { color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-return .cssV2-shell-close { width: 36px; height: 36px; border-radius: 10px; background: var(--cssV2-bg-app); color: var(--cssV2-text-2); }
.cssV2-return .cssV2-shell-body { flex: 1; min-height: 0; padding: 20px 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.cssV2-return .cssV2-shell-footer { flex-shrink: 0; padding: 14px 24px; border-top: 1px solid var(--cssV2-divider, var(--cssV2-border)); background: var(--cssV2-bg-app); }
.cssV2-return-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; color: var(--cssV2-text); }
.cssV2-return-empty { margin: 0; padding: 16px; text-align: center; color: var(--cssV2-text-2); }
.cssV2-return-none { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; border: 1px dashed var(--cssV2-border-strong); border-radius: 12px; background: var(--cssV2-bg-app); text-align: center; }
.cssV2-return-none > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--cssV2-bg-app); color: var(--cssV2-text-2); font-size: 20px; }
.cssV2-return-none strong { font-size: 15px; font-weight: 600; }
.cssV2-return-none small { max-width: 300px; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-return-scroll { flex-shrink: 0; overflow: hidden; border: 1px solid var(--cssV2-divider, var(--cssV2-border)); border-radius: 12px; }
.cssV2-return-scroll table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.cssV2-return-scroll th, .cssV2-return-scroll td { padding: 12px 8px; text-align: left; vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cssV2-return-scroll th:first-child, .cssV2-return-scroll td:first-child { width: 44px; padding-left: 14px; }
.cssV2-return-scroll th:nth-child(3), .cssV2-return-scroll td:nth-child(3) { width: 48px; }
.cssV2-return-scroll th:nth-child(4), .cssV2-return-scroll td:nth-child(4) { width: 92px; }
.cssV2-return-scroll th:nth-child(5), .cssV2-return-scroll td:nth-child(5) { width: 104px; }
.cssV2-return-scroll th:nth-child(6), .cssV2-return-scroll td:nth-child(6) { width: 110px; }
.cssV2-return-scroll th:nth-child(7), .cssV2-return-scroll td:nth-child(7) { width: 136px; padding-right: 14px; font-variant-numeric: tabular-nums; }
.cssV2-return-scroll th { padding-top: 10px; padding-bottom: 10px; background: var(--cssV2-bg-app); color: var(--cssV2-text-2); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cssV2-return-scroll tbody tr { border-top: 1px solid var(--cssV2-divider, var(--cssV2-border)); cursor: pointer; }
.cssV2-return-scroll tbody tr.cssV2-selected { background: color-mix(in srgb, var(--cssV2-primary) 6%, var(--cssV2-bg-card)); box-shadow: inset 3px 0 var(--cssV2-primary); }
.cssV2-return-scroll tbody tr:focus-visible:not(.cssV2-selected) { outline: 2px solid var(--cssV2-primary); outline-offset: -2px; }
.cssV2-return-scroll td.cssV2-index { color: var(--cssV2-text-2); font-variant-numeric: tabular-nums; }
.cssV2-return-scroll .cssV2-number { text-align: right; font-variant-numeric: tabular-nums; }
.cssV2-return-scroll .cssV2-center { text-align: center; font-variant-numeric: tabular-nums; }
.cssV2-return-scroll .cssV2-strong { font-weight: 600; }
.cssV2-return-scroll .cssV2-muted { color: var(--cssV2-text-2); }
.cssV2-return-name, .cssV2-return-scroll .cssV2-return-note-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cssV2-return-name { font-weight: 600; }
.cssV2-return-note-text { margin-top: 3px; color: color-mix(in srgb, var(--cssV2-warning) 55%, var(--cssV2-text)); font-size: 13px; }
.cssV2-return-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--cssV2-divider, var(--cssV2-border)); background: var(--cssV2-bg-app); font-size: 14px; }
.cssV2-return-total span { color: var(--cssV2-text-2); }
.cssV2-return-total b { color: color-mix(in srgb, var(--cssV2-error) 80%, var(--cssV2-text)); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cssV2-return-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--cssV2-primary) 6%, var(--cssV2-bg-card)); color: var(--cssV2-text); font-size: 13px; line-height: 1.5; }
.cssV2-return-note i { flex: none; color: var(--cssV2-primary); font-size: 15px; line-height: 1.3; }
.cssV2-return-list p[role="status"] { margin: 0; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-return-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cssV2-return-state { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-return-state > span { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cssV2-warning); }
.cssV2-return-state.cssV2-done { color: color-mix(in srgb, var(--cssV2-success) 70%, var(--cssV2-text)); }
.cssV2-return-state.cssV2-done > span { background: var(--cssV2-success); }
.cssV2-shell-actions.cssV2-return-actions { display: flex; gap: 10px; margin-left: auto; }
.cssV2-return-actions .cssV2-shell-button { min-height: 42px; padding: 0 20px; border-radius: 10px; }
.cssV2-return-actions .cssV2-shell-button.cssV2-primary { padding: 0 22px; background: var(--cssV2-primary); color: var(--cssV2-text-inverse); }
.cssV2-return-actions :disabled { opacity: .6; }

/* ===== Hộp thoại V2 (AppDialogHost) ===== */
.cssV2-modal-window.cssV2-dialog-window .modal-dialog { width: min(330px, calc(100vw - 40px)); margin: 15vh auto 0; }
.cssV2-modal-window.cssV2-dialog-window .modal-content { border-radius: 20px; }
.cssV2-dialog { text-align: center; }
.cssV2-dialog-content { padding: 24px 24px 18px; }
.cssV2-dialog-content h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--cssV2-text); }
.cssV2-dialog-content p { margin: 10px 0 0; color: #5f6673; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.cssV2-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(60,60,67,.18); }
.cssV2-dialog-actions.cssV2-single { grid-template-columns: 1fr; }
.cssV2-dialog-button { min-height: 50px; border: 0; border-right: 1px solid rgba(60,60,67,.18); background: transparent; color: #0a84ff; font: inherit; font-size: 16px; font-weight: 600; }
.cssV2-dialog-button:last-child { border-right: 0; }
.cssV2-dialog-button.cssV2-secondary { color: #4b5563; font-weight: 500; }
.cssV2-dialog-button.cssV2-destructive { color: #d92d20; }
.cssV2-dialog-button:active { background: rgba(0,0,0,.045); }

/* ===== ChonKhuyenMaiV2 (SalesV2PromotionModal) ===== */
.cssV2-modal-window.cssV2-shell-480 .modal-dialog { --cssV2-shell-max: 480px; }
.cssV2-modal-window.cssV2-shell-420 .modal-dialog { --cssV2-shell-max: 420px; }
.cssV2-promo-modal { display: grid; gap: 10px; min-width: 0; color: var(--cssV2-text); }
.cssV2-promo-empty { margin: 0; padding: 16px; text-align: center; color: var(--cssV2-text-2); font-size: 14px; }
.cssV2-promo-list { display: flex; flex-direction: column; gap: 8px; max-height: 350px; overflow: auto; overscroll-behavior: contain; }
.cssV2-promo-list button { display: grid; gap: 4px; min-height: 50px; padding: 10px 12px; border: 1px solid var(--cssV2-border); border-radius: 8px; background: var(--cssV2-bg-app); color: var(--cssV2-text); text-align: left; font: inherit; font-size: 14px; touch-action: manipulation; }
.cssV2-promo-list button span { color: var(--cssV2-text-2); font-size: 12px; }
.cssV2-promo-list button.cssV2-selected { background: var(--cssV2-primary); border-color: var(--cssV2-primary); color: var(--cssV2-text-inverse); }
.cssV2-promo-list button.cssV2-selected span { color: var(--cssV2-text-inverse); }
/* ===== ChonVATV2 (SalesInvoiceAdjustmentModal, nhánh VAT) ===== */
.cssV2-vat-modal { display: flex; flex-direction: column; gap: 10px; }
.cssV2-vat-modal p { margin: 0; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-vat-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cssV2-vat-types button { min-height: 44px; border: 1px solid var(--cssV2-border); border-radius: 6px; padding: 8px; color: var(--cssV2-text); background: var(--cssV2-bg-app); font: inherit; }
.cssV2-vat-types button.cssV2-active { color: var(--cssV2-text-inverse); background: var(--cssV2-primary); border-color: var(--cssV2-primary); }
.cssV2-shell-actions.cssV2-single { grid-template-columns: minmax(0, 180px); }

/* ===== KhuyenMaiTheVipV2 — port SalesV2VipPromotionModal.razor.css (tablet only, bỏ @media) ===== */
.cssV2-modal-window.cssV2-shell-680 .modal-dialog { --cssV2-shell-max: 680px; }
.cssV2-vip .cssV2-shell-header { flex-shrink: 0; padding: 20px 24px 16px; border-bottom: 1px solid var(--cssV2-border); }
.cssV2-vip .cssV2-shell-heading h2 { color: var(--cssV2-text); font-size: 19px; }
.cssV2-vip .cssV2-shell-close { width: 36px; height: 36px; border-radius: 10px; background: var(--cssV2-bg-app); color: var(--cssV2-text-2); }
.cssV2-vip .cssV2-shell-body { flex: 1; min-height: 0; padding: 20px 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.cssV2-vip .cssV2-shell-footer { flex-shrink: 0; padding: 14px 24px; border-top: 1px solid var(--cssV2-border); background: var(--cssV2-bg-app); }
.cssV2-vip button, .cssV2-vip input { font: inherit; }
.cssV2-vip-modal { display: flex; flex-direction: column; gap: 16px; min-width: 0; color: var(--cssV2-text); }
.cssV2-vip-autocomplete { position: relative; min-width: 0; }
.cssV2-vip-search { display: grid; gap: 6px; color: var(--cssV2-text); font-size: 13px; font-weight: 500; }
.cssV2-vip-search-row { position: relative; display: flex; gap: 8px; min-width: 0; }
.cssV2-vip-search-icon { position: absolute; top: 50%; left: 13px; color: var(--cssV2-text-2); font-size: 15px; transform: translateY(-50%); pointer-events: none; }
.cssV2-vip-search input { flex: 1; min-width: 0; height: 44px; padding: 0 12px 0 38px; border: 1px solid var(--cssV2-border-strong); border-radius: 10px; background: var(--cssV2-bg-card); color: var(--cssV2-text); font-size: 14px; outline: none; }
.cssV2-vip-search input:focus { border-color: var(--cssV2-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cssV2-primary) 15%, transparent); }
.cssV2-vip-search-row button { flex-shrink: 0; height: 44px; padding: 0 12px; border: 1px solid var(--cssV2-border-strong); border-radius: 10px; background: var(--cssV2-bg-card); color: var(--cssV2-text); font-size: 13px; font-weight: 600; }
.cssV2-vip-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 2; max-height: min(300px, 40vh); overflow-y: auto; border: 1px solid var(--cssV2-border-strong); border-radius: 10px; background: var(--cssV2-bg-card); box-shadow: 0 8px 24px -8px rgba(15,23,42,.18); }
.cssV2-vip-suggestions button { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-top: 1px solid var(--cssV2-border); background: var(--cssV2-bg-card); color: var(--cssV2-text); text-align: left; }
.cssV2-vip-suggestions button:first-child { border-top: 0; }
.cssV2-vip-suggestions button strong { font-size: 14px; font-weight: 600; }
.cssV2-vip-suggestions button small { color: var(--cssV2-text-2); font-size: 12px; }
.cssV2-vip-suggestions button.cssV2-selected { background: color-mix(in srgb, var(--cssV2-primary) 6%, var(--cssV2-bg-card)); }
.cssV2-vip-suggestions button.cssV2-selected strong { color: var(--cssV2-primary); }
.cssV2-vip-suggestions button:disabled, .cssV2-vip-search :disabled { opacity: .6; }
.cssV2-vip-suggestions p, .cssV2-vip-message { margin: 0; padding: 12px 14px; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-vip-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; border: 1px dashed var(--cssV2-border-strong); border-radius: 12px; background: var(--cssV2-bg-app); text-align: center; }
.cssV2-vip-empty > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--cssV2-bg-app); color: var(--cssV2-text-2); font-size: 20px; }
.cssV2-vip-empty strong { font-size: 15px; font-weight: 600; }
.cssV2-vip-empty small { max-width: 300px; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-vip-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Thẻ hội viên giữ nền tối ở cả hai theme, như thẻ thật. */
.cssV2-vip-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 150px; padding: 18px; border-radius: 14px; background: #1c2333; color: #fff; }
.cssV2-vip-card-status { align-self: flex-end; padding: 3px 8px; border-radius: 999px; background: #14532d; color: #bbf7d0; font-size: 12px; font-weight: 600; }
.cssV2-vip-card-status.cssV2-expired { background: #7f1d1d; color: #fecaca; }
.cssV2-vip-card-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cssV2-vip-card-name strong { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.cssV2-vip-card-name small { color: #aab1c0; font-size: 13px; letter-spacing: .06em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cssV2-vip-card-dates { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; color: #aab1c0; font-size: 12px; }
.cssV2-vip-stats { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 10px; margin: 0; }
.cssV2-vip-stats div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--cssV2-bg-app); }
.cssV2-vip-stats dt { color: var(--cssV2-text-2); font-size: 12px; font-weight: 400; }
.cssV2-vip-stats dd { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cssV2-vip-stats dd.cssV2-discount { color: var(--cssV2-success); }
.cssV2-vip-points { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 16px; border: 1px solid color-mix(in srgb, var(--cssV2-primary) 22%, var(--cssV2-bg-card)); border-radius: 12px; background: color-mix(in srgb, var(--cssV2-primary) 5%, var(--cssV2-bg-card)); }
.cssV2-vip-points > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cssV2-vip-points > div span { font-size: 14px; font-weight: 600; }
.cssV2-vip-points > div strong { color: var(--cssV2-primary); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cssV2-vip-progress { height: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--cssV2-primary) 18%, var(--cssV2-bg-card)); }
.cssV2-vip-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--cssV2-primary); }
.cssV2-vip-points p { margin: 0; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-vip-hint, .cssV2-vip-modal p[role="status"] { margin: 0; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-vip-status { min-height: 1lh; }
.cssV2-vip-status:empty { display: none; }
.cssV2-vip-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cssV2-vip-limit { margin: 0; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-shell-actions.cssV2-vip-actions { display: flex; gap: 10px; margin-left: auto; }
.cssV2-vip-actions .cssV2-shell-button { min-height: 42px; padding: 0 20px; border-radius: 10px; }
.cssV2-vip-actions .cssV2-shell-button.cssV2-primary { padding: 0 22px; background: var(--cssV2-primary); color: var(--cssV2-text-inverse); }
.cssV2-vip-actions :disabled { opacity: .6; }

/* ChiTietHoaDonV2 - port SalesV2InvoiceHeaderModal.razor.css + SalesV2CustomerPicker.razor.css (tablet/desktop; bo @media) */
.cssV2-modal-window:has(.cssV2-header) .modal-dialog { margin: 12px auto; }
.cssV2-modal-window:has(.cssV2-header) .modal-content { max-height: min(740px, calc(100vh - 24px)); }
.cssV2-header .cssV2-shell-header { flex-shrink: 0; padding: 20px 24px 16px; border-bottom: 1px solid var(--cssV2-divider, var(--cssV2-border)); }
.cssV2-header .cssV2-shell-heading { gap: 6px; }
.cssV2-header .cssV2-shell-heading h2 { color: var(--cssV2-text); font-size: 19px; }
.cssV2-header .cssV2-shell-heading p { color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-header .cssV2-shell-close { width: 36px; height: 36px; border-radius: 10px; background: var(--cssV2-bg-app); color: var(--cssV2-text-2); }
.cssV2-header .cssV2-shell-body { flex: 1; min-height: 0; padding: 0; display: flex; }
.cssV2-header .cssV2-shell-footer { flex-shrink: 0; padding: 14px 24px; border-top: 1px solid var(--cssV2-divider, var(--cssV2-border)); background: var(--cssV2-bg-app); }
.cssV2-header input, .cssV2-header select, .cssV2-header textarea, .cssV2-header button { font: inherit; }
.cssV2-header-modal { display: flex; flex: 1; flex-direction: column; gap: 24px; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 24px; color: var(--cssV2-text); }
.cssV2-header-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cssV2-header-section + .cssV2-header-section { padding-top: 24px; border-top: 1px solid var(--cssV2-divider, var(--cssV2-border)); }
.cssV2-header-section h3 { margin: 0; color: var(--cssV2-text-2); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cssV2-header-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px; }
.cssV2-header-grid.cssV2-wide { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cssV2-header-modal label, .cssV2-header-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-weight: 400; }
.cssV2-header-modal label > span, .cssV2-header-field > label { color: var(--cssV2-text-2); font-size: 13px; font-weight: 500; }
.cssV2-header-modal input, .cssV2-header-modal select, .cssV2-header-modal textarea { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--cssV2-border-strong, var(--cssV2-border)); border-radius: 10px; background: var(--cssV2-bg-input); color: var(--cssV2-text); font-size: 16px; font-weight: 400; }
.cssV2-header-modal select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--cssV2-text-2) 50%), linear-gradient(135deg, var(--cssV2-text-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; text-overflow: ellipsis; }
.cssV2-header-modal select:disabled { background-image: none; padding-right: 12px; }
.cssV2-header-modal option { color: var(--cssV2-text); background: var(--cssV2-bg-card); }
.cssV2-header-modal input[readonly] { background: var(--cssV2-bg-app); }
.cssV2-header-modal textarea { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; }
.cssV2-header-modal input:focus, .cssV2-header-modal select:focus, .cssV2-header-modal textarea:focus { border-color: var(--cssV2-primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cssV2-primary) 15%, transparent); }
.cssV2-header-row { display: flex; gap: 8px; }
.cssV2-header-row select { flex: 1; min-width: 0; }
.cssV2-header-row .cssV2-cp-toggle { height: 44px; border-radius: 10px; }
.cssV2-header-modal :disabled { opacity: .6; }
.cssV2-header-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cssV2-header-footer p[role="status"] { min-width: 0; margin: 0; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-header-status { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cssV2-header-status:empty { display: none; }
.cssV2-header-dirty { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-header-dirty > span { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cssV2-warning); }
.cssV2-shell-actions.cssV2-header-actions { display: flex; gap: 10px; margin-left: auto; }
.cssV2-header-actions .cssV2-shell-button { min-height: 42px; padding: 0 20px; border-radius: 10px; }
.cssV2-header-actions .cssV2-shell-button.cssV2-primary { padding: 0 24px; background: var(--cssV2-primary); color: var(--cssV2-text-inverse); }
.cssV2-cp { position: relative; flex: 1; min-width: 0; }
.cssV2-cp-toggle { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--cssV2-border-strong); border-radius: 12px; background: var(--cssV2-bg-input, var(--cssV2-bg-card)); color: var(--cssV2-text); text-align: left; }
.cssV2-cp-toggle:disabled { opacity: .6; }
.cssV2-cp-toggle > i { flex: none; color: var(--cssV2-text-2); font-size: 15px; }
.cssV2-cp-value { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.cssV2-cp-value strong, .cssV2-cp-value small, .cssV2-cp-list strong, .cssV2-cp-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cssV2-cp-value strong { font-size: 15px; font-weight: 600; }
.cssV2-cp-value small { color: var(--cssV2-text-2); font-size: 12px; }
.cssV2-cp-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; padding: 0; border: 0; background: transparent; }
.cssV2-cp-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 4; display: flex; flex-direction: column; max-height: 380px; max-height: clamp(180px, calc(100vh - 420px), 380px); overflow: hidden; border: 1px solid var(--cssV2-border-strong); border-radius: 12px; background: var(--cssV2-bg-card); box-shadow: 0 12px 32px rgba(15,23,42,.18); }
.cssV2-cp-head { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--cssV2-divider, var(--cssV2-border)); }
.cssV2-cp-search { position: relative; flex: 1; min-width: 0; }
.cssV2-cp-search i { position: absolute; top: 50%; left: 12px; color: var(--cssV2-text-2); font-size: 14px; transform: translateY(-50%); pointer-events: none; }
.cssV2-cp-search input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px 0 36px; border: 1px solid var(--cssV2-border-strong); border-radius: 10px; background: var(--cssV2-bg-input, var(--cssV2-bg-card)); color: var(--cssV2-text); font-size: 14px; outline: none; }
.cssV2-cp-search input:focus { border-color: var(--cssV2-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cssV2-primary) 15%, transparent); }
.cssV2-cp-list { flex: 1; min-height: 0; overflow-y: auto; }
.cssV2-cp-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; border-top: 1px solid var(--cssV2-divider, var(--cssV2-border)); background: var(--cssV2-bg-card); color: var(--cssV2-text); text-align: left; }
.cssV2-cp-list button:first-child { border-top: 0; }
.cssV2-cp-list button > span { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.cssV2-cp-list strong { font-size: 14px; font-weight: 600; }
.cssV2-cp-list small { color: var(--cssV2-text-2); font-size: 12px; }
.cssV2-cp-list button.cssV2-selected { background: color-mix(in srgb, var(--cssV2-primary) 6%, var(--cssV2-bg-card)); }
.cssV2-cp-list button.cssV2-selected strong, .cssV2-cp-list button > i { color: var(--cssV2-primary); }
.cssV2-cp-list button:not(.cssV2-selected):active { background: var(--cssV2-bg-app); }
.cssV2-cp-note { flex: none; margin: 0; padding: 10px 14px; border-top: 1px solid var(--cssV2-divider, var(--cssV2-border)); color: var(--cssV2-text-2); font-size: 13px; }
/* ---- ChuyenGopTachBanV2 (port SalesV2TableTransferModal.razor.css, tablet only) ---- */
.cssV2-transfer-modal .cssV2-transfer { position:relative; display:flex; flex-direction:column; gap:12px; height:min(420px, calc(100vh - 200px)); min-height:0; overflow:hidden; color:var(--cssV2-text); }
.cssV2-transfer-modes, .cssV2-transfer-areas { display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; }
.cssV2-transfer-modal .cssV2-transfer button { min-height:40px; padding:8px 12px; border:1px solid var(--cssV2-border); border-radius:8px; background:var(--cssV2-bg-app); color:var(--cssV2-text); }
.cssV2-transfer-modal .cssV2-transfer button.cssV2-active { border-color:var(--cssV2-primary); background:var(--cssV2-primary); color:var(--cssV2-text-inverse); }
.cssV2-transfer-modal .cssV2-transfer button:disabled { opacity:.5; }
.cssV2-transfer-targets { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); align-content:start; gap:8px; min-height:180px; overflow:auto; flex:1 1 180px; }
.cssV2-transfer-modal.cssV2-merge .cssV2-transfer > div:has(> .cssV2-transfer-targets) { display:flex; flex:1; min-height:0; flex-direction:column; }
.cssV2-transfer-modal.cssV2-merge .cssV2-transfer-targets { min-height:0; }
.cssV2-transfer-areas + .cssV2-transfer-targets { margin-top:12px; }
.cssV2-transfer-targets p { grid-column:1/-1; }
.cssV2-transfer-targets button { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.cssV2-transfer-targets small { font-size:12px; opacity:.8; }
.cssV2-transfer-merge-warning { flex-shrink:0; padding:8px; border-radius:8px; background:#FFF7E6; color:var(--cssV2-text); font-size:12px; line-height:1.35; }
.cssV2-transfer-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; flex:1; min-height:0; }
.cssV2-transfer-column { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; border:1px solid var(--cssV2-border); border-radius:12px; }
.cssV2-transfer-column.cssV2-destination { border-color:var(--cssV2-primary); }
.cssV2-transfer-column > header, .cssV2-transfer-destination { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:44px; padding:8px 12px; background:var(--cssV2-bg-app); border:0; border-bottom:1px solid var(--cssV2-border); border-radius:0; text-align:left; }
.cssV2-transfer-column > header strong, .cssV2-transfer-destination strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cssV2-transfer-column > header span, .cssV2-transfer-destination span { flex-shrink:0; color:var(--cssV2-text-2); font-size:12px; }
.cssV2-transfer-modal .cssV2-transfer .cssV2-transfer-destination { width:100%; color:var(--cssV2-text); }
.cssV2-transfer-destination em { color:var(--cssV2-primary); font-style:normal; }
.cssV2-transfer-items { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.cssV2-transfer-item { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:52px; padding:4px 6px 4px 10px; border-bottom:1px solid var(--cssV2-border); }
.cssV2-transfer-modal .cssV2-transfer .cssV2-transfer-item-main { display:flex; flex:1; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; min-height:42px; padding:2px 0; border:0; border-radius:0; background:transparent; text-align:left; }
.cssV2-transfer-item-main strong { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.cssV2-transfer-item-main small { color:var(--cssV2-text-2); font-size:12px; }
.cssV2-transfer-item > b { min-width:22px; text-align:center; }
.cssV2-transfer-modal .cssV2-transfer .cssV2-transfer-all { min-width:36px; padding:0; border:0; background:transparent; color:var(--cssV2-primary); font-size:22px; font-weight:700; }
.cssV2-transfer-modal .cssV2-transfer .cssV2-transfer-item.cssV2-moved { width:100%; border:0; border-bottom:1px solid var(--cssV2-border); border-radius:0; background:transparent; text-align:left; }
.cssV2-transfer-item.cssV2-moved > span:first-child, .cssV2-transfer-item.cssV2-moved > b { color:var(--cssV2-primary); }
.cssV2-transfer-empty { display:grid; place-items:center; height:100%; padding:16px; color:var(--cssV2-text-2); text-align:center; font-size:13px; }
.cssV2-transfer-fraction { display:flex; flex-basis:100%; align-items:center; gap:6px; padding:0 4px 4px; color:var(--cssV2-text-2); font-size:11px; }
.cssV2-transfer-fraction input { width:68px; min-width:0; padding:5px; border:1px solid var(--cssV2-border); border-radius:5px; background:var(--cssV2-bg-card); color:var(--cssV2-text); }
.cssV2-transfer-picker-backdrop { position:absolute; z-index:3; inset:0; display:flex; align-items:flex-end; background:rgba(12,18,28,.3); }
.cssV2-transfer-picker { display:flex; flex-direction:column; gap:10px; width:100%; max-height:100%; padding:14px; border-radius:16px 16px 0 0; background:var(--cssV2-bg-card); box-shadow:var(--cssV2-shadow-md); }
.cssV2-transfer-picker-title { display:flex; align-items:center; justify-content:space-between; }
.cssV2-transfer-modal .cssV2-transfer .cssV2-transfer-picker-title button { min-height:32px; padding:2px 10px; }
.cssV2-transfer-picker-targets { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; max-height:210px; overflow:auto; }
.cssV2-transfer-picker-targets p { grid-column:1/-1; }
.cssV2-transfer-price-backdrop { position:absolute; z-index:4; inset:0; display:grid; place-items:center; padding:16px; background:rgba(12,18,28,.36); }
.cssV2-transfer-price-prompt { display:grid; gap:9px; width:min(100%,360px); padding:18px; border-radius:14px; background:var(--cssV2-bg-card); box-shadow:var(--cssV2-shadow-md); }
.cssV2-transfer-price-prompt strong { font-size:16px; }
.cssV2-transfer-price-prompt p { color:var(--cssV2-text-2); font-size:13px; line-height:1.4; }
.cssV2-transfer-modal .cssV2-transfer .cssV2-transfer-price-prompt button { width:100%; min-height:40px; text-align:center; }
.cssV2-transfer-modal .cssV2-transfer .cssV2-transfer-price-prompt button:first-of-type { border-color:var(--cssV2-primary); background:var(--cssV2-primary); color:var(--cssV2-text-inverse); }
.cssV2-transfer-modal .cssV2-transfer fieldset { display:grid; gap:8px; padding:10px; border:1px solid var(--cssV2-warning); border-radius:8px; background:#FFF7E6; }
.cssV2-transfer-modal .cssV2-transfer fieldset label { display:flex; gap:8px; align-items:center; min-height:36px; }
.cssV2-transfer-modal .cssV2-transfer fieldset input { accent-color:var(--cssV2-primary); }
.cssV2-transfer-modal .cssV2-transfer p { margin:0; }
.cssV2-transfer-note { font-size:13px; color:var(--cssV2-text-2); }
.cssV2-transfer-confirm { font-weight:600; }
.cssV2-transfer-error { color:var(--cssV2-error); font-size:13px; }
.cssV2-transfer-modal:not(.cssV2-merge) .cssV2-transfer { height:min(480px, calc(100vh - 260px)); }
.cssV2-transfer-modal:not(.cssV2-merge) .cssV2-transfer-modes { align-self:flex-start; flex-wrap:nowrap; gap:2px; padding:4px; border-radius:12px; background:var(--cssV2-bg-app); }
.cssV2-transfer-modal:not(.cssV2-merge) .cssV2-transfer-modes button { height:40px; min-height:40px; padding:0 18px; border:0; border-radius:9px; background:transparent; color:var(--cssV2-text-2); font-size:14px; font-weight:600; }
.cssV2-transfer-modal:not(.cssV2-merge) .cssV2-transfer-modes button.cssV2-active { background:var(--cssV2-bg-card); color:var(--cssV2-primary); box-shadow:0 1px 3px rgba(20,30,50,.15); }
.cssV2-transfer-modal:not(.cssV2-merge) .cssV2-transfer-column > header, .cssV2-transfer-modal:not(.cssV2-merge) .cssV2-transfer-destination { min-height:52px; padding:0 14px; }
.cssV2-transfer-modal:not(.cssV2-merge) .cssV2-transfer .cssV2-transfer-destination { background:color-mix(in srgb, var(--cssV2-primary) 8%, var(--cssV2-bg-card)); }
.cssV2-transfer-modal:not(.cssV2-merge) .cssV2-transfer-item { min-height:56px; }
.cssV2-transfer-modal:not(.cssV2-merge) .cssV2-transfer .cssV2-transfer-all { width:48px; height:48px; }
.cssV2-shell-actions.cssV2-transfer-actions { display:flex; gap:10px; }
.cssV2-transfer-actions .cssV2-shell-button { min-height:52px; border-radius:14px; }
.cssV2-transfer-actions .cssV2-shell-button.cssV2-secondary { flex:0 0 160px; border:0; background:var(--cssV2-bg-app); color:var(--cssV2-text-2); }
.cssV2-transfer-actions .cssV2-shell-button.cssV2-primary { flex:1; background:var(--cssV2-primary); color:var(--cssV2-text-inverse); }
.cssV2-transfer-return-all { align-self:center; margin:8px; }
.cssV2-modal-window.cssV2-shell-800 .modal-dialog { --cssV2-shell-max: 800px; }
.cssV2-transfer-whole-note { display:none; }
.cssV2-merge-preview { display:none; }

/* ---- M3b Task 2: Khách hàng mới (port SalesV2NewCustomerModal.razor.css, layout tablet) ---- */
.cssV2-modal-window.cssV2-shell-820 .modal-dialog { --cssV2-shell-max: 820px; }
.cssV2-modal-window:has(.cssV2-newcus) .modal-dialog { margin: 12px auto; }
.cssV2-modal-window:has(.cssV2-newcus) .modal-content { max-height: min(740px, calc(100vh - 24px)); }
.cssV2-newcus { display: flex; flex-direction: column; max-height: min(740px, calc(100vh - 24px)); background: var(--cssV2-bg-card); }
.cssV2-newcus .cssV2-shell-header { position: relative; flex-shrink: 0; align-items: flex-start; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--cssV2-border); }
.cssV2-newcus .cssV2-shell-header::before { content: ""; flex: none; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--cssV2-primary) 10%, var(--cssV2-bg-card)) center/22px no-repeat; }
.cssV2-newcus .cssV2-shell-header::after { content: ""; position: absolute; top: 27px; left: 31px; width: 22px; height: 22px; background: var(--cssV2-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 21c0-3.9 3.1-7 7-7 1.3 0 2.5.3 3.5.9M19 15v6M16 18h6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 21c0-3.9 3.1-7 7-7 1.3 0 2.5.3 3.5.9M19 15v6M16 18h6'/%3E%3C/svg%3E") center/contain no-repeat; }
.cssV2-newcus .cssV2-shell-heading { gap: 2px; }
.cssV2-newcus .cssV2-shell-heading h2 { color: var(--cssV2-text); font-size: 19px; }
.cssV2-newcus .cssV2-shell-heading p { color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-newcus .cssV2-shell-close { width: 40px; height: 40px; background: var(--cssV2-bg-app); color: var(--cssV2-text); }
.cssV2-newcus .cssV2-shell-body { flex: 1; min-height: 0; padding: 14px 16px 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--cssV2-bg-app); }
.cssV2-newcus .cssV2-shell-footer { flex-shrink: 0; padding: 12px 20px; border-top: 1px solid var(--cssV2-border); background: var(--cssV2-bg-card); }
.cssV2-newcus button, .cssV2-newcus input, .cssV2-newcus select, .cssV2-newcus textarea { font: inherit; }

.cssV2-newcus-modal { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--cssV2-text); }
.cssV2-nc-section { flex-shrink: 0; overflow: hidden; border: 1px solid var(--cssV2-border); border-radius: 14px; background: var(--cssV2-bg-card); }
.cssV2-nc-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 14px; border: 0; background: transparent; color: var(--cssV2-text); text-align: left; }
.cssV2-nc-head.cssV2-fixed { cursor: default; }
.cssV2-nc-abbr { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--cssV2-bg-app); color: var(--cssV2-text-2); font-size: 12px; font-weight: 700; }
.cssV2-nc-abbr.cssV2-nc-abbr-main { background: color-mix(in srgb, var(--cssV2-primary) 10%, var(--cssV2-bg-card)); color: var(--cssV2-primary); }
.cssV2-nc-abbr.cssV2-nc-abbr-vip { background: var(--cssV2-warning-bg); color: color-mix(in srgb, var(--cssV2-warning) 70%, var(--cssV2-text)); }
.cssV2-nc-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cssV2-nc-title strong { font-size: 14.5px; font-weight: 600; }
.cssV2-nc-title small { color: var(--cssV2-text-2); font-size: 12px; }
.cssV2-nc-chevron { flex: none; color: var(--cssV2-text-2); font-size: 16px; transition: transform .15s; }
.cssV2-nc-head[aria-expanded="true"] .cssV2-nc-chevron { transform: rotate(180deg); }
.cssV2-nc-section.cssV2-nc-vip.cssV2-on { border-color: var(--cssV2-warning); }
.cssV2-nc-section.cssV2-nc-vip.cssV2-on .cssV2-nc-head { background: var(--cssV2-warning-bg); }
.cssV2-nc-switch { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--cssV2-border-strong); transition: background .15s; }
.cssV2-nc-switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.cssV2-nc-section.cssV2-nc-vip.cssV2-on .cssV2-nc-switch { background: var(--cssV2-primary); }
.cssV2-nc-section.cssV2-nc-vip.cssV2-on .cssV2-nc-switch span { left: 21px; }

.cssV2-nc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 14px; padding: 4px 14px 14px; }
.cssV2-nc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cssV2-nc-field.cssV2-wide, .cssV2-nc-field.cssV2-nc-checks { grid-column: 1/-1; }
.cssV2-nc-field > span:first-child, .cssV2-nc-field > label { color: var(--cssV2-text); font-size: 13px; font-weight: 600; }
.cssV2-nc-field b { color: var(--cssV2-error); font-weight: 600; }
.cssV2-nc-field input, .cssV2-nc-field select, .cssV2-nc-field textarea { box-sizing: border-box; width: 100%; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--cssV2-border-strong); border-radius: 10px; background: var(--cssV2-bg-input, var(--cssV2-bg-card)); color: var(--cssV2-text); font-size: 15px; outline: none; }
.cssV2-nc-field select { padding: 0 10px; }
.cssV2-nc-field textarea { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; }
.cssV2-nc-field input:focus, .cssV2-nc-field select:focus, .cssV2-nc-field textarea:focus { border-color: var(--cssV2-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cssV2-primary) 15%, transparent); }
.cssV2-nc-field .cssV2-invalid { border-color: var(--cssV2-error); }
.cssV2-nc-field input[readonly] { background: var(--cssV2-bg-app); color: var(--cssV2-text-2); }
.cssV2-nc-error { color: var(--cssV2-error); font-size: 12px; }
.cssV2-nc-group { display: flex; gap: 8px; }
.cssV2-nc-group select { flex: 1; }
.cssV2-newcus .cssV2-nc-add-group { flex: none; height: 46px; padding: 0 12px; border: 1px dashed color-mix(in srgb, var(--cssV2-primary) 50%, var(--cssV2-bg-card)); border-radius: 10px; background: color-mix(in srgb, var(--cssV2-primary) 6%, var(--cssV2-bg-card)); color: var(--cssV2-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.cssV2-nc-suffix { position: relative; display: block; }
.cssV2-nc-suffix input { padding-right: 36px; font-variant-numeric: tabular-nums; }
.cssV2-nc-suffix input.cssV2-money { text-align: right; }
.cssV2-nc-suffix em { position: absolute; top: 50%; right: 12px; color: var(--cssV2-text-2); font-size: 13px; font-style: normal; font-weight: 600; transform: translateY(-50%); pointer-events: none; }
.cssV2-nc-checks { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.cssV2-newcus .cssV2-nc-check { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border: 1px solid var(--cssV2-border-strong); border-radius: 10px; background: var(--cssV2-bg-card); color: var(--cssV2-text); font-size: 14px; }
.cssV2-nc-box { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--cssV2-border-strong); border-radius: 6px; background: var(--cssV2-bg-card); color: var(--cssV2-text-inverse); font-size: 14px; line-height: 1; }
.cssV2-newcus .cssV2-nc-check[aria-checked="true"] .cssV2-nc-box { border-color: var(--cssV2-primary); background: var(--cssV2-primary); }

.cssV2-nc-status { margin: 0 0 10px; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-nc-status:empty { display: none; }
.cssV2-nc-status.cssV2-error { color: var(--cssV2-error); }
.cssV2-shell-actions.cssV2-newcus-actions { display: flex; align-items: center; justify-content: stretch; gap: 10px; }
.cssV2-newcus-actions .cssV2-nc-spacer { flex: 1; }
.cssV2-newcus-actions .cssV2-shell-button { height: 46px; min-height: 0; padding: 0 18px; border-radius: 12px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.cssV2-newcus-actions .cssV2-shell-button.cssV2-nc-exit, .cssV2-newcus-actions .cssV2-shell-button.cssV2-nc-reset { border: 1px solid var(--cssV2-border-strong); background: var(--cssV2-bg-card); color: var(--cssV2-text); }
.cssV2-newcus-actions .cssV2-shell-button.cssV2-nc-save-new { border: 1.5px solid var(--cssV2-primary); background: var(--cssV2-bg-card); color: var(--cssV2-primary); }
.cssV2-newcus-actions .cssV2-shell-button.cssV2-nc-save { padding: 0 22px; border: 0; background: var(--cssV2-primary); color: var(--cssV2-text-inverse); font-weight: 700; }
.cssV2-newcus :disabled { opacity: .6; }

/* Nhóm khách hàng mới (modal con) */
.cssV2-nc-category { display: grid; gap: 10px; min-width: 0; color: var(--cssV2-text); }
.cssV2-nc-category label { display: grid; gap: 4px; font-size: 13px; color: var(--cssV2-text-2); }
.cssV2-nc-category input, .cssV2-nc-category textarea { min-width: 0; min-height: 44px; padding: 8px; border: 1px solid var(--cssV2-border); border-radius: 8px; background: var(--cssV2-bg-input); color: var(--cssV2-text); font: inherit; font-size: 16px; }
.cssV2-nc-category textarea { min-height: 64px; resize: vertical; }
.cssV2-nc-category p[role="status"] { margin: 0; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-nc-category p[role="status"]:empty { display: none; }
.cssV2-nc-category :disabled { opacity: .6; }

/* ChiTietHoaDonV2: nút Thêm khách */
.cssV2-header-row > .cssV2-header-add { display: flex; flex-shrink: 0; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 1px dashed color-mix(in srgb, var(--cssV2-primary) 40%, var(--cssV2-bg-card)); border-radius: 10px; background: color-mix(in srgb, var(--cssV2-primary) 6%, var(--cssV2-bg-card)); color: var(--cssV2-primary); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; }
.cssV2-header-row > .cssV2-header-add:disabled { opacity: .6; }

/* ===== Ứng tiền trước (port SalesCustomerAdvanceModal.razor.css; bỏ history/card/phone) ===== */
.cssV2-modal-window.cssV2-shell-600 .modal-dialog { --cssV2-shell-max: 600px; }
.cssV2-advance button { font: inherit; }
.cssV2-advance .cssV2-shell-header { flex-shrink:0; padding:20px 24px 16px; border-bottom:1px solid var(--cssV2-divider, var(--cssV2-border)); }
.cssV2-advance .cssV2-shell-heading { gap:6px; }
.cssV2-advance .cssV2-shell-heading h2 { color:var(--cssV2-text); font-size:19px; }
.cssV2-advance .cssV2-shell-heading p { color:var(--cssV2-text-2); font-size:13px; }
.cssV2-advance .cssV2-shell-close { width:36px; height:36px; border-radius:10px; background:var(--cssV2-bg-app); color:var(--cssV2-text-2); }
.cssV2-advance .cssV2-shell-body { flex:1; min-height:0; padding:20px 24px 24px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.cssV2-advance .cssV2-shell-footer { flex-shrink:0; padding:14px 24px; border-top:1px solid var(--cssV2-divider, var(--cssV2-border)); background:var(--cssV2-bg-app); }
.cssV2-advance-form { display:flex; flex-direction:column; gap:16px; color:var(--cssV2-text); }
.cssV2-advance-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px 16px; }
.cssV2-advance-field { display:flex; flex-direction:column; gap:6px; min-width:0; margin:0; }
.cssV2-advance-field > span { color:var(--cssV2-text-2); font-size:13px; font-weight:500; }
.cssV2-advance-field > span b { color:var(--cssV2-error); font-weight:600; }
.cssV2-advance-field input, .cssV2-advance-field select, .cssV2-advance-field textarea { box-sizing:border-box; width:100%; min-width:0; border:1px solid var(--cssV2-border-strong); border-radius:10px; background:var(--cssV2-bg-input, var(--cssV2-bg-card)); color:var(--cssV2-text); font:inherit; font-size:14px; outline:none; }
.cssV2-advance-field input, .cssV2-advance-field select { height:44px; padding:0 12px; }
.cssV2-advance-field textarea { min-height:80px; padding:10px 12px; line-height:1.5; resize:vertical; }
.cssV2-advance-field input:focus, .cssV2-advance-field select:focus, .cssV2-advance-field textarea:focus { border-color:var(--cssV2-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--cssV2-primary) 15%, transparent); }
.cssV2-advance-field :disabled { opacity:.7; }
.cssV2-advance-field .cssV2-invalid { border-color:var(--cssV2-error); }
.cssV2-advance-field-error { color:var(--cssV2-error); font-size:12px; }
.cssV2-advance-select { position:relative; display:block; }
.cssV2-advance-select select { padding-right:36px; appearance:none; -webkit-appearance:none; }
.cssV2-advance-select i { position:absolute; top:50%; right:13px; color:var(--cssV2-text-2); font-size:12px; transform:translateY(-50%); pointer-events:none; }
.cssV2-advance-amount { display:flex; flex-direction:column; gap:10px; padding:16px; border:1px solid color-mix(in srgb, var(--cssV2-primary) 18%, var(--cssV2-bg-card)); border-radius:12px; background:color-mix(in srgb, var(--cssV2-primary) 5%, var(--cssV2-bg-card)); }
.cssV2-advance-amount .cssV2-advance-field > span { color:color-mix(in srgb, var(--cssV2-primary) 70%, var(--cssV2-text)); font-weight:600; }
.cssV2-advance-amount .cssV2-advance-field input.cssV2-money { height:52px; padding:0 14px; border-color:color-mix(in srgb, var(--cssV2-primary) 30%, var(--cssV2-bg-card)); font-size:22px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.cssV2-advance-amount .cssV2-advance-field input.cssV2-money.cssV2-invalid { border-color:var(--cssV2-error); }
.cssV2-advance-quick { display:flex; flex-wrap:wrap; gap:6px; }
.cssV2-advance-quick button { height:34px; padding:0 12px; border:1px solid color-mix(in srgb, var(--cssV2-primary) 30%, var(--cssV2-bg-card)); border-radius:999px; background:var(--cssV2-bg-card); color:var(--cssV2-primary); font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
.cssV2-advance-quick button:disabled { opacity:.6; }
.cssV2-advance-quick button.cssV2-active { border-color:var(--cssV2-primary); background:var(--cssV2-primary); color:var(--cssV2-text-inverse); }
.cssV2-advance-totals { display:flex; flex-direction:column; margin-top:4px; border-top:1px solid color-mix(in srgb, var(--cssV2-primary) 18%, var(--cssV2-bg-card)); }
.cssV2-advance-totals > div { display:flex; justify-content:space-between; gap:12px; padding-top:10px; font-size:14px; }
.cssV2-advance-totals > div > span { color:var(--cssV2-text-2); }
.cssV2-advance-totals strong { font-weight:600; font-variant-numeric:tabular-nums; }
.cssV2-advance-totals > div.cssV2-remain { padding-top:8px; color:color-mix(in srgb, var(--cssV2-primary) 70%, var(--cssV2-text)); font-size:15px; font-weight:700; }
.cssV2-advance-totals > div.cssV2-remain > span { color:inherit; }
.cssV2-advance-totals > div.cssV2-remain strong { font-weight:700; }
.cssV2-advance-status { margin:0; color:var(--cssV2-text-2); }
.cssV2-advance-error { margin:0; color:var(--cssV2-error); font-size:13px; }
.cssV2-advance-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cssV2-advance-success { display:flex; align-items:center; gap:8px; min-width:0; margin:0; color:var(--cssV2-success); font-size:13px; font-weight:600; }
.cssV2-advance-actions { display:flex; gap:10px; margin-left:auto; }
.cssV2-advance-actions button { display:flex; align-items:center; justify-content:center; gap:6px; height:42px; padding:0 18px; border-radius:10px; font-size:14px; font-weight:600; white-space:nowrap; }
.cssV2-advance-actions .cssV2-advance-close { border:1px solid var(--cssV2-border-strong); background:var(--cssV2-bg-card); color:var(--cssV2-text); }
.cssV2-advance-actions .cssV2-advance-new { border:1px solid color-mix(in srgb, var(--cssV2-primary) 30%, var(--cssV2-bg-card)); background:color-mix(in srgb, var(--cssV2-primary) 5%, var(--cssV2-bg-card)); color:var(--cssV2-primary); }
.cssV2-advance-actions .cssV2-advance-save { padding:0 22px; border:0; background:var(--cssV2-primary); color:var(--cssV2-text-inverse); font-size:15px; }
.cssV2-advance-actions button:disabled { opacity:.6; }
.cssV2-advance-fields { display: flex; flex-direction: column; gap: 16px; }

/* ===== Khách thanh toán (port SalesV2PaymentModal.razor.css, layout tablet) ===== */
.cssV2-modal-window.cssV2-shell-760 .modal-dialog { --cssV2-shell-max: 760px; margin:12px auto; }
.cssV2-modal-window.cssV2-shell-760 .modal-content { max-height:min(720px, calc(100vh - 24px)); }
.cssV2-payment { position: relative; }
:where(.cssV2-payment) button, :where(.cssV2-payment) input { font: inherit; }
.cssV2-payment .cssV2-shell-header { flex-shrink:0; padding:16px 24px 10px; }
.cssV2-payment .cssV2-shell-heading h2 { color:var(--cssV2-text); font-size:20px; }
.cssV2-payment .cssV2-shell-close { width:40px; height:40px; background:var(--cssV2-bg-app); color:var(--cssV2-text-2); }
.cssV2-payment .cssV2-shell-body { flex:1; min-height:0; padding:0 24px 8px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.cssV2-payment .cssV2-shell-footer { flex-shrink:0; padding:12px 24px 14px; border-top:1px solid var(--cssV2-divider, var(--cssV2-border)); }
.cssV2-payment-modal { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:20px; color:var(--cssV2-text); }
.cssV2-payment-col { display:flex; flex-direction:column; gap:11px; min-width:0; }
.cssV2-payment-section { display:flex; flex-direction:column; gap:8px; min-width:0; }
.cssV2-payment-label { color:var(--cssV2-text-2); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.cssV2-payment-due { display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid color-mix(in srgb, var(--cssV2-primary) 18%, var(--cssV2-bg-card)); border-radius:16px; background:color-mix(in srgb, var(--cssV2-primary) 5%, var(--cssV2-bg-card)); }
.cssV2-payment-due span { color:var(--cssV2-text-2); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.cssV2-payment-due strong { color:var(--cssV2-error); font-size:38px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.cssV2-payment-customer { display:flex; gap:8px; }
.cssV2-payment .cssV2-payment-add-customer { flex:0 0 52px; height:52px; border:0; border-radius:12px; background:var(--cssV2-success); color:var(--cssV2-text-inverse); font-size:22px; }
.cssV2-payment-advance { display:flex; align-items:center; gap:10px; min-height:52px; padding:0 6px 0 14px; border-radius:12px; background:var(--cssV2-bg-app); }
.cssV2-payment-advance > span { display:flex; flex:1; flex-direction:column; min-width:0; }
.cssV2-payment-advance small { color:var(--cssV2-text-2); font-size:14px; }
.cssV2-payment-advance strong { color:var(--cssV2-success); font-size:15px; font-variant-numeric:tabular-nums; }
.cssV2-payment-advance button { width:40px; height:40px; border:0; border-radius:10px; background:var(--cssV2-primary); color:var(--cssV2-text-inverse); font-size:20px; }
.cssV2-payment-change { display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:16px; background:var(--cssV2-success-bg); }
.cssV2-payment-change span { color:var(--cssV2-text-2); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.cssV2-payment-change strong { color:var(--cssV2-success); font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; }
.cssV2-payment-change.cssV2-short { background:var(--cssV2-error-bg); }
.cssV2-payment-change.cssV2-short strong { color:var(--cssV2-error); }
.cssV2-payment-change { margin-top:auto; }
.cssV2-payment-method-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cssV2-payment .cssV2-payment-link { padding:4px 0; border:0; background:none; color:var(--cssV2-primary); font-size:12px; font-weight:600; }
.cssV2-payment .cssV2-payment-link.cssV2-default { color:var(--cssV2-warning); }
/* Tablet/desktop: 2 rows, 4 types visible per row; more types scroll sideways instead of a 3rd row. */
.cssV2-payment-methods { display:grid; grid-template-columns:repeat(var(--cssV2-method-columns,4), calc((100% - 18px) / 4)); gap:6px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--cssV2-border-strong) transparent; }
.cssV2-payment-methods::-webkit-scrollbar { height:8px; }
.cssV2-payment-methods::-webkit-scrollbar-track { background:transparent; }
.cssV2-payment-methods::-webkit-scrollbar-thumb { border-radius:999px; background:var(--cssV2-border-strong); }
.cssV2-payment-methods button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:52px; padding:6px 3px; border:1.5px solid var(--cssV2-border); border-radius:12px; background:var(--cssV2-bg-card); color:var(--cssV2-text); }
.cssV2-payment-methods button.cssV2-active { border-color:var(--cssV2-primary); background:var(--cssV2-primary); color:var(--cssV2-text-inverse); }
.cssV2-payment-methods i { font-size:16px; }
.cssV2-payment-methods span { display:-webkit-box; max-width:100%; overflow:hidden; font-size:11.5px; font-weight:600; line-height:1.15; text-align:center; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.cssV2-payment-star { position:absolute; top:3px; right:6px; color:var(--cssV2-warning); font-size:10px; }
.cssV2-payment .cssV2-payment-qr { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border:1.5px solid var(--cssV2-warning); border-radius:12px; background:var(--cssV2-warning-bg); color:color-mix(in srgb, var(--cssV2-warning) 70%, var(--cssV2-text)); font-size:14px; font-weight:700; }
.cssV2-payment-received { box-sizing:border-box; width:100%; height:56px; padding:0 16px; border:1.5px solid var(--cssV2-primary); border-radius:12px; background:var(--cssV2-bg-input, var(--cssV2-bg-card)); color:var(--cssV2-text); font-size:24px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; outline:none; }
.cssV2-payment-keypad button.cssV2-quick { min-width:0; height:40px; border:1px solid var(--cssV2-border); border-radius:10px; background:var(--cssV2-bg-card); color:var(--cssV2-text); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cssV2-payment-keypad button.cssV2-quick.cssV2-active { border-color:var(--cssV2-primary); background:color-mix(in srgb, var(--cssV2-primary) 10%, var(--cssV2-bg-card)); color:var(--cssV2-primary); }
.cssV2-payment-keypad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr); gap:6px; }
.cssV2-payment-keypad button { min-width:0; height:40px; border:1px solid var(--cssV2-bg-app); border-radius:10px; background:var(--cssV2-bg-app); color:var(--cssV2-text); font-size:18px; font-weight:600; }
.cssV2-payment-keypad button.cssV2-erase { color:var(--cssV2-error); }
.cssV2-payment-hint { margin:0; color:var(--cssV2-text-2); font-size:13px; }
.cssV2-payment-error { margin:0; color:var(--cssV2-error); font-size:13px; }
.cssV2-payment-modal :disabled, .cssV2-payment-actions :disabled { opacity:.6; }
.cssV2-shell-actions.cssV2-payment-actions { display:flex; gap:8px; }
.cssV2-payment-actions .cssV2-shell-button { min-height:52px; border-radius:14px; }
.cssV2-payment-actions .cssV2-payment-exit { flex:0 0 110px; border:1.5px solid var(--cssV2-border-strong); background:var(--cssV2-bg-card); color:var(--cssV2-text); font-weight:600; }
.cssV2-payment-actions .cssV2-payment-save { flex:1; border:1.5px solid var(--cssV2-primary); background:var(--cssV2-bg-card); color:var(--cssV2-primary); font-weight:700; }
.cssV2-payment-actions .cssV2-payment-print { flex:1.6; background:var(--cssV2-primary); color:var(--cssV2-text-inverse); font-weight:700; }
.cssV2-payment-print-note { margin:8px 0 0; color:var(--cssV2-text-2); font-size:12px; text-align:center; }
.cssV2-payment-busy-overlay { position:fixed; inset:0; z-index:110012; display:grid; place-items:center; background:rgba(12,18,28,.26); }
.cssV2-payment-busy-card { display:flex; align-items:center; gap:12px; max-width:calc(100vw - 32px); padding:18px 22px; border-radius:12px; background:var(--cssV2-bg-card); color:var(--cssV2-text); box-shadow:0 12px 32px rgba(0,0,0,.18); font-weight:600; }
.cssV2-payment-spinner { width:24px; height:24px; flex:none; border:3px solid var(--cssV2-border); border-top-color:var(--cssV2-primary); border-radius:50%; animation:cssV2-payment-spin .75s linear infinite; }
@keyframes cssV2-payment-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .cssV2-payment-spinner { animation:none; } }
.cssV2-payment-keyrow { display: contents; }
.cssV2-payment-customer > .cssV2-cp { flex: 1; min-width: 0; }
@media (max-height:700px) and (min-width:601px) {
    .cssV2-payment-col { gap:8px; }
    .cssV2-payment-section { gap:6px; }
    .cssV2-payment-methods { grid-auto-rows:56px; }
    .cssV2-payment-methods button { min-height:0; height:56px; gap:2px; padding:3px; }
    .cssV2-payment .cssV2-payment-qr { min-height:40px; }
    .cssV2-payment-received { height:52px; }
    .cssV2-payment-keypad { gap:4px; }
}
@media (max-height:640px) and (min-width:601px) {
    .cssV2-payment .cssV2-shell-header { padding:12px 24px 6px; }
    .cssV2-payment .cssV2-shell-footer { padding:8px 24px; }
    .cssV2-payment-methods { display:flex; }
    .cssV2-payment-methods button { flex:0 0 calc((100% - 18px) / 4); }
}

/* ===== Ca (M4): khai báo tiền đầu ca / báo cáo kết ca — bộ đếm mệnh giá dùng chung ===== */
.cssV2-cash-status { margin: 0; padding: 18px 0; text-align: center; color: var(--cssV2-text-2); }
.cssV2-cash .cssV2-cash-retry { margin-left: 6px; padding: 6px 12px; border: 0; border-radius: 10px; background: var(--cssV2-primary); color: var(--cssV2-text-inverse); font-size: 14px; font-weight: 600; }
.cssV2-cash-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cssV2-cash-head h3 { margin: 0; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--cssV2-text); }
.cssV2-cash .cssV2-cash-reset { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(15,23,42,.06); color: #344054; font-size: 13px; font-weight: 600; }
.cssV2-cash-row { display: grid; grid-template-columns: 84px 40px 76px 40px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--cssV2-divider); }
.cssV2-cash-denom { font-size: 15px; font-weight: 700; color: var(--cssV2-text); }
.cssV2-cash .cssV2-cash-step { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: var(--cssV2-primary-bg); color: var(--cssV2-primary); font-size: 16px; }
.cssV2-cash .cssV2-cash-step:disabled { opacity: .5; }
.cssV2-cash .cssV2-cash-input { width: 100%; height: 40px; padding: 0 8px; border: 1px solid var(--cssV2-border-strong); border-radius: 10px; background: var(--cssV2-bg-input); color: var(--cssV2-text); font-size: 16px; font-weight: 600; text-align: center; }
.cssV2-cash .cssV2-cash-input:focus { outline: none; border-color: var(--cssV2-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cssV2-primary) 15%, transparent); }
.cssV2-cash-amount { min-width: 0; text-align: right; font-size: 14px; font-weight: 600; color: var(--cssV2-text-2); white-space: nowrap; }
.cssV2-cash-error { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--cssV2-error-bg); color: var(--cssV2-error); font-size: 13px; font-weight: 600; }
.cssV2-cash-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; padding: 10px 12px; border-radius: 14px; background: var(--cssV2-primary-bg); }
.cssV2-cash-total span { display: block; font-size: 14px; font-weight: 700; }
.cssV2-cash-total small { color: var(--cssV2-text-2); font-size: 12px; }
.cssV2-cash-total strong { color: var(--cssV2-primary); font-size: 20px; font-weight: 800; }
.cssV2-cash-state { margin: 0 0 10px; color: var(--cssV2-text-2); font-size: 13px; text-align: center; }
.cssV2-cash .cssV2-shell-actions.cssV2-single { grid-template-columns: minmax(0, 220px); }
/* chặn bán khi chưa khai báo ca */
.cssV2-shift-notice { margin: 8px 12px 0; padding: 9px 12px; border-radius: 10px; background: var(--cssV2-warning-bg); color: #92400E; font-size: 14px; font-weight: 700; }
/* ===== Báo cáo kết ca (M4) ===== */
.cssV2-kc-banner { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: var(--cssV2-warning-bg); color: #92400E; font-size: 13px; font-weight: 600; }
.cssV2-kc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 12px; background: rgba(15,23,42,.06); }
.cssV2-kc .cssV2-kc-tabs button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--cssV2-text-2); font-size: 14px; font-weight: 600; }
.cssV2-kc .cssV2-kc-tabs button.cssV2-active { background: var(--cssV2-bg-card); color: var(--cssV2-primary); box-shadow: var(--cssV2-shadow-sm); }
.cssV2-kc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.cssV2-kc-kpi { padding: 12px; border-radius: 14px; background: var(--cssV2-primary-bg); }
.cssV2-kc-kpi span { display: block; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-kc-kpi strong { color: var(--cssV2-primary); font-size: 20px; font-weight: 800; }
.cssV2-kc-card { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--cssV2-border); border-radius: 14px; }
.cssV2-kc-card h3 { margin: 0 0 4px; font-family: inherit; font-size: 15px; font-weight: 700; }
.cssV2-kc-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; }
.cssV2-kc-line span { color: var(--cssV2-text-2); }
.cssV2-kc-line b { color: var(--cssV2-text); font-weight: 700; }
.cssV2-kc-line.cssV2-kc-sum { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--cssV2-border-strong); }
.cssV2-kc-diff { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--cssV2-success-bg); }
.cssV2-kc-diff.cssV2-short { background: var(--cssV2-error-bg); }
.cssV2-kc-diff.cssV2-over { background: var(--cssV2-warning-bg); }
.cssV2-kc-diff .cssV2-kc-result { font-size: 16px; }
.cssV2-kc-diff .cssV2-kc-result span, .cssV2-kc-diff .cssV2-kc-result b { color: var(--cssV2-success); font-weight: 800; }
.cssV2-kc-diff.cssV2-short .cssV2-kc-result span, .cssV2-kc-diff.cssV2-short .cssV2-kc-result b { color: var(--cssV2-error); }
.cssV2-kc-diff.cssV2-over .cssV2-kc-result span, .cssV2-kc-diff.cssV2-over .cssV2-kc-result b { color: #B45309; }
.cssV2-kc-diff p { margin: 4px 0 0; font-size: 13px; color: var(--cssV2-text-2); }

/* ===== Modal Tính tiền giờ (M4) ===== */
.cssV2-modal-window.cssV2-shell-500 .modal-dialog { --cssV2-shell-max: 500px; }
.cssV2-tg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cssV2-tg-group { padding: 10px 12px; border: 1px solid var(--cssV2-border); border-radius: 14px; }
.cssV2-tg-group h3, .cssV2-tg-log h3 { margin: 0 0 8px; font-family: inherit; font-size: 15px; font-weight: 700; }
.cssV2-tg-time { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cssV2-tg .cssV2-tg-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.cssV2-tg .cssV2-tg-field span { color: var(--cssV2-text-2); font-size: 13px; font-weight: 500; }
.cssV2-tg .cssV2-tg-field input { width: 100%; height: 40px; padding: 0 8px; border: 1px solid var(--cssV2-border-strong); border-radius: 10px; background: var(--cssV2-bg-input); color: var(--cssV2-text); font-size: 15px; }
.cssV2-tg .cssV2-tg-field input:disabled { background: rgba(15,23,42,.04); opacity: .8; }
.cssV2-tg .cssV2-tg-field input:focus { outline: none; border-color: var(--cssV2-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cssV2-primary) 15%, transparent); }
.cssV2-tg-error { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--cssV2-error-bg); color: var(--cssV2-error); font-size: 13px; font-weight: 600; }
.cssV2-tg-log { margin-top: 14px; }
.cssV2-tg-log table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cssV2-tg-log th { padding: 4px 6px; color: var(--cssV2-text-2); font-weight: 600; text-align: left; border-bottom: 1px solid var(--cssV2-border); }
.cssV2-tg-log td { padding: 5px 6px; border-bottom: 1px solid var(--cssV2-divider); }
.cssV2-tg-note { margin: 0; color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-tg-note.cssV2-tg-bad { color: var(--cssV2-error); }
.cssV2-tg-log-list { height:194px; overflow:auto; border:1px solid var(--cssV2-border); border-radius:10px; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.cssV2-tg-log-list table { table-layout:fixed; }
.cssV2-tg-log-list th, .cssV2-tg-log-list td { height:32px; padding:6px 8px; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cssV2-tg-log-list th { position:sticky; top:0; background:var(--cssV2-bg-card); }
.cssV2-tg-log-list th:first-child { width:20%; }
.cssV2-tg-log-list th:nth-child(2) { width:24%; }
.cssV2-tg-log-list .cssV2-tg-note { padding:10px; }
.cssV2-tg-log-list tbody tr:nth-child(even) { background:var(--cssV2-primary-bg); }
.cssV2-tg-log-list::-webkit-scrollbar { width:5px; height:5px; }
.cssV2-tg-log-list::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:999px; }


/* ===== Modal In nhãn (M4) ===== */
.cssV2-modal-window.cssV2-shell-640 .modal-dialog { --cssV2-shell-max: 640px; }
.cssV2-label-note { margin: 0; padding: 18px 0; text-align: center; color: var(--cssV2-text-2); }
.cssV2-label-note.cssV2-label-bad { color: var(--cssV2-error); }
.cssV2-label .cssV2-label-retry { margin-left: 6px; padding: 6px 12px; border: 0; border-radius: 10px; background: var(--cssV2-primary); color: var(--cssV2-text-inverse); font-size: 14px; font-weight: 600; }
.cssV2-label-list { display: grid; gap: 8px; }
.cssV2-label .cssV2-label-card { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--cssV2-border); border-radius: 12px; background: var(--cssV2-bg-card); font-weight: 400; cursor: pointer; }
.cssV2-label .cssV2-label-card.cssV2-selected { border-color: var(--cssV2-primary); }
.cssV2-label .cssV2-label-card input { flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0; }
.cssV2-label-main { display: grid; flex: 1; min-width: 0; gap: 7px; }
.cssV2-label-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cssV2-label-line strong { min-width:0; overflow-wrap:anywhere; font-size: 14px; font-weight: 700; }
.cssV2-label-line b { flex-shrink:0; color: var(--cssV2-primary); font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric:tabular-nums; }
.cssV2-label-details { display:flex; align-items:baseline; gap:5px; font-size:12px; font-variant-numeric:tabular-nums; }
.cssV2-label-details > span { color:var(--cssV2-text-2); }
.cssV2-label-toppings { display:grid; gap:4px; padding:2px 0 0 13px; }
.cssV2-label-topping { display:flex; justify-content:space-between; gap:8px; color:var(--cssV2-text-2); font-size:12px; font-variant-numeric:tabular-nums; }
.cssV2-label-topping > span:first-child { min-width:0; overflow-wrap:anywhere; }
.cssV2-label-topping > span:last-child { flex-shrink:0; }
.cssV2-label-topping small { font-size:inherit; }
.cssV2-label-busy { margin-top: 12px; padding: 10px; border-radius: 12px; background: var(--cssV2-primary-bg); color: var(--cssV2-primary); font-weight: 700; text-align: center; }

/* ===== Modal Thêm hàng hóa (M4) ===== */
.cssV2-modal-window:has(.cssV2-item) .modal-dialog { margin-top: 12px; margin-bottom: 12px; }
.cssV2-modal-window:has(.cssV2-item) .modal-content { max-height: min(740px, calc(100vh - 24px)); }
.cssV2-item-status { margin: 0; padding: 18px 0; text-align: center; color: var(--cssV2-text-2); }
.cssV2-item-status.cssV2-item-bad { color: var(--cssV2-error); }
.cssV2-item .cssV2-item-retry { margin-left: 6px; padding: 6px 12px; border: 0; border-radius: 10px; background: var(--cssV2-primary); color: var(--cssV2-text-inverse); font-size: 14px; font-weight: 600; }
.cssV2-item-form { display: grid; gap: 12px; }
.cssV2-item-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cssV2-item .cssV2-item-types label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border: 1.5px solid var(--cssV2-border); border-radius: 14px; font-weight: 400; cursor: pointer; }
.cssV2-item .cssV2-item-types label.cssV2-selected { border-color: var(--cssV2-primary); background: var(--cssV2-primary-bg); }
.cssV2-item-types input { flex-shrink: 0; margin: 0; }
.cssV2-item-types span { display: grid; }
.cssV2-item-types strong { font-size: 14px; font-weight: 700; }
.cssV2-item-types small { color: var(--cssV2-text-2); font-size: 12px; }
.cssV2-item-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; }
.cssV2-item .cssV2-item-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; font-weight: 400; }
.cssV2-item .cssV2-item-field > span:first-child { color: var(--cssV2-text-2); font-size: 13px; font-weight: 500; }
.cssV2-item .cssV2-item-field > span:first-child b { color: var(--cssV2-error); font-weight: 600; }
.cssV2-item .cssV2-item-field input, .cssV2-item .cssV2-item-field select { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--cssV2-border-strong); border-radius: 10px; background: var(--cssV2-bg-input); color: var(--cssV2-text); font-size: 15px; }
.cssV2-item .cssV2-item-field input:focus, .cssV2-item .cssV2-item-field select:focus { outline: none; border-color: var(--cssV2-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cssV2-primary) 15%, transparent); }
.cssV2-item .cssV2-item-field .cssV2-invalid { border-color: var(--cssV2-error); }
.cssV2-item-code { position: relative; display: block; }
.cssV2-item .cssV2-item-code input { padding-right: 42px; }
.cssV2-item-type-label { color: var(--cssV2-text-2); font-size: 13px; }
.cssV2-item .cssV2-item-auto { position: absolute; right: 4px; top: 4px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--cssV2-primary-bg); color: var(--cssV2-primary); font-size: 13px; font-weight: 600; }
.cssV2-item-price { position: relative; display: block; }
.cssV2-item .cssV2-item-price input { padding-right: 30px; text-align: right; }
.cssV2-item-price em { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--cssV2-text-2); font-style: normal; }
.cssV2-item-error { color: var(--cssV2-error); font-size: 12px; }
.cssV2-item-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.cssV2-item .cssV2-item-quick button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(15,23,42,.06); color: #344054; font-size: 14px; font-weight: 600; }
.cssV2-item-footer { margin: 0 0 10px; color: var(--cssV2-text-2); font-size: 13px; text-align: center; }

/* ===== Video hướng dẫn (M4) ===== */
.cssV2-video .cssV2-video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }
.cssV2-video .cssV2-shell-actions.cssV2-single { grid-template-columns: minmax(0, 220px); }

/* Báo cáo kết ca: bố cục tablet theo SalesV2EndShiftModal. */
.cssV2-modal-window:has(.cssV2-kc) .modal-dialog { width:min(880px, calc(100vw - 32px)); margin:24px auto; }
.cssV2-modal-window:has(.cssV2-kc) .modal-content { height:min(860px, calc(100vh - 48px)); max-height:min(860px, calc(100vh - 48px)); border-radius:16px; }
.cssV2-kc { flex:1; min-height:0; }
.cssV2-kc .cssV2-shell-header { flex-shrink:0; padding:20px 24px 16px; border-bottom:1px solid var(--cssV2-border); }
.cssV2-kc .cssV2-shell-heading h2 { font-size:19px; }
.cssV2-kc .cssV2-shell-heading p { font-size:13px; }
.cssV2-kc .cssV2-shell-body { flex:1; min-height:0; padding:20px 24px 24px; overflow:auto; }
.cssV2-kc .cssV2-shell-footer { flex-shrink:0; padding:14px 24px; border-top:1px solid var(--cssV2-border); background:var(--cssV2-bg-app); }
.cssV2-kc-tabs { display:none; }
.cssV2-kc-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:20px; }
.cssV2-kc-panel { display:flex; flex-direction:column; gap:14px; min-width:0; }
.cssV2-kc-banner { margin:0 0 16px; padding:12px 14px; font-weight:400; color:var(--cssV2-text); }
.cssV2-kc-kpis { margin:0; }
.cssV2-kc-kpi { padding:12px 14px; border-radius:10px; background:var(--cssV2-bg-app); }
.cssV2-kc-kpi span { font-size:12px; }
.cssV2-kc-kpi strong { color:var(--cssV2-text); font-weight:700; }
.cssV2-kc-card { margin:0; padding:0; border-radius:12px; overflow:hidden; }
.cssV2-kc-card h3 { margin:0; padding:10px 14px; background:var(--cssV2-bg-app); color:var(--cssV2-text-2); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.cssV2-kc-line { padding:10px 14px; border-top:1px solid var(--cssV2-border); }
.cssV2-kc-line b { font-weight:400; font-variant-numeric:tabular-nums; }
.cssV2-kc-line.cssV2-kc-sum { margin:0; padding:10px 14px; border-top:1px solid var(--cssV2-border); background:var(--cssV2-bg-app); }
.cssV2-kc-sum b { font-weight:600; }
.cssV2-kc .cssV2-cash-head { margin:0; }
.cssV2-kc .cssV2-cash-head h3 { margin:0; font-size:12px; color:var(--cssV2-text-2); text-transform:uppercase; letter-spacing:.06em; }
.cssV2-kc-counts { border:1px solid var(--cssV2-border); border-radius:12px; overflow:hidden; }
.cssV2-kc .cssV2-cash-row { grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:8px 10px 8px 14px; border-bottom:0; border-top:1px solid var(--cssV2-border); background:var(--cssV2-bg-app); }
.cssV2-kc .cssV2-cash-row:first-child { border-top:0; }
.cssV2-kc .cssV2-cash-row.cssV2-filled { background:var(--cssV2-bg-card); }
.cssV2-kc .cssV2-cash-denom { display:flex; flex-direction:column; gap:1px; }
.cssV2-kc .cssV2-cash-denom strong { font-size:14px; font-weight:600; }
.cssV2-kc .cssV2-cash-denom small { font-size:12px; color:var(--cssV2-text-2); font-weight:400; }
.cssV2-kc-stepper { display:flex; align-items:center; border:1px solid var(--cssV2-border-strong); border-radius:10px; overflow:hidden; background:var(--cssV2-bg-card); }
.cssV2-kc .cssV2-cash-step { width:36px; height:36px; min-height:0; border:0; border-radius:0; background:transparent; }
.cssV2-kc .cssV2-cash-input { width:52px; height:36px; padding:0; border:0; border-inline:1px solid var(--cssV2-border); border-radius:0; background:transparent; font-size:14px; }
.cssV2-kc-diff { margin:0; padding:0; border:1px solid var(--cssV2-border); border-radius:12px; overflow:hidden; }
.cssV2-kc-diff .cssV2-kc-line:not(.cssV2-kc-result) { background:var(--cssV2-bg-card); }
.cssV2-kc-diff .cssV2-kc-line:first-child { border-top:0; }
.cssV2-kc-diff .cssV2-kc-result { font-size:15px; }
.cssV2-kc-warning { margin:16px 0 0; padding:10px 12px; border-radius:8px; background:var(--cssV2-warning-bg); font-size:13px; }
.cssV2-kc-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cssV2-kc-status { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; color:var(--cssV2-text-2); }
.cssV2-kc-status > span { flex:none; width:7px; height:7px; border-radius:50%; background:var(--cssV2-success); }
.cssV2-kc-status.cssV2-short > span { background:var(--cssV2-error); }
.cssV2-kc-status.cssV2-over > span { background:var(--cssV2-warning); }
.cssV2-kc .cssV2-shell-actions { display:flex; margin-left:auto; gap:10px; }
.cssV2-kc .cssV2-shell-button { min-width:0; width:auto; min-height:42px; padding:0 20px; border-radius:10px; white-space:nowrap; }
@media (max-width:600px), (max-height:500px) {
 .cssV2-kc-tabs { display:grid; }
 .cssV2-kc-columns { grid-template-columns:minmax(0,1fr); }
 .cssV2-kc-panel.cssV2-kc-hidden { display:none; }
 .cssV2-kc-footer { flex-direction:column; align-items:stretch; }
 .cssV2-kc .cssV2-shell-actions { margin-left:0; }
 .cssV2-kc .cssV2-shell-button { flex:1; }
 .cssV2-kc .cssV2-cash-step { width:44px; height:44px; }
 .cssV2-kc .cssV2-cash-input { height:44px; font-size:16px; }
}

.cssV2-kc-banner { display:flex; align-items:flex-start; gap:10px; }
.cssV2-kc-banner i { color:var(--cssV2-warning); }
.cssV2-kc-banner strong { font-weight:600; }
.cssV2-kc-cash-card { border-color:color-mix(in srgb,var(--cssV2-primary) 22%,var(--cssV2-bg-card)); background:color-mix(in srgb,var(--cssV2-primary) 5%,var(--cssV2-bg-card)); }
.cssV2-kc-cash-card h3, .cssV2-kc-cash-card .cssV2-kc-sum { background:transparent; color:var(--cssV2-primary); }
.cssV2-kc-cash-card .cssV2-kc-sum span, .cssV2-kc-cash-card .cssV2-kc-sum b { color:inherit; font-weight:700; }
@media (max-width:600px), (max-height:500px) {
 .cssV2-modal-window:has(.cssV2-kc) .modal-dialog { width:100%; margin:6vh 0 0; }
 .cssV2-modal-window:has(.cssV2-kc) .modal-content { height:94vh; max-height:94vh; border-radius:20px 20px 0 0; }
 .cssV2-kc-tabs { flex-shrink:0; margin:12px 16px 0; }
 .cssV2-kc .cssV2-shell-body { padding:16px; }
 .cssV2-kc .cssV2-shell-button { min-height:48px; }
 .cssV2-kc .cssV2-shell-button.cssV2-primary { flex:2; }
}

/* Tiền đầu ca: SalesV2ShiftStartCashModal, chỉ áp dụng modal khai báo. */
.cssV2-modal-window:has(.cssV2-startcash) .modal-dialog { width:min(680px, calc(100vw - 32px)); margin:24px auto; }
.cssV2-modal-window:has(.cssV2-startcash) .modal-content { max-height:calc(100vh - 48px); border-radius:16px; }
.cssV2-startcash .cssV2-shell-header { flex-shrink:0; padding:20px 24px 16px; border-bottom:1px solid var(--cssV2-border); }
.cssV2-startcash .cssV2-shell-heading h2 { font-size:19px; }
.cssV2-startcash .cssV2-shell-close { width:36px; height:36px; border-radius:10px; }
.cssV2-startcash .cssV2-shell-body { flex:1; min-height:0; padding:16px 24px 20px; overflow:auto; }
.cssV2-startcash .cssV2-shell-footer { flex-shrink:0; display:flex; flex-direction:column; gap:12px; padding:14px 24px; border-top:1px solid var(--cssV2-border); background:var(--cssV2-bg-app); }
.cssV2-startcash .cssV2-cash-head { margin:0 0 12px; }
.cssV2-startcash .cssV2-cash-head h3 { font-size:12px; font-weight:600; color:var(--cssV2-text-2); text-transform:uppercase; letter-spacing:.06em; }
.cssV2-startcash-denoms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cssV2-startcash .cssV2-cash-row { grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:8px 8px 8px 14px; border:1px solid var(--cssV2-border); border-radius:12px; background:var(--cssV2-bg-app); }
.cssV2-startcash .cssV2-cash-row.cssV2-filled { border-color:color-mix(in srgb,var(--cssV2-primary) 22%,var(--cssV2-bg-card)); background:var(--cssV2-bg-card); }
.cssV2-startcash .cssV2-cash-denom { display:flex; flex-direction:column; gap:1px; }
.cssV2-startcash .cssV2-cash-denom strong { font-size:15px; font-weight:600; }
.cssV2-startcash .cssV2-cash-denom small { color:var(--cssV2-text-2); font-size:12px; font-weight:400; }
.cssV2-startcash-stepper { display:flex; align-items:center; overflow:hidden; border:1px solid var(--cssV2-border-strong); border-radius:10px; background:var(--cssV2-bg-card); }
.cssV2-startcash .cssV2-cash-step { width:36px; height:36px; min-height:0; padding:0; border:0; border-radius:0; background:transparent; }
.cssV2-startcash .cssV2-cash-input { width:48px; height:36px; padding:0; border:0; border-inline:1px solid var(--cssV2-border); border-radius:0; background:transparent; font-size:14px; }
.cssV2-startcash .cssV2-cash-total { margin:0; padding:12px 16px; border:1px solid color-mix(in srgb,var(--cssV2-primary) 22%,var(--cssV2-bg-card)); border-radius:12px; background:color-mix(in srgb,var(--cssV2-primary) 5%,var(--cssV2-bg-card)); }
.cssV2-startcash .cssV2-cash-total strong { font-size:24px; font-weight:700; white-space:nowrap; }
.cssV2-startcash-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cssV2-startcash .cssV2-cash-state { display:flex; align-items:center; gap:8px; margin:0; text-align:left; color:var(--cssV2-text-2); font-size:13px; }
.cssV2-startcash .cssV2-cash-state > span { flex:none; width:7px; height:7px; border-radius:50%; background:var(--cssV2-success); }
.cssV2-startcash .cssV2-cash-state.cssV2-pending > span { background:var(--cssV2-warning); }
.cssV2-startcash .cssV2-shell-actions { display:flex; margin-left:auto; gap:10px; }
.cssV2-startcash .cssV2-shell-button { width:auto; min-width:0; min-height:42px; padding:0 20px; border-radius:10px; white-space:nowrap; }
.cssV2-startcash .cssV2-cash-error { margin:0; }
@media (max-width:600px) {
 .cssV2-modal-window:has(.cssV2-startcash) .modal-dialog { width:100%; margin:6vh 0 0; }
 .cssV2-modal-window:has(.cssV2-startcash) .modal-content { max-height:94vh; border-radius:20px 20px 0 0; }
 .cssV2-startcash-denoms { grid-template-columns:minmax(0,1fr); }
 .cssV2-startcash .cssV2-shell-body { padding:14px 16px 16px; }
 .cssV2-startcash .cssV2-shell-footer { padding:12px 16px; }
 .cssV2-startcash-footer { flex-direction:column; align-items:stretch; }
 .cssV2-startcash .cssV2-shell-actions { margin-left:0; }
 .cssV2-startcash .cssV2-shell-button { flex:1; min-height:48px; }
 .cssV2-startcash .cssV2-shell-button.cssV2-primary { flex:2; }
 .cssV2-startcash .cssV2-cash-step { width:44px; height:44px; }
 .cssV2-startcash .cssV2-cash-input { height:44px; font-size:16px; }
}

.cssV2-startcash .cssV2-shell-close { background:var(--cssV2-bg-app); color:var(--cssV2-text-2); }
.cssV2-startcash .cssV2-cash-step:first-child { color:var(--cssV2-text-2); }

/* Autocomplete panels live above the form, outside its scrollable body. */
.cssV2-modal:has(> .cssV2-floating-panel) { position:relative; }
.cssV2-modal > .cssV2-floating-panel { position:absolute; right:auto; bottom:auto; z-index:10; box-sizing:border-box; margin:0; }
.cssV2-floating-panel .cssV2-cp-head { flex-shrink:0; }
.cssV2-floating-panel, .cssV2-floating-panel .cssV2-cp-list { overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--cssV2-border-strong) transparent; }

/* Advance form: show the note and actions on taller desktop/tablet screens. */
.cssV2-modal-window:has(.cssV2-advance) .modal-dialog { margin-top:12px; margin-bottom:12px; }
.cssV2-modal-window:has(.cssV2-advance) .modal-content { max-height:min(800px, calc(100vh - 24px)); }
.cssV2-advance-field > span > label { margin:0; font:inherit; }
.cssV2-advance-customer-invalid .cssV2-cp-toggle { border-color:var(--cssV2-error); }

.cssV2-advance .cssV2-shell-body { padding-top:16px; padding-bottom:16px; }
.cssV2-advance-fields { gap:12px; }
.cssV2-advance-amount { gap:8px; padding:12px; }

/* FnBWide: toppings belong to the parent card; the badge counts topping rows. */
.cssV2-line-toppings { display:grid; gap:4px; margin-top:1px; padding:0 3px 2px 13px; }
.cssV2-line-topping { display:flex; justify-content:space-between; gap:8px; color:var(--cssV2-text-2); font-size:12px; font-variant-numeric:tabular-nums; }
.cssV2-line-topping > span:first-child { min-width:0; overflow-wrap:anywhere; }
.cssV2-line-topping > span:last-child { flex-shrink:0; }
.cssV2-line-topping small { font-size:inherit; }
.cssV2-line-topping-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 4px; border-radius:50%; background:var(--cssV2-primary); color:var(--cssV2-text-inverse); font-size:11px; }

/* Add request owns one immediate overlay; keep the workspace visually stable. */
.cssV2-pos.cssV2-adding-product button:disabled,
.cssV2-pos.cssV2-adding-product input:disabled,
.cssV2-pos.cssV2-adding-product select:disabled { opacity:1; cursor:wait; }
body:has(.cssV2-adding-product) #spinnerLoadingImg { display:none !important; }
.cssV2-add-loading { position:fixed; inset:0; z-index:100000; display:grid; place-items:center; cursor:wait; touch-action:none; }
.cssV2-add-loading > div { display:flex; align-items:center; gap:8px; padding:10px 16px; border:1px solid var(--cssV2-border); border-radius:12px; background:var(--cssV2-bg-card); box-shadow:var(--cssV2-shadow-md); }
.cssV2-add-loading span { width:20px; height:20px; border:3px solid var(--cssV2-border); border-top-color:var(--cssV2-primary); border-radius:50%; animation:cssV2-spin .8s linear infinite; }
@media (prefers-reduced-motion:reduce) { .cssV2-add-loading span { animation:none; } }