.home-container.main-content {
    background: #f4f4f4;
}

/* header */
/* --- RESPONSIVE HEADER GỌN NHẸ --- */
@media (max-width: 991px) {

    /* Khung bao ngoài */
    :root {
        --header-top-height: auto;
        /* Cho phép co giãn theo nội dung */
        --header-bottom-height: 50px;
    }

   
    /* Header Top: Logo một bên, Nút bấm một bên */
    .header-top-container {
        display: flex !important;
        gap: 10px !important;
        padding: 8px 10px !important;
    }

    .header-top-left .common-logo {
        height: 28px !important;
        /* Thu nhỏ logo */
    }

    .header-top-right {
        flex: 1;
        align-items: flex-end !important;
        gap: 5px !important;
    }

    /* Ẩn các thành phần gây rườm rà trên Mobile */
    .header-date,
    .hd-nav-name,
    .ok-vip {
        display: none !important;
    }

    /* Thu gọn nút Đăng nhập/Đăng ký */
    .hd-login.important {
        gap: 5px !important;
    }

    .hd-login.important .submit_btn,
    .hd-login.important .register-btn {
        min-width: 90px !important;
        /* Nén chiều rộng nút */
        height: 30px !important;
        font-size: 12px !important;
        padding: 0 8px !important;
    }

    .hd-login.important .submit_btn svg,
    .hd-login.important .register-btn svg {
        display: none !important;
        /* Ẩn icon trong nút để tiết kiệm diện tích */
    }

    /* --- MENU CHÍNH TRƯỢT NGANG (SLIDE) --- */
    .header-bottom {
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    .nav-items {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* Không xuống dòng */
        overflow-x: auto !important;
        /* Cho phép cuộn ngang */
        -webkit-overflow-scrolling: touch;
        gap: 0 !important;
    }

    .nav-items::-webkit-scrollbar {
        display: none;
        /* Ẩn thanh cuộn để giao diện sạch sẽ */
    }

    .nav-item {
        flex: 0 0 auto !important;
        /* Giữ nguyên kích thước mục menu */
    }

    .nav-item-content {
        padding: 0 15px !important;
        flex-direction: column;
        /* Icon trên, chữ dưới */
        gap: 2px !important;
    }

    .nav-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .nav-name {
        font-size: 11px !important;
        white-space: nowrap !important;
        /* Ép chữ trên 1 dòng */
    }

    /* Header Nav (Các icon phụ như CSKH, Khuyến mãi) */
    .header-nav {
        gap: 15px !important;
    }
}

/* Mobile cực nhỏ */
@media (max-width: 360px) {

    .hd-login.important .submit_btn span,
    .hd-login.important .register-btn span {
        font-size: 11px !important;
    }

    .header-top-left .common-logo {
        height: 24px !important;
    }
}



/* <----- sidebar ---------> */

/* --- TỐI ƯU RESPONSIVE CHO MOBILE & TABLET --- */
@media (max-width: 991px) {

    /* 1. ẨN CÁC THÀNH PHẦN RƯỜM RÀ */
    #sidebar-time,
    /* Ẩn giờ ở sidebar */
    .header-date,
    /* Ẩn giờ ở header */
    .language-text,
    /* Ẩn chữ "Tiếng Việt" chỉ để flag */
    .nav-arrow,
    /* Ẩn mũi tên menu */
    .rightbar_title,
    /* Ẩn chữ trong menu tròn bên phải cho gọn */
    .form-desc .desc-split,
    /* Ẩn các gạch chia */
    .top-action .language-select .arrow-icon {
        display: none !important;
    }

    /* 2. ĐIỀU CHỈNH SIDEBAR TRÁI (LEFT BAR) */
    .left-bar {
        width: 60px !important;
        /* Thu hẹp sidebar cực đại trên mobile */
    }

    .left-bar.off {
        transform: translateX(-100%);
        /* Ẩn hẳn sidebar nếu ở trạng thái off */
    }

    .left-bar .nav-item-content {
        justify-content: center !important;
        padding: 0 !important;
    }

    .left-bar .nav-name {
        display: none;
        /* Chỉ để lại Icon trên mobile cho chuyên nghiệp */
    }

    /* 3. MENU TRÒN BÊN PHẢI (RIGHT BAR CIRCLE) */
    /* Giảm kích thước để không che khuất nội dung trò chơi */
    .br_right_bar_circle {
        transform: scale(0.8);
        right: -10px;
        bottom: 100px;
        top: auto;
        /* Đẩy xuống góc dưới bên phải như nút hỗ trợ của App */
    }

    .br_right_bar_circle .center-btn {
        width: 80px !important;
        height: 80px !important;
    }

    /* 4. GRID TRÒ CHƠI (GAME LIST) */
    /* Desktop đang là 8 cột, Mobile nên để 2 hoặc 3 cột */
    .game-list-wrapper .game-list {
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2 cột mỗi dòng */
        gap: 10px !important;
        padding: 10px;
    }

    .game-list-item .game-name {
        font-size: 12px !important;
    }

    /* 5. HEADER TOP & BUTTONS */
    .header-top-container {
        padding: 5px 10px !important;
    }

    .hd-login.important .submit_btn,
    .hd-login.important .register-btn {
        min-width: 80px !important;
        height: 32px !important;
        font-size: 11px !important;
        padding: 0 5px !important;
    }

    /* 6. THANH MENU CHÍNH TRƯỢT NGANG */
    .header-bottom {
        height: 45px !important;
    }

    .nav-items {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        gap: 0 !important;
    }

    .nav-items::-webkit-scrollbar {
        display: none;
    }

    .nav-item-content {
        padding: 0 12px !important;
        flex-direction: column;
        height: 45px !important;
    }

    .nav-icon {
        width: 16px !important;
        height: 16px !important;
        margin-bottom: 2px;
    }

    .nav-name {
        font-size: 10px !important;
    }

    /* 7. NÚT LÊN ĐẦU TRANG */
    .go-top-btn {
        width: 40px !important;
        height: 40px !important;
        right: 15px !important;
        bottom: 70px !important;
    }
}

/* Fix lỗi hiển thị cho màn hình rất nhỏ */
@media (max-width: 375px) {
    .header-top-left .common-logo {
        height: 24px !important;
    }

    .hd-login.important {
        gap: 5px !important;
    }
}



/* ----- END SIDEBAR ----- */
/* HOME */
/* --- TỐI ƯU TỔNG THỂ --- */
@media (max-width: 991px) {
    :root {
        --header-total-height: 100px;
        /* Điều chỉnh lại chiều cao header mobile nếu cần */
    }

    .page-center {
        width: 100% !important;
        padding: 0 12px !important;
    }

    #app.main-content {
        padding-left: 0 !important;
        /* Mobile ẩn sidebar nên không cần padding-left */
        margin-top: 10px;
    }

    /* --- BANNER CHÍNH: To, sắc nét --- */
    .page-banner {
        padding: 0;
        margin-bottom: 15px;
    }

    .page-banner .banner-img {
        border-radius: 12px;
        min-height: 160px;
        /* Đảm bảo banner không bị quá lùn */
        object-fit: cover;
    }

    /* Ẩn mũi tên điều hướng trên mobile để thoáng ảnh */
    .index-swiper .swiper-arrow {
        display: none !important;
    }

    /* --- LIVE CASINO: Chuyển sang vuốt ngang --- */
    .home-live {
        flex-direction: column !important;
    }

    .home-live .hot-vendor-menu {
        width: 100% !important;
        padding: 0 !important;
        height: auto !important;
        background: none !important;
    }

    .home-live .hot-vendor-menu::before {
        display: none;
    }

    .hot-vendor-list {
        display: flex !important;
        overflow-x: auto;
        padding-bottom: 10px;
        gap: 12px !important;
        -webkit-overflow-scrolling: touch;
    }

    .hot-vendor-item {
        flex: 0 0 280px !important;
        /* Độ rộng ảnh sảnh hot */
        height: 140px !important;
        border-radius: 15px;
    }

    .live-list {
        grid-template-columns: repeat(3, 1fr) !important;
        /* 3 cột sảnh phụ */
        gap: 10px !important;
    }

    /* --- GAME CARDS (RNG & FISH): To và chuyên nghiệp --- */
    .game-list-item {
        border-radius: 12px !important;
        border: none !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .game-list-item .game-img img {
        height: 120px !important;
        object-fit: cover;
    }

    .game-list-item .game-info {
        height: 35px !important;
    }

    .game-name {
        font-size: 12px !important;
        text-shadow: none !important;
    }

    .online-player {
        scale: 0.8;
        bottom: 5px !important;
        right: 2px !important;
    }

    /* --- HOME NAVIGATION: Chia lưới 2-3 cột --- */
    .group1 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .group1-item {
        width: 100% !important;
        height: 110px !important;
        font-size: 18px !important;
    }

    .group2 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .group2-item {
        width: 100% !important;
        height: 120px !important;
    }

    .group2-name {
        font-size: 13px !important;
        height: 30px !important;
        line-height: 30px !important;
    }

    /* --- DOWNLOAD SECTION: Ẩn thừa, tập trung vào nút --- */
    .home-down-wrapper {
        padding: 25px 15px !important;
        margin-bottom: 40px;
    }

    .home-down-wrapper .app-show {
        display: none !important;
        /* Ẩn ảnh mockup điện thoại to gây chật chỗ */
    }

    .home-down-wrapper .qr-code-wrap {
        width: 100% !important;
    }

    .home-down-wrapper .qr-item {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* 2 nút tải song song */
        gap: 15px !important;
    }

    .qr-code .qr-bg {
        padding: 10px;
        /* display: none !important; */
        /* Ẩn QR vì mobile không quét được chính nó */
    }.qr-item .qr-btn{
        font-size: 17px;
        margin-bottom: 0;
    }

    .qr-down-btn {
        margin-top: 0 !important;
        height: 50px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 15px rgba(242, 101, 34, 0.4);
    }

    @media (max-width: 1024px) {

        .index-next,
        .index-prev,
        .LIVE-menu-next,
        .LIVE-menu-prev,
        .home-RNG-next,
        .home-RNG-prev,
        .RNG-menu-next,
        .RNG-menu-prev,
        .home-FISH-next,
        .home-FISH-prev,
        .FISH-menu-next,
        .FISH-menu-prev,
        .swiper-arrow {
            /* Class chung nếu bạn có dùng */
            display: none !important;
        }
    }
}

/* Fix cho màn hình cực nhỏ */
@media (max-width: 430px) {
    .live-list {
        grid-template-columns: 1fr 1fr !important;
    }

    .group2 {
        grid-template-columns: 1fr 1fr !important;
    }
}



/* tôi code tiếp */
/* Container tổng */
.home-nav {
    width: 100%;
    padding: 20px 0;
}

.home-nav-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Khoảng cách giữa nhóm 1 và nhóm 2 */
}

/* --- NHÓM 1: Các sảnh lớn (LIVE, RNG...) --- */
.group1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Desktop: 3 cột */
    gap: 15px;
}

.group1-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 180px;
    /* Chiều cao cố định trên desktop */
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background: #fff;
    /* Hoặc màu nền của bạn */
    transition: transform 0.3s ease;
}

.group1-item:hover {
    transform: translateY(-5px);
}

.group1-item-img {
    position: absolute;
    top: 0;
    right: 0;
    height: 90%;
    /* Ảnh lớn tràn xuống góc */
    width: auto;
    object-fit: contain;
}

.group1-name {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    z-index: 1;
    text-transform: uppercase;
}

/* --- NHÓM 2: Các sảnh phụ/icon nhỏ --- */
.group2 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* Desktop: 6 cột */
    gap: 15px;
}

.group2-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: #fff;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.group2-item-img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    object-fit: contain;
}

.group2-name {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
}

/* ======================================================
   RESPONSIVE CHO TABLET (Màn hình dưới 1024px)
   ====================================================== */
@media (max-width: 1024px) {
    .group1 {
        grid-template-columns: repeat(2, 1fr);
        /* Tablet: 2 cột */
    }

    .group2 {
        grid-template-columns: repeat(4, 1fr);
        /* Tablet: 4 cột */
    }
}

/* ======================================================
   RESPONSIVE CHO MOBILE (Màn hình dưới 768px)
   ====================================================== */
@media (max-width: 767px) {
    .home-nav-list {
        gap: 20px;
    }

    /* Nhóm 1 về 2 cột nhỏ hơn hoặc 1 cột tùy bạn, ở đây chọn 2 cột */
    .group1 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .group1-item {
        height: 120px;
        /* Thu thấp chiều cao trên mobile */
        padding: 12px;
    }

    .group1-name {
        font-size: 16px;
    }

    /* Nhóm 2 về 3 cột */
    .group2 {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .group2-item {
        padding: 10px;
    }

    .group2-item-img {
        width: 45px;
        height: 45px;
    }

    .group2-name {
        font-size: 11px;
    }

    .home-nav-title img:first-child,
    .home-nav-title img:last-child {
        display: none;
    }

    .home-nav-title span {
        font-size: 22px;
    }

    .notice-marquee-container {
        padding: 0;
    }

    .notice-marquee-container .speaker {
        width: 35px;
        height: 35px;
    }

    .notice-marquee-container .notice-main {
        gap: 5px
    }

    .home-live .home-live-inner {
        width: 100%;
    }

    .home-nav .group1-item-img {
        width: 139px;
    }

    .home-nav .group1-item {
        width: 100% !important;
        height: 200px !important;
    }

    .home-nav .group1 {
        justify-content: normal;
                grid: unset !important;

    }
    .home-nav .group2-item-img {
    width: 116px;
}
.home-down-wrapper .down-title1 {
    font-size: 19px;
}.home-down-wrapper .down-title-text {
    font-size: 19px;
}
}

/* Mobile siêu nhỏ */
@media (max-width: 400px) {
    .group2 {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cột cho máy quá bé */
    }
}




/* footer */
/* --- TỔNG THỂ FOOTER --- */
.footer-container {
    padding: 40px 15px;
    width: 100%;
}

.page-center {
    /* max-width: 1200px; */
    margin: 0 auto;
}

/* --- 1. PHẦN ĐỐI TÁC (PARTNERS) --- */
.footer-person {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    /* Cho phép các mục rớt dòng */
    gap: 30px;
    margin-bottom: 20px;
}

.footer-person-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 200px;
    /* Tự động co giãn, tối thiểu 200px */
    max-width: 300px;
}

.footer-person-item-person {
    width: 120px;
    /* Thu nhỏ ảnh nhân vật trên mobile */
    height: auto;
    margin-bottom: 10px;
    object-fit: contain;
}

.footer-person-item-logo {
    height: 30px;
    width: auto;
    margin-bottom: 8px;
    object-fit: contain;
}

/* --- 2. SOCIAL MEDIA & LOGOS --- */
.social-media {
    /* margin: 30px 0; */
    width: 100%;
}

.social-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.social-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.social-item img {
    max-height: 42px;
    width: auto;
}

/* .item-icon {
    width: 28px;
    height: 28px;
} */

/* --- 3. MENU HELP --- */
.help-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 30px;
    /* margin-bottom: 20px; */
}

.help-item {
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    /* Không cho chữ xuống dòng lẻ loi */
}

.footer-split {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    /* Đường kẻ mờ */
    margin: 20px 0;
}

.copyright {
    text-align: center;
    font-size: 13px;
    opacity: 0.7;
}

/* ======================================================
   RESPONSIVE TABLET (Dưới 991px)
   ====================================================== */
@media (max-width: 991px) {
    .footer-person-item {
        flex: 1 1 40%;
        /* Hiện 2 cột trên Tablet */
    }

    .footer-title {
        font-size: 22px;
        text-align: center;
    }
}

/* ======================================================
   RESPONSIVE MOBILE (Dưới 767px)
   ====================================================== */
@media (max-width: 767px) {
    .footer-container {
        padding: 30px 10px;
    }

   .footer-container .footer-person {
        gap: 20px;
    }

    .footer-person-item {
        flex: 1 1 100%;
        /* Đưa về 1 cột duy nhất trên Mobile */
        margin-bottom: 15px;
    }

    .footer-person-item-person {
        width: 100px;
        /* Ảnh nhân vật nhỏ hơn trên điện thoại */
    }

    .social-list {
        gap: 15px;
    }

    .item-name {
        display: none;
        /* Ẩn tên mạng xã hội, chỉ để icon cho gọn trên mobile */
    }

    .help-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Menu help chia 2 cột cho đẹp */
        text-align: center;
        gap: 10px;
    }

    .help-item {
        font-size: 13px;
    }
}

/* Mobile siêu nhỏ */
@media (max-width: 360px) {
    .help-list {
        grid-template-columns: 1fr;
        /* Máy quá nhỏ thì 1 cột */
    }
}