/* =========================================================
   ACTION HOVER EFFECTS V10.5
   Ánh sáng vàng chạy qua:
   - Nạp thẻ
   - 3 nút tải game
   - Đăng ký / Đăng nhập / Hướng dẫn tải game

   Target trực tiếp DOM source hiện tại, không phụ thuộc class mobile.
   ========================================================= */

/* Target đồng thời source cũ + source mới */
.wrap-login .content > .row.my-3 > .col-md-5 > a.link,
.wrap-login .content > .row.my-3 > .col-md-3 > .btn_download > a.link,
.wrap-login .content > .row.my-3 > .col-md-4 .btn-login,
.wrap-login .mobile-action-recharge-link,
.wrap-login .mobile-download-link,
.wrap-login .mobile-account-button.btn-login {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    transition:
        transform .28s cubic-bezier(.2,.7,.25,1),
        filter .28s ease !important;
}

/* Ảnh luôn nằm dưới vệt sáng */
.wrap-login .content > .row.my-3 > .col-md-5 > a.link > img,
.wrap-login .content > .row.my-3 > .col-md-3 > .btn_download > a.link > img,
.wrap-login .content > .row.my-3 > .col-md-4 .btn-login > img,
.wrap-login .mobile-action-recharge-link > img,
.wrap-login .mobile-download-link > img,
.wrap-login .mobile-account-button.btn-login > img {
    position: relative;
    z-index: 1;
}

/* Vệt sáng mảnh */
.wrap-login .content > .row.my-3 > .col-md-5 > a.link::after,
.wrap-login .content > .row.my-3 > .col-md-3 > .btn_download > a.link::after,
.wrap-login .content > .row.my-3 > .col-md-4 .btn-login::after,
.wrap-login .mobile-action-recharge-link::after,
.wrap-login .mobile-download-link::after,
.wrap-login .mobile-account-button.btn-login::after {
    content: "";
    position: absolute;
    z-index: 5;

    top: -35%;
    bottom: -35%;
    left: -28%;
    width: 9%;

    pointer-events: none;
    opacity: 0;

    transform: skewX(-18deg);

    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,246,145,.10) 20%,
        rgba(255,253,196,.62) 38%,
        rgba(255,255,244,.98) 50%,
        rgba(255,225,82,.55) 63%,
        rgba(255,254,152,0) 100%
    );

    filter:
        blur(.15px)
        drop-shadow(0 0 4px rgba(255,245,150,.75))
        drop-shadow(0 0 8px rgba(255,183,37,.45));

    mix-blend-mode: screen;
    will-change: transform, opacity;
}

/* Hover tinh tế: không đổi layout */
@media (hover: hover) and (pointer: fine) {
    .wrap-login .content > .row.my-3 > .col-md-5 > a.link:hover,
    .wrap-login .content > .row.my-3 > .col-md-3 > .btn_download > a.link:hover,
    .wrap-login .content > .row.my-3 > .col-md-4 .btn-login:hover,
    .wrap-login .mobile-action-recharge-link:hover,
    .wrap-login .mobile-download-link:hover,
    .wrap-login .mobile-account-button.btn-login:hover {
        transform: translateY(-2px) scale(1.025) !important;
        filter:
            brightness(1.07)
            saturate(1.05)
            drop-shadow(0 3px 7px rgba(255,190,45,.22)) !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-5 > a.link:hover::after,
    .wrap-login .content > .row.my-3 > .col-md-3 > .btn_download > a.link:hover::after,
    .wrap-login .content > .row.my-3 > .col-md-4 .btn-login:hover::after,
    .wrap-login .mobile-action-recharge-link:hover::after,
    .wrap-login .mobile-download-link:hover::after,
    .wrap-login .mobile-account-button.btn-login:hover::after {
        opacity: .95;
        animation: actionGoldSweepV105 .68s cubic-bezier(.3,.02,.2,1) infinite;
    }
}

@keyframes actionGoldSweepV105 {
    0% {
        transform: translateX(0) skewX(-18deg);
        opacity: 0;
    }
    10% {
        opacity: .95;
    }
    78% {
        opacity: .86;
    }
    100% {
        transform: translateX(1500%) skewX(-18deg);
        opacity: 0;
    }
}

/* Text download phải nổi trên vệt sáng */
.wrap-login .btn_download .name,
.wrap-login .mobile-download-link .name {
    position: absolute;
    z-index: 6 !important;
}

/* Touch: không giữ trạng thái hover sau khi tap */
@media (hover: none), (pointer: coarse) {
    .wrap-login .content > .row.my-3 > .col-md-5 > a.link:hover,
    .wrap-login .content > .row.my-3 > .col-md-3 > .btn_download > a.link:hover,
    .wrap-login .content > .row.my-3 > .col-md-4 .btn-login:hover,
    .wrap-login .mobile-action-recharge-link:hover,
    .wrap-login .mobile-download-link:hover,
    .wrap-login .mobile-account-button.btn-login:hover {
        transform: none !important;
        filter: none !important;
    }

    .wrap-login .content > .row.my-3 > .col-md-5 > a.link::after,
    .wrap-login .content > .row.my-3 > .col-md-3 > .btn_download > a.link::after,
    .wrap-login .content > .row.my-3 > .col-md-4 .btn-login::after,
    .wrap-login .mobile-action-recharge-link::after,
    .wrap-login .mobile-download-link::after,
    .wrap-login .mobile-account-button.btn-login::after {
        animation: none !important;
        opacity: 0 !important;
    }
}