:root {
            --brand: #111827;
            --brand-accent: #16a34a;
            --accent2: #2563eb;
            --surface: #f8fafc;
            --card: #ffffff;
            --border: #e5e7eb;
            --text-main: #111827;
            --text-muted: #6b7280;
            --text-xs: #9ca3af;
            --nav-h: 60px;
            --sub-nav-h: 46px;
        }
        * { box-sizing: border-box; }
        body { font-family: 'Be Vietnam Pro', sans-serif; background: var(--surface); color: var(--text-main); }

        /* ── PRINT ── */
        @media print {
            .no-print { display: none !important; }
            .paper { box-shadow: none !important; border: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
            .bg-slate-900 { background-color: #1e293b !important; color: white !important; -webkit-print-color-adjust: exact; }
            input, textarea { border: none !important; background: transparent !important; }
            .print-hide-zero { display: none !important; }
        }

        /* ── TAB SYSTEM ── */
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .mode-xuat-kho .col-gia, .mode-xuat-kho .col-thanhtien, .mode-xuat-kho .area-thanhtoan { display: none !important; }
        .mode-order .col-gia, .mode-order .col-thanhtien, .mode-order .area-thanhtoan { display: none !important; }
        .mode-order table th:nth-child(3),
        .mode-order table td:nth-child(3) { display: none !important; }
        .row-date-header { background-color: #f1f5f9 !important; font-weight: 900; color: #0f172a; }
        .row-date-header input[type="date"] { color: #0f172a; background: transparent; font-weight: 900; font-size: 11px; letter-spacing: 0.05em; border: none; outline: none; cursor: pointer; }
        .row-date-header input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
        @media print {
            .row-date-header input[type="date"] { display: none !important; }
            .row-date-header .header-print-label { display: inline !important; font-weight: 900; font-size: 11px; letter-spacing: 0.05em; }
        }

        /* ── TOP NAV ── */
        #top-nav {
            position: sticky; top: 0; z-index: 50;
            height: var(--nav-h);
            background: var(--brand);
            display: flex; align-items: stretch;
            box-shadow: 0 2px 16px rgba(0,0,0,.18);
        }
        #nav-logo {
            display: flex; align-items: center; padding: 0 20px;
            border-right: 1px solid rgba(255,255,255,.08);
            flex-shrink: 0; cursor: pointer;
        }
        #nav-logo span {
            font-size: 16px; font-weight: 900; color: #fff; letter-spacing: -0.5px;
        }
        #nav-logo em {
            font-style: normal; color: #4ade80; margin-left: 2px;
        }
        #nav-tabs {
            display: flex; align-items: stretch; flex: 1; padding: 0 4px;
        }
        .nav-tab {
            display: flex; align-items: center; padding: 0 18px;
            font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
            color: rgba(255,255,255,.45); cursor: pointer; border: none; background: none;
            position: relative; transition: color .15s; white-space: nowrap; gap: 7px;
        }
        .nav-tab:hover { color: rgba(255,255,255,.8); }
        .nav-tab.active { color: #fff; }
        .nav-tab.active::after {
            content: ''; position: absolute; bottom: 0; left: 12px; right: 12px;
            height: 3px; background: #4ade80; border-radius: 3px 3px 0 0;
        }
        .nav-tab svg { width: 15px; height: 15px; flex-shrink: 0; }

        /* ── NAV RIGHT ACTIONS ── */
        #nav-actions {
            display: flex; align-items: center; gap: 6px; padding: 0 12px;
            border-left: 1px solid rgba(255,255,255,.08);
            flex-shrink: 0;
        }
        .nav-btn {
            padding: 6px 12px; border-radius: 8px; font-size: 10px; font-weight: 800;
            text-transform: uppercase; cursor: pointer; border: none; transition: all .15s;
            white-space: nowrap;
        }
        .nav-btn-ghost { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
        .nav-btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
        .nav-btn-green { background: var(--brand-accent); color: #fff; }
        .nav-btn-green:hover { background: #15803d; }
        .nav-btn-blue { background: #2563eb; color: #fff; }
        .nav-btn-blue:hover { background: #1d4ed8; }
        .nav-btn-red { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }
        .nav-btn-red:hover { background: rgba(239,68,68,.25); color: #fff; }
        .nav-btn-yellow { background: rgba(245,158,11,.15); color: #fcd34d; border: 1px solid rgba(245,158,11,.2); }
        .nav-btn-yellow:hover { background: rgba(245,158,11,.25); }
        .nav-btn-emerald { background: rgba(52,211,153,.12); color: #6ee7b7; border: 1px solid rgba(52,211,153,.2); }
        .nav-btn-emerald:hover { background: rgba(52,211,153,.22); color: #fff; }
        .role-chip {
            padding: 5px 10px; border-radius: 6px; font-size: 9px; font-weight: 900;
            text-transform: uppercase; letter-spacing: .5px;
        }

        /* ── SALE SUB-TABS (inside tab-input) ── */
        #sale-sub-nav {
            display: flex; align-items: center; gap: 0;
            padding: 8px 16px 0;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
        }
        .sub-tab-btn {
            display: flex; align-items: center; gap: 6px;
            padding: 8px 18px 10px;
            font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
            color: var(--text-muted); cursor: pointer; background: none; border: none;
            border-bottom: 3px solid transparent; transition: all .15s; white-space: nowrap;
            margin-bottom: -1px;
        }
        .sub-tab-btn:hover { color: var(--text-main); }
        .sub-tab-btn.active { color: var(--text-main); border-bottom-color: #111827; }
        .sub-tab-btn.active-green { color: #16a34a; border-bottom-color: #16a34a; }
        .sub-tab-btn.active-orange { color: #ea580c; border-bottom-color: #ea580c; }
        .sub-tab-btn.active-blue { color: #2563eb; border-bottom-color: #2563eb; }
        .sub-tab-btn.active-purple { color: #7c3aed; border-bottom-color: #7c3aed; }
        .sub-tab-dot {
            width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
        }
        .dot-green { background: #16a34a; }
        .dot-orange { background: #ea580c; }
        .dot-blue { background: #2563eb; }
        .dot-purple { background: #7c3aed; }
        #sale-sub-spacer { flex: 1; }
        #sale-top-actions { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }
        .act-btn {
            padding: 6px 14px; border-radius: 8px; font-size: 10px; font-weight: 800;
            text-transform: uppercase; cursor: pointer; border: 1px solid var(--border);
            transition: all .15s; background: var(--card);
        }
        .act-btn:hover { background: #f1f5f9; }
        .act-btn-primary { background: #16a34a; color: #fff; border-color: #15803d; }
        .act-btn-primary:hover { background: #15803d; }
        .act-btn-blue { background: #2563eb; color: #fff; border-color: #1d4ed8; }
        .act-btn-blue:hover { background: #1d4ed8; }

        /* ── 3-COL LAYOUT for History / Payment tabs ── */
        .three-col { display: grid; gap: 16px; height: calc(100vh - var(--nav-h) - 1px); padding: 16px; }
        .two-col { display: grid; gap: 16px; height: calc(100vh - var(--nav-h) - 1px); padding: 16px; }
        .panel {
            background: var(--card); border-radius: 14px;
            border: 1px solid var(--border); display: flex; flex-direction: column;
            overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04);
        }
        .panel-header {
            padding: 14px 16px; background: #fafafa; border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        .panel-title { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); }
        .panel-subtitle { font-size: 11px; font-weight: 700; color: var(--text-main); margin-top: 2px; }
        .panel-body { flex: 1; overflow-y: auto; }
        .search-box {
            width: 100%; padding: 8px 12px; border-radius: 8px;
            border: 1px solid var(--border); font-size: 11px; font-weight: 600;
            outline: none; background: var(--card); margin-top: 10px;
            transition: border-color .15s;
        }
        .search-box:focus { border-color: #6366f1; }

        /* ── PRICE TAB ── */
        .price-layout { display: flex; height: calc(100vh - var(--nav-h) - 1px); }
        .price-sidebar { width: 260px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--card); display: flex; flex-direction: column; }
        .price-main { flex: 1; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); }
        .price-toolbar { padding: 14px 20px; background: var(--card); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 12px; flex-wrap: wrap; }

        /* ── STATS TAB ── */
        .stats-layout { display: flex; height: calc(100vh - var(--nav-h) - 1px); }
        .stats-sidebar { width: 260px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--card); display: flex; flex-direction: column; }
        .stats-main { flex: 1; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); }
        .stats-toolbar { padding: 14px 20px; background: var(--card); border-bottom: 1px solid var(--border); flex-shrink: 0; }

        /* ── CHIPS / BADGES ── */
        .chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
        .chip-green { background: #dcfce7; color: #15803d; }
        .chip-orange { background: #ffedd5; color: #c2410c; }
        .chip-purple { background: #f3e8ff; color: #7c3aed; }
        .chip-blue { background: #dbeafe; color: #1d4ed8; }
        .chip-slate { background: #f1f5f9; color: #475569; }

        /* ── FILTER PILLS ── */
        .filter-pill {
            padding: 4px 10px; border-radius: 20px; font-size: 9px; font-weight: 800;
            text-transform: uppercase; cursor: pointer; border: 1px solid transparent;
            transition: all .15s; white-space: nowrap;
        }
        .filter-pill.active-all { background: #111827; color: #fff; }
        .filter-pill.fp-green { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
        .filter-pill.fp-orange { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
        .filter-pill.fp-purple { background: #f3e8ff; color: #7c3aed; border-color: #e9d5ff; }
        .filter-pill:not(.active-all):not(.fp-green):not(.fp-orange):not(.fp-purple) { background: #f1f5f9; color: #64748b; }

        /* Small action buttons inside panels */
        .sm-btn { padding: 5px 10px; border-radius: 7px; font-size: 9px; font-weight: 800; text-transform: uppercase; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text-muted); transition: all .15s; }
        .sm-btn:hover { background: #f1f5f9; }
        .sm-btn-blue { background: #2563eb; color: #fff; border-color: #1d4ed8; }
        .sm-btn-blue:hover { background: #1d4ed8; }
        .sm-btn-green { background: #16a34a; color: #fff; border-color: #15803d; }
        .sm-btn-green:hover { background: #15803d; }
        .sm-btn-red { background: #dc2626; color: #fff; border-color: #b91c1c; }
        .sm-btn-red:hover { background: #b91c1c; }
        .sm-btn-amber { background: #d97706; color: #fff; border-color: #b45309; }
        .sm-btn-amber:hover { background: #b45309; }
        .sm-btn-emerald { background: #059669; color: #fff; border-color: #047857; }
        .sm-btn-emerald:hover { background: #047857; }
        .sm-btn-rose { background: #e11d48; color: #fff; border-color: #be123c; }
        .sm-btn-rose:hover { background: #be123c; }
    
        /* ── AUTOCOMPLETE V36 ── */
        @media (max-width: 900px) {
            #tab-history {
                height: auto !important;
                min-height: calc(100vh - var(--nav-h));
                padding: 10px !important;
                overflow-y: auto;
            }
            #tab-history > div {
                display: flex !important;
                flex-direction: column;
                height: auto !important;
                max-width: none !important;
                gap: 12px !important;
            }
            #tab-history > div > div {
                min-height: 0;
                max-height: none;
            }
            #hist-cust-list,
            #hist-phieu-list {
                max-height: 42vh;
            }
            #hist-preview {
                max-height: none;
                overflow: visible;
                padding: 12px !important;
            }
            #hist-preview-actions {
                justify-content: flex-start !important;
            }
        }

        .mc-suggest-box {
            position: absolute;
            z-index: 99999;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            box-shadow: 0 16px 40px rgba(15,23,42,.16);
            max-height: 260px;
            overflow-y: auto;
            display: none;
        }
        .mc-suggest-item {
            width: 100%;
            display: block;
            text-align: left;
            padding: 10px 12px;
            font-size: 12px;
            font-weight: 900;
            text-transform: uppercase;
            color: #111827;
            border-bottom: 1px solid #f1f5f9;
            background: #fff;
            cursor: pointer;
        }
        .mc-suggest-item:hover { background:#eff6ff; color:#1d4ed8; }
        .mc-customer-wrap {
            position: relative;
            flex: 1;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .mc-customer-wrap input { flex: 1; }
        .mc-customer-arrow {
            width: 32px;
            height: 32px;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #f8fafc;
            color: #334155;
            font-size: 13px;
            font-weight: 900;
            cursor: pointer;
            flex-shrink: 0;
        }
        .mc-customer-arrow:hover { background:#e0f2fe; color:#0369a1; }

    
        /* ── MC AUTOCOMPLETE V37 ── */
        .mc-customer-wrap{position:relative;flex:1;display:flex;align-items:center;gap:8px}
        .mc-customer-wrap input{flex:1}
        .mc-customer-arrow{width:34px;height:34px;border:1px solid #dbe3ef;border-radius:10px;background:#f8fafc;color:#334155;font-weight:900;cursor:pointer}
        .mc-customer-arrow:hover{background:#dbeafe;color:#1d4ed8}
        #mc-autocomplete-box{position:fixed;z-index:999999;background:white;border:1px solid #dbe3ef;border-radius:14px;box-shadow:0 18px 45px rgba(15,23,42,.22);max-height:280px;overflow:auto;display:none;min-width:260px}
        .mc-ac-item{display:block;width:100%;border:0;border-bottom:1px solid #f1f5f9;background:white;text-align:left;padding:11px 13px;font-size:12px;font-weight:900;text-transform:uppercase;color:#0f172a;cursor:pointer}
        .mc-ac-item:hover{background:#eff6ff;color:#1d4ed8}
        .mc-ac-empty{padding:12px 13px;font-size:12px;font-weight:800;color:#94a3b8}

        /* V70 final override: keep action buttons visible and away from the invoice body */
        @media (min-width: 901px) {
            #sale-top-actions { position: fixed !important; right: 22px !important; bottom: 22px !important; z-index: 180 !important; display: flex !important; flex-direction: column !important; width: 154px !important; gap: 8px !important; padding: 10px !important; border-radius: 18px !important; border: 1px solid rgba(148,163,184,.28) !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 18px 44px rgba(15,23,42,.18) !important; backdrop-filter: blur(14px) !important; }
            #sale-top-actions .act-btn { width: 100% !important; min-height: 42px !important; padding: 10px 12px !important; border-radius: 13px !important; font-size: 10px !important; margin: 0 !important; white-space: nowrap !important; }
            #sale-top-actions .act-btn.hidden { display: none !important; }
        }
        @media (max-width: 900px) {
            body { padding-bottom: calc(210px + env(safe-area-inset-bottom, 0px)) !important; }
            #sale-top-actions { position: fixed !important; left: 12px !important; right: 12px !important; bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important; z-index: 99998 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; padding: 8px !important; border-radius: 18px !important; border: 1px solid rgba(148,163,184,.22) !important; background: rgba(255,255,255,.98) !important; box-shadow: 0 18px 44px rgba(15,23,42,.22) !important; backdrop-filter: blur(14px) !important; }
            #sale-top-actions .act-btn { width: 100% !important; min-height: 42px !important; padding: 10px 7px !important; border-radius: 13px !important; font-size: 10px !important; margin: 0 !important; white-space: nowrap !important; }
            #sale-top-actions .act-btn.hidden { display: none !important; }
            #sale-top-actions:has(#print-btn.hidden) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
            #sync-status { z-index: 99990 !important; }
        }

        /* V70 final override: keep action buttons visible and away from the invoice body */
        @media (min-width: 901px) {
            #sale-top-actions {
                position: fixed !important;
                right: 22px !important;
                bottom: 22px !important;
                z-index: 180 !important;
                display: flex !important;
                flex-direction: column !important;
                width: 154px !important;
                gap: 8px !important;
                padding: 10px !important;
                border-radius: 18px !important;
                border: 1px solid rgba(148,163,184,.28) !important;
                background: rgba(255,255,255,.96) !important;
                box-shadow: 0 18px 44px rgba(15,23,42,.18) !important;
                backdrop-filter: blur(14px) !important;
            }
            #sale-top-actions .act-btn {
                width: 100% !important;
                min-height: 42px !important;
                padding: 10px 12px !important;
                border-radius: 13px !important;
                font-size: 10px !important;
                margin: 0 !important;
                white-space: nowrap !important;
            }
            #sale-top-actions .act-btn.hidden { display: none !important; }
        }

        @media (max-width: 900px) {
            body { padding-bottom: calc(210px + env(safe-area-inset-bottom, 0px)) !important; }
            #sale-top-actions {
                position: fixed !important;
                left: 12px !important;
                right: 12px !important;
                bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important;
                z-index: 99998 !important;
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 8px !important;
                padding: 8px !important;
                border-radius: 18px !important;
                border: 1px solid rgba(148,163,184,.22) !important;
                background: rgba(255,255,255,.98) !important;
                box-shadow: 0 18px 44px rgba(15,23,42,.22) !important;
                backdrop-filter: blur(14px) !important;
            }
            #sale-top-actions .act-btn {
                width: 100% !important;
                min-height: 42px !important;
                padding: 10px 7px !important;
                border-radius: 13px !important;
                font-size: 10px !important;
                margin: 0 !important;
                white-space: nowrap !important;
            }
            #sale-top-actions .act-btn.hidden { display: none !important; }
            #sale-top-actions:has(#print-btn.hidden) {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            #sync-status { z-index: 99990 !important; }
        }

        /* V70: final action bar placement override */
        @media (min-width: 901px) {
            #sale-top-actions {
                position: fixed !important;
                right: 22px !important;
                bottom: 22px !important;
                z-index: 180 !important;
                display: flex !important;
                flex-direction: column !important;
                width: 154px !important;
                gap: 8px !important;
                padding: 10px !important;
                border-radius: 18px !important;
                border: 1px solid rgba(148,163,184,.28) !important;
                background: rgba(255,255,255,.96) !important;
                box-shadow: 0 18px 44px rgba(15,23,42,.18) !important;
                backdrop-filter: blur(14px) !important;
            }
            #sale-top-actions .act-btn {
                width: 100% !important;
                min-height: 42px !important;
                padding: 10px 12px !important;
                border-radius: 13px !important;
                font-size: 10px !important;
                margin: 0 !important;
                white-space: nowrap !important;
            }
            #sale-top-actions .act-btn.hidden {
                display: none !important;
            }
        }

        @media (max-width: 900px) {
            body {
                padding-bottom: calc(210px + env(safe-area-inset-bottom, 0px)) !important;
            }
            #sale-top-actions {
                position: fixed !important;
                left: 12px !important;
                right: 12px !important;
                bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important;
                z-index: 99998 !important;
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 8px !important;
                padding: 8px !important;
                border-radius: 18px !important;
                border: 1px solid rgba(148,163,184,.22) !important;
                background: rgba(255,255,255,.98) !important;
                box-shadow: 0 18px 44px rgba(15,23,42,.22) !important;
                backdrop-filter: blur(14px) !important;
            }
            #sale-top-actions .act-btn {
                width: 100% !important;
                min-height: 42px !important;
                padding: 10px 7px !important;
                border-radius: 13px !important;
                font-size: 10px !important;
                margin: 0 !important;
                white-space: nowrap !important;
            }
            #sale-top-actions .act-btn.hidden {
                display: none !important;
            }
            #sale-top-actions:has(#print-btn.hidden) {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            #sync-status {
                z-index: 99990 !important;
            }
        }

        @media (min-width: 901px) {
            #tab-input {
                padding-bottom: 98px;
            }
            #sale-top-actions {
                position: fixed !important;
                right: 24px !important;
                bottom: 22px !important;
                z-index: 180 !important;
                display: grid !important;
                grid-template-columns: repeat(3, minmax(112px, 1fr)) !important;
                gap: 10px !important;
                padding: 10px !important;
                border: 1px solid rgba(148,163,184,.28) !important;
                border-radius: 18px !important;
                background: rgba(255,255,255,.96) !important;
                box-shadow: 0 18px 44px rgba(15,23,42,.18) !important;
                backdrop-filter: blur(14px) !important;
            }
            #sale-top-actions .act-btn {
                min-height: 44px !important;
                padding: 11px 16px !important;
                border-radius: 13px !important;
                font-size: 11px !important;
                white-space: nowrap !important;
                margin: 0 !important;
            }
            #sale-top-actions .act-btn.hidden {
                display: none !important;
            }
            #sale-top-actions:has(#print-btn.hidden) {
                grid-template-columns: repeat(2, minmax(136px, 1fr)) !important;
            }
        }

        @media (max-width: 900px) {
            body {
                padding-bottom: calc(154px + env(safe-area-inset-bottom, 0px)) !important;
            }
            #sale-sub-nav {
                top: 0 !important;
                padding: 8px !important;
                gap: 6px !important;
                overflow-x: auto !important;
                align-items: center !important;
                background: rgba(248,250,252,.96) !important;
                backdrop-filter: blur(14px) !important;
            }
            #sale-sub-nav .sub-tab-btn {
                flex: 0 0 auto !important;
                min-height: 38px !important;
                padding: 9px 11px !important;
                font-size: 9px !important;
                border-radius: 999px !important;
                white-space: nowrap !important;
            }
            #sale-top-actions {
                position: fixed !important;
                left: 10px !important;
                right: 10px !important;
                bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
                z-index: 120 !important;
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 8px !important;
                padding: 8px !important;
                border: 1px solid rgba(148,163,184,.2) !important;
                border-radius: 18px !important;
                background: rgba(255,255,255,.96) !important;
                box-shadow: 0 18px 44px rgba(15,23,42,.18) !important;
                backdrop-filter: blur(14px) !important;
            }
            #sale-top-actions .act-btn {
                width: 100% !important;
                min-height: 42px !important;
                padding: 10px 8px !important;
                font-size: 10px !important;
                white-space: nowrap !important;
                border-radius: 13px !important;
                margin: 0 !important;
            }
            #sale-top-actions .act-btn.hidden {
                display: none !important;
            }
            #sale-top-actions:has(#print-btn.hidden) {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
            #market-order-panel {
                margin: 10px 8px 0 !important;
                border-radius: 18px !important;
                box-shadow: 0 10px 26px rgba(15,23,42,.08) !important;
            }
            #market-order-panel > div:first-child {
                display: grid !important;
                grid-template-columns: 1fr auto !important;
                align-items: center !important;
                gap: 10px !important;
                padding: 12px !important;
            }
            #market-order-panel > div:first-child p:first-child {
                font-size: 10px !important;
                line-height: 1.2 !important;
            }
            #market-order-panel > div:first-child p:last-child {
                font-size: 9px !important;
                line-height: 1.35 !important;
            }
            #market-order-panel > div:first-child button {
                min-height: 36px !important;
                padding: 8px 10px !important;
                border-radius: 999px !important;
                font-size: 9px !important;
            }
            #market-order-list {
                display: flex !important;
                flex-direction: column !important;
                gap: 10px !important;
                padding: 10px !important;
            }
            #market-order-list > div {
                width: 100% !important;
                border-radius: 16px !important;
                padding: 12px !important;
                background: #fff !important;
                box-shadow: 0 8px 20px rgba(15,23,42,.06) !important;
            }
            #market-order-list .grid.grid-cols-4 {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 8px !important;
            }
            #market-order-list button {
                min-height: 40px !important;
                border-radius: 12px !important;
                font-size: 10px !important;
                padding: 10px 8px !important;
            }
            #tab-input > .pt-4 {
                padding-top: 10px !important;
            }
            #main-paper {
                margin-top: 0 !important;
            }
            #main-paper.mode-order table {
                overflow-x: visible !important;
                white-space: normal !important;
            }
            #main-paper.mode-order thead,
            #main-paper.mode-order tbody,
            #main-paper.mode-order tfoot {
                min-width: 0 !important;
            }
            #main-paper.mode-order th:nth-child(2) {
                width: auto !important;
            }
            #main-paper.mode-order th:nth-child(4),
            #main-paper.mode-order td:nth-child(4) {
                width: 88px !important;
            }
            #main-paper.mode-order .p-name {
                min-width: 0 !important;
            }
        }

        @media (max-width: 900px) {
            body {
                padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
                background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
            }
            #top-nav {
                position: fixed !important;
                left: 10px !important;
                right: 10px !important;
                top: auto !important;
                bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
                height: 64px !important;
                min-height: 64px !important;
                border-radius: 22px !important;
                background: rgba(15, 23, 42, .94) !important;
                box-shadow: 0 18px 45px rgba(15, 23, 42, .28) !important;
                backdrop-filter: blur(14px);
                border: 1px solid rgba(255,255,255,.08) !important;
                overflow: hidden !important;
                z-index: 100 !important;
            }
            #nav-logo { display: none !important; }
            #nav-tabs {
                width: 100% !important;
                height: 64px !important;
                padding: 0 6px !important;
                gap: 2px !important;
                justify-content: space-between !important;
                overflow-x: auto !important;
            }
            .nav-tab {
                min-width: 58px !important;
                height: 64px !important;
                border-radius: 18px !important;
                color: rgba(226,232,240,.62) !important;
            }
            .nav-tab.active {
                color: #fff !important;
                background: rgba(34,197,94,.18) !important;
            }
            .nav-tab.active::after { display: none !important; }
            #nav-actions {
                bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
            }
            #sale-sub-nav {
                top: 0 !important;
                background: rgba(248,250,252,.92) !important;
                backdrop-filter: blur(12px);
                box-shadow: 0 8px 26px rgba(15,23,42,.08) !important;
            }
            .sub-tab-btn,
            .act-btn {
                border-radius: 999px !important;
            }
            #main-paper,
            .panel,
            #tab-history > div > div {
                border-radius: 22px !important;
                border: 1px solid rgba(148,163,184,.2) !important;
                box-shadow: 0 10px 28px rgba(15,23,42,.08) !important;
                background: rgba(255,255,255,.96) !important;
            }
            #paper-title {
                display: inline-flex !important;
                padding: 7px 12px !important;
                border-radius: 999px !important;
                background: #f1f5f9 !important;
                text-decoration: none !important;
            }
            .mc-customer-wrap {
                width: 100% !important;
                background: #f8fafc !important;
                border: 1px solid #e2e8f0 !important;
                border-radius: 16px !important;
                padding: 6px 8px !important;
            }
            #main-paper table {
                border: 1px solid #e2e8f0 !important;
                border-radius: 18px !important;
                background: #fff !important;
            }
            .panel-header {
                background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
            }
            #sync-status,
            #toast {
                bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
            }
        }

        @media (max-width: 900px) {
            :root {
                --nav-h: 70px;
                --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
            }
            html { background: #eef2f7; }
            body {
                background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
                padding-bottom: calc(86px + var(--mobile-safe-bottom));
                color: #0f172a;
            }

            #top-nav {
                position: fixed;
                left: 10px;
                right: 10px;
                top: auto;
                bottom: calc(10px + var(--mobile-safe-bottom));
                min-height: 64px;
                height: 64px;
                border-radius: 22px;
                background: rgba(15, 23, 42, .94);
                box-shadow: 0 18px 45px rgba(15, 23, 42, .28);
                backdrop-filter: blur(14px);
                border: 1px solid rgba(255,255,255,.08);
                overflow: hidden;
                z-index: 100;
            }
            #nav-logo { display: none; }
            #nav-tabs {
                width: 100%;
                height: 64px;
                padding: 0 6px;
                gap: 2px;
                justify-content: space-between;
            }
            .nav-tab {
                min-width: 58px;
                height: 64px;
                padding: 0 6px;
                border-radius: 18px;
                color: rgba(226,232,240,.62);
                transition: background .16s ease, color .16s ease, transform .16s ease;
            }
            .nav-tab svg { width: 20px; height: 20px; }
            .nav-tab.active {
                color: #fff;
                background: rgba(34, 197, 94, .18);
                transform: translateY(-1px);
            }
            .nav-tab.active::after { display: none; }
            #nav-actions {
                right: 12px;
                bottom: calc(84px + var(--mobile-safe-bottom));
            }

            .tab-content.active {
                animation: mobileFadeIn .18s ease-out;
            }
            @keyframes mobileFadeIn {
                from { opacity: .72; transform: translateY(4px); }
                to { opacity: 1; transform: translateY(0); }
            }

            #sale-sub-nav {
                top: 0;
                padding: 10px 10px 8px;
                background: rgba(248,250,252,.92);
                backdrop-filter: blur(12px);
                border-bottom: 1px solid rgba(148,163,184,.18);
                box-shadow: 0 8px 26px rgba(15,23,42,.08);
            }
            .sub-tab-btn {
                border-radius: 999px;
                padding: 10px 12px;
                border-color: rgba(148,163,184,.22);
                background: rgba(255,255,255,.86);
                color: #475569;
            }
            .sub-tab-btn.active,
            .sub-tab-btn.active-green {
                background: #dcfce7;
                color: #166534;
                border-color: #86efac;
            }
            .sub-tab-btn.active-orange {
                background: #ffedd5;
                color: #9a3412;
                border-color: #fdba74;
            }
            .sub-tab-btn.active-blue {
                background: #dbeafe;
                color: #1d4ed8;
                border-color: #93c5fd;
            }
            .sub-tab-btn.active-purple {
                background: #f3e8ff;
                color: #6b21a8;
                border-color: #d8b4fe;
            }
            #sale-top-actions {
                margin-left: 2px;
            }
            .act-btn {
                border-radius: 999px;
                border-color: rgba(148,163,184,.22);
                box-shadow: 0 6px 18px rgba(15,23,42,.08);
            }

            #tab-input > .pt-4 {
                padding: 12px 10px 24px !important;
            }
            #main-paper,
            .panel,
            #tab-history > div > div {
                border: 1px solid rgba(148,163,184,.2) !important;
                box-shadow: 0 10px 28px rgba(15,23,42,.08) !important;
                background: rgba(255,255,255,.96) !important;
            }
            #main-paper {
                border-radius: 22px !important;
                padding: 16px !important;
            }
            #main-paper .border-b-4 {
                border-bottom-width: 2px !important;
                border-color: #cbd5e1 !important;
            }
            #main-paper h1 {
                font-size: 26px !important;
                letter-spacing: 0 !important;
            }
            #paper-title {
                display: inline-flex;
                padding: 7px 12px;
                border-radius: 999px;
                background: #f1f5f9;
                text-decoration: none !important;
                font-size: 15px !important;
            }
            .mc-customer-wrap {
                width: 100%;
                background: #f8fafc;
                border: 1px solid #e2e8f0;
                border-radius: 16px;
                padding: 6px 8px;
            }
            #cust-name {
                font-size: 17px !important;
                padding: 6px 0;
            }
            .mc-customer-arrow {
                border-radius: 14px;
                background: #e0f2fe;
                color: #0369a1;
                border-color: #bae6fd;
            }
            #main-paper table {
                border: 1px solid #e2e8f0;
                border-radius: 18px;
                background: #fff;
                box-shadow: inset 0 0 0 1px rgba(226,232,240,.5);
            }
            #main-paper thead tr {
                background: #0f172a !important;
            }
            #line-items input,
            #old-debt,
            #discount,
            #notes,
            #old-invoice-date {
                border-radius: 14px !important;
                background: #f8fafc !important;
            }
            #notes {
                border: 1px solid #e2e8f0 !important;
                padding: 12px !important;
            }
            #final-total-label { font-size: 10px !important; }
            #final-total {
                font-size: 24px !important;
                letter-spacing: 0;
            }

            .panel {
                border-radius: 22px;
                overflow: hidden;
            }
            .panel-header {
                background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
                border-bottom-color: rgba(148,163,184,.18);
            }
            .panel-title {
                color: #64748b;
                letter-spacing: .4px;
            }
            .panel-subtitle {
                color: #0f172a;
                font-size: 12px;
            }
            .search-box,
            .panel input,
            .panel textarea,
            .panel select {
                border-radius: 14px !important;
                border-color: #dbe3ef !important;
                background: #f8fafc !important;
                min-height: 40px;
            }
            .sm-btn {
                min-height: 36px;
                border-radius: 12px;
                box-shadow: 0 4px 12px rgba(15,23,42,.06);
            }

            #hist-cust-list,
            #hist-phieu-list,
            #payment-cust-list,
            #price-cust-list,
            #stats-cust-list,
            #debt-cust-list {
                max-height: 44vh;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            #hist-phieu-list > div,
            #debt-receipt-list > div {
                border-radius: 16px !important;
            }
            #hist-preview-paper {
                border-radius: 18px !important;
                box-shadow: none !important;
            }

            #debt-summary-cards > div {
                border-radius: 16px !important;
                box-shadow: 0 6px 18px rgba(15,23,42,.06);
            }
            #debt-main-view,
            #price-main-view,
            #stats-main-view,
            #payment-delivery-list {
                border-radius: 16px;
                background: #fff;
            }
            #debt-main-view table,
            #price-main-view table,
            #stats-main-view table,
            #payment-delivery-list table {
                border-radius: 14px;
                overflow: hidden;
            }

            #toast {
                bottom: calc(86px + var(--mobile-safe-bottom)) !important;
                box-shadow: 0 18px 40px rgba(15,23,42,.3);
            }
            #sync-status {
                left: 14px !important;
                right: 14px !important;
                bottom: calc(86px + var(--mobile-safe-bottom)) !important;
                border-radius: 999px !important;
                background: rgba(15,23,42,.92) !important;
                backdrop-filter: blur(12px);
            }
        }

        @media (max-width: 900px) {
            :root { --nav-h: 58px; }
            body { overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom); }
            #top-nav {
                height: auto;
                min-height: var(--nav-h);
                align-items: center;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            #nav-logo { padding: 0 12px; height: var(--nav-h); }
            #nav-logo span { font-size: 14px; }
            #nav-tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                flex: 1 0 auto;
            }
            #nav-tabs::-webkit-scrollbar { display: none; }
            .nav-tab {
                min-width: 76px;
                height: var(--nav-h);
                padding: 0 10px;
                flex-direction: column;
                justify-content: center;
                gap: 4px;
                font-size: 8px;
                letter-spacing: 0;
            }
            .nav-tab svg { width: 18px; height: 18px; }
            .nav-tab.active::after { left: 18px; right: 18px; }
            #nav-actions {
                position: fixed;
                right: 8px;
                bottom: calc(8px + env(safe-area-inset-bottom));
                z-index: 80;
                padding: 0;
                border-left: 0;
                gap: 4px;
                max-width: calc(100vw - 16px);
                pointer-events: none;
            }
            #nav-actions > * {
                pointer-events: auto;
                box-shadow: 0 10px 26px rgba(15,23,42,.2);
            }
            #role-badge { display: inline-flex !important; align-items: center; }
            #unlock-status-btn { display: none !important; }
            #logout-btn {
                padding: 8px 10px;
                border-radius: 999px;
                font-size: 9px;
            }

            #sale-sub-nav {
                position: sticky;
                top: var(--nav-h);
                z-index: 45;
                overflow-x: auto;
                align-items: stretch;
                gap: 6px;
                padding: 8px;
                box-shadow: 0 6px 20px rgba(15,23,42,.08);
                -webkit-overflow-scrolling: touch;
            }
            #sale-sub-nav::-webkit-scrollbar { display: none; }
            .sub-tab-btn {
                flex: 0 0 auto;
                padding: 9px 10px;
                border: 1px solid var(--border);
                border-radius: 10px;
                background: #fff;
                margin-bottom: 0;
                font-size: 9px;
                letter-spacing: 0;
            }
            .sub-tab-btn.active,
            .sub-tab-btn.active-green,
            .sub-tab-btn.active-orange,
            .sub-tab-btn.active-blue,
            .sub-tab-btn.active-purple {
                border-bottom-color: var(--border);
                box-shadow: 0 1px 4px rgba(15,23,42,.08);
            }
            #sale-sub-spacer { display: none; }
            #sale-top-actions {
                flex: 0 0 auto;
                padding-bottom: 0;
                gap: 6px;
            }
            .act-btn { padding: 9px 11px; font-size: 9px; border-radius: 10px; }

            #tab-input > .pt-4 {
                padding: 10px 8px 96px !important;
            }
            #main-paper {
                width: 100% !important;
                min-height: auto !important;
                padding: 14px !important;
                border-radius: 14px !important;
                box-shadow: none !important;
                overflow: hidden;
            }
            #main-paper h1 { font-size: 24px !important; }
            #paper-title { font-size: 17px !important; }
            #main-paper .border-b-4 { margin-bottom: 14px !important; padding-bottom: 12px !important; }
            #main-paper .flex.items-center.gap-3.mb-4 {
                align-items: flex-start !important;
                flex-direction: column;
                gap: 8px !important;
            }
            #cust-name {
                width: 100%;
                font-size: 18px !important;
                min-width: 0;
            }
            #main-paper table {
                display: block;
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                white-space: nowrap;
            }
            #main-paper thead,
            #main-paper tbody,
            #main-paper tfoot { min-width: 720px; }
            #main-paper th,
            #main-paper td { padding: 8px !important; }
            #main-paper input,
            #main-paper textarea {
                font-size: 16px !important;
            }
            #line-items input {
                min-height: 34px;
            }
            #main-paper .grid.grid-cols-2,
            #main-paper .mt-16.grid.grid-cols-2 {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
                margin-top: 18px !important;
            }
            #notes { height: 88px !important; }
            #final-total { font-size: 22px !important; }

            .two-col,
            .three-col {
                display: flex !important;
                flex-direction: column;
                height: auto !important;
                min-height: calc(100vh - var(--nav-h));
                padding: 10px !important;
                gap: 12px !important;
            }
            .two-col[style],
            .three-col[style] { grid-template-columns: none !important; }
            .panel {
                border-radius: 12px;
                min-height: 0;
                overflow: visible;
            }
            .panel-header { padding: 12px; }
            .panel-body {
                overflow: visible;
                max-height: none;
            }
            .panel-body[style] { padding: 12px !important; }
            .price-layout,
            .stats-layout {
                display: flex;
                flex-direction: column;
                height: auto;
                min-height: calc(100vh - var(--nav-h));
            }
            .price-sidebar,
            .stats-sidebar {
                width: auto;
                max-height: 42vh;
                border-right: 0;
                border-bottom: 1px solid var(--border);
            }
            .price-main,
            .stats-main {
                overflow: visible;
                min-height: 0;
            }
            .price-toolbar,
            .stats-toolbar {
                padding: 12px;
                align-items: stretch;
            }
            #debt-summary-cards {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 8px !important;
            }
            #debt-main-view,
            #price-main-view,
            #stats-main-view,
            #payment-delivery-list {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            #debt-main-view table,
            #price-main-view table,
            #stats-main-view table {
                min-width: 720px;
            }
            #debt-receipt-list {
                max-height: 260px !important;
            }
            #toast {
                width: calc(100vw - 24px);
                bottom: calc(72px + env(safe-area-inset-bottom)) !important;
                border-radius: 14px !important;
                padding: 12px 14px !important;
                text-align: center;
            }
            #sync-status {
                right: 8px !important;
                left: 8px !important;
                bottom: calc(8px + env(safe-area-inset-bottom)) !important;
                text-align: center;
            }
        }

    
        /* ── MC AUTOCOMPLETE STYLE V38 ── */
        .mc-customer-wrap{position:relative;flex:1;display:flex;align-items:center;gap:8px}
        .mc-customer-wrap input{flex:1}
        .mc-customer-arrow{width:34px;height:34px;border:1px solid #dbe3ef;border-radius:10px;background:#f8fafc;color:#334155;font-weight:900;cursor:pointer}
        .mc-customer-arrow:hover{background:#dbeafe;color:#1d4ed8}
        #mc-autocomplete-box{position:fixed;z-index:999999;background:white;border:1px solid #dbe3ef;border-radius:14px;box-shadow:0 18px 45px rgba(15,23,42,.22);max-height:280px;overflow:auto;display:none;min-width:260px}
        .mc-ac-item{display:block;width:100%;border:0;border-bottom:1px solid #f1f5f9;background:white;text-align:left;padding:11px 13px;font-size:12px;font-weight:900;text-transform:uppercase;color:#0f172a;cursor:pointer}
        .mc-ac-item:hover{background:#eff6ff;color:#1d4ed8}
        .mc-ac-empty{padding:12px 13px;font-size:12px;font-weight:800;color:#94a3b8}

/* V70 final override: keep action buttons visible and away from the invoice body */
@media (min-width: 901px) {
  #sale-top-actions { position: fixed !important; right: 22px !important; bottom: 22px !important; z-index: 180 !important; display: flex !important; flex-direction: column !important; width: 154px !important; gap: 8px !important; padding: 10px !important; border-radius: 18px !important; border: 1px solid rgba(148,163,184,.28) !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 18px 44px rgba(15,23,42,.18) !important; backdrop-filter: blur(14px) !important; }
  #sale-top-actions .act-btn { width: 100% !important; min-height: 42px !important; padding: 10px 12px !important; border-radius: 13px !important; font-size: 10px !important; margin: 0 !important; white-space: nowrap !important; }
  #sale-top-actions .act-btn.hidden { display: none !important; }
}
@media (max-width: 900px) {
  body { padding-bottom: calc(210px + env(safe-area-inset-bottom, 0px)) !important; }
  #sale-top-actions { position: fixed !important; left: 12px !important; right: 12px !important; bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important; z-index: 99998 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; padding: 8px !important; border-radius: 18px !important; border: 1px solid rgba(148,163,184,.22) !important; background: rgba(255,255,255,.98) !important; box-shadow: 0 18px 44px rgba(15,23,42,.22) !important; backdrop-filter: blur(14px) !important; }
  #sale-top-actions .act-btn { width: 100% !important; min-height: 42px !important; padding: 10px 7px !important; border-radius: 13px !important; font-size: 10px !important; margin: 0 !important; white-space: nowrap !important; }
  #sale-top-actions .act-btn.hidden { display: none !important; }
  #sale-top-actions:has(#print-btn.hidden) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #sync-status { z-index: 99990 !important; }
}


/* V67 sync status positioning fix */
@media (min-width: 901px) {
    #sync-status{
        right: 24px !important;
        bottom: 190px !important;
        z-index: 99999 !important;
    }
}

@media (max-width: 900px) {
    #sync-status{
        left: 12px !important;
        right: 12px !important;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        border-radius: 18px !important;
        z-index: 99999 !important;
    }

    #sale-top-actions{
        bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body{
        padding-bottom: calc(260px + env(safe-area-inset-bottom, 0px)) !important;
    }
}


/* V68 MOBILE BOTTOM BARS FINAL FIX
   Order from bottom to top on phone:
   1) Navigation bar
   2) Sync status
   3) New / Save / Print buttons
   This override is intentionally placed at the very end to beat older duplicated mobile rules. */
@media screen and (max-width: 900px) {
    :root { --mc-safe: env(safe-area-inset-bottom, 0px); }

    body {
        padding-bottom: calc(245px + var(--mc-safe)) !important;
        overflow-x: hidden !important;
    }

    #top-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(8px + var(--mc-safe)) !important;
        top: auto !important;
        height: 62px !important;
        min-height: 62px !important;
        z-index: 99970 !important;
        border-radius: 22px !important;
    }

    #sync-status {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: calc(78px + var(--mc-safe)) !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 18px !important;
        z-index: 99980 !important;
        pointer-events: none !important;
        transform: none !important;
    }
    #sync-status.hidden { display: none !important; }

    #sale-top-actions {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: calc(130px + var(--mc-safe)) !important;
        z-index: 99990 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px !important;
        margin: 0 !important;
        width: auto !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.98) !important;
        border: 1px solid rgba(148,163,184,.24) !important;
        box-shadow: 0 18px 44px rgba(15,23,42,.22) !important;
        backdrop-filter: blur(14px) !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #sale-top-actions .act-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 8px 6px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    #sale-top-actions .act-btn.hidden { display: none !important; }
    #sale-top-actions:has(#print-btn.hidden) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #tab-input > .pt-4 {
        padding-bottom: calc(260px + var(--mc-safe)) !important;
    }

    #toast {
        bottom: calc(78px + var(--mc-safe)) !important;
        z-index: 99985 !important;
    }
}

/* MC MOBILE ACTION/SYNC/NAV STACK FIX V69 - final override */
@media screen and (max-width: 900px) {
    :root { --mc-safe-bottom-v69: env(safe-area-inset-bottom, 0px); }

    body {
        padding-bottom: calc(250px + var(--mc-safe-bottom-v69)) !important;
        overflow-x: hidden !important;
    }

    #top-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(8px + var(--mc-safe-bottom-v69)) !important;
        top: auto !important;
        height: 62px !important;
        min-height: 62px !important;
        z-index: 99970 !important;
        border-radius: 22px !important;
    }

    #sync-status {
        position: fixed !important;
        left: 14px !important;
        right: 14px !important;
        top: auto !important;
        bottom: calc(78px + var(--mc-safe-bottom-v69)) !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 18px !important;
        z-index: 99980 !important;
        pointer-events: none !important;
        transform: none !important;
        margin: 0 !important;
    }
    #sync-status.hidden { display: none !important; }

    body > #sale-top-actions,
    #sale-top-actions[data-mobile-fixed="true"] {
        position: fixed !important;
        left: 14px !important;
        right: 14px !important;
        top: auto !important;
        bottom: calc(130px + var(--mc-safe-bottom-v69)) !important;
        z-index: 99995 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px !important;
        margin: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.98) !important;
        border: 1px solid rgba(148,163,184,.24) !important;
        box-shadow: 0 18px 44px rgba(15,23,42,.22) !important;
        backdrop-filter: blur(14px) !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    body > #sale-top-actions .act-btn,
    #sale-top-actions[data-mobile-fixed="true"] .act-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 8px 6px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    body > #sale-top-actions .act-btn.hidden,
    #sale-top-actions[data-mobile-fixed="true"] .act-btn.hidden { display: none !important; }

    body > #sale-top-actions:has(#print-btn.hidden),
    #sale-top-actions[data-mobile-fixed="true"]:has(#print-btn.hidden) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #tab-input > .pt-4 {
        padding-bottom: calc(266px + var(--mc-safe-bottom-v69)) !important;
    }
}

/* V226 mobile admin tab fit: keep all 7 bottom nav tabs inside 390px viewport. */
@media screen and (max-width: 900px) {
    #top-nav {
        overflow: hidden !important;
        padding: 0 !important;
    }

    #nav-tabs {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 62px !important;
        padding: 0 4px !important;
        gap: 1px !important;
        overflow: hidden !important;
        flex: none !important;
    }

    .nav-tab {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 62px !important;
        padding: 0 2px !important;
        border-radius: 16px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 3px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    .nav-tab svg {
        width: 17px !important;
        height: 17px !important;
    }
}

/* V226.10 mobile admin release fix.
   Keep session chips visible for QA while reserving enough space above the fixed bottom nav. */
@media screen and (max-width: 900px) {
    :root { --mc-v22610-safe: env(safe-area-inset-bottom, 0px); }

    body {
        padding-bottom: calc(172px + var(--mc-v22610-safe)) !important;
        overflow-x: hidden !important;
    }

    #top-nav {
        overflow: visible !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(8px + var(--mc-v22610-safe)) !important;
        height: 62px !important;
        min-height: 62px !important;
        z-index: 99970 !important;
    }

    #nav-tabs {
        height: 62px !important;
        padding: 0 4px !important;
        overflow: hidden !important;
    }

    #nav-actions {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(76px + var(--mc-v22610-safe)) !important;
        top: auto !important;
        z-index: 99990 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(92px, .9fr) minmax(72px, auto) !important;
        align-items: center !important;
        gap: 5px !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
        overflow: visible !important;
    }

    #nav-actions > * {
        pointer-events: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-shadow: 0 10px 26px rgba(15,23,42,.18) !important;
    }

    #sync-status,
    #role-badge,
    #logout-btn {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        width: auto !important;
        padding: 0 8px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        transform: none !important;
    }

    #sync-status.hidden,
    #role-badge.hidden,
    #logout-btn.hidden {
        display: none !important;
    }

    #unlock-status-btn {
        display: none !important;
    }

    #tab-admin {
        padding-bottom: calc(168px + var(--mc-v22610-safe)) !important;
        min-height: auto !important;
    }

    #tab-admin > .three-col {
        padding-bottom: calc(168px + var(--mc-v22610-safe)) !important;
        margin-bottom: 0 !important;
    }

    #tab-admin .panel:last-child {
        margin-bottom: calc(168px + var(--mc-v22610-safe)) !important;
    }

    #admin-status-box {
        padding-bottom: calc(156px + var(--mc-v22610-safe)) !important;
    }
}


/* V224C Promo two-column layout */
.promo-v224c-panel{max-width:1480px;margin:0 auto;}
.promo-v224c-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;color:#0f172a;}
.promo-v224c-head h2{font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;margin:0;}
.promo-v224c-head p{font-size:12px;font-weight:700;color:#64748b;margin-top:6px;}
.promo-v224c-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);gap:18px;align-items:start;}
.promo-v224c-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 10px 24px rgba(15,23,42,.05);overflow:hidden;}
.promo-card-title{display:flex;gap:12px;align-items:flex-start;padding:18px 20px;border-bottom:1px solid #e2e8f0;background:linear-gradient(180deg,#fff,#fbfdff);}
.promo-card-title>span{width:28px;height:28px;border-radius:10px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#334155;font-weight:900;}
.promo-card-title h3{margin:0;font-size:14px;font-weight:900;color:#0f172a;text-transform:uppercase;letter-spacing:.02em;}
.promo-card-title p{margin-top:4px;font-size:11px;font-weight:700;color:#64748b;}
.promo-history-card{position:sticky;top:88px;max-height:calc(100vh - 110px);display:flex;flex-direction:column;}
.promo-history-tools{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:12px;padding:16px 18px;border-bottom:1px solid #e2e8f0;background:#fff;}
.promo-history-tools input,.promo-history-tools select{height:44px;border:1px solid #dbe3ef;border-radius:12px;padding:0 14px;font-size:12px;font-weight:800;color:#0f172a;background:#fff;outline:none;}
.promo-history-list{padding:14px 18px;overflow:auto;}
.promo-history-empty{height:180px;display:flex;align-items:center;justify-content:center;text-align:center;color:#94a3b8;font-weight:800;border:1px dashed #dbe3ef;border-radius:16px;background:#f8fafc;}
.promo-history-item{border:1px solid #dbe3ef;border-radius:16px;background:#fff;padding:14px;margin-bottom:12px;box-shadow:0 6px 14px rgba(15,23,42,.035);}
.promo-history-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.promo-history-item-name{font-size:13px;font-weight:900;color:#0f172a;text-transform:uppercase;line-height:1.35;}
.promo-history-item-sub{font-size:12px;font-weight:850;color:#334155;margin-top:6px;}
.promo-history-meta{display:grid;gap:6px;margin-top:10px;font-size:11px;font-weight:800;color:#64748b;line-height:1.35;}
.promo-products-compact{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.promo-history-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px;}
.promo-history-actions .sm-btn{padding:9px 12px!important;font-size:10px!important;border-radius:10px!important;}
.promo-note-box{margin-top:14px;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:10px;padding:10px 12px;font-size:11px;font-weight:800;}
.promo-v224c-foot{margin-top:14px;color:#64748b;font-size:11px;font-weight:700;}
@media(max-width:1100px){.promo-v224c-layout{grid-template-columns:1fr}.promo-history-card{position:static;max-height:none}.promo-history-tools{grid-template-columns:1fr}}
@media(max-width:640px){.promo-v224c-panel{padding:0!important}.promo-v224c-head h2{font-size:16px}.promo-card-title{padding:14px}.promo-history-list{padding:12px}.promo-history-actions{justify-content:flex-start}}



/* === V224E PROMO 2-COLUMN LAYOUT RESTORE === */
#promo-mode-panel.promo-v224d-panel,
#promo-mode-panel.promo-v224e-panel {
  padding: 24px !important;
  background: #f1f5f9;
  min-height: calc(100vh - 120px);
}

.promo-v224d-head,
.promo-v224e-head {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 18px 22px;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.promo-v224d-head h2,
.promo-v224e-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.promo-v224d-head p,
.promo-v224e-head p {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

.promo-v224d-layout,
.promo-v224e-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr);
  gap: 18px;
  align-items: start;
  width: 100%;
}

.promo-v224d-card,
.promo-v224e-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.promo-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

.promo-card-title > span {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  font-size: 16px;
  flex: 0 0 auto;
}

.promo-card-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: .25px;
}

.promo-card-title p {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
}

.promo-history-card {
  position: sticky;
  top: 92px;
}

.promo-history-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px;
  padding: 16px 18px 8px;
}

.promo-history-tools input,
.promo-history-tools select {
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 13px;
  padding: 12px 14px;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  outline: none;
}

.promo-history-list {
  padding: 10px 18px 18px;
  max-height: calc(100vh - 245px);
  overflow-y: auto;
}

.promo-history-list > div {
  border-radius: 16px !important;
  margin-bottom: 12px !important;
  padding: 14px !important;
}

.promo-note-box {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
}

.promo-v224d-foot,
.promo-v224e-foot {
  margin-top: 14px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .promo-v224d-layout,
  .promo-v224e-layout {
    grid-template-columns: 1fr !important;
  }
  .promo-history-card {
    position: static;
  }
  .promo-history-list {
    max-height: 520px;
  }
}

@media (max-width: 720px) {
  #promo-mode-panel.promo-v224d-panel,
  #promo-mode-panel.promo-v224e-panel {
    padding: 12px !important;
  }
  .promo-history-tools {
    grid-template-columns: 1fr;
  }
}

/* === V226.29 targeted UI: promo in Price tab + Admin column 3/4 only === */
.promo-v230-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;}
.promo-v230-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.promo-sale-active-row{display:flex;align-items:center;gap:10px;margin-top:2px;padding:11px 12px;border:1px solid #bbf7d0;background:#f0fdf4;border-radius:13px;font-size:11px;font-weight:900;text-transform:uppercase;color:#15803d;}
.promo-sale-active-row input{width:16px;height:16px;accent-color:#16a34a;}
#promo-product-list label,#promo-product-list .promo-product-item{min-height:36px;}
.admin-account-card-v230{border:1px solid #dbeafe;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 18px rgba(15,23,42,.035);}
.admin-account-head-v230{display:flex;align-items:center;gap:12px;padding:15px;background:linear-gradient(135deg,#eff6ff,#ffffff);border-bottom:1px solid #e5e7eb;}
.admin-account-head-v230 b{font-size:12px;font-weight:900;color:#2563eb;text-transform:uppercase;}
.admin-account-head-v230 p{font-size:10px;font-weight:800;color:#64748b;margin-top:2px;}
.admin-account-avatar-v230{width:34px;height:34px;border-radius:999px;background:#2563eb;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.admin-account-row-v230{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;border-bottom:1px solid #eef2f7;font-size:11px;}
.admin-account-row-v230 span{font-weight:800;color:#64748b;}
.admin-account-row-v230 b{font-weight:900;color:#0f172a;word-break:break-all;text-align:right;}
.admin-mobile-logout-v230{display:none!important;}
.admin-log-tools-v230{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:10px;}
.admin-log-tools-v230 input,.admin-log-tools-v230 select{width:100%;border:1px solid #dbe3ef;border-radius:11px;padding:9px 10px;font-size:10px;font-weight:800;color:#0f172a;background:#fff;outline:none;}
.admin-log-date-row-v230{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.admin-log-filter-pills-v230{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px;}
.admin-log-filter-pills-v230 button{border:1px solid #e2e8f0;background:#f8fafc;color:#475569;border-radius:999px;padding:5px 9px;font-size:9px;font-weight:900;text-transform:uppercase;cursor:pointer;}
.admin-log-filter-pills-v230 button.active{background:#2563eb;border-color:#2563eb;color:#fff;}
.admin-delete-log-card-v230{background:#fff;border:1px solid #e2e8f0;border-left:4px solid #ef4444;border-radius:13px;padding:11px 12px;margin-bottom:9px;box-shadow:0 4px 12px rgba(15,23,42,.035);}
.admin-delete-log-card-v230 .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.admin-delete-log-card-v230 .badge{display:inline-flex;align-items:center;gap:5px;background:#fef2f2;color:#dc2626;border-radius:999px;padding:3px 8px;font-size:9px;font-weight:900;text-transform:uppercase;}
.admin-delete-log-card-v230 .time{font-size:9px;font-weight:800;color:#94a3b8;text-align:right;}
.admin-delete-log-card-v230 .title{font-size:12px;font-weight:900;color:#0f172a;margin-top:7px;line-height:1.35;}
.admin-delete-log-card-v230 .meta{font-size:10px;font-weight:800;color:#64748b;margin-top:4px;line-height:1.45;}
.admin-delete-log-card-v230 .user{font-size:9px;font-weight:800;color:#94a3b8;margin-top:5px;word-break:break-all;}
@media(max-width:720px){.promo-v230-head{align-items:flex-start!important;flex-direction:column!important}.promo-v230-actions{width:100%;justify-content:stretch}.promo-v230-actions .sm-btn{flex:1}.admin-mobile-logout-v230{display:block!important}.admin-log-date-row-v230{grid-template-columns:1fr}.admin-account-row-v230{align-items:flex-start;flex-direction:column}.admin-account-row-v230 b{text-align:left}}


/* === V226.29 typography restore from V224 ===
   Khôi phục font chữ hệ thống giống V224: Be Vietnam Pro.
   Không đổi layout/chức năng, chỉ chuẩn hóa font-family để tránh chữ đậm/lợt không đồng bộ. */
html, body, #app, #main-app, .tab-content, .panel, .card, .invoice-paper,
button, input, select, textarea, label, table, th, td, div, span, p,
h1, h2, h3, h4, h5, h6, b, strong, a {
  font-family: 'Be Vietnam Pro', Arial, Tahoma, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: 'Be Vietnam Pro', Arial, Tahoma, sans-serif !important;
}
/* Giữ cảm giác chữ của V224: heading rõ, subtitle mềm, không ép Arial/Segoe. */
.panel-title {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
}
.panel-subtitle {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 2px;
}
/* Các khu vực mới dùng cùng font V224, chỉ giới hạn weight bất thường 950/1000 nếu có. */
[style*="font-weight:950"],
[style*="font-weight: 950"],
[style*="font-weight:1000"],
[style*="font-weight: 1000"] {
  font-weight: 900 !important;
}
.promo-v230-head,
.promo-v230-head *,
.promo-v224c-head,
.promo-v224c-head *,
.promo-card-title,
.promo-card-title *,
.promo-history-item-v230,
.promo-history-item-v230 *,
.admin-account-card-v230,
.admin-account-card-v230 *,
.admin-log-panel-v230,
.admin-log-panel-v230 *,
.admin-delete-log-card-v230,
.admin-delete-log-card-v230 * {
  font-family: 'Be Vietnam Pro', Arial, Tahoma, sans-serif !important;
}



/* === V226.29 targeted cleanup: Admin action history compact + History readability === */
.admin-log-filter-pills-v230{display:none!important;}
#admin-log-type option[value=""]{color:#64748b;}
#hist-selected-cust{color:#0f172a!important;font-weight:800!important;}
#hist-selected-sub{color:#64748b!important;font-weight:600!important;}


/* === V226.29 mobile cleanup: bỏ cụm sync/role/logout nổi, gọn lịch sử thao tác === */
@media (max-width: 900px) {
  /* Cụm "Đã đồng bộ / tài khoản - quyền / Đăng xuất" không hiển thị nổi trên mobile.
     Các thông tin này đã có trong tab Quản trị > Tài khoản & Bảo mật. */
  #nav-actions,
  #nav-actions > *,
  #sync-status,
  #role-badge,
  #logout-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Sau khi bỏ cụm nổi, đưa cụm nút bán hàng xuống gần thanh menu dưới hơn. */
  #sale-top-actions {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body {
    padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 720px) {
  /* Lịch sử thao tác: hai ô ngày luôn cùng một dòng trên mobile cho gọn. */
  .admin-log-date-row-v230 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .admin-log-date-row-v230 input {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* === V226.29: Khuyến mãi product list compact + History customer card whole-row click === */
#promo-product-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
#promo-product-list label,
#promo-product-list .promo-product-item {
  min-height: 38px !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.15 !important;
}
#promo-product-list input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
}
@media (max-width: 720px) {
  #promo-product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #promo-product-list label,
  #promo-product-list .promo-product-item {
    min-height: 40px !important;
    padding: 8px 10px !important;
  }
}
.mc-history-customer-clickable-v22628 {
  cursor: pointer !important;
}
.mc-history-customer-clickable-v22628:hover {
  background: #f8fafc !important;
}
.mc-history-customer-clickable-v22628 .mc-history-select-card-v22628 {
  cursor: pointer !important;
}

/* V226.29 - editable day separator note */
.row-date-header .header-name-input::placeholder{color:#94a3b8;font-weight:700;letter-spacing:.03em;}
.row-date-header .header-name-input{min-height:28px;}
@media print{.row-date-header .header-name-input::placeholder{color:transparent!important;}}


/* === V226.32: History selected hover + red inactive strike + Admin log mobile date hint === */
#hist-cust-list .mc-history-customer-clickable-v22628.bg-blue-600,
#hist-cust-list .mc-history-customer-clickable-v22628.bg-blue-600:hover,
#hist-cust-list .mc-history-customer-clickable-v22628.bg-blue-600:hover button,
#hist-cust-list .mc-history-active-customer-v22630,
#hist-cust-list .mc-history-active-customer-v22630:hover,
#hist-cust-list .mc-history-active-customer-v22630:hover button {
  background: #2563eb !important;
  color: #ffffff !important;
}
#hist-cust-list .mc-history-customer-clickable-v22628.bg-blue-600 button,
#hist-cust-list .mc-history-active-customer-v22630 button {
  background: transparent !important;
  color: #ffffff !important;
}
#hist-cust-list .mc-history-customer-clickable-v22628:not(.bg-blue-600):not(.mc-history-active-customer-v22630):hover {
  background: #f8fafc !important;
}
#hist-cust-list .mc-history-inactive-customer-v22630 span.font-black,
#hist-cust-list .mc-history-inactive-customer-v22630 .line-through,
#hist-cust-list span.line-through,
#hist-selected-cust.line-through {
  text-decoration-color: #ef4444 !important;
  text-decoration-thickness: 2px !important;
  text-decoration-line: line-through !important;
}
#hist-cust-list .mc-history-inactive-customer-v22630 .mc-inactive-badge,
#hist-cust-list .mc-history-inactive-customer-v22630 .mc-v206-inactive-badge {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}
.admin-log-date-row-v230 .mc-admin-date-hint-v22630 {
  grid-column: 1 / -1;
  margin-top: -2px;
  color: #94a3b8;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
@media (max-width: 720px) {
  .admin-log-date-row-v230 .mc-admin-date-hint-v22630 {
    display: block !important;
  }
  .admin-log-date-row-v230 input[type="date"]::before {
    content: attr(aria-label);
    color: #94a3b8;
    font-size: 9px;
    font-weight: 800;
    margin-right: 4px;
  }
}
@media (min-width: 721px) {
  .admin-log-date-row-v230 .mc-admin-date-hint-v22630 {
    display: none !important;
  }
}


/* === V226.32: chỉ khách hàng ngưng HĐ mới gạch đỏ; khách hoạt động không bị gạch === */
#hist-cust-list .mc-history-customer-clickable-v22628:not(.mc-history-inactive-customer-v22630) span.font-black,
#hist-cust-list .mc-history-customer-clickable-v22628:not(.mc-history-inactive-customer-v22630) .mc-history-select-card-v22628,
#hist-cust-list .mc-history-customer-clickable-v22628:not(.mc-history-inactive-customer-v22630) button {
  text-decoration: none !important;
  text-decoration-line: none !important;
}
#hist-cust-list .mc-history-inactive-customer-v22630 span.font-black {
  text-decoration-line: line-through !important;
  text-decoration-color: #ef4444 !important;
  text-decoration-thickness: 2px !important;
}
#hist-cust-list .mc-history-active-customer-v22630,
#hist-cust-list .mc-history-active-customer-v22630:hover,
#hist-cust-list .mc-history-active-customer-v22630 button,
#hist-cust-list .mc-history-active-customer-v22630:hover button {
  background:#2563eb !important;
  color:#fff !important;
}

/* V226.35 - cancel phieu modal polish */
.mc-cancel-modal{
  font-family:'Be Vietnam Pro', sans-serif;
}
.mc-cancel-icon{
  width:34px;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#fee2e2;color:#dc2626;border:1px solid #fecaca;
  font-weight:800;font-size:18px;line-height:1;
  flex:0 0 auto;
}
.mc-cancel-close{
  width:32px;height:32px;border-radius:999px;border:1px solid #e5e7eb;
  color:#64748b;background:#fff;font-size:20px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.mc-cancel-close:hover{background:#f8fafc;color:#0f172a;}
.mc-cancel-warning{
  background:#fff1f2;border:1px solid #fecdd3;border-radius:14px;padding:14px;
}
.mc-cancel-textarea{
  border-color:#e2e8f0;color:#0f172a;background:#fff;line-height:1.5;
}
.mc-cancel-textarea::placeholder{color:#94a3b8;font-weight:600;}
.mc-cancel-secondary,
.mc-cancel-danger{
  border-radius:14px;padding:13px 14px;font-size:12px;font-weight:800;text-transform:uppercase;
  min-height:46px;display:flex;align-items:center;justify-content:center;
}
.mc-cancel-secondary{border:2px solid #e2e8f0;background:#fff;color:#334155;}
.mc-cancel-secondary:hover{background:#f8fafc;border-color:#cbd5e1;}
.mc-cancel-danger{border:2px solid #dc2626;background:#dc2626;color:#fff;box-shadow:0 8px 18px rgba(220,38,38,.18);}
.mc-cancel-danger:hover{background:#b91c1c;border-color:#b91c1c;}
@media(max-width:640px){
  .mc-cancel-modal{max-width:calc(100vw - 24px);}
  .mc-cancel-secondary,.mc-cancel-danger{font-size:11px;padding:12px 10px;}
}

/* === V226.35: Data cleanup dialog in Admin danger area === */
.cleanup-choice-card{display:flex;flex-direction:column;gap:7px;text-align:left;border:1px solid #fed7aa;background:#fff7ed;border-radius:16px;padding:14px;color:#9a3412;cursor:pointer;transition:.15s ease;font-family:'Be Vietnam Pro',sans-serif}
.cleanup-choice-card:hover{border-color:#fb923c;box-shadow:0 8px 20px rgba(249,115,22,.12);transform:translateY(-1px)}
.cleanup-choice-card b{font-size:12px;font-weight:800;text-transform:uppercase;color:#c2410c}
.cleanup-choice-card span{font-size:11px;font-weight:600;line-height:1.55;color:#9a3412}
.cleanup-preview-card{border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:14px;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.cleanup-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid #e2e8f0;padding-bottom:10px;margin-bottom:10px}
.cleanup-preview-head b{font-size:13px;font-weight:800;text-transform:uppercase;color:#0f172a}.cleanup-preview-head p{font-size:11px;font-weight:600;color:#64748b;margin-top:2px;line-height:1.45}.cleanup-preview-head span{background:#fee2e2;color:#b91c1c;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800;white-space:nowrap}
.cleanup-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}.cleanup-summary span{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px 10px;font-size:11px;font-weight:600;color:#475569}.cleanup-summary b{color:#0f172a;font-weight:800}
.cleanup-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}.cleanup-toolbar button{border:1px solid #cbd5e1;background:#fff;border-radius:10px;padding:8px 10px;font-size:10px;font-weight:800;color:#0f172a;text-transform:uppercase}.cleanup-toolbar b{margin-left:auto;font-size:11px;color:#15803d;font-weight:800}
.cleanup-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:280px;overflow:auto;padding-right:4px}.cleanup-row{display:flex;align-items:center;gap:9px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:9px 10px;font-size:11px;font-weight:800;color:#0f172a;cursor:pointer}.cleanup-row input{width:15px;height:15px;accent-color:#16a34a}.cleanup-row:hover{border-color:#93c5fd;background:#eff6ff}
.cleanup-warning{margin-top:12px;border:1px solid #fecaca;background:#fef2f2;color:#b91c1c;border-radius:12px;padding:10px 12px;font-size:11px;font-weight:700;line-height:1.55}.cleanup-danger-btn{margin-top:10px;width:100%;border:0;border-radius:12px;background:#dc2626;color:white;padding:12px;font-size:11px;font-weight:900;text-transform:uppercase;cursor:pointer}.cleanup-danger-btn:hover{background:#b91c1c}.cleanup-empty{border:1px dashed #cbd5e1;background:#f8fafc;border-radius:14px;padding:20px;text-align:center;color:#64748b;font-size:12px;font-weight:700}
@media(max-width:768px){.cleanup-summary,.cleanup-list{grid-template-columns:1fr}.cleanup-toolbar b{width:100%;margin-left:0}.cleanup-choice-card{padding:12px}}

/* V226.37 - Data cleanup gate: deleted customer cleanup is enabled only after test-customer cleanup */
.cleanup-choice-card.cleanup-choice-disabled,
.cleanup-choice-card:disabled{
  opacity:.58;
  cursor:not-allowed;
  filter:grayscale(.15);
  background:#f8fafc !important;
  border-color:#e2e8f0 !important;
  color:#94a3b8 !important;
  transform:none !important;
  box-shadow:none !important;
}
.cleanup-choice-card.cleanup-choice-disabled b,
.cleanup-choice-card:disabled b{
  color:#94a3b8 !important;
}
.cleanup-choice-card.cleanup-choice-disabled span,
.cleanup-choice-card:disabled span{
  color:#94a3b8 !important;
}
.cleanup-choice-card em{
  display:block;
  margin-top:3px;
  font-style:normal;
  font-size:10px;
  font-weight:700;
  color:#64748b;
  line-height:1.45;
}
.cleanup-choice-card:not(:disabled) em{
  color:#15803d;
}