/* =========================================================
   RESPONSIVE MOBILE FINAL V9
   Desktop >= 992px: giữ nguyên Bootstrap/source desktop.
   ========================================================= */

@media (max-width: 991.98px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    video, iframe {
        max-width: 100% !important;
        min-height: 0 !important;
    }

    .his-cas2 {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        position: relative;
    }

    .his-cas2 .slick-list {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
        overflow: hidden !important;
    }

    .his-cas2 .cas,
    .his-cas2 .slick-current .cas,
    .his-cas2 .slick-current + .slick-slide .cas {
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
    }

    .his-cas2 .prev,
    .his-cas2 .next {
        top: 50% !important;
        z-index: 120 !important;
        transform: translateY(-50%) !important;
        max-width: 42px !important;
    }

    .his-cas2 .prev { left: 8px !important; right: auto !important; }
    .his-cas2 .next { right: 8px !important; left: auto !important; }
}

@media (max-width: 767.98px) {
    body {
        font-size: 15px;
        line-height: 1.5;
    }

    /* MENU ĐẦU */
    .header .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .header .social {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header .social li {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: none !important;
    }

    .header .social li > a {
        width: 100% !important;
        display: block !important;
        position: relative !important;
        line-height: 0 !important;
        overflow: hidden !important;
    }

    .header .social li > a > img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .header .social li .name {
        top: 50% !important;
        left: 39% !important;
        right: 4% !important;
        width: auto !important;
        transform: translateY(-50%) !important;
        font-size: clamp(15px, 4vw, 19px) !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* KHUNG THAO TÁC MOBILE */
    .wrap-login {
        width: 100%;
        overflow: visible;
    }

    .wrap-login .content {
        width: calc(100% - 6px) !important;
        max-width: 445px !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto 12px !important;
        padding: 21px 15px 19px !important;
        box-sizing: border-box !important;

        background: rgba(246,239,211,.92) !important;
        border-style: solid !important;
        border-width: 18px 14px 17px !important;
        border-color: transparent !important;
        border-image-source: url(../images/bg_thanhtich.png) !important;
        border-image-slice: 16% 5% 15% 5% fill !important;
        border-image-repeat: stretch !important;
        overflow: visible !important;
    }

    /* 2 cột trên lớn hơn V8 khoảng 8-10% */
    .mobile-action-layout {
        --recharge-w: clamp(158px, 48vw, 198px);
        --download-w: clamp(110px, 33vw, 138px);
        --top-gap: clamp(7px, 2.2vw, 10px);
        --account-gap: clamp(7px, 2vw, 9px);

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        display: grid !important;
        grid-template-columns: max-content max-content !important;
        grid-template-areas:
            "recharge downloads"
            "account account" !important;

        justify-content: center !important;
        align-items: center !important;
        column-gap: var(--top-gap) !important;
        row-gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Gỡ Bootstrap CHỈ trên mobile */
    .mobile-action-recharge,
    .mobile-action-downloads,
    .mobile-action-account,
    .mobile-account-item {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: none !important;
    }

    .mobile-action-recharge {
        grid-area: recharge !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .mobile-action-recharge-link {
        width: var(--recharge-w) !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 314 / 187 !important;
        margin: 0 !important;
        line-height: 0 !important;
    }

    .mobile-action-recharge-link > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: contain !important;
    }

    .mobile-action-downloads {
        grid-area: downloads !important;
        width: var(--download-w) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .wrap-login .mobile-download-item.btn_download {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: none !important;
    }

    .mobile-download-link {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 210 / 60 !important;
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
        line-height: 0 !important;
    }

    .mobile-download-link > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: contain !important;
    }

    .mobile-download-link .name {
        top: 50% !important;
        left: 34% !important;
        right: 3% !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;
        font-size: clamp(8px, 2.45vw, 10.5px) !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }

    .mobile-action-account {
        grid-area: account !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
    }

    .mobile-account-list {
        width: calc(var(--recharge-w) + var(--download-w) + var(--top-gap)) !important;
        max-width: 100% !important;
        height: auto !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: var(--account-gap) !important;
        row-gap: 7px !important;

        align-items: start !important;
        justify-items: stretch !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .mobile-account-item {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    .mobile-account-guide {
        grid-column: 1 / -1 !important;
        width: calc((100% - var(--account-gap)) / 2) !important;
        justify-self: center !important;
    }

    .mobile-account-button.btn-login {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }

    .mobile-account-button.btn-login > img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    /* TITLE: nền lớn hơn, crop ngang, không méo */
    .title_index,
    .wrap-baodanh .title_index,
    .slideshow .title_index,
    .wrap-newsnb .title_index {
        width: 94vw !important;
        max-width: 460px !important;
        height: clamp(52px, 14vw, 62px) !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;

        margin: 8px auto 10px !important;
        padding: 0 10% !important;
        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: url(../images/bg_title.png) no-repeat center center !important;
        background-size: auto 125% !important;
        overflow: hidden !important;
    }

    .title_index span,
    .wrap-baodanh .title_index span,
    .slideshow .title_index span {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: clamp(16px, 4.4vw, 20px) !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    .wrap-newsnb .title_index span {
        font-size: clamp(12px, 3.35vw, 15.5px) !important;
    }

    /* BÁO DANH */
    .wrap-baodanh {
        padding-top: 4px !important;
        padding-bottom: 6px !important;
    }

    .wrap-baodanh > .container {
        padding-top: 0 !important;
        padding-bottom: 4px !important;
    }

    .gr_baodanh {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .wrap-baodanh .item_nhanthuong .line {
        height: 64px !important;
    }

    .wrap-baodanh .item_nhanthuong .line > img {
        width: 94px !important;
        height: 55px !important;
        max-width: 54% !important;
        object-fit: contain !important;
        /* Dịch marker NHẬN sang phải 2px để cân tâm với bảng thưởng */
        transform: translateX(4px) !important;
    }

    .gr_baodanh::before {
        height: 64px !important;
        background-size: 100% auto !important;
    }

    .gr_baodanh::after {
        top: 24px !important;
        height: 12px !important;
    }

    .wrap-baodanh .item_nhanthuong > a {
        /* Căn tâm bảng thưởng với marker NHẬN trên mobile */
        left: 8px !important;
        /* Kéo phần bảng + 2 sợi xích lên để đầu xích chạm sát line */
        margin-top: -28px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    /* SLIDER */
    .slideshow {
        padding-top: 4px !important;
        padding-bottom: 10px !important;
    }

    .slideshow > .container {
        padding-top: 0 !important;
        padding-bottom: 4px !important;
    }

    .his-cas2 .slick-list {
        padding: 16px 0 20px !important;
    }

    .his-cas2 .prev,
    .his-cas2 .next {
        max-width: 30px !important;
    }

    .his-cas2 .prev { left: 4px !important; }
    .his-cas2 .next { right: 4px !important; }

    /* SỰ KIỆN */
    .wrap-newsnb {
        padding-top: 6px !important;
        padding-bottom: 18px !important;
    }

    .wrap-newsnb > .container {
        padding-top: 0 !important;
        padding-bottom: 4px !important;
    }

    .wrap-newsnb .row {
        padding-top: 4px !important;
        padding-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wrap-newsnb .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .wrap-newsnb .item_news {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 674 / 110 !important;
        margin: 0 0 11px !important;
        padding: 0 7% !important;
        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background-image: url(../images/bg_nv.png) !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: 100% auto !important;
    }

    .wrap-newsnb .item_news a {
        display: block !important;
        width: 100% !important;
        font-size: clamp(19px, 5.4vw, 25px) !important;
        line-height: 1.08 !important;
        text-align: center !important;
    }

    .footer,
    .footer-article {
        background: transparent !important;
        background-color: transparent !important;
    }
}

@media (max-width: 480px) {
    .wrap-login .content {
        width: calc(100% - 4px) !important;
        padding: 18px 11px 16px !important;
        border-width: 16px 12px 15px !important;
    }

    .mobile-action-layout {
        --recharge-w: clamp(150px, 47vw, 182px);
        --download-w: clamp(104px, 32vw, 127px);
        --top-gap: 6px;
        --account-gap: 7px;
        row-gap: 10px !important;
    }

    .mobile-action-downloads { gap: 3px !important; }
    .mobile-account-list { row-gap: 6px !important; }

    .title_index,
    .wrap-baodanh .title_index,
    .slideshow .title_index,
    .wrap-newsnb .title_index {
        width: 96vw !important;
        height: clamp(50px, 14.5vw, 59px) !important;
        background-size: auto 128% !important;
    }

    .title_index span,
    .wrap-baodanh .title_index span,
    .slideshow .title_index span {
        font-size: clamp(15px, 4.25vw, 19px) !important;
    }

    .wrap-newsnb .title_index span {
        font-size: clamp(11px, 3.15vw, 14px) !important;
    }
}

@media (max-width: 360px) {
    .wrap-login .content {
        padding: 15px 8px 14px !important;
        border-width: 15px 10px 14px !important;
    }

    .mobile-action-layout {
        --recharge-w: 150px;
        --download-w: 103px;
        --top-gap: 5px;
        --account-gap: 6px;
    }

    .mobile-action-downloads { gap: 2px !important; }
    .mobile-download-link .name { font-size: 7.5px !important; }

    .title_index span,
    .wrap-baodanh .title_index span,
    .slideshow .title_index span {
        font-size: 14px !important;
    }

    .wrap-newsnb .title_index span {
        font-size: 10px !important;
    }
}