/* =========================================================
   LAYOUT DESKTOP V10.1
   - Thu gọn cụm 3 cột theo chiều ngang
   - Nút Nạp thẻ nhỏ lại
   - Khung background lớn hơn nhẹ
   - Cân lề trái/phải + khoảng cách cột
   - Mobile < 768px không bị ảnh hưởng
   ========================================================= */

/* ---------- DESKTOP >= 992px ---------- */
@media (min-width: 992px) {

    /*
       Khung V10: 726px
       V10.1: 760px
       Tăng nhẹ background để có thêm khoảng thở quanh nội dung.
       Giữ đúng tỷ lệ bg_thanhtich 994/333.
    */
    .wrap-login .content {
        width: 760px !important;
        max-width: 760px !important;
        aspect-ratio: 994 / 333 !important;
        height: auto !important;
        min-height: 0 !important;

        padding: 22px 18px !important;
        box-sizing: border-box !important;

        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;

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

    /*
       Cụm bên trong thu gọn:
       180 + 170 + 180 + 40 + 40 = 610px

       Vùng trong khung:
       760 - 36px padding = 724px
       Dư 114px => 57px mỗi bên.
       => cân đều trái/phải rõ ràng hơn.
    */
    .wrap-login .content > .row.my-3 {
        width: 610px !important;
        max-width: 610px !important;
        min-height: 185px !important;

        display: grid !important;
        grid-template-columns: 180px 170px 180px !important;
        column-gap: 40px !important;

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

        margin: 0 auto !important;
        padding: 0 !important;

        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-5,
    .wrap-login .content > .row.my-3 > .col-md-3,
    .wrap-login .content > .row.my-3 > .col-md-4 {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        height: 185px !important;
        min-height: 185px !important;

        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;

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

    /* ===== CỘT 1: NẠP THẺ nhỏ lại ===== */
    .wrap-login .content > .row.my-3 > .col-md-5 > a.link {
        width: 180px !important;
        max-width: 180px !important;
        height: auto !important;

        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
        line-height: 0 !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-5 > a.link > img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    /* ===== CỘT 2: TẢI GAME ===== */
    .wrap-login .content > .row.my-3 > .col-md-3 {
        flex-direction: column !important;
        gap: 5px !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-3 > .btn_download {
        width: 170px !important;
        max-width: 170px !important;
        height: auto !important;
        min-height: 0 !important;

        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-3 > .btn_download > a.link {
        width: 170px !important;
        height: auto !important;

        display: block !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        overflow: hidden !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-3 > .btn_download > a.link > img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* ===== CỘT 3: ĐĂNG KÝ / ĐĂNG NHẬP / HƯỚNG DẪN ===== */
    .wrap-login .content > .row.my-3 > .col-md-4 {
        margin-top: 0 !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-4 > .d-flex {
        width: 180px !important;
        max-width: 180px !important;

        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;

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

        gap: 5px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-4 > .d-flex > div {
        width: 180px !important;
        max-width: 180px !important;
        min-width: 0 !important;

        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-4 .btn-login {
        display: block !important;
        width: 180px !important;
        max-width: 180px !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-4 .btn-login > img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }
}


/* ---------- TABLET NGANG 768–991px ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {

    .wrap-login .content {
        width: min(94vw, 720px) !important;
        max-width: 720px !important;
        aspect-ratio: 994 / 333 !important;
        height: auto !important;
        min-height: 0 !important;

        padding: 20px 16px !important;
        box-sizing: border-box !important;

        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;

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

    .wrap-login .content > .row.my-3 {
        --v101-c1: clamp(165px, 23vw, 180px);
        --v101-c2: clamp(155px, 21vw, 170px);
        --v101-c3: clamp(165px, 23vw, 180px);
        --v101-gap: clamp(18px, 2.7vw, 34px);

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

        display: grid !important;
        grid-template-columns:
            var(--v101-c1)
            var(--v101-c2)
            var(--v101-c3) !important;

        column-gap: var(--v101-gap) !important;

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

        margin: 0 auto !important;
        padding: 0 !important;

        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-5,
    .wrap-login .content > .row.my-3 > .col-md-3,
    .wrap-login .content > .row.my-3 > .col-md-4 {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
        flex: none !important;

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

    .wrap-login .content > .row.my-3 > .col-md-5 > a.link {
        width: var(--v101-c1) !important;
        max-width: var(--v101-c1) !important;
        height: auto !important;
        margin: 0 !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-3 {
        flex-direction: column !important;
        gap: 4px !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-3 > .btn_download,
    .wrap-login .content > .row.my-3 > .col-md-3 > .btn_download > a.link {
        width: var(--v101-c2) !important;
        max-width: var(--v101-c2) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-4 {
        margin-top: 0 !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-4 > .d-flex,
    .wrap-login .content > .row.my-3 > .col-md-4 > .d-flex > div,
    .wrap-login .content > .row.my-3 > .col-md-4 .btn-login {
        width: var(--v101-c3) !important;
        max-width: var(--v101-c3) !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-4 > .d-flex {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }
}