/* ==========================================================================
   GOPET HỒI ỨC — GOOGLE SANS × ANTIGRAVITY MODERN UI THEME LAYER
   Shared across Trang Chủ (home.html), Sự Kiện (sukien.html) & Cổng Nạp (napthe.html)
   ========================================================================== */

@import url('/static/fonts/google-sans.css');

:root {
    --font-sans: 'Google Sans', 'Google Sans Text', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Google Sans Display', 'Google Sans', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --ag-border-specular: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --ag-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 36px -8px rgba(3, 11, 17, 0.46);
    --ag-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body, *, button, input, select, textarea {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Preserve FontAwesome icon fonts */
.fa, .fas, .far, .fal, .fab, [class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

/* Display & Heading Typography — Antigravity Crisp Proportions */
h1, h2, h3, h4,
.brand-game-name,
.hero-title,
.section-title,
.card-title,
.modal-title {
    font-family: var(--font-display) !important;
    letter-spacing: -0.022em;
}

.hero-title {
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.028em !important;
}

.section-title {
    font-weight: 700 !important;
    letter-spacing: -0.022em !important;
}

.brand-game-name {
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}

/* Monospace & Tabular Numerals for Stats, Timers, Prices & Codes */
code, pre, .mono,
.launch-cd-num,
.server-stat-value,
.price-val,
.amount-val,
.rank-num,
.badge-count,
#online-count,
#registered-count {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Antigravity Modern Surface & Card Polish */
.main-brand,
.server-status-card,
.hero-gameplay-box,
.gameplay-card,
.download-card,
.giftcode-box,
.guide-faq-item,
.modal-card,
.card,
.event-card,
.milestone-card,
.policy-card,
.tier-card,
.package-card {
    box-shadow: var(--ag-card-shadow);
    transition: transform 0.22s var(--ag-ease), border-color 0.22s var(--ag-ease), box-shadow 0.22s var(--ag-ease), background-color 0.22s var(--ag-ease);
}

.navbar {
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(3, 10, 16, 0.28);
}

/* Crisp Buttons & Pills */
.btn-cta,
.btn-download-action,
.btn-back-home,
.btn-zalo-top,
.nav-cta-btn {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    letter-spacing: -0.008em;
    transition: transform 0.18s var(--ag-ease), filter 0.18s var(--ag-ease), box-shadow 0.18s var(--ag-ease), border-color 0.18s var(--ag-ease);
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: #f5bf59 !important;
    box-shadow: 0 0 0 3px rgba(245, 191, 89, 0.20) !important;
}