/* =========================================================
   LAYOUT DESKTOP V10
   File mới, load SAU responsive-mobile-final.css.
   Mục tiêu: ép cache đổi hash và căn lại đúng DOM Bootstrap đang chạy.
   Mobile < 768px không bị ảnh hưởng.
   ========================================================= */

/* ---------- DESKTOP >= 992px ---------- */
@media (min-width: 992px) {
    .wrap-login .content {
        width: 726px !important;
        max-width: 726px !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;
    }

    /*
       Dùng đúng DOM thật: .row.my-3 > col-md-5 / col-md-3 / col-md-4
       Không phụ thuộc class mobile-action-*.
       Bootstrap .row có margin âm nên reset hoàn toàn.
    */
    .wrap-login .content > .row.my-3 {
        width: 655px !important;
        max-width: 655px !important;
        min-height: 195px !important;

        display: grid !important;
        grid-template-columns: 195px 190px 200px !important;
        column-gap: 35px !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: 195px !important;
        min-height: 195px !important;

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

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

        align-self: center !important;
        justify-self: center !important;
    }

    /* Cột 1: Nạp thẻ - GIỮ TỶ LỆ ẢNH THỰC TẾ, không ép aspect-ratio */
    .wrap-login .content > .row.my-3 > .col-md-5 > a.link {
        width: 195px !important;
        max-width: 195px !important;
        height: auto !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: 3 nút tải game */
    .wrap-login .content > .row.my-3 > .col-md-3 {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-3 > .btn_download {
        width: 190px !important;
        max-width: 190px !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: 190px !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: 3 nút tài khoả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: 200px !important;
        max-width: 200px !important;
        height: auto !important;

        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

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

    .wrap-login .content > .row.my-3 > .col-md-4 > .d-flex > div {
        width: 200px !important;
        max-width: 200px !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 {
        width: 200px !important;
        max-width: 200px !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !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, 700px) !important;
        max-width: 700px !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 {
        --c1: clamp(178px, 23vw, 195px);
        --c2: clamp(170px, 22vw, 188px);
        --c3: clamp(180px, 23.5vw, 198px);
        --gap: clamp(16px, 2.1vw, 22px);

        width: auto !important;
        max-width: 100% !important;
        min-height: 180px !important;

        display: grid !important;
        grid-template-columns: var(--c1) var(--c2) var(--c3) !important;
        column-gap: var(--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;
        height: 180px !important;
        min-height: 180px !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !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(--c1) !important;
        max-width: var(--c1) !important;
        height: auto !important;
        margin: 0 !important;
        line-height: 0 !important;
    }

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

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

    .wrap-login .content > .row.my-3 > .col-md-3 img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !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 {
        width: var(--c3) !important;
        max-width: var(--c3) !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 !important;
        padding: 0 !important;
    }

    .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(--c3) !important;
        max-width: var(--c3) !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 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;
    }
}