/* =========================
   0) RESET + BASE
========================= */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Kanit',sans-serif}
html,body{height:100%}
html{overflow-y:scroll}
body{
  color:#fff;
  overflow-x:hidden;
  position:relative;
  background:#000;
  padding-top:76px; /* ✅ navbar fixed ทุกจอ */
}

/* container */
:root{
  --container:1200px;
  --gutter:40px;
}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
@media(max-width:768px){:root{--gutter:16px}}

/* กัน transform ทำ fixed เพี้ยน */
html, body{ transform:none !important; filter:none !important; }

/* =========================
   1) BG (GLOW)
========================= */
/* FIX FOOTER GAP */
html, body{
  min-height: 100%;
  margin: 0;
  background:#000;
}
body{ background:#000; }
footer.footer{ margin-top: auto; }

.bg-glow{
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  transform: translateZ(0);
  background:
    radial-gradient(circle at 20% 30%, rgba(0,200,255,.55), transparent 55%),
    radial-gradient(circle at 80% 25%, rgba(0,160,255,.40), transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(140,80,255,.45), transparent 65%);
  filter: blur(110px);
  opacity: 1;
}
.bg-dim{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(0,0,0,.35);
}

/* =========================
   2) NAVBAR
========================= */
.navbar-light{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2147482000;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(240,245,250,.90));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,.08);
  transform:none !important;
}
.navbar-light::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:6px;
  background: linear-gradient(90deg,#3ecbff,#29b6ff,#5cf3ff);
}
.nav-inner-light{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* BRAND */
.brand-netflix2{display:flex; align-items:center; text-decoration:none}
.brand-title.nf2{
  display:flex; align-items:baseline;
  font-weight:900; font-size:40px; letter-spacing:1px; line-height:.9;
}
.brand-title.nf2 .twell{color:#3ecbff}
.brand-title.nf2 .shop{
  color:#fff; margin-left:6px;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
@media(max-width:980px){.brand-title.nf2{font-size:34px}}
@media(max-width:520px){.brand-title.nf2{font-size:28px}}

/* NAV LINKS */
.nav-links-light{display:flex;align-items:center;gap:18px;white-space:nowrap}
.nav-link-light,.nav-text-link{
  display:inline-flex; align-items:center; gap:8px;
  border:none; background:transparent; cursor:pointer;
  color: rgba(0,0,0,.72); text-decoration:none;
  font-weight:800; font-size:14px;
  padding:8px 12px; border-radius:12px;
  transition:.18s ease;
}
.nav-link-light i{font-size:14px;opacity:.85}
.nav-link-light:hover,.nav-text-link:hover{
  background: rgba(62,203,255,.16);
  color:#0b6fa1;
}
.nav-link-light.active{
  background: linear-gradient(135deg,#3ecbff,#29b6ff);
  color:#fff;
  box-shadow: 0 8px 18px rgba(62,203,255,.35);
}

.nav-right-light{display:flex;align-items:center;gap:12px}
.nav-btn{
  background: linear-gradient(135deg,#3ecbff,#29b6ff);
  color:#fff;
  font-weight:900; font-size:14px; text-decoration:none;
  padding:10px 14px; border-radius:14px;
  box-shadow:0 10px 24px rgba(62,203,255,.30);
  transition:.18s ease;
}
.nav-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.nav-btn:active{transform:translateY(0) scale(.98)}

.nav-burger-light{
  display:none; width:42px; height:42px;
  border-radius:12px; border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.95); cursor:pointer;
}
.nav-burger-light i{color:#111;font-size:16px}

.nav-desktop-only{display:inline-flex;}
@media(max-width:980px){
  .nav-links-light{display:none}
  .nav-desktop-only{display:none}
  .nav-burger-light{display:inline-grid;place-items:center}
}

/* =========================
   3) MOBILE NAV (Fullscreen Sheet)
========================= */
#mnav{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: none !important;
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
#mnav.open{ display:block !important; }
#mnav .mnav-panel{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(360px, 92vw) !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 16px !important;
  padding-top: calc(16px + env(safe-area-inset-top)) !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  background: rgba(16,18,24,.78) !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: -30px 0 80px rgba(0,0,0,.55) !important;
  transform: translateX(110%) !important;
  transition: transform .22s ease !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
#mnav.open .mnav-panel{ transform: translateX(0) !important; }
#mnav .mnav-top{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  padding-bottom: 12px !important;
  background: rgba(16,18,24,.78) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
#mnav .mnav-close{
  border: none !important;
  cursor: pointer !important;
  font-weight: 900 !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  color:#fff !important;
  background: linear-gradient(135deg,#3ecbff,#29b6ff) !important;
  box-shadow: 0 12px 28px rgba(62,203,255,.28) !important;
}
#mnav .mnav-links{ display: grid !important; gap: 10px !important; margin-top: 6px !important; }
#mnav .mnav-link{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  padding:12px 12px !important;
  border-radius:14px !important;
  text-decoration:none !important;
  color: rgba(255,255,255,.92) !important;
  font-weight:900 !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
#mnav .mnav-btnlink{ cursor:pointer !important; text-align:left !important; }
#mnav .mnav-auth{
  margin-top: 16px !important;
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:12px !important;
}
#mnav .mnav-login,
#mnav .mnav-signup{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:12px 12px !important;
  border-radius:14px !important;
  text-decoration:none !important;
  font-weight:900 !important;
}
#mnav .mnav-login{
  color:#fff !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
#mnav .mnav-signup{
  color:#001018 !important;
  background: linear-gradient(135deg,#3ecbff,#29b6ff) !important;
  box-shadow: 0 12px 28px rgba(62,203,255,.25) !important;
}

/* =========================
   4) BUTTONS
========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:14px;
  text-decoration:none; cursor:pointer; border:none; font-weight:900;
}
.btn.primary{
  background: linear-gradient(90deg,#25c6ff,#2ee6ff);
  color:#001018; box-shadow:0 12px 28px rgba(37,198,255,.25);
}
.btn.ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
}

/* =========================
   5) HERO (หน้าแรก)
========================= */
.hero{position:relative;min-height:78vh;display:flex;align-items:center}
.hero-blur::before{
  content:""; position:absolute; inset:0;
  background-image: var(--hero-img);
  background-size: cover; background-position:center;
  filter: blur(18px) saturate(1.05);
  transform: scale(1.08); opacity:.55;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,180,255,.22), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(0,120,255,.18), transparent 50%);
  mix-blend-mode: screen;
}
.hero::before { animation: glowMove 10s linear infinite; }
@keyframes glowMove {
  0% { transform: translateX(-8%) scale(1.08); }
  100% { transform: translateX(8%) scale(1.08); }
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.10), rgba(0,0,0,.45) 62%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.20));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-content{
  position:relative; text-align:center;
  max-width:780px; margin:0 auto; padding:18px 0;
}
.hero h1{font-size:44px;font-weight:900;margin-bottom:12px}
.hero-brand{
  background: linear-gradient(90deg,#29b6ff,#5cf3ff);
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
  text-shadow: 0 12px 35px rgba(41,182,255,.20);
}
.hero p{color:rgba(255,255,255,.80);margin-bottom:18px;font-weight:700}
.hero-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
@media(max-width:520px){
  .hero{min-height:70vh}
  .hero h1{font-size:30px;line-height:1.15}
  .hero p{font-size:13px}
  .btn{width:100%}
}

/* =========================
   6) CARDS (หน้าแรก)
========================= */
.cards{
  padding:30px 0 70px;
  position: relative;
  z-index: 2;
  background:#000;
  isolation:isolate;
  overflow:hidden;
}
.section-head h2{color:#31d4ff;font-size:18px;font-weight:900;margin-bottom:6px}
.section-head p{color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.9px;margin-bottom:18px}

.card-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 520px));
  gap: 26px;
  justify-content:center;
}
.card{
  --accent:#29b6ff;
  --accent2:#5cf3ff;
  position: relative;
  z-index: 1;
  text-decoration:none; color:#fff;
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow:0 18px 48px rgba(0,0,0,.35);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
  isolation:isolate;
}
.card::before{
  content:"";
  position:absolute;
  inset:-70%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 45%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--accent2) 45%, transparent), transparent 52%),
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 58%);
  filter: blur(95px);
  opacity:.35;
  transform: scale(1);
  transition: opacity .35s ease, transform .6s ease;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 300px at 50% 120%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%);
  opacity:0;
  transition: opacity .25s ease;
}
.card:hover{
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.18));
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 42px color-mix(in srgb, var(--accent) 28%, transparent);
  filter: brightness(1.05);
}
.card:hover::before{ opacity:.95; transform: scale(1.12); }
.card:hover::after{ opacity:1; }
.card:active{ transform: translateY(-2px) scale(.985); }

.card-img{width:100%; aspect-ratio:16/9; background: rgba(0,0,0,.25)}
.card-img img{width:100%; height:100%; display:block; object-fit:cover}
.card-body{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; padding:14px 16px 16px;
}
.card-body h3{font-size:16px;font-weight:900;margin-bottom:6px}
.card-body p{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:8px}
.note{font-size:12px;color:rgba(255,255,255,.62)}
.note.hot{color:#ff9f1c;font-weight:800}
.mini{
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mini i{font-size:15px}
.card:hover .mini{
  background: color-mix(in srgb, var(--accent) 22%, rgba(0,0,0,.35));
  border-color: color-mix(in srgb, var(--accent) 35%, rgba(255,255,255,.12));
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateY(-1px);
}
@media(max-width:900px){
  .card-grid{grid-template-columns:1fr}
}

/* background aura + grid noise */
.cards::before{
  content:"";
  position:absolute;
  inset:-25%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% 40%, rgba(0,180,255,.14), transparent 70%),
    radial-gradient(700px 480px at 28% 28%, rgba(41,182,255,.28), transparent 72%),
    radial-gradient(700px 480px at 72% 28%, rgba(0,255,190,.18), transparent 74%),
    radial-gradient(700px 480px at 28% 72%, rgba(255,160,40,.18), transparent 74%),
    radial-gradient(700px 480px at 72% 72%, rgba(255,79,216,.22), transparent 74%);
  filter: blur(75px);
  opacity: .95;
  transform: translateZ(0);
  animation: storeAuraMove 12s ease-in-out infinite alternate;
}
@keyframes storeAuraMove{
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.06) translateY(-10px); }
}
.cards::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(circle at 50% 40%, transparent 35%, rgba(0,0,0,.70) 100%);
  background-size: 56px 56px, 56px 56px, cover;
  opacity: .12;
  mix-blend-mode: overlay;
}

/* =========================
   7) PAGE HERO (Topup/Products/App)
========================= */
.page-hero{
  padding: 44px 0 38px;
  background:
    linear-gradient(90deg,#071c3a 0%,#0a3b8f 42%,#0a86c9 72%,#0cc2e3 100%);
  border-bottom: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow: hidden;
}
.page-hero-inner h1{font-size: 34px;font-weight: 900;margin-bottom: 6px;color:#ffffff;}
.page-hero-inner p{margin-top:6px;color: rgba(255,255,255,.85);font-size: 13px;font-weight: 900;opacity:.9;}

/* =========================
   8) TOPUP WRAP
========================= */
.topup-wrap{
  position: relative;
  z-index: 1;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 30% 40%, rgba(0,170,255,.40), transparent 65%),
    radial-gradient(700px 380px at 70% 60%, rgba(120,90,255,.25), transparent 70%),
    linear-gradient(180deg, #00060c 0%, #031a30 45%, #00060c 100%) !important;
  padding: 48px 0 80px;
}
.topup-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.45) 100%);
}
.topup-wrap::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 35% 50%, rgba(255,90,90,.65), transparent 72%),
    radial-gradient(900px 520px at 65% 50%, rgba(255,150,220,.60), transparent 74%),
    linear-gradient(180deg,#000814 0%,#071c33 45%,#000814 100%);
  filter: blur(140px);
  opacity: 1;
  transform: translateZ(0);
}

/* =========================
   9) TOPUP (2 CARDS)
========================= */
.topup-cards2{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 520px));
  gap: 26px;
  justify-content:center;
  align-items: stretch;
}
@media (max-width: 900px){
  .topup-cards2{grid-template-columns:1fr;gap:16px;}
}
.topup-card2{
  position: relative;
  width:100%;
  min-height: 210px;
  padding: 24px 18px;
  border-radius: 18px;
  cursor: pointer;
  text-align:center;
  border: 1.5px solid rgba(140,235,255,.85);
  box-shadow:
    0 0 0 1px rgba(140,235,255,.22),
    0 26px 90px rgba(0,0,0,.78),
    0 0 48px rgba(0,190,255,.25),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  overflow:hidden;
  isolation:isolate;
  transition: transform .22s ease, filter .22s ease, border-color .22s ease;
  background:
    linear-gradient(135deg,
      rgba(0,90,170,.96) 0%,
      rgba(0,190,255,.62) 55%,
      rgba(0,120,220,.82) 100%
    );
}
.topup-card2::before{
  content:"";
  position:absolute;
  inset:-65%;
  z-index:-1;
  pointer-events:none;
  background: radial-gradient(circle at 50% 50%, rgba(0,220,255,.75), transparent 56%);
  filter: blur(120px);
  opacity: .95;
}
.topup-card2::after{
  content:"";
  position:absolute;
  left:-30%;
  top:-40%;
  width:80%;
  height:120%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity:.25;
  pointer-events:none;
  transition: opacity .25s ease;
}
.topup-card2:hover{
  transform: translateY(-8px) scale(1.02);
  filter: brightness(1.08) saturate(1.18);
  border-color: rgba(62,203,255,.45);
}
.topup-card2:hover::after{opacity:.55}

.topup-card2.wallet{
  background: linear-gradient(135deg,#ff4b4b 0%,#d60000 60%,#a80000 100%);
  border-color: rgba(255,180,180,.9);
  box-shadow:
    0 0 0 1px rgba(255,180,180,.25),
    0 26px 90px rgba(0,0,0,.75),
    0 0 45px rgba(255,80,80,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.topup-card2.wallet::before{
  background: radial-gradient(circle at center, rgba(255,90,90,.75), transparent 58%);
  filter: blur(120px);
}
.topup-card2.bank{
  background: linear-gradient(135deg,#ff8acb 0%,#ff4fa3 60%,#b81a6f 100%);
  border-color: rgba(255,200,230,.9);
  box-shadow:
    0 0 0 1px rgba(255,200,230,.25),
    0 26px 90px rgba(0,0,0,.75),
    0 0 45px rgba(255,120,200,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.topup-card2.bank::before{
  background: radial-gradient(circle at center, rgba(255,140,210,.75), transparent 58%);
  filter: blur(120px);
}
.topup-card2.is-active{ outline: 2px solid rgba(255,255,255,.95); }

.topup-card2-icon{
  width:86px;height:86px;border-radius:18px;
  display:grid;place-items:center;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  overflow:hidden;
  transition: transform .22s ease, border-color .22s ease;
}
.topup-card2:hover .topup-card2-icon{transform: translateY(-2px) scale(1.02);border-color: rgba(62,203,255,.25);}
.topup-card2-icon img{width:100%; height:100%; object-fit:contain; display:block; padding:10px;}
.topup-card2-title{font-weight:900;font-size:16px;color: rgba(255,255,255,.96);}
.topup-card2-meta{display:inline-flex;gap:10px;align-items:center;justify-content:center;color: rgba(255,255,255,.80);font-size:12px;font-weight:800;}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 10px;border-radius:999px;font-weight:900;font-size:12px;
  background: rgba(0,0,0,.25);border: 1px solid rgba(255,255,255,.14);
}
.pill.ok{color:#48ffb6;background: rgba(60,255,170,.12);border-color: rgba(60,255,170,.22);}
.muted-dark{color: rgba(255,255,255,.75);font-size: 12px;font-weight: 800;}

/* =========================
   10) FOOTER
========================= */
.footer{
  background:#000 !important;
  border-top: 1px solid rgba(255,255,255,.08);
  position:relative;
  z-index:10;
  isolation:isolate;
}
.footer::before{content:"";position:absolute;inset:0;background:#000;z-index:-1;}
.footer-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  padding:40px 0; align-items:center;
}
.footer-about h2{font-size:18px;font-weight:900;margin-bottom:10px}
.footer-about p{font-size:13px;color:rgba(255,255,255,.72);line-height:1.7}
.footer-right{display:flex;justify-content:flex-end}
.footer-contact-box{display:flex;flex-direction:column;align-items:center;gap:12px}
.footer-contact-title{font-size:30px;font-weight:900;color:#fff;line-height:1}
.footer-icons{display:flex;gap:14px}
.icon-btn{
  width:56px;height:56px;border-radius:16px;border:none;cursor:pointer;
  display:grid;place-items:center;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.icon-btn i{font-size:22px;color:#fff}
.icon-btn.fb{background: linear-gradient(135deg,#1877f2,#4e9bff);box-shadow: 0 10px 26px rgba(24,119,242,.45);}
.icon-btn.discord{background: linear-gradient(135deg,#5865F2,#7b83ff);box-shadow: 0 10px 26px rgba(88,101,242,.45);}
.icon-btn:hover{transform:translateY(-3px) scale(1.08);filter:brightness(1.08)}
.icon-btn:active{transform:translateY(0) scale(.95);box-shadow:none}
.footer-copy{
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.55);
  padding:14px 0 22px;
  background:#000 !important;
}
@media(max-width:900px){
  .footer-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px;}
  .footer-right{justify-content:center}
}

/* =========================
   11) MODAL
========================= */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center;
  z-index:2147483500; padding:16px;
}
.modal.active{display:flex}
.modal.is-open{display:flex}
.modal-white{
  width:min(520px,100%);
  background:#fff; color:#111;
  border-radius:16px;
  padding:18px;
  box-shadow:0 25px 80px rgba(0,0,0,.45);
  position:relative;
  letter-spacing:.2px;
}
.modal-title{font-size:22px;font-weight:900;margin-bottom:2px;color:#111}
.modal-sub{font-size:14px;color:#666;margin-bottom:18px;line-height:1.6}
.modal-close{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
  display:grid; place-items:center;
}
.modal-close i{font-size:16px;color:#333}
.contact-row{
  display:flex; gap:14px; align-items:center;
  text-decoration:none;
  background:#f7f7f8;
  border:1px solid #eee;
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:10px;
  transition:.2s ease;
}
.contact-row:hover{transform:translateY(-2px);background:#f3f4f6;border-color:#e5e7eb;}
.row-ic{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  flex-shrink:0;
  transition:transform .18s ease, box-shadow .18s ease;
}
.row-ic i{font-size:22px;color:#fff}
.row-ic.fb{background: linear-gradient(135deg,#1877f2,#4e9bff);box-shadow: 0 8px 22px rgba(24,119,242,.35);}
.row-ic.discord{background: linear-gradient(135deg,#5865F2,#7b83ff);box-shadow: 0 8px 22px rgba(88,101,242,.35);}
.contact-row:hover .row-ic{transform:scale(1.06)}
.row-title{font-size:15px;font-weight:700;color:#111}
.row-link{font-size:13px;color:#666;line-height:1.5;word-break:break-all}

/* =========================
   12) AUTH (Login / Signup) - scoped
========================= */
.page-auth .auth-main{
  min-height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 36px 16px;
}
.page-auth .auth-card{
  width: min(560px, 100%);
  border-radius: 18px;
  background: rgba(18, 22, 28, 0.68);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 26px 24px 22px;
}
.page-auth .auth-card.auth-wide{width: min(620px, 100%);}
.page-auth .auth-title{margin: 0 0 16px;font-size: 30px;font-weight: 900;color: #eaf2ff;letter-spacing: .2px;}
.page-auth .auth-title.center{ text-align:center; }
.page-auth .auth-form{ display: grid; gap: 14px; }
.page-auth .grid-2{display: grid;grid-template-columns: 1fr 1fr;gap: 14px;}
@media (max-width: 680px){ .page-auth .grid-2{ grid-template-columns: 1fr; } }
.page-auth .field{ display: grid; gap: 8px; }
.page-auth .label{font-size: 14px;color: rgba(234,242,255,0.78);display: inline-flex;gap: 8px;align-items: center;}
.page-auth .input{
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  outline: none;
  color: #eaf2ff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: .18s ease;
}
.page-auth .input:focus{
  border-color: rgba(0,163,255,0.55);
  box-shadow: 0 0 0 4px rgba(0,163,255,0.15);
  background: rgba(255,255,255,0.07);
}
.page-auth .auth-btn{
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 900;
  color: #eaf2ff;
  background: linear-gradient(180deg, rgba(0,163,255,1), rgba(0,112,255,1));
  box-shadow: 0 12px 30px rgba(0,112,255,0.25);
}
.page-auth .auth-sub{
  font-size: 13px;
  color: rgba(234,242,255,0.72);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.page-auth .auth-sub.center{ justify-content: center; }
.page-auth .auth-link{color: #ffcc55;text-decoration: none;}
.page-auth .auth-link:hover{ text-decoration: underline; }
.page-auth .auth-divider{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.page-auth .auth-divider::before,
.page-auth .auth-divider::after{content:"";height: 1px;background: rgba(255,255,255,0.10);}
.page-auth .auth-divider span{font-size: 13px;color: rgba(234,242,255,0.62);}
.page-auth .social-row{display: flex;justify-content: center;gap: 14px;padding-top: 6px;}
.page-auth .social-btn{
  width: 40px;height: 40px;border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(234,242,255,0.88);
  cursor: pointer;
  transition: .15s ease;
}
.page-auth .social-btn:hover{transform: translateY(-1px);background: rgba(255,255,255,0.07);border-color: rgba(0,163,255,0.35);}
.page-auth .checkline{display:flex;align-items:center;gap:10px;font-size: 13px;color: rgba(234,242,255,0.75);}
.page-auth .checkline input{ transform: translateY(1px); }

/* =========================
   13) Bottom Tabs (มือถือ)
========================= */
.bottom-tabs{display:none;}
@media (max-width: 980px){
  body{ padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .bottom-tabs{
    display:flex;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2147482500;
    height: 64px;
    padding: 10px 10px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(60,200,255,.75), rgba(90,120,255,.55));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    gap: 8px;
    align-items: center;
    justify-content: space-between;
  }
  .bt-item{
    flex: 1;
    min-width: 0;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap: 6px;
    color: rgba(255,255,255,.92);
    text-decoration:none;
    font-weight: 900;
    font-size: 11px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 8px 6px;
    border-radius: 14px;
  }
  .bt-item i{font-size: 16px}
  .bt-item span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .bt-item.active{
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.14);
  }
}

/* =========================
   14) PRODUCTS START LINE
========================= */
.products-page.cards{
  padding-top: 48px;
  margin-top: 0 !important;
}
.products-page .container{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================
   15) APP PREMIUM (ONE ONLY) ✅ FINAL FIX
   - ไม่มี .nf-cover แบบกล่องอีกแล้ว
   - รูปเต็มกรอบ 100% ชัวร์
========================= */
body.page-app{
  --nf-border: rgba(255,255,255,.10);
  --nf-border-strong: rgba(255,255,255,.14);
  --nf-surface: rgba(255,255,255,.03);
  --nf-glass: rgba(0,0,0,.38);
  --nf-glow: rgba(229,9,20,.10);
}

/* โซน */
body.page-app .app-wrap{
  padding: 28px 0 90px;
  background:
    radial-gradient(900px 460px at 18% 18%, rgba(229,9,20,.08), transparent 60%),
    radial-gradient(900px 460px at 85% 30%, rgba(255,255,255,.04), transparent 65%),
    linear-gradient(180deg, #000 0%, #050505 55%, #000 100%);
}

/* grid */
body.page-app .app-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 320px));
  gap: 18px;
  justify-content:center;
  align-items: stretch;
}
@media (max-width: 1100px){
  body.page-app .app-grid{ grid-template-columns: repeat(2, minmax(0, 320px)); }
}
@media (max-width: 740px){
  body.page-app .app-grid{ grid-template-columns: 1fr; }
}

/* card */
body.page-app .nf-card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border);
  box-shadow:
    0 24px 60px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
body.page-app .nf-card::before{ display:none; content:none; }
body.page-app .nf-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 20%, rgba(229,9,20,.12), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(229,9,20,.08), transparent 60%);
  filter: blur(60px);
  opacity: 0;
  transition: opacity .18s ease;
}
body.page-app .nf-card:hover{
  transform: translateY(-4px);
  border-color: var(--nf-border-strong);
  box-shadow:
    0 34px 90px rgba(0,0,0,.78),
    0 0 0 1px var(--nf-glow);
  filter: brightness(1.03);
}
body.page-app .nf-card:hover::after{ opacity: 1; }

/* media (จุดที่ต้องชัวร์) */
body.page-app .nf-media{
  position:relative;
  height: 180px;
  overflow:hidden;
  background:#000;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  line-height:0; /* ✅ กันช่องว่างจาก inline-img */
}

/* ✅ รูปต้องเป็น absolute + เต็มกรอบ */
body.page-app .nf-media > img.nf-cover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:none;
  z-index:0;
}

/* overlay */
body.page-app .nf-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 22%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.88) 100%);
}

/* logo */
body.page-app .nf-logo{
  position:absolute;
  top: 12px;
  left: 12px;
  width: 72px;
  height: 72px;
  padding: 12px;
  border-radius: 18px;
  background: var(--nf-glass);
  border: 1px solid var(--nf-border-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 16px 34px rgba(0,0,0,.68),
    inset 0 0 0 1px rgba(0,0,0,.35);
  object-fit:contain;
  z-index:2;
}

/* tag */
body.page-app .nf-tag{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index:2;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--nf-glass);
  border: 1px solid var(--nf-border);
  color: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* content */
body.page-app .nf-content{ padding: 14px; }
body.page-app .nf-title{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  color: rgba(255,255,255,.94);
  line-height: 1.35;
}
body.page-app .nf-row{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-bottom: 12px;
}
body.page-app .nf-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}
body.page-app .nf-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
body.page-app .nf-price-label{
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,.55);
}
body.page-app .nf-price b{
  font-size: 16px;
  font-weight: 900;
  color:#fff;
}
body.page-app .nf-btn{
  flex: 1;
  height: 38px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, rgba(229,9,20,.95), rgba(155,0,10,.95));
  box-shadow: 0 12px 28px rgba(229,9,20,.25);
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
body.page-app .nf-btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
body.page-app .nf-btn:active{ transform: translateY(0) scale(.99); }
body.page-app .nf-btn.is-disabled{
  cursor: not-allowed;
  opacity: .72;
  background: linear-gradient(180deg, rgba(70,18,18,.95), rgba(40,10,10,.95));
  box-shadow: none;
}
/* =========================================================
   TOPUP METHOD (BANK / WALLET) — CLEAN + ONE SCREEN
   วางท้ายสุดของ style.css (แทนโค้ดท้ายที่ซ้ำทั้งหมด)
========================================================= */

/* ทำให้ HERO / NAVBAR ไม่เพี้ยนจาก scrollbar */
html, body { overflow-x: hidden; }

/* HERO full-bleed แบบไม่ต้อง translate (ปลอดภัยกว่า) */
.page-hero{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

/* แถบสีใต้ navbar + hero แยกตามหน้า */
body.page-topup-wallet .navbar-light::after{
  background: linear-gradient(90deg,#ff4b4b,#d50000,#ff2d6f) !important;
}
body.page-topup-bank .navbar-light::after{
  background: linear-gradient(90deg,#ff77c6,#ff4fa3,#b83280) !important;
}

body.page-topup-wallet .page-hero{
  background: linear-gradient(90deg,#ff4b4b,#d50000,#ff2d6f) !important;
}
body.page-topup-bank .page-hero{
  background: linear-gradient(90deg,#ff77c6,#ff4fa3,#b83280) !important;
}

/* โครงหน้าสำหรับหน้าวิธีเติมเงิน (Bank/Wallet) */
body.page-topup-method{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #000 !important;
}

/* MAIN: จัดกลางและพยายามให้อยู่ในจอเดียว */
body.page-topup-method .topup-method-wrap{
  flex: 1;
  display: grid;
  place-items: center;
  padding: 48px 0 24px !important; /* 👈 ดึงการ์ดลงมา */
  position: relative;
  overflow: hidden;
}

body.page-topup-method .topup-method-wrap::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.60) 100%);
}

/* container ให้กลาง */
body.page-topup-method .topup-method-wrap > .container{
  width: 100%;
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:center;
}

/* การ์ด Glass (ขนาดพอดีตา) */
body.page-topup-method .topup-glass{
  width: min(640px, 92vw);
  border-radius: 18px;
  padding: 18px;
  background: rgba(18, 18, 24, .66);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 26px 90px rgba(0,0,0,.70), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* =========================
   WALLET FORM (ให้เข้าธีมและพอดีจอ)
========================= */
body.page-topup-method .card-mini-title{
  font-weight: 950;
  font-size: 15px;
  margin-bottom: 10px;
  color: rgba(255,255,255,.92);
}

body.page-topup-method .topup-field{ display:grid; gap:8px; }
body.page-topup-method .topup-label{
  color: rgba(255,255,255,.85);
  font-weight: 900;
  font-size: 13px;
}
body.page-topup-method .topup-input{
  width: 100%;
  height: 46px;
  border-radius: 12px;
  padding: 0 14px;
  outline: none;
  color: #fff;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.18);
}
body.page-topup-method .topup-input:focus{
  border-color: rgba(255,255,255,.34);
  box-shadow: 0 0 0 4px rgba(255,255,255,.10);
}
body.page-topup-method .topup-hint{
  color: rgba(255,255,255,.70);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.55;
}

body.page-topup-method .topup-submit{
  margin-top: 12px;
  width:100%;
  height: 48px;
  border:0;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 950;
  color:#fff;
}
body.page-topup-wallet .topup-submit{
  background: linear-gradient(90deg,#ff4b4b,#d50000,#ff2d6f);
  box-shadow: 0 18px 40px rgba(255,70,90,.22);
}
body.page-topup-bank .topup-submit{
  background: linear-gradient(90deg,#ff77c6,#ff4fa3,#b83280);
  box-shadow: 0 18px 40px rgba(255,120,200,.22);
}

/* footer text ใต้การ์ด */
body.page-topup-method .topup-fee{
  margin-top: 10px;
  text-align:center;
  color: rgba(255,255,255,.75);
  font-weight: 900;
  font-size: 12px;
}
body.page-topup-method .topup-back{
  margin-top: 8px;
  text-align:center;
}
body.page-topup-method .topup-back a{
  color: rgba(255,255,255,.85);
  font-weight: 900;
  text-decoration:none;
}
body.page-topup-method .topup-back a:hover{ text-decoration: underline; }

/* =========================
   BANK (จัดวางสวย + ไม่ล้นจอ)
========================= */
body.page-topup-bank .topup-bank-card{ text-align:center; }

body.page-topup-method .bank-title{
  color: rgba(255,255,255,.92);
  font-weight: 950;
  font-size: 14px;
}
body.page-topup-method .bank-sub{
  color: rgba(255,255,255,.72);
  font-weight: 900;
  margin-top: 2px;
  font-size: 12px;
}
body.page-topup-method .bank-no{
  margin-top: 8px;
  font-size: 32px;          /* เดิมใหญ่ไป -> ย่อให้พอดีจอ */
  font-weight: 950;
  letter-spacing: .6px;
  color:#fff;
  line-height: 1.05;
}
body.page-topup-method .bank-name-label{
  margin-top: 10px;
  color: rgba(255,255,255,.80);
  font-weight: 900;
  font-size: 12px;
}
body.page-topup-method .bank-name{
  margin-top: 2px;
  font-weight: 950;
  color:#fff;
  font-size: 15px;
}
body.page-topup-method .bank-desc{
  margin-top: 8px;
  color: rgba(255,255,255,.78);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.55;
  opacity:.95;
}

/* upload: ซ่อน choose file */
body.page-topup-method .slip-file{ display:none !important; }
body.page-topup-method .slip-drop{ margin-top: 12px; display:flex; justify-content:center; }

/* กล่องอัปโหลด (กลาง + ใหญ่กำลังดี) */
body.page-topup-method .slip-box{
  width: min(520px, 92%);
  display:flex;
  align-items:center;
  gap: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border: 1px dashed rgba(255,255,255,.26);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
body.page-topup-method .slip-box:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.38);
  background: rgba(0,0,0,.22);
}

/* รูปสลิปให้ “เด่นขึ้น” (ตามที่คุณอยากให้ใหญ่ขึ้น) */
body.page-topup-method .slip-preview{
  width: 130px;              /* ✅ ใหญ่ขึ้นพอดีตา */
  max-height: 170px;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(255,255,255,.16);
  opacity: 0.98;
}

/* ตัวหนังสือ */
body.page-topup-method .slip-big{
  color:#fff;
  font-weight: 950;
  font-size: 14px;
  margin: 0;
}
body.page-topup-method .slip-small{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.45;
}

/* ข้อความเตือน */
body.page-topup-method .bank-warn{
  margin-top: 10px;
  color: #ff4d4d;
  font-weight: 900;
  font-size: 11.5px;
  line-height: 1.5;
}

/* มือถือ: ให้กล่องอัปโหลดไม่อึดอัด */
@media (max-width: 600px){
  body.page-topup-method .topup-glass{ padding: 16px; }
  body.page-topup-method .bank-no{ font-size: 28px; }

  body.page-topup-method .slip-box{
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 14px;
  }
  body.page-topup-method .slip-preview{
    width: 160px;             /* มือถือให้ใหญ่ขึ้นนิด */
    max-height: 200px;
  }
}

/* ถ้าจอเตี้ยมาก: ยอมให้เลื่อนได้แทนการล้น */
@media (max-height: 740px){
  body.page-topup-method .topup-method-wrap{
    place-items: start center;
    padding-top: 14px !important;
  }
}

/* footer หน้า topup method ให้ไม่เว้นพื้นที่เกิน */
body.page-topup-method footer.footer{ margin-top: 0 !important; }
body.page-topup-method .footer-inner{ padding: 22px 0 !important; }
/* ==== Wallet: Angpao decor (ด้านบนการ์ด) ==== */
body.page-topup-wallet .topup-form-card{
  position: relative;
  overflow: visible; /* ให้รูปโผล่ขึ้นด้านบนได้ */
}
/* ================================
   FINAL — WALLET LAYOUT + FOOTER FIX
   (วางท้ายสุดของ style.css เท่านั้น)
================================ */

/* หน้าเติมเงิน: ทำให้มีเนื้อหาเท่าที่จำเป็น ไม่ดัน footer ลง */
body.page-topup-method{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 1) โซนกลางจอ: บีบพื้นที่ให้พอดี + ดึงการ์ดขึ้น */
body.page-topup-wallet .topup-method-wrap{
  flex: 1;
  display: grid;
  place-items: center;
  padding: 28px 0 10px !important;   /* ✅ ดึงการ์ดขึ้น + ลดช่องว่างล่าง */
  position: relative !important;
}

/* 2) ซองอั่งเปา: ให้อยู่ใน "กรอบดำ" เหนือการ์ด และใกล้การ์ดขึ้น */
body.page-topup-wallet .mid-angpao{
  position: absolute !important;
  left: 50% !important;
  top: 70px !important;              /* ✅ ปรับจุดนี้เพื่อขยับขึ้น/ลง */
  transform: translateX(-50%) !important;
  width: 88px !important;            /* ✅ เล็กลง */
  height: auto !important;
  z-index: 2 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 12px 22px rgba(255,70,90,.22)) !important;
}

/* 3) การ์ดต้องอยู่เหนือซองเสมอ */
body.page-topup-wallet .topup-method-wrap > .container{
  position: relative !important;
  z-index: 5 !important;
}

/* 4) บีบ footer ขึ้น (ลด padding ภายใน footer) */
body.page-topup-method .footer-inner{
  padding: 16px 0 !important;        /* ✅ จาก 40px -> 16px */
}
body.page-topup-method .footer-copy{
  padding: 10px 0 12px !important;   /* ✅ ลดความสูง copy */
}

/* มือถือ */
@media (max-width: 600px){
  body.page-topup-wallet .topup-method-wrap{
    padding: 22px 0 10px !important;
  }
  body.page-topup-wallet .mid-angpao{
    top: 60px !important;
    width: 78px !important;
  }
}
/* =========================================
   FIX: TOPUP METHOD ให้เหมือนรูป 2
   - การ์ดขึ้น
   - footer ขึ้นมาต่อท้าย (ไม่ดันลงก้นจอ)
   วางท้ายสุดของ style.css
========================================= */

/* 1) ยกเลิกการ "ดัน footer ลงก้นจอ" เฉพาะหน้านี้ */
body.page-topup-method{
  min-height: auto !important;     /* เดิม 100vh ทำให้มีพื้นที่ว่าง */
  display: block !important;       /* เลิก flex column */
}

/* 2) บีบพื้นที่โซนกลาง + ดึงการ์ดขึ้น */
body.page-topup-method .topup-method-wrap{
  display: grid !important;
  place-items: center !important;
  flex: none !important;           /* สำคัญ: ไม่ให้กินพื้นที่ที่เหลือ */
  padding: 18px 0 18px !important; /* ลดช่องว่างบน/ล่าง */
  margin: 0 !important;
  min-height: auto !important;
}

/* 3) ถ้าซองอั่งเปาอยู่สูงไป/ต่ำไป ปรับตรงนี้ */
body.page-topup-wallet .mid-angpao{
  top: 22px !important;            /* อยู่ในกรอบดำด้านบน ใกล้การ์ดขึ้น */
  width: 88px !important;
}

/* 4) บีบ footer ให้เตี้ยลงเหมือนหน้าเลือกช่องทางเติมเงิน */
body.page-topup-method .footer-inner{
  padding: 18px 0 !important;      /* เดิม 40px */
}
body.page-topup-method .footer-copy{
  padding: 10px 0 12px !important; /* ลดความสูงบรรทัดล่าง */
}

/* 5) มือถือ */
@media (max-width: 600px){
  body.page-topup-method .topup-method-wrap{
    padding: 14px 0 14px !important;
  }
  body.page-topup-wallet .mid-angpao{
    top: 18px !important;
    width: 76px !important;
  }
}
/* =========================================
   FIX: ให้มีพื้นที่ซองอั่งเปา + ไม่โดนการ์ดทับ
   วางท้ายสุดของ style.css
========================================= */

/* จองพื้นที่ด้านบนให้ซองอั่งเปา */
body.page-topup-wallet .topup-method-wrap{
  position: relative !important;
  overflow: visible !important;          /* กันซองโดนตัด */
  padding-top: 120px !important;         /* ✅ พื้นที่ซอง (ปรับได้) */
  padding-bottom: 18px !important;
}

/* ซองอั่งเปาอยู่ในพื้นที่ที่จองไว้ */
body.page-topup-wallet .mid-angpao{
  position: absolute !important;
  left: 50% !important;
  top: 34px !important;                  /* ✅ อยู่ในพื้นที่ด้านบน */
  transform: translateX(-50%) !important;
  width: 92px !important;
  height: auto !important;
  z-index: 2 !important;                 /* ต่ำกว่าการ์ด */
  pointer-events: none !important;
  filter: drop-shadow(0 12px 22px rgba(255,70,90,.22)) !important;
}

/* การ์ดต้องอยู่เหนือซอง + ดันลงมานิดเพื่อไม่ทับ */
body.page-topup-wallet .topup-method-wrap > .container{
  position: relative !important;
  z-index: 5 !important;
}

body.page-topup-wallet .topup-glass.topup-form-card{
  margin-top: 0px !important;            /* ถ้ายังทับ ให้เพิ่มเป็น 10-20px */
}

/* มือถือ */
@media (max-width: 600px){
  body.page-topup-wallet .topup-method-wrap{
    padding-top: 105px !important;
  }
  body.page-topup-wallet .mid-angpao{
    top: 28px !important;
    width: 78px !important;
  }
}
/* ปรับระยะซองอั่งเปาให้ห่างจากการ์ด (ชัดๆ) */

/* จองพื้นที่ด้านบนเพิ่มนิด (กันแน่น) */
body.page-topup-wallet .topup-method-wrap{
  padding-top: 140px !important;   /* เดิม 120 -> เพิ่มให้โล่งขึ้น */
}

/* ดันซองขึ้น (ห่างการ์ดมากขึ้น) */
body.page-topup-wallet .mid-angpao{
  top: 26px !important;            /* เดิม 34 -> ลดลง = ซองขึ้น */
}

/* ดันการ์ดลง */
body.page-topup-wallet .topup-glass.topup-form-card{
  margin-top: 18px !important;     /* เพิ่มระยะห่างจากซอง */
}

/* มือถือ */
@media (max-width: 600px){
  body.page-topup-wallet .topup-method-wrap{
    padding-top: 125px !important;
  }
  body.page-topup-wallet .mid-angpao{
    top: 22px !important;
  }
  body.page-topup-wallet .topup-glass.topup-form-card{
    margin-top: 14px !important;
  }
}
/* กรอบตัวอย่างสลิป */
body.page-topup-method .slip-box{
  width: min(520px, 92%);
  padding: 20px 22px;
  border-radius: 20px; /* โค้งขึ้น */
  background: rgba(255,255,255,.04);
  border: 1.5px dashed rgba(255,255,255,.22);
  gap: 22px;
}
/* รูปตัวอย่างสลิป (เล็ก + สวย) */
body.page-topup-method .slip-preview{
  width: 90px;              /* 👈 เล็กลงชัดเจน */
  height: auto;
  max-height: 130px;
  object-fit: contain;

  border-radius: 14px;      /* 👈 มุมโค้ง */
  background: #fff;
  padding: 6px;             /* 👈 มีขอบขาวบางๆ */
  
  box-shadow:
    0 10px 28px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.25);
}
body.page-topup-method .slip-big{
  font-size: 14px;
  font-weight: 900;
}

body.page-topup-method .slip-small{
  font-size: 12px;
  opacity: .8;
}
/* =========================
   STORE HEADER (CLEAN FINAL)
   - กล่องยาวเหมือนเดิม
   - ซ้าย: ขาว
   - ขวา: ฟ้า
   - ขวา: ไม่มีกรอบ
========================= */

.store-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  width:100%;
  padding:20px 22px;
  margin:0 0 18px;

  border-radius:16px;
  background: rgba(10,25,35,.52);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.store-header .store-left{
  font-family:"Kanit",sans-serif;
  font-weight:900;
  font-size:28px;
  color:#fff;
  line-height:1;
  text-shadow: 0 14px 38px rgba(0,0,0,.40);
}

/* ✅ ขวา: เอากรอบออก + ฟอนต์เท่าซ้าย */
.store-header .store-pill{
  font-family:"Kanit",sans-serif;
  font-weight:900;
  font-size:28px;
  letter-spacing:.2px;
  line-height:1;

  background: linear-gradient(90deg,#29b6ff,#5cf3ff);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 12px 35px rgba(41,182,255,.22);

  /* ❌ ไม่มีกรอบ/กล่อง */
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  height: auto;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

@media (max-width:520px){
  .store-header{ padding:16px 16px; }
  .store-header .store-left,
  .store-header .store-pill{ font-size:22px; }
}
/* =========================================
   NETFLIX THEME OVERRIDE (APP PREMIUM)
   วางท้ายสุดของไฟล์ CSS
========================================= */

/* ตั้งรูปพื้นหลัง “หนังเยอะๆ” (ใส่รูป collage ของคุณเองตรงนี้) */
body.page-app{
  --nf-wallpaper: url("assets/movies-collage.jpg"); /* 👈 เปลี่ยน path รูปตามของคุณ */
  --nf-red: #e50914;
  --nf-red2: #b20710;
}

/* ---------- TOP BAR / NAVBAR ให้เป็น Netflix ---------- */
body.page-app .navbar-light{
  background: rgba(0,0,0,.78) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
body.page-app .navbar-light::after{
  height: 4px !important;
  background: linear-gradient(90deg,var(--nf-red),var(--nf-red2),var(--nf-red)) !important;
}

/* ลิงก์ในแถบบน */
body.page-app .nav-link-light,
body.page-app .nav-text-link{
  color: rgba(255,255,255,.78) !important;
}
body.page-app .nav-link-light:hover,
body.page-app .nav-text-link:hover{
  background: rgba(229,9,20,.14) !important;
  color: #fff !important;
}
body.page-app .nav-link-light.active{
  background: linear-gradient(135deg,var(--nf-red),var(--nf-red2)) !important;
  color:#fff !important;
  box-shadow: 0 10px 24px rgba(229,9,20,.25) !important;
}
body.page-app .nav-btn{
  background: linear-gradient(135deg,var(--nf-red),var(--nf-red2)) !important;
  box-shadow: 0 12px 30px rgba(229,9,20,.25) !important;
}

/* ---------- แถบหัวหน้า (APP PREMIUM) ให้เข้าธีม Netflix ---------- */
body.page-app .page-hero{
  background: linear-gradient(90deg,#000 0%, #111 45%, #000 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
body.page-app .page-hero-inner h1{
  letter-spacing: .8px;
}
body.page-app .page-hero-inner h1,
body.page-app .page-hero-inner p{
  color:#fff !important;
}

/* ---------- พื้นหลัง “หนังเบลอๆ” ทั้งหน้า (ตามรูป 2) ---------- */
body.page-app .app-wrap{
  position: relative;
  overflow: hidden;
  background: #000 !important;
}

/* wallpaper เบลอ */
body.page-app .app-wrap::before{
  content:"";
  position:absolute;
  inset:-12%;
  background-image: var(--nf-wallpaper);
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(.40) saturate(1.1);
  transform: scale(1.08);
  opacity: .95;
  z-index: 0;
  pointer-events:none;
}

/* vignette + เงาดำ */
body.page-app .app-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.05), rgba(0,0,0,.65) 60%),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.85));
  z-index: 0;
  pointer-events:none;
}

/* ทำให้คอนเทนต์อยู่เหนือพื้นหลัง */
body.page-app .app-wrap > *{
  position: relative;
  z-index: 1;
}

/* ---------- การ์ดให้เหมือนรูป 2 (โลโก้ใหญ่ขึ้น) ---------- */
body.page-app .nf-card{
  background: rgba(15,15,15,.60) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ภาพบนการ์ดให้ชัดและเท่ */
body.page-app .nf-media{
  height: 190px !important;
}

/* โลโก้ Netflix “ใหญ่ขึ้น” */
body.page-app .nf-logo{
  width: 112px !important;
  height: 112px !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.70) !important;
}

/* ---------- ไอค่อนหมุนๆ (แทนอีโมจิ) ---------- */
@keyframes nfSpin { to { transform: rotate(360deg); } }

.nf-spin{
  display:inline-grid;
  place-items:center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: rgba(255,255,255,.82);
  animation: nfSpin 1.2s linear infinite;
}

/* ใช้ในแถวรายละเอียด */
body.page-app .nf-chip{
  gap: 8px !important;
}
body.page-app .nf-chip .nf-spin{
  width: 16px;
  height: 16px;
}
/* =========================================
   APP PREMIUM — NETFLIX THEME OVERRIDES
   (วางท้ายสุดของ style.css)
========================================= */

/* ===== NAVBAR: Netflix style ===== */
body.page-app .navbar-light{
  background: rgba(0,0,0,.78) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.page-app .navbar-light::after{
  height: 3px !important;
  background: linear-gradient(90deg,#e50914,#ff3b3b,#e50914) !important;
}
body.page-app .brand-title.nf2 .twell{ color:#e50914 !important; }
body.page-app .brand-title.nf2 .shop{ color:#fff !important; text-shadow:none !important; }

body.page-app .nav-link-light,
body.page-app .nav-text-link{
  color: rgba(255,255,255,.88) !important;
}
body.page-app .nav-link-light:hover,
body.page-app .nav-text-link:hover{
  background: rgba(229,9,20,.14) !important;
  color:#fff !important;
}
body.page-app .nav-link-light.active{
  background: rgba(229,9,20,.92) !important;
  box-shadow: 0 10px 22px rgba(229,9,20,.25) !important;
}

body.page-app .nav-btn{
  background: linear-gradient(180deg, #e50914, #99000a) !important;
  box-shadow: 0 14px 30px rgba(229,9,20,.22) !important;
}

/* ===== เอาแถบ HERO (รูปที่คุณวง) ให้เป็น Netflix + เบลอหนัง ===== */
body.page-app .page-hero{
  position: relative;
  padding: 22px 0 18px !important;
  background: rgba(0,0,0,.85) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  overflow: hidden;
}
body.page-app .page-hero::before{
  content:"";
  position:absolute;
  inset:-25%;
  background: url("./assets/img/movie.jpg") center/cover no-repeat;
  filter: blur(26px) saturate(1.15);
  transform: scale(1.10);
  opacity: .28;
  pointer-events:none;
}
body.page-app .page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(229,9,20,.25), transparent 45%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
}
body.page-app .page-hero-inner{ position: relative; z-index: 1; }
body.page-app .page-hero-inner h1{ letter-spacing:.5px; }
body.page-app .page-hero-inner p{ opacity:.8; }

/* ===== พื้นหลังโซนการ์ด: เบลอหนังเยอะๆ ===== */
body.page-app .app-wrap{
  position: relative;
  overflow:hidden;
  background: #000 !important;
  padding: 18px 0 90px !important;  /* ดึงขึ้นนิด */
}
body.page-app .app-wrap::before{
  content:"";
  position:absolute;
  inset:-20%;
  background: url("./assets/img/movie.jpg") center/cover no-repeat;
  filter: blur(32px) saturate(1.2);
  transform: scale(1.14);
  opacity: .20;
  pointer-events:none;
}
body.page-app .app-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(229,9,20,.12), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85));
  pointer-events:none;
}
body.page-app .app-wrap > .container{ position: relative; z-index: 1; }

/* ===== โลโก้ Netflix บนการ์ด: ให้ใหญ่ขึ้น ===== */
body.page-app .nf-logo{
  width: 110px !important;
  height: 110px !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

/* ===== chip: เปลี่ยนนาฬิกาเป็นวงกลมหมุนๆ ===== */
body.page-app .nf-spinner{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: rgba(255,255,255,.92);
  display: inline-block;
  animation: nfSpin 0.9s linear infinite;
}
@keyframes nfSpin{ to{ transform: rotate(360deg); } }

/* ให้ chip เรียงสวย */
body.page-app .nf-chip{
  gap: 10px !important;
}
/* =========================
   BLUR MOVIE BACKGROUND (APP CARD)
========================= */

/* ทำให้ nf-media เป็นกรอบอ้างอิง */
body.page-app .nf-media{
  position: relative;
  overflow: hidden;
}

/* สร้างชั้นเบลอจากรูปเดียวกัน */
body.page-app .nf-media::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--nf-bg);
  background-size: cover;
  background-position: center;
  filter: blur(10px) brightness(.7);
  transform: scale(1.1);
  z-index:0;
}

/* รูปหลักอยู่ชั้นบน */
body.page-app .nf-cover{
  position: relative;
  z-index:1;
}

/* โลโก้ลอยชัด ไม่โดนเบลอ */
body.page-app .nf-logo{
  z-index:2;
}
/* ===== FORCE BLUR (จริง) เฉพาะหน้า APP PREMIUM ===== */
body.page-app .nf-media{
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* เบลอ “ตัวรูป” เลย (ชัวร์ว่าเห็นเบลอ) */
body.page-app .nf-media > img.nf-cover{
  filter: blur(1px) saturate(1.15) !important;  /* ✅ เบลอจริง */
  transform: scale(1.12) !important;             /* กันขอบแตก */
  opacity: .95 !important;                       /* ไม่ให้ทึบมืด */
}

/* ลดความทึบของเงาดำเดิม (ให้ไม่มืด) */
body.page-app .nf-media::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index: 1 !important;
  pointer-events:none !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.22) 70%,
    rgba(0,0,0,.38) 100%
  ) !important;
}

/* โลโก้อยู่บนสุด + ทำให้ใหญ่ขึ้น */
body.page-app .nf-logo{
  z-index: 2 !important;
  width: 120px !important;
  height: 120px !important;
}
/* =====================================
   FIX PAGE-HERO FULL WIDTH (APP PREMIUM)
   ให้ยาวเท่าหน้าอื่น
===================================== */

/* ดึงแถบหัวออกจาก container */
body.page-app .page-hero{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0 !important;
}

/* ให้เนื้อหาด้านในยังจัดกลางเหมือนเดิม */
body.page-app .page-hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* มือถือ */
@media (max-width:768px){
  body.page-app .page-hero-inner{
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* ✅ APP PREMIUM: ทำให้แถบแดงเต็มกว้างเท่าหน้าอื่น (ชัวร์) */
body.page-app .page-hero{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;          /* ห้ามมี calc(50%-50vw) */
  left: auto !important;
  right: auto !important;
  border-radius: 0 !important;
}

/* ✅ ให้เนื้อหาในแถบยังอยู่กลางเหมือนเดิม */
body.page-app .page-hero > .container{
  max-width: var(--container) !important;
  margin: 0 auto !important;
  padding: 0 var(--gutter) !important;
}
/* =========================
   FIX: APP PREMIUM HERO ให้เท่าหน้าอื่น
========================= */
.page-app .page-hero{
  width: 100%;
  min-height: 160px;                 /* ปรับเลขนี้ให้เท่าหน้าอื่นของคุณ */
  display: flex;
  align-items: center;
  padding: 0;                        /* กันมี padding แปลกๆทับ */
}

/* ให้ระยะด้านในเท่ากัน */
.page-app .page-hero .page-hero-inner{
  padding: 44px 0;                   /* ปรับเลขนี้ให้เท่าหน้าอื่นของคุณ */
}
/* =========================
   APP PREMIUM: ย้ายข้อความใน HERO ไปชิดซ้าย
========================= */
.page-app .page-hero{
  justify-content: flex-start;  /* ดันคอนเทนต์ไปด้านซ้าย */
}

.page-app .page-hero-inner{
  width: 100%;
  text-align: left;             /* เปลี่ยนจากกลาง -> ซ้าย */
  display: flex;
  flex-direction: column;
  align-items: flex-start;      /* ชิดซ้ายจริง */
  padding: 44px 0;              /* คงระยะบนล่างเท่าเดิม */
}

/* ถ้าอยากให้ขยับไปทางซ้าย/ขวาเพิ่มอีกนิด (เลือกใช้) */
/* .page-app .page-hero-inner{ padding-left: 20px; } */
/* =========================
   APP PREMIUM: ป้ายมุมขวาบนให้พอดี ไม่ล้น
========================= */
.nf-media{ 
  position: relative;
  overflow: hidden;               /* กันป้าย/รูปโผล่ล้นขอบการ์ด */
}

.nf-tag{
  position: absolute;
  top: 10px;
  right: 10px;

  padding: 6px 10px;              /* เล็กลง */
  font-size: 12px;                /* ตัวหนังสือเล็กลง */
  line-height: 1;

  border-radius: 999px;
  max-width: calc(100% - 20px);   /* ไม่ให้ล้นกรอบ */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
/* วงกลมหมุนแบบเนียน ๆ */
.spin-circle{
  animation: spinCircle 1.6s linear infinite;
}

/* keyframes การหมุน */
@keyframes spinCircle{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
/* ===== Netflix-ish Credential Modal ===== */
.modal-netflix{
  background: rgba(15,15,15,.92);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  color: #fff;
}

.nf-modal-head{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:16px;
}

.nf-modal-logo{
  width:46px;
  height:46px;
  border-radius:12px;
  background:#000;
  padding:8px;
  border:1px solid rgba(255,255,255,.08);
}

.cred-box{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cred-row{
  display:grid;
  grid-template-columns: 70px 1fr auto;
  gap:10px;
  align-items:center;
  padding:12px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.cred-label{
  opacity:.8;
  font-weight:600;
}

.cred-value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cred-copy{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(229,9,20,.95); /* Netflix red vibe */
  color:#fff;
  padding:10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:700;
}

.cred-copy:hover{ filter: brightness(1.05); }
.cred-copy:active{ transform: translateY(1px); }

.cred-hint{
  opacity:.8;
  font-size: 13px;
  margin-top: 6px;
  padding-left: 4px;
}
/* =========================================
   CREDENTIAL MODAL — PREMIUM NETFLIX LOOK
   วางท้ายสุดของ style.css
========================================= */

/* เฉพาะ modal นี้ */
#credModal.modal{
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* กล่องหลัก */
#credModal .modal-white.modal-netflix{
  width: min(760px, 96vw);
  padding: 18px;
  border-radius: 22px;
  color: #fff;

  background:
    radial-gradient(900px 320px at 10% 0%, rgba(229,9,20,.16), transparent 55%),
    radial-gradient(900px 320px at 90% 0%, rgba(0,180,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(18,18,18,.92), rgba(10,10,10,.86));

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 34px 120px rgba(0,0,0,.70),
    0 0 0 1px rgba(229,9,20,.10),
    inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}

/* เส้นแดงบางๆบนสุด */
#credModal .modal-white.modal-netflix::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: linear-gradient(90deg,#e50914,#ff4b4b,#e50914);
  opacity:.95;
}

/* ปุ่มปิด */
#credModal .modal-close{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color:#fff;
  width:40px; height:40px;
  border-radius: 14px;
}
#credModal .modal-close i{ color:#fff; }

/* หัว */
#credModal .nf-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px;
}

/* กลุ่มซ้ายหัว */
#credModal .nf-modal-head .head-left{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
}

/* โลโก้ */
#credModal .nf-modal-logo{
  width:52px; height:52px;
  border-radius: 16px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  padding: 10px;
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
}

/* title/sub */
#credModal .modal-title{
  color:#fff !important;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .2px;
  margin: 0;
}
#credModal .modal-sub{
  color: rgba(255,255,255,.70) !important;
  font-size: 12px;
  margin: 6px 0 0;
}

/* กล่องแถว */
#credModal .cred-box{
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

/* แถว: ทำเป็นการ์ดสวยขึ้น */
#credModal .cred-row{
  display:grid;
  grid-template-columns: 86px 1fr 122px;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Label */
#credModal .cred-label{
  font-weight: 900;
  color: rgba(255,255,255,.85);
  opacity: 1;
}

/* Value: เหมือนช่อง input */
#credModal .cred-value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  padding: 12px 12px;
  border-radius: 14px;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);

  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ปุ่มคัดลอก: ให้เป็น Netflix red แบบนุ่ม */
#credModal .cred-copy{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(229,9,20,.96), rgba(150,0,10,.96));
  color:#fff;
  font-weight: 950;
  cursor:pointer;
  box-shadow: 0 14px 30px rgba(229,9,20,.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
#credModal .cred-copy:hover{ filter: brightness(1.05); transform: translateY(-1px); }
#credModal .cred-copy:active{ transform: translateY(0) scale(.99); }

/* ข้อความล่าง */
#credModal .cred-hint{
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  font-size: 12px;
}

/* Responsive */
@media (max-width: 640px){
  #credModal .modal-white.modal-netflix{ padding: 14px; }
  #credModal .cred-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #credModal .cred-label{ font-size: 12px; }
  #credModal .cred-copy{ width: 100%; }
}
/* ===== Cred Modal: ให้หัวอยู่กับโลโก้ ===== */
#credModal .nf-modal-head{
  justify-content: flex-start !important; /* ไม่ให้ไปชิดขวา */
}

#credModal .nf-modal-head .head-left{
  display:flex;
  align-items:center;
  gap:14px;
}

#credModal .nf-modal-head .head-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
/* แก้เส้นใต้สีน้ำเงินใต้ตัวหนังสือ (ลิงก์) ในการ์ดเติมเงิน */
.topup-card2,
.topup-card2:link,
.topup-card2:visited,
.topup-card2:hover,
.topup-card2:active{
  text-decoration: none !important;
  color: inherit;
}

/* กันบางจุดที่เป็นตัวหนังสือข้างในโดนเส้นใต้ตาม */
.topup-card2 *{
  text-decoration: none !important;
}