body {
    background-image: url('/images/BackgroundImage.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #000000;
}

/* ================================================
   FIX TƯƠNG PHẢN: background sáng → cần backdrop tối
   cho các section ngoài hero để chữ đọc rõ
   ================================================ */

/* Navbar — đậm hơn để menu items không bị "nuốt" bởi background */
.navbar {
    background: linear-gradient(180deg, rgba(8, 6, 10, 0.92) 0%, rgba(8, 6, 10, 0.78) 100%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.navbar a,
.navbar .navbar-link,
.navbar-mobile a,
.navbar .nav-links a,
.navbar .nav-dropdown-toggle {
    color: #ffe8a8 !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 1),
        0 0 6px rgba(0, 0, 0, 0.95),
        0 0 12px rgba(0, 0, 0, 0.7);
    font-weight: 600;
}

.navbar .nav-links a:hover,
.navbar .nav-dropdown-toggle:hover,
.navbar .nav-links a.active {
    color: #fff3c2 !important;
    text-shadow:
        0 0 8px rgba(255, 200, 90, 0.85),
        0 1px 2px rgba(0, 0, 0, 1);
}

/* Rankings section — bỏ max-width centered cho khỏi lệch, dùng full viewport */
.section-rankings {
    max-width: none !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
}

/* Backdrop tối liền mạch — phủ từ dưới hero (sau 100vh) đến hết main, full-bleed */
main {
    position: relative;
    z-index: 0;
}

main::before {
    content: '';
    position: absolute;
    top: 100vh;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container-max);
    height: calc(100% - 100vh);
    background: rgba(10, 8, 12, 0.78);
    z-index: -1;
    pointer-events: none;
}

/* Server Status Bar */
.server-status-bar {
    background: rgba(10, 8, 12, 0.82) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(201, 169, 97, 0.35);
    border-bottom: 1px solid rgba(201, 169, 97, 0.35);
}

.server-status-bar,
.server-status-bar * {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}


/* Hero: ẩn chữ Hán watermark + scroll hint */
.hero .hero-hanzi,
.hero .hero-scroll-hint {
    display: none !important;
}

.hero .hero-bg {
    display: block !important;
}

.hero .hero-bg::after {
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 75%) !important;
}

/* Tăng độ tương phản cho text trong hero */
.hero .hero-subtitle,
.hero .hero-desc,
.hero .hero-scroll-hint {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(0, 0, 0, 0.85),
        0 0 16px rgba(0, 0, 0, 0.6);
}

.hero .hero-subtitle {
    color: #ffe8a8 !important;
}

.hero .hero-desc {
    color: #f3e9d2 !important;
}

.hero .hero-scroll-hint {
    color: #e8d9b0 !important;
}

/* Đường kẻ hai bên subtitle sáng hơn để thấy rõ trên nền sáng */
.hero .hero-subtitle::before,
.hero .hero-subtitle::after {
    background: rgba(255, 215, 130, 0.85) !important;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

/* Nút outline (ĐĂNG KÝ) — tăng tương phản trên background sáng */
.hero .btn-outline {
    background: rgba(10, 8, 12, 0.65) !important;
    border: 1.5px solid var(--color-gold-primary) !important;
    color: #ffe8a8 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.hero .btn-outline:hover {
    background: rgba(201, 169, 97, 0.9) !important;
    color: #1a0a0a !important;
    text-shadow: none;
}

/* Title image thay cho text title — hiệu ứng glow vàng/đỏ + float */
.hero-title-img {
    display: block;
    margin: 0 auto 28px;
    max-width: min(720px, 90%);
    height: auto;
    opacity: 0;
    transform: translateY(20px) scale(0.92);
    animation:
        titleEntrance 1.2s var(--ease-out) 0.4s forwards,
        titleGlow 3.2s ease-in-out 1.6s infinite,
        titleFloat 6s ease-in-out 1.6s infinite;
    will-change: transform, filter;
}

@keyframes titleEntrance {
    0%   { opacity: 0; transform: translateY(20px) scale(0.92); filter: drop-shadow(0 0 0 rgba(255,180,80,0)) brightness(0.6); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.03); filter: drop-shadow(0 0 30px rgba(255,200,90,0.95)) brightness(1.25); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 4px 18px rgba(0,0,0,0.75)) drop-shadow(0 0 18px rgba(255,180,80,0.55)); }
}

@keyframes titleGlow {
    0%, 100% {
        filter:
            drop-shadow(0 4px 18px rgba(0,0,0,0.75))
            drop-shadow(0 0 14px rgba(255,180,80,0.45))
            drop-shadow(0 0 28px rgba(184,24,42,0.25));
    }
    50% {
        filter:
            drop-shadow(0 4px 18px rgba(0,0,0,0.75))
            drop-shadow(0 0 26px rgba(255,210,110,0.85))
            drop-shadow(0 0 50px rgba(255,90,30,0.55));
    }
}

@keyframes titleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Sheen sweep — quét sáng ngang qua chữ */
.hero-title-img-wrap {
    position: relative;
    display: block;
    margin: 0 auto 28px;
    max-width: min(720px, 90%);
    overflow: hidden;
}

.hero-title-img-wrap .hero-title-img {
    margin: 0;
    max-width: 100%;
}

.hero-title-img-wrap::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255, 230, 150, 0.55) 50%,
        transparent 80%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    animation: titleSheen 4.5s ease-in-out 2s infinite;
}

@keyframes titleSheen {
    0%   { left: -75%; }
    60%, 100% { left: 130%; }
}