*{box-sizing:border-box;margin:0;padding:0}
:root{--cyan:#00f0d5;--cyan2:#28ffe8;--bg:#000;--card:#041014;--card2:#07171c;--line:rgba(66,255,237,.18);--muted:#8b919c;--danger:#ff5b70;--success:#2ee59d}
html{scroll-behavior:smooth}
body{min-height:100vh;background:#000;color:#f7fbff;font-family:Inter,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
button,input{font:inherit}button{border:0;cursor:pointer}.app-shell{width:100%;max-width:520px;min-height:100vh;margin:auto;position:relative;background:radial-gradient(circle at 50% 4%,rgba(0,255,231,.08),transparent 23%),#000}.page-wrap{padding:0 14px calc(104px + env(safe-area-inset-bottom))}.app-page{display:none;animation:pageIn .22s ease}.app-page.active{display:block}@keyframes pageIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.loading-screen{position:fixed;z-index:999;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:#000;color:var(--cyan);text-align:center;transition:opacity .28s ease,visibility .28s ease}.loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-crystal-wrap{width:168px;height:168px;position:relative;display:grid;place-items:center}.loading-crystal{position:relative;z-index:2;width:150px;height:150px;object-fit:contain;animation:loadingCrystalFloat 1.8s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(0,240,213,.55)) drop-shadow(0 0 28px rgba(0,240,213,.22))}.loading-glow{position:absolute;z-index:1;width:108px;height:36px;bottom:12px;border-radius:50%;background:rgba(0,240,213,.28);filter:blur(18px);animation:loadingGlowPulse 1.8s ease-in-out infinite}.loading-screen strong{font-size:16px;color:var(--cyan2);text-shadow:0 0 12px rgba(0,240,213,.28)}.loading-screen small{max-width:310px;color:#78878b;font-size:12px;line-height:1.55}.loading-retry{min-width:132px;height:42px;margin-top:8px;padding:0 18px;border:1px solid var(--cyan);border-radius:13px;color:var(--cyan);background:rgba(0,240,213,.08);font-size:12px;font-weight:800}.loading-retry:active{transform:scale(.97)}.loading-screen.error .loading-crystal{animation:none;opacity:.58}.loading-screen.error .loading-glow{animation:none;opacity:.35}.loading-screen.error strong{color:#ff7a8b;text-shadow:none}@keyframes loadingCrystalFloat{0%,100%{transform:translateY(5px) scale(.98)}50%{transform:translateY(-8px) scale(1.03)}}@keyframes loadingGlowPulse{0%,100%{transform:scale(.82);opacity:.42}50%{transform:scale(1.12);opacity:.9}}
.hero{height:190px;margin:0 -14px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(0,238,211,.20),transparent 25%),linear-gradient(180deg,#02090d,#000)}.hero:before,.hero:after{content:"";position:absolute;bottom:0;width:210px;height:105px;opacity:.28;background:linear-gradient(145deg,transparent 20%,#06292e 21% 42%,transparent 43%),linear-gradient(35deg,transparent 25%,#073940 26% 44%,transparent 45%);filter:drop-shadow(0 0 12px rgba(0,255,231,.12))}.hero:before{left:-55px}.hero:after{right:-55px;transform:scaleX(-1)}.hero-glow{position:absolute;width:320px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(0,255,226,.12),transparent 68%);filter:blur(12px)}.hero h1{position:relative;z-index:2;color:var(--cyan2);font-size:38px;font-weight:800;letter-spacing:1.4px;text-shadow:0 0 18px rgba(0,240,213,.34)}.hero p{position:relative;z-index:2;margin-top:12px;color:#b5b7bd;font-size:15px}
.balance-panel{min-height:286px;border:1px solid rgba(0,240,213,.66);border-radius:26px;padding:28px 22px 18px;background:radial-gradient(circle at 80% 32%,rgba(0,240,213,.12),transparent 25%),linear-gradient(145deg,rgba(3,15,19,.97),rgba(0,5,7,.99));box-shadow:inset 0 0 28px rgba(0,240,213,.04),0 0 18px rgba(0,240,213,.06);position:relative;overflow:hidden}.balance-copy{position:relative;z-index:2}.balance-label{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700}.info-btn{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--cyan)}.info-btn svg{width:21px}.balance-number{margin-top:12px;display:flex;align-items:center;gap:11px}.balance-number>span{font-size:39px;line-height:1;font-weight:800;letter-spacing:-1.8px;color:var(--cyan2);text-shadow:0 0 16px rgba(0,240,213,.3)}.balance-number em{min-width:54px;height:38px;padding:0 8px;border:2px solid var(--cyan);border-radius:22px;display:grid;place-items:center;color:var(--cyan);font-size:11px;font-style:normal;font-weight:800}.balance-usd{margin-top:15px;color:#9ca2ab;font-size:13px}.balance-usd b{color:#dce8e8;font-weight:600}.mining-art{position:absolute;right:-5px;top:38px;width:170px;height:170px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(0,240,213,.28));pointer-events:none}.mining-stats{height:76px;position:absolute;left:18px;right:18px;bottom:17px;display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;border:1px solid rgba(120,159,166,.22);border-radius:16px;background:rgba(0,6,8,.65);backdrop-filter:blur(8px)}.stat-box{display:flex;align-items:center;justify-content:center;gap:10px}.stat-box svg{width:27px;height:27px;color:var(--cyan);stroke-width:1.8}.stat-box:nth-child(3) svg{color:#7c818c}.stat-box div{display:flex;flex-direction:column;gap:6px}.stat-box span{font-size:9px;color:#b7bac0}.stat-box strong{font-size:12px;font-weight:500;color:#d8dbe0}.stat-box strong b,.stat-box:last-child strong{color:var(--cyan);font-weight:600}.stat-line{height:40px;background:rgba(255,255,255,.12)}
.claim-btn,.primary-btn{width:100%;height:58px;border-radius:17px;display:flex;align-items:center;justify-content:center;gap:12px;color:#001311;background:linear-gradient(180deg,#2dffe9,#00d8c4);font-weight:800;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 18px rgba(0,240,213,.35),0 10px 28px rgba(0,240,213,.12)}.claim-btn{margin-top:14px;font-size:21px}.claim-btn svg{width:28px;height:28px}.claim-btn:active,.primary-btn:active{transform:scale(.985)}.claim-btn:disabled,.primary-btn:disabled{opacity:.58;cursor:not-allowed}.claim-btn.ready{background:linear-gradient(180deg,#fff27a,#ffbf2f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 20px rgba(255,210,50,.35);color:#1c1300}.claim-note{text-align:center;color:#a3a5aa;font-size:13px;margin:14px 0 18px}.claim-note strong{color:var(--cyan);font-weight:600}
.glass-card,.feature-card,.form-card,.rules-card{border:1px solid rgba(87,159,168,.17);background:linear-gradient(145deg,rgba(4,16,20,.96),rgba(1,8,10,.98));border-radius:18px}.miner-card{padding:18px}.card-kicker{color:var(--cyan);font-size:12px;font-weight:700;margin-bottom:15px}.miner-row{display:flex;align-items:center;gap:13px}.miner-icon{width:58px;height:54px;border-radius:12px;display:grid;place-items:center;color:var(--cyan);background:radial-gradient(circle,rgba(0,240,213,.18),transparent 65%),#07151a;border:1px solid rgba(0,240,213,.16)}.miner-icon svg{width:34px}.miner-info{flex:1;min-width:0}.miner-title{font-size:15px;font-weight:700}.miner-title span{margin-left:7px;padding:5px 8px;border-radius:8px;color:var(--cyan);font-size:10px;background:rgba(0,240,213,.1)}.miner-info p{margin-top:9px;color:#9ca1aa;font-size:12px}.miner-info b{color:#dbe7e7;font-weight:600}
.page-header{display:flex;justify-content:space-between;align-items:center;padding:25px 2px 20px}.page-header span{color:var(--cyan);font-size:10px;font-weight:700;letter-spacing:1.5px}.page-header h2{margin-top:5px;font-size:28px}.page-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:var(--cyan);background:rgba(0,240,213,.08);border:1px solid rgba(0,240,213,.18)}.page-icon svg{width:26px}
.task-list{display:flex;flex-direction:column;gap:12px}.empty-state{min-height:300px;border:1px dashed rgba(0,240,213,.25);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(2,12,15,.72);padding:30px}.empty-state svg{width:48px;color:var(--cyan)}.empty-state h3{margin-top:14px;font-size:18px}.empty-state p{max-width:290px;margin-top:9px;color:#858b94;font-size:13px;line-height:1.6}.task-card{padding:15px;border-radius:18px;background:#061318;border:1px solid rgba(0,240,213,.16)}.task-main{display:flex;align-items:center;gap:12px}.task-icon{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:grid;place-items:center;color:var(--cyan);background:rgba(0,240,213,.09)}.task-icon svg{width:25px}.task-copy{flex:1;min-width:0}.task-copy strong{display:block;font-size:14px}.task-copy small{display:block;margin-top:6px;color:#8b9098;font-size:11px}.task-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.task-actions button{height:40px;border-radius:11px;font-weight:700}.task-open{color:var(--cyan);background:rgba(0,240,213,.07);border:1px solid rgba(0,240,213,.28)}.task-check{color:#001411;background:var(--cyan)}.task-check:disabled{color:#6f7f7d;background:#17302f}.task-completed{border-color:rgba(46,229,157,.3)}.task-completed .task-icon{color:var(--success);background:rgba(46,229,157,.1)}
.feature-card{padding:28px 20px;text-align:center}.feature-icon{width:82px;height:82px;border-radius:24px;display:grid;place-items:center;margin:0 auto 17px;color:var(--cyan);background:radial-gradient(circle,rgba(0,240,213,.18),rgba(0,240,213,.03));border:1px solid rgba(0,240,213,.22);box-shadow:0 0 25px rgba(0,240,213,.08)}.feature-icon svg{width:42px}.feature-card h3{font-size:21px}.feature-card>p{margin:9px auto 20px;max-width:340px;color:#8e949c;font-size:13px;line-height:1.6}.field{width:100%;height:50px;border:1px solid rgba(0,240,213,.17);border-radius:13px;outline:none;background:#020b0d;color:#fff;padding:0 14px}.field:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,240,213,.07)}.feature-card .primary-btn,.form-card .primary-btn,.invite-card .primary-btn{height:50px;border-radius:13px;margin-top:12px;font-size:13px}.form-message{min-height:20px;margin-top:12px;font-size:12px;line-height:1.5}.form-message.success{color:var(--success)}.form-message.error{color:var(--danger)}
.ref-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:22px;border-top:1px solid rgba(255,255,255,.07)}.ref-stats div{padding:18px 8px 0}.ref-stats div+div{border-left:1px solid rgba(255,255,255,.07)}.ref-stats strong{display:block;color:var(--cyan);font-size:28px}.ref-stats span{display:block;margin-top:4px;color:#868c94;font-size:11px}.invite-card{padding:18px;margin-top:12px}.invite-card label,.form-card label{display:block;margin:13px 0 7px;color:#c7cbd0;font-size:12px;font-weight:600}.copy-group{display:grid;grid-template-columns:1fr 48px;gap:8px}.copy-group input{min-width:0;height:48px;border:1px solid rgba(0,240,213,.16);border-radius:12px;background:#020b0d;color:#8d949c;padding:0 12px;outline:none}.copy-group button{border-radius:12px;display:grid;place-items:center;color:#001411;background:var(--cyan)}.copy-group button svg{width:20px}.invite-card .primary-btn svg{width:18px}
.wallet-hero{padding:28px 18px;border-radius:24px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.30),transparent 35%),linear-gradient(160deg,#28ffe8,#00bda9);color:#001513;box-shadow:0 0 22px rgba(0,240,213,.25)}.wallet-hero>span{font-size:12px;font-weight:700}.wallet-hero>div{margin-top:9px;display:flex;align-items:center;justify-content:center;gap:9px}.wallet-hero strong{font-size:34px;letter-spacing:-1px}.wallet-hero em{font-style:normal;font-size:13px;font-weight:800}.wallet-hero p{margin-top:9px;font-size:11px;font-weight:600}.wallet-list{margin-top:14px;padding:4px 16px}.wallet-item{display:flex;align-items:center;gap:13px;min-height:76px}.wallet-item+.wallet-item{border-top:1px solid rgba(255,255,255,.06)}.wallet-item>span{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--cyan);background:rgba(0,240,213,.08)}.wallet-item svg{width:25px}.wallet-item div{display:flex;flex-direction:column;gap:6px}.wallet-item small{color:#818891;font-size:11px}.wallet-item strong{font-size:13px}
.withdraw-form{display:block}.form-card{padding:18px}.form-card h3{display:flex;align-items:center;gap:8px;color:#fff;font-size:16px;margin-bottom:13px}.form-card h3 svg{width:21px;color:var(--cyan)}.convert-row{height:58px;margin-top:14px;padding:0 14px;border-radius:13px;display:flex;align-items:center;justify-content:space-between;background:rgba(0,240,213,.07);border:1px solid rgba(0,240,213,.13)}.convert-row span{color:#888f97;font-size:12px}.convert-row strong{color:var(--cyan);font-size:14px}.rules-card{padding:16px;margin-top:13px}.rules-card h4{display:flex;align-items:center;gap:8px;color:var(--cyan);font-size:14px}.rules-card h4 svg{width:19px}.rules-card p{margin-top:8px;color:#848b94;font-size:12px;line-height:1.55}
.profile-hero{padding:26px 18px 20px;border:1px solid rgba(0,240,213,.32);border-radius:24px;text-align:center;background:radial-gradient(circle at 50% 14%,rgba(0,240,213,.16),transparent 30%),linear-gradient(145deg,rgba(4,17,21,.98),rgba(0,5,7,.99));box-shadow:inset 0 0 30px rgba(0,240,213,.04)}.profile-avatar-wrap{width:104px;height:104px;margin:0 auto 15px;position:relative}.profile-avatar{position:absolute;inset:0;width:104px;height:104px;border-radius:50%;object-fit:cover;border:2px solid var(--cyan);box-shadow:0 0 0 6px rgba(0,240,213,.07),0 0 28px rgba(0,240,213,.25)}.profile-avatar-fallback{display:grid;place-items:center;color:#001310;font-size:31px;font-weight:800;background:linear-gradient(145deg,#42ffe9,#00bdaa)}.profile-avatar[hidden],.profile-avatar-fallback[hidden]{display:none!important}.profile-online{position:absolute;right:5px;bottom:7px;width:20px;height:20px;border:4px solid #031014;border-radius:50%;background:#21df86;box-shadow:0 0 10px rgba(33,223,134,.8)}.profile-hero h3{font-size:22px}.profile-hero>p{margin-top:7px;color:#8e969e;font-size:13px}.profile-balance{margin-top:20px;padding:17px 12px;border:1px solid rgba(0,240,213,.17);border-radius:17px;background:rgba(0,10,12,.72)}.profile-balance>span{display:block;color:#8b949c;font-size:10px;font-weight:700;letter-spacing:1.4px}.profile-balance>div{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}.profile-balance strong{color:var(--cyan2);font-size:29px}.profile-balance em{color:var(--cyan);font-size:12px;font-style:normal;font-weight:700}.telegram-profile-btn{width:100%;height:48px;margin-top:14px;border:1px solid var(--cyan);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--cyan);background:rgba(0,240,213,.07);font-size:12px;font-weight:800}.telegram-profile-btn svg{width:19px}.profile-info-card{margin-top:13px;padding:5px 16px;border:1px solid rgba(87,159,168,.17);border-radius:19px;background:linear-gradient(145deg,rgba(4,16,20,.96),rgba(1,8,10,.98))}.profile-info-row{min-height:72px;display:flex;align-items:center;gap:13px;border-bottom:1px solid rgba(255,255,255,.06)}.profile-info-row:last-child{border-bottom:0}.profile-info-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;color:var(--cyan);background:rgba(0,240,213,.08);border:1px solid rgba(0,240,213,.13)}.profile-info-icon svg{width:22px}.profile-info-row>div{min-width:0;display:flex;flex-direction:column;gap:6px}.profile-info-row small{color:#7f8790;font-size:10px}.profile-info-row strong{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eef8f8;font-size:13px;font-weight:600}
.bottom-nav{position:fixed;z-index:50;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,520px);height:82px;padding:8px 3px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:rgba(0,0,0,.97);border:1px solid rgba(255,255,255,.13);border-bottom:0;border-radius:28px 28px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.6);backdrop-filter:blur(16px)}.nav-item{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#6f727c;background:transparent}.nav-item svg{width:23px;height:23px;stroke-width:1.8}.nav-item span{font-size:7px;font-weight:600;white-space:nowrap}.nav-item.active{color:var(--cyan)}.nav-item.active svg{filter:drop-shadow(0 0 6px rgba(0,240,213,.48))}.toast{position:fixed;z-index:1000;left:50%;bottom:96px;transform:translate(-50%,18px);max-width:88%;padding:12px 17px;border-radius:12px;color:#fff;background:#082127;border:1px solid rgba(0,240,213,.35);box-shadow:0 12px 30px rgba(0,0,0,.55);font-size:12px;font-weight:600;text-align:center;opacity:0;visibility:hidden;transition:.22s}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:430px){.balance-number>span{font-size:34px}.mining-art{width:145px;height:145px;right:-4px;top:49px}.stat-box{gap:7px}.stat-box svg{width:23px}.stat-box span{font-size:8px}.stat-box strong{font-size:11px}.wallet-hero strong{font-size:29px}.nav-item svg{width:22px;height:22px}.nav-item span{font-size:6.5px}}
@media(max-width:365px){.balance-number>span{font-size:29px}.balance-number em{min-width:48px;font-size:9px}.mining-art{width:126px;height:126px;top:58px}.balance-panel{padding-left:17px}.profile-info-row strong{max-width:220px}.profile-balance strong{font-size:25px}}

/* VÍ COIN + VND */
.wallet-balance-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wallet-balance-card{min-height:150px;padding:18px 14px;border:1px solid rgba(0,240,213,.18);border-radius:20px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,rgba(5,21,25,.98),rgba(1,8,10,.99));box-shadow:inset 0 0 24px rgba(0,240,213,.04)}.wallet-balance-card small{margin-top:13px;color:#8c969d;font-size:9px;font-weight:700;letter-spacing:1.1px}.wallet-balance-card>div{margin-top:8px;display:flex;align-items:flex-end;gap:7px;min-width:0}.wallet-balance-card strong{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--cyan2);font-size:25px;line-height:1;font-weight:800;letter-spacing:-.8px}.wallet-balance-card em{padding-bottom:2px;color:var(--cyan);font-size:10px;font-style:normal;font-weight:800}.wallet-balance-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--cyan);background:rgba(0,240,213,.09);border:1px solid rgba(0,240,213,.14)}.wallet-balance-icon svg{width:23px}.vnd-balance-card{border-color:rgba(91,255,166,.2);background:linear-gradient(145deg,rgba(5,25,20,.98),rgba(1,10,8,.99))}.vnd-balance-card .wallet-balance-icon{color:#62f7a8;background:rgba(70,239,152,.09);border-color:rgba(70,239,152,.16)}.vnd-balance-card strong,.vnd-balance-card em{color:#62f7a8}
.exchange-card{margin-top:13px;padding:18px}.exchange-title{display:flex;align-items:center;gap:12px;margin-bottom:17px}.exchange-title>span{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;color:var(--cyan);background:rgba(0,240,213,.08);border:1px solid rgba(0,240,213,.14)}.exchange-title svg{width:24px}.exchange-title h3{font-size:17px}.exchange-title p{margin-top:6px;color:#818b92;font-size:11px}.exchange-title b{color:var(--cyan);font-weight:600}.exchange-card label{display:block;margin:13px 0 7px;color:#c7cbd0;font-size:12px;font-weight:600}.readonly-field{color:#62f7a8!important;background:rgba(26,72,52,.16)!important;border-color:rgba(98,247,168,.2)!important;font-weight:700}.exchange-arrow{height:35px;display:grid;place-items:center;color:var(--cyan)}.exchange-arrow svg{width:21px}.exchange-card .primary-btn{height:50px;margin-top:14px;border-radius:13px;font-size:12px}.exchange-card .primary-btn svg{width:18px}
.withdraw-balance-banner{margin-bottom:14px;padding:23px 18px;border:1px solid rgba(98,247,168,.23);border-radius:22px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(98,247,168,.12),transparent 48%),linear-gradient(145deg,rgba(5,25,20,.98),rgba(1,9,8,.99));box-shadow:0 0 18px rgba(54,220,137,.06)}.withdraw-balance-banner>span{color:#88a69a;font-size:10px;font-weight:700;letter-spacing:1.4px}.withdraw-balance-banner>div{margin-top:10px;display:flex;align-items:flex-end;justify-content:center;gap:8px}.withdraw-balance-banner strong{color:#62f7a8;font-size:36px;line-height:1;font-weight:800;letter-spacing:-1px}.withdraw-balance-banner em{padding-bottom:3px;color:#62f7a8;font-size:12px;font-style:normal;font-weight:800}.withdraw-balance-banner p{margin-top:11px;color:#7e8d88;font-size:11px;line-height:1.5}
@media(max-width:380px){.wallet-balance-grid{gap:8px}.wallet-balance-card{min-height:140px;padding:15px 11px}.wallet-balance-card strong{font-size:21px}.wallet-balance-card em{font-size:8px}.exchange-card{padding:15px}.withdraw-balance-banner strong{font-size:31px}}

/* ĐIỂM DANH 7 NGÀY + NÂNG CẤP MÁY ĐÀO */
.miner-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.miner-card-head .card-kicker{margin:0}.miner-upgrade-btn{height:36px;padding:0 10px;border:1px solid rgba(0,240,213,.38);border-radius:11px;display:flex;align-items:center;justify-content:center;gap:5px;color:#001411;background:linear-gradient(180deg,#3affe8,#00cdb9);font-size:9px;font-weight:800;box-shadow:0 0 13px rgba(0,240,213,.16)}.miner-upgrade-btn svg{width:15px;height:15px}.miner-upgrade-btn b{padding:4px 6px;border-radius:7px;color:var(--cyan);background:#032126;font-size:9px}.miner-upgrade-btn:active{transform:scale(.97)}.miner-upgrade-btn:disabled{opacity:.55;cursor:not-allowed}.miner-upgrade-meta{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;gap:8px;color:#7f8a91;font-size:10px}.miner-upgrade-meta span{display:flex;align-items:center;gap:5px}.miner-upgrade-meta svg{width:14px;color:var(--cyan)}.miner-upgrade-meta strong{color:#b9c7c9;font-size:10px}.miner-upgrade-meta b{color:var(--cyan)}
.checkin-card{margin-top:13px;padding:17px}.checkin-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.checkin-title{display:flex;align-items:center;gap:11px;min-width:0}.checkin-title>div{min-width:0}.checkin-title small{display:block;color:var(--cyan);font-size:8px;font-weight:800;letter-spacing:1.1px}.checkin-title h3{margin-top:4px;font-size:16px}.checkin-icon{width:44px;height:44px;flex:0 0 44px;border:1px solid rgba(0,240,213,.18);border-radius:13px;display:grid;place-items:center;color:var(--cyan);background:radial-gradient(circle,rgba(0,240,213,.17),transparent 70%),#06161a}.checkin-icon svg{width:23px}.checkin-streak{flex:0 0 auto;padding:7px 8px;border:1px solid rgba(0,240,213,.18);border-radius:9px;color:var(--cyan);background:rgba(0,240,213,.07);font-size:8px;font-weight:800}.checkin-desc{margin-top:13px;color:#849097;font-size:10.5px;line-height:1.55}.checkin-desc b{color:#dbe9e9}.checkin-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:14px}.checkin-day{min-width:0;height:84px;padding:8px 4px;border:1px solid rgba(255,255,255,.07);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(3,12,15,.92);color:#69737a}.checkin-day:nth-child(7){grid-column:span 2}.checkin-day>span{font-size:7px;font-weight:800}.checkin-day svg{width:18px;height:18px;margin:6px 0 4px}.checkin-day strong{font-size:12px}.checkin-day small{margin-top:2px;font-size:7px}.checkin-day.current{border-color:rgba(0,240,213,.68);color:var(--cyan);background:radial-gradient(circle at 50% 35%,rgba(0,240,213,.14),transparent 65%),rgba(3,18,21,.98);box-shadow:0 0 12px rgba(0,240,213,.12)}.checkin-day.claimed{border-color:rgba(71,243,157,.25);color:#5ff0a2;background:rgba(14,45,33,.28)}.checkin-day.lucky{border-color:rgba(255,205,67,.22);color:#ffd45d;background:radial-gradient(circle at 50% 30%,rgba(255,202,54,.10),transparent 70%),rgba(20,16,5,.82)}.checkin-day.lucky.current{border-color:rgba(255,205,67,.65);box-shadow:0 0 14px rgba(255,205,67,.12)}.checkin-day.lucky.claimed{color:#ffd45d}.checkin-btn{width:100%;height:44px;margin-top:12px;border:1px solid rgba(0,240,213,.45);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;color:#001411;background:linear-gradient(180deg,#35ffe8,#00d1bd);font-size:11px;font-weight:800;box-shadow:0 0 15px rgba(0,240,213,.13)}.checkin-btn svg{width:18px}.checkin-btn:active{transform:scale(.985)}.checkin-btn:disabled{color:#6d777b;background:#091519;border-color:rgba(255,255,255,.08);box-shadow:none;cursor:not-allowed}
@media(max-width:380px){.miner-upgrade-btn{padding:0 8px}.miner-upgrade-meta{align-items:flex-start;flex-direction:column}.checkin-card{padding:14px}.checkin-days{gap:5px}.checkin-day{height:79px}.checkin-desc{font-size:10px}}


/* REFERRAL 3 TẦNG */
.referral-hero-card{padding:19px;border:1px solid rgba(0,240,213,.24);border-radius:22px;background:radial-gradient(circle at 12% 0,rgba(0,240,213,.16),transparent 36%),linear-gradient(145deg,rgba(4,19,23,.98),rgba(1,8,10,.99));box-shadow:0 15px 35px rgba(0,0,0,.28)}
.referral-hero-top{display:flex;gap:13px;align-items:flex-start}.referral-hero-icon{width:48px;height:48px;flex:0 0 48px;border:1px solid rgba(0,240,213,.28);border-radius:15px;display:grid;place-items:center;color:var(--cyan);background:rgba(0,240,213,.08)}.referral-hero-icon svg{width:25px}.referral-hero-top small,.referral-section-title small{display:block;color:var(--cyan);font-size:8px;font-weight:800;letter-spacing:1.25px}.referral-hero-top h3{margin-top:4px;font-size:19px}.referral-hero-top p{margin-top:7px;color:#879398;font-size:10.5px;line-height:1.55}.referral-hero-top p b{color:#e7f4f4}
.referral-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:17px}.referral-summary-grid>div{min-width:0;padding:12px 5px;border:1px solid rgba(255,255,255,.07);border-radius:12px;text-align:center;background:rgba(2,12,15,.75)}.referral-summary-grid strong{display:block;color:#fff;font-size:17px;overflow:hidden;text-overflow:ellipsis}.referral-summary-grid span{display:block;margin-top:5px;color:#718087;font-size:7px;font-weight:700;text-transform:uppercase}
.referral-invite-card,.referral-condition-card,.referral-tree-card,.referral-list-card{margin-top:13px;padding:17px}.invite-card-title,.referral-section-title{display:flex;align-items:center;gap:11px;margin-bottom:15px}.invite-card-title>span,.referral-section-title>span{width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(0,240,213,.2);border-radius:13px;display:grid;place-items:center;color:var(--cyan);background:#06171b}.invite-card-title svg,.referral-section-title svg{width:21px}.invite-card-title h3,.referral-section-title h3{font-size:15px}.invite-card-title p{margin-top:4px;color:#7f8a90;font-size:9.5px;line-height:1.45}.referral-invite-card label{display:block;margin-bottom:7px;color:#aab5b7;font-size:10px}.referral-share-btn{margin-top:11px}.invite-note{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px;color:#7c8a8f;font-size:9px}.invite-note svg{width:14px;color:#ffd35c}
.ref-condition-list{display:grid;gap:9px}.ref-condition-list>div{padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:13px;display:flex;align-items:center;gap:11px;background:rgba(2,12,15,.7)}.ref-condition-list>div>span{width:29px;height:29px;flex:0 0 29px;border-radius:9px;display:grid;place-items:center;color:#001612;background:var(--cyan);font-size:12px;font-weight:900}.ref-condition-list strong{display:block;font-size:12px}.ref-condition-list small{display:block;margin-top:4px;color:#77868c;font-size:9px;line-height:1.45}
.referral-tree{display:flex;flex-direction:column;align-items:center}.tree-owner{display:flex;align-items:center;gap:8px;color:#fff}.tree-owner>span{width:40px;height:40px;border:1px solid rgba(0,240,213,.3);border-radius:50%;display:grid;place-items:center;color:var(--cyan);background:rgba(0,240,213,.08)}.tree-owner svg{width:20px}.tree-owner strong{font-size:12px;letter-spacing:1px}.tree-line{width:2px;height:19px;background:linear-gradient(var(--cyan),rgba(0,240,213,.18))}
.tree-level{width:100%;padding:13px 14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;text-align:center;background:rgba(2,12,15,.82)}.tree-level>b{display:inline-block;padding:4px 7px;border-radius:7px;color:#001814;background:var(--cyan);font-size:7px}.tree-level>strong{display:block;margin-top:7px;font-size:13px}.tree-level>span{display:block;margin-top:5px;color:#839095;font-size:9px;line-height:1.45}.tree-level em{color:var(--cyan);font-style:normal;font-weight:800}.tree-level.level-two{border-color:rgba(78,160,255,.2)}.tree-level.level-two>b{background:#61a9ff}.tree-level.level-two em{color:#78b6ff}.tree-level.level-three{border-color:rgba(255,206,83,.2)}.tree-level.level-three>b{background:#ffd45d}.tree-level.level-three em{color:#ffd45d}
.referral-example{margin-top:13px;padding:11px;border:1px solid rgba(255,210,70,.16);border-radius:12px;display:flex;gap:9px;align-items:flex-start;background:rgba(38,29,5,.35)}.referral-example svg{width:18px;flex:0 0 18px;color:#ffd45d}.referral-example p{color:#9a9789;font-size:9px;line-height:1.55}.referral-example b{color:#fff}
.referral-reward-breakdown{margin-top:12px;border-top:1px solid rgba(255,255,255,.06);padding-top:9px}.referral-reward-breakdown>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;color:#7e8a8f;font-size:9px}.referral-reward-breakdown strong{color:#e8f5f5;font-size:10px}
.referral-user-list{display:grid;gap:9px}.referral-empty{min-height:120px;border:1px dashed rgba(0,240,213,.18);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#68767c}.referral-empty svg{width:30px;color:var(--cyan)}.referral-empty p{margin-top:8px;font-size:10px}.referral-user{padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(2,12,15,.78)}.referral-user.qualified{border-color:rgba(70,243,155,.22)}.referral-user-main{display:flex;align-items:center;gap:9px}.referral-user-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;color:var(--cyan);background:rgba(0,240,213,.08)}.referral-user-avatar svg{width:19px}.referral-user-main>div{min-width:0;flex:1}.referral-user-main strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.referral-user-main small{display:block;margin-top:3px;color:#6f7c82;font-size:8px}.referral-user-main>b{padding:5px 6px;border-radius:7px;color:#ffd45d;background:rgba(255,210,70,.08);font-size:7px}.referral-user.qualified .referral-user-main>b{color:#56eca0;background:rgba(60,230,145,.08)}
.referral-user-steps{display:flex;gap:7px;margin-top:9px}.referral-user-steps span{flex:1;padding:7px 5px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:4px;color:#7c888d;background:rgba(255,255,255,.035);font-size:7px}.referral-user-steps span.done{color:#59e99e;background:rgba(58,229,143,.07)}.referral-user-steps svg{width:12px}
@media(max-width:380px){.referral-summary-grid{grid-template-columns:repeat(2,1fr)}.referral-hero-card,.referral-invite-card,.referral-condition-card,.referral-tree-card,.referral-list-card{padding:14px}.referral-user-steps{flex-direction:column}}

/* ===== TASK CENTER: NHIỆM VỤ / VƯỢT LINK ===== */
.task-page-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px
}
.task-page-tab{
    min-width:0;
    min-height:76px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:12px;
    border-radius:17px;
    color:#8d959d;
    background:rgba(4,17,20,.86);
    border:1px solid rgba(255,255,255,.07);
    text-align:left;
    transition:.2s ease
}
.task-page-tab.active{
    color:#fff;
    border-color:rgba(0,240,213,.5);
    background:linear-gradient(145deg,rgba(0,240,213,.14),rgba(3,18,22,.96));
    box-shadow:0 0 24px rgba(0,240,213,.08)
}
.task-page-tab-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#7f898f;
    background:rgba(255,255,255,.04)
}
.task-page-tab.active .task-page-tab-icon{
    color:var(--cyan);
    background:rgba(0,240,213,.11)
}
.task-page-tab-icon svg{
    width:20px
}
.task-page-tab-copy{
    min-width:0
}
.task-page-tab-copy strong{
    display:block;
    font-size:12px;
    letter-spacing:.35px
}
.task-page-tab-copy small{
    display:block;
    margin-top:5px;
    color:#6f7880;
    font-size:9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.task-page-tab.active .task-page-tab-copy small{
    color:#8ba09e
}
.task-page-tab>b{
    min-width:25px;
    height:25px;
    display:grid;
    place-items:center;
    padding:0 6px;
    border-radius:999px;
    color:#7d888d;
    background:rgba(255,255,255,.05);
    font-size:10px
}
.task-page-tab.active>b{
    color:#001512;
    background:var(--cyan)
}
.task-tab-panel{
    display:none
}
.task-tab-panel.active{
    display:block
}
.task-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
    padding:15px 16px;
    border-radius:17px;
    background:linear-gradient(145deg,rgba(0,240,213,.08),rgba(3,15,18,.9));
    border:1px solid rgba(0,240,213,.14)
}
.task-panel-head small{
    display:block;
    color:var(--cyan);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.1px
}
.task-panel-head h3{
    margin-top:5px;
    font-size:15px
}
.task-panel-head>span{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:var(--cyan);
    background:rgba(0,240,213,.09)
}
.task-panel-head>span svg{
    width:22px
}
.link-panel-head{
    background:linear-gradient(145deg,rgba(120,92,255,.12),rgba(3,15,18,.92));
    border-color:rgba(142,115,255,.2)
}
.link-panel-head small,
.link-panel-head>span{
    color:#a997ff
}
.link-panel-head>span{
    background:rgba(142,115,255,.1)
}
.link-task-guide{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
    padding:14px;
    border-radius:16px;
    color:#aeb4ba;
    background:rgba(12,10,27,.72);
    border:1px solid rgba(142,115,255,.16)
}
.link-task-guide>span{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#a997ff;
    background:rgba(142,115,255,.11)
}
.link-task-guide svg{
    width:19px
}
.link-task-guide strong{
    display:block;
    color:#fff;
    font-size:12px
}
.link-task-guide p{
    margin-top:5px;
    color:#7f858d;
    font-size:10px;
    line-height:1.55
}
.link-task-card{
    border-color:rgba(142,115,255,.2)
}
.link-task-card .task-icon{
    color:#a997ff;
    background:rgba(142,115,255,.1)
}
.task-actions-single{
    grid-template-columns:1fr
}
.link-task-open{
    color:#fff;
    background:linear-gradient(135deg,#755cff,#a997ff);
    border:0
}
@media(max-width:390px){
    .task-page-tab{
        grid-template-columns:34px minmax(0,1fr);
        min-height:72px;
        padding:10px
    }
    .task-page-tab>b{
        display:none
    }
    .task-page-tab-icon{
        width:34px;
        height:34px
    }
}

/* ===== LINK TASK SOURCE ===== */
.link-source-card{
    position:relative;
    overflow:hidden;
    padding:16px;
    border-radius:20px;
    background:radial-gradient(circle at 92% 8%,rgba(138,112,255,.16),transparent 34%),linear-gradient(145deg,rgba(8,19,24,.98),rgba(4,10,14,.98));
    border:1px solid rgba(148,126,255,.22);
    box-shadow:0 18px 44px rgba(0,0,0,.2)
}
.link-source-card+.link-source-card{margin-top:12px}
.link-source-top{
    display:grid;
    grid-template-columns:46px minmax(0,1fr) auto;
    align-items:center;
    gap:12px
}
.link-source-number{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:15px;
    color:#aa9bff;
    background:rgba(139,112,255,.12);
    border:1px solid rgba(160,140,255,.22)
}
.link-source-number svg{width:23px}
.link-source-copy{min-width:0}
.link-source-copy small{
    display:block;
    color:#9184e8;
    font-size:8px;
    font-weight:800;
    letter-spacing:1.1px
}
.link-source-copy strong{
    display:block;
    margin-top:4px;
    color:#fff;
    font-size:15px
}
.link-source-copy span{
    display:block;
    margin-top:5px;
    color:#7f8a91;
    font-size:10px
}
.link-source-copy b{color:#00f0d5}
.link-source-reward{
    min-width:54px;
    padding:9px 8px;
    border-radius:13px;
    text-align:center;
    background:rgba(0,240,213,.08);
    border:1px solid rgba(0,240,213,.16)
}
.link-source-reward strong{
    display:block;
    color:#00f0d5;
    font-size:17px;
    line-height:1
}
.link-source-reward span{
    display:block;
    margin-top:4px;
    color:#78a7a1;
    font-size:7px;
    font-weight:800;
    letter-spacing:.7px
}
.link-source-progress{
    margin-top:15px;
    padding:12px;
    border-radius:15px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.055)
}
.link-progress-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}
.link-progress-head>span{
    color:#7c878d;
    font-size:9px;
    font-weight:700
}
.link-progress-head>strong{
    color:#fff;
    font-size:13px
}
.link-progress-head small{
    color:#667178;
    font-size:8px;
    font-weight:600
}
.link-progress-track{
    height:7px;
    margin-top:9px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.06)
}
.link-progress-track>span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#765cff,#00f0d5);
    box-shadow:0 0 14px rgba(0,240,213,.3);
    transition:width .3s ease
}
.link-start-btn{
    width:100%;
    min-height:48px;
    margin-top:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(135deg,#7056ff,#9d8cff);
    font-size:11px;
    font-weight:850;
    letter-spacing:.35px;
    box-shadow:0 12px 24px rgba(93,69,230,.2)
}
.link-start-btn svg{width:18px}
.link-start-btn:disabled{
    color:#70777c;
    background:#11191d;
    box-shadow:none
}
.link-source-note{
    margin:10px 2px 0;
    display:flex;
    align-items:flex-start;
    gap:6px;
    color:#69747a;
    font-size:8px;
    line-height:1.45
}
.link-source-note svg{
    width:13px;
    flex:0 0 13px;
    color:#00cdb8
}

/* ===== LINK REWARD MODAL ===== */
.link-reward-modal{
    position:fixed;
    inset:0;
    z-index:2500;
    display:grid;
    place-items:center;
    padding:22px;
    background:rgba(0,0,0,.74);
    backdrop-filter:blur(12px);
    opacity:0;
    transition:opacity .22s ease
}
.link-reward-modal.show{opacity:1}
.link-reward-modal[hidden]{display:none!important}
.link-reward-dialog{
    position:relative;
    width:min(360px,100%);
    overflow:hidden;
    padding:29px 22px 22px;
    border-radius:26px;
    text-align:center;
    background:radial-gradient(circle at 50% -8%,rgba(0,240,213,.22),transparent 38%),linear-gradient(155deg,#08191b,#040b0d);
    border:1px solid rgba(0,240,213,.32);
    box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 40px rgba(0,240,213,.08);
    transform:translateY(16px) scale(.96);
    transition:transform .22s ease
}
.link-reward-modal.show .link-reward-dialog{transform:translateY(0) scale(1)}
.link-reward-icon{
    width:68px;
    height:68px;
    margin:0 auto 15px;
    display:grid;
    place-items:center;
    border-radius:22px;
    color:#001411;
    background:linear-gradient(145deg,#00f0d5,#75ffe9);
    box-shadow:0 0 28px rgba(0,240,213,.3)
}
.link-reward-icon svg{
    width:32px;
    height:32px
}
.link-reward-dialog>small{
    color:#00f0d5;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.4px
}
.link-reward-dialog h3{
    margin:6px 0 0;
    color:#fff;
    font-size:23px
}
.link-reward-coin{
    margin:17px auto 13px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:7px
}
.link-reward-coin strong{
    color:#00f0d5;
    font-size:48px;
    line-height:.9;
    text-shadow:0 0 22px rgba(0,240,213,.22)
}
.link-reward-coin span{
    color:#89a49f;
    font-size:11px;
    font-weight:850;
    letter-spacing:1px
}
.link-reward-dialog p{
    margin:0 auto;
    max-width:280px;
    color:#8d989a;
    font-size:11px;
    line-height:1.6
}
.link-reward-dialog button{
    width:100%;
    min-height:48px;
    margin-top:19px;
    border:0;
    border-radius:15px;
    color:#00130f;
    background:linear-gradient(135deg,#00f0d5,#6fffe8);
    font-size:11px;
    font-weight:900;
    letter-spacing:.55px
}
.link-reward-burst span{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:2px;
    background:#00f0d5;
    opacity:.7
}
.link-reward-burst span:nth-child(1){left:28px;top:34px;transform:rotate(22deg)}
.link-reward-burst span:nth-child(2){right:32px;top:52px;transform:rotate(45deg);background:#9a83ff}
.link-reward-burst span:nth-child(3){left:54px;top:92px;transform:rotate(70deg);background:#ffd760}
.link-reward-burst span:nth-child(4){right:56px;top:108px;transform:rotate(12deg)}

/* ===== ATDARK SECURITY WARNING ===== */
.security-warning-modal{
    position:fixed;
    inset:0;
    z-index:3000;
    display:grid;
    place-items:center;
    padding:22px;
    background:rgba(0,0,0,.8);
    backdrop-filter:blur(14px);
    opacity:0;
    transition:opacity .22s ease
}
.security-warning-modal.show{
    opacity:1
}
.security-warning-modal[hidden]{
    display:none!important
}
.security-warning-dialog{
    width:min(390px,100%);
    padding:27px 22px 20px;
    border-radius:26px;
    text-align:center;
    background:
        radial-gradient(circle at 50% -12%,rgba(255,76,76,.2),transparent 38%),
        linear-gradient(155deg,#151014,#07090b);
    border:1px solid rgba(255,83,83,.32);
    box-shadow:
        0 30px 90px rgba(0,0,0,.7),
        0 0 42px rgba(255,71,71,.08);
    transform:translateY(16px) scale(.96);
    transition:transform .22s ease
}
.security-warning-modal.show .security-warning-dialog{
    transform:translateY(0) scale(1)
}
.security-warning-icon{
    width:70px;
    height:70px;
    margin:0 auto 15px;
    display:grid;
    place-items:center;
    border-radius:23px;
    color:#fff;
    background:
        linear-gradient(
            145deg,
            #ff4545,
            #ff7b63
        );
    box-shadow:
        0 0 28px
        rgba(255,69,69,.3)
}
.security-warning-icon svg{
    width:33px;
    height:33px
}
.security-warning-dialog>small{
    display:block;
    color:#ff7d70;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.5px
}
.security-warning-dialog h3{
    margin:7px 0 0;
    color:#fff;
    font-size:21px;
    line-height:1.25
}
.security-warning-dialog>p{
    margin:12px auto 0;
    max-width:320px;
    color:#a8a1a4;
    font-size:11px;
    line-height:1.65
}
.security-warning-info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:17px
}
.security-warning-info>div{
    padding:12px;
    border-radius:15px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07)
}
.security-warning-info span{
    display:block;
    color:#777175;
    font-size:8px;
    font-weight:750;
    letter-spacing:.7px
}
.security-warning-info strong{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:12px
}
.security-warning-info b{
    color:#ff786c
}
.security-warning-note{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-top:12px;
    padding:12px;
    border-radius:15px;
    text-align:left;
    background:rgba(255,94,80,.06);
    border:1px solid rgba(255,94,80,.12)
}
.security-warning-note svg{
    width:16px;
    flex:0 0 16px;
    color:#ff796d
}
.security-warning-note span{
    color:#8f888c;
    font-size:9px;
    line-height:1.55
}
.security-retry-btn,
.security-close-btn{
    width:100%;
    min-height:48px;
    border:0;
    border-radius:15px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.45px
}
.security-retry-btn{
    margin-top:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#190300;
    background:
        linear-gradient(
            135deg,
            #ff6658,
            #ff9c73
        );
    box-shadow:
        0 12px 25px
        rgba(255,87,72,.18)
}
.security-retry-btn svg{
    width:17px
}
.security-close-btn{
    margin-top:8px;
    color:#8d878a;
    background:#111416;
    border:1px solid rgba(255,255,255,.06)
}



/* ===== SECURITY MODAL KHÓA CỨNG ===== */
body.security-locked{
    overflow:hidden!important;
    touch-action:none
}
body.security-locked .app-shell,
body.security-locked .bottom-nav{
    pointer-events:none!important;
    user-select:none!important
}
body.security-locked .security-warning-modal,
body.security-locked .security-warning-modal *{
    pointer-events:auto!important
}
.security-warning-modal{
    overscroll-behavior:contain
}
.security-warning-dialog{
    user-select:none
}
.security-retry-btn:disabled{
    opacity:.72;
    cursor:wait
}
.security-retry-btn:disabled svg{
    animation:securitySpin .8s linear infinite
}
.security-close-btn{
    display:none!important
}
@keyframes securitySpin{
    to{transform:rotate(360deg)}
}

/* ===== GIFTCODE YOUTUBE PROMO ===== */
.youtube-gift-card{
    overflow:hidden;
    margin-bottom:14px;
    border-radius:22px;
    background:linear-gradient(150deg,rgba(10,17,22,.99),rgba(3,8,11,.99));
    border:1px solid rgba(255,55,55,.22);
    box-shadow:0 18px 48px rgba(0,0,0,.24),0 0 28px rgba(255,37,37,.04)
}
.youtube-gift-image-wrap{
    position:relative;
    overflow:hidden;
    aspect-ratio:1290/412;
    background:#080b0d
}
.youtube-gift-image{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover
}
.youtube-gift-image-wrap:after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:55%;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(4,9,12,.88))
}
.youtube-gift-live{
    position:absolute;
    z-index:2;
    left:12px;
    bottom:11px;
    display:flex;
    align-items:center;
    gap:6px;
    min-height:27px;
    padding:0 10px;
    border-radius:999px;
    color:#fff;
    background:rgba(255,25,25,.92);
    border:1px solid rgba(255,255,255,.24);
    box-shadow:0 7px 20px rgba(255,0,0,.22);
    font-size:8px;
    font-weight:900;
    letter-spacing:.55px;
    backdrop-filter:blur(8px)
}
.youtube-gift-live svg{
    width:14px;
    height:14px;
    fill:currentColor
}
.youtube-gift-content{
    padding:18px 17px 17px
}
.youtube-gift-kicker{
    display:flex;
    align-items:center;
    gap:6px;
    color:#ff6b61;
    font-size:9px;
    font-weight:900;
    letter-spacing:1px
}
.youtube-gift-kicker svg{
    width:14px
}
.youtube-gift-content h3{
    margin-top:8px;
    color:#fff;
    font-size:19px;
    line-height:1.3
}
.youtube-gift-content>p{
    margin-top:9px;
    color:#929a9f;
    font-size:11px;
    line-height:1.65
}
.youtube-gift-benefits{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:14px
}
.youtube-gift-benefits span{
    min-height:29px;
    display:flex;
    align-items:center;
    gap:5px;
    padding:0 9px;
    border-radius:999px;
    color:#c7ced1;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
    font-size:8px;
    font-weight:750
}
.youtube-gift-benefits svg{
    width:13px;
    color:#00f0d5
}
.youtube-subscribe-btn{
    width:100%;
    min-height:50px;
    margin-top:15px;
    display:grid;
    grid-template-columns:22px minmax(0,1fr) 18px;
    align-items:center;
    gap:9px;
    padding:0 15px;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(135deg,#ff1f1f,#d90000);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 12px 27px rgba(221,0,0,.22);
    text-decoration:none;
    font-size:11px;
    font-weight:900;
    letter-spacing:.45px;
    transition:transform .16s ease,filter .16s ease
}
.youtube-subscribe-btn:active{
    transform:scale(.985)
}
.youtube-subscribe-btn:hover{
    filter:brightness(1.08)
}
.youtube-subscribe-btn svg:first-child{
    width:22px;
    height:22px;
    fill:currentColor
}
.youtube-subscribe-btn svg:last-child{
    width:17px;
    justify-self:end
}
.youtube-gift-note{
    display:flex;
    align-items:flex-start;
    gap:6px;
    margin-top:10px;
    color:#6f777b;
    font-size:8px;
    line-height:1.5
}
.youtube-gift-note svg{
    width:13px;
    flex:0 0 13px;
    color:#ff665d
}
.gift-redeem-card{
    position:relative;
    overflow:hidden
}
.gift-redeem-card:before{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-70px;
    top:-70px;
    border-radius:50%;
    background:rgba(0,240,213,.07);
    filter:blur(5px);
    pointer-events:none
}
.gift-redeem-kicker{
    position:relative;
    display:block;
    margin:-4px 0 7px;
    color:#00f0d5;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.2px
}
.gift-redeem-card .primary-btn svg{
    width:18px
}
@media(max-width:390px){
    .youtube-gift-content h3{font-size:17px}
    .youtube-gift-content{padding:16px 14px 15px}
    .youtube-gift-benefits{gap:5px}
    .youtube-gift-benefits span{padding:0 7px;font-size:7px}
}

/* ===== LUCKY WHEEL FLOATING BUBBLE ===== */
.lucky-wheel-bubble{
    position:fixed;
    right:14px;
    bottom:calc(76px + env(safe-area-inset-bottom));
    z-index:1150;
    width:66px;
    height:66px;
    padding:0;
    border:1px solid rgba(0,240,213,.5);
    border-radius:50%;
    overflow:visible;
    color:#fff;
    background:#030b0d;
    box-shadow:
        0 12px 32px rgba(0,0,0,.55),
        0 0 24px rgba(0,240,213,.22);
    animation:luckyBubbleFloat 2.8s ease-in-out infinite
}
.lucky-wheel-bubble::after{
    content:"";
    position:absolute;
    inset:-5px;
    border:1px solid rgba(0,240,213,.25);
    border-radius:50%;
    animation:luckyBubblePulse 1.8s ease-out infinite
}
.lucky-wheel-bubble-glow{
    position:absolute;
    inset:-12px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,240,213,.2),transparent 68%);
    pointer-events:none
}
.lucky-wheel-bubble img{
    position:absolute;
    inset:5px;
    width:calc(100% - 10px);
    height:calc(100% - 10px);
    border-radius:50%;
    object-fit:cover;
    pointer-events:none
}
.lucky-wheel-bubble small{
    position:absolute;
    left:50%;
    bottom:-8px;
    transform:translateX(-50%);
    padding:3px 8px;
    border-radius:999px;
    color:#00120f;
    background:#00f0d5;
    font-size:7px;
    font-weight:950;
    letter-spacing:.8px;
    box-shadow:0 4px 12px rgba(0,240,213,.25)
}
.lucky-wheel-bubble-badge{
    position:absolute;
    top:-5px;
    right:-3px;
    z-index:2;
    min-width:22px;
    height:22px;
    display:grid;
    place-items:center;
    padding:0 5px;
    border:2px solid #03090b;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,#ff4d5f,#ff8a57);
    font-size:9px;
    font-weight:900
}
@keyframes luckyBubbleFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-6px)}
}
@keyframes luckyBubblePulse{
    0%{opacity:.8;transform:scale(.9)}
    100%{opacity:0;transform:scale(1.18)}
}

/* ===== LUCKY WHEEL MODAL ===== */
body.lucky-wheel-open{
    overflow:hidden
}
.lucky-wheel-modal{
    position:fixed;
    inset:0;
    z-index:2200;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:18px 12px calc(18px + env(safe-area-inset-bottom));
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(14px);
    opacity:0;
    transition:opacity .22s ease
}
.lucky-wheel-modal[hidden]{
    display:none!important
}
.lucky-wheel-modal.show{
    opacity:1
}
.lucky-wheel-panel{
    position:relative;
    width:min(440px,100%);
    max-height:calc(100vh - 24px);
    overflow:auto;
    padding:23px 16px 20px;
    border-radius:28px;
    background:
        radial-gradient(circle at 50% -7%,rgba(0,240,213,.18),transparent 32%),
        radial-gradient(circle at 88% 14%,rgba(124,83,255,.13),transparent 25%),
        linear-gradient(160deg,#071416,#020708 78%);
    border:1px solid rgba(0,240,213,.25);
    box-shadow:
        0 30px 100px rgba(0,0,0,.75),
        0 0 46px rgba(0,240,213,.08);
    transform:translateY(24px) scale(.97);
    transition:transform .24s ease
}
.lucky-wheel-modal.show .lucky-wheel-panel{
    transform:translateY(0) scale(1)
}
.lucky-wheel-close{
    position:absolute;
    top:13px;
    right:13px;
    z-index:5;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    color:#899397;
    background:rgba(255,255,255,.035)
}
.lucky-wheel-close svg{
    width:18px
}
.lucky-wheel-head{
    padding:0 38px;
    text-align:center
}
.lucky-wheel-head>span{
    display:block;
    color:#00f0d5;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.6px
}
.lucky-wheel-head h2{
    margin:6px 0 0;
    color:#fff;
    font-size:25px;
    line-height:1.15
}
.lucky-wheel-head p{
    margin:8px auto 0;
    max-width:330px;
    color:#7d898c;
    font-size:10px;
    line-height:1.55
}
.lucky-wheel-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:15px
}
.lucky-wheel-meta>div{
    padding:11px 12px;
    border-radius:15px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.06)
}
.lucky-wheel-meta small{
    display:block;
    color:#667277;
    font-size:7px;
    font-weight:850;
    letter-spacing:.9px
}
.lucky-wheel-meta strong{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:12px
}
.lucky-wheel-meta b{
    color:#00f0d5;
    font-size:17px
}
.lucky-wheel-stage{
    position:relative;
    width:min(86vw,360px);
    aspect-ratio:1;
    margin:22px auto 8px;
    display:grid;
    place-items:center
}
.lucky-wheel-pointer{
    position:absolute;
    top:-6px;
    left:50%;
    z-index:10;
    width:50px;
    height:58px;
    display:grid;
    place-items:center;
    transform:translateX(-50%);
    color:#001410;
    filter:drop-shadow(0 0 12px rgba(0,240,213,.7))
}
.lucky-wheel-pointer::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:34px;
    height:44px;
    transform:translateX(-50%);
    clip-path:polygon(50% 100%,0 0,100% 0);
    background:linear-gradient(180deg,#8ffff0,#00f0d5 65%,#009b8b);
    border-radius:7px
}
.lucky-wheel-pointer svg{
    display:none
}
.lucky-wheel-frame{
    position:relative;
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:
        radial-gradient(circle,#12262a 0 52%,#041012 53% 65%,#00f0d5 66% 67%,#071114 68% 78%,#1e3940 79% 83%,#020607 84%);
    box-shadow:
        inset 0 0 30px rgba(255,255,255,.07),
        0 0 0 3px rgba(0,240,213,.12),
        0 0 35px rgba(0,240,213,.2),
        0 22px 45px rgba(0,0,0,.55)
}
.lucky-wheel-frame::before,
.lucky-wheel-frame::after{
    content:"";
    position:absolute;
    inset:4%;
    z-index:3;
    border-radius:50%;
    pointer-events:none
}
.lucky-wheel-frame::before{
    border:2px solid rgba(0,240,213,.55);
    box-shadow:
        inset 0 0 12px rgba(0,240,213,.2),
        0 0 13px rgba(0,240,213,.22)
}
.lucky-wheel-frame::after{
    inset:13%;
    border:2px solid rgba(255,255,255,.14)
}
.lucky-wheel-disc{
    position:absolute;
    inset:9%;
    z-index:2;
    border-radius:50%;
    background:
        repeating-conic-gradient(
            from -18deg,
            rgba(224,255,252,.82) 0deg 1deg,
            transparent 1deg 36deg
        ),
        conic-gradient(
            from -18deg,
            #087b72 0deg 36deg,
            #0b3d86 36deg 72deg,
            #075f5d 72deg 108deg,
            #0b4ca4 108deg 144deg,
            #087c72 144deg 180deg,
            #34227b 180deg 216deg,
            #2b1b70 216deg 252deg,
            #0c55a8 252deg 288deg,
            #4e1f88 288deg 324deg,
            #805900 324deg 360deg
        );
    box-shadow:
        inset 0 0 24px rgba(0,0,0,.65),
        inset 0 0 0 5px rgba(1,8,10,.6),
        0 0 24px rgba(0,240,213,.15);
    will-change:transform;
    transform:rotate(0deg)
}
.lucky-wheel-disc::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 36% 25%,rgba(255,255,255,.16),transparent 18%),
        radial-gradient(circle,transparent 0 54%,rgba(0,0,0,.12) 70%,rgba(0,0,0,.45) 100%);
    pointer-events:none
}
.lucky-wheel-disc::after{
    content:"";
    position:absolute;
    inset:41%;
    z-index:5;
    border-radius:50%;
    background:radial-gradient(circle,#0f4950,#031012 68%);
    border:3px solid rgba(0,240,213,.58);
    box-shadow:
        0 0 0 8px rgba(2,10,12,.85),
        0 0 18px rgba(0,240,213,.28)
}
.wheel-label{
    position:absolute;
    top:50%;
    left:50%;
    z-index:4;
    width:66px;
    min-height:34px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transform:
        translate(-50%,-50%)
        rotate(var(--angle))
        translateY(-104px)
        rotate(var(--counter));
    color:#fff;
    text-align:center;
    text-shadow:
        0 2px 3px rgba(0,0,0,.8),
        0 0 8px rgba(255,255,255,.18);
    pointer-events:none
}
.wheel-label b{
    display:block;
    font-size:13px;
    line-height:1;
    font-weight:950
}
.wheel-label em{
    display:block;
    margin-top:3px;
    color:#d8ffff;
    font-size:7px;
    line-height:1.05;
    font-style:normal;
    font-weight:850;
    letter-spacing:.35px
}
.wheel-label-0{
    width:72px
}
.wheel-label-0 b{
    font-size:10px
}
.wheel-label-0 em{
    font-size:8px
}
.wheel-label-8{
    color:#f2d5ff
}
.wheel-label-9{
    color:#ffe69b
}
.lucky-wheel-center{
    position:absolute;
    z-index:8;
    width:82px;
    height:82px;
    display:grid;
    place-items:center;
    border:6px solid #071316;
    border-radius:50%;
    color:#00120f;
    background:
        radial-gradient(circle at 35% 27%,#b8fff7,#00f0d5 45%,#008e80 100%);
    box-shadow:
        0 0 0 2px rgba(0,240,213,.72),
        0 0 28px rgba(0,240,213,.36);
    font-size:16px;
    font-weight:950;
    letter-spacing:1px
}
.lucky-wheel-center:disabled{
    filter:grayscale(.72);
    opacity:.72
}
.lucky-wheel-center.is-spinning{
    animation:luckyCenterPulse .7s ease-in-out infinite alternate
}
@keyframes luckyCenterPulse{
    from{transform:scale(.94)}
    to{transform:scale(1.04)}
}
.lucky-wheel-result{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:13px;
    padding:13px;
    border-radius:17px;
    background:linear-gradient(135deg,rgba(0,240,213,.09),rgba(110,77,255,.08));
    border:1px solid rgba(0,240,213,.2);
    opacity:0;
    transform:translateY(8px);
    transition:.22s ease
}
.lucky-wheel-result[hidden]{
    display:none!important
}
.lucky-wheel-result.show{
    opacity:1;
    transform:translateY(0)
}
.lucky-wheel-result-icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#001410;
    background:#00f0d5
}
.lucky-wheel-result-icon svg{
    width:22px
}
.lucky-wheel-result div{
    min-width:0
}
.lucky-wheel-result small{
    display:block;
    color:#6f918d;
    font-size:7px;
    font-weight:850;
    letter-spacing:.9px
}
.lucky-wheel-result strong{
    display:block;
    margin-top:4px;
    color:#fff;
    font-size:16px
}
.lucky-wheel-result p{
    margin:4px 0 0;
    color:#80908f;
    font-size:9px;
    line-height:1.45
}
.lucky-wheel-spin-btn{
    width:100%;
    min-height:50px;
    margin-top:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:16px;
    color:#001410;
    background:linear-gradient(135deg,#00f0d5,#78ffe9);
    box-shadow:0 12px 28px rgba(0,240,213,.18);
    font-size:11px;
    font-weight:950;
    letter-spacing:.6px
}
.lucky-wheel-spin-btn svg{
    width:18px
}
.lucky-wheel-spin-btn:disabled{
    color:#667173;
    background:#11191b;
    box-shadow:none
}
.lucky-wheel-spin-btn:disabled svg{
    animation:luckySpinIcon 1s linear infinite
}
@keyframes luckySpinIcon{
    to{transform:rotate(360deg)}
}
.lucky-wheel-note{
    margin:10px 4px 0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:6px;
    color:#637174;
    font-size:8px;
    line-height:1.45;
    text-align:center
}
.lucky-wheel-note svg{
    width:13px;
    flex:0 0 13px;
    color:#00cdb8
}
@media(max-width:390px){
    .lucky-wheel-bubble{
        right:10px;
        width:60px;
        height:60px
    }
    .lucky-wheel-stage{
        width:min(88vw,330px)
    }
    .wheel-label{
        transform:
            translate(-50%,-50%)
            rotate(var(--angle))
            translateY(-94px)
            rotate(var(--counter))
    }
    .wheel-label b{
        font-size:11px
    }
    .wheel-label em{
        font-size:6px
    }
    .lucky-wheel-center{
        width:72px;
        height:72px
    }
}

/* =========================================================
   THANH MENU MỞ RỘNG V2
   MŨI TÊN -> MENU CHÍNH -> 4 TIỆN ÍCH Ở BÊN DƯỚI
   ========================================================= */

.bottom-nav{
    display:block;
    height:82px;
    padding:0;
    overflow:visible;
    background:transparent;
    border:0;
    border-radius:28px 28px 0 0;
    box-shadow:none;
    transition:
        height .42s cubic-bezier(.2,.82,.25,1)
}

.bottom-nav.expanded{
    height:218px
}

/*
|--------------------------------------------------------------------------
| HÀNG MENU CHÍNH
|--------------------------------------------------------------------------
|
| Khi thu gọn:
| - Hàng chính nằm sát đáy màn hình.
|
| Khi mở:
| - Toàn bộ khung cao lên.
| - Hàng chính đi lên trên.
| - Hàng Nạp Tiền / Game hiện ở bên dưới.
|
*/

.bottom-nav-main{
    position:absolute;
    z-index:5;
    top:0;
    left:0;
    right:0;
    height:82px;
    padding:
        8px
        3px
        calc(8px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:
        repeat(
            7,
            minmax(0,1fr)
        );
    border:1px solid rgba(255,255,255,.13);
    border-bottom:0;
    border-radius:28px 28px 0 0;
    background:
        linear-gradient(
            180deg,
            rgba(8,11,13,.985),
            rgba(0,0,0,.995)
        );
    box-shadow:
        0 -8px 24px rgba(0,0,0,.62);
    backdrop-filter:blur(18px);
    transition:
        border-color .3s ease,
        box-shadow .3s ease
}

.bottom-nav.expanded .bottom-nav-main{
    border-color:rgba(0,240,213,.2);
    box-shadow:
        0 -15px 34px rgba(0,0,0,.72),
        0 0 24px rgba(0,240,213,.05)
}

/*
|--------------------------------------------------------------------------
| MŨI TÊN CHÍNH GIỮA, NGAY TRÊN MỜI BẠN
|--------------------------------------------------------------------------
*/

.nav-expand-toggle{
    position:absolute;
    z-index:15;
    top:-22px;
    left:50%;
    width:50px;
    height:40px;
    display:grid;
    place-items:center;
    transform:translateX(-50%);
    border:1px solid rgba(255,255,255,.15);
    border-bottom:0;
    border-radius:23px 23px 8px 8px;
    color:#a1a7ae;
    background:
        linear-gradient(
            180deg,
            #121719,
            #050708
        );
    box-shadow:
        0 -9px 22px rgba(0,0,0,.58);
    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease
}

.nav-expand-toggle::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-8px;
    width:78px;
    height:13px;
    transform:translateX(-50%);
    background:#06090a;
    pointer-events:none
}

.nav-expand-toggle svg{
    position:relative;
    z-index:3;
    width:20px;
    height:20px;
    stroke-width:2.3;
    transition:
        transform .4s cubic-bezier(.2,.82,.25,1),
        filter .25s ease
}

.nav-expand-glow{
    position:absolute;
    inset:4px 8px;
    border-radius:18px;
    opacity:0;
    background:
        radial-gradient(
            circle,
            rgba(0,240,213,.24),
            transparent 70%
        );
    transition:opacity .25s ease
}

.bottom-nav.expanded .nav-expand-toggle{
    color:var(--cyan);
    border-color:rgba(0,240,213,.38);
    background:
        linear-gradient(
            180deg,
            #0b2523,
            #04100f
        )
}

.bottom-nav.expanded .nav-expand-toggle svg{
    transform:rotate(180deg);
    filter:
        drop-shadow(
            0 0 8px
            rgba(0,240,213,.65)
        )
}

.bottom-nav.expanded .nav-expand-glow{
    opacity:1
}

/*
|--------------------------------------------------------------------------
| 4 TIỆN ÍCH NẰM BÊN DƯỚI MENU CHÍNH
|--------------------------------------------------------------------------
*/

.bottom-nav-extra{
    position:absolute;
    z-index:4;
    top:78px;
    left:0;
    right:0;
    height:140px;
    padding:
        8px
        12px
        calc(10px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:8px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:
        translateY(-18px)
        scaleY(.78);
    transform-origin:top center;
    border:1px solid rgba(255,255,255,.11);
    border-top:1px solid rgba(0,240,213,.12);
    border-bottom:0;
    border-radius:0;
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(0,240,213,.075),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            rgba(5,9,11,.995),
            rgba(0,0,0,.998)
        );
    box-shadow:
        0 15px 30px rgba(0,0,0,.35);
    transition:
        opacity .24s ease,
        visibility .24s ease,
        transform .42s cubic-bezier(.2,.82,.25,1)
}

.bottom-nav.expanded .bottom-nav-extra{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:
        translateY(0)
        scaleY(1)
}

.extra-nav-divider{
    width:1px;
    height:38px;
    display:block;
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,.16),
            transparent
        )
}

.extra-nav-item{
    min-width:0;
    min-height:54px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:16px;
    color:#8d969c;
    background:rgba(255,255,255,.022);
    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        transform .22s ease,
        box-shadow .22s ease
}

.extra-nav-item:active{
    transform:scale(.97)
}

.extra-nav-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    border-radius:12px
}

.extra-nav-icon svg{
    width:19px;
    height:19px
}

.extra-nav-icon.deposit{
    color:#ffdd7a;
    border:1px solid rgba(255,195,72,.2);
    background:
        linear-gradient(
            145deg,
            rgba(255,193,72,.17),
            rgba(255,193,72,.045)
        )
}

.extra-nav-icon.game{
    color:#b9a5ff;
    border:1px solid rgba(126,91,255,.22);
    background:
        linear-gradient(
            145deg,
            rgba(126,91,255,.2),
            rgba(126,91,255,.045)
        )
}

.extra-nav-icon.buy-worker{
    color:#ffb85e;
    border:1px solid rgba(255,151,54,.24);
    background:
        linear-gradient(
            145deg,
            rgba(255,151,54,.19),
            rgba(255,151,54,.045)
        )
}

.extra-nav-icon.rent-worker{
    color:#62e9b2;
    border:1px solid rgba(68,224,164,.24);
    background:
        linear-gradient(
            145deg,
            rgba(68,224,164,.18),
            rgba(68,224,164,.04)
        )
}

.extra-nav-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px
}

.extra-nav-copy strong{
    color:#d9dfe1;
    font-size:10px;
    line-height:1;
    font-weight:850;
    white-space:nowrap
}

.extra-nav-copy small{
    color:#697378;
    font-size:6px;
    line-height:1;
    font-weight:850;
    letter-spacing:.7px;
    white-space:nowrap
}

.extra-nav-item.active{
    color:#fff;
    border-color:rgba(0,240,213,.32);
    background:
        linear-gradient(
            135deg,
            rgba(0,240,213,.105),
            rgba(126,91,255,.07)
        );
    box-shadow:
        0 7px 18px rgba(0,0,0,.24),
        inset 0 0 16px rgba(0,240,213,.035)
}

.extra-nav-item.active .extra-nav-icon{
    color:var(--cyan);
    border-color:rgba(0,240,213,.4);
    box-shadow:
        0 0 16px rgba(0,240,213,.1)
}

.extra-nav-item.active .extra-nav-copy strong{
    color:#fff
}

.extra-nav-item.active .extra-nav-copy small{
    color:var(--cyan)
}

/*
|--------------------------------------------------------------------------
| KHOẢNG TRỐNG NỘI DUNG VÀ BONG BÓNG VÒNG QUAY
|--------------------------------------------------------------------------
*/

body.bottom-nav-expanded .page-wrap{
    padding-bottom:
        calc(
            232px +
            env(safe-area-inset-bottom)
        );
    transition:
        padding-bottom .42s
        cubic-bezier(.2,.82,.25,1)
}

body.bottom-nav-expanded .lucky-wheel-bubble{
    bottom:
        calc(
            213px +
            env(safe-area-inset-bottom)
        )
}

/* =========================================================
   TRANG NẠP TIỀN / GAME / MUA THỢ / THUÊ THỢ
   ========================================================= */

.development-page-card{
    position:relative;
    overflow:hidden;
    margin-top:14px;
    padding:30px 18px 21px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:25px;
    text-align:center;
    background:
        radial-gradient(
            circle at 50% -5%,
            rgba(0,240,213,.15),
            transparent 38%
        ),
        linear-gradient(
            155deg,
            #0b1719,
            #030708 75%
        );
    box-shadow:
        0 20px 46px rgba(0,0,0,.36)
}

.game-development-card{
    background:
        radial-gradient(
            circle at 50% -5%,
            rgba(119,82,255,.19),
            transparent 39%
        ),
        linear-gradient(
            155deg,
            #13101f,
            #030408 75%
        )
}

.worker-page-header .page-header span,
.worker-page-header>div:first-child>span{
    color:#ffbd68
}

.worker-page-icon{
    color:#ffbd68;
    border-color:rgba(255,174,70,.24);
    background:rgba(255,174,70,.08)
}

.rent-worker-header>div:first-child>span{
    color:#62e9b2
}

.rent-worker-icon{
    color:#62e9b2;
    border-color:rgba(68,224,164,.24);
    background:rgba(68,224,164,.08)
}

.buy-worker-development-card{
    background:
        radial-gradient(
            circle at 50% -5%,
            rgba(255,153,47,.19),
            transparent 39%
        ),
        linear-gradient(
            155deg,
            #201207,
            #050403 75%
        )
}

.rent-worker-development-card{
    background:
        radial-gradient(
            circle at 50% -5%,
            rgba(55,224,163,.17),
            transparent 39%
        ),
        linear-gradient(
            155deg,
            #071b15,
            #030605 75%
        )
}

.worker-development-card .development-page-orbit{
    border-color:rgba(255,174,70,.11)
}

.rent-worker-development-card .development-page-orbit{
    border-color:rgba(68,224,164,.11)
}

.worker-development-card .development-page-orbit span{
    background:#ffb85e;
    box-shadow:0 0 12px rgba(255,170,70,.65)
}

.rent-worker-development-card .development-page-orbit span{
    background:#62e9b2;
    box-shadow:0 0 12px rgba(68,224,164,.65)
}

.buy-worker-development-icon{
    color:#2a1300;
    background:linear-gradient(145deg,#ffd08c,#ff962d);
    box-shadow:0 0 31px rgba(255,151,54,.22)
}

.rent-worker-development-icon{
    color:#002117;
    background:linear-gradient(145deg,#9dffd8,#34d99c);
    box-shadow:0 0 31px rgba(68,224,164,.22)
}

.worker-development-badge{
    border-color:rgba(255,174,70,.22);
    color:#ffd08f;
    background:rgba(255,151,54,.075)
}

.rent-worker-development-badge{
    border-color:rgba(68,224,164,.22);
    color:#88f3ca;
    background:rgba(68,224,164,.075)
}

.worker-development-note{
    border-color:rgba(255,174,70,.12)!important;
    background:rgba(255,151,54,.045)!important
}

.worker-development-note>svg{
    color:#ffb85e!important
}

.rent-worker-development-note{
    border-color:rgba(68,224,164,.12)!important;
    background:rgba(68,224,164,.045)!important
}

.rent-worker-development-note>svg{
    color:#62e9b2!important
}

.development-page-orbit{
    position:absolute;
    top:-72px;
    left:50%;
    width:210px;
    height:210px;
    transform:translateX(-50%);
    border:1px solid rgba(0,240,213,.08);
    border-radius:50%;
    pointer-events:none
}

.game-development-card .development-page-orbit{
    border-color:rgba(152,125,255,.1)
}

.development-page-orbit span{
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:
        0 0 12px rgba(0,240,213,.65)
}

.game-development-card .development-page-orbit span{
    background:#a28dff;
    box-shadow:
        0 0 12px rgba(162,141,255,.65)
}

.development-page-orbit span:nth-child(1){
    left:22px;
    top:100px
}

.development-page-orbit span:nth-child(2){
    right:28px;
    top:72px
}

.development-page-orbit span:nth-child(3){
    left:100px;
    bottom:12px
}

.development-page-icon{
    position:relative;
    z-index:2;
    width:76px;
    height:76px;
    margin:0 auto 14px;
    display:grid;
    place-items:center;
    border-radius:25px;
    color:#001512;
    background:
        linear-gradient(
            145deg,
            #91fff1,
            #00d8c2
        );
    box-shadow:
        0 0 31px rgba(0,240,213,.2)
}

.game-development-card .development-page-icon{
    color:#fff;
    background:
        linear-gradient(
            145deg,
            #aa94ff,
            #6749e7
        );
    box-shadow:
        0 0 31px rgba(119,82,255,.24)
}

.development-page-icon svg{
    width:35px;
    height:35px
}

.development-badge{
    width:max-content;
    max-width:100%;
    margin:0 auto;
    padding:7px 11px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid rgba(255,196,72,.2);
    border-radius:999px;
    color:#ffd77c;
    background:rgba(255,190,60,.075);
    font-size:8px;
    font-weight:900;
    letter-spacing:1px
}

.development-badge svg{
    width:13px;
    height:13px
}

.development-page-card h3{
    margin:13px 0 8px;
    color:#fff;
    font-size:20px;
    line-height:1.3
}

.development-page-card>p{
    max-width:365px;
    margin:0 auto;
    color:#7d8a8d;
    font-size:11px;
    line-height:1.7
}

.development-feature-list{
    display:grid;
    gap:8px;
    margin-top:19px;
    text-align:left
}

.development-feature-list>div{
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 12px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:15px;
    background:rgba(255,255,255,.026)
}

.development-feature-list>div>svg{
    width:19px;
    height:19px;
    flex:0 0 19px;
    color:var(--cyan)
}

.game-development-card .development-feature-list>div>svg{
    color:#aa95ff
}

.development-feature-list span{
    min-width:0
}

.development-feature-list strong{
    display:block;
    color:#dce4e5;
    font-size:10px
}

.development-feature-list small{
    display:block;
    margin-top:3px;
    color:#667176;
    font-size:8px
}

.development-note{
    margin-top:13px;
    padding:10px 12px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:7px;
    border:1px dashed rgba(0,240,213,.14);
    border-radius:13px;
    color:#718083;
    background:rgba(0,240,213,.035);
    font-size:8px;
    line-height:1.5
}

.game-development-card .development-note{
    border-color:rgba(162,141,255,.15);
    background:rgba(119,82,255,.04)
}

.development-note svg{
    width:14px;
    height:14px;
    flex:0 0 14px;
    color:var(--cyan)
}

.game-development-card .development-note svg{
    color:#aa95ff
}

@media(max-width:430px){
    .nav-expand-toggle{
        width:46px;
        height:38px
    }

    .bottom-nav-extra{
        padding-left:9px;
        padding-right:9px;
        gap:7px
    }

    .extra-nav-item{
        gap:7px;
        padding-left:7px;
        padding-right:7px
    }

    .extra-nav-icon{
        width:32px;
        height:32px;
        flex-basis:32px
    }

    .extra-nav-copy strong{
        font-size:9px
    }

    .extra-nav-copy small{
        font-size:5.5px;
        letter-spacing:.45px
    }
}

/* =========================================================
   CSKH ATDARK - NÚT HỒ SƠ
   ========================================================= */
.support-entry-btn{
    width:100%;min-height:62px;margin-top:10px;padding:10px 12px;display:grid;
    grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:10px;
    border:1px solid rgba(0,240,213,.16);border-radius:17px;color:#fff;
    background:radial-gradient(circle at 8% 50%,rgba(0,240,213,.12),transparent 33%),linear-gradient(145deg,rgba(11,25,27,.98),rgba(4,10,11,.98));
    box-shadow:0 12px 28px rgba(0,0,0,.24);text-align:left
}
.support-entry-icon{
    width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:#00130f;
    background:linear-gradient(145deg,#83fff0,#00d6bf);box-shadow:0 0 20px rgba(0,240,213,.16)
}
.support-entry-icon svg{width:21px;height:21px}
.support-entry-copy{min-width:0}
.support-entry-copy strong{display:block;color:#fff;font-size:11px}
.support-entry-copy small{display:block;margin-top:4px;color:#758285;font-size:8px}
.support-entry-btn>svg{width:17px;color:#687579}

/* =========================================================
   TRANG CSKH NGƯỜI DÙNG
   ========================================================= */
.support-page-header{
    min-height:63px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;
    align-items:center;gap:10px
}
.support-back-btn{
    width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.075);
    border-radius:13px;color:#d9e0e1;background:rgba(255,255,255,.035)
}
.support-back-btn svg{width:19px}
.support-page-header>div>span{display:block;color:var(--cyan);font-size:7px;font-weight:900;letter-spacing:1.1px}
.support-page-header h2{margin:4px 0 0;color:#fff;font-size:20px}
.support-page-online{
    display:flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid rgba(68,230,151,.17);
    border-radius:999px;color:#85f5ba;background:rgba(68,230,151,.06);font-size:6px;font-weight:900;letter-spacing:.65px
}
.support-page-online i{width:6px;height:6px;border-radius:50%;background:#44e697;box-shadow:0 0 8px rgba(68,230,151,.7)}
.support-user-shell{margin-top:10px}
.support-user-hero{
    padding:15px;display:flex;align-items:center;gap:12px;border:1px solid rgba(0,240,213,.13);
    border-radius:20px;background:radial-gradient(circle at 0 0,rgba(0,240,213,.12),transparent 38%),linear-gradient(145deg,#0b1719,#04090a)
}
.support-user-hero-icon{
    width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:17px;
    color:#00130f;background:linear-gradient(145deg,#8cfff1,#00d6bf)
}
.support-user-hero-icon svg{width:27px;height:27px}
.support-user-hero small{color:var(--cyan);font-size:7px;font-weight:900;letter-spacing:1px}
.support-user-hero h3{margin:5px 0;color:#fff;font-size:14px}
.support-user-hero p{margin:0;color:#758285;font-size:9px;line-height:1.55}
.support-request-panel,.support-waiting-panel,.support-live-panel{
    margin-top:12px;border:1px solid rgba(255,255,255,.075);border-radius:21px;
    background:linear-gradient(155deg,rgba(12,20,23,.99),rgba(3,8,9,.99));box-shadow:0 16px 36px rgba(0,0,0,.28)
}
.support-request-panel{padding:16px}
.support-request-title{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.support-request-title>span{
    width:39px;height:39px;display:grid;place-items:center;border-radius:13px;color:var(--cyan);
    background:rgba(0,240,213,.08);border:1px solid rgba(0,240,213,.12)
}
.support-request-title svg{width:19px}
.support-request-title small{color:#647174;font-size:7px;font-weight:850;letter-spacing:.8px}
.support-request-title h3{margin:4px 0 0;color:#fff;font-size:14px}
.support-request-panel label{display:block;margin-bottom:7px;color:#8d999c;font-size:9px;font-weight:750}
.support-request-note{margin:9px 2px 0;display:flex;align-items:flex-start;gap:6px;color:#657276;font-size:8px;line-height:1.5}
.support-request-note svg{width:13px;flex:0 0 13px;color:var(--cyan)}
.support-request-btn{
    width:100%;min-height:48px;margin-top:13px;display:flex;align-items:center;justify-content:center;gap:8px;
    border:0;border-radius:15px;color:#00130f;background:linear-gradient(135deg,#80fff0,#00d9c2);
    box-shadow:0 11px 25px rgba(0,240,213,.16);font-size:10px;font-weight:950;letter-spacing:.5px
}
.support-request-btn svg{width:17px}
.support-request-btn:disabled{opacity:.68}
.support-request-btn:disabled svg{animation:supportSpin 1s linear infinite}
@keyframes supportSpin{to{transform:rotate(360deg)}}
.support-waiting-panel{padding:25px 17px 18px;text-align:center}
.support-waiting-animation{
    width:76px;height:76px;margin:0 auto 13px;display:flex;align-items:center;justify-content:center;gap:5px;
    border:1px solid rgba(0,240,213,.15);border-radius:25px;background:radial-gradient(circle,rgba(0,240,213,.13),rgba(0,240,213,.025))
}
.support-waiting-animation i{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:supportWaitingDot 1.1s ease-in-out infinite}
.support-waiting-animation i:nth-child(2){animation-delay:.15s}
.support-waiting-animation i:nth-child(3){animation-delay:.3s}
@keyframes supportWaitingDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-7px)}}
.support-waiting-panel>small{color:var(--cyan);font-size:7px;font-weight:900;letter-spacing:1px}
.support-waiting-panel h3{margin:7px 0 13px;color:#fff;font-size:18px}
.support-queue-number{
    width:150px;margin:0 auto 12px;padding:11px;border:1px solid rgba(255,196,72,.15);
    border-radius:16px;background:rgba(255,196,72,.05)
}
.support-queue-number span{display:block;color:#9d885b;font-size:6px;font-weight:850;letter-spacing:.8px}
.support-queue-number strong{display:block;margin-top:3px;color:#ffd26c;font-size:26px}
.support-waiting-panel>p{margin:0 auto;max-width:330px;color:#788588;font-size:10px;line-height:1.65}
.support-waiting-info{
    margin-top:14px;padding:9px 10px;display:flex;align-items:flex-start;justify-content:center;gap:6px;
    border-radius:12px;color:#667276;background:rgba(255,255,255,.025);font-size:8px;line-height:1.5
}
.support-waiting-info svg{width:13px;flex:0 0 13px;color:#8f9b9d}
.support-live-panel{overflow:hidden}
.support-live-header{
    min-height:70px;padding:12px 13px;display:grid;grid-template-columns:43px minmax(0,1fr) auto;
    align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.065);
    background:linear-gradient(90deg,rgba(0,240,213,.065),transparent)
}
.support-agent-avatar{
    position:relative;width:43px;height:43px;display:grid;place-items:center;border-radius:50%;
    color:#00130f;background:linear-gradient(145deg,#87fff0,#25ccb9);font-weight:950
}
.support-agent-avatar i{
    position:absolute;right:0;bottom:1px;width:10px;height:10px;border:2px solid #081012;
    border-radius:50%;background:#48e593
}
.support-live-header small{color:#637174;font-size:6px;font-weight:850;letter-spacing:.7px}
.support-live-header h3{margin:3px 0 2px;color:#fff;font-size:13px}
.support-live-header p{margin:0;color:#65dcae;font-size:8px}
.support-live-header>span{padding:5px 7px;border-radius:999px;color:#64e9b0;background:rgba(68,230,151,.07);font-size:6px;font-weight:900;letter-spacing:.6px}
.support-user-messages{
    height:min(50vh,430px);min-height:310px;overflow:auto;padding:15px 12px;
    background:radial-gradient(circle at 50% 0,rgba(0,240,213,.035),transparent 38%),#05090a
}
.support-user-message-row{display:flex;margin:8px 0}
.support-user-message-row.user{justify-content:flex-end}
.support-user-message-row.admin{justify-content:flex-start}
.support-user-message-row.system{justify-content:center}
.support-user-message-bubble{max-width:80%;padding:9px 11px 7px;border-radius:15px;color:#dbe3e4;background:#1b2527}
.support-user-message-row.user .support-user-message-bubble{color:#00130f;background:linear-gradient(135deg,#83fff0,#18d7c1)}
.support-user-message-row.system .support-user-message-bubble{
    max-width:91%;border:1px solid rgba(0,240,213,.12);color:#bdcac9;background:rgba(0,240,213,.055);text-align:center
}
.support-user-message-bubble p{margin:0;white-space:pre-wrap;word-break:break-word;font-size:10px;line-height:1.55}
.support-user-message-bubble small{display:block;margin-top:5px;color:#69777a;font-size:7px;text-align:right}
.support-user-message-row.user .support-user-message-bubble small{color:rgba(0,40,35,.55)}
.support-user-chat-empty{padding:45px 15px;color:#667376;text-align:center;font-size:9px}
.support-user-composer{
    padding:10px;display:grid;grid-template-columns:minmax(0,1fr) 43px;gap:8px;
    border-top:1px solid rgba(255,255,255,.065);background:#0b1113
}
.support-user-composer textarea{
    width:100%;min-height:43px;max-height:110px;resize:none;padding:12px;border:1px solid rgba(255,255,255,.08);
    border-radius:14px;outline:0;color:#fff;background:#151e20;font:inherit;font-size:10px
}
.support-user-composer textarea:focus{border-color:rgba(0,240,213,.3)}
.support-user-composer button{width:43px;height:43px;display:grid;place-items:center;border:0;border-radius:14px;color:#00130f;background:var(--cyan)}
.support-user-composer button svg{width:18px}
.support-live-note{margin:0;padding:9px 11px 11px;color:#586568;background:#0b1113;font-size:7px;line-height:1.5;text-align:center}

/* =========================================================
   CSKH V2 - KẾT THÚC LIVE CHAT, CHỜ BẤM ĐÃ HIỂU
   ========================================================= */

.support-user-composer[hidden],
.support-live-note[hidden],
.support-ended-notice[hidden]{
    display:none!important
}

.support-live-panel.ended{
    border-color:rgba(255,196,72,.2);
    box-shadow:0 16px 38px rgba(0,0,0,.3)
}

.support-live-panel.ended .support-live-header{
    background:linear-gradient(90deg,rgba(255,196,72,.075),transparent)
}

.support-live-panel.ended .support-agent-avatar{
    color:#2b1c00;
    background:linear-gradient(145deg,#ffe39a,#ffc24c)
}

.support-live-panel.ended .support-agent-avatar i{
    background:#ffc857;
    box-shadow:0 0 8px rgba(255,200,87,.6)
}

.support-live-panel.ended .support-live-header p{
    color:#e8bd61
}

.support-live-panel.ended .support-live-header>span{
    color:#ffd57d;
    background:rgba(255,196,72,.09)
}

.support-ended-notice{
    padding:19px 15px 16px;
    border-top:1px solid rgba(255,196,72,.14);
    text-align:center;
    background:
        radial-gradient(circle at 50% 0,rgba(255,196,72,.1),transparent 48%),
        linear-gradient(180deg,#11100b,#090b0c)
}

.support-ended-icon{
    width:54px;
    height:54px;
    margin:0 auto 10px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,196,72,.22);
    border-radius:18px;
    color:#2d1b00;
    background:linear-gradient(145deg,#ffe293,#ffc34e);
    box-shadow:0 0 24px rgba(255,196,72,.12)
}

.support-ended-icon svg{
    width:27px;
    height:27px
}

.support-ended-notice>small{
    display:block;
    color:#ffc857;
    font-size:7px;
    font-weight:950;
    letter-spacing:1px
}

.support-ended-notice h3{
    margin:7px 0;
    color:#fff;
    font-size:17px
}

.support-ended-notice p{
    max-width:340px;
    margin:0 auto;
    color:#7f898c;
    font-size:9px;
    line-height:1.65
}

.support-ended-notice button{
    width:100%;
    min-height:48px;
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:15px;
    color:#211400;
    background:linear-gradient(135deg,#ffe293,#ffc34e);
    box-shadow:0 11px 26px rgba(255,196,72,.13);
    font-size:10px;
    font-weight:950;
    letter-spacing:.55px
}

.support-ended-notice button svg{
    width:18px;
    height:18px
}

.support-ended-notice button:disabled{
    cursor:not-allowed;
    opacity:.65
}

.support-ended-notice button:disabled svg{
    animation:supportEndedSpin .9s linear infinite
}

@keyframes supportEndedSpin{
    to{transform:rotate(360deg)}
}

/* =========================================================
   ATDARK GAME CENTER V1
   HỒ SƠ BÊN TRÁI - COIN/VND BÊN PHẢI - TRANG CHỌN GAME
   ========================================================= */

#page-game{
    padding-bottom:8px
}

.game-lobby-topbar{
    min-height:70px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    margin-bottom:12px
}

.game-lobby-user{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px
}

.game-lobby-avatar-wrap{
    position:relative;
    width:48px;
    height:48px;
    flex:0 0 48px
}

.game-lobby-avatar,
.game-lobby-avatar-fallback{
    position:absolute;
    inset:0;
    width:48px;
    height:48px;
    overflow:hidden;
    border:1px solid rgba(0,240,213,.24);
    border-radius:16px;
    color:#001511;
    background:linear-gradient(145deg,#8affef,#00d8c1);
    box-shadow:0 0 22px rgba(0,240,213,.12);
    font-size:13px;
    font-weight:950
}

.game-lobby-avatar{
    display:block;
    object-fit:cover
}

.game-lobby-avatar-fallback{
    display:grid;
    place-items:center
}

/*
|--------------------------------------------------------------------------
| FIX AVATAR GAME
|--------------------------------------------------------------------------
|
| Trước đây ảnh thật và avatar chữ có thể cùng hiển thị.
| Avatar chữ bị đẩy xuống dưới, tạo thêm một ô vuông xanh chồng lên Hero.
|
| Bản V2 ép phần tử có thuộc tính hidden phải ẩn tuyệt đối.
|
*/

.game-lobby-avatar[hidden],
.game-lobby-avatar-fallback[hidden]{
    display:none!important
}

.game-user-online-dot{
    position:absolute;
    right:-2px;
    bottom:-1px;
    width:11px;
    height:11px;
    border:2px solid #020707;
    border-radius:50%;
    background:#4ce6a0;
    box-shadow:0 0 9px rgba(76,230,160,.7)
}

.game-lobby-user-copy{
    min-width:0
}

.game-lobby-user-copy small{
    display:block;
    color:var(--cyan);
    font-size:6px;
    font-weight:950;
    letter-spacing:1px
}

.game-lobby-user-copy strong{
    display:block;
    max-width:145px;
    margin-top:4px;
    overflow:hidden;
    color:#fff;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px
}

.game-lobby-user-copy span{
    display:block;
    max-width:145px;
    margin-top:3px;
    overflow:hidden;
    color:#69777b;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:7px
}

.game-lobby-balances{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px
}

.game-balance-chip{
    min-width:76px;
    min-height:45px;
    padding:7px 8px;
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(15,24,27,.98),rgba(5,10,12,.98));
    box-shadow:0 8px 22px rgba(0,0,0,.2)
}

.game-balance-chip.coin{
    border-color:rgba(0,240,213,.15)
}

.game-balance-chip.vnd{
    border-color:rgba(255,200,87,.15)
}

.game-balance-icon{
    width:29px;
    height:29px;
    flex:0 0 29px;
    display:grid;
    place-items:center;
    border-radius:10px
}

.game-balance-chip.coin .game-balance-icon{
    color:#00130f;
    background:linear-gradient(145deg,#7cfff0,#00d6bf)
}

.game-balance-chip.vnd .game-balance-icon{
    color:#261700;
    background:linear-gradient(145deg,#ffe28f,#ffc34e)
}

.game-balance-icon svg{
    width:16px;
    height:16px
}

.game-balance-copy{
    min-width:0
}

.game-balance-copy small{
    display:block;
    color:#647277;
    font-size:5.5px;
    font-weight:900;
    letter-spacing:.7px
}

.game-balance-copy strong{
    display:block;
    max-width:80px;
    margin-top:3px;
    overflow:hidden;
    color:#fff;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9px
}

.game-lobby-hero{
    position:relative;
    min-height:142px;
    padding:20px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    overflow:hidden;
    border:1px solid rgba(0,240,213,.13);
    border-radius:23px;
    background:
        radial-gradient(circle at 90% 20%,rgba(98,69,255,.21),transparent 31%),
        radial-gradient(circle at 8% 85%,rgba(0,240,213,.13),transparent 34%),
        linear-gradient(145deg,#0c171a,#05080d 72%);
    box-shadow:0 20px 44px rgba(0,0,0,.31)
}

.game-lobby-hero-copy{
    position:relative;
    z-index:2;
    max-width:260px
}

.game-lobby-hero-copy>span{
    color:var(--cyan);
    font-size:7px;
    font-weight:950;
    letter-spacing:1.25px
}

.game-lobby-hero-copy h2{
    margin:7px 0 7px;
    color:#fff;
    font-size:25px;
    line-height:1.1
}

.game-lobby-hero-copy p{
    margin:0;
    color:#77858a;
    font-size:9px;
    line-height:1.65
}

.game-lobby-hero-icon{
    position:relative;
    z-index:2;
    width:72px;
    height:72px;
    flex:0 0 72px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.11);
    border-radius:25px;
    color:#fff;
    background:linear-gradient(145deg,#7e63ff,#3d27b9);
    box-shadow:0 0 32px rgba(103,74,255,.24)
}

.game-lobby-hero-icon svg{
    width:35px;
    height:35px
}

.game-hero-orb{
    position:absolute;
    border-radius:50%;
    pointer-events:none
}

.game-hero-orb.orb-one{
    right:44px;
    top:-32px;
    width:88px;
    height:88px;
    border:1px solid rgba(145,126,255,.13)
}

.game-hero-orb.orb-two{
    right:12px;
    bottom:-53px;
    width:120px;
    height:120px;
    border:1px solid rgba(0,240,213,.08)
}

.game-lobby-section-head{
    margin:18px 2px 10px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px
}

.game-lobby-section-head small{
    display:block;
    color:#5f6d72;
    font-size:6px;
    font-weight:900;
    letter-spacing:1px
}

.game-lobby-section-head h3{
    margin:4px 0 0;
    color:#fff;
    font-size:15px
}

.game-lobby-count{
    padding:6px 8px;
    border:1px solid rgba(0,240,213,.12);
    border-radius:999px;
    color:#6feede;
    background:rgba(0,240,213,.05);
    font-size:6px;
    font-weight:900;
    letter-spacing:.7px
}

.game-selection-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px
}

.game-selection-card{
    width:100%;
    min-width:0;
    padding:0;
    display:grid;
    grid-template-columns:130px minmax(0,1fr);
    overflow:hidden;
    border:1px solid rgba(0,240,213,.13);
    border-radius:21px;
    color:#fff;
    background:linear-gradient(145deg,#0d171a,#05090b);
    box-shadow:0 16px 36px rgba(0,0,0,.28);
    text-align:left;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease
}

.game-selection-card:active{
    transform:scale(.985)
}

.game-selection-card:hover{
    border-color:rgba(0,240,213,.27);
    box-shadow:0 19px 42px rgba(0,0,0,.34),0 0 24px rgba(0,240,213,.045)
}

.game-card-art{
    position:relative;
    min-height:174px;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle,rgba(0,240,213,.14),transparent 55%),
        linear-gradient(145deg,#0b2527,#060b0e)
}

.game-card-art::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent 65%,rgba(5,9,11,.82));
    pointer-events:none
}

.game-card-art-glow{
    position:absolute;
    width:110px;
    height:110px;
    border-radius:50%;
    background:rgba(0,240,213,.11);
    filter:blur(18px)
}

.game-card-art img{
    position:relative;
    z-index:1;
    width:136px;
    height:136px;
    object-fit:cover;
    border-radius:50%;
    transform:scale(1.16);
    filter:drop-shadow(0 0 18px rgba(0,240,213,.2))
}

.game-card-live-badge{
    position:absolute;
    z-index:3;
    left:9px;
    top:9px;
    padding:5px 7px;
    display:flex;
    align-items:center;
    gap:5px;
    border:1px solid rgba(75,232,157,.15);
    border-radius:999px;
    color:#8affbf;
    background:rgba(7,17,15,.8);
    backdrop-filter:blur(8px);
    font-size:5.5px;
    font-weight:950;
    letter-spacing:.65px
}

.game-card-live-badge i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#4be89d;
    box-shadow:0 0 7px rgba(75,232,157,.75)
}

.game-card-content{
    min-width:0;
    padding:15px 14px 13px;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.game-card-kicker{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:7px
}

.game-card-kicker>span,
.game-card-kicker>b{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:6px;
    font-weight:900;
    letter-spacing:.55px
}

.game-card-kicker>span{
    color:#75f4e4
}

.game-card-kicker>b{
    padding:5px 6px;
    border-radius:999px;
    color:#ffd57a;
    background:rgba(255,196,72,.07)
}

.game-card-kicker svg{
    width:11px;
    height:11px
}

.game-card-kicker em{
    font-style:normal
}

.game-card-content h3{
    margin:10px 0 7px;
    color:#fff;
    font-size:17px;
    line-height:1.2
}

.game-card-content p{
    margin:0;
    color:#718084;
    font-size:8px;
    line-height:1.58
}

.game-card-footer{
    margin-top:14px;
    padding-top:11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-top:1px solid rgba(255,255,255,.055)
}

.game-card-footer>span,
.game-card-footer>strong{
    display:flex;
    align-items:center;
    gap:5px
}

.game-card-footer>span{
    color:#667579;
    font-size:6px;
    font-weight:750
}

.game-card-footer>strong{
    color:#71f6e5;
    font-size:7px;
    font-weight:950;
    letter-spacing:.55px
}

.game-card-footer svg{
    width:12px;
    height:12px
}

@media(max-width:430px){
    .game-lobby-topbar{
        grid-template-columns:minmax(0,1fr) auto;
        gap:7px
    }

    .game-lobby-avatar-wrap,
    .game-lobby-avatar,
    .game-lobby-avatar-fallback{
        width:43px;
        height:43px
    }

    .game-lobby-avatar-wrap{
        flex-basis:43px
    }

    .game-lobby-user-copy strong,
    .game-lobby-user-copy span{
        max-width:105px
    }

    .game-lobby-balances{
        gap:5px
    }

    .game-balance-chip{
        min-width:64px;
        min-height:42px;
        padding:6px
    }

    .game-balance-icon{
        width:25px;
        height:25px;
        flex-basis:25px
    }

    .game-balance-copy strong{
        max-width:54px;
        font-size:8px
    }

    .game-lobby-hero{
        min-height:132px;
        padding:18px 15px
    }

    .game-lobby-hero-copy{
        max-width:220px
    }

    .game-lobby-hero-copy h2{
        font-size:22px
    }

    .game-lobby-hero-icon{
        width:61px;
        height:61px;
        flex-basis:61px;
        border-radius:21px
    }

    .game-lobby-hero-icon svg{
        width:30px;
        height:30px
    }

    .game-selection-card{
        grid-template-columns:110px minmax(0,1fr)
    }

    .game-card-art{
        min-height:168px
    }

    .game-card-art img{
        width:118px;
        height:118px
    }

    .game-card-content{
        padding:13px 11px 12px
    }

    .game-card-content h3{
        font-size:15px
    }

    .game-card-footer>span{
        display:none
    }
}

@media(max-width:350px){
    .game-lobby-user-copy span{
        display:none
    }

    .game-balance-chip{
        min-width:58px
    }

    .game-balance-icon{
        display:none
    }

    .game-selection-card{
        grid-template-columns:96px minmax(0,1fr)
    }

    .game-card-art img{
        width:103px;
        height:103px
    }
}



/* ===== GAME CENTER V2: FIX AVATAR TRÙNG / TRÀN ===== */

.game-lobby-avatar-wrap{
    overflow:visible
}

.game-lobby-user{
    overflow:hidden
}

.game-lobby-user-copy{
    overflow:hidden
}

@media(max-width:430px){
    .game-lobby-avatar,
    .game-lobby-avatar-fallback{
        width:43px;
        height:43px
    }
}

/* =========================================================
   GAME CENTER V3 - AVITOR
   ========================================================= */

.avitor-game{
    border-color:rgba(118,93,255,.25);
    background:
        radial-gradient(circle at 0 50%,rgba(44,118,255,.09),transparent 40%),
        linear-gradient(145deg,#0b1221,#060812)
}

.avitor-game:hover{
    border-color:rgba(144,111,255,.48);
    box-shadow:0 19px 42px rgba(0,0,0,.35),0 0 28px rgba(94,75,255,.1)
}

.avitor-card-art{
    background:
        radial-gradient(circle at 50% 20%,rgba(137,74,255,.26),transparent 48%),
        linear-gradient(180deg,#11194b,#050811)
}

.avitor-card-art::after{
    background:linear-gradient(90deg,transparent 58%,rgba(5,8,17,.9))
}

.avitor-card-art .game-card-art-glow{
    width:140px;
    height:140px;
    background:rgba(89,79,255,.18);
    filter:blur(23px)
}

.avitor-card-art img{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    border-radius:0;
    object-fit:cover;
    object-position:center 43%;
    transform:none;
    filter:saturate(1.08) contrast(1.04)
}

.avitor-live-badge{
    border-color:rgba(164,124,255,.28);
    color:#d5c7ff;
    background:rgba(18,12,42,.84)
}

.avitor-live-badge i{
    background:#9f7cff;
    box-shadow:0 0 8px rgba(159,124,255,.85)
}

.avitor-brand-badge{
    color:#cfc3ff!important;
    background:rgba(113,84,255,.1)!important
}

.avitor-game .game-card-kicker>span,
.avitor-game .game-card-footer>strong{
    color:#b8a8ff
}

.avitor-game .game-card-content h3{
    font-size:19px
}

/* =========================================================
   GAME CENTER V4 - TÀI XỈU
   ========================================================= */

.taixiu-game{
    border-color:rgba(255,193,73,.24);
    background:
        radial-gradient(circle at 0 50%,rgba(255,78,49,.09),transparent 42%),
        linear-gradient(145deg,#21110a,#0d0806)
}

.taixiu-game:hover{
    border-color:rgba(255,204,96,.48);
    box-shadow:0 19px 42px rgba(0,0,0,.35),0 0 28px rgba(255,151,48,.09)
}

.taixiu-card-art{
    background:
        radial-gradient(circle at 50% 20%,rgba(255,190,70,.24),transparent 48%),
        linear-gradient(180deg,#4a160d,#130805)
}

.taixiu-card-art::after{
    background:linear-gradient(90deg,transparent 58%,rgba(17,7,4,.91))
}

.taixiu-card-art .game-card-art-glow{
    width:140px;
    height:140px;
    background:rgba(255,174,56,.17);
    filter:blur(23px)
}

.taixiu-card-art img{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    border-radius:0;
    object-fit:cover;
    object-position:center 43%;
    transform:none;
    filter:saturate(1.08) contrast(1.05)
}

.taixiu-live-badge{
    border-color:rgba(255,205,106,.3);
    color:#ffe1a4;
    background:rgba(48,20,8,.85)
}

.taixiu-live-badge i{
    background:#ffc45a;
    box-shadow:0 0 8px rgba(255,196,90,.88)
}

.taixiu-brand-badge{
    color:#ffd98c!important;
    background:rgba(255,174,56,.1)!important
}

.taixiu-game .game-card-kicker>span,
.taixiu-game .game-card-footer>strong{
    color:#ffca69
}

.taixiu-game .game-card-content h3{
    font-size:19px
}

#page-avitor{
    padding-bottom:10px
}

.avitor-page-header{
    min-height:62px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    margin-bottom:12px
}

.avitor-back-btn{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:13px;
    color:#fff;
    background:rgba(255,255,255,.035)
}

.avitor-back-btn svg{
    width:19px;
    height:19px
}

.avitor-page-header>div>span{
    display:block;
    color:#9e8cff;
    font-size:6.5px;
    font-weight:950;
    letter-spacing:1.05px
}

.avitor-page-header h2{
    margin:4px 0 0;
    color:#fff;
    font-size:20px
}

.avitor-page-badge{
    display:flex;
    align-items:center;
    gap:5px;
    padding:6px 8px;
    border:1px solid rgba(155,122,255,.19);
    border-radius:999px;
    color:#c8b9ff;
    background:rgba(113,84,255,.075);
    font-size:6px;
    font-weight:950;
    letter-spacing:.65px
}

.avitor-page-badge i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#9d7dff;
    box-shadow:0 0 8px rgba(157,125,255,.75)
}

.avitor-showcase{
    position:relative;
    width:100%;
    overflow:hidden;
    border:1px solid rgba(138,105,255,.22);
    border-radius:24px;
    background:#060811;
    box-shadow:0 22px 48px rgba(0,0,0,.38),0 0 32px rgba(91,76,255,.075)
}

.avitor-showcase img{
    display:block;
    width:100%;
    height:auto;
    max-height:70vh;
    object-fit:contain;
    background:radial-gradient(circle at 50% 30%,rgba(96,69,255,.15),transparent 52%),#050711
}

.avitor-showcase::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,transparent 72%,rgba(3,5,12,.24))
}

.avitor-showcase-shine{
    position:absolute;
    z-index:2;
    top:-30%;
    left:-45%;
    width:35%;
    height:160%;
    opacity:.28;
    transform:rotate(18deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    animation:avitorShowcaseShine 4.8s ease-in-out infinite
}

@keyframes avitorShowcaseShine{
    0%,58%{left:-45%;opacity:0}
    66%{opacity:.28}
    100%{left:120%;opacity:0}
}

.avitor-info-panel{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:11px
}

.avitor-info-panel>div{
    min-width:0;
    padding:11px 8px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(18,24,43,.98),rgba(7,10,18,.98));
    text-align:center
}

.avitor-info-panel small{
    display:block;
    color:#66718b;
    font-size:5.5px;
    font-weight:900;
    letter-spacing:.75px
}

.avitor-info-panel strong{
    margin-top:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:#e7e3ff;
    font-size:8px
}

.avitor-info-panel svg{
    width:13px;
    height:13px;
    color:#9d84ff
}

.avitor-intro-card{
    margin-top:11px;
    padding:16px;
    border:1px solid rgba(116,89,255,.15);
    border-radius:19px;
    background:
        radial-gradient(circle at 100% 0,rgba(112,79,255,.12),transparent 37%),
        linear-gradient(145deg,#0d1322,#060811)
}

.avitor-intro-card>span{
    color:#9984ff;
    font-size:6.5px;
    font-weight:950;
    letter-spacing:.9px
}

.avitor-intro-card h3{
    margin:7px 0 7px;
    color:#fff;
    font-size:16px;
    line-height:1.35
}

.avitor-intro-card p{
    margin:0;
    color:#718092;
    font-size:9px;
    line-height:1.65
}

@media(max-width:430px){
    .avitor-card-art img{object-position:center 42%}
    .avitor-showcase{border-radius:20px}
    .avitor-showcase img{max-height:none}
    .avitor-info-panel{gap:6px}
    .avitor-info-panel>div{padding:10px 5px}
    .avitor-info-panel strong{font-size:7px}
}



/* =========================================================
   GAME CENTER V4 - AVITOR HỆ SỐ
   Dùng đúng poster Avitor người dùng cung cấp.
   ========================================================= */

.avitor-card-art img{
    object-fit:cover;
    object-position:center 48%;
    filter:saturate(1.08) contrast(1.05) brightness(.96)
}

.avitor-live-badge{
    border-color:rgba(75,232,157,.24);
    color:#91ffc1;
    background:rgba(5,20,16,.86)
}

.avitor-live-badge i{
    background:#4be89d;
    box-shadow:0 0 8px rgba(75,232,157,.85)
}

.avitor-brand-badge{
    color:#ffd77e!important;
    background:rgba(255,196,72,.08)!important
}

.avitor-game .game-card-kicker>span{
    color:#8da7ff
}

.avitor-game .game-card-footer>strong{
    color:#bdaeff
}

.avitor-game .game-card-content p{
    color:#7f8a9c
}

.avitor-page-badge{
    color:#ffd77f;
    border-color:rgba(255,196,72,.2);
    background:rgba(255,196,72,.07)
}

.avitor-page-badge i{
    background:#ffc857;
    box-shadow:0 0 8px rgba(255,200,87,.75)
}

@media(max-width:430px){
    .avitor-card-art img{
        object-position:center 48%
    }
}

/* ===== WALLET EXCHANGE TWO-WAY V4.9 ===== */
.exchange-card-v2{overflow:hidden}
.exchange-direction-switch{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:2px 0 17px}
.exchange-direction-btn{min-width:0;min-height:68px;padding:10px 9px;border:1px solid rgba(255,255,255,.08);border-radius:15px;display:flex;align-items:center;gap:8px;color:#7f8b90;background:rgba(2,12,15,.78);text-align:left;transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.exchange-direction-btn:active{transform:none}
.exchange-direction-btn.active{color:#fff;border-color:rgba(0,240,213,.48);background:linear-gradient(145deg,rgba(0,240,213,.13),rgba(3,18,22,.97));box-shadow:inset 0 0 18px rgba(0,240,213,.04),0 0 18px rgba(0,240,213,.06)}
.exchange-direction-icon{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:grid;place-items:center;color:#829096;background:rgba(255,255,255,.045)}
.exchange-direction-icon svg{width:17px;height:17px}
.exchange-direction-btn.active .exchange-direction-icon{color:#001612;background:var(--cyan)}
.exchange-direction-btn>span:last-child{min-width:0;display:block}
.exchange-direction-btn strong{display:block;font-size:10px;white-space:nowrap}
.exchange-direction-btn small{display:block;margin-top:4px;color:#68777d;font-size:7px;white-space:nowrap}
.exchange-direction-btn.active small{color:#8aa3a6}
.exchange-field-block{position:relative}
.exchange-input-wrap{position:relative;display:flex;align-items:center}
.exchange-input-wrap .field{padding-right:70px}
.exchange-input-wrap>span{position:absolute;right:14px;pointer-events:none;color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.5px}
.exchange-output-wrap>span{color:#62f7a8}
.exchange-arrow-v2{height:38px}
.exchange-arrow-v2 svg{animation:exchangeArrowPulse 1.8s ease-in-out infinite}
.exchange-submit-btn:disabled{opacity:.58;cursor:not-allowed}
@keyframes exchangeArrowPulse{0%,100%{transform:translateY(-2px);opacity:.55}50%{transform:translateY(3px);opacity:1}}
@media(max-width:380px){.exchange-direction-switch{gap:7px}.exchange-direction-btn{padding:9px 7px}.exchange-direction-icon{width:29px;height:29px;flex-basis:29px}.exchange-direction-btn strong{font-size:9px}.exchange-direction-btn small{font-size:6.5px}}


/* ===== MENU MỞ RỘNG: MUA THỢ / THUÊ THỢ ===== */
@media(max-width:380px){
    .bottom-nav-extra{
        padding-left:8px;
        padding-right:8px;
        gap:6px
    }
    .extra-nav-item{
        gap:7px;
        padding:6px 7px
    }
    .extra-nav-icon{
        width:32px;
        height:32px;
        flex-basis:32px
    }
    .extra-nav-icon svg{
        width:17px;
        height:17px
    }
    .extra-nav-copy strong{font-size:9px}
    .extra-nav-copy small{font-size:5.4px;letter-spacing:.45px}
}
/* =========================================================
   NẠP TIỀN VIETQR
   ========================================================= */

.deposit-page-header{
    margin-bottom:14px
}

.deposit-page-icon{
    color:#60f7b2;
    border-color:rgba(96,247,178,.2);
    background:rgba(96,247,178,.08)
}

.deposit-create-card,
.deposit-qr-card,
.deposit-history-card{
    margin-top:13px;
    padding:18px;
    border:1px solid rgba(0,240,213,.16);
    border-radius:22px;
    background:linear-gradient(145deg,rgba(4,18,22,.98),rgba(1,8,10,.99));
    box-shadow:inset 0 0 28px rgba(0,240,213,.035)
}

.deposit-create-head{
    display:flex;
    align-items:center;
    gap:13px
}

.deposit-create-icon{
    width:50px;
    height:50px;
    flex:0 0 50px;
    display:grid;
    place-items:center;
    border:1px solid rgba(0,240,213,.18);
    border-radius:16px;
    color:var(--cyan);
    background:rgba(0,240,213,.08)
}

.deposit-create-icon svg{
    width:25px
}

.deposit-create-head small,
.deposit-history-head small{
    color:var(--cyan);
    font-size:8px;
    font-weight:800;
    letter-spacing:1.2px
}

.deposit-create-head h3,
.deposit-history-head h3{
    margin-top:4px;
    color:#f4ffff;
    font-size:17px
}

.deposit-create-head p{
    margin-top:5px;
    color:#7e8a91;
    font-size:10px;
    line-height:1.55
}

.deposit-amount-field{
    display:block;
    margin-top:18px
}

.deposit-amount-field>span{
    display:block;
    margin-bottom:8px;
    color:#849198;
    font-size:9px;
    font-weight:800;
    letter-spacing:1px
}

.deposit-amount-field>div{
    height:58px;
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid rgba(0,240,213,.25);
    border-radius:16px;
    background:#020b0d;
    transition:.2s ease
}

.deposit-amount-field>div:focus-within{
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(0,240,213,.07)
}

.deposit-amount-field input{
    min-width:0;
    height:100%;
    flex:1;
    border:0;
    outline:0;
    padding:0 15px;
    color:#fff;
    background:transparent;
    font-size:22px;
    font-weight:800
}

.deposit-amount-field input::placeholder{
    color:#455459;
    font-size:13px;
    font-weight:600
}

.deposit-amount-field b{
    padding:0 15px;
    color:var(--cyan);
    font-size:11px;
    letter-spacing:.7px
}

.deposit-quick-amounts{
    margin-top:10px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px
}

.deposit-quick-amounts button{
    min-height:34px;
    border:1px solid rgba(0,240,213,.14);
    border-radius:10px;
    color:#9eaaaf;
    background:rgba(0,240,213,.035);
    font-size:9px;
    font-weight:800
}

.deposit-quick-amounts button:active{
    color:#00130f;
    background:var(--cyan)
}

.deposit-start-btn{
    width:100%;
    min-height:52px;
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:15px;
    color:#00130f;
    background:linear-gradient(135deg,#78ffe9,var(--cyan));
    box-shadow:0 12px 28px rgba(0,240,213,.16);
    font-size:12px;
    font-weight:900;
    letter-spacing:.35px
}

.deposit-start-btn:disabled{
    opacity:.65
}

.deposit-start-btn svg{
    width:20px
}

.deposit-start-btn:disabled svg{
    animation:depositSpin .8s linear infinite
}

@keyframes depositSpin{
    to{transform:rotate(360deg)}
}

.deposit-qr-card[hidden]{
    display:none!important
}

.deposit-qr-card{
    position:relative;
    overflow:hidden;
    border-color:rgba(96,247,178,.23);
    background:
        radial-gradient(circle at 50% 0,rgba(96,247,178,.1),transparent 32%),
        linear-gradient(145deg,rgba(4,23,19,.98),rgba(1,10,9,.99))
}

.deposit-qr-status{
    display:flex;
    align-items:center;
    gap:10px
}

.deposit-status-dot{
    width:12px;
    height:12px;
    border:3px solid rgba(255,203,83,.2);
    border-radius:50%;
    background:#ffcb53;
    box-shadow:0 0 12px rgba(255,203,83,.6)
}

.deposit-qr-status small{
    display:block;
    color:#8d989d;
    font-size:8px;
    font-weight:800;
    letter-spacing:1px
}

.deposit-qr-status strong{
    display:block;
    margin-top:3px;
    color:#ffd36f;
    font-size:12px
}

.deposit-qr-image-wrap{
    width:min(100%,320px);
    margin:16px auto 0;
    overflow:hidden;
    border:8px solid #fff;
    border-radius:20px;
    background:#fff;
    box-shadow:0 18px 40px rgba(0,0,0,.35)
}

.deposit-qr-image-wrap img{
    width:100%;
    display:block;
    border-radius:12px
}

.deposit-qr-amount{
    margin-top:16px;
    text-align:center
}

.deposit-qr-amount span{
    display:block;
    color:#7f8c91;
    font-size:8px;
    font-weight:800;
    letter-spacing:1.2px
}

.deposit-qr-amount strong{
    display:block;
    margin-top:6px;
    color:#69f7b2;
    font-size:24px
}

.deposit-bank-info{
    margin-top:16px;
    padding:2px 14px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:17px;
    background:rgba(0,0,0,.18)
}

.deposit-bank-info>div{
    min-height:60px;
    display:grid;
    grid-template-columns:minmax(90px,.8fr) minmax(0,1.2fr) 34px;
    align-items:center;
    gap:8px;
    border-bottom:1px solid rgba(255,255,255,.055)
}

.deposit-bank-info>div:last-child{
    border-bottom:0
}

.deposit-bank-info span{
    color:#7f8c91;
    font-size:9px
}

.deposit-bank-info strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#effafa;
    font-size:11px;
    text-align:right;
    white-space:nowrap
}

.deposit-bank-info button{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:1px solid rgba(0,240,213,.15);
    border-radius:10px;
    color:var(--cyan);
    background:rgba(0,240,213,.06)
}

.deposit-bank-info button svg{
    width:15px
}

.deposit-transfer-content-row strong{
    color:#ffd36f;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.6px
}

.deposit-warning-note{
    margin-top:14px;
    padding:12px;
    display:flex;
    align-items:flex-start;
    gap:9px;
    border:1px solid rgba(255,203,83,.16);
    border-radius:14px;
    color:#d3b66b;
    background:rgba(255,203,83,.055)
}

.deposit-warning-note svg{
    width:18px;
    flex:0 0 18px
}

.deposit-warning-note p{
    margin:0;
    font-size:9px;
    line-height:1.6
}

.deposit-warning-note b{
    color:#ffe09a
}

.deposit-history-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}

.deposit-history-head button{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(0,240,213,.14);
    border-radius:12px;
    color:var(--cyan);
    background:rgba(0,240,213,.05)
}

.deposit-history-head button svg{
    width:18px
}

.deposit-history-list{
    margin-top:13px
}

.deposit-history-empty{
    min-height:110px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:#647177;
    text-align:center;
    font-size:10px
}

.deposit-history-empty svg{
    width:27px;
    color:#4f6468
}

.deposit-history-item{
    min-height:74px;
    display:flex;
    align-items:center;
    gap:11px;
    border-bottom:1px solid rgba(255,255,255,.055)
}

.deposit-history-item:last-child{
    border-bottom:0
}

.deposit-history-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border-radius:13px
}

.deposit-history-icon svg{
    width:20px
}

.deposit-history-icon.pending{
    color:#ffd36f;
    background:rgba(255,203,83,.08)
}

.deposit-history-icon.approved{
    color:#69f7b2;
    background:rgba(96,247,178,.08)
}

.deposit-history-icon.rejected{
    color:#ff8796;
    background:rgba(255,98,113,.08)
}

.deposit-history-copy{
    min-width:0;
    flex:1
}

.deposit-history-copy strong{
    display:block;
    color:#eef8f8;
    font-size:12px
}

.deposit-history-copy small{
    display:block;
    margin-top:4px;
    overflow:hidden;
    color:#728087;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap
}

.deposit-history-copy .deposit-history-note{
    color:#adbac0;
    white-space:normal
}

.deposit-history-status{
    min-height:25px;
    padding:0 8px;
    display:flex;
    align-items:center;
    border-radius:999px;
    font-size:7px;
    font-weight:900;
    white-space:nowrap
}

.deposit-history-status.pending{
    color:#ffd36f;
    background:rgba(255,203,83,.08)
}

.deposit-history-status.approved{
    color:#69f7b2;
    background:rgba(96,247,178,.08)
}

.deposit-history-status.rejected{
    color:#ff9ba8;
    background:rgba(255,98,113,.08)
}

@media(max-width:380px){
    .deposit-create-card,
    .deposit-qr-card,
    .deposit-history-card{
        padding:15px
    }

    .deposit-quick-amounts{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .deposit-bank-info>div{
        grid-template-columns:82px minmax(0,1fr) 32px
    }
}

/* =========================================================
   RÚT TIỀN VND · PHÍ 1% · DUYỆT 2 NGÀY · LỊCH SỬ
   ========================================================= */

.withdraw-policy-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:13px
}

.withdraw-policy-grid article{
    min-height:82px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:14px;
    border:1px solid rgba(98,247,168,.16);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(5,23,19,.96),rgba(2,12,10,.98))
}

.withdraw-policy-grid article>span{
    width:39px;
    height:39px;
    flex:0 0 39px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#62f7a8;
    background:rgba(98,247,168,.08)
}

.withdraw-policy-grid article>span svg{
    width:20px
}

.withdraw-policy-grid small{
    display:block;
    color:#758b82;
    font-size:7px;
    font-weight:900;
    letter-spacing:.9px
}

.withdraw-policy-grid strong{
    display:block;
    margin-top:5px;
    color:#eafff2;
    font-size:14px
}

.withdraw-policy-grid b{
    color:#62f7a8
}

.withdraw-request-card{
    border:1px solid rgba(98,247,168,.14);
    border-radius:20px;
    background:linear-gradient(145deg,rgba(4,18,15,.98),rgba(1,9,8,.99))
}

.withdraw-preview-card{
    margin-top:14px;
    padding:5px 14px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:16px;
    background:rgba(0,0,0,.2)
}

.withdraw-preview-card>div{
    min-height:47px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid rgba(255,255,255,.05)
}

.withdraw-preview-card>div:last-child{
    border-bottom:0
}

.withdraw-preview-card span{
    color:#7f9189;
    font-size:9px
}

.withdraw-preview-card strong{
    color:#eaf8f1;
    font-size:11px
}

.withdraw-preview-card strong.fee{
    color:#ffad72
}

.withdraw-preview-card .withdraw-preview-net{
    min-height:57px
}

.withdraw-preview-card .withdraw-preview-net span{
    color:#a0b8ad;
    font-weight:800
}

.withdraw-preview-card .withdraw-preview-net strong{
    color:#62f7a8;
    font-size:16px
}

.withdraw-rules-card b{
    color:#62f7a8
}

.withdraw-history-card{
    margin-top:13px;
    padding:18px;
    border:1px solid rgba(98,247,168,.15);
    border-radius:22px;
    background:linear-gradient(145deg,rgba(4,18,15,.98),rgba(1,9,8,.99));
    box-shadow:inset 0 0 28px rgba(98,247,168,.025)
}

.withdraw-history-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}

.withdraw-history-head small{
    color:#62f7a8;
    font-size:8px;
    font-weight:800;
    letter-spacing:1.2px
}

.withdraw-history-head h3{
    margin-top:4px;
    color:#f4fff8;
    font-size:17px
}

.withdraw-history-head button{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(98,247,168,.14);
    border-radius:12px;
    color:#62f7a8;
    background:rgba(98,247,168,.05)
}

.withdraw-history-head button svg{
    width:18px
}

.withdraw-history-head button.loading svg{
    animation:withdrawRefreshSpin .8s linear infinite
}

@keyframes withdrawRefreshSpin{
    to{transform:rotate(360deg)}
}

.withdraw-history-list{
    margin-top:13px;
    display:grid;
    gap:10px
}

.withdraw-history-empty{
    min-height:120px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:#64766d;
    text-align:center;
    font-size:10px
}

.withdraw-history-empty svg{
    width:28px;
    color:#4d665a
}

.withdraw-history-item{
    padding:13px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:17px;
    background:rgba(0,0,0,.16)
}

.withdraw-history-main{
    display:flex;
    align-items:flex-start;
    gap:11px
}

.withdraw-history-icon{
    width:41px;
    height:41px;
    flex:0 0 41px;
    display:grid;
    place-items:center;
    border-radius:13px
}

.withdraw-history-icon svg{
    width:20px
}

.withdraw-history-icon.pending{
    color:#ffd36f;
    background:rgba(255,203,83,.08)
}

.withdraw-history-icon.approved{
    color:#69f7b2;
    background:rgba(96,247,178,.08)
}

.withdraw-history-icon.rejected{
    color:#ff8796;
    background:rgba(255,98,113,.08)
}

.withdraw-history-copy{
    min-width:0;
    flex:1
}

.withdraw-history-title-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px
}

.withdraw-history-title-row>strong{
    min-width:0;
    color:#eefaf3;
    font-size:11px;
    line-height:1.45
}

.withdraw-history-copy>small{
    display:block;
    margin-top:4px;
    overflow:hidden;
    color:#718279;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap
}

.withdraw-history-status{
    min-height:24px;
    padding:0 7px;
    display:flex;
    align-items:center;
    flex:0 0 auto;
    border-radius:999px;
    font-size:6.8px;
    font-weight:900;
    white-space:nowrap
}

.withdraw-history-status.pending{
    color:#ffd36f;
    background:rgba(255,203,83,.08)
}

.withdraw-history-status.approved{
    color:#69f7b2;
    background:rgba(96,247,178,.08)
}

.withdraw-history-status.rejected{
    color:#ff9ba8;
    background:rgba(255,98,113,.08)
}

.withdraw-history-money{
    margin-top:11px;
    padding:0 10px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    border:1px solid rgba(255,255,255,.045);
    border-radius:12px;
    background:rgba(255,255,255,.018)
}

.withdraw-history-money>div{
    min-height:51px;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.withdraw-history-money>div+div{
    padding-left:10px;
    border-left:1px solid rgba(255,255,255,.05)
}

.withdraw-history-money span{
    color:#718078;
    font-size:7px;
    font-weight:800;
    letter-spacing:.5px
}

.withdraw-history-money strong{
    margin-top:5px;
    color:#e8f7ef;
    font-size:10px
}

.withdraw-history-money>div:first-child strong{
    color:#ffad72
}

.withdraw-history-money>div:last-child strong{
    color:#62f7a8
}

.withdraw-history-time{
    margin:9px 0 0;
    display:flex;
    align-items:center;
    gap:6px;
    color:#7d8d85;
    font-size:8px;
    line-height:1.45
}

.withdraw-history-time svg{
    width:14px;
    flex:0 0 14px;
    color:#62f7a8
}

@media(max-width:380px){
    .withdraw-policy-grid{
        gap:7px
    }

    .withdraw-policy-grid article{
        padding:11px;
        gap:8px
    }

    .withdraw-policy-grid article>span{
        width:35px;
        height:35px;
        flex-basis:35px
    }

    .withdraw-history-card{
        padding:15px
    }

    .withdraw-history-title-row{
        flex-direction:column
    }
}

/* ========================================================================== 
   WITHDRAW GAME TURNOVER & MINI GAME AUDIT
   ========================================================================== */
.withdraw-turnover-card {
    margin: 14px 0;
    padding: 16px;
    border: 1px solid rgba(112, 255, 208, 0.18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 0%, rgba(91, 255, 197, 0.11), transparent 34%),
        linear-gradient(155deg, rgba(14, 24, 26, 0.98), rgba(4, 8, 10, 0.98));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.withdraw-turnover-card.locked {
    border-color: rgba(255, 105, 127, 0.34);
    background:
        radial-gradient(circle at 90% 0%, rgba(255, 90, 120, 0.12), transparent 34%),
        linear-gradient(155deg, rgba(25, 14, 18, 0.98), rgba(6, 6, 9, 0.98));
}

.withdraw-turnover-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.withdraw-turnover-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    color: #88ffd5;
    background: rgba(86, 255, 195, 0.1);
    border: 1px solid rgba(104, 255, 202, 0.2);
}

.withdraw-turnover-card.locked .withdraw-turnover-icon {
    color: #ff8ca1;
    background: rgba(255, 89, 119, 0.11);
    border-color: rgba(255, 106, 132, 0.24);
}

.withdraw-turnover-head small {
    display: block;
    color: #6d7d84;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.9px;
}

.withdraw-turnover-head h3 {
    margin: 3px 0 0;
    color: #f5ffff;
    font-size: 15px;
}

.withdraw-turnover-stats,
.withdraw-game-audit {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.withdraw-turnover-stats > div,
.withdraw-game-audit > div {
    min-width: 0;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.055);
}

.withdraw-turnover-stats span,
.withdraw-game-audit span {
    display: block;
    color: #718087;
    font-size: 8px;
    font-weight: 800;
}

.withdraw-turnover-stats strong,
.withdraw-game-audit strong {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: #e9ffff;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.withdraw-turnover-progress {
    height: 9px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.withdraw-turnover-progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #32d99c, #8effd7);
    transition: width 0.3s ease;
}

.withdraw-turnover-card.locked .withdraw-turnover-progress span {
    background: linear-gradient(90deg, #ff607c, #ffae78);
}

.withdraw-game-audit {
    margin-top: 10px;
}

.withdraw-turnover-status {
    margin: 11px 0 0;
    padding: 10px 11px;
    border-radius: 13px;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.55;
}

.withdraw-turnover-status.completed {
    color: #a9ffe1;
    background: rgba(64, 226, 165, 0.08);
    border: 1px solid rgba(94, 244, 190, 0.15);
}

.withdraw-turnover-status.locked {
    color: #ffb3c0;
    background: rgba(255, 88, 119, 0.09);
    border: 1px solid rgba(255, 104, 132, 0.17);
}

@media (max-width: 520px) {
    .withdraw-turnover-stats,
    .withdraw-game-audit {
        grid-template-columns: 1fr;
    }

    .withdraw-turnover-stats > div,
    .withdraw-game-audit > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .withdraw-turnover-stats strong,
    .withdraw-game-audit strong {
        margin-top: 0;
        text-align: right;
    }
}

/* ========================================================================== */
/* THỢ MỎ ATDARK LV1–LV20                                                    */
/* ========================================================================== */

.worker-card{
    margin-top:18px;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(95,169,255,.28);
    background:
        radial-gradient(circle at 86% 12%,rgba(43,119,255,.16),transparent 36%),
        linear-gradient(155deg,rgba(4,13,22,.98),rgba(3,8,13,.99));
    box-shadow:0 18px 46px rgba(0,0,0,.26),inset 0 0 30px rgba(46,132,255,.04)
}

.worker-shop-state,
.worker-owned-state{
    position:relative
}

.worker-shop-image-wrap{
    position:relative;
    height:245px;
    overflow:hidden;
    background:#07101a
}

.worker-shop-image{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center 54%;
    filter:saturate(1.08) contrast(1.03)
}

.worker-shop-image-wrap::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:48%;
    background:linear-gradient(transparent,rgba(3,8,13,.98));
    pointer-events:none
}

.worker-price-badge{
    position:absolute;
    z-index:2;
    top:14px;
    right:14px;
    min-height:34px;
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid rgba(255,208,87,.64);
    border-radius:999px;
    background:rgba(17,13,4,.86);
    color:#ffd96b;
    font-size:12px;
    font-weight:800;
    box-shadow:0 8px 22px rgba(0,0,0,.3),0 0 20px rgba(255,188,52,.14);
    backdrop-filter:blur(9px)
}

.worker-price-badge svg{
    width:17px;
    height:17px
}

.worker-shop-copy{
    padding:0 18px 20px;
    margin-top:-5px;
    position:relative;
    z-index:2
}

.worker-kicker{
    display:block;
    color:#62b5ff;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.45px
}

.worker-shop-copy h3,
.worker-owned-head h3{
    margin:7px 0 0;
    color:#f6fbff;
    font-size:20px;
    line-height:1.25
}

.worker-shop-copy p{
    margin:10px 0 0;
    color:#aebcc8;
    font-size:12px;
    line-height:1.62
}

.worker-benefit-grid{
    margin-top:15px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px
}

.worker-benefit-grid span{
    min-height:58px;
    padding:9px 7px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid rgba(94,169,255,.2);
    border-radius:13px;
    background:rgba(13,33,53,.64);
    color:#c8dded;
    text-align:center;
    font-size:9px;
    font-weight:700;
    line-height:1.35
}

.worker-benefit-grid svg{
    width:20px;
    height:20px;
    color:#5db5ff
}

.worker-source-balance{
    margin-top:13px;
    padding:12px 13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid rgba(0,239,210,.22);
    border-radius:13px;
    background:rgba(0,239,210,.055)
}

.worker-source-balance span{
    color:#a9b8c1;
    font-size:11px
}

.worker-source-balance strong{
    color:#4af2d9;
    font-size:12px
}

.worker-main-btn{
    width:100%;
    min-height:52px;
    margin-top:14px;
    padding:0 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:1px solid rgba(111,188,255,.58);
    border-radius:15px;
    background:linear-gradient(135deg,#1884e8,#0757b9);
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.35px;
    box-shadow:0 13px 27px rgba(0,96,210,.25),inset 0 1px rgba(255,255,255,.2)
}

.worker-main-btn b{
    color:#dbf1ff;
    font-size:11px
}

.worker-main-btn svg{
    width:20px;
    height:20px
}

.worker-main-btn:disabled{
    cursor:not-allowed;
    opacity:.5;
    filter:grayscale(.35);
    box-shadow:none
}

.worker-owned-state{
    padding:18px
}

.worker-owned-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px
}

.worker-owned-head h3 b{
    display:inline-flex;
    margin-left:5px;
    padding:4px 8px;
    border-radius:8px;
    background:rgba(50,148,255,.16);
    color:#66bcff;
    font-size:12px;
    vertical-align:middle
}

.worker-status-live{
    min-height:29px;
    padding:0 9px;
    display:flex;
    align-items:center;
    gap:6px;
    border:1px solid rgba(37,229,183,.3);
    border-radius:999px;
    background:rgba(28,194,151,.09);
    color:#46e2bd;
    font-size:8px;
    font-weight:800;
    white-space:nowrap
}

.worker-status-live svg{
    width:13px;
    height:13px;
    animation:workerLivePulse 1.8s ease-in-out infinite
}

@keyframes workerLivePulse{
    0%,100%{opacity:.45;transform:scale(.9)}
    50%{opacity:1;transform:scale(1.08)}
}

.worker-owned-body{
    margin-top:14px;
    display:grid;
    grid-template-columns:155px minmax(0,1fr);
    gap:13px;
    align-items:center
}

.worker-active-image-wrap{
    height:170px;
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid rgba(69,160,255,.22);
    border-radius:18px;
    background:
        radial-gradient(circle at 50% 58%,rgba(29,133,255,.24),transparent 54%),
        linear-gradient(150deg,rgba(9,29,46,.9),rgba(3,10,17,.95))
}

.worker-active-glow{
    position:absolute;
    width:100px;
    height:100px;
    border-radius:50%;
    background:rgba(45,153,255,.24);
    filter:blur(28px)
}

.worker-active-image{
    width:155px;
    height:150px;
    position:relative;
    z-index:1;
    object-fit:contain;
    filter:drop-shadow(0 13px 18px rgba(0,0,0,.4))
}

.worker-current-stats{
    display:grid;
    gap:8px
}

.worker-current-stats>div{
    min-height:50px;
    padding:9px 11px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    border:1px solid rgba(87,159,219,.17);
    border-radius:12px;
    background:rgba(12,27,40,.65)
}

.worker-current-stats span{
    color:#8399aa;
    font-size:9px
}

.worker-current-stats strong{
    color:#eef8ff;
    font-size:11px;
    line-height:1.3
}

.worker-current-stats strong b{
    color:#54c0ff
}

.worker-level-progress{
    margin-top:14px;
    padding:12px;
    border:1px solid rgba(86,162,228,.17);
    border-radius:13px;
    background:rgba(6,20,31,.66)
}

.worker-level-progress-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    color:#91a7b8;
    font-size:10px
}

.worker-level-progress-head b,
.worker-level-progress-head strong{
    color:#62b9ff
}

.worker-level-track{
    height:8px;
    margin-top:9px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07)
}

.worker-level-track span{
    width:5%;
    height:100%;
    display:block;
    border-radius:inherit;
    background:linear-gradient(90deg,#1688f2,#56c4ff);
    box-shadow:0 0 13px rgba(48,167,255,.55);
    transition:width .35s ease
}

.worker-next-perk{
    margin-top:11px;
    padding:11px 12px;
    display:flex;
    align-items:flex-start;
    gap:9px;
    border:1px solid rgba(255,200,77,.18);
    border-radius:12px;
    background:rgba(255,186,31,.055);
    color:#c7b98e;
    font-size:10px;
    line-height:1.45
}

.worker-next-perk svg{
    width:17px;
    min-width:17px;
    color:#f4c65a
}

.worker-upgrade-btn{
    background:linear-gradient(135deg,#1d8cf2,#584bdb)
}

.worker-card .form-message{
    margin:0 18px 17px
}

@media(max-width:430px){
    .worker-shop-image-wrap{height:218px}
    .worker-shop-copy{padding-left:15px;padding-right:15px}
    .worker-owned-state{padding:15px}
    .worker-owned-body{grid-template-columns:135px minmax(0,1fr);gap:10px}
    .worker-active-image-wrap{height:158px}
    .worker-active-image{width:140px;height:138px}
    .worker-current-stats>div{padding:8px 9px}
}

@media(max-width:360px){
    .worker-benefit-grid{grid-template-columns:1fr}
    .worker-benefit-grid span{min-height:45px;flex-direction:row;justify-content:flex-start;text-align:left;padding:8px 10px}
    .worker-owned-body{grid-template-columns:1fr}
    .worker-active-image-wrap{height:176px}
    .worker-current-stats{grid-template-columns:1fr 1fr}
    .worker-current-stats>div:last-child{grid-column:1/-1}
}


/* ========================================================================== */
/* TRANG MUA THỢ - HIỂN THỊ HỆ THỐNG THỢ THẬT                               */
/* ========================================================================== */

.worker-page-description{
    margin:10px 2px 0;
    color:#8fa0aa;
    font-size:11px;
    line-height:1.55
}

.buy-worker-live-card{
    margin-top:14px;
    margin-bottom:24px
}

#page-buy-worker .worker-card[hidden],
#page-buy-worker .worker-shop-state[hidden],
#page-buy-worker .worker-owned-state[hidden]{
    display:none!important
}