/* ============================================================
   InvestViet - Main Stylesheet
   CSS Variables để dễ đổi màu sắc sau này
   ============================================================ */

:root{
  /* Background colors */
  --bg: #0f1117;
  --bg2: #161b27;
  --bg3: #1c2336;
  --border: #232d42;

  /* Accent colors - ĐỔI Ở ĐÂY ĐỂ THAY MÀU CHỦ ĐẠO */
  --accent: #2563eb;
  --accent2: #7c3aed;
  --accent3: #059669;
  --gold: #f59e0b;
  --red: #ef4444;

  /* Text colors */
  --text: #e2e8f0;
  --text2: #94a3b8;
  --text3: #64748b;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Be Vietnam Pro',sans-serif;font-size:14px;min-height:100vh;overflow-x:hidden;padding-bottom:60px}
@media(min-width:1024px){body{padding-bottom:0}}

a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}

/* ============ HEADER ============ */
.header{background:linear-gradient(180deg,#0a0e1a 0%,var(--bg2) 100%);border-bottom:1px solid var(--border);padding:0 16px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200;gap:12px}
.h-left{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900;background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1px;white-space:nowrap;cursor:pointer;transition:opacity 0.2s}
.logo:hover{opacity:0.8}
.logo span{-webkit-text-fill-color:#f59e0b}
.hamburger{background:none;border:none;color:var(--text);font-size:22px;padding:4px}
@media(min-width:1024px){.hamburger{display:none}}

.h-cats{display:none;flex:1;gap:6px;justify-content:center}
@media(min-width:768px){.h-cats{display:flex;align-items:center}}
.h-cat{padding:7px 16px;border-radius:6px;font-size:13px;font-weight:600;white-space:nowrap;border:1px solid rgba(37,99,235,0.2);background:rgba(37,99,235,0.12);color:#60a5fa;transition:all 0.2s;text-decoration:none}
.h-cat:hover,.h-cat.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.h-cat.vip{background:rgba(245,158,11,0.12);color:var(--gold);border-color:rgba(245,158,11,0.25)}
.h-cat.vip:hover,.h-cat.vip.active{background:var(--gold);color:#000;border-color:var(--gold)}

.h-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.btn-login{padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;border:1px solid var(--border);background:var(--bg3);color:var(--text);white-space:nowrap;transition:all 0.2s;text-decoration:none}
.btn-login:hover{border-color:var(--accent);color:var(--accent)}
.btn-register{padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;white-space:nowrap;transition:opacity 0.2s;text-decoration:none}
.btn-register:hover{opacity:0.9}

.h-user{display:none;align-items:center;gap:8px}
.h-user.show{display:flex}
.h-points{display:flex;align-items:center;gap:5px;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);padding:6px 12px;border-radius:20px;font-size:12px;font-weight:700;color:var(--gold);white-space:nowrap}
.h-ic{width:38px;height:38px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:16px;position:relative;transition:all 0.2s}
.h-ic:hover{border-color:var(--accent);color:var(--text)}
.dot{position:absolute;top:5px;right:5px;width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid var(--bg2)}
.h-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;cursor:pointer;border:2px solid var(--accent);position:relative}
.online{position:absolute;bottom:1px;right:1px;width:9px;height:9px;background:#22c55e;border-radius:50%;border:2px solid var(--bg2)}

/* ============ DROPDOWN ============ */
.dropdown{position:fixed;top:58px;right:12px;width:260px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,0.5);z-index:500;display:none;overflow:hidden}
.dropdown.open{display:block}
.dd-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center}
.dd-ava{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0}
.dd-name{font-size:13px;font-weight:700}
.dd-plan{font-size:11px;padding:2px 8px;border-radius:10px;background:rgba(37,99,235,0.2);color:#60a5fa;display:inline-block;margin-top:3px}
.dd-pts{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.dd-pts-v{font-size:17px;font-weight:800;color:var(--gold)}
.dd-pts-l{font-size:11px;color:var(--text3)}
.dd-item{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;font-size:13px;transition:background 0.15s;text-decoration:none;color:inherit}
.dd-item:hover{background:var(--bg3)}
.dd-item .di{font-size:16px;width:22px;text-align:center}
.dd-item.danger{color:var(--red)}
.dd-div{height:1px;background:var(--border)}

/* ============ MOBILE SIDEBAR ============ */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:300}
.overlay.open{display:block}
.m-sidebar{position:fixed;left:-300px;top:0;width:290px;height:100vh;background:var(--bg2);border-right:1px solid var(--border);z-index:301;transition:left 0.3s;overflow-y:auto;padding-bottom:40px}
.m-sidebar.open{left:0}
.m-head{padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);background:var(--bg3)}
.m-close{background:none;border:none;color:var(--text2);font-size:20px}
.m-menu{padding:8px 0}
.m-item{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;cursor:pointer;transition:background 0.15s;border-left:3px solid transparent;text-decoration:none;color:inherit}
.m-item:hover{background:var(--bg3)}
.m-item.active{background:rgba(37,99,235,0.1);border-left-color:var(--accent)}
.m-item-l{display:flex;align-items:center;gap:10px}
.m-item-l .ic{font-size:17px;width:22px;text-align:center}
.m-item-l span{font-size:13px;font-weight:500}
.m-item.active .m-item-l span{color:var(--accent)}
.m-badge{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:700}
/* Legacy badge classes (giữ tương thích nếu code khác có dùng) */
.badge-new{background:rgba(5,150,105,0.2);color:var(--accent3);border:1px solid rgba(5,150,105,0.3)}
.badge-hot{background:rgba(239,68,68,0.2);color:var(--red);border:1px solid rgba(239,68,68,0.3)}
.badge-vip{background:rgba(245,158,11,0.2);color:var(--gold);border:1px solid rgba(245,158,11,0.3)}
/* BADGE_COLOR_FIX_V1: Map admin select values → real colors */
.badge-red{background:rgba(239,68,68,0.2);color:var(--red,#ef4444);border:1px solid rgba(239,68,68,0.4)}
.badge-green{background:rgba(34,197,94,0.2);color:#4ade80;border:1px solid rgba(34,197,94,0.4)}
.badge-gold{background:rgba(245,158,11,0.2);color:var(--gold,#f59e0b);border:1px solid rgba(245,158,11,0.4)}
.badge-blue{background:rgba(59,130,246,0.2);color:#60a5fa;border:1px solid rgba(59,130,246,0.4)}
.sd-div{height:1px;background:var(--border);margin:6px 0}

/* ============ MOBILE CAT TABS ============ */
.m-cats{display:flex;gap:8px;padding:10px 14px;overflow-x:auto;scrollbar-width:none;background:var(--bg2);border-bottom:1px solid var(--border)}
.m-cats::-webkit-scrollbar{display:none}
@media(min-width:768px){.m-cats{display:none}}
.m-cat-btn{display:flex;align-items:center;gap:5px;padding:7px 14px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid var(--border);background:var(--bg3);color:var(--text2);text-decoration:none}
.m-cat-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.m-cat-btn.vip.active{background:var(--gold);color:#000;border-color:var(--gold)}

/* ============ DESKTOP LAYOUT ============ */
.home-layout{display:block}
@media(min-width:1024px){.home-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0}}
.d-sidebar{display:none;background:var(--bg2);border-right:1px solid var(--border);padding:12px 0}
@media(min-width:1024px){.d-sidebar{display:block;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto}}
.d-sidebar .m-item{padding:12px 16px}
.d-sidebar .m-item-l{gap:12px}
.d-sidebar .m-item-l span{font-size:14px;font-weight:600}
.d-sidebar .m-item-l .ic{font-size:18px;width:24px}
.content{min-width:0;width:100%}

/* ============ HERO ============ */
.hero{background:linear-gradient(135deg,#0f1117 0%,#1a1f35 60%,#0f1117 100%);padding:24px 20px;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
@media(min-width:1024px){.hero{padding:40px 40px 32px}}
.hero::before{content:'';position:absolute;top:-30%;right:5%;width:500px;height:500px;background:radial-gradient(circle,rgba(37,99,235,0.12) 0%,transparent 65%);border-radius:50%;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-20%;left:30%;width:300px;height:300px;background:radial-gradient(circle,rgba(124,58,237,0.08) 0%,transparent 65%);border-radius:50%;pointer-events:none}
.hero-content{position:relative;z-index:1;max-width:700px}
.hero h1{font-size:26px;font-weight:800;line-height:1.25;margin-bottom:12px}
@media(min-width:1024px){.hero h1{font-size:38px}}
.hero h1 span{background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:20px}
@media(min-width:1024px){.hero p{font-size:15px}}
.hero-stats{display:flex;gap:32px}
.hero-stat .v{font-size:20px;font-weight:800}
@media(min-width:1024px){.hero-stat .v{font-size:24px}}
.hero-stat .l{font-size:12px;color:var(--text3);margin-top:2px}

/* ============ SECTION ============ */
.section{padding:20px}
@media(min-width:1024px){.section{padding:28px 40px}}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.sec-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px}
.sec-title::before{content:'';width:4px;height:18px;background:var(--accent);border-radius:2px}
@media(min-width:1024px){.sec-title{font-size:18px}}
.see-all{font-size:13px;color:var(--accent);cursor:pointer}

/* ============ CARDS ============ */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:600px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr);gap:18px}}

.card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.2s}
.card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 32px rgba(37,99,235,0.18)}
.thumb{position:relative;aspect-ratio:3/4;overflow:hidden}
.thumb-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px}
.thumb-icon{font-size:44px}
.thumb-title{font-size:12px;font-weight:600;text-align:center;color:var(--text2);line-height:1.5}
.t-badge{position:absolute;top:10px;left:10px;padding:4px 9px;border-radius:5px;font-size:10px;font-weight:700}
.b-free{background:rgba(5,150,105,0.92);color:#fff}
.b-pro{background:rgba(37,99,235,0.92);color:#fff}
.b-vip{background:rgba(245,158,11,0.92);color:#000}
.b-hot{background:rgba(239,68,68,0.92);color:#fff}
.b-new{background:rgba(124,58,237,0.92);color:#fff}
.t-stats{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,0.85) 0%,transparent 100%);padding:24px 10px 8px;display:flex;gap:10px}
.t-stat{font-size:11px;color:rgba(255,255,255,0.9)}
.cb{padding:12px 14px 14px}
.c-tag{display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;margin-bottom:6px;text-transform:uppercase}
.tg-cs{background:rgba(37,99,235,0.15);color:#60a5fa}
.tg-fx{background:rgba(124,58,237,0.15);color:#a78bfa}
.tg-cr{background:rgba(245,158,11,0.15);color:var(--gold)}
.tg-tc{background:rgba(5,150,105,0.15);color:#34d399}
.c-title{font-size:13px;font-weight:700;line-height:1.45;margin-bottom:7px}
.c-price{font-size:14px;font-weight:800;color:var(--accent)}
.c-free{color:var(--accent3);font-size:13px;font-weight:700}
.c-meta{font-size:11px;color:var(--text3);margin-top:4px}
.stars{color:var(--gold)}

/* ============ AUTH ============ */
.auth-body{flex:1;padding:40px 16px;min-height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center}
.auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:32px 24px;max-width:440px;width:100%}
.auth-logo{text-align:center;margin-bottom:28px}
.auth-t{font-size:20px;font-weight:800;margin-bottom:4px}
.auth-s{font-size:13px;color:var(--text2);margin-bottom:22px}
.fg{margin-bottom:14px}
.fl{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;display:block}
.fi{width:100%;padding:12px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:border-color 0.2s}
.fi:focus{border-color:var(--accent)}
.fi.is-error{border-color:var(--red)}
.fi::placeholder{color:var(--text3)}
.form-error{color:var(--red);font-size:11px;margin-top:4px}
.btn-p{width:100%;padding:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:8px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity 0.2s,transform 0.08s}
.btn-p:hover{opacity:0.9}
.btn-p:active{transform:scale(0.98);opacity:0.85}
.btn-p:disabled{cursor:wait !important;opacity:0.7 !important;transform:none}
.div-or{display:flex;align-items:center;gap:12px;margin:18px 0}
.div-or::before,.div-or::after{content:'';flex:1;height:1px;background:var(--border)}
.div-or span{font-size:12px;color:var(--text3)}
.social{width:100%;padding:12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;margin-bottom:8px;transition:border-color 0.2s}
.social:hover{border-color:var(--accent)}
.auth-l{text-align:center;font-size:13px;color:var(--text2);margin-top:18px}
.auth-l a{color:var(--accent);cursor:pointer;font-weight:600;text-decoration:none}

/* ============ DASHBOARD ============ */
.dash-hero{background:linear-gradient(135deg,#0f1117,#1a1f35);padding:20px;border-bottom:1px solid var(--border)}
@media(min-width:1024px){.dash-hero{padding:28px 40px}}
.u-info{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ava-big{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}
.u-name{font-size:17px;font-weight:800}
.u-plan{font-size:11px;padding:3px 10px;border-radius:10px;display:inline-block;margin-top:4px;background:rgba(37,99,235,0.2);color:#60a5fa}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:600px}
.sbox{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px 10px;text-align:center}
.sbox .v{font-size:20px;font-weight:800}
.sbox .l{font-size:11px;color:var(--text3);margin-top:3px}
.sbox.g .v{color:var(--gold)}
.sbox.b .v{color:var(--accent)}
.sbox.gr .v{color:var(--accent3)}

/* ============ TABS (dashboard) ============ */
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;scrollbar-width:none;gap:4px}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:12px 18px;font-size:13px;font-weight:600;color:var(--text3);border-bottom:2px solid transparent;white-space:nowrap;transition:all 0.2s;text-decoration:none;cursor:pointer;display:inline-block}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tp-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:14px}
.tp-t{font-size:15px;font-weight:700;margin-bottom:14px}
.btn-sm{padding:5px 11px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;border:none;font-family:inherit;text-decoration:none;display:inline-block}
.sm-g{background:rgba(5,150,105,0.2);color:var(--accent3);border:1px solid rgba(5,150,105,0.3)}
/* KB_REDEMPTION_V1_DROPDOWN_FIX_V35_DONE — nút Rút trong dropdown */
.sm-r{background:rgba(239,68,68,0.12);color:#fca5a5;border:1px solid rgba(239,68,68,0.35);transition:all 0.15s}
.sm-r:hover{background:rgba(239,68,68,0.22);color:#fef2f2;border-color:rgba(239,68,68,0.55)}

/* ============ FOOTER ============ */
.footer{background:linear-gradient(180deg,#0a0e1a 0%,#05070d 100%);border-top:1px solid var(--border);padding:48px 20px 24px;position:relative;margin-top:40px}
@media(min-width:1024px){.footer{padding:56px 40px 28px}}
.footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:240px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.ft-brand-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:28px;border-bottom:1px solid var(--border);margin-bottom:32px;flex-wrap:wrap;gap:16px}
.ft-tagline{font-size:12px;color:var(--text3);margin-top:6px}
.ft-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:13px;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:opacity 0.2s;text-decoration:none}
.ft-cta:hover{opacity:0.9}
.ft-grid{display:grid;grid-template-columns:1fr;gap:32px;max-width:1400px;margin:0 auto}
@media(min-width:640px){.ft-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ft-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.ft-col-title{font-size:11px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
.ft-about{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:14px;max-width:360px}
.ft-socials{display:flex;gap:8px;margin-top:14px}
.ft-soc{width:36px;height:36px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;transition:all 0.2s;color:var(--text2);text-decoration:none}
.ft-soc:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.ft-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.ft-link{font-size:13px;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:8px;transition:color 0.2s}
.ft-link::before{content:'›';color:var(--accent);font-size:16px;font-weight:700}
.ft-link:hover{color:var(--accent)}
.ft-link .ft-badge{margin-left:auto;font-size:9px;padding:2px 7px;border-radius:10px;font-weight:700;background:rgba(239,68,68,0.15);color:var(--red);border:1px solid rgba(239,68,68,0.25)}
.ft-link .ft-badge.new{background:rgba(5,150,105,0.15);color:var(--accent3);border-color:rgba(5,150,105,0.25)}
.ft-link .ft-badge.vip{background:rgba(245,158,11,0.15);color:var(--gold);border-color:rgba(245,158,11,0.25)}
.ft-bottom{max-width:1400px;margin:36px auto 0;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.ft-copy{font-size:12px;color:var(--text3)}
.ft-copy strong{color:var(--text2)}
.ft-meta{display:flex;gap:20px;flex-wrap:wrap}
.ft-meta a{font-size:12px;color:var(--text3);cursor:pointer;transition:color 0.2s;text-decoration:none}
.ft-meta a:hover{color:var(--accent)}
.ft-to-top{position:absolute;left:50%;transform:translateX(-50%);top:-24px;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#fff;border:3px solid var(--bg);transition:transform 0.2s;box-shadow:0 8px 24px rgba(37,99,235,0.3)}
.ft-to-top:hover{transform:translateX(-50%) translateY(-3px)}

/* ============ BOTTOM NAV ============ */
.bn{position:fixed;bottom:0;left:0;right:0;background:var(--bg2);border-top:1px solid var(--border);display:flex;z-index:100}
@media(min-width:1024px){.bn{display:none}}
.bn-i{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 4px;color:var(--text3);text-decoration:none;transition:color 0.2s}
.bn-i.active{color:var(--accent)}
.bn-ic{font-size:20px;margin-bottom:3px}
.bn-l{font-size:9px;font-weight:600}

/* ============ TOAST ============ */
.toast{position:fixed;top:68px;left:50%;transform:translateX(-50%) translateY(-10px);background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:11px 22px;font-size:13px;font-weight:600;z-index:9999;opacity:0;transition:all 0.3s;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,0.5);pointer-events:none;max-width:90vw;line-height:1.5}
/* kbToast_v2: HTML toast — wrap multiline, click-able close button */
.toast.is-html{white-space:normal;max-width:min(640px,90vw);padding:14px 44px 14px 18px;text-align:left;pointer-events:auto;font-weight:500}
.toast.is-html ul{margin:6px 0 0 18px;padding:0}
.toast.is-html li{margin:2px 0}
.toast.is-html strong{font-weight:700}
.toast .toast-close{position:absolute;top:6px;right:8px;background:transparent;border:0;color:inherit;font-size:20px;line-height:1;cursor:pointer;padding:4px 8px;opacity:0.6;font-family:inherit;display:none}
.toast.is-html .toast-close{display:block}
.toast .toast-close:hover{opacity:1}
.toast .toast-body{display:inline}
.toast.is-html .toast-body{display:block}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{border-color:var(--accent3);color:var(--accent3)}
.toast.error{border-color:var(--red);color:var(--red)}
.toast.info{border-color:var(--accent);color:var(--accent)}

.text-accent{color:var(--accent) !important}

/* KB_REDEMPTION_V1_UI_V2_CSS */
.sm-o{background:rgba(245,158,11,0.18);color:#fbbf24;border:1px solid rgba(245,158,11,0.35)}
.sm-o:hover{background:rgba(245,158,11,0.28)}
.kb-rdm-switcher{display:inline-flex;gap:8px;align-items:center}
.kb-rdm-switcher .kb-rdm-btn{padding:8px 18px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;border:1px solid var(--border,#2a2f45);background:var(--bg3,rgba(255,255,255,0.04));color:var(--text,#e5e7eb);transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.kb-rdm-switcher .kb-rdm-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.18)}
.kb-rdm-switcher .kb-rdm-btn.active{background:linear-gradient(135deg,rgba(5,150,105,0.25),rgba(5,150,105,0.10));border-color:rgba(5,150,105,0.45);color:#34d399}
.kb-rdm-switcher .kb-rdm-btn.active-warm{background:linear-gradient(135deg,rgba(245,158,11,0.25),rgba(245,158,11,0.10));border-color:rgba(245,158,11,0.45);color:#fbbf24}
.kb-rdm-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}

/* KB_REDEMPTION_V1_UI_V3_DONE — transparent symmetric +/- buttons */
.btn-sm.sm-t{background:rgba(255,255,255,0.04);color:var(--text);border:1px solid var(--border)}
.btn-sm.sm-t:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.18)}

/* Override kb-rdm-btn của v2 → tất cả transparent, đồng nhất */
.kb-rdm-switcher .kb-rdm-btn{
  background:rgba(255,255,255,0.04) !important;
  color:var(--text,#e5e7eb) !important;
  border:1px solid var(--border,#2a2f45) !important;
  background-image:none !important;
}
.kb-rdm-switcher .kb-rdm-btn:hover{
  background:rgba(255,255,255,0.08) !important;
  border-color:rgba(255,255,255,0.18) !important;
}

/* KB_REDEMPTION_V1_UI_V4_DONE — switcher floating top-right of dash-hero */

/* Override kb-rdm-row cũ của v2 (display:flex justify-between) — không cần nữa */
.dash-hero.kb-rdm-row{
  display:block !important;
  position:relative;
}

/* Container hero ở trang /redemption (không có .dash-hero) */
.kb-rdm-hero-wrap{
  position:relative;
}

/* Switcher floating ở góc trên phải */
.kb-rdm-switcher.kb-rdm-floating{
  position:absolute;
  top:0;
  right:0;
  z-index:5;
}

/* Trên mobile (<700px): không float nữa, về flow bình thường */
@media (max-width:700px){
  .kb-rdm-switcher.kb-rdm-floating{
    position:static;
    margin:10px 0 6px;
  }
}

/* Trang /topup có padding 20px (mobile) / 28px 40px (desktop) — switcher inset cùng */
.dash-hero .kb-rdm-switcher.kb-rdm-floating{
  top:20px;
  right:20px;
}
@media (min-width:1024px){
  .dash-hero .kb-rdm-switcher.kb-rdm-floating{
    top:28px;
    right:40px;
  }
}

/* KB_REDEMPTION_V1_UI_V6_DONE — balance row with inline action pills */

/* Wrapper flex chứa badge Số dư + 2 nút trên cùng hàng (trang /topup) */
.kb-rdm-bal-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:16px;
}

/* Pills (nút) đồng bộ style transparent với border, vừa với chiều cao badge Số dư */
.kb-rdm-pill{
  display:inline-flex;
  align-items:center;
  padding:11px 18px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  border:1px solid var(--border,#2a2f45);
  background:rgba(255,255,255,0.04);
  color:var(--text,#e5e7eb);
  transition:all .15s;
  line-height:1;
  white-space:nowrap;
}
.kb-rdm-pill:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.18);
  transform:translateY(-1px);
}
.kb-rdm-pill.kb-rdm-pill-active{
  background:linear-gradient(135deg,rgba(245,158,11,0.18),rgba(245,158,11,0.08));
  border-color:rgba(245,158,11,0.4);
  color:var(--gold,#fbbf24);
}

/* Override các class kb-rdm-* cũ của v2/v3/v4 phòng còn sót */
.kb-rdm-switcher,.kb-rdm-floating,.kb-rdm-hero-wrap,.kb-rdm-row{display:revert !important;position:static !important}

/* KB_REDEMPTION_V1_UI_V8_DONE — Segmented control (mobile-first) */

/* Container: stack trên mobile, row trên desktop */
.kb-rdm-action-bar{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 0 16px;
  padding:0;
}
@media (min-width:700px){
  .kb-rdm-action-bar{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }
}

/* Badge Số dư */
.kb-rdm-balance{
  padding:10px 16px;
  background:rgba(245,158,11,0.10);
  border:1px solid rgba(245,158,11,0.30);
  border-radius:10px;
  font-size:13px;
  color:var(--gold,#fbbf24);
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1.4;
  white-space:nowrap;
  height:42px;
  box-sizing:border-box;
}
.kb-rdm-balance strong{
  color:var(--gold,#fbbf24);
  font-weight:700;
}

/* Segmented control wrapper */
.kb-rdm-segmented{
  display:inline-flex;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border,#2a2f45);
  border-radius:10px;
  padding:3px;
  width:100%;
  box-sizing:border-box;
  height:42px;
}
@media (min-width:700px){
  .kb-rdm-segmented{ width:auto; }
}

/* Mỗi segment */
.kb-rdm-seg{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  font-size:13px;
  font-weight:600;
  color:var(--text2,#9ca3af);
  text-decoration:none;
  border-radius:7px;
  transition:all .15s ease;
  white-space:nowrap;
  min-height:34px;
}
.kb-rdm-seg:hover{
  color:var(--text,#e5e7eb);
}
.kb-rdm-seg.kb-rdm-seg-active{
  background:rgba(255,255,255,0.08);
  color:var(--text,#fff);
  box-shadow:0 1px 3px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.05);
}

/* Hidden cũ — phòng còn sót class v6 */
.kb-rdm-pill,.kb-rdm-bal-row{display:none !important}

/* KB_REDEMPTION_V1_UI_V9_DONE — Neon outline buttons (xanh Nạp, cam Đổi) */

/* Hidden các class cũ của v8 phòng còn sót */
.kb-rdm-segmented,.kb-rdm-seg{display:none !important}

/* Container 2 nút: side-by-side trên cả mobile và desktop */
.kb-rdm-buttons{
  display:flex;
  gap:8px;
  width:100%;
  box-sizing:border-box;
}
@media (min-width:700px){
  .kb-rdm-buttons{ width:auto; }
}

/* Base button — chung cho cả 2 */
.kb-rdm-btn{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  height:42px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  border-radius:10px;
  border:1px solid transparent;
  transition:all .18s ease;
  white-space:nowrap;
  box-sizing:border-box;
  line-height:1;
}
@media (min-width:700px){
  .kb-rdm-btn{ flex:0 0 auto; min-width:120px; }
}

/* Nút NẠP — xanh lá */
.kb-rdm-btn-deposit{
  color:#34d399;
  background:rgba(16,185,129,0.10);
  border-color:rgba(16,185,129,0.40);
}
.kb-rdm-btn-deposit:hover{
  background:rgba(16,185,129,0.18);
  border-color:rgba(16,185,129,0.55);
  transform:translateY(-1px);
}
.kb-rdm-btn-deposit.kb-rdm-btn-active{
  background:rgba(16,185,129,0.22);
  border-color:rgba(16,185,129,0.65);
  color:#6ee7b7;
  box-shadow:0 0 0 1px rgba(16,185,129,0.25), 0 2px 8px rgba(16,185,129,0.18);
}

/* Nút ĐỔI/RÚT — cam */
.kb-rdm-btn-withdraw{
  color:#fb923c;
  background:rgba(251,146,60,0.10);
  border-color:rgba(251,146,60,0.38);
}
.kb-rdm-btn-withdraw:hover{
  background:rgba(251,146,60,0.18);
  border-color:rgba(251,146,60,0.52);
  transform:translateY(-1px);
}
.kb-rdm-btn-withdraw.kb-rdm-btn-active{
  background:rgba(251,146,60,0.22);
  border-color:rgba(251,146,60,0.62);
  color:#fdba74;
  box-shadow:0 0 0 1px rgba(251,146,60,0.22), 0 2px 8px rgba(251,146,60,0.18);
}

/* KB_REDEMPTION_V1_UI_V10_DONE — Filled active vs outline inactive */

/* Tăng min-width cho desktop để chứa label dài "+ Nạp Point" */
@media (min-width:700px){
  .kb-rdm-btn{ min-width:140px !important; }
}

/* === NÚT NẠP (xanh lá) === */

/* Inactive: chỉ viền, nền transparent — nhìn rất nhẹ */
.kb-rdm-btn-deposit{
  color:#34d399 !important;
  background:transparent !important;
  border:1.5px solid rgba(16,185,129,0.45) !important;
  box-shadow:none !important;
}
.kb-rdm-btn-deposit:hover{
  background:rgba(16,185,129,0.10) !important;
  border-color:rgba(16,185,129,0.65) !important;
}

/* Active: filled gradient + glow — nổi bật mạnh */
.kb-rdm-btn-deposit.kb-rdm-btn-active{
  color:#ffffff !important;
  background:linear-gradient(135deg,#10b981,#059669) !important;
  border:1px solid #10b981 !important;
  font-weight:600 !important;
  box-shadow:0 4px 12px rgba(16,185,129,0.40) !important;
}
.kb-rdm-btn-deposit.kb-rdm-btn-active:hover{
  background:linear-gradient(135deg,#0fcc94,#10b981) !important;
  box-shadow:0 5px 16px rgba(16,185,129,0.50) !important;
  transform:translateY(-1px);
}

/* === NÚT ĐỔI/RÚT (cam) === */

/* Inactive */
.kb-rdm-btn-withdraw{
  color:#fb923c !important;
  background:transparent !important;
  border:1.5px solid rgba(251,146,60,0.45) !important;
  box-shadow:none !important;
}
.kb-rdm-btn-withdraw:hover{
  background:rgba(251,146,60,0.10) !important;
  border-color:rgba(251,146,60,0.65) !important;
}

/* Active: filled gradient + glow cam */
.kb-rdm-btn-withdraw.kb-rdm-btn-active{
  color:#ffffff !important;
  background:linear-gradient(135deg,#f97316,#ea580c) !important;
  border:1px solid #f97316 !important;
  font-weight:600 !important;
  box-shadow:0 4px 12px rgba(249,115,22,0.40) !important;
}
.kb-rdm-btn-withdraw.kb-rdm-btn-active:hover{
  background:linear-gradient(135deg,#fb8534,#f97316) !important;
  box-shadow:0 5px 16px rgba(249,115,22,0.50) !important;
  transform:translateY(-1px);
}

/* KB_AUTOFILL_DARK_V1: giữ nền tối khi trình duyệt tự điền thông tin đã lưu (autofill).
   Chrome/Edge ép nền vàng nhạt lên input autofill làm chìm icon con mắt hiện mật khẩu
   và vỡ theme tối. Không thể đổi background trực tiếp, phải dùng box-shadow inset đè lên. */
input.fi:-webkit-autofill,
input.fi:-webkit-autofill:hover,
input.fi:-webkit-autofill:focus,
input.fi:-webkit-autofill:active,
select.fi:-webkit-autofill,
textarea.fi:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--bg3) inset !important;
  box-shadow:0 0 0 1000px var(--bg3) inset !important;
  -webkit-text-fill-color:var(--text) !important;
  caret-color:var(--text);
  transition:background-color 999999s ease-in-out 0s;
}
/* Firefox */
input.fi:autofill{
  box-shadow:0 0 0 1000px var(--bg3) inset !important;
  -webkit-text-fill-color:var(--text) !important;
}