:root{
    --gold:#f8cf76;
    --gold-light:#ffe8a6;
    --gold-dark:#8a5b16;
    --red:#7c170f;
    --red-dark:#260604;
    --dark:#110302;
    --panel:rgba(20,6,3,.84);
    --panel2:rgba(35,10,5,.92);
    --text:#f7e7bd;
    --muted:#d0b784;
    --line:rgba(248,207,118,.28);
    --shadow:0 18px 55px rgba(0,0,0,.42);
    --header-h:88px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;font-family:Arial,Tahoma,sans-serif;background:#110302;color:var(--text);overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{user-select:none}a{text-decoration:none;color:inherit}button,input,select{font-family:inherit}.site-bg{min-height:100vh;position:relative;background:#110302;isolation:isolate}.site-bg:before{content:"";position:fixed;inset:0;background:var(--hero-bg) center top/cover no-repeat;z-index:-4;transform:translateZ(0)}.site-bg:after{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(15,2,1,.92) 0,rgba(35,4,2,.55) 105px,rgba(29,8,3,.18) 45%,rgba(11,2,1,.9) 100%),radial-gradient(ellipse at center,rgba(255,238,193,.42) 0,rgba(255,238,193,.20) 26%,rgba(54,18,6,.32) 62%,rgba(10,2,1,.75) 100%);z-index:-3;pointer-events:none}
/* HEADER */
.topbar{height:var(--header-h);position:sticky;top:0;z-index:1200;display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:0 clamp(14px,4vw,78px);background:linear-gradient(180deg,rgba(38,5,3,.98),rgba(14,3,2,.9));border-bottom:1px solid rgba(248,207,118,.2);box-shadow:0 10px 35px rgba(0,0,0,.45)}.topbar:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(122,22,13,.5),rgba(49,5,3,.08) 48%,rgba(122,22,13,.36));pointer-events:none}.brand,.main-nav,.top-download,.user-area,.mobile-menu-btn{position:relative;z-index:2}.brand{display:flex;align-items:center;min-width:0}.brand img{width:clamp(132px,15vw,190px);height:72px;max-width:100%;object-fit:contain;filter:drop-shadow(0 5px 13px rgba(0,0,0,.5));display:block}.main-nav{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;overflow:hidden}.nav-link{height:46px;padding:0 clamp(7px,1vw,14px);display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:7px;color:#fbe7bd;font-size:clamp(11px,.82vw,14px);font-weight:900;text-transform:uppercase;letter-spacing:.1px;white-space:nowrap;border:1px solid transparent;transition:transform .18s,background .18s,border-color .18s,color .18s}.nav-link i{color:var(--gold);font-size:14px}.nav-link:hover,.nav-link.active{color:#fff0bd;background:rgba(126,24,13,.34);border-color:rgba(248,207,118,.22);transform:translateY(-1px)}.top-download{height:44px;min-width:0;border:1px solid rgba(248,207,118,.24);border-radius:10px;background:rgba(18,5,3,.72);display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fbe8c1;padding:0 12px;font-weight:900;white-space:nowrap;box-shadow:none;transition:background .18s,border-color .18s,transform .18s}.top-download i{font-size:15px;color:var(--gold)}.top-download span{line-height:1;font-size:13px}.top-download em{display:none}.top-download:hover{background:rgba(111,22,13,.45);border-color:rgba(248,207,118,.45);transform:translateY(-1px)}.user-area{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.balance-pill{height:40px;border:1px solid rgba(248,207,118,.22);border-radius:10px;background:rgba(0,0,0,.24);padding:0 10px;display:flex;align-items:center;gap:8px;color:#ffdf91;font-weight:900;white-space:nowrap;font-size:13px}.balance-pill i{color:var(--gold)}.auth-btn,.user-btn{height:44px;border:1px solid rgba(248,207,118,.22);border-radius:10px;background:rgba(18,5,3,.72);color:#fbe8c1;padding:0 12px;display:flex;align-items:center;gap:8px;font-weight:900;cursor:pointer;white-space:nowrap;transition:.18s}.auth-btn:hover,.user-btn:hover{background:rgba(111,22,13,.45);border-color:rgba(248,207,118,.45)}.auth-reg{background:linear-gradient(180deg,#bd8428,#6f220a)}.user-dropdown{position:relative;min-width:0}.user-btn span{max-width:105px;overflow:hidden;text-overflow:ellipsis}.verify-green{color:#35e971;filter:drop-shadow(0 0 6px rgba(53,233,113,.45))}.verify-white{color:#fff;opacity:.85}.user-menu{position:absolute;right:0;top:54px;min-width:230px;background:linear-gradient(180deg,rgba(32,7,4,.98),rgba(13,3,2,.98));border:1px solid rgba(248,207,118,.34);border-radius:12px;padding:8px;display:none;box-shadow:0 22px 70px rgba(0,0,0,.65)}.user-menu.show{display:block}.menu-item{width:100%;height:44px;border:0;background:transparent;color:#ffe8b7;border-radius:8px;padding:0 12px;display:flex;align-items:center;gap:10px;font-weight:900;cursor:pointer;text-align:left}.menu-item:hover{background:rgba(248,207,118,.13);color:#fff}.mobile-menu-btn{display:none}
/* ACTIVE NOTICE */
.active-notice{width:min(1060px,calc(100% - 28px));margin:18px auto 0;border:1px solid rgba(248,207,118,.30);background:linear-gradient(90deg,rgba(17,5,2,.82),rgba(77,30,7,.72),rgba(17,5,2,.82));border-radius:10px;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 16px;box-shadow:0 15px 42px rgba(0,0,0,.34),inset 0 0 22px rgba(255,211,113,.05);font-size:15px;color:#fbe7bd}.active-notice div{display:flex;align-items:center;gap:9px;min-width:0}.active-notice i{color:var(--gold);font-size:22px}.active-head-btn{min-height:42px;border:1px solid rgba(255,239,173,.55);border-radius:8px;background:linear-gradient(180deg,#f7d878,#a06b20 58%,#6e4211);color:#311403;font-weight:1000;text-transform:uppercase;padding:0 22px;cursor:pointer;box-shadow:0 5px 0 rgba(66,32,7,.75),0 0 20px rgba(248,207,118,.18);transition:transform .22s,box-shadow .22s,filter .22s;white-space:nowrap}.active-head-btn:hover{transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 8px 0 rgba(66,32,7,.72),0 14px 30px rgba(248,207,118,.23)}
main{position:relative;z-index:1}.hero{position:relative;align-items:center;justify-content:center;text-align:center;padding:clamp(54px,7vh,86px) 16px clamp(138px,16vh,170px);overflow:hidden}.active-notice + main .hero:before{content:"";position:absolute;left:50%;top:50%;width:min(920px,86vw);height:min(560px,58vh);transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,243,211,.56) 0,rgba(255,235,194,.36) 34%,rgba(255,235,194,.06) 67%,transparent 76%);filter:blur(2px);pointer-events:none}.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:43%;background:linear-gradient(180deg,transparent,rgba(24,7,3,.62) 70%,rgba(14,3,2,.92));pointer-events:none}.hero-inner{position:relative;z-index:2;width:min(1040px,94vw);margin:0 auto}.hero-kicker{font-family:Georgia,serif;margin:0 auto 4px;color:#5c1209;font-size:clamp(64px,10vw,160px);line-height:.83;font-weight:900;letter-spacing:clamp(2px,.7vw,8px);text-transform:uppercase;text-shadow:0 3px 0 #f5cf78,0 12px 20px rgba(73,15,8,.32),0 0 24px rgba(255,226,150,.35)}.hero-title-main{margin:12px 0 4px;font-family:Georgia,serif;font-size:clamp(22px,3vw,46px);line-height:1;text-transform:uppercase;letter-spacing:clamp(5px,1.15vw,16px);color:#2a0905;text-shadow:0 1px 0 rgba(255,236,180,.7),0 6px 14px rgba(0,0,0,.2)}.hero-title-main:before,.hero-title-main:after{content:"✦";display:inline-block;margin:0 14px;color:#5e170c;font-size:.55em;vertical-align:middle}.hero-subtitle{font-family:Georgia,serif;font-size:clamp(46px,7vw,112px);line-height:.96;margin:clamp(22px,3vw,34px) 0 clamp(18px,2.4vw,28px);font-weight:900;letter-spacing:-2px;background:linear-gradient(180deg,#fff4bc 0,#b97a24 41%,#2d0d04 72%,#fff0a6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(44,14,4,.42);filter:drop-shadow(0 9px 10px rgba(0,0,0,.32)) drop-shadow(0 0 12px rgba(255,215,120,.16))}.hero-desc{max-width:760px;margin:0 auto 30px;font-size:clamp(18px,2vw,29px);font-weight:900;color:#321606;line-height:1.42;text-shadow:0 1px 0 rgba(255,244,211,.6),0 9px 20px rgba(255,236,188,.18)}.hero-desc:after{content:"✤";display:block;margin:14px auto 0;width:300px;max-width:70%;font-size:18px;color:#5d1b0e;border-top:1px solid rgba(85,35,14,.28);line-height:0}.hero-actions{display:flex;justify-content:center;gap:clamp(14px,3vw,34px);flex-wrap:wrap}.hero-btn{width:min(330px,42vw);min-width:250px;height:86px;border:1px solid rgba(248,207,118,.45);border-radius:8px;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:16px;color:#ffecc0;font-weight:1000;text-transform:uppercase;font-size:21px;box-shadow:0 14px 28px rgba(0,0,0,.38),inset 0 0 18px rgba(255,255,255,.06);transition:.22s;position:relative;overflow:hidden}.hero-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-130%);transition:.45s}.hero-btn:hover:before{transform:translateX(130%)}.hero-btn:hover{transform:translateY(-5px);filter:brightness(1.12)}.hero-btn i{font-size:32px;color:var(--gold);filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}.hero-btn div{line-height:1.05;text-align:left}.hero-btn span{display:block;font-size:15px;font-weight:600;text-transform:none;opacity:.92;margin-top:8px}.btn-rank{background:linear-gradient(180deg,#71160e,#2c0704);border-color:rgba(232,80,42,.38)}.btn-download{background:linear-gradient(180deg,#d8a734,#8a5a13 58%,#4b2b08);color:#fff3cd}
.feature-strip{position:absolute;z-index:3;left:50%;bottom:42px;transform:translateX(-50%);width:min(980px,92vw);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:linear-gradient(90deg,rgba(13,5,3,.86),rgba(36,12,4,.78),rgba(13,5,3,.86));border:1px solid rgba(248,207,118,.18);border-radius:10px;padding:16px 18px;gap:10px;box-shadow:0 20px 45px rgba(0,0,0,.38)}.feature{display:flex;align-items:center;justify-content:center;gap:10px;text-align:left;min-width:0}.feature i{font-size:27px;color:var(--gold);width:31px;text-align:center;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4));flex:0 0 auto}.feature b{display:block;color:#ffd780;text-transform:uppercase;font-size:14px;white-space:nowrap}.feature span{display:block;font-size:12px;color:#d6bb87;margin-top:2px;white-space:nowrap}.section{width:min(1120px,calc(100% - 28px));margin:34px auto;background:linear-gradient(180deg,rgba(28,9,4,.9),rgba(13,4,2,.9));border:1px solid rgba(248,207,118,.28);border-radius:16px;padding:22px;box-shadow:var(--shadow)}.section-title{font-size:clamp(22px,2.4vw,29px);margin:0 0 18px;color:#ffd675;text-transform:uppercase}.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}.rank-tabs,.recharge-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}.tab-btn{border:1px solid rgba(248,207,118,.35);background:rgba(255,255,255,.04);color:#ffe3a8;height:42px;border-radius:8px;padding:0 16px;font-weight:900;cursor:pointer}.tab-btn.active,.tab-btn:hover{background:linear-gradient(180deg,#c38b26,#6b3009);color:#fff}.rank-table,.history-table{width:100%;border-collapse:collapse;min-width:520px}.rank-table th,.rank-table td,.history-table th,.history-table td{padding:12px;border-bottom:1px solid rgba(248,207,118,.16);text-align:center}.rank-table th,.history-table th{color:#ffd77b;background:rgba(255,255,255,.04)}.top1{color:#ff6262;font-weight:900}.top2{color:#ffd65e;font-weight:900}.top3{color:#6fe2ff;font-weight:900}.recharge-grid,.download-grid,.package-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.card-panel{border:1px solid rgba(248,207,118,.23);background:rgba(0,0,0,.24);border-radius:14px;padding:20px}.form-control,input,select{width:100%;height:48px;border:1px solid rgba(248,207,118,.28);background:rgba(255,248,220,.96);border-radius:10px;padding:0 14px;color:#2b1304;font-size:16px;outline:none}.form-row{margin-bottom:14px}.submit-btn,.copy-btn{border:0;border-radius:10px;height:48px;background:linear-gradient(180deg,#edc45e,#8d5516);color:#260f03;font-weight:900;padding:0 18px;cursor:pointer}.copy-btn{height:36px}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:5000;display:none}.modal-backdrop.show{display:block}.modal-box{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.95);z-index:5010;width:min(420px,92vw);max-height:90svh;overflow:auto;border-radius:18px;border:1px solid rgba(248,207,118,.35);background:linear-gradient(180deg,#2c1008,#100503);padding:26px;box-shadow:0 30px 90px rgba(0,0,0,.65);display:none}.modal-box.show{display:block;animation:modalIn .18s forwards}@keyframes modalIn{to{transform:translate(-50%,-50%) scale(1)}}.modal-close{position:absolute;right:12px;top:12px;border:0;border-radius:50%;width:34px;height:34px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}.modal-logo{display:block;margin:0 auto 12px;max-width:150px}.modal-box h3{text-align:center;color:#ffd36d;margin:8px 0 18px}.ajax-form{display:grid;gap:12px}.modal-switch{text-align:center}.modal-switch button{border:0;background:transparent;color:#ffd36d;cursor:pointer;font-weight:900}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:6000;background:#251007;color:#fff0c7;border:1px solid rgba(248,207,118,.38);border-radius:12px;padding:12px 18px;box-shadow:0 15px 40px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.2s;text-align:center;max-width:92vw}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.footer{text-align:center;padding:22px 12px 30px;color:#c9aa75;background:rgba(8,2,1,.58)}.socials{margin-top:10px;display:flex;justify-content:center;gap:14px}.socials i{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08)}
@media(max-width:1280px){.topbar{grid-template-columns:minmax(130px,170px) minmax(0,1fr) auto auto;gap:10px;padding:0 18px}.brand img{width:150px}.nav-link{padding:0 8px;font-size:11px}.top-download{height:40px;padding:0 10px}.balance-pill{display:none}.user-btn span{max-width:86px}}
@media(max-width:1024px){:root{--header-h:70px}.topbar{display:flex;height:var(--header-h);padding:0 12px;gap:8px}.brand{order:1}.brand img{width:118px;height:58px}.mobile-menu-btn{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid rgba(248,207,118,.35);background:rgba(20,6,3,.88);color:#ffd36d;border-radius:10px;font-size:20px;cursor:pointer}.main-nav{position:fixed;left:12px;right:12px;top:calc(var(--header-h) + 8px);display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:linear-gradient(180deg,rgba(27,7,4,.98),rgba(12,3,2,.98));border:1px solid rgba(248,207,118,.26);border-radius:14px;padding:12px;box-shadow:0 18px 55px rgba(0,0,0,.55);overflow:visible}.main-nav.show{display:grid}.nav-link{justify-content:center;height:46px;font-size:12px;border:1px solid rgba(248,207,118,.13);background:rgba(255,255,255,.04);padding:0 8px}.top-download{display:flex;order:2;margin-left:auto;height:40px;padding:0 10px}.top-download span{font-size:12px}.user-area{order:3;gap:6px}.mobile-menu-btn{order:4;margin-left:0}.auth-btn{height:38px;padding:0 10px;font-size:12px}.user-btn{height:40px;padding:0 10px;max-width:150px}.user-menu{right:0;top:48px}.active-notice{width:calc(100% - 20px);margin:10px auto 0;flex-direction:column;text-align:center;font-size:13px;gap:10px;padding:12px}.active-notice div{display:block}.active-notice i{font-size:20px}.active-head-btn{width:min(360px,100%);height:40px}.active-notice + main .hero{min-height:auto}.hero{min-height:auto;padding:48px 12px 142px}.hero-kicker{font-size:clamp(56px,15vw,110px);letter-spacing:3px}.hero-title-main{font-size:clamp(18px,4vw,28px);letter-spacing:6px}.hero-title-main:before,.hero-title-main:after{display:none}.hero-subtitle{font-size:clamp(38px,11vw,70px);letter-spacing:-1px;margin:22px 0 17px}.hero-desc{font-size:clamp(16px,3.5vw,20px);color:#2c1608}.hero-actions{gap:12px}.hero-btn{width:min(360px,100%);min-width:0;height:64px;font-size:17px}.hero-btn i{font-size:25px}.feature-strip{bottom:18px;grid-template-columns:repeat(2,minmax(0,1fr));width:calc(100% - 24px);padding:12px;gap:10px}.feature{gap:8px}.feature i{font-size:22px;width:24px}.feature b{font-size:12px}.feature span{font-size:11px}.feature:nth-child(5){grid-column:1/3;justify-content:center}.section{width:calc(100% - 20px);margin:22px auto;padding:16px}.recharge-grid,.download-grid,.package-grid{grid-template-columns:1fr}.modal-box{padding:22px 16px}}
@media(max-width:560px){.topbar{height:64px;gap:6px}.brand img{width:104px;height:52px}.top-download{width:38px;padding:0}.top-download span{display:none}.top-download i{font-size:15px}.auth-btn{font-size:0;width:36px;padding:0;justify-content:center}.auth-btn i{font-size:15px}.user-btn{max-width:128px}.user-btn span{max-width:66px}.main-nav{top:72px;grid-template-columns:1fr 1fr}.hero{padding-top:38px;padding-bottom:110px}.hero-kicker{font-size:clamp(46px,16vw,70px)}.hero-title-main{font-size:17px;letter-spacing:4px}.hero-subtitle{font-size:clamp(34px,12vw,48px)}.hero-desc br{display:none}.hero-desc:after{width:190px}.hero-btn{height:58px}.hero-btn span{display:none}.feature-strip{grid-template-columns:repeat(5,1fr);padding:10px 8px;bottom:12px}.feature{justify-content:center}.feature div{display:none}.feature:nth-child(5){grid-column:auto}.feature i{font-size:23px}.rank-table,.history-table{min-width:460px}.section-title{text-align:center}.tab-btn{flex:1;min-width:120px}.modal-box{width:calc(100vw - 24px);max-height:86svh}}
@media(max-width:380px){.auth-reg{display:none}.main-nav{grid-template-columns:1fr}.hero-kicker{font-size:44px}.hero-subtitle{font-size:32px}.hero-actions{flex-direction:column}.hero-btn{width:100%;height:54px;font-size:15px}.feature-strip{display:none}.hero{padding-bottom:40px}.active-notice{font-size:12px}.active-head-btn{font-size:12px}.nav-link{height:42px}.user-btn{max-width:116px}}
/* =========================
   FOOTER KPAH DARK SECTION
========================= */

.site-footer,
.footer,
footer {

    position: relative;
    z-index: 5;

    width: 100%;

    background:
        linear-gradient(
            180deg,
            rgba(20,10,5,.98),
            rgba(5,3,2,1)
        ) !important;

    border-top:
        1px solid rgba(255,200,90,.35);

    box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        0 -15px 45px rgba(0,0,0,.55);

    color:#f8d98a !important;

    padding:35px 20px;

    overflow:hidden;
}


/* lớp ánh sáng nhẹ */
.site-footer:before,
.footer:before,
footer:before {

    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at center top,
            rgba(180,100,20,.25),
            transparent 45%
        );

    pointer-events:none;
}


/* container */
.footer-inner,
.footer-content {

    position:relative;
    z-index:2;

    max-width:1200px;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}


/* chữ */
.footer *,
.site-footer * {

    color:#f3d28a;
}


/* tiêu đề */
.footer-title {

    font-size:22px;
    font-weight:900;

    color:#ffd86b;

    text-shadow:
        0 0 12px rgba(255,170,40,.45);
}


/* link */
.footer a {

    color:#ffd36b !important;

    text-decoration:none;

    transition:.25s;
}


.footer a:hover {

    color:white !important;

    text-shadow:
        0 0 10px #ffb536;
}


/* icon mạng xã hội */
.footer i {

    color:#ffc857;

    font-size:18px;
}


/* mobile */
@media(max-width:768px){

    .footer-inner,
    .footer-content{

        flex-direction:column;

        text-align:center;

    }


    .footer{

        padding:25px 15px;

    }
}/* ===== 0611 clean header + better CTA buttons ===== */
@media (min-width:1025px){
    .main-nav{gap:10px;justify-content:center}
    .nav-link{padding:0 16px}
}

/* bỏ mảng đen cuối hero, để nền ảnh sáng tự nhiên hơn */
.hero:after{display:none!important}
.hero{padding-bottom:clamp(70px,10vh,110px)!important}
.feature-strip{display:none!important}

/* nút kích hoạt đẹp và mượt hơn */
.active-head-btn,
.menu-item.js-open-active{
    position:relative;
    overflow:hidden;
}
.active-head-btn:before,
.menu-item.js-open-active:before{
    content:"";
    position:absolute;
    inset:-2px;
    background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.28) 42%,transparent 68%);
    transform:translateX(-130%);
    transition:transform .55s ease;
    pointer-events:none;
}
.active-head-btn:hover:before,
.menu-item.js-open-active:hover:before{transform:translateX(130%)}
.active-head-btn:hover{
    transform:translateY(-3px) scale(1.015);
    filter:brightness(1.08) saturate(1.08);
    box-shadow:0 8px 0 rgba(78,38,8,.78),0 18px 42px rgba(248,207,118,.28),0 0 0 1px rgba(255,241,178,.42) inset;
}
.menu-item.js-open-active{
    background:linear-gradient(180deg,rgba(247,216,120,.20),rgba(160,107,32,.10));
    border:1px solid rgba(248,207,118,.24);
    color:#ffe8aa;
}
.menu-item.js-open-active:hover{
    background:linear-gradient(180deg,rgba(247,216,120,.32),rgba(160,107,32,.20));
    color:#fff4c8;
}

/* trang tải game đẹp hơn */
.download-grid{
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:18px;
}
.download-grid .card-panel{
    position:relative;
    overflow:hidden;
    min-height:210px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border-color:rgba(248,207,118,.32);
    background:linear-gradient(180deg,rgba(55,17,7,.82),rgba(15,5,2,.92));
    box-shadow:0 18px 45px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,235,170,.04);
    transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.download-grid .card-panel:before{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-58px;
    top:-58px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(248,207,118,.22),transparent 65%);
    pointer-events:none;
}
.download-grid .card-panel:hover{
    transform:translateY(-5px);
    border-color:rgba(248,207,118,.58);
    box-shadow:0 24px 58px rgba(0,0,0,.38),0 0 0 1px rgba(248,207,118,.18) inset;
}
.download-grid .card-panel h3{
    margin:0 0 10px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#ffd77a;
    font-size:20px;
}
.download-grid .card-panel h3 i{
    width:42px;
    height:42px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,rgba(248,207,118,.22),rgba(120,42,15,.18));
    border:1px solid rgba(248,207,118,.25);
}
.download-grid .card-panel p{color:#e9d0a2;line-height:1.55;margin:0 0 18px}
.download-grid .submit-btn{
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    text-decoration:none;
    border:1px solid rgba(255,238,172,.38);
    background:linear-gradient(180deg,#f5d274 0%,#b27722 55%,#6d3d0d 100%);
    color:#2a1103;
    text-transform:uppercase;
    letter-spacing:.3px;
    box-shadow:0 5px 0 rgba(66,32,7,.82),0 16px 28px rgba(0,0,0,.22);
    transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.download-grid .submit-btn:hover{
    transform:translateY(-3px);
    filter:brightness(1.08);
    box-shadow:0 8px 0 rgba(66,32,7,.78),0 22px 38px rgba(0,0,0,.30);
}
.download-grid .submit-btn:before{content:"\f019";font-family:FontAwesome;font-weight:normal}

@media(max-width:1024px){
    .hero{padding-bottom:58px!important}
    .main-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
    .download-grid .card-panel{min-height:178px;padding:16px}
    .download-grid .card-panel h3{font-size:18px}
    .download-grid .submit-btn{height:46px}
    .hero{padding-bottom:42px!important}
}

/* ===== Recharge modern friendly page ===== */
.recharge-page{width:min(1180px,calc(100% - 28px));margin:28px auto 44px}.recharge-modern{display:grid;gap:18px}.recharge-soft-card{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,rgba(74,22,9,.92),rgba(28,9,4,.92));border-color:rgba(248,207,118,.32)}.recharge-hero h1{margin:6px 0 8px;font-size:clamp(25px,3vw,38px);color:#ffd778;text-transform:uppercase;letter-spacing:.5px}.recharge-hero p{margin:0;color:#ead1a0;line-height:1.55;max-width:720px}.eyebrow{display:inline-flex;align-items:center;gap:7px;color:#ffd36d;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.8px}.btn-home-small{height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1px solid rgba(248,207,118,.35);background:rgba(255,255,255,.05);color:#ffe1a0;text-decoration:none;font-weight:900;padding:0 16px;white-space:nowrap}.btn-home-small:hover{background:linear-gradient(180deg,#c68b2a,#74310b);color:#fff;transform:translateY(-1px)}.recharge-card-main{padding:18px;background:linear-gradient(180deg,rgba(25,8,4,.92),rgba(11,4,2,.94))}.recharge-tabs.modern{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 18px}.recharge-tab{height:56px;border-radius:14px;border:1px solid rgba(248,207,118,.22);background:rgba(255,255,255,.045);color:#f3d49a;font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:.18s}.recharge-tab i{font-size:20px}.recharge-tab.active,.recharge-tab:hover{background:linear-gradient(180deg,#d69e35,#7d350e);border-color:rgba(255,225,135,.56);color:#fff;box-shadow:0 10px 24px rgba(116,49,11,.32)}.atm-layout.friendly{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px}.pay-box,.qr-result.pretty{border:1px solid rgba(248,207,118,.18);border-radius:18px;background:rgba(255,255,255,.045);padding:18px}.bank-title.big{display:flex;align-items:center;gap:13px;margin-bottom:18px}.bank-logo-wrap{width:56px;height:56px;border-radius:15px;background:linear-gradient(180deg,#fff6dc,#e9c375);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#542105;font-size:26px;box-shadow:0 10px 22px rgba(0,0,0,.22)}.bank-logo-wrap img{max-width:100%;max-height:100%;object-fit:contain}.bank-title strong{display:block;color:#ffe28a;font-size:22px}.bank-title small{display:block;color:#d7ba82;margin-top:2px}.field-label,.card-form label span{display:block;color:#ffd981;font-weight:900;margin:0 0 8px}.money-input.soft{display:flex;align-items:center;gap:10px;background:#fff8df;border-radius:14px;border:1px solid rgba(248,207,118,.45);padding:0 12px;box-shadow:inset 0 2px 10px rgba(96,48,8,.12)}.money-input.soft input{border:0;background:transparent;height:52px;padding:0;color:#2b1304;font-weight:900;font-size:18px}.money-input.soft span{color:#6d3208;font-weight:900}.quick-amounts.soft{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 16px}.quick-amounts button{height:38px;border-radius:10px;border:1px solid rgba(248,207,118,.28);background:rgba(255,255,255,.06);color:#ffd98c;font-weight:900;cursor:pointer}.quick-amounts button:hover,.quick-amounts button.active{background:rgba(248,207,118,.18);color:#fff;transform:translateY(-1px)}.btn-recharge-create{width:100%;height:52px;border:0;border-radius:14px;background:linear-gradient(180deg,#ffd56c,#b66b17 55%,#793609);color:#2d1202;font-weight:1000;font-size:16px;cursor:pointer;box-shadow:0 10px 0 rgba(78,30,4,.75),0 18px 30px rgba(0,0,0,.28);transition:.16s}.btn-recharge-create:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 12px 0 rgba(78,30,4,.75),0 22px 36px rgba(0,0,0,.35)}.qr-result.pretty{min-height:276px;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at top,rgba(248,207,118,.12),rgba(255,255,255,.035) 54%)}.qr-placeholder i{font-size:58px;color:#ffd36d;opacity:.92}.qr-placeholder p{color:#f2d8a8;font-size:17px}.qr-placeholder small{color:#bfa879}.qr-ready img{width:min(260px,70vw);border-radius:16px;background:#fff;padding:10px;box-shadow:0 14px 34px rgba(0,0,0,.35)}.qr-ready p{color:#f8dfae;font-size:16px}.qr-ready small{color:#cbb486}.bank-info-grid.friendly{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.copy-row{border:1px solid rgba(248,207,118,.16);border-radius:14px;background:rgba(255,255,255,.04);padding:14px;display:grid;gap:7px;min-width:0}.copy-row span{color:#cdb58a;font-weight:800}.copy-row b{color:#ffe3a7;font-size:16px;overflow-wrap:anywhere}.copy-row.important{grid-template-columns:1fr auto;align-items:center}.copy-row.important span,.copy-row.important b{grid-column:1/2}.copy-row button{grid-column:2/3;grid-row:1/3;border:0;border-radius:10px;background:rgba(248,207,118,.16);color:#ffe0a4;font-weight:900;padding:0 12px;height:38px;cursor:pointer}.copy-row button:hover{background:linear-gradient(180deg,#d5a03b,#7e360e);color:#fff}.recharge-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 4px}.recharge-guide div{border-radius:12px;background:rgba(58,155,76,.1);border:1px solid rgba(92,223,111,.16);color:#dff1c8;padding:12px}.recharge-guide i{color:#83e281;margin-right:6px}.card-form.friendly{display:grid;gap:14px;width:min(720px,100%);margin:auto}.card-notice{border:1px solid rgba(248,207,118,.24);background:rgba(248,207,118,.09);color:#ffe3aa;border-radius:14px;padding:13px;line-height:1.45}.form-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.card-form input,.card-form select{height:52px;border-radius:14px}.captcha-box{background:rgba(255,255,255,.04);border:1px solid rgba(248,207,118,.15);border-radius:14px;padding:12px;display:flex;justify-content:center}.mini-note.center{text-align:center;color:#bea77d;margin:0}.recharge-history-block{margin-top:22px;border-top:1px solid rgba(248,207,118,.14);padding-top:18px}.section-title.compact{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}.section-title.compact h2{margin:4px 0 0;color:#ffd778;font-size:clamp(20px,2.4vw,28px)}.section-title.compact small{color:#baa47c}.history-table-wrap{overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(248,207,118,.14);border-radius:14px}.recharge-history-table{min-width:760px}.type-badge,.status-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-weight:900;font-size:12px}.type-badge.card{background:rgba(92,141,255,.14);color:#bcd0ff}.type-badge.atm{background:rgba(81,214,109,.14);color:#bff0c6}.status-badge.pending{background:rgba(255,202,72,.14);color:#ffdb7a}.status-badge.success,.status-badge.completed{background:rgba(92,223,111,.14);color:#a9f0b4}.status-badge.failed,.status-badge.fail,.status-badge.error{background:rgba(255,95,95,.16);color:#ffaaaa}.empty-history{color:#cdb58a!important;padding:24px!important}
@media(max-width:900px){.recharge-page{width:calc(100% - 18px);margin:16px auto 30px}.recharge-soft-card{flex-direction:column;align-items:flex-start}.btn-home-small{width:100%}.atm-layout.friendly{grid-template-columns:1fr}.bank-info-grid.friendly,.recharge-guide,.form-grid.two{grid-template-columns:1fr}.quick-amounts.soft{grid-template-columns:repeat(3,minmax(0,1fr))}.copy-row.important{grid-template-columns:1fr}.copy-row.important span,.copy-row.important b,.copy-row.important button{grid-column:auto;grid-row:auto}.copy-row button{width:100%}.section-title.compact{align-items:flex-start;flex-direction:column}.recharge-card-main{padding:14px}.pay-box,.qr-result.pretty{padding:14px}.recharge-tab{height:50px;font-size:14px}.recharge-history-table{min-width:0}.recharge-history-table thead{display:none}.recharge-history-table,.recharge-history-table tbody,.recharge-history-table tr,.recharge-history-table td{display:block;width:100%}.recharge-history-table tr{border-bottom:1px solid rgba(248,207,118,.16);padding:10px}.recharge-history-table td{border:0!important;text-align:right!important;padding:8px 0!important;display:flex;justify-content:space-between;gap:14px}.recharge-history-table td:before{content:attr(data-label);color:#d2b889;font-weight:900;text-align:left}.empty-history{display:block!important;text-align:center!important}}

/* ===== BALANCE + PACKAGE CONFIRM PATCH 0611 ===== */
.user-btn-balance{height:46px;padding:0 10px 0 13px;gap:7px;background:linear-gradient(180deg,rgba(42,12,6,.88),rgba(16,4,2,.84));border-color:rgba(248,207,118,.30)}
.user-btn-balance:hover{background:linear-gradient(180deg,rgba(82,24,10,.92),rgba(28,7,3,.9));border-color:rgba(255,215,126,.55);transform:translateY(-1px)}
.user-name-text{max-width:98px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff2c6;font-weight:950}
.inline-balance{height:28px;display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:0 9px;background:linear-gradient(180deg,rgba(255,218,117,.18),rgba(118,57,12,.14));border:1px solid rgba(248,207,118,.28);color:#ffd76c;font-size:12px;font-weight:950;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.inline-balance i{color:#ffe083;text-shadow:0 0 8px rgba(255,211,91,.35)}
.balance-pill{display:none!important}
.section-head-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.section-head-row .section-title{margin:4px 0 0}.eyebrow{display:inline-flex;align-items:center;gap:7px;color:#ffd36d;font-weight:900;text-transform:uppercase;letter-spacing:.5px;font-size:12px}.mini-home{height:40px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;border-radius:10px;border:1px solid rgba(248,207,118,.26);background:rgba(0,0,0,.22);color:#ffe7b5;font-weight:900}.mini-home:hover{background:rgba(248,207,118,.12)}
.pretty-packages{align-items:stretch}.package-card{position:relative;overflow:hidden;padding:22px;border-radius:18px;background:linear-gradient(180deg,rgba(54,15,7,.88),rgba(18,5,2,.9));transition:transform .18s,border-color .18s,box-shadow .18s}.package-card:before{content:"";position:absolute;inset:-90px auto auto -80px;width:190px;height:190px;border-radius:50%;background:rgba(255,197,77,.12);filter:blur(2px)}.package-card:hover{transform:translateY(-4px);border-color:rgba(255,215,111,.48);box-shadow:0 20px 55px rgba(0,0,0,.36)}.package-icon{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f2ca63,#8f3d0d);color:#351203;font-size:23px;box-shadow:0 12px 28px rgba(0,0,0,.25);position:relative}.package-card h3{margin:14px 0 6px;color:#ffe18a;font-size:22px}.package-note{color:#d7bd8e;margin:0 0 12px}.package-price{font-size:28px;color:#fff;font-weight:950;margin:12px 0}.package-price small{font-size:13px;color:#ffd36d;margin-left:5px}.package-rewards{display:grid;gap:8px;margin:14px 0 18px}.package-rewards span{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:rgba(0,0,0,.22);color:#f7ddb0}.package-rewards i{color:#ffd36d;width:16px;text-align:center}.package-buy-btn{width:100%;height:50px;border-radius:13px;box-shadow:0 8px 0 rgba(87,39,9,.85),0 16px 34px rgba(0,0,0,.25);transition:transform .16s,filter .16s,box-shadow .16s}.package-buy-btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 10px 0 rgba(87,39,9,.85),0 20px 42px rgba(0,0,0,.34)}.package-owned{display:flex;align-items:center;gap:16px;background:linear-gradient(180deg,rgba(18,80,38,.32),rgba(0,0,0,.2));border-color:rgba(85,255,137,.28)}.package-owned>i{font-size:38px;color:#35e971}.package-owned b{color:#d7ffd9}.package-owned p{margin:4px 0 0;color:#c6ddb9}
.package-backdrop{z-index:7000}.package-confirm-modal{z-index:7010;text-align:center}.package-confirm-icon{width:64px;height:64px;margin:0 auto 12px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#ffd878,#a84c10);color:#2c1003;font-size:30px;box-shadow:0 16px 36px rgba(0,0,0,.36)}.confirm-question{color:#f6dfb3;line-height:1.5}.confirm-summary{display:grid;gap:10px;margin:16px 0;text-align:left}.confirm-summary div{padding:12px;border-radius:12px;background:rgba(0,0,0,.24);border:1px solid rgba(248,207,118,.16)}.confirm-summary span{display:block;color:#c9aa75;font-size:12px;text-transform:uppercase;font-weight:900;margin-bottom:4px}.confirm-summary b{color:#ffe393;line-height:1.4}.confirm-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;margin-top:16px}.btn-cancel{height:48px;border-radius:12px;border:1px solid rgba(248,207,118,.2);background:rgba(255,255,255,.06);color:#ffe1aa;font-weight:900;cursor:pointer}.btn-cancel:hover{background:rgba(255,255,255,.1)}
@media(max-width:1024px){.inline-balance{font-size:11px;padding:0 7px}.user-name-text{max-width:74px}.section-head-row{align-items:flex-start;flex-direction:column}.mini-home{width:100%;justify-content:center}.confirm-actions{grid-template-columns:1fr}.package-card{padding:18px}}
@media(max-width:560px){.user-btn-balance{max-width:176px;padding:0 8px}.user-name-text{max-width:58px}.inline-balance{height:24px;font-size:10px;padding:0 6px}.inline-balance i{display:none}.package-price{font-size:24px}.package-confirm-modal{width:calc(100vw - 24px)}}
@media(max-width:380px){.inline-balance{display:none}.user-name-text{max-width:66px}}


/* ===== PATCH 0611: fixed header + mobile auth inside hamburger menu ===== */
.site-bg{
    padding-top:var(--header-h);
}
.topbar{
    position:fixed !important;
    left:0;
    right:0;
    top:0;
    width:100%;
    z-index:3000;
    backdrop-filter:saturate(140%) blur(10px);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
}
.mobile-auth-link{
    display:none;
    border:1px solid rgba(248,207,118,.16);
    background:rgba(255,255,255,.04);
    font-family:inherit;
    cursor:pointer;
}
.mobile-auth-reg{
    background:linear-gradient(180deg,rgba(246,185,72,.96),rgba(153,65,17,.96));
    color:#fff8dc;
    border-color:rgba(255,220,127,.38);
    box-shadow:0 8px 20px rgba(110,34,10,.25);
}
@media(max-width:1024px){
    .site-bg{padding-top:var(--header-h)}
    .topbar{position:fixed !important}
    .main-nav{
        z-index:2999;
        max-height:calc(100svh - var(--header-h) - 18px);
        overflow:auto;
    }
    .mobile-auth-link{display:flex}
    body:not(.logged-in) .user-area{
        display:none;
    }
    .mobile-menu-btn{margin-left:0}
    .top-download{margin-left:auto}
}
@media(max-width:560px){
    .main-nav{
        top:calc(var(--header-h) + 8px);
        left:10px;
        right:10px;
        padding:10px;
        gap:8px;
        border-radius:16px;
    }
    .mobile-auth-link{
        height:44px;
        font-size:12px;
    }
    .mobile-auth-link i{font-size:14px}
}

/* ===== PHUC LOI NAP / MOC QUA NAP ===== */
.milestone-card{width:min(1180px,calc(100% - 28px));margin:26px auto;padding:22px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(62,18,8,.90),rgba(17,5,2,.94));border:1px solid rgba(248,207,118,.24);border-radius:22px;box-shadow:0 22px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)}
.milestone-card:before{content:"";position:absolute;inset:-120px -140px auto auto;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(248,207,118,.18),transparent 68%);pointer-events:none}.section-head.compact{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:8px}.section-head.compact h2{margin:5px 0 0;color:#ffdc80;font-size:clamp(24px,3vw,36px);letter-spacing:.3px}.milestone-note{margin:0 0 16px;color:#e4c998;line-height:1.55}.milestone-note b{color:#ffe7a8}.milestone-wrap{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(248,207,118,.16);background:rgba(0,0,0,.18);transition:max-height .32s ease}.milestone-card.is-collapsed .milestone-wrap{max-height:360px}.milestone-card:not(.is-collapsed) .milestone-wrap{max-height:2000px}.milestone-table{width:100%;border-collapse:collapse;color:#f6ddb2}.milestone-table th{padding:15px 16px;text-align:left;background:linear-gradient(180deg,rgba(248,207,118,.16),rgba(107,45,13,.12));color:#ffe08d;text-transform:uppercase;font-size:12px;letter-spacing:.8px}.milestone-table td{padding:16px;border-top:1px solid rgba(248,207,118,.12);vertical-align:top}.milestone-table tr:hover td{background:rgba(255,255,255,.025)}.milestone-amount{width:190px;color:#ffd46c;font-weight:950;font-size:18px;white-space:nowrap}.reward-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.reward-list li{display:flex;align-items:center;gap:8px;min-height:36px;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.045);border:1px solid rgba(248,207,118,.10);line-height:1.35}.reward-icon{width:26px;height:26px;flex:0 0 26px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(248,207,118,.11);font-size:16px}.reward-fade{display:none;position:absolute;left:0;right:0;bottom:68px;height:110px;background:linear-gradient(180deg,rgba(17,5,2,0),rgba(17,5,2,.94));pointer-events:none}.milestone-card.is-collapsed .reward-fade{display:block}.reward-toggle-wrap{position:relative;z-index:2;display:flex;justify-content:center;padding-top:16px}.reward-toggle-wrap .btn{min-width:168px;height:44px;border-radius:999px;border:1px solid rgba(255,231,158,.34);background:linear-gradient(180deg,#f4cb65,#9b4710);color:#2d1002;font-weight:950;box-shadow:0 6px 0 rgba(71,32,8,.78),0 16px 32px rgba(0,0,0,.25);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}.reward-toggle-wrap .btn:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 8px 0 rgba(71,32,8,.72),0 22px 42px rgba(0,0,0,.32)}
@media(max-width:760px){.milestone-card{width:calc(100% - 18px);margin:18px auto;padding:14px;border-radius:18px}.milestone-card.is-collapsed .milestone-wrap{max-height:430px}.milestone-table,.milestone-table tbody,.milestone-table tr,.milestone-table td{display:block;width:100%}.milestone-table thead{display:none}.milestone-table tr{padding:12px;border-top:1px solid rgba(248,207,118,.13)}.milestone-table tr:first-child{border-top:0}.milestone-table td{padding:0;border:0}.milestone-amount{width:auto;display:inline-flex;margin-bottom:10px;padding:7px 12px;border-radius:999px;background:rgba(248,207,118,.12);border:1px solid rgba(248,207,118,.18);font-size:16px}.reward-list{grid-template-columns:1fr;gap:7px}.reward-list li{font-size:14px;padding:8px}.reward-fade{bottom:62px;height:95px}.reward-toggle-wrap .btn{width:100%;max-width:260px}}

/* ===== PATCH: package modal always above fixed head ===== */
.package-backdrop,
#packageBackdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:10040 !important;
}
.package-confirm-modal,
#packageConfirmModal{
    position:fixed !important;
    z-index:10050 !important;
}
.package-confirm-modal.show,
#packageConfirmModal.show{
    display:block !important;
}
.package-backdrop.show,
#packageBackdrop.show{
    display:block !important;
}

/* ===== EXCHANGE PAGE ===== */
.nav-exchange i{color:#7ee7ff!important}.exchange-page{max-width:1180px}.section-desc{color:#e8cca0;line-height:1.55;margin:8px 0 0;max-width:760px}.exchange-balance-card{min-width:190px;border:1px solid rgba(248,207,118,.24);border-radius:16px;background:linear-gradient(180deg,rgba(255,211,109,.12),rgba(0,0,0,.18));padding:14px 16px;text-align:right}.exchange-balance-card span{display:block;color:#d1ad73;font-size:12px;text-transform:uppercase;font-weight:900}.exchange-balance-card b{display:block;color:#ffe18a;font-size:22px;margin-top:4px}.exchange-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:18px}.exchange-box{padding:20px;border-radius:20px;background:linear-gradient(180deg,rgba(48,14,7,.86),rgba(15,4,2,.92));border-color:rgba(248,207,118,.22)}.exchange-title{display:flex;align-items:center;gap:10px;color:#ffe08d;font-weight:950;font-size:18px;margin-bottom:14px}.exchange-title i{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(248,207,118,.12);color:#ffd36d}.exchange-rate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.exchange-rate-card,.exchange-char-card{border:1px solid rgba(248,207,118,.18);background:rgba(0,0,0,.20);color:#f7dfb5;border-radius:16px;padding:14px 12px;cursor:pointer;font-family:inherit;text-align:center;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s}.exchange-rate-card:hover,.exchange-char-card:hover{transform:translateY(-2px);border-color:rgba(255,218,112,.48);background:rgba(255,255,255,.055)}.exchange-rate-card.active,.exchange-char-card.active{border-color:rgba(88,232,255,.75);box-shadow:0 0 0 2px rgba(88,232,255,.14),0 16px 36px rgba(0,0,0,.25);background:linear-gradient(180deg,rgba(34,112,128,.26),rgba(0,0,0,.18))}.exchange-rate-card strong{display:block;color:#fff;font-size:18px}.exchange-rate-card span{display:block;color:#c9aa75;margin:8px 0 3px}.exchange-rate-card b{display:block;color:#78ff9c;font-size:16px}.exchange-rate-card em{display:block;color:#ffd36d;font-style:normal;font-size:13px;margin-top:4px}.exchange-char-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.exchange-char-card i{display:block;color:#ffd36d;font-size:28px;margin-bottom:8px}.exchange-char-card strong{display:block;color:#fff;font-size:17px;overflow:hidden;text-overflow:ellipsis}.exchange-char-card span{display:block;color:#d1ad73;margin-top:4px}.empty-box{padding:18px;border-radius:14px;background:rgba(255,255,255,.05);color:#f5d7a6;text-align:center}.empty-box.warning{color:#ffd36d}.exchange-action-card{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:18px;background:linear-gradient(180deg,rgba(22,72,47,.28),rgba(0,0,0,.18));border-color:rgba(78,255,147,.20)}.exchange-action-card span{display:block;color:#b8d7bd;font-size:12px;text-transform:uppercase;font-weight:900}.exchange-action-card b{display:block;color:#eaffdf;margin-top:4px}.exchange-submit{min-width:230px;background:linear-gradient(180deg,#84f080,#198c39);color:#08290e;box-shadow:0 7px 0 rgba(10,82,26,.8),0 18px 32px rgba(0,0,0,.25)}.exchange-success-modal{z-index:10060!important;text-align:center}.exchange-success-icon{width:68px;height:68px;border-radius:22px;margin:0 auto 12px;background:linear-gradient(180deg,#92ff8a,#159134);display:flex;align-items:center;justify-content:center;color:#08280e;font-size:34px;box-shadow:0 18px 40px rgba(0,0,0,.38)}.exchange-success-inline{max-width:520px;margin:16px auto;padding:14px 18px;border-radius:14px;background:rgba(51,195,94,.18);border:1px solid rgba(83,255,139,.35);color:#d9ffe2;text-align:center;font-weight:900}.exchange-success-inline i{color:#58ff8b;margin-right:6px}
@media(max-width:900px){.exchange-layout{grid-template-columns:1fr}.exchange-rate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.exchange-balance-card{text-align:left;width:100%}.exchange-action-card{flex-direction:column;align-items:stretch;text-align:center}.exchange-submit{width:100%;min-width:0}}@media(max-width:520px){.exchange-rate-grid,.exchange-char-grid{grid-template-columns:1fr}.exchange-box{padding:16px}.exchange-rate-card strong{font-size:16px}.exchange-page .section-title{text-align:left}.exchange-balance-card b{font-size:19px}}


/* ===== EXCHANGE CONFIRM + FRIENDLY UI PATCH ===== */
.exchange-page{
    padding-top:24px;
}
.exchange-page .section-head-row{
    align-items:center;
    padding:18px;
    border-radius:22px;
    background:linear-gradient(135deg,rgba(255,201,83,.10),rgba(0,0,0,.20));
    border:1px solid rgba(248,207,118,.18);
}
.exchange-rate-card,
.exchange-char-card{
    position:relative;
    overflow:hidden;
}
.exchange-rate-card:before,
.exchange-char-card:before{
    content:"";
    position:absolute;
    inset:-80px auto auto -80px;
    width:150px;
    height:150px;
    border-radius:50%;
    background:rgba(255,219,113,.10);
    pointer-events:none;
}
.exchange-rate-card.active:after,
.exchange-char-card.active:after{
    content:"\f00c";
    font-family:FontAwesome;
    position:absolute;
    right:10px;
    top:10px;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(180deg,#a4ff91,#1a9b39);
    color:#06240d;
    font-size:13px;
    box-shadow:0 8px 18px rgba(0,0,0,.30);
}
.exchange-confirm-modal{
    z-index:10080!important;
    text-align:center;
    width:min(520px,calc(100vw - 24px));
    border-color:rgba(255,220,120,.42);
    background:linear-gradient(180deg,#351307,#120503);
}
.exchange-confirm-icon{
    width:70px;
    height:70px;
    margin:0 auto 12px;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#ffe08b,#a54b10);
    color:#321203;
    font-size:34px;
    box-shadow:0 18px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.45);
}
.exchange-confirm-desc{
    margin:0 auto 14px;
    color:#f4d8a7;
    line-height:1.55;
}
.exchange-confirm-summary{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:15px 0 18px;
    text-align:left;
}
.exchange-confirm-summary div{
    padding:12px;
    border-radius:14px;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(248,207,118,.16);
}
.exchange-confirm-summary span{
    display:block;
    color:#c9aa75;
    font-size:11px;
    text-transform:uppercase;
    font-weight:950;
    letter-spacing:.5px;
    margin-bottom:5px;
}
.exchange-confirm-summary b{
    display:block;
    color:#ffe69b;
    line-height:1.35;
    word-break:break-word;
}
.exchange-confirm-actions{
    display:grid;
    grid-template-columns:1fr 1.35fr;
    gap:10px;
}
.exchange-confirm-now{
    height:50px;
    border-radius:14px;
    background:linear-gradient(180deg,#91ff86,#1b9d38);
    color:#08250d;
    box-shadow:0 7px 0 rgba(10,84,29,.85),0 18px 35px rgba(0,0,0,.32);
}
#modalBackdrop.show{
    z-index:10070!important;
}
.exchange-success-modal{
    z-index:10090!important;
}
body.modal-open{
    overflow:hidden;
}
@media(max-width:700px){
    .exchange-page .section-head-row{
        padding:14px;
    }
    .exchange-confirm-summary{
        grid-template-columns:1fr;
    }
    .exchange-confirm-actions{
        grid-template-columns:1fr;
    }
    .exchange-rate-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:10px;
    }
    .exchange-char-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:10px;
    }
    .exchange-rate-card,
    .exchange-char-card{
        padding:13px 8px;
        border-radius:15px;
    }
    .exchange-rate-card strong{font-size:14px!important}
    .exchange-rate-card b{font-size:14px}
    .exchange-rate-card em{font-size:12px}
    .exchange-char-card strong{font-size:14px}
    .exchange-action-card{
        position:sticky;
        bottom:10px;
        z-index:10;
        backdrop-filter:blur(10px);
    }
}
@media(max-width:380px){
    .exchange-rate-grid,
    .exchange-char-grid{
        grid-template-columns:1fr!important;
    }
}

/* ===== FIX 0611: MODAL / TOAST ALWAYS ABOVE HEADER, NOT TOO DARK ===== */
.topbar,
.main-nav,
.user-menu{
    z-index:3000 !important;
}

/* dùng chung cho tất cả popup xác nhận */
.modal-backdrop,
#modalBackdrop,
.package-backdrop,
#packageBackdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:90000 !important;
    background:rgba(0,0,0,.46) !important;
    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;
}
.modal-backdrop.show,
#modalBackdrop.show,
.package-backdrop.show,
#packageBackdrop.show{
    display:block !important;
}

.modal-box,
.confirm-modal,
.package-confirm-modal,
#packageConfirmModal,
.exchange-confirm-modal,
#exchangeConfirmModal,
.exchange-success-modal,
#exchangeSuccessModal{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) scale(1) !important;
    z-index:90010 !important;
    max-height:calc(100svh - 24px) !important;
    overflow:auto !important;
    isolation:isolate !important;
}
.modal-box.show,
.confirm-modal.show,
.package-confirm-modal.show,
#packageConfirmModal.show,
.exchange-confirm-modal.show,
#exchangeConfirmModal.show,
.exchange-success-modal.show,
#exchangeSuccessModal.show{
    display:block !important;
}

/* riêng popup mua gói và đổi lượng: sáng, dễ đọc hơn */
.package-confirm-modal,
#packageConfirmModal,
.exchange-confirm-modal,
#exchangeConfirmModal,
.exchange-success-modal,
#exchangeSuccessModal{
    background:
        radial-gradient(circle at top, rgba(255,221,130,.18), transparent 42%),
        linear-gradient(180deg,#3b1609,#170604) !important;
    border:1px solid rgba(255,220,125,.48) !important;
    box-shadow:0 35px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}

/* toast luôn nổi trên cả backdrop + modal, không bị tối */
.toast,
#toast{
    z-index:90100 !important;
    background:linear-gradient(180deg,#fff7dc,#ffd36d) !important;
    color:#321204 !important;
    border:1px solid rgba(112,47,8,.28) !important;
    box-shadow:0 18px 50px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.45) inset !important;
    font-weight:900 !important;
}
.toast.show,
#toast.show{
    opacity:1 !important;
    filter:none !important;
}

/* khi modal mở không cho nền cuộn nhưng popup vẫn bấm được */
body.modal-open{
    overflow:hidden !important;
}

@media(max-width:560px){
    .package-confirm-modal,
    #packageConfirmModal,
    .exchange-confirm-modal,
    #exchangeConfirmModal,
    .exchange-success-modal,
    #exchangeSuccessModal{
        width:calc(100vw - 22px) !important;
        padding:20px 14px !important;
        border-radius:18px !important;
    }
    .toast,
    #toast{
        width:calc(100vw - 28px) !important;
        bottom:16px !important;
        padding:12px 14px !important;
        font-size:14px !important;
    }
}

/* ===== FIX 0612: confirm popup/topup always above fixed header, not darkened ===== */
.site-bg{
    isolation:auto !important;
}
.topbar{
    z-index:3000 !important;
}
.modal-backdrop,
#modalBackdrop,
.package-backdrop,
#packageBackdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483000 !important;
    background:rgba(0,0,0,.32) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    opacity:1 !important;
}
.modal-backdrop.show,
#modalBackdrop.show,
.package-backdrop.show,
#packageBackdrop.show{
    display:block !important;
}
.modal-box,
.exchange-confirm-modal,
.exchange-success-modal,
.package-confirm-modal,
#exchangeConfirmModal,
#exchangeSuccessModal,
#packageConfirmModal{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) scale(1) !important;
    z-index:2147483100 !important;
    opacity:1 !important;
    filter:none !important;
    visibility:visible;
    color:#f8e7bd;
    box-shadow:0 28px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,216,120,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.modal-box.show,
.exchange-confirm-modal.show,
.exchange-success-modal.show,
.package-confirm-modal.show,
#exchangeConfirmModal.show,
#exchangeSuccessModal.show,
#packageConfirmModal.show{
    display:block !important;
    animation:confirmPopFix .16s ease-out both !important;
}
@keyframes confirmPopFix{
    from{opacity:.75;transform:translate(-50%,-48%) scale(.96)}
    to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.exchange-confirm-modal,
.exchange-success-modal,
.package-confirm-modal{
    background:linear-gradient(180deg,#3b1409 0%,#1b0703 100%) !important;
    border:1px solid rgba(255,215,120,.42) !important;
    border-radius:20px !important;
    width:min(460px,calc(100vw - 24px)) !important;
    max-height:calc(100svh - 28px) !important;
    overflow:auto !important;
}
.exchange-confirm-actions,
.confirm-actions{
    position:relative;
    z-index:2;
}
.toast{
    z-index:2147483200 !important;
}
body.modal-open{
    overflow:hidden;
}
@media(max-width:560px){
    .exchange-confirm-modal,
    .exchange-success-modal,
    .package-confirm-modal,
    #exchangeConfirmModal,
    #exchangeSuccessModal,
    #packageConfirmModal{
        width:calc(100vw - 18px) !important;
        max-height:calc(100svh - 18px) !important;
        padding:20px 14px !important;
    }
}


/* ===== FIX 0612 FINAL: bỏ tối/mờ nền khi xác nhận đổi lượng/mua gói ===== */
#modalBackdrop.exchange-clean,
#packageBackdrop,
.package-backdrop{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    pointer-events:none !important;
}

/* Nếu JS cũ lỡ thêm .show thì vẫn không được làm tối trang */
#packageBackdrop.show,
.package-backdrop.show{
    display:none !important;
    opacity:0 !important;
    background:transparent !important;
    pointer-events:none !important;
}

#exchangeConfirmModal,
#exchangeSuccessModal,
#packageConfirmModal,
.exchange-confirm-modal,
.exchange-success-modal,
.package-confirm-modal{
    z-index:2147483646 !important;
    opacity:1 !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:0 18px 70px rgba(0,0,0,.48), 0 0 0 1px rgba(255,219,130,.35), 0 0 35px rgba(255,178,62,.18) !important;
}

body.modal-open::before,
body.modal-open::after,
html::before,
html::after{
    display:none !important;
    content:none !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

body.modal-open{
    overflow:auto !important;
    filter:none !important;
    background-color:inherit !important;
}

/* =========================================================
   FINAL FIX 0612 - POPUP XÁC NHẬN MUA GÓI / ĐỔI LƯỢNG
   - Không làm tối trang
   - Không làm mờ trang
   - Luôn nổi trên head/menu sticky
   ========================================================= */
html,
body,
.site-bg,
main,
.section,
.exchange-page,
.package-page {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.modal-open,
body.confirm-open,
html.modal-open,
html.confirm-open {
    overflow: auto !important;
    filter: none !important;
    -webkit-filter: none !important;
    background: inherit !important;
}

body.modal-open::before,
body.modal-open::after,
body.confirm-open::before,
body.confirm-open::after,
html.modal-open::before,
html.modal-open::after,
html.confirm-open::before,
html.confirm-open::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: transparent !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Backdrop của popup xác nhận bị tắt hoàn toàn để không tối nền */
#packageBackdrop,
.package-backdrop,
#exchangeBackdrop,
.exchange-backdrop,
.confirm-backdrop,
.popup-backdrop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: -1 !important;
}

#packageBackdrop.show,
.package-backdrop.show,
#exchangeBackdrop.show,
.exchange-backdrop.show,
.confirm-backdrop.show,
.popup-backdrop.show {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
}

/* Popup xác nhận luôn nổi trên tất cả, cao hơn head/menu */
#packageConfirmModal,
#exchangeConfirmModal,
#exchangeSuccessModal,
.package-confirm-modal,
.exchange-confirm-modal,
.exchange-success-modal,
.confirm-modal,
.popup-confirm {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    width: min(460px, calc(100vw - 24px)) !important;
    max-height: calc(100svh - 24px) !important;
    overflow: auto !important;
    z-index: 2147483647 !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background:
        radial-gradient(circle at top, rgba(255, 226, 140, .23), transparent 42%),
        linear-gradient(180deg, #3d1709 0%, #1a0703 100%) !important;
    color: #ffe8b8 !important;
    border: 1px solid rgba(255, 219, 127, .58) !important;
    border-radius: 22px !important;
    box-shadow:
        0 28px 90px rgba(0, 0, 0, .48),
        0 0 0 1px rgba(255, 255, 255, .06) inset,
        0 0 42px rgba(255, 183, 63, .20) !important;
    isolation: isolate !important;
}

#packageConfirmModal:not(.show),
#exchangeConfirmModal:not(.show),
#exchangeSuccessModal:not(.show),
.package-confirm-modal:not(.show),
.exchange-confirm-modal:not(.show),
.exchange-success-modal:not(.show) {
    display: none !important;
}

#packageConfirmModal.show,
#exchangeConfirmModal.show,
#exchangeSuccessModal.show,
.package-confirm-modal.show,
.exchange-confirm-modal.show,
.exchange-success-modal.show {
    display: block !important;
    animation: kpahPopupCleanIn .16s ease-out both !important;
}

@keyframes kpahPopupCleanIn {
    from { opacity: .85; transform: translate(-50%, -48%) scale(.96) !important; }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1) !important; }
}

#packageConfirmModal *,
#exchangeConfirmModal *,
#exchangeSuccessModal *,
.package-confirm-modal *,
.exchange-confirm-modal *,
.exchange-success-modal * {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1;
}

/* Head/Menu thấp hơn popup */
.topbar,
.site-header,
.header,
.main-header,
.navbar,
.main-nav,
.user-menu {
    z-index: 9999 !important;
}

/* Toast cũng nổi trên cùng, không bị tối */
.toast,
#toast {
    z-index: 2147483647 !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 560px) {
    #packageConfirmModal,
    #exchangeConfirmModal,
    #exchangeSuccessModal,
    .package-confirm-modal,
    .exchange-confirm-modal,
    .exchange-success-modal {
        width: calc(100vw - 18px) !important;
        max-height: calc(100svh - 18px) !important;
        padding: 20px 14px !important;
        border-radius: 18px !important;
    }
}

/* ===== FIX 0612: Exchange confirm popup uses EXACT package-confirm UI ===== */
#exchangeBackdrop.exchange-backdrop,
.exchange-backdrop,
#exchangeBackdrop.show {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    background: transparent !important;
    opacity: 1 !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 9999990 !important;
}
#exchangeBackdrop:not(.show) { display: none !important; }

#exchangeConfirmModal.exchange-confirm-modal {
    z-index: 9999999 !important;
    text-align: center !important;
}
#exchangeConfirmModal .package-confirm-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 12px !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg,#ffd878,#a84c10) !important;
    color: #2c1003 !important;
    font-size: 30px !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.36) !important;
}
#exchangeConfirmModal .confirm-question {
    color: #f6dfb3 !important;
    line-height: 1.5 !important;
    margin: 0 0 12px !important;
}
#exchangeConfirmModal .confirm-summary {
    display: grid !important;
    gap: 10px !important;
    margin: 16px 0 !important;
    text-align: left !important;
}
#exchangeConfirmModal .confirm-summary div {
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,.24) !important;
    border: 1px solid rgba(248,207,118,.16) !important;
}
#exchangeConfirmModal .confirm-summary span {
    display: block !important;
    color: #c9aa75 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    margin-bottom: 4px !important;
}
#exchangeConfirmModal .confirm-summary b {
    color: #ffe393 !important;
    line-height: 1.4 !important;
}
#exchangeConfirmModal .confirm-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
    gap: 10px !important;
    margin-top: 16px !important;
}
#exchangeConfirmModal .btn-cancel {
    height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(248,207,118,.2) !important;
    background: rgba(255,255,255,.06) !important;
    color: #ffe1aa !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}
#exchangeConfirmModal .btn-cancel:hover { background: rgba(255,255,255,.1) !important; }
#exchangeConfirmModal .submit-btn {
    height: 48px !important;
    border-radius: 12px !important;
}
@media(max-width:560px){
    #exchangeConfirmModal.exchange-confirm-modal { width: calc(100vw - 24px) !important; }
    #exchangeConfirmModal .confirm-actions { grid-template-columns: 1fr !important; }
}


/* ===== FIX 0612: Khi popup xác nhận mua gói / đổi lượng hiện thì ẩn head ===== */
body.kpah-confirm-open .topbar,
body.kpah-confirm-open .site-header,
body.kpah-confirm-open .header,
body.kpah-confirm-open .main-header,
body.kpah-confirm-open .navbar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-120%) !important;
    transition: none !important;
}

body.kpah-confirm-open #packageConfirmModal,
body.kpah-confirm-open #exchangeConfirmModal,
body.kpah-confirm-open #exchangeSuccessModal,
body.kpah-confirm-open .package-confirm-modal,
body.kpah-confirm-open .exchange-confirm-modal,
body.kpah-confirm-open .exchange-success-modal {
    z-index: 2147483600 !important;
}

body.kpah-confirm-open #packageBackdrop,
body.kpah-confirm-open #exchangeBackdrop,
body.kpah-confirm-open .package-backdrop,
body.kpah-confirm-open .exchange-backdrop {
    z-index: 2147483500 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}

/* =========================================================
   FINAL HARD FIX 0612 - POPUP XÁC NHẬN ĐỔI LƯỢNG / MUA GÓI
   - Không backdrop-filter
   - Không làm tối/mờ trang
   - Popup luôn nổi trên head
   - Head tự ẩn khi popup mở
========================================================= */
html.kpah-confirm-open,
body.kpah-confirm-open,
body.modal-open,
html.modal-open {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: auto !important;
}

body.kpah-confirm-open::before,
body.kpah-confirm-open::after,
body.modal-open::before,
body.modal-open::after,
html.kpah-confirm-open::before,
html.kpah-confirm-open::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: transparent !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#exchangeBackdrop,
#packageBackdrop,
.exchange-backdrop,
.package-backdrop,
.modal-backdrop,
.confirm-backdrop,
.popup-backdrop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    background-color: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: -1 !important;
}

#exchangeBackdrop.show,
#packageBackdrop.show,
.exchange-backdrop.show,
.package-backdrop.show,
.modal-backdrop.show,
.confirm-backdrop.show,
.popup-backdrop.show {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.kpah-confirm-open .topbar,
body.kpah-confirm-open .site-header,
body.kpah-confirm-open .header,
body.kpah-confirm-open .main-header,
body.kpah-confirm-open .navbar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-120%) !important;
    transition: none !important;
}

#exchangeConfirmModal,
#exchangeSuccessModal,
#packageConfirmModal,
.exchange-confirm-modal,
.exchange-success-modal,
.package-confirm-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(460px, calc(100vw - 24px)) !important;
    max-height: calc(100svh - 24px) !important;
    overflow: auto !important;
    z-index: 2147483647 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    isolation: isolate !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background:
        radial-gradient(circle at top, rgba(255,226,140,.23), transparent 42%),
        linear-gradient(180deg,#3d1709 0%,#1a0703 100%) !important;
    color: #ffe8b8 !important;
    border: 1px solid rgba(255,219,127,.58) !important;
    border-radius: 22px !important;
    box-shadow:
        0 28px 90px rgba(0,0,0,.48),
        inset 0 0 0 1px rgba(255,255,255,.06),
        0 0 42px rgba(255,183,63,.20) !important;
}

#exchangeConfirmModal:not(.show),
#exchangeSuccessModal:not(.show),
#packageConfirmModal:not(.show),
.exchange-confirm-modal:not(.show),
.exchange-success-modal:not(.show),
.package-confirm-modal:not(.show) {
    display: none !important;
}

#exchangeConfirmModal.show,
#exchangeSuccessModal.show,
#packageConfirmModal.show,
.exchange-confirm-modal.show,
.exchange-success-modal.show,
.package-confirm-modal.show {
    display: block !important;
    animation: kpahFinalPopupIn .16s ease-out both !important;
}

@keyframes kpahFinalPopupIn {
    from { opacity: .9; transform: translate(-50%, -48%) scale(.97) !important; }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1) !important; }
}

#exchangeConfirmModal *,
#exchangeSuccessModal *,
#packageConfirmModal *,
.exchange-confirm-modal *,
.exchange-success-modal *,
.package-confirm-modal * {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#exchangeConfirmModal .package-confirm-icon,
#packageConfirmModal .package-confirm-icon {
    width: 66px !important;
    height: 66px !important;
    margin: 0 auto 12px !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg,#ffd878,#a84c10) !important;
    color: #2c1003 !important;
    font-size: 30px !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.36) !important;
}

#exchangeConfirmModal h3,
#exchangeSuccessModal h3,
#packageConfirmModal h3 {
    color: #ffe39a !important;
    text-align: center !important;
    margin: 8px 0 8px !important;
    font-size: 24px !important;
}

#exchangeConfirmModal .confirm-question,
#packageConfirmModal .confirm-question,
#exchangeSuccessModal p {
    color: #f6dfb3 !important;
    text-align: center !important;
    line-height: 1.55 !important;
    margin: 0 0 12px !important;
}

#exchangeConfirmModal .confirm-summary,
#packageConfirmModal .confirm-summary {
    display: grid !important;
    gap: 10px !important;
    margin: 16px 0 !important;
    text-align: left !important;
}

#exchangeConfirmModal .confirm-summary div,
#packageConfirmModal .confirm-summary div {
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,.24) !important;
    border: 1px solid rgba(248,207,118,.16) !important;
}

#exchangeConfirmModal .confirm-summary span,
#packageConfirmModal .confirm-summary span {
    display: block !important;
    color: #c9aa75 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    margin-bottom: 4px !important;
}

#exchangeConfirmModal .confirm-summary b,
#packageConfirmModal .confirm-summary b {
    color: #ffe393 !important;
    line-height: 1.4 !important;
}

#exchangeConfirmModal .confirm-actions,
#packageConfirmModal .confirm-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

#exchangeConfirmModal .btn-cancel,
#packageConfirmModal .btn-cancel {
    height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(248,207,118,.2) !important;
    background: rgba(255,255,255,.06) !important;
    color: #ffe1aa !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

#exchangeConfirmModal .btn-cancel:hover,
#packageConfirmModal .btn-cancel:hover {
    background: rgba(255,255,255,.1) !important;
}

#exchangeConfirmModal .submit-btn,
#packageConfirmModal .submit-btn,
#exchangeSuccessModal .submit-btn {
    min-height: 48px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
}

#exchangeConfirmNow[disabled],
#confirmBuyPackage[disabled] {
    opacity: .75 !important;
    cursor: wait !important;
}

#toast,
.toast {
    z-index: 2147483647 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media(max-width:560px){
    #exchangeConfirmModal,
    #exchangeSuccessModal,
    #packageConfirmModal,
    .exchange-confirm-modal,
    .exchange-success-modal,
    .package-confirm-modal {
        width: calc(100vw - 18px) !important;
        max-height: calc(100svh - 18px) !important;
        padding: 20px 14px !important;
        border-radius: 18px !important;
    }
    #exchangeConfirmModal .confirm-actions,
    #packageConfirmModal .confirm-actions {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   REAL FINAL FIX 0612 - POPUP XÁC NHẬN KHÔNG BLUR / KHÔNG TỐI
   Áp dụng cho mua gói + đổi lượng. Đặt cuối file để ghi đè toàn bộ CSS cũ.
========================================================= */
html.kpah-confirm-open,
body.kpah-confirm-open,
html.modal-open,
body.modal-open{
    overflow:auto !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}
body.kpah-confirm-open *,
html.kpah-confirm-open *{
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}
body.kpah-confirm-open::before,
body.kpah-confirm-open::after,
html.kpah-confirm-open::before,
html.kpah-confirm-open::after,
body.modal-open::before,
body.modal-open::after,
html.modal-open::before,
html.modal-open::after{
    display:none !important;
    content:none !important;
    opacity:0 !important;
    background:transparent !important;
    pointer-events:none !important;
}
body.kpah-confirm-open #modalBackdrop,
body.kpah-confirm-open #exchangeBackdrop,
body.kpah-confirm-open #packageBackdrop,
body.kpah-confirm-open .modal-backdrop,
body.kpah-confirm-open .exchange-backdrop,
body.kpah-confirm-open .package-backdrop{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    background:transparent !important;
    background-color:transparent !important;
    z-index:-999 !important;
}
body.kpah-confirm-open .topbar,
body.kpah-confirm-open .site-header,
body.kpah-confirm-open .header,
body.kpah-confirm-open .main-header,
body.kpah-confirm-open .navbar{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}
#exchangeConfirmModal,
#exchangeSuccessModal,
#packageConfirmModal{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    z-index:2147483647 !important;
    isolation:isolate !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    width:min(460px,calc(100vw - 24px)) !important;
    max-height:calc(100svh - 24px) !important;
    overflow:auto !important;
    background:radial-gradient(circle at top,rgba(255,226,140,.23),transparent 42%),linear-gradient(180deg,#3d1709 0%,#1a0703 100%) !important;
    color:#ffe8b8 !important;
    border:1px solid rgba(255,219,127,.58) !important;
    border-radius:22px !important;
    box-shadow:0 28px 90px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.06),0 0 42px rgba(255,183,63,.20) !important;
}
#exchangeConfirmModal:not(.show),
#exchangeSuccessModal:not(.show),
#packageConfirmModal:not(.show){
    display:none !important;
}
#exchangeConfirmModal.show,
#exchangeSuccessModal.show,
#packageConfirmModal.show{
    display:block !important;
}
#exchangeConfirmModal *,
#exchangeSuccessModal *,
#packageConfirmModal *{
    opacity:1 !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

/* === FIX 0612: thông báo lỗi đổi lượng/mua gói luôn nổi trên popup, không ẩn head === */
.site-header,.topbar,.header,.main-header,.navbar{visibility:visible!important;opacity:1!important;filter:none!important;-webkit-filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
body.kpah-clean-popup-open .site-header,body.kpah-clean-popup-open .topbar,body.kpah-clean-popup-open .header,body.kpah-clean-popup-open .main-header,body.kpah-clean-popup-open .navbar{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;}
.exchange-clean-popup,#exchangeCleanConfirm,#exchangeCleanSuccess{z-index:999990!important;filter:none!important;-webkit-filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.toast,#toast{z-index:2147483647!important;filter:none!important;-webkit-filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}

/* === FIX FINAL 0612: mở popup không ẩn head, toast lỗi luôn nổi trước popup === */
body.kpah-confirm-open .topbar,
body.kpah-confirm-open .site-header,
body.kpah-confirm-open .header,
body.kpah-confirm-open .main-header,
body.kpah-confirm-open .navbar,
html.kpah-confirm-open .topbar,
html.kpah-confirm-open .site-header,
html.kpah-confirm-open .header,
html.kpah-confirm-open .main-header,
html.kpah-confirm-open .navbar{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}
#packageConfirmModal,
.package-confirm-modal,
#exchangeConfirmModal,
.exchange-confirm-modal,
#exchangeCleanConfirm,
#exchangeCleanSuccess,
.exchange-clean-popup{
    z-index:999990!important;
}
#toast,
.toast{
    z-index:2147483647!important;
    position:fixed!important;
    left:50%!important;
    bottom:28px!important;
    pointer-events:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}
#toast.show,
.toast.show{
    opacity:1!important;
    visibility:visible!important;
}

/* ===== FIX MONEY / SUPPORT POINT UI 0612 ===== */
.user-btn-balance{
    min-width:0 !important;
    max-width:280px !important;
}
.user-name-text{
    max-width:92px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}
.inline-balance{
    max-width:112px !important;
    min-width:0 !important;
    padding:0 8px !important;
    gap:5px !important;
}
.inline-balance b{
    display:block;
    max-width:76px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    line-height:1;
}
.menu-balance-row{
    margin:4px 4px 8px;
    padding:10px 11px;
    border-radius:10px;
    background:linear-gradient(180deg,rgba(255,214,111,.16),rgba(99,39,9,.18));
    border:1px solid rgba(248,207,118,.24);
    color:#ffe7b0;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:3px 9px;
    align-items:center;
}
.menu-balance-row i{color:#ffd76c;grid-row:1/3;font-size:17px}
.menu-balance-row span{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#d9ba78;font-weight:800}
.menu-balance-row b{font-size:14px;color:#fff2bd;white-space:normal;word-break:break-word}
.support-preview{
    margin:10px 0 12px;
    padding:10px 12px;
    border-radius:14px;
    background:linear-gradient(180deg,rgba(255,236,168,.14),rgba(70,28,7,.12));
    border:1px solid rgba(248,207,118,.26);
    color:#ffe6ad;
    display:flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    line-height:1.4;
}
.support-preview i{color:#ffd76c;font-size:17px;filter:drop-shadow(0 0 8px rgba(255,211,91,.25))}
.support-preview b{color:#fff5c8;font-weight:950}
.support-preview.has-value{
    background:linear-gradient(180deg,rgba(255,216,112,.22),rgba(109,48,12,.16));
    border-color:rgba(255,218,117,.42);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.12);
}
.card-form select option{color:#2a1204;background:#fff8df}
@media(max-width:1024px){
    .user-btn-balance{max-width:190px !important}
    .user-name-text{max-width:70px !important}
    .inline-balance{max-width:84px !important}
    .inline-balance b{max-width:54px;font-size:11px}
}
@media(max-width:560px){
    .user-btn-balance{max-width:142px !important;padding:0 7px !important;gap:5px !important}
    .user-name-text{max-width:54px !important}
    .inline-balance{max-width:58px !important;height:24px !important;padding:0 6px !important}
    .inline-balance b{max-width:42px;font-size:10px}
    .support-preview{font-size:12px;padding:9px 10px;border-radius:12px;align-items:flex-start}
}

/* ===== BEAUTY BALANCE + DONATION PREVIEW REAL 0612 ===== */
.user-btn-balance{
    max-width:240px!important;
    height:44px!important;
    padding:0 10px!important;
    gap:7px!important;
    border-radius:14px!important;
    background:linear-gradient(180deg,rgba(46,12,6,.94),rgba(17,5,3,.92))!important;
    border:1px solid rgba(255,210,103,.28)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.22)!important;
}
.user-name-text{
    max-width:96px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-weight:950!important;
}
.inline-balance{
    height:28px!important;
    max-width:104px!important;
    padding:0 8px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#ffe28a,#b66714)!important;
    color:#3d1700!important;
    border:1px solid rgba(255,244,180,.62)!important;
    box-shadow:0 4px 12px rgba(194,106,19,.22),inset 0 1px 0 rgba(255,255,255,.36)!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    flex:0 0 auto!important;
}
.inline-balance i{color:#4d1e00!important;text-shadow:none!important;font-size:13px!important;display:inline-block!important}
.inline-balance b{
    max-width:66px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    line-height:1!important;
    font-size:12px!important;
    font-weight:950!important;
}
.menu-balance-row{
    background:linear-gradient(135deg,rgba(255,226,138,.18),rgba(114,52,12,.20))!important;
    border:1px solid rgba(255,217,115,.32)!important;
    border-radius:14px!important;
    padding:12px!important;
    margin:6px 6px 10px!important;
    display:grid!important;
    grid-template-columns:34px 1fr!important;
    gap:2px 10px!important;
    align-items:center!important;
}
.menu-balance-row i{
    width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,#ffe28a,#b66714);color:#421900!important;grid-row:1/3!important;
}
.menu-balance-row span{font-size:11px!important;color:#e3c581!important;text-transform:uppercase!important;letter-spacing:.6px!important;font-weight:900!important}
.menu-balance-row b{font-size:14px!important;color:#fff4c8!important;line-height:1.25!important;word-break:break-word!important}
.support-preview{
    position:relative!important;
    margin:12px 0 14px!important;
    padding:14px!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,rgba(255,228,139,.18),rgba(97,38,8,.14))!important;
    border:1px solid rgba(255,214,105,.34)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 24px rgba(0,0,0,.12)!important;
    color:#ffecc2!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    line-height:1.4!important;
    overflow:hidden!important;
}
.support-preview:before{
    content:"";position:absolute;inset:-40% auto auto -25%;width:120px;height:120px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,218,115,.22),transparent 70%);pointer-events:none;
}
.support-preview > i{
    width:38px!important;height:38px!important;min-width:38px!important;border-radius:14px!important;
    background:linear-gradient(180deg,#ffe28a,#b66714)!important;color:#411800!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    font-size:18px!important;filter:none!important;box-shadow:0 8px 18px rgba(0,0,0,.20)!important;
}
.support-preview .support-preview-grid{display:grid!important;grid-template-columns:1fr auto 1fr!important;gap:10px!important;align-items:center!important;width:100%!important;position:relative!important;z-index:1!important}
.support-preview .support-box{padding:10px 12px!important;border-radius:14px!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.08)!important;text-align:center!important;min-width:0!important}
.support-preview .support-box span{display:block!important;color:#d9bb82!important;font-size:11px!important;text-transform:uppercase!important;font-weight:900!important;letter-spacing:.4px!important;margin-bottom:4px!important}
.support-preview .support-box b{display:block!important;color:#fff4c8!important;font-size:16px!important;font-weight:950!important;white-space:normal!important}
.support-preview .support-arrow{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,214,105,.16);color:#ffd66d;font-weight:950}
.support-preview.has-value{background:linear-gradient(135deg,rgba(255,220,122,.24),rgba(93,35,8,.18))!important;border-color:rgba(255,224,124,.52)!important}
@media(max-width:1024px){.user-btn-balance{max-width:190px!important}.user-name-text{max-width:70px!important}.inline-balance{max-width:76px!important}.inline-balance b{max-width:44px!important}}
@media(max-width:560px){
    .user-btn-balance{max-width:132px!important;padding:0 7px!important;gap:4px!important}
    .user-name-text{max-width:52px!important}
    .inline-balance{height:24px!important;max-width:54px!important;padding:0 5px!important;gap:3px!important}
    .inline-balance i{font-size:11px!important}
    .inline-balance b{max-width:34px!important;font-size:10px!important}
    .support-preview{padding:12px!important;align-items:flex-start!important}
    .support-preview > i{width:32px!important;height:32px!important;min-width:32px!important;font-size:15px!important;border-radius:12px!important}
    .support-preview .support-preview-grid{grid-template-columns:1fr!important;gap:8px!important}
    .support-preview .support-arrow{width:100%!important;height:22px!important;border-radius:10px!important}
    .support-preview .support-box b{font-size:14px!important}
}

/* =========================================================
   FIX HERO BACKGROUND 0612 - BẮT BUỘC HIỆN hero-bg.png
   Lỗi cũ: .site-bg:before dùng z-index âm nên bị nền .site-bg che mất.
   Patch này đưa ảnh nền lên layer 0, overlay layer 1, nội dung layer 5.
   Có fallback cả đường dẫn root và đường dẫn tương đối từ file CSS.
   ========================================================= */
.site-bg{
    position:relative !important;
    min-height:100vh !important;
    background:#120302 !important;
    isolation:isolate !important;
    overflow:hidden;
}
.site-bg:before{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    display:block !important;
    z-index:0 !important;
    opacity:1 !important;
    pointer-events:none !important;
    background-image:var(--hero-bg),url('/assets/images/hero-bg.png'),url('../images/hero-bg.png') !important;
    background-position:center top,center top,center top !important;
    background-size:cover,cover,cover !important;
    background-repeat:no-repeat,no-repeat,no-repeat !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
}
.site-bg:after{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    display:block !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
        linear-gradient(180deg,rgba(15,2,1,.84) 0,rgba(35,4,2,.42) 110px,rgba(29,8,3,.12) 45%,rgba(11,2,1,.58) 100%),
        radial-gradient(ellipse at center,rgba(255,238,193,.26) 0,rgba(255,238,193,.11) 34%,rgba(54,18,6,.18) 68%,rgba(10,2,1,.48) 100%) !important;
}
.topbar,
.active-notice,
.site-bg > main,
.site-bg main{
    position:relative !important;
    z-index:5 !important;
}
.topbar{
    position:fixed !important;
    z-index:3000 !important;
}
.hero{
    background:transparent !important;
}
.hero:after{
    display:none !important;
}
@media(max-width:768px){
    .site-bg:before{
        background-position:center top,center top,center top !important;
        background-size:cover,cover,cover !important;
    }
}


/* =========================================================
   FIX ICON ĐIỂM HỖ TRỢ Ở HEAD - FA 4.7 dùng fa-diamond
   Ép icon luôn hiện, không bị CSS mobile ẩn.
========================================================= */
.head-support-balance,
.inline-balance.head-support-balance{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    min-width:auto!important;
    max-width:118px!important;
    height:30px!important;
    padding:0 10px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#ffe08a,#c87218)!important;
    color:#421900!important;
    border:1px solid rgba(255,236,165,.75)!important;
    box-shadow:0 4px 12px rgba(255,172,45,.22), inset 0 1px 0 rgba(255,255,255,.55)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
}
.head-support-balance .money-head-icon,
.inline-balance.head-support-balance i,
.inline-balance i.money-head-icon{
    display:inline-block!important;
    visibility:visible!important;
    opacity:1!important;
    width:auto!important;
    min-width:13px!important;
    color:#5b2100!important;
    font-size:13px!important;
    line-height:1!important;
    text-shadow:none!important;
    flex:0 0 auto!important;
}
.head-support-balance b,
.inline-balance.head-support-balance b{
    display:inline-block!important;
    color:#421900!important;
    font-weight:950!important;
    font-size:12px!important;
    line-height:1!important;
    max-width:72px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
@media(max-width:560px){
    .head-support-balance,
    .inline-balance.head-support-balance{
        display:inline-flex!important;
        max-width:74px!important;
        height:26px!important;
        padding:0 7px!important;
        gap:4px!important;
    }
    .head-support-balance .money-head-icon,
    .inline-balance.head-support-balance i,
    .inline-balance i.money-head-icon{
        display:inline-block!important;
        font-size:11px!important;
        min-width:11px!important;
    }
    .head-support-balance b,
    .inline-balance.head-support-balance b{
        max-width:45px!important;
        font-size:10px!important;
    }
}
@media(max-width:380px){
    .head-support-balance,
    .inline-balance.head-support-balance{
        display:inline-flex!important;
        max-width:62px!important;
    }
}
/* =========================
   ĐỒNG BỘ KHUNG SECTION
   BXH = QUÀ MỐC NẠP
========================= */

.section,
.card,
.milestone-card {

    width: min(1200px, calc(100% - 40px)) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box;
}


/* riêng khung mốc nạp */
.milestone-card {

    background:
        linear-gradient(
            180deg,
            rgba(25,12,8,.95),
            rgba(8,5,4,.98)
        );

    border-radius: 22px;

    border:
        1px solid rgba(255,200,90,.25);

    padding: 32px 24px;

}


/* bảng bên trong không phá width */
.milestone-wrap,
.milestone-table {

    width:100%;

}


/* tránh table đẩy khung */
.milestone-table {

    table-layout: fixed;

}


/* mobile */
@media(max-width:768px){

    .section,
    .card,
    .milestone-card {

        width: calc(100% - 24px) !important;

        border-radius:18px;

    }


    .milestone-card {

        padding:20px 14px;

    }

}

/* ======================
   HIỆU ỨNG NÚT FORM
====================== */

.submit-btn {
    transition: 
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;

    cursor: pointer;
}


/* PC rê chuột */
.submit-btn:hover {

    transform: translateY(-2px);

    filter: brightness(1.1);

    box-shadow:
        0 6px 15px
        rgba(255,170,50,.35);

}


/* Khi click */
.submit-btn:active {

    transform: scale(.96);

}


/* icon */
.submit-btn i {

    transition: transform .18s ease;

}


/* icon nhích nhẹ */
.submit-btn:hover i {

    transform: scale(1.15);

}
.package-confirm-modal,
#shopConfirmModal{
    z-index:999999!important;
}

.site-header,
.header,
.navbar{
    z-index:9999!important;
}
.package-item-text{
    display:flex !important;
    align-items:flex-start;
    gap:6px;
}

.package-item-text i{
    flex:0 0 auto;
    margin-top:3px;
}

.package-item-text b{
    display:block;
    flex:1;
    line-height:1.5;
    white-space:normal;
    word-break:break-word;
    font-weight:normal;
}