:root {
    --bs-primary: #001976;
    --bs-primary-rgb: 0, 25, 118;
    --primary-container: #0029ad;
    --on-primary-container: #91a1ff;
    --secondary: #bb0014;
    --background: #f5faff;
    --surface: #f5faff;
    --surface-container-highest: #dbe4ea;
    --surface-container: #e7eff6;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #edf5fc;
    --surface-blue: #E6EAF7;
    --border-neutral: #D1D9E6;
    --on-surface: #151d22;
    --on-surface-variant: #444654;
    --accent-gold: #FFECA0;
    --inverse-surface: #293137;
    --inverse-on-surface: #eaf2f9;

    --font-body: 'Inter', sans-serif;
    --font-headline: 'Hanken Grotesk', sans-serif;
    --font-label: 'IBM Plex Sans', sans-serif;
}

body {
    background-color: var(--background);
    color: var(--on-surface);
    font-family: var(--font-body);
    min-height: max(884px, 100dvh);
    padding-bottom: 70px; /* For mobile nav */
}

h1, h2, h3, h4, h5, h6, .font-headline-md, .font-headline-lg, .font-display-lg, .font-number-display {
    font-family: var(--font-headline);
}

.font-label-sm {
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.bg-primary { background-color: var(--bs-primary) !important; }
.text-primary { color: var(--bs-primary) !important; }
.bg-primary-container { background-color: var(--primary-container) !important; color: white !important; }
.text-on-primary-container { color: var(--on-primary-container) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.text-secondary { color: var(--secondary) !important; }
.bg-surface { background-color: var(--surface) !important; }
.bg-surface-container-highest { background-color: var(--surface-container-highest) !important; }
.bg-surface-container { background-color: var(--surface-container) !important; }
.bg-surface-container-lowest { background-color: var(--surface-container-lowest) !important; }
.bg-surface-container-low { background-color: var(--surface-container-low) !important; }
.bg-surface-blue { background-color: var(--surface-blue) !important; }
.bg-inverse-surface { background-color: var(--inverse-surface) !important; }
.text-inverse-on-surface { color: var(--inverse-on-surface) !important; }
.text-on-surface-variant { color: var(--on-surface-variant) !important; }
.text-accent-gold { color: var(--accent-gold) !important; }
.border-neutral { border-color: var(--border-neutral) !important; }

.lottery-grid-row:nth-child(even) { background-color: #f8fafc; }
.red-dot-anim { animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

.ad-banner {
    border: 1px solid var(--border-neutral);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-label);
}

.hover-bg-primary:hover { background-color: var(--bs-primary) !important; color: white !important; }

.bottom-nav {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

/* Utility overrides for exact spacing/sizing matching */
.fs-7 { font-size: 0.875rem; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-tighter { letter-spacing: -0.05em; }
.border-primary-subtle { border-color: rgba(var(--bs-primary-rgb), 0.2) !important; }

/* Vietlott page */
.text-accent { color: var(--accent-gold) !important; }
.bg-accent { background-color: var(--accent-gold) !important; }

.vietlott-red-gradient {
    background: linear-gradient(135deg, var(--secondary) 0%, #e71521 100%);
}
.vietlott-yellow-glow {
    box-shadow: 0 0 15px rgba(255, 236, 160, 0.4);
}
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(209, 217, 230, 0.5);
}

.lottery-ball {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.lottery-ball-sm {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
}