/* === CRITICAL CSS =========================== */

        /* -- Critical Design Tokens (inline for FOUC prevention) -- */
        :root {
            --clr-bg:             #F6F7F9;
            --clr-surface:        #FFFFFF;
            --clr-border:         #D7DEE7;
            --clr-border-light:   #EEF2F6;
            --clr-divider:        #E7ECF2;
            --clr-text-primary:   #0F172A;
            --clr-text-secondary: #3D4F5F;
            --clr-primary:        #2F6FEB;
            --clr-primary-bg:     #EAF2FF;
            --clr-gold-light:     #D4AF37;
            --clr-success:        #2E7D32;
            --clr-shimmer-from:   #EEF2F6;
            --clr-shimmer-mid:    #D7DEE7;
            --clr-text-inverse:   #FFFFFF;

            /* -- 10x10 Grid Tokens -- */
            --grid-header-bg:         #1E293B; /* Slate 800 - trung tính, sang trọng */
            --grid-header-text:       #FFFFFF;
            --grid-border:            #E2E8F0;
            --grid-cell-bg-empty:     #F8FAFC;
            --grid-cell-text-empty:   #94A3B8;
            --grid-cell-bg-hasdata:   #FFFFFF;
            --grid-cell-text-hasdata: #1E40AF; /* Blue 800 - tương phản cao */
            --grid-cell-hover-bg:     #EFF6FF; /* Blue 50 */
            --grid-cell-text-freq:    #EF4444; /* Red 500 */

            /* -- Danger Levels (Dùng cho Cầu Loại / Bản đồ nguy hiểm) -- */
            --grid-danger-red-bg:     #FEE2E2; /* Red 100 */
            --grid-danger-red-text:   #991B1B; /* Red 800 */
            --grid-danger-red-border: #FCA5A5; /* Red 300 */

            --grid-danger-orange-bg:     #FFEDD5; /* Orange 100 */
            --grid-danger-orange-text:   #9A3412; /* Orange 800 */
            --grid-danger-orange-border: #FDBA74; /* Orange 300 */

            --grid-danger-yellow-bg:     #FEF9C3; /* Yellow 100 */
            --grid-danger-yellow-text:   #854D0E; /* Yellow 800 */
            --grid-danger-yellow-border: #FDE047; /* Yellow 300 */

            --grid-danger-green-bg:     #DCFCE7; /* Green 100 */
            --grid-danger-green-text:   #166534; /* Green 800 */
            --grid-danger-green-border: #86EFAC; /* Green 300 */
        }

        .dark {
            --clr-bg:             #12161C;
            --clr-surface:        #171C23;
            --clr-border:         #2B3442;
            --clr-border-light:   #313B49;
            --clr-divider:        #313B49;
            --clr-text-primary:   #F1F5F9;
            --clr-text-secondary: #C8D3E0;
            --clr-primary:        #7DB2FF;
            --clr-primary-bg:     #1A2A42;
            --clr-gold-light:     #D4AF37;
            --clr-success:        #4ADE80;
            --clr-shimmer-from:   #1D2430;
            --clr-shimmer-mid:    #2B3442;
            --clr-text-inverse:   #FFFFFF;

            /* -- 10x10 Grid Tokens - Dark Mode Overrides (Muted & Dịu mắt) -- */
            --grid-header-bg:         #0F172A; /* Slate 900 */
            --grid-header-text:       #E2E8F0;
            --grid-border:            #334155;
            --grid-cell-bg-empty:     #1E293B; /* Slate 800 */
            --grid-cell-text-empty:   #64748B;
            --grid-cell-bg-hasdata:   #1E293B;
            --grid-cell-text-hasdata: #60A5FA; /* Blue 400 - sáng rõ trên nền tối */
            --grid-cell-hover-bg:     #2563EB33; /* Xanh mờ */
            --grid-cell-text-freq:    #F43F5E; /* Rose 500 - dịu mắt hơn đỏ tươi */

            /* -- Danger Levels - Dark Mode (Muted backgrounds & High-contrast text) -- */
            --grid-danger-red-bg:     #450A0A; /* Đỏ tối */
            --grid-danger-red-text:   #FECACA; /* Hồng nhạt */
            --grid-danger-red-border: #7F1D1D;

            --grid-danger-orange-bg:     #431407; /* Cam tối */
            --grid-danger-orange-text:   #FED7AA; /* Cam nhạt */
            --grid-danger-orange-border: #7C2D12;

            --grid-danger-yellow-bg:     #3F2E08; /* Vàng tối */
            --grid-danger-yellow-text:   #FEF08A; /* Vàng nhạt */
            --grid-danger-yellow-border: #713F12;

            --grid-danger-green-bg:     #062F17; /* Lục tối */
            --grid-danger-green-text:   #BBF7D0; /* Lục nhạt */
            --grid-danger-green-border: #14532D;
        }

        /* -- Background opacity class overrides in dark mode -- */
        .dark .bg-gray-50\/50,
        .dark .bg-slate-50\/50,
        .dark .bg-gray-50\/30,
        .dark .bg-gray-50\/80,
        .dark .bg-gray-100\/50,
        .dark .bg-slate-100\/50,
        .dark .hover\:bg-gray-50\/50:hover {
            background-color: var(--clr-surface) !important;
        }
        .dark .bg-red-50\/50,
        .dark .bg-red-50\/30,
        .dark .bg-red-50\/20,
        .dark .bg-red-100\/20,
        .dark .bg-red-500\/10,
        .dark .hover\:bg-red-50\/30:hover,
        .dark .hover\:bg-red-50\/20:hover {
            background-color: rgba(239, 68, 68, 0.15) !important;
        }
        .dark .bg-blue-50\/50,
        .dark .bg-blue-50\/40,
        .dark .bg-blue-50\/30,
        .dark .bg-blue-100\/20,
        .dark .bg-blue-950\/20,
        .dark .hover\:bg-blue-50\/30:hover {
            background-color: rgba(37, 99, 235, 0.15) !important;
        }
        .dark .bg-green-50\/50,
        .dark .bg-emerald-50\/50,
        .dark .bg-green-100\/40,
        .dark .bg-green-950\/40,
        .dark .bg-green-500\/10,
        .dark .bg-emerald-800\/50,
        .dark .bg-emerald-800\/20 {
            background-color: rgba(16, 185, 129, 0.15) !important;
        }
        .dark .bg-yellow-50\/50,
        .dark .bg-amber-50\/50,
        .dark .bg-amber-950\/30,
        .dark .bg-amber-950\/40,
        .dark .bg-amber-500\/10 {
            background-color: rgba(245, 158, 11, 0.15) !important;
        }
        .dark .bg-purple-50\/50,
        .dark .bg-violet-50\/50,
        .dark .bg-purple-50\/30,
        .dark .bg-violet-50\/30,
        .dark .bg-purple-100\/20,
        .dark .bg-violet-100\/20,
        .dark .bg-purple-950\/40,
        .dark .bg-violet-950\/40 {
            background-color: rgba(139, 92, 246, 0.15) !important;
        }
        .dark .bg-indigo-50\/60,
        .dark .bg-indigo-50\/40,
        .dark .bg-indigo-100\/20,
        .dark .bg-indigo-950\/20 {
            background-color: rgba(79, 70, 229, 0.15) !important;
        }
        .dark .bg-teal-50\/50,
        .dark .bg-teal-100\/20 {
            background-color: rgba(20, 184, 166, 0.15) !important;
        }
        .dark .bg-cyan-50\/50,
        .dark .bg-sky-50\/50,
        .dark .bg-sky-50\/30,
        .dark .bg-cyan-100\/20,
        .dark .bg-sky-100\/20 {
            background-color: rgba(6, 182, 212, 0.15) !important;
        }

        .dark .bg-gray-50,
        .dark .bg-slate-50,
        .dark .bg-gray-100,
        .dark .bg-slate-100 {
            background-color: rgba(255, 255, 255, 0.04) !important;
        }
        .dark .bg-gray-200,
        .dark .bg-slate-200 {
            background-color: rgba(255, 255, 255, 0.08) !important;
        }
        .dark .bg-gray-300,
        .dark .bg-slate-300 {
            background-color: rgba(255, 255, 255, 0.15) !important;
        }

        /* Solid Reds / Roses / Pinks / Fuchsias */
        .dark .bg-red-50,
        .dark .bg-rose-50,
        .dark .bg-pink-50,
        .dark .bg-red-100,
        .dark .bg-rose-100,
        .dark .bg-pink-100,
        .dark .bg-fuchsia-50,
        .dark .bg-fuchsia-100 {
            background-color: rgba(244, 63, 94, 0.15) !important;
        }
        .dark .bg-red-200,
        .dark .bg-rose-200,
        .dark .bg-pink-200,
        .dark .bg-fuchsia-200 {
            background-color: rgba(244, 63, 94, 0.25) !important;
        }

        /* Purples / Violets */
        .dark .bg-purple-50,
        .dark .bg-violet-50,
        .dark .bg-purple-100,
        .dark .bg-violet-100 {
            background-color: rgba(139, 92, 246, 0.15) !important;
        }
        .dark .bg-purple-200,
        .dark .bg-violet-200 {
            background-color: rgba(139, 92, 246, 0.25) !important;
        }

        /* Oranges / Ambers / Yellows */
        .dark .bg-orange-50,
        .dark .bg-amber-50,
        .dark .bg-yellow-50,
        .dark .bg-orange-100,
        .dark .bg-amber-100,
        .dark .bg-yellow-100 {
            background-color: rgba(245, 158, 11, 0.12) !important;
        }
        .dark .bg-orange-200,
        .dark .bg-amber-200,
        .dark .bg-yellow-200 {
            background-color: rgba(245, 158, 11, 0.22) !important;
        }

        /* Blues / Indigos / Cyans / Sky */
        .dark .bg-blue-50,
        .dark .bg-indigo-50,
        .dark .bg-blue-100,
        .dark .bg-indigo-100,
        .dark .bg-cyan-50,
        .dark .bg-sky-50,
        .dark .bg-cyan-100,
        .dark .bg-sky-100 {
            background-color: rgba(59, 130, 246, 0.12) !important;
        }
        .dark .bg-blue-200,
        .dark .bg-indigo-200,
        .dark .bg-cyan-200,
        .dark .bg-sky-200 {
            background-color: rgba(59, 130, 246, 0.22) !important;
        }

        /* Greens / Emeralds / Teals */
        .dark .bg-green-50,
        .dark .bg-emerald-50,
        .dark .bg-teal-50,
        .dark .bg-green-100,
        .dark .bg-emerald-100,
        .dark .bg-teal-100 {
            background-color: rgba(16, 185, 129, 0.12) !important;
        }
        .dark .bg-green-200,
        .dark .bg-emerald-200,
        .dark .bg-teal-200 {
            background-color: rgba(16, 185, 129, 0.22) !important;
        }

        /* Border Overrides in Dark Mode */
        .dark .border-gray-100,
        .dark .border-slate-100,
        .dark .border-gray-200,
        .dark .border-slate-200,
        .dark .border-gray-300,
        .dark .border-slate-300 {
            border-color: var(--clr-border) !important;
        }
        .dark .border-rose-100,
        .dark .border-rose-200,
        .dark .border-pink-100,
        .dark .border-pink-200,
        .dark .border-red-100,
        .dark .border-red-200 {
            border-color: rgba(244, 63, 94, 0.25) !important;
        }
        .dark .border-purple-100,
        .dark .border-purple-200,
        .dark .border-violet-100,
        .dark .border-violet-200 {
            border-color: rgba(139, 92, 246, 0.25) !important;
        }
        .dark .border-orange-100,
        .dark .border-orange-200,
        .dark .border-amber-100,
        .dark .border-amber-200 {
            border-color: rgba(245, 158, 11, 0.2) !important;
        }
        .dark .border-blue-100,
        .dark .border-blue-200,
        .dark .border-indigo-100,
        .dark .border-indigo-200 {
            border-color: rgba(59, 130, 246, 0.2) !important;
        }
        .dark .border-green-100,
        .dark .border-green-200,
        .dark .border-emerald-100,
        .dark .border-emerald-200 {
            border-color: rgba(16, 185, 129, 0.2) !important;
        }

        /* Text Overrides for Dark Mode Utility Colors */
        .dark .text-gray-700,
        .dark .text-slate-700,
        .dark .text-gray-800,
        .dark .text-slate-800 {
            color: #cbd5e1 !important;
        }
        .dark .text-gray-600,
        .dark .text-slate-600 {
            color: #94a3b8 !important;
        }
        .dark .text-red-700,
        .dark .text-rose-700,
        .dark .text-pink-700,
        .dark .text-fuchsia-700,
        .dark .text-red-800,
        .dark .text-rose-800,
        .dark .text-pink-800,
        .dark .text-fuchsia-800 {
            color: #fda4af !important;
        }
        .dark .text-purple-700,
        .dark .text-violet-700,
        .dark .text-purple-800,
        .dark .text-violet-800 {
            color: #c084fc !important;
        }
        .dark .text-orange-700,
        .dark .text-amber-700,
        .dark .text-yellow-700,
        .dark .text-orange-800,
        .dark .text-amber-800,
        .dark .text-yellow-800 {
            color: #fde047 !important;
        }
        .dark .text-blue-700,
        .dark .text-indigo-700,
        .dark .text-blue-800,
        .dark .text-indigo-800 {
            color: #93c5fd !important;
        }
        .dark .text-green-700,
        .dark .text-emerald-700,
        .dark .text-teal-700,
        .dark .text-green-800,
        .dark .text-emerald-800,
        .dark .text-teal-800 {
            color: #86efac !important;
        }


        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        html {
            font-size: 16px;
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%
        }

        body {
            font-family: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
            font-size: 1rem;
            line-height: 1.6;
            color: var(--clr-text-primary);
            background-color: var(--clr-bg);
            min-height: 100vh;
            overflow-x: hidden;
            padding-bottom: 68px;
        }

        @media(min-width:1024px) {
            body {
                padding-bottom: 0
            }
        }

        .container {
            width: 100%;
            margin-inline: auto;
            padding-inline: 1rem;
        }

        @media(min-width:640px) {
            .container {
                max-width: 640px;
                padding-inline: 1.5rem
            }
        }

        @media(min-width:768px) {
            .container {
                max-width: 768px;
            }
        }

        @media(min-width:1024px) {
            .container {
                max-width: 1024px;
                padding-inline: 2rem
            }
        }

        @media(min-width:1200px) {
            .container {
                max-width: 1200px;
            }
        }

        @media(min-width:1440px) {
            .container {
                max-width: 1440px;
            }
        }

        @media(min-width:1600px) {
            .container {
                max-width: 1600px;
            }
        }

        @media(min-width:1920px) {
            .container {
                max-width: 1920px;
            }
        }

        @media(min-width:2560px) {
            .container {
                max-width: 2560px;
            }
        }


        .deferred-content {
            visibility: hidden
        }

        #sw-toast,
        #offline-bar,
        #pwa-install-bar {
            display: none
        }
    
/* === FONT RESIZER: CSS Overrides ======================= */

        :root {
            --text-scale: 1.0;
        }

        /* Scale html font-size → tự động scale mọi phần tử dùng rem (Tailwind + custom) */
        html {
            font-size: calc(16px * var(--text-scale)) !important;
        }

        /* Override các class kết quả xổ số dùng px tuyệt đối */
        .kq-text-md {
            font-size: calc(16px * var(--text-scale)) !important;
        }
        .kq-text-lg {
            font-size: calc(20px * var(--text-scale)) !important;
        }
        .kq-text-xl {
            font-size: calc(28px * var(--text-scale)) !important;
        }

        /* Hỗ trợ thêm các ô giải phụ */
        .txt-giai, .txt-thuong, .table-ketqua td {
            font-size: calc(100% * var(--text-scale)) !important;
        }

        /* Style cho nút điều khiển cỡ chữ - Desktop */
        .font-resize-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid var(--clr-border);
            background: var(--clr-surface);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--clr-text-secondary);
            font-family: 'Be Vietnam Pro', system-ui, sans-serif;
            line-height: 1;
            padding: 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }
        .font-resize-btn:hover {
            border-color: var(--clr-primary);
            color: var(--clr-primary);
            background: var(--clr-primary-bg);
            transform: scale(1.1);
            box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
        }
        .font-resize-btn:active {
            transform: scale(0.95);
        }
        .font-resize-btn.is-active {
            border-color: var(--clr-primary);
            background: var(--clr-primary);
            color: var(--clr-text-inverse);
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
        }
        .font-resize-btn--sm { font-size: 11px; }
        .font-resize-btn--md { font-size: 13px; }
        .font-resize-btn--lg { font-size: 14px; }

        /* Style cho nút điều khiển cỡ chữ - Mobile */
        .font-resize-mobile {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            margin: 4px 8px 8px;
            background: linear-gradient(135deg, var(--clr-primary-bg) 0%, var(--clr-border-light, #e8f4f8) 100%);
            border: 1.5px solid var(--clr-border-light, #dbeafe);
            border-radius: 10px;
        }
        .font-resize-mobile-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 600;
            color: var(--clr-text-primary);
        }
        .font-resize-mobile-controls {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .font-resize-mobile-btn {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            border: 1.5px solid var(--clr-border);
            background: var(--clr-surface);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--clr-text-secondary);
            font-family: 'Be Vietnam Pro', system-ui, sans-serif;
            line-height: 1;
            padding: 0;
        }
        .font-resize-mobile-btn:active {
            transform: scale(0.92);
            background: var(--clr-primary-bg);
        }
        .font-resize-mobile-btn.is-active {
            border-color: var(--clr-primary);
            background: var(--clr-primary);
            color: var(--clr-text-inverse);
        }
        .font-resize-mobile-btn--sm { font-size: 12px; }
        .font-resize-mobile-btn--md { font-size: 14px; }
        .font-resize-mobile-btn--lg { font-size: 15px; }
        .font-resize-indicator {
            font-size: 11px;
            font-weight: 600;
            color: var(--clr-text-secondary);
            min-width: 36px;
            text-align: center;
            background: var(--clr-surface);
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid var(--clr-border-light);
        }
        
        /* Mở rộng vùng chạm (touch target) cho chấm cảnh báo loto gan trên thiết bị di động */
        .gan-warning-dot {
            cursor: pointer;
        }
        .gan-warning-dot::before {
            content: '' !important;
            position: absolute !important;
            top: -12px !important;
            left: -12px !important;
            right: -12px !important;
            bottom: -12px !important;
            z-index: 5 !important;
        }