/* ==========================================================================
   NapGame247 — Theme Engine & Dark/Light Mode Overrides
   Khớp 100% token của napgame247.net:
   Light: bg white (#ffffff), card white (#ffffff), text dark (#0f172a), border #e2e8f0
   Dark:  bg dark (#020817), card dark (#0b1220 / #020817), text light (#f8fafc), border #1e293b
   ========================================================================== */

/* ── Light Mode Base ─────────────────────────────────────────────────────── */
html.light, :root {
    --bg-main: #ffffff;
    --card-bg: #ffffff;
    --card-surface: #f8fafc;
    --card-border: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --hover-bg: #f8fafc;
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    color-scheme: light;
}

/* ── Dark Mode Base ──────────────────────────────────────────────────────── */
html.dark {
    --bg-main: #020817;
    --card-bg: #020817;
    --card-surface: #0b1220;
    --card-border: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --hover-bg: #0f172a;
    --input-bg: #0b1220;
    --input-border: #1e293b;
    color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════════════════
   Độ tương phản chữ — WCAG AA (4.5:1 cho chữ thường, 3:1 cho chữ lớn)
   `--primary` là MÀU ĐẦY ĐỦ (không phải bộ ba HSL): napgame247.css khai báo
   biến này theo kiểu Tailwind nên mọi `var(--primary)` sẽ hỏng nếu gán bộ ba.
   ══════════════════════════════════════════════════════════════════════════ */

/* --primary của napgame247.css là BỘ BA HSL kiểu Tailwind nên nó ghi đè biến
   màu thật của app.css (nạp trước). Khôi phục lại thành màu đầy đủ ở tầng cuối:
   bộ ba vẫn còn ở --primary-h/-s/-l cho các tiện ích Tailwind. */
:root,
html.light,
html.dark {
    --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
    --primary-strong: hsl(var(--primary-h) var(--primary-s) 38%);
    --primary-soft: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.08);
    --primary-line: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0.35);
}

/* Màu nhấn khi dùng làm CHỮ: trộn thêm màu nền để luôn đủ đậm/nhạt.
   Light: 55% accent + 45% #020817  → >= 4.89:1 trên trắng
   Dark:  30% accent + 70% #f8fafc  → >= 11.4:1 trên #0f172a */
:root,
html.light {
    --primary-ink: color-mix(in srgb, var(--primary) 55%, #020817);
    --fg-dim: #6b7280; /* 4.83:1 trên trắng, 4.62:1 trên #f8fafc */
}

html.dark {
    --primary-ink: color-mix(in srgb, var(--primary) 30%, #f8fafc);
    --fg-dim: #94a3b8; /* 7.8:1 trên #020817, 6.96:1 trên #0f172a */
}

/* ── Global Body & Backgrounds ───────────────────────────────────────────── */
body {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
html.dark .header-napgame {
    background: #020817 !important;
    border-bottom-color: #1e293b !important;
}
html.dark .topbar-napgame {
    background: #0b1220 !important;
    border-bottom-color: #1e293b !important;
}
html.dark .topbar-nav a {
    color: #94a3b8 !important;
}
html.dark .topbar-nav a:hover, html.dark .topbar-nav a.active {
    color: hsl(var(--primary-h) var(--primary-s) var(--primary-l)) !important;
}
html.dark .topbar-theme-btn {
    color: #94a3b8 !important;
}
html.dark .topbar-theme-btn:hover {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
html.dark .topbar-currency {
    color: #94a3b8 !important;
}
html.dark .mainbar-napgame {
    background: #020817 !important;
}
html.dark .search-input-wrap input {
    background: #0b1220 !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}
html.dark .search-input-wrap input:focus {
    border-color: hsl(var(--primary-h) var(--primary-s) var(--primary-l)) !important;
}
html.dark .balance-chip-napgame {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border: 1px solid #1e293b !important;
}
html.dark .dropdown-panel-napgame {
    background: #0b1220 !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}
html.dark .dropdown-panel-napgame .name {
    color: #f8fafc !important;
}
html.dark .dropdown-panel-napgame .menu-item {
    color: #cbd5e1 !important;
}
html.dark .dropdown-panel-napgame .menu-item:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}
/* Mục "Đăng xuất" phải giữ màu đỏ: quy tắc !important phía trên ghi đè mất. */
html.dark .dropdown-panel-napgame .menu-item.danger,
html.dark .dropdown-panel-napgame .menu-item.danger:hover {
    color: #f87171 !important;
}

/* ── Theme Popover Menu ──────────────────────────────────────────────────── */
html.dark .theme-popover {
    background: #0b1220 !important;
    border-color: #1e293b !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6) !important;
}
html.dark .theme-pop-title {
    color: #f8fafc !important;
}
html.dark .theme-pop-divider {
    background: #1e293b !important;
}
html.dark .theme-pop-label {
    color: #cbd5e1 !important;
}
html.dark .theme-mode-pill {
    background: #020817 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
html.dark .theme-mode-pill:hover {
    border-color: hsl(var(--primary-h) var(--primary-s) var(--primary-l)) !important;
    color: hsl(var(--primary-h) var(--primary-s) var(--primary-l)) !important;
}
html.dark .theme-reset-action {
    color: #94a3b8 !important;
}
html.dark .theme-reset-action:hover {
    background: #1e293b !important;
    color: #f8fafc !important;
}

/* ── Quick Nav ───────────────────────────────────────────────────────────── */
html.dark .quick-nav-card {
    background: #020817 !important;
    border-color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
html.dark .quick-nav-item {
    color: #f8fafc !important;
}
html.dark .quick-nav-item:hover {
    background: #0f172a !important;
}

/* ── Flash Sale ──────────────────────────────────────────────────────────── */
html.dark .flash-sale-title {
    color: #f8fafc !important;
}
html.dark .flash-arrow {
    background: #0b1220 !important;
    border-color: #1e293b !important;
    color: #94a3b8 !important;
}
html.dark .flash-arrow:hover {
    background: #1e293b !important;
    color: #f8fafc !important;
}
html.dark .flash-sale-card {
    background: #020817 !important;
    border-color: #1e293b !important;
}
html.dark .flash-card-thumb {
    background: #0b1220 !important;
}
html.dark .flash-card-name {
    color: #f8fafc !important;
}
html.dark .flash-card-game {
    color: #94a3b8 !important;
}

/* ── 2-Column Pairs (Trending & Newest, Shop & Cards) ────────────────────── */
html.dark .panel-card {
    background: #020817 !important;
    border-color: #1e293b !important;
}
html.dark .section-title {
    color: #f8fafc !important;
}
html.dark .tile-row {
    background: #020817 !important;
    color: #f8fafc !important;
}
html.dark .tile-row:hover {
    background: #0b1220 !important;
}
html.dark .tile-thumb {
    background: #0b1220 !important;
    border-color: #1e293b !important;
}
html.dark .tile-name {
    color: #f8fafc !important;
}
html.dark .tile-sub {
    color: #94a3b8 !important;
}

/* ── Hot Games Grid ──────────────────────────────────────────────────────── */
html.dark .hot-game-cover {
    background: #0b1220 !important;
    border-color: #1e293b !important;
}
html.dark .hot-game-name {
    color: #f8fafc !important;
}

/* ── Articles & Guides ───────────────────────────────────────────────────── */
html.dark .news-card div:first-child {
    background: #0b1220 !important;
    border-color: #1e293b !important;
}
html.dark .news-card div:last-child {
    color: #f8fafc !important;
}

/* ── SEO Section ─────────────────────────────────────────────────────────── */
html.dark .seo-card {
    background: #020817 !important;
    border-color: #1e293b !important;
}
html.dark .seo-card h3 {
    color: #f8fafc !important;
}
html.dark .seo-card p {
    color: #94a3b8 !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
html.dark .footer-napgame {
    background: #020817 !important;
    border-top-color: #1e293b !important;
    color: #94a3b8 !important;
}
html.dark .footer-col-title {
    color: #f8fafc !important;
}
html.dark .footer-links li, html.dark .footer-links a {
    color: #94a3b8 !important;
}
html.dark .footer-links a:hover {
    color: #3b82f6 !important;
}
html.dark .footer-grid {
    border-bottom-color: #1e293b !important;
}
html.dark .footer-copy-text {
    color: var(--fg-muted) !important;
}
html.dark .footer-copy-text .dim, html.dark .footer-bottom-right .dim {
    color: var(--fg-dim) !important;
}
html.dark .footer-bottom-right {
    color: #cbd5e1 !important;
}

/* ── Floating Sidebar ────────────────────────────────────────────────────── */
html.dark .floating-zalo-sidebar .zalo-toggle-btn {
    background: #0b1220 !important;
    border-color: #1e293b !important;
    color: #94a3b8 !important;
}
html.dark .floating-zalo-sidebar .zalo-sidebar-content {
    background: #0b1220 !important;
    border-color: #1e293b !important;
}
html.dark .zalo-link-item {
    color: #f8fafc !important;
}
html.dark .zalo-link-item:hover {
    background: #1e293b !important;
}
html.dark .zalo-ico {
    color: #94a3b8 !important;
}

/* ── Login Modal ─────────────────────────────────────────────────────────── */
html.dark .login-modal-card {
    background: #0b1220 !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
}
html.dark .login-modal-title {
    color: #f8fafc !important;
}
html.dark .login-input {
    background: #020817 !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}
html.dark .login-divider span {
    background: #0b1220 !important;
    color: #94a3b8 !important;
}
html.dark .login-divider::before {
    background: #1e293b !important;
}
html.dark .social-btn {
    background: #020817 !important;
    border-color: #1e293b !important;
}
html.dark .login-footer {
    color: #94a3b8 !important;
}
html.dark .login-trust {
    border-top-color: #1e293b !important;
    color: #94a3b8 !important;
}

/* ── Game Detail Page ────────────────────────────────────────────────────── */
html.dark .game-hero-banner {
    background: #020817 !important;
    border-color: #1e293b !important;
}
html.dark .game-avatar-box {
    border-color: #020817 !important;
    background: #0b1220 !important;
}
html.dark .game-title-text {
    color: #f8fafc !important;
}
html.dark .game-rating-inline {
    color: #94a3b8 !important;
}
html.dark .pack-filter-btn {
    background: #0b1220 !important;
    border-color: #1e293b !important;
    color: #94a3b8 !important;
}
html.dark .pack-filter-btn.is-active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}
html.dark .game-pack-card {
    background: #020817 !important;
    border-color: #1e293b !important;
}
html.dark .game-pack-card.selected, html.dark .game-pack-card.is-selected {
    background: #0b1220 !important;
    border-color: #2563eb !important;
}
html.dark .game-pack-thumb {
    background: #0b1220 !important;
}
html.dark .game-pack-name {
    color: #f8fafc !important;
}
/* Khung chứa tab + lưới gói: nền sáng hơn thẻ gói một nấc để thẻ nổi lên */
html.dark .game-packs-panel {
    background: #0b1220 !important;
    border-color: #1e293b !important;
}
html.dark .game-pack-card:hover {
    border-color: #3b82f6 !important;
}
html.dark .game-pack-card.selected, html.dark .game-pack-card.is-selected {
    background: #12274d !important;
}
html.dark .game-pack-thumb {
    background: transparent !important;
}
html.dark .pack-filter-btn {
    background: #020817 !important;
}
html.dark .game-notice-callout {
    background: rgba(37, 99, 235, 0.12) !important;
    border-color: #1e3a8a !important;
}
html.dark .game-notice-callout .notice-content,
html.dark .game-notice-callout .notice-content strong {
    color: #cbd5e1 !important;
}
html.dark .game-notice-callout .notice-content strong {
    color: #f1f5f9 !important;
}
html.dark .game-form-panel, html.dark .game-desc-panel, html.dark .game-side-card {
    background: #020817 !important;
    border-color: #1e293b !important;
}
html.dark .form-panel-title, html.dark .desc-panel-title, html.dark .order-summary-title {
    color: #f8fafc !important;
}
html.dark .form-field-group label {
    color: #cbd5e1 !important;
}
html.dark .form-ctrl-input, html.dark .form-ctrl-select, html.dark .form-ctrl-textarea {
    background: #0b1220 !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}
html.dark .summary-empty-state {
    background: #0b1220 !important;
    border-color: #1e293b !important;
}
html.dark .summary-row {
    color: #94a3b8 !important;
}
html.dark .summary-row .val {
    color: #f8fafc !important;
}
html.dark .summary-row.total {
    color: #f8fafc !important;
}
html.dark .summary-balance-line {
    background: #0b1220 !important;
    border-color: #1e293b !important;
    color: #94a3b8 !important;
}
html.dark .game-breadcrumb {
    color: #94a3b8 !important;
}
html.dark .game-breadcrumb a {
    color: #94a3b8 !important;
}
html.dark .game-breadcrumb .current {
    color: #f8fafc !important;
}
html.dark .desc-prose {
    color: #cbd5e1 !important;
}

/* ── Cards Page ──────────────────────────────────────────────────────────── */
html.dark .cards-panel, html.dark .cards-summary-card {
    background: #020817 !important;
    border-color: #1e293b !important;
}
html.dark .cards-panel-title {
    color: #f8fafc !important;
}
html.dark .provider-card {
    background: #020817 !important;
    border-color: #1e293b !important;
}
html.dark .provider-card.is-selected {
    background: #0b1220 !important;
    border-color: #2563eb !important;
}
html.dark .provider-thumb {
    background: #0b1220 !important;
}
html.dark .provider-name {
    color: #f8fafc !important;
}
html.dark .denom-card {
    background: #020817 !important;
    border-color: #1e293b !important;
}
html.dark .denom-card.is-selected {
    background: #0b1220 !important;
    border-color: #2563eb !important;
}
html.dark .cards-input {
    background: #0b1220 !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}
html.dark .summary-line-item {
    color: #94a3b8 !important;
}
html.dark .summary-line-item .val {
    color: #f8fafc !important;
}
html.dark .summary-balance-box {
    background: #0b1220 !important;
    border-color: #1e293b !important;
    color: #94a3b8 !important;
}

.cards-page-title {
    color: #0f172a;
}
html.dark .cards-page-title {
    color: #f8fafc !important;
}
.news-title-text {
    color: #0f172a;
}
html.dark .news-title-text {
    color: #f8fafc !important;
}
.section-title {
    color: #0f172a;
}
html.dark .section-title {
    color: #f8fafc !important;
}

/* ── Modern Sidebar Dark Mode Overrides ──────────────────────────────────── */
html.dark .zalo-sidebar-header {
    border-bottom-color: #1e293b !important;
    color: #94a3b8 !important;
}
html.dark .zalo-icon-badge {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #60a5fa !important;
}
html.dark .zalo-icon-badge.discord-badge {
    background: rgba(88, 101, 242, 0.2) !important;
    color: #818cf8 !important;
}
html.dark .zalo-label {
    color: #f8fafc !important;
}
html.dark .zalo-link-item:hover {
    background: #0f172a !important;
}

/* ── Container Width Optimization (1400px modern wide container) ────────── */
:root {
    --wrap: 1400px;
}
.wrap,
.mainbar-container,
.topbar-container,
.hero-3d-wrapper,
.quick-nav-section,
.notice-bar-wrap,
.flash-sale-section,
.trending-section,
.shop-section,
.section,
.footer-container,
.game-content-layout,
.cards-layout-grid {
    max-width: var(--wrap) !important;
}
/* app.css bỏ padding của .wrap từ 1280px (khi container còn 1216px). Container giờ rộng 1400px nên trong khoảng
   1280–1431px nội dung dính sát mép màn hình: trả lại lề 16px cho tới khi viewport đủ rộng để có lề tự nhiên. */
@media (min-width: 1280px) and (max-width: 1431px) {
    .wrap {
        padding-left: 16px;
        padding-right: 16px;
    }
}