/**
 * Site Theme: Modern Dark Pro (shared by every public page)
 * โทนเรียบ พื้นเทาเข้ม เส้นขอบบาง ไม่มีเอฟเฟกต์เรืองแสง
 * ฟอนต์ Inter + IBM Plex Sans Thai
 *
 * Loaded after the old stylesheets and scoped to body.site-theme,
 * so removing the class (or this file) brings the old look back.
 */

.site-theme {
    --vg-bg: #0b0d10;
    --vg-surface: #121519;
    --vg-surface-2: #171b20;
    --vg-surface-3: #1e2329;
    --vg-border: #22272e;
    --vg-border-strong: #2f353d;
    --vg-text: #e8eaed;
    --vg-muted: #9ba3ad;
    --vg-faint: #6b737e;

    /* Red + gold: red for actions, gold for value (prices, points, ranks) */
    --vg-accent: #dc2626;
    --vg-accent-hi: #ef4444;
    --vg-accent-soft: rgba(220, 38, 38, 0.12);
    --vg-accent-line: rgba(220, 38, 38, 0.4);
    --vg-on-accent: #ffffff;
    --vg-gold: #f5b942;
    --vg-gold-soft: rgba(245, 185, 66, 0.1);
    --vg-gold-line: rgba(245, 185, 66, 0.4);
    --vg-success: #34d399;
    --vg-danger: #f87171;

    --vg-radius: 12px;
    --vg-radius-sm: 8px;
    --vg-font: 'Inter', 'IBM Plex Sans Thai', system-ui, sans-serif;

    /* Re-tint the old design system so existing pages follow the new palette */
    --primary-red: var(--vg-accent);
    --primary-red-hover: var(--vg-accent-hi);
    --primary-red-dark: #b91c1c;
    --primary-red-glow: transparent;
    --primary-red-light: var(--vg-accent-soft);
    --bg-primary: var(--vg-bg);
    --bg-secondary: var(--vg-surface);
    --bg-tertiary: var(--vg-surface-2);
    --card-bg: var(--vg-surface);
    --card-bg-hover: var(--vg-surface-2);

    font-family: var(--vg-font) !important;
    color: var(--vg-text);
    background: var(--vg-bg) !important;
    background-image: none !important;
    -webkit-font-smoothing: antialiased;
}

/* One font everywhere (icon fonts excluded) */
.site-theme :where(h1, h2, h3, h4, h5, h6, p, a, span, div, li, td, th, label, button, input, select, textarea, small, strong, b) {
    font-family: var(--vg-font) !important;
}
.site-theme .fa, .site-theme .fas, .site-theme .far, .site-theme .fab,
.site-theme .fa-solid, .site-theme .fa-regular, .site-theme .fa-brands,
.site-theme [class^="fa-"], .site-theme [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}
.site-theme .fab, .site-theme .fa-brands { font-family: "Font Awesome 6 Brands" !important; }

/* ========== Background effects ==========
 * Layers, back to front: page color -> admin background image (slow zoom)
 * -> dark overlay with a soft red glow -> drifting embers -> page content.
 * All sit at negative z-index so they never cover text or buttons. */

/* Admin-selected background (Site Settings) with a slow zoom */
.site-theme.has-site-bg::before {
    content: '' !important;
    display: block !important;
    position: fixed !important;
    inset: -4% !important;
    width: auto !important;
    height: auto !important;
    transform: none;
    background: var(--site-bg-image) center / cover no-repeat !important;
    z-index: -3 !important;
    pointer-events: none;
    animation: vg-bg-drift 40s ease-in-out infinite alternate;
}

@keyframes vg-bg-drift {
    from { transform: scale(1) translate(0, 0); }
    to { transform: scale(1.08) translate(-1.5%, -1%); }
}

/* Dark overlay on the background image: an even 90% across the whole screen.
 * Kept static so the darkness never dips. */
.site-theme::after {
    content: '' !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    background: rgba(11, 13, 16, 0.9) !important;
    z-index: -2 !important;
    pointer-events: none;
}

.site-theme:not(.has-site-bg)::after { display: none !important; }

/* Red glow from the bottom, pulsing gently; above the overlay, below embers */
html:has(.site-theme)::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 45% at 50% 110%, rgba(220, 38, 38, 0.22), transparent 70%),
        radial-gradient(ellipse 40% 30% at 85% 100%, rgba(245, 185, 66, 0.07), transparent 70%);
    z-index: -1;
    pointer-events: none;
    animation: vg-glow 8s ease-in-out infinite alternate;
}

@keyframes vg-glow {
    from { opacity: 0.85; }
    to { opacity: 1; }
}

/* Embers spawned by the header script (createFireParticles) */
.site-theme .fire-particle {
    display: block !important;
    z-index: -1 !important;
    background: radial-gradient(circle, #fca5a5 0%, #dc2626 60%, transparent 100%);
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.6);
    filter: none;
    opacity: 0.55;
}

.site-theme .fire-particle:nth-child(3n) {
    background: radial-gradient(circle, #fde68a 0%, #f5b942 60%, transparent 100%);
    box-shadow: 0 0 6px rgba(245, 185, 66, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .site-theme.has-site-bg::before,
    html:has(.site-theme)::before { animation: none; }
    .site-theme .fire-particle { display: none !important; }
}

html:has(.site-theme) { scroll-behavior: smooth; }

/* ========== Kill decoration: fire, glow, neon ========== */

.site-theme:not(.has-site-bg)::before,
.site-theme .global-flame-container {
    display: none !important;
}

.site-theme * { text-shadow: none !important; }

.site-theme h1, .site-theme h2, .site-theme h3 {
    letter-spacing: -0.01em;
}

.site-theme ::selection { background: var(--vg-accent-soft); }

.site-theme ::-webkit-scrollbar { width: 10px; height: 8px; }
.site-theme ::-webkit-scrollbar-track { background: transparent; }
.site-theme ::-webkit-scrollbar-thumb {
    background: var(--vg-border-strong);
    border-radius: 10px;
    border: 2px solid var(--vg-bg);
}

/* ========== Header bar ========== */

.site-theme #site-header {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 60px !important;
    padding: 0 24px;
    border: none;
    border-bottom: 1px solid var(--vg-border);
    border-radius: 0;
    background: rgba(11, 13, 16, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: none;
}

.site-theme #site-header.scrolled {
    top: 0 !important;
    height: 60px !important;
    background: rgba(11, 13, 16, 0.92);
    border-color: var(--vg-border);
    box-shadow: none;
}

.site-theme .header-inner {
    max-width: 1080px;
    margin: 0 auto;
}

.site-theme .site-logo img { height: 34px; }

.site-theme .main-nav { justify-content: flex-end; }
.site-theme .nav-center, .site-theme .nav-right { gap: 2px; }

.site-theme .nav-item,
.site-theme .dropdown .dropbtn {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vg-muted);
    padding: 6px 10px;
    border-radius: var(--vg-radius-sm);
    background: transparent;
    box-shadow: none;
}

.site-theme .nav-item i,
.site-theme .dropdown .dropbtn i { color: var(--vg-faint); }

.site-theme .nav-item:hover,
.site-theme .dropdown:hover .dropbtn {
    color: #fff;
    background: var(--vg-surface-2);
}

.site-theme .nav-item.active,
.site-theme .dropbtn.active {
    color: #fff;
    background: var(--vg-surface-2);
    box-shadow: none;
}

.site-theme .nav-item.active i,
.site-theme .dropbtn.active i { color: var(--vg-accent); }

.site-theme .nav-cta {
    background: var(--vg-accent) !important;
    color: var(--vg-on-accent) !important;
    font-weight: 600;
    border: 1px solid var(--vg-accent);
    border-radius: var(--vg-radius-sm);
    padding: 6px 14px;
    box-shadow: none;
}
.site-theme .nav-cta i { color: inherit !important; }
.site-theme .nav-cta:hover { background: var(--vg-accent-hi) !important; color: var(--vg-on-accent) !important; }

.site-theme .dropdown-content {
    background: var(--vg-surface);
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 6px;
}
.site-theme .dropdown-content::before { display: none; }

.site-theme .dropdown-content a {
    font-size: 13.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--vg-muted);
    padding: 9px 12px;
    border-radius: var(--vg-radius-sm);
}

.site-theme .dropdown-content a:hover {
    background: var(--vg-surface-2);
    color: #fff;
    padding-left: 12px;
}

.site-theme .mobile-menu-btn {
    background: var(--vg-surface-2) !important;
    border: 1px solid var(--vg-border-strong);
    box-shadow: none !important;
    width: 38px;
    height: 38px;
    border-radius: var(--vg-radius-sm);
    font-size: 16px;
}

/* ========== Inner page banner ========== */

.page-banner {
    padding: 104px 20px 32px;
    border-bottom: 1px solid var(--vg-border);
}

.page-banner-inner {
    max-width: 1080px;
    margin: 0 auto;
}

.page-banner-crumb {
    font-size: 12.5px;
    color: var(--vg-faint);
    margin-bottom: 10px;
}

.page-banner-crumb a { color: var(--vg-muted); text-decoration: none; }
.page-banner-crumb a:hover { color: #fff; }
.page-banner-crumb i { font-size: 9px; margin: 0 8px; }

.page-banner h1 {
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.page-banner h1 i {
    font-size: 0.7em;
    color: var(--vg-accent);
    margin-right: 10px;
}

.page-banner p {
    margin: 8px 0 0;
    font-size: 14.5px;
    color: var(--vg-muted);
    max-width: 640px;
}

/* Page content sits right under the banner (old pages reserved space for the floating header) */
.has-banner .download-page-wrapper,
.has-banner .topup-wrapper,
.has-banner .shop-wrapper,
.has-banner .promo-wrapper,
.has-banner .box-wrapper,
.has-banner .rewards-wrapper,
.has-banner .rent-wrapper,
.has-banner .star-wrapper,
.has-banner .logs-wrapper,
.has-banner .profile-wrapper,
.has-banner .transfer-wrapper,
.has-banner .rt-wrapper {
    padding-top: 32px !important;
    min-height: auto !important;
    background: none !important;
}

/* Titles now live in the banner */
.has-banner .page-header-shop,
.has-banner .promo-header-p,
.has-banner .box-header-p,
.has-banner .rew-header-p,
.has-banner .rent-header-p,
.has-banner .logs-header-p,
.has-banner .transfer-header,
.has-banner .rt-header {
    display: none !important;
}

/* ============================================================= */
/* PAGE COMPONENTS: flatten the cards, buttons and badges each   */
/* page defines in its own <style> block                         */
/* ============================================================= */

/* No glow, no frosted glass inside page content */
.has-banner :where(main, section, div, a, button, span, img, li, td, tr, table, form, label, p, h1, h2, h3, h4) {
    box-shadow: none !important;
}

.has-banner :where(div, a, button, span):not(#site-header):not(.swal2-container) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Cards and panels */
.has-banner .balance-panel-premium,
.has-banner .shop-card-premium,
.has-banner .cur-glass-card,
.has-banner .promo-card-premium,
.has-banner .cur-glass-box,
.has-banner .box-card-p,
.has-banner .hero-box-display,
.has-banner .rew-card-p,
.has-banner .cur-glass-rent,
.has-banner .rent-card-p,
.has-banner .active-card-p,
.has-banner .glass-panel-p,
.has-banner .download-card,
.has-banner .req-section,
.has-banner .req-card,
.has-banner .topup-card,
.has-banner .balance-box,
.has-banner .card-glass,
.has-banner .profile-card,
.has-banner .currency-card-new,
.has-banner .main-point-box,
.has-banner .accumulated-box,
.has-banner .privileges-card,
.has-banner .inventory-item-card,
.has-banner .collapsible-card,
.has-banner .transfer-option-card,
.has-banner .tax-preview-box,
.has-banner .char-confirm-box,
.has-banner .rt-your-rank-card,
.has-banner .rt-form-panel,
.has-banner .rt-fee-box,
.has-banner .rt-summary-box,
.has-banner .topup-wrapper > .container[style] {
    background: var(--vg-surface) !important;
    border: 1px solid var(--vg-border) !important;
    border-radius: var(--vg-radius) !important;
}

.has-banner .shop-card-premium:hover,
.has-banner .promo-card-premium:hover,
.has-banner .box-card-p:hover,
.has-banner .rew-card-p:hover,
.has-banner .rent-card-p:hover,
.has-banner .download-card:hover,
.has-banner .req-card:hover,
.has-banner .inventory-item-card:hover,
.has-banner .transfer-option-card:hover {
    background: var(--vg-surface-2) !important;
    border-color: var(--vg-border-strong) !important;
    transform: none !important;
}

/* Nested blocks sit one step lighter */
.has-banner .card-manifest-row,
.has-banner .slot-item,
.has-banner .slot-itm-p,
.has-banner .mirror-btn,
.has-banner .rate-info {
    background: var(--vg-surface-2) !important;
    border: 1px solid var(--vg-border) !important;
    border-radius: var(--vg-radius-sm) !important;
}

/* Product image areas */
.has-banner .card-img-area,
.has-banner .promo-img-area,
.has-banner .box-img-area-p,
.has-banner .rent-img-area-p {
    background: var(--vg-surface-2) !important;
    border-color: var(--vg-border) !important;
}

/* Icon tiles */
.has-banner .bal-icon-box,
.has-banner .icon-top,
.has-banner .ico-top,
.has-banner .curr-icon-large,
.has-banner .balance-icon,
.has-banner .req-icon,
.has-banner .avatar-large,
.has-banner .icon-rgb {
    background: var(--vg-surface-2) !important;
    border: 1px solid var(--vg-border) !important;
    border-radius: var(--vg-radius-sm) !important;
    color: var(--vg-accent) !important;
    animation: none !important;
}

.has-banner .avatar-large { border-radius: 50% !important; }

/* Big numbers: solid text instead of gradient fills */
.has-banner .hero-box-title,
.has-banner .download-header .page-title {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: #fff !important;
}

/* Money and points read in gold */
.has-banner .bal-amt-huge,
.has-banner .price-tag-premium .amt,
.has-banner .box-total {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--vg-gold) !important;
}

.has-banner .bal-text-info span,
.has-banner .bal-unit {
    color: var(--vg-muted) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.has-banner .hero-box-glow,
.has-banner .scan-line {
    display: none !important;
}

/* Primary buttons */
.has-banner .btn-buy-premium,
.has-banner .btn-buy-promo-p,
.has-banner .btn-1x,
.has-banner .btn-5x,
.has-banner .btn-box-act,
.has-banner .btn-hero-act,
.has-banner .hero-1x,
.has-banner .hero-10x,
.has-banner .btn-reveal-all,
.has-banner .btn-done,
.has-banner .btn-claim-active,
.has-banner .btn-rent,
.has-banner .btn-rent-act,
.has-banner .btn-confirm-rent,
.has-banner .btn-topup-gradient,
.has-banner .btn-submit-topup,
.has-banner .ppay-btn,
.has-banner .btn-ppay,
.has-banner .download-btn-large,
.has-banner .btn-confirm-transfer,
.has-banner .btn-check,
.has-banner .rt-btn-check,
.has-banner .rt-btn-confirm,
.has-banner .tf-btn-confirm,
.has-banner .btn-primary,
.has-banner .topup-wrapper > .container[style] a[style] {
    background: var(--vg-accent) !important;
    border: 1px solid var(--vg-accent) !important;
    border-radius: var(--vg-radius-sm) !important;
    color: var(--vg-on-accent) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transform: none !important;
    animation: none !important;
}

.has-banner .btn-buy-premium i,
.has-banner .btn-buy-promo-p i,
.has-banner .download-btn-large i,
.has-banner .btn-submit-topup i,
.has-banner .btn-claim-active i,
.has-banner .rt-btn-confirm i,
.has-banner .tf-btn-confirm i {
    color: inherit !important;
}

.has-banner .btn-buy-premium:hover:not(:disabled),
.has-banner .btn-buy-promo-p:hover,
.has-banner .btn-1x:hover,
.has-banner .btn-5x:hover,
.has-banner .btn-box-act:hover,
.has-banner .btn-hero-act:hover,
.has-banner .hero-1x:hover,
.has-banner .hero-10x:hover,
.has-banner .btn-reveal-all:hover,
.has-banner .btn-done:hover,
.has-banner .btn-claim-active:hover,
.has-banner .btn-rent:hover,
.has-banner .btn-rent-act:hover,
.has-banner .btn-confirm-rent:hover,
.has-banner .btn-topup-gradient:hover,
.has-banner .btn-submit-topup:hover,
.has-banner .ppay-btn:hover,
.has-banner .btn-ppay:hover,
.has-banner .download-btn-large:hover,
.has-banner .btn-confirm-transfer:hover,
.has-banner .btn-check:hover,
.has-banner .rt-btn-check:hover,
.has-banner .rt-btn-confirm:hover,
.has-banner .tf-btn-confirm:hover,
.has-banner .btn-primary:hover:not(:disabled) {
    background: var(--vg-accent-hi) !important;
    border-color: var(--vg-accent-hi) !important;
    transform: none !important;
}

/* Secondary buttons */
.has-banner .btn-cancel,
.has-banner .tf-btn-cancel,
.has-banner .tf-btn-back,
.has-banner .btn-rename,
.has-banner .btn-change-pass,
.has-banner .btn-wallet,
.has-banner .channel-btn {
    background: var(--vg-surface-2) !important;
    border: 1px solid var(--vg-border-strong) !important;
    border-radius: var(--vg-radius-sm) !important;
    color: var(--vg-text) !important;
}

.has-banner .channel-btn.active {
    border-color: var(--vg-accent-line) !important;
    background: var(--vg-accent-soft) !important;
}

/* Disabled / sold-out stay quiet */
.has-banner .btn-claim-disabled,
.has-banner .btn-promo-soldout,
.has-banner button:disabled {
    background: var(--vg-surface-2) !important;
    border: 1px solid var(--vg-border) !important;
    color: var(--vg-faint) !important;
}

/* Pills and badges */
.has-banner .stock-pill,
.has-banner .promo-stock-pill,
.has-banner .hot-tag,
.has-banner .version-badge,
.has-banner .slot-qty-badge,
.has-banner .slot-qty-p,
.has-banner .reward-qty,
.has-banner .acc-badge,
.has-banner .auto-check-badge,
.has-banner .rent-top {
    background: var(--vg-surface-2) !important;
    border: 1px solid var(--vg-border-strong) !important;
    color: var(--vg-text) !important;
    animation: none !important;
}

.has-banner .stock-pill.sold-out,
.has-banner .promo-stock-pill.sold-out {
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    background: rgba(248, 113, 113, 0.08) !important;
}

/* Form fields */
.has-banner input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.has-banner select,
.has-banner textarea {
    background: var(--vg-bg) !important;
    border: 1px solid var(--vg-border-strong) !important;
    border-radius: var(--vg-radius-sm) !important;
    color: var(--vg-text) !important;
}

.has-banner input:focus,
.has-banner select:focus,
.has-banner textarea:focus {
    border-color: var(--vg-accent-line) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--vg-accent-soft) !important;
}

/* ========== Footer ========== */

/* Same bar style as the header so background effects don't show through.
 * Sticky with top: 100vh pushes it to the bottom of the (min-height: 100vh) body
 * on short pages; on long pages it stays where it is. */
.site-theme .main-footer {
    position: sticky;
    top: 100vh;
    background: rgba(11, 13, 16, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--vg-border);
    box-shadow: none;
}

.site-theme .main-footer .brand-text { color: var(--vg-text); }

/* ========== SweetAlert ========== */

.site-theme .swal2-popup {
    background: var(--vg-surface) !important;
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius) !important;
}

/* ========== Responsive ========== */

@media (max-width: 991px) {
    .site-theme #site-header { padding: 0 16px; }
    .site-theme #mainNav { background: var(--vg-bg) !important; top: 60px !important; }
}

@media (max-width: 768px) {
    .page-banner { padding: 88px 16px 24px; }
}