/* --- CSS CHO MEGA CASINO FLATSOME --- */
:root {
    --bg-dark: #0f172a;
    --bg-card: #1e293b;
    --gold: #f59e0b;
    --danger: #ef4444;
}

/* Nền tối cho toàn web (nếu muốn) */
body.home { background-color: var(--bg-dark); color: #f1f5f9; }

/* 1. STICKY FILTER GAME */
.game-filter-container {
    position: sticky;
    top: 60px; /* Điều chỉnh số này nếu Header của bạn cao hơn */
    background: var(--bg-dark);
    z-index: 90; /* Thấp hơn header Flatsome */
    padding: 10px 0;
    white-space: nowrap;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    -ms-overflow-style: none; scrollbar-width: none;
}
.game-filter-container::-webkit-scrollbar { display: none; }
.filter-item {
    display: inline-block; padding: 8px 16px; margin: 0 5px;
    background: var(--bg-card); border-radius: 20px; font-size: 14px; color: #94a3b8;
}
.filter-item.active { background: var(--gold); color: #000; font-weight: bold; }

/* 2. JACKPOT */
.jackpot-section {
    background: #000; border: 1px solid var(--gold);
    text-align: center; padding: 20px; margin: 20px 0; border-radius: 10px;
}
.jackpot-number { font-size: 28px; font-weight: 900; color: #fff; text-shadow: 0 0 10px var(--gold); }

/* 3. GAME GRID CARD */
.custom-game-card {
    background: var(--bg-card); border-radius: 10px; overflow: hidden; position: relative; margin-bottom: 15px;
}
.custom-game-thumb {
    width: 100%; aspect-ratio: 16/9; background: #334155;
    display: flex; align-items: center; justify-content: center; font-size: 30px; color: rgba(255,255,255,0.1);
}
.custom-game-info { padding: 10px; text-align: center; }
.custom-game-name { font-size: 14px; font-weight: bold; color: #fff; margin: 0; }
.badge-hot { position: absolute; top: 5px; right: 5px; background: var(--danger); color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; }

/* 4. CUSTOM BOTTOM NAV (MOBILE) */
@media (max-width: 767px) {
    .custom-bottom-nav {
        position: fixed; bottom: 0; left: 0; right: 0; height: 70px;
        background: var(--bg-card); display: flex; justify-content: space-around; align-items: center;
        z-index: 9999; border-top: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px;
    }
    .c-nav-item { display: flex; flex-direction: column; align-items: center; color: #94a3b8; font-size: 11px; width: 20%; }
    .c-nav-item i { font-size: 20px; margin-bottom: 4px; }
    .c-nav-item.active { color: #fff; }
    .c-nav-item.deposit-btn { position: relative; top: -25px; }
    .c-nav-item.deposit-btn .circle {
        width: 55px; height: 55px; background: linear-gradient(135deg, var(--gold), #d97706);
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); border: 4px solid var(--bg-dark);
    }
    .c-nav-item.deposit-btn i { color: #000; font-size: 24px; margin: 0; }
    /* Ẩn footer mặc định của Flatsome trên mobile để tránh bị che */
    .footer-wrapper { padding-bottom: 70px; }
}
@media (min-width: 768px) { .custom-bottom-nav { display: none; } }
/* CSS cho tên nhà cung cấp dưới tên game */
.custom-game-provider {
    font-size: 11px;
    color: #94a3b8; /* Màu xám nhạt */
    margin-top: 2px;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* CSS cho lưới game (Grid) để bạn chỉ cần copy 1 lần là được cả 6 ô */
.custom-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mobile: 2 cột */
    gap: 10px;
}

@media (min-width: 768px) {
    .custom-grid-wrapper {
        grid-template-columns: repeat(6, 1fr); /* PC: 6 cột */
        gap: 15px;
    }
}
/* --- Ticker / Marquee Thông báo trúng thưởng --- */
.ticker-wrap {
    width: 100%;
    background-color: #000; /* Nền đen để nổi bật chữ vàng */
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    height: 35px; /* Chiều cao cố định */
    display: flex;
    align-items: center;
}

.ticker-content {
    display: inline-block;
    padding-left: 100%; /* Bắt đầu từ ngoài màn hình bên phải */
    animation: ticker 25s linear infinite; /* Tốc độ chạy 25s */
    font-size: 13px;
    font-weight: 500;
}

/* Màu sắc chữ trong ticker */
.ticker-item {
    display: inline-block;
    padding: 0 20px;
    color: #fff;
}
.ticker-highlight {
    color: var(--gold, #f59e0b); /* Màu vàng cho số tiền/tên user */
    font-weight: bold;
}

/* Hiệu ứng chạy */
@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* Dừng chạy khi rê chuột vào để khách đọc kịp */
.ticker-wrap:hover .ticker-content {
    animation-play-state: paused;
}