:root {
    --lobby__max-width: 40.625rem;
    /* ~650px cho PC */
    --skin__border: #f5f5f5;
    --skin__bg_1: #FFFFFF;
    --skin__primary: #00bcd4;
}

*,
::after,
::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    max-width: 100%;
    /* Không cho phép vượt quá container */
}

html {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-size: 16px;
    /* Default base font size */
    overflow: hidden;
    /* Ngăn scroll hoàn toàn */
}

/* Responsive font size system */
html[data-device="mobile"] {
    font-size: calc(100vw / (750 / 100));
}

html[data-device="desktop"] {
    font-size: calc(var(--lobby__max-width) / (750 / 100));
}

html[data-ui-contain="1"] {
    background: var(--skin__border);
}

html[data-ui-contain="0"] {
    --lobby__max-width: 100%;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--skin__border);
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Ngăn scroll của body */
    width: 100%;
    height: 100vh;
    /* Chiều cao cố định bằng viewport */
    max-height: 100vh;
    /* Không vượt quá viewport */
}

/* Container chính - PC và Mobile */
.main-container {
    max-width: var(--lobby__max-width);
    width: 100%;
    height: 100vh;
    /* Chiều cao bằng viewport */
    margin: 0 auto;
    background-color: var(--skin__bg_1);
    display: flex;
    flex-direction: column;
    /* Thay đổi thành column layout */
    position: relative;
    overflow-y: auto;
    /* Cho phép scroll dọc trong container */
    overflow-x: hidden;
    /* Ngăn scroll ngang */
    box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.1);
    /* Ẩn scrollbar nhưng vẫn scroll được */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
}

/* Ẩn scrollbar cho Chrome, Safari và Opera */
.main-container::-webkit-scrollbar {
    display: none;
}

/* Mobile responsive */
@media (max-width: 48rem) {
    body {
        background-color: var(--skin__bg_1);
    }

    .main-container {
        max-width: 100%;
        width: 100vw;
        height: 100vh;
        /* Giữ nguyên chiều cao viewport */
        box-shadow: none;
    }

    .loading-overlay {
        max-width: 100%;
        /* Đảm bảo không vượt quá trên mobile */
        width: 100%;
    }

    .header-logo {
        height: 0.4375rem;
        /* Nhỏ hơn trên mobile */
    }

    .logo-text {
        font-size: 0.4rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .paper-plane {
        width: 0.15rem;
        height: 0.15rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .welcome-text {
        font-size: 0.3rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .subtitle {
        font-size: 0.25rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .loading-image {
        width: 5rem;
        height: 5rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .main-content {
        padding: 0 0.5rem;
        /* Giảm padding trên mobile */
        box-sizing: border-box;
    }
    
    /* Banner responsive cho mobile */
    .banner-slider {
        height: 2.6rem; /* Nhỏ hơn trên mobile */
        min-height: 2.6rem;
        max-height: 2.6rem;
    }
}

/* Header */
.header {
    background-color: var(--skin__bg_1);
    border-bottom: 1px solid var(--skin__border);
    position: sticky;
    top: 0;
    z-index: 100;
    max-width: 100%;
    box-sizing: border-box;
}

/* Navigation Bar */
.navigation-bar {
    background-color: var(--skin__bg_1);
    /* border-bottom: 1px solid var(--skin__border); */
    position: sticky;
    top: 0;
    z-index: 99;
    max-width: 100%;
    box-sizing: border-box;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--lobby__max-width);
    margin: 0 auto;
    padding: 0.1rem 0.1rem;
}

/* Auth Buttons */
.auth-buttons {
    display: flex;
    background-image: url('../images/icon/btn_zb_dlzx.avif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: .6rem;
    position: relative;
    min-width: fit-content;
    flex-shrink: 0;
    padding: 0.02rem 0.05rem;
}

.auth-btn {
    border: none;
    padding: 0.22rem 0.2rem;
    font-size: 0.22em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: transparent;
    color: #fff;
    position: relative;
    z-index: 2;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5);
}

.register-btn {
    color: #36a638;
    text-shadow: 0 0.05rem 0.1rem rgba(255, 255, 255, 0.5);
}

.auth-btn.active {
    background-color: rgba(255, 255, 255, 0.9);
    color: #02A9DC;
    border-radius: 1rem;
    box-shadow: 0 0 0 1px rgba(2, 169, 220, 0.3);
    z-index: 3;
    text-shadow: none;
}

.auth-btn:hover {
    opacity: 0.8;
}

/* Navigation Icons */
.nav-icons {
    display: flex;
    align-items: center;
    gap: .1em;
    
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.nav-item:hover {
    transform: translateY(-0.05rem);
}

.nav-icon {
    width: 0.4rem;
    height: 0.4rem;
    object-fit: contain;
}

.nav-text {
    font-size: 0.2em;
    color: #838383;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

.header-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    max-width: 100%;
    box-sizing: border-box;
}

/* Menu hamburger */
.menu-toggle {
    cursor: pointer;
    padding: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-toggle-icon {
    width: 0.5rem;
    height: 0.5rem;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.menu-toggle:hover .menu-toggle-icon {
    transform: scale(1.05);
}

/* Header spacer để cân bằng layout */
.header-spacer {
    width: .5rem;
    box-sizing: border-box;
}

/* Logo section */
.logo-section {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    box-sizing: border-box;
}

.header-logo {
    height: 0.61rem;
    /* Giảm chiều cao logo xuống một nửa */
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-sizing: border-box;
}

.fly88-logo,
.okvip-logo {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    box-sizing: border-box;
}

.logo-separator {
    width: 0.0625rem;
    height: 1.25rem;
    background-color: var(--skin__primary);
}

.logo-text {
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.125rem;
    max-width: 100%;
    word-wrap: break-word;
    white-space: nowrap;
    box-sizing: border-box;
    flex-shrink: 1;
}

.fly88-logo .logo-text {
    color: var(--skin__primary);
}

.okvip-logo .logo-text {
    color: #000000;
}

.ok-icon {
    font-size: 0.75rem;
    color: #ff6b35;
}

/* Category Games Section */
.category-games-section {
    background-color: #FFFFFF;
    padding: 0rem 0rem 0.1rem 0rem;
    position: sticky;
    top: 0.9rem;
    z-index: 98;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: .02rem solid #fff;
    background: linear-gradient(270deg, #e7f5ff 5.26%, #fff 51.99%, #e7f5ff 90.78%);
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
    border-radius: 0 0 .31542rem .31542rem;
}

.category-scroll-container {
    background-color: #fff;
    display: flex;
    gap: 0.2rem;
    padding: 0 0.3rem;
    max-width: var(--lobby__max-width);
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    width: 100%;
    /* Ẩn scrollbar nhưng vẫn có thể scroll được */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE và Edge */
    cursor: grab;
    user-select: none; /* Ngăn chọn text khi kéo */
    border-radius: 0 0 .25rem .25rem;
}

.category-scroll-container:active {
    cursor: grabbing;
}

/* Ẩn scrollbar cho Chrome, Safari và Opera */
.category-scroll-container::-webkit-scrollbar {
    display: none;
}

.category-item {
    /* background-image: url('../images/cate_games/bg_cate.avif'); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-color: transparent;
    border: none;
    border-radius: 0.3rem;
    width: 1.3rem; /* nhỏ hơn nữa */
    height: 1.3rem; /* đảm bảo chiều cao 1.3rem */
    min-width: 1.3rem;
    min-height: 1.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.04rem; /* giảm khoảng cách cho text thoáng hơn */
    padding: 0.1rem 0.1rem 0.1rem; /* nhích icon lên, tăng padding dưới */
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    position: relative;
    /* box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.05); */
    scroll-snap-align: start;
    margin-bottom: 0.1rem;
}

.category-item:hover {
    transform: translateY(-0.02rem);
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}

.category-item.active {
    background-image: url('../images/cate_games/bg_cate_active.avif');
    border: none;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 150, 200, 0.15);
    padding: 0.1rem 0.1rem 0.1rem; /* giữ icon cao hơn */
}

.category-icon {
    width: 0.74rem; /* tăng thêm */
    height: 0.74rem;
    object-fit: contain;
    object-position: center;
    transition: all 0.2s ease;
    transform: translateY(-0.04rem); /* đẩy icon lên một chút */
}

.category-item.active .category-icon {
    width: 0.95rem;
    height: 0.8rem;
    transform: translateY(-0.04rem);
}

.category-text {
    font-size: 0.18em; /* thu nhỏ chữ thêm chút để cân đối */
    color: #000;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-transform: uppercase;
}

.category-nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.category-nav-arrow:hover {
    transform: translateX(0.05rem);
}

/* Banner Slider - Swiper */
.banner-slider {
    width: 100%;
    height: 2.2rem; /* Cố định chiều cao banner *
    min-height: 3.2rem;
    max-height: 3.2rem;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #f0f8ff;
    /* Màu nền mặc định */
    z-index: 0;
    /* Đảm bảo banner ở dưới */
    flex-shrink: 0; /* Không cho co lại */
}

.banner-slider .swiper {
    width: 100%;
    height: 100%;
}

.banner-slider .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.banner-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đổi thành cover để fill toàn bộ */
    object-position: center;
    /* Căn giữa ảnh */
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    /* Loại bỏ khoảng trắng dưới ảnh */
}


.slider-wrapper {
    display: flex;
    width: 400%;
    /* 4 slides */
    height: 100%;
    transition: transform 0.5s ease;
    cursor: grab;
    /* Cursor grab khi hover */
    transform: translateX(0%);
    /* Vị trí ban đầu */
}

.slider-wrapper:active {
    cursor: grabbing;
    /* Cursor grabbing khi đang kéo */
}

.slide {
    width: 100%;
    /* 1/4 của slider-wrapper */
    height: 100%;
    flex-shrink: 0;
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}


.slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Hiển thị toàn bộ ảnh không bị cắt */
    object-position: center;
    /* Căn giữa ảnh */
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    /* Loại bỏ khoảng trắng dưới ảnh */
}

/* Slider indicators */
.slider-indicators {
    position: absolute;
    bottom: 0.125rem;
    /* Sát cạnh dưới */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.0625rem;
    /* Giảm khoảng cách giữa các indicators */
    z-index: 10;
}

.indicator {
    width: 0.09375rem;
    /* ~1.5px - nhỏ gấp đôi */
    height: 0.09375rem;
    /* ~1.5px - nhỏ gấp đôi */
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.indicator.active {
    background-color: white;
    /* Màu trắng như trong ảnh */
    width: 0.125rem;
    /* Nhỏ hơn một chút khi active */
    height: 0.125rem;
}

/* Bottom Information Bar - Marquee */
.bottom-info-bar {
    background-color: #fff;
    /* Light grey background như trong ảnh */
    border-top: 1px solid var(--skin__border);
    display: flex;
    align-items: center;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    /* Cho phép hiển thị đầy đủ */
    position: relative;
    z-index: 2;
    /* Đảm bảo ở trên banner */
}

.bottom-info-bar marquee {
    width: 100%;
    height: 0.4em;
    display: flex;
    align-items: center;
}

.marquee-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    box-sizing: border-box;
    width: 100%;
    /* Đảm bảo chiều rộng đầy đủ */
}

.marquee-content p {
    font-size: 0.24em;
    /* Font size nhỏ như yêu cầu */
    color: #666;
    /* Màu xám như trong ảnh */
    margin: 0;
    padding: 0;
    white-space: nowrap;
    animation: none;
    /* Tắt animation mặc định */
}

.marquee-icon {
    height: 0.3em;
    /* Kích thước nhỏ hơn như yêu cầu */
    width: auto;
    margin: 0 0.1rem;
    flex-shrink: 0;
}

.tin-tuc-section {
    position: relative;
    padding: 0.1rem 0rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    position: absolute;
    right: 0;
    z-index: 10;
    background-color: #fff;
    justify-content: center;
}

.tin-tuc-text {
    position: absolute;
    font-size: 0.15em;
    color: #666;
    font-weight: bold;
    z-index: 1;
    top: 46%;
    left: 55%;
    transform: translate(-50%, -50%);
}

.info-left,
.info-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0;
    /* Bỏ margin để compact hơn */
    max-width: 100%;
    box-sizing: border-box;
}

.speaker-icon,
.rocket-icon {
    font-size: 0.3em;
    /* Font size nhỏ như yêu cầu */
    color: #666;
    /* Màu xám như trong ảnh */
}

.info-text {
    font-size: 0.3em;
    /* Font size nhỏ như yêu cầu */
    color: #666;
    /* Màu xám như trong ảnh */
    max-width: 100%;
    word-wrap: break-word;
    box-sizing: border-box;
}

.hot-news-btn {
    background-color: #87CEEB;
    /* Light blue như trong ảnh */
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 0.125rem;
    font-size: 0.3em;
    /* Font size nhỏ như yêu cầu */
    font-weight: bold;
    cursor: pointer;
    box-sizing: border-box;
    text-transform: uppercase;
    /* Chữ hoa như trong ảnh */
}

/* Logo FLY88 - Legacy styles for main content */
.logo {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
    max-width: 100%;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.logo.show {
    opacity: 1;
    transform: scale(1);
}

/* Icon máy bay giấy */
.paper-plane {
    width: 0.2rem;
    height: 0.2rem;
    max-width: 100%;
    background: linear-gradient(135deg, var(--skin__primary), #0097a7);
    clip-path: polygon(0% 50%, 20% 20%, 20% 40%, 80% 40%, 80% 60%, 20% 60%, 20% 80%);
    animation: fly 2s ease-in-out infinite;
    box-sizing: border-box;
    flex-shrink: 0;
    /* Không cho phép co lại */
}

/* Text FLY88 */
.logo-text {
    font-size: 0.5rem;
    font-weight: bold;
    color: var(--skin__primary);
    letter-spacing: 0.125rem;
    max-width: 100%;
    word-wrap: break-word;
    /* Ngăn text tràn */
    white-space: nowrap;
    /* Giữ text trên 1 dòng */
    box-sizing: border-box;
    flex-shrink: 1;
    /* Cho phép co lại nếu cần */
}

/* Animation máy bay bay */
@keyframes fly {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    50% {
        transform: translateX(10px) rotate(5deg);
    }
}

/* Loading overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--skin__bg_1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.5s ease;
    overflow: hidden;
    /* Ngăn scroll hoàn toàn trong loading */
    max-width: 100%;
    /* Không vượt quá container */
    box-sizing: border-box;
}

.loading-overlay.hide {
    opacity: 0;
    pointer-events: none;
}

/* Loading image */
.loading-image {
    width: 6rem;
    height: 6rem;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    object-fit: contain;
    /* Giữ tỷ lệ ảnh */
    display: block;
    /* Đảm bảo hiển thị đúng */
}

/* Nội dung chính sau loading */
.main-content {
    opacity: 0;
    transform: translateY(1.875rem);
    transition: all 0.8s ease;
    text-align: center;
    max-width: 100%;
    width: 100%;
    padding: 1rem;
    /* Thêm padding để tránh text sát mép */
    box-sizing: border-box;
    flex: 1;
    /* Chiếm không gian còn lại */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-content.show {
    opacity: 1;
    transform: translateY(0);
}

.welcome-text {
    font-size: 0.4rem;
    color: #333;
    margin-top: 1.875rem;
    font-weight: 300;
    max-width: 100%;
    word-wrap: break-word;
    line-height: 1.4;
    box-sizing: border-box;
    overflow-wrap: break-word;
    /* Ngăn text tràn */
}

@media (max-width: 48rem) {
    .category-item {
        width: 1.35rem; /* nhỏ hơn trên mobile */
        height: 1.35rem; /* đồng bộ chiều cao */
        min-width: 1.35rem;
        min-height: 1.35rem;
    }
    .category-icon { width: 0.7rem; height: 0.7rem; }
    .category-item.active .category-icon { width: 0.78rem; height: 0.78rem; }
}

/* Content Section */
.content-section {
    /* padding: 0.3rem 0 1.7rem; */
    /* min-height: 3rem; */
    flex: 1; /* Cho phép mở rộng */
}

.content-container {
    max-width: 100%;
    box-sizing: border-box;
}

/* Games Grid - 3 cột */
.games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.15rem;
    padding: 0.2rem;
    max-width: 100%;
    box-sizing: border-box;
}

.game-item {
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s ease;
    border-radius: 0.15rem;
    overflow: hidden;
    aspect-ratio: 3/4;
    display: flex;
    align-items: center;
    justify-content: center;
}


.game-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Games Info Section */
.games-info-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 0.3rem;
    padding: 0.4rem 0.2rem;
    margin-top: 0.2rem; */
}

.games-info-text {
    font-size: 0.18em;
    color: #888;
    text-align: center;
    margin: 0;
}

.games-info-text span {
    font-weight: 600;
    color: #666;
}

.load-more-btn {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0.4rem;
    background-color: transparent;
    border: none;
    color: #888;
    font-size: 0.18em;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0.15rem;
}

.load-more-btn:hover {
    color: #02A9DC;
    transform: translateY(-0.02rem);
}

.load-more-btn:active {
    transform: translateY(0);
}

.load-more-btn svg {
    width: 0.2rem;
    height: 0.2rem;
    transition: transform 0.2s ease;
}

.load-more-btn:hover svg {
    transform: translateY(0.02rem);
}

/* Games Section Header */
.games-section-header {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0;
}

.games-section-icon {
    width: 0.7rem;
    height: 0.7rem;
    object-fit: contain;
    padding-bottom: 0.15em;
}

.games-section-title {
    font-size: 0.28em;
    font-weight: 700;
    color: #333;
}

.games-count {
    font-size: 0.24em;
    color: #fff;
    background: linear-gradient(135deg, #02A9DC, #0096C8);
    padding: 0.05rem 0.2rem;
    border-radius: 0.3rem;
    font-weight: 600;
}

.games-label {
    font-size: 0.3em;
    color: #666;
    font-weight: 600;
}

/* Category Block - each category section */
.category-block {
    margin-bottom: 0.4rem;
    width: 100%;
    box-sizing: border-box;
}

.category-block:last-child {
    margin-bottom: 0;
}

/* Games Grid Container */
.games-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Game Item Card */
.game-item-card {
    border-radius: 0.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    max-width: 100%;
    box-sizing: border-box;
    transform: scale(0.9);
}


.game-item-card:active {
    transform: scale(0.9) translateY(0);
}

/* Game Image Container */
.game-image-container {
    width: 100%;
    aspect-ratio: 5 / 6;
    position: relative;
    border-radius: 0.15rem;
    overflow: visible;
    background-image: url('../images/category-games/bg/img_bgk.avif');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.game-image-overlay{
    position: relative;
    margin-top: 0.3em;
    width: 83%;
}
.game-item-image {
    width: calc(100% - 0.16rem);
    height: calc(100% - 0.16rem);
    object-fit: cover;
    object-position: center center;
    border-radius: 0.3rem;
    transition: transform 0.3s ease;
    display: block;
    margin: 0.08rem auto 0;
}

/* Game Provider Logo */
.game-provider-logo {
    position: absolute;
    top: 0rem;
    left: 0.4rem;
    width: 1rem;
    height: 0.61rem;
    object-fit: contain;
    z-index: 3;
}

/* Game Favorite Icon */
.game-favorite-icon {
    position: absolute;
    top: 0.14rem;
    right: 0.14rem;
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0.015rem 0.05rem rgba(0, 0, 0, 0.15);
}

.game-favorite-icon:hover {
    background: #FFD700;
    transform: scale(1.1);
}

.game-favorite-icon svg {
    width: 0.4rem;
    height: 0.4rem;
    fill: #D3D3D3;
}

.game-favorite-icon.active svg {
    fill: #FFD700;
}

/* Game Hot Badge */
.game-hot-badge {
    position: absolute;
    top: 0.14rem;
    left: 0.14rem;
    background: linear-gradient(135deg, #FF6B35, #FF4500);
    color: #fff;
    font-size: 0.13em;
    font-weight: 700;
    padding: 0.025rem 0.1rem;
    border-radius: 0.25rem;
    z-index: 4;
    text-transform: uppercase;
    box-shadow: 0 0.03rem 0.08rem rgba(0, 0, 0, 0.25);
}

/* Game Title */
.game-item-title {
    font-size: 0.23em;
    color: #848484;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
    width: 100%;
    padding: 0 0.03rem;
    order: 2;
}

/* Filter Buttons */
.games-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0.15rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.games-filter-bar::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    padding: 0.1rem 0.25rem;
    border: 1px solid #E3E3E3;
    background: #fff;
    border-radius: 0.3rem;
    font-size: 0.2em;
    color: #666;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-btn:hover {
    border-color: #02A9DC;
    color: #02A9DC;
}

.filter-btn.active {
    background: linear-gradient(135deg, #02A9DC, #0096C8);
    color: #fff;
    border-color: #02A9DC;
}

/* Responsive */
@media (max-width: 48rem) {
    .games-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .game-item-title {
        font-size: 0.26em;
    }
}

/* Bottom Navigation Menu */
.bottom-nav-menu {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: var(--lobby__max-width);
    width: 100%;
    height: 1.37rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 0.15rem 0.12rem;
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
    box-shadow: 0 -0.04rem 0.15rem rgba(0, 0, 0, 0.08);
    z-index: 50;
    box-sizing: border-box;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    padding-bottom: 0.2rem;
}


.bottom-nav-icon {
    width: 0.6rem;
    height: 0.55rem;
    object-fit: contain;
    margin-bottom: 0.04rem;
}

.bottom-nav-text {
    font-size: 0.15em;
    color: #AAAAAA;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
}

/* Icon giữa (TRANG CHỦ) nổi lên */
.bottom-nav-center {
    position: relative;
    /* margin-bottom: 0.7rem;  */
}

.bottom-nav-icon-center {
    width: 1.3rem;
    height: 1.3rem;
    object-fit: contain;
    margin-bottom: 0.3rem;
    filter: drop-shadow(0 0.1rem 0.2rem rgba(2, 169, 220, 0.3));
}

.bottom-nav-center .bottom-nav-text {
    color: #00A8E1;
    font-weight: 600;
    font-size: 0.16em;
}

/* Responsive cho mobile */
@media (max-width: 48rem) {
    .bottom-nav-menu {
        max-width: 100%;
        height: 1.5rem;
    }
    
    .bottom-nav-icon {
        width: 0.6rem;
        height: 0.6rem;
    }
    
    .bottom-nav-icon-center {
        width: 1.4rem;
        height: 1.4rem;
    }
    
    .bottom-nav-text {
        font-size: 0.22em;
    }
    
    
    .bottom-nav-center .bottom-nav-text {
        font-size: 0.22em;
    }
}

/* Footer */
.footer {
    width: 100%;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
    padding: 0.5rem 0.3rem 0.3rem;
    box-sizing: border-box;
    padding-bottom: 2.5rem;
}

.footer-content {
    max-width: var(--lobby__max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* gap: 0.3rem; */
}

.footer-title {
    font-size: 0.32em;
    color: #333;
    font-weight: 700;
    /* text-align: center; */
    margin: 0;
    padding: 0.15rem 0;
}

.footer-image-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0.2rem;
}

/* Partnership Logos */
.footer-partnerships {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.partnership-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.12rem 0; /* Giảm padding */
    /* Xóa border-bottom */
}

.partnership-text {
    flex: 0 0 50%; /* Chiếm đúng 50% */
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.partnership-name {
    font-size: 0.22em;
    color: #333;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.partnership-year {
    font-size: 0.19em;
    color: #666;
    font-weight: 400;
    margin: 0;
    line-height: 1.3;
}

.partnership-logos {
    flex: 0 0 50%; /* Chiếm đúng 50% */
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Căn logo về bên phải */
    gap: 0.2rem;
}

.partnership-logo-team {
    width: 100%; /* Phóng to từ 0.8rem lên 1.2rem */
    object-fit: contain;
}

.partnership-logo-okvip {
    width: 2.2rem; /* Phóng to từ 1.8rem lên 2.2rem */
    height: auto;
    object-fit: contain;
}

/* Footer Info Grid */
.footer-info-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cột */
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid #E8E8E8;
}

.footer-info-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.footer-info-title {
    font-size: 0.24em; /* Tăng từ 0.2em lên 0.24em */
    color: #333;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.footer-info-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    align-items: center;
}

.footer-info-logo {
    width: 80%;
    object-fit: contain;
}

@media (max-width: 48rem) {
    .footer {
        padding: 0.4rem 0.2rem 0.2rem;
    }
    
    .footer-title {
        font-size: 0.28em;
    }
    
    .partnership-name {
        font-size: 0.20em;
    }
    
    .partnership-year {
        font-size: 0.17em;
    }
    
    .partnership-logo-team {
        width: 1.1rem; /* Phóng to cho mobile */
        height: 1.1rem;
    }
    
    .partnership-logo-okvip {
        width: 2rem; /* Phóng to cho mobile */
    }
    
    .footer-info-grid {
        gap: 0.3rem;
    }
    
    .footer-info-title {
        font-size: 0.22em; /* Tăng từ 0.18em lên 0.22em */
    }
    
    .footer-info-logo {
        height: 0.45rem;
    }
}