/* ===== Reset & base ===== */
html, body { height: 100%; overflow-x: hidden; }
body { margin: 0; background: transparent !important; }

/* ===== Video nền ===== */
#background-video{
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
/* .overlay-dark{ position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1; } */

/* ===== Navbar nổi trên video ===== */
.navbar-floating { position: relative; z-index: 3; background: transparent !important; }
.navbar, .navbar .container { border: 0 !important; box-shadow: none !important; }
.navbar-floating .nav-link { color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.navbar-floating .nav-link:hover { opacity: .9; }

/* ===== Dòng chữ lớn ===== */
.hero-title{ position: relative; z-index: 2; text-align: center; margin: 14px auto 8px; }
.hero-title span{
  display: inline-block; font-weight: 800;
  font-size: clamp(24px, 5vw, 56px); line-height: 1.1; letter-spacing: .5px;
  background: linear-gradient(180deg, #fff3a6 0%, #ffd54a 45%, #b47b00 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.5);
}

/* ===== Trang đổi mật khẩu Cấp 1 ===== */
.wrap {
  max-width: 960px;
  margin: 32px auto;
  padding: 0 16px;
}

/* Ẩn bản ở góc phải cũ nếu có */
footer.glass-footer {
  display: none !important;
}

.panel {
  background: rgba(20,22,26,.55);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #e9eef7;
}
.head { padding: 16px 20px; }
.body { padding: 16px 20px; }
.meta { font-size: 13px; opacity: .8; margin-top: 10px; }
.alert {
  display:none; margin-bottom:12px; padding:10px;
  border-radius:8px; text-align:center;
}

/* ——— Sửa vị trí vùng hero để chừa chỗ cho footer ——— */
.page-login .auth-hero{
  min-height: calc(100vh - 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  position: relative;
  z-index: 2;
}

/* ——— Note tài khoản: nằm trong box, canh giữa ——— */
.page-login .auth-box .account-note{
  margin-top: 10px;
  text-align: center;
  color: rgba(255,255,255,.92);
  font-size: 14px;
}

/* ——— Footer: luôn ở dưới, không đè lên box ——— */
.glass-footer{
  position: static !important;
  margin-top: 10px;
  z-index: 1;
}

.alert-success {
  display:block; background:#0f5132; color:#d1e7dd; border:1px solid #badbcc;
}
.alert-danger {
  display:block; background:#842029; color:#f8d7da; border:1px solid #f5c2c7;
}

/* ======= Auth box giống trang Đăng nhập cho trang đổi mật khẩu ======= */
.page-login .auth-hero{
  position: relative; z-index: 2;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.page-login .auth-box{
  width: 100%;
  background: rgba(20,22,26,.55);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 22px 22px 18px;
}
.page-login .auth-title{
  margin: 0 0 12px 0; text-align: center; color: #fff; font-weight: 800; font-size: 26px;
}
.page-login .helper-row{
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; color: rgba(255,255,255,.9);
}
.page-login .alert{ margin-bottom: 12px; }

/* Ghi chú tài khoản dưới nút – canh giữa */
.page-login .auth-box .account-note{
  margin-top: 10px;
  text-align: center;
  color: rgba(255,255,255,.92);
  font-size: 14px;
}
/* .page-login .auth-box .account-note { opacity:.9; font-size:13px; } */

/* ====================================================================== */

/* ===== Khu vực auth (đăng ký/đăng nhập) ===== */
.auth-hero{
  position: relative; z-index: 2; min-height: calc(100vh - 160px);
  display: flex; align-items: flex-start; padding: 24px 0 40px;
}

/* ===== Panel kính mờ dùng chung ===== */
.glass-card{
  width: 100%; max-width: 900px; margin: 0 auto;
  background: rgba(20,22,26,.55);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  border-radius: 16px;
  padding: 28px 28px 22px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #e9eef7;
}
.glass-title{ color: #fff; font-weight: 700; text-align: center; margin-bottom: 18px; letter-spacing: .3px; }
.glass-hr{ border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); margin: 18px 0; }
.glass-footer { position: relative; z-index: 2; color: rgba(255,255,255,.8); text-align: center; padding: 14px 0 30px; }

/* ===== Inputs tối ===== */
.glass-control{
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 10px !important;
  height: 40px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.glass-control::placeholder{ color: rgba(255,255,255,.75); }
label{ color: #fff; font-weight: 600; }

/* ===== Captcha ===== */
.captcha-group{ display:flex; gap:12px; align-items:center; }
.captcha-group .form-control{ flex:1; }
.captcha-box{
  display:inline-flex; align-items:center; justify-content:center;
  width:210px; height:40px; padding:0; border-radius:10px; overflow:hidden;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
}
.captcha-box.is-static { pointer-events: none; cursor: default; }
.captcha-box.is-static img { user-select: none; }
.captcha-box img{ display:block; height: 40px; }

.form-group.captcha-wrap{ display: block !important; clear: both; }
.form-group.captcha-wrap .captcha-title{
  display: block; text-align: left !important; margin: 0 0 6px 0;
  font-weight: 700; color: #fff;
}
.form-group.captcha-wrap .captcha-group{ display: flex !important; align-items: center; gap: 12px; }
.form-group.captcha-wrap .captcha-group .form-control{ flex: 1 1 auto; }

/* ===== Nút CTA ===== */
.btn-cta{
  background: #ffd54a; border: none; color: #1d1d1f;
  font-weight: 700; padding: 12px 16px; border-radius: 10px; width:100%;
}
.btn-cta:hover{ filter: brightness(0.95); }

/* ===== Card bootstrap mặc định → trong suốt ===== */
.card{ background: transparent; border: 0; }
.card.card-body{ background: transparent; box-shadow: none; padding: 0; }

/* ===== Spacing & links ===== */
.form-group + .form-group { margin-top: 14px; }
.link-weak{ color: #e9eef7; text-decoration: underline; }
.text-light-weak{ color: rgba(255,255,255,.85); }

/* ===== Nuke đường kẻ dưới header nếu theme có chèn ===== */
.navbar, .navbar * { border: 0 !important; box-shadow: none !important; background-image: none !important; }
.navbar::before, .navbar::after,
.navbar .container::before, .navbar .container::after { content: none !important; display: none !important; }
header hr, .navbar hr, nav hr, hr.top-line, .top-line, .header-line { display: none !important; height: 0 !important; margin: 0 !important; border: 0 !important; }
.navbar .container { border-bottom: 0 !important; }

/* Ẩn navbar riêng cho trang Đăng ký/Đăng nhập */
body.page-register .navbar-floating,
body.page-register .navbar-floating * { display: none !important; }
body.page-register .hero-title { margin-top: 16px; }
body.page-login .navbar-floating,
body.page-login .navbar-floating * { display: none !important; }

/* Tối ưu padding theo chiều cao màn hình */
.auth-hero { padding: 20px 0 24px; }
@media (max-height: 760px) {
  .auth-hero { padding: 12px 0 14px; }
  .glass-card { margin: 6px auto 16px; }
}

/* ===== Footer text chỉ là chữ, không background ===== */
body.page-register .glass-footer,
body.page-login .glass-footer{
  position: fixed; left: 0; bottom: 12px; width: 100%;
  background: transparent !important; text-align: center; z-index: 2; pointer-events: none;
}
body.page-register .glass-footer .container,
body.page-login .glass-footer .container{
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 0 !important; margin: 0 auto !important; border-radius: 0 !important;
}
body.page-register .glass-footer p,
body.page-login .glass-footer p{
  margin: 0; color: rgba(255,255,255,.9); text-shadow: 0 2px 6px rgba(0,0,0,.45); font-weight: 500;
}
@media (max-height: 760px){
  body.page-register .glass-footer,
  body.page-login .glass-footer{ bottom: 6px; }
}

/* “Đã có tài khoản? …” */
.login-switch a.link-weak,
.login-switch a.link-weak:link,
.login-switch a.link-weak:visited{
  color: #ffffff !important; text-decoration: none !important; border: 0 !important;
}
.login-switch a.link-weak:hover,
.login-switch a.link-weak:focus{ color: #ff3b30 !important; text-decoration: none !important; }
.login-switch a.link-weak strong,
.login-switch a.link-weak .text-primary{ color: inherit !important; font-weight: 700; }

/* Helper text trong panel kính mờ */
.glass-card .form-text,
.glass-card .form-text.text-muted,
.glass-card .text-muted,
.glass-card small,
.glass-card .help-block { color: #ffffff !important; opacity: 0.95; }

/* Ẩn spinner cho input number (backup) */
.glass-card input[type=number]::-webkit-outer-spin-button,
.glass-card input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.glass-card input[type=number] { -moz-appearance: textfield; }

/* ===================================================================== */
/* ==== (Tùy chọn) căn 2 cột cho cặp mật khẩu ở ĐĂNG KÝ ==== */
@media (min-width: 769px) {
  .glass-card .form-row { display:flex; gap:20px; }
  .glass-card .form-row { align-items: flex-start; }
  .glass-card .form-row .form-group { flex:1; }
}
@media (min-width: 769px){
  .glass-card .form-row{ display: flex; gap: 20px; align-items: flex-start; }
  .glass-card .form-row .form-group{ flex: 1 1 0; margin-top: 0 !important; }
  .glass-card .form-row .form-group + .form-group{ margin-top: 0 !important; }
}

/* ===================== Dashboard / Trang tài khoản ===================== */
:root{
  --panel-max: 920px; /* ví dụ: 860px, 900px, 980px */
  --sidebar-w: 280px;
  --sidegap: 16px;
}

body.page-dashboard{
  font-family: "Be Vietnam Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #e9eef7;
}

/* Lưới: sidebar + nội dung (mặc định 2 cột) */
.dash-wrap{
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
  padding: 32px 24px;
  align-items: start;
}

/* Sidebar */
.dash-sidebar{
  padding: 16px;
  border-radius: 16px;
  background: rgba(20,22,26,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dash-nav{ display: flex; flex-direction: column; gap: 10px; }
.dash-nav .nav-item{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  color: #fff; text-decoration: none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .06s ease, background .2s ease;
}
.dash-nav .nav-item i{ width: 18px; text-align: center; opacity: .95; }
.dash-nav .nav-item:hover{ background: rgba(255,255,255,.14); transform: translateY(-1px); }
.dash-nav .nav-item.is-active{ background: rgba(255,255,255,.18); }
.dash-nav .nav-item.logout{ background: rgba(255,77,77,.16); border-color: rgba(255,77,77,.3); }
.dash-nav .nav-item.logout:hover{ background: rgba(255,77,77,.24); }

/* Panel kính mờ chung */
.dash-main{
  padding: 18px 18px 10px;
  border-radius: 16px;
  background: rgba(20,22,26,.55);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  width: min(100%, var(--panel-max));
  margin-inline: auto;
}

/* Tiêu đề & nhóm thông tin */
.dash-title{
  font-weight: 800; letter-spacing: .3px; text-align: center;
  margin: 6px 0 16px; color: #fff; font-size: 24px;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.dash-subtitle{
  margin: 18px 0 10px; font-weight: 800; color: #fff; font-size: 18px;
}

/* Grid thông tin */
.info-grid{ display: grid; grid-template-columns: 1fr; gap: 10px; }
.info-row{
  display: grid;
  grid-template-columns: 220px 1fr auto; /* label | value | action */
  gap: 12px; align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
}
.info-label{ font-weight: 600; color: #fff; opacity: .95; }
.info-value{ color: #fff; }
.info-cta{ display: flex; align-items: center; }

.btn-update{
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  border-radius: 10px;
  background: rgba(255,213,74,.18);
  border: 1px solid rgba(255,213,74,.45);
  color: #ffd54a; text-decoration: none; font-weight: 700;
}
.btn-update:hover{ filter: brightness(1.05); }

.badge{
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: 999px; font-weight: 700; font-size: 13px;
  border: 1px solid transparent;
}
.badge-green{ color: #79e68c; background: rgba(121,230,140,.14); border-color: rgba(121,230,140,.35); }
.badge-red  { color: #ff8c8c; background: rgba(255,76,76,.16);  border-color: rgba(255,76,76,.35); }
.badge-grey { color: #d6dde6; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }

.dash-footer{
  margin-top: 14px; text-align: center;
  color: rgba(255,255,255,.85);
}

/* Responsive chung */
@media (max-width: 1024px){
  .dash-wrap{ grid-template-columns: 1fr; }
  .dash-main{ margin-inline: auto; }
}
@media (max-width: 560px){
  .info-row{ grid-template-columns: 1fr; }
  .info-label { opacity: .8; }
}

/* ===== Điều chỉnh riêng nếu theme dùng page-account ===== */
body.page-account .dash-main{
  width: min(100%, var(--panel-max));
  margin-inline: auto;
}

/* === Move sidebar (ô 1) sát khối thông tin (vị trí 2) — chỉ cho trang dashboard KHÔNG phải topup-page === */
body.page-dashboard:not(.topup-page) .dash-wrap{
  grid-template-columns: minmax(0, 1fr) !important;
}
body.page-dashboard:not(.topup-page) .dash-main{
  width: min(100%, var(--panel-max)) !important;
  margin-inline: auto !important;
}
body.page-dashboard:not(.topup-page) .dash-sidebar{
  position: fixed !important;
  top: 32px !important;
  left: calc(50vw - (var(--panel-max) / 2) - var(--sidegap) - var(--sidebar-w)) !important;
  width: var(--sidebar-w) !important;
  z-index: 3 !important;
}
@media (max-width: 1024px){
  body.page-dashboard:not(.topup-page) .dash-wrap{ padding-top: 0 !important; }
  body.page-dashboard:not(.topup-page) .dash-sidebar{
    position: static !important;
    width: auto !important;
    margin-bottom: 16px !important;
  }
  body.page-dashboard:not(.topup-page) .dash-main{ margin-inline: auto !important; }
}

/* --- spacing patch: ensure rows and sections don't overlap --- */
.info-grid { display: grid; grid-auto-rows: minmax(36px, auto); row-gap: 12px; }
.info-grid + .info-grid { margin-top: 12px; }
.info-row { align-items: center; }

/* ======= Căn giữa copyright cho trang đổi mật khẩu ======= */
.hero-copyright {
  position: relative;
  text-align: center;
  margin-top: 10px;
  color: #fff;
  font-size: 14px;
  opacity: 0.8;
}

/* ===================== TOPUP PAGE (Nạp thẻ) ===================== */
:root{
  /* dùng chung với dashboard, có thể chỉnh nếu cần */
  --right-w: 340px;
  --gut: 20px;
}

/* 3 cột: Sidebar | Thanh toán | Tỷ lệ nạp (bên phải) */
body.topup-page .dash-wrap{
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, var(--panel-max)) var(--right-w);
  column-gap: var(--gut);
  justify-content: center;
  align-items: start;
  padding-left: 16px;
  padding-right: 16px;
}

/* Sidebar không fixed trên trang nạp */
body.topup-page .dash-sidebar{
  position: static !important;
  width: var(--sidebar-w) !important;
  margin: 0 !important;
  z-index: 2;
}

/* Panel giữa đúng bề ngang var(--panel-max) */
body.topup-page .dash-main{
  width: var(--panel-max) !important;
  margin: 0 !important;
}

/* Panel “Tỷ lệ nạp” bên phải */
body.topup-page .rate-panel{
  width: var(--right-w);
  position: sticky; top: 24px;
  align-self: start;
  background: rgba(20,22,26,.55);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 16px;
  color: #e9eef7;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.topup-page .rate-panel .rate-title{
  color:#fff; font-weight:800; font-size:18px; text-align:center; margin-bottom:10px;
}
body.topup-page .rate-panel .rate-hr{
  border:0; height:1px; margin:10px 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
body.topup-page .rate-panel .dash-nav .nav-item{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 12px 14px;
}

/* KPI & phương thức nạp */
body.topup-page .dash-title{
  text-align:center; color:#fff; font-weight:800; letter-spacing:.3px;
  margin: 6px 0 12px;
}
body.topup-page .pay-kpi{
  display:flex; justify-content:space-between; gap:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
body.topup-page .pay-kpi-left{ display:flex; gap:12px; align-items:center; }
body.topup-page .pay-kpi-left .pay-pig img{ width:38px; height:38px; display:block; }
body.topup-page .pay-kpi-title{ color:#fff; font-weight:800; line-height:1; }
body.topup-page .pay-kpi-desc{ color:#fff; opacity:.95; }
body.topup-page .pay-kpi-right{ display:flex; align-items:center; }
body.topup-page .pay-rate strong{ margin-right:8px; }
body.topup-page .pay-badge{
  display:inline-flex; align-items:center; padding:4px 10px; margin-left:8px;
  border-radius:999px; font-weight:700; font-size:13px;
  color:#79e68c; background:rgba(121,230,140,.14); border:1px solid rgba(121,230,140,.35);
}
body.topup-page .pay-subtitle{
  color:#fff; font-weight:800; font-size:18px; margin:10px 0 8px;
}
body.topup-page .pay-methods{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
body.topup-page .pay-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
body.topup-page .pay-bubble{
  display:inline-flex; align-items:center; justify-content:center;
  width:86px; height:86px; border-radius:50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  text-decoration:none; transition: transform .08s ease, background .2s ease;
}
body.topup-page .pay-bubble i{ font-size:28px; color:#ffd54a; }
body.topup-page .pay-bubble:hover{ background: rgba(255,255,255,.14); transform: translateY(-2px); }
body.topup-page .pay-name{ color:#fff; font-weight:600; }
body.topup-page .dash-footer{
  margin-top: 14px; text-align:center; color: rgba(255,255,255,.85);
}

/* Responsive: dưới 1200px xếp dọc */
@media (max-width:1200px){
  body.topup-page .dash-wrap{
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  body.topup-page .dash-main{ width: min(100%, var(--panel-max)) !important; }
  body.topup-page .rate-panel{ width: auto; position: static; margin-top: 12px; }
}
/* ≤ 560px: lưới phương thức 2 cột, icon nhỏ hơn */
@media (max-width: 560px){
  body.topup-page .pay-methods{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.topup-page .pay-bubble{ width:76px; height:76px; }
  body.topup-page .pay-bubble i{ font-size:24px; }
}

/* === PATCH: Tăng khoảng cách giữa Sidebar ↔ Thanh toán ↔ Tỷ lệ nạp (chỉ trang nạp thẻ) === */
body.topup-page{
  --gut: 36px;
}
@media (min-width: 1600px){
  body.topup-page{ --gut: 44px; }
}
body.topup-page .dash-wrap{
  column-gap: var(--gut) !important;
}
body.topup-page .dash-main{
  box-shadow: 0 8px 30px rgba(0,0,0,.40);
}

/* ===== Bảng Tỷ Lệ Nạp (Rate Table) ===== */
.rate-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 12px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  overflow: hidden;
}
.rate-table th, .rate-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.rate-table th {
  font-weight: 700;
  background: rgba(255,255,255,.12);
}
.rate-table tr:last-child td { border-bottom: none; }
.rate-table tr:hover td { background: rgba(255,255,255,.10); }

/* ===== Icon ảnh trong ô tròn + Fallback Font Awesome ===== */
.pay-bubble img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
  transition: transform .15s ease;
}
.pay-bubble:hover img { transform: scale(1.08); }

/* Fallback: Nếu ảnh lỗi/không có → dùng FA */
.pay-bubble i { display: none; }
.pay-bubble.use-fa img { display: none; }
.pay-bubble.use-fa i { display: block; }

/* ===================== OVERRIDES CHO TRANG NẠP THẺ (scope theo .topup-page) ===================== */
/* Biến & nền riêng cho topup-page (không ảnh hưởng trang khác) */
body.topup-page{
  --glass-bd: rgba(255,255,255,.08);
  --shadow: 0 28px 80px rgba(0,0,0,.55);
  --shadow-soft: 0 14px 36px rgba(0,0,0,.45);
  --text: #f6f7fb;
  --muted: rgba(255,255,255,.85);
  --line: rgba(255,255,255,.12);
  --panel-max: 980px;
  --sidebar-w: 260px;
  --right-w: 360px;
  --gap: 22px;
  --radius: 18px;
}
body.topup-page #background-video{ z-index: -2; }
body.topup-page .veil{
  position:fixed; inset:0;
  background: radial-gradient(1200px 600px at 50% 20%, rgba(0,0,0,.22), transparent 60%),
              linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.12) 40%, transparent);
  z-index:-1;
}

/* Lưới 3 cột cho layout topup (sidebar | main | right) */
body.topup-page .wrap{
  min-height:100vh;
  display:grid;
  grid-template-columns: var(--sidebar-w) minmax(0, var(--panel-max)) var(--right-w);
  gap: var(--gap);
  align-items:start;
  padding: 22px;
  box-sizing:border-box;
  width:100%;
  max-width: calc(var(--sidebar-w) + var(--panel-max) + var(--right-w) + 2*var(--gap));
  margin-inline:auto;
}

/* Glass */
body.topup-page .glass{
  background: linear-gradient(180deg, rgba(22,24,27,.70), rgba(22,24,27,.50));
  border: 1px solid var(--glass-bd);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
}
body.topup-page .glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 30%, transparent 60%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px; opacity:.35;
}

/* Sidebar nav */
body.topup-page .sidebar{ padding:14px; }
body.topup-page .nav{ display:flex; flex-direction:column; gap:10px; }
body.topup-page .nav a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; text-decoration:none; color: var(--text);
  border-radius:12px; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow-soft);
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
body.topup-page .nav a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
body.topup-page .nav a.is-active{ background: rgba(121,230,140,.16); border-color: rgba(121,230,140,.35); color:#fff; font-weight:800; }
body.topup-page .nav a.logout{ background: rgba(255,77,77,.16); border-color: rgba(255,77,77,.35); }

/* Main panel */
body.topup-page .main{ padding: 18px; }
body.topup-page .title{
  margin:4px 0 8px; text-align:center; font-size:24px;
  font-weight:900; letter-spacing:.3px;
  text-shadow: 0 3px 20px rgba(0,0,0,.6); color:#79e68c;
}
body.topup-page .hr{ height:1px; margin:12px 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); border:0; }

/* Card */
body.topup-page .card{
  padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}

/* Pay grid (2 cột bằng nhau, chống tràn) */
body.topup-page .pay-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:16px 24px;
  align-items:start;
}
body.topup-page .pay-grid > * { min-width:0; }

body.topup-page .info-grid{ display:grid; grid-template-columns: 1fr 2fr; gap:10px 12px; }
body.topup-page .info-label{ font-weight:700; color:#fff; }
body.topup-page .info-value{ font-weight:800; color:#fff; }

/* QR box */
body.topup-page .qr-box{ display:flex; flex-direction:column; align-items:center; justify-self:center; }
body.topup-page .qr{
  width: min(360px, 100%);
  max-width: 100%;
  border-radius:12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  transition: transform .12s ease;
}
body.topup-page .qr:hover{ transform: scale(1.03); }

/* Rate panel (phải) tương ứng block .rate cũ */
body.topup-page .rate{ padding:14px; }
body.topup-page .rate .rate-title{
  font-weight:900; text-align:center; margin:0 0 10px; color:#fff;
}
body.topup-page .rate .tag{
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  max-width:calc(100% - 28px); padding:10px 14px; border-radius:10px; font-weight:800; color:#fff;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25));
  border:1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.1), 0 3px 10px rgba(0,0,0,.4);
  text-align:center; box-sizing:border-box;
}

/* Toggle menu (mobile) */
body.topup-page .nav-toggle{
  display:none; position:fixed; top:12px; left:12px; z-index:99;
  padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  color:#fff; background: rgba(0,0,0,.35); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft); cursor:pointer;
}

/* Media queries cho topup-page */
@media (max-width: 1200px){
  body.topup-page .wrap{ grid-template-columns: var(--sidebar-w) 1fr; }
  body.topup-page .rate{ grid-column: 1 / -1; }
}
@media (max-width: 900px){
  body.topup-page .pay-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 820px){
  body.topup-page .wrap{ grid-template-columns: 1fr; }
  body.topup-page .sidebar{ display:none; }
  body.topup-page .sidebar.show{ display:block; }
  body.topup-page .nav-toggle{ display:block; }
}

/* ===== Chặn scroll RIÊNG trang nạp thẻ ===== */
body.topup-page{
  height: 100vh;          /* khóa đúng bằng chiều cao viewport */
  overflow: hidden;       /* ẩn scrollbar dọc/lẫn ngang */
}

/* (tùy chọn) nếu muốn vẫn cho scroll ở màn hình rất thấp chiều cao */
@media (max-height: 620px){
  body.topup-page{ overflow: auto; } /* tránh bị “cụt” nội dung trên laptop nhỏ */
}