/* ===========================================================
   bongdanet.sbs - theme-30ec.css
   All custom classes use the "vc20-" namespace.
   Palette: #FFA500 | #FF7F50 | #2E4057 (bg) | #FFCC02 (accent)
   =========================================================== */

/* ---------- Design tokens ---------- */
:root{
  --vc20-primary:#FFA500;
  --vc20-coral:#FF7F50;
  --vc20-bg:#2E4057;
  --vc20-bg-deep:#1d2c3d;
  --vc20-bg-soft:#36506e;
  --vc20-accent:#FFCC02;
  --vc20-text:#FFFFFF;
  --vc20-text-muted:#cfdcea;
  --vc20-line:rgba(255,255,255,.12);
  --vc20-card:#344a63;
  --vc20-danger:#ff5a5a;
  --vc20-ok:#39d98a;
  --vc20-radius:1.2rem;
  --vc20-radius-sm:.8rem;
  --vc20-shadow:0 .4rem 1.2rem rgba(0,0,0,.28);
  --vc20-header-h:5.6rem;
  --vc20-bottomnav-h:6.2rem;
  --vc20-grad:linear-gradient(135deg,#FFA500 0%,#FF7F50 55%,#FFCC02 100%);
}

/* ---------- Reset & base ---------- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;scroll-behavior:smooth;}
body{
  font-family:"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
  background:var(--vc20-bg);
  background-image:radial-gradient(circle at 18% 12%,rgba(255,165,0,.10),transparent 38%),radial-gradient(circle at 82% 88%,rgba(255,128,80,.10),transparent 42%);
  color:var(--vc20-text);
  line-height:1.5rem;
  font-size:1.5rem;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--vc20-accent);text-decoration:none;}
ul,ol{list-style:none;}

/* ---------- Layout helpers ---------- */
.vc20-container{width:100%;padding:0 1.4rem;}
.vc20-wrapper{padding-top:var(--vc20-header-h);padding-bottom:var(--vc20-bottomnav-h);}
.vc20-section{margin:2.4rem 0;padding:1.6rem;background:var(--vc20-card);border-radius:var(--vc20-radius);box-shadow:var(--vc20-shadow);border:1px solid var(--vc20-line);}
.vc20-section--alt{background:linear-gradient(160deg,#36506e 0%,#2E4057 100%);}
.vc20-divider{height:1px;background:var(--vc20-line);margin:1.4rem 0;}

/* ---------- Typography ---------- */
h1,h2,h3,h4{line-height:2.2rem;font-weight:800;letter-spacing:.2px;}
.vc20-h1{font-size:2.3rem;line-height:2.8rem;background:var(--vc20-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:1rem;}
.vc20-h2{font-size:2rem;color:var(--vc20-accent);margin-bottom:1.2rem;display:flex;align-items:center;gap:.8rem;}
.vc20-h2 i{font-size:2.2rem;color:var(--vc20-primary);}
.vc20-h3{font-size:1.7rem;color:var(--vc20-primary);margin:.8rem 0 .6rem;}
.vc20-text-muted{color:var(--vc20-text-muted);font-size:1.35rem;}
.vc20-lead{font-size:1.6rem;color:var(--vc20-text-muted);line-height:2.3rem;}
strong{color:var(--vc20-accent);font-weight:700;}
mark{background:rgba(255,204,2,.22);color:var(--vc20-accent);padding:0 .3rem;border-radius:.4rem;}

/* ---------- Buttons ---------- */
.vc20-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:4.4rem;padding:0 1.8rem;border:none;border-radius:2.4rem;
  font-size:1.5rem;font-weight:800;cursor:pointer;color:#1d2c3d;
  background:var(--vc20-grad);box-shadow:0 .3rem .9rem rgba(255,165,0,.4);
  transition:transform .15s ease,box-shadow .15s ease;text-transform:uppercase;letter-spacing:.4px;
}
.vc20-btn:hover{transform:translateY(-1px);box-shadow:0 .5rem 1.4rem rgba(255,165,0,.55);}
.vc20-btn:active{transform:scale(.97);}
.vc20-btn--ghost{background:transparent;border:2px solid var(--vc20-primary);color:var(--vc20-primary);box-shadow:none;}
.vc20-btn--ghost:hover{background:rgba(255,165,0,.12);}
.vc20-btn--accent{background:linear-gradient(135deg,#FFCC02,#FFA500);}
.vc20-btn--lg{width:100%;min-height:5rem;font-size:1.7rem;}
.vc20-btn--sm{min-height:3.6rem;padding:0 1.2rem;font-size:1.3rem;}
.vc20-link-text{color:var(--vc20-accent);font-weight:800;border-bottom:1.5px dashed rgba(255,204,2,.55);cursor:pointer;}
.vc20-link-text:hover{color:var(--vc20-primary);}

/* ---------- Header ---------- */
.vc20-header{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:1000;
  height:var(--vc20-header-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 1.2rem;background:rgba(46,64,87,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--vc20-line);box-shadow:0 .2rem .8rem rgba(0,0,0,.25);
}
.vc20-brand{display:flex;align-items:center;gap:.6rem;font-weight:900;font-size:1.85rem;color:var(--vc20-text);}
.vc20-brand img{width:3rem;height:3rem;border-radius:.6rem;}
.vc20-brand span{background:var(--vc20-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.vc20-header-actions{display:flex;align-items:center;gap:.6rem;}
.vc20-icon-btn{
  width:4rem;height:4rem;border:none;border-radius:1rem;background:rgba(255,255,255,.08);
  color:var(--vc20-text);font-size:1.9rem;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s ease;
}
.vc20-icon-btn:hover{background:rgba(255,165,0,.22);}

/* ---------- Mobile menu (drawer) ---------- */
.vc20-menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;opacity:0;visibility:hidden;transition:opacity .25s ease;}
.vc20-menu-backdrop.vc20-open{opacity:1;visibility:visible;}
.vc20-menu{
  position:fixed;top:0;right:0;height:100%;width:80%;max-width:320px;z-index:9999;
  background:var(--vc20-bg-deep);padding:2rem 1.6rem;transform:translateX(105%);
  transition:transform .28s ease;overflow-y:auto;
}
.vc20-menu.vc20-open{transform:translateX(0);}
.vc20-menu h3{color:var(--vc20-accent);font-size:1.6rem;margin:1.4rem 0 .8rem;text-transform:uppercase;}
.vc20-menu-link{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1rem;border-radius:.9rem;font-size:1.5rem;font-weight:700;color:var(--vc20-text);border:1px solid var(--vc20-line);margin-bottom:.7rem;background:rgba(255,255,255,.04);}
.vc20-menu-link:hover{background:rgba(255,165,0,.14);}
.vc20-menu-link i{font-size:1.9rem;color:var(--vc20-primary);}
.vc20-menu-close{position:absolute;top:1.2rem;right:1.2rem;}

/* ---------- Hero carousel ---------- */
.vc20-hero{margin:1.6rem 0;border-radius:var(--vc20-radius);overflow:hidden;box-shadow:var(--vc20-shadow);position:relative;}
.vc20-carousel{position:relative;}
.vc20-carousel-track{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;}
.vc20-carousel-track::-webkit-scrollbar{display:none;}
.vc20-carousel-slide{flex:0 0 100%;scroll-snap-align:center;position:relative;cursor:pointer;}
.vc20-carousel-slide img{width:100%;height:auto;min-height:18rem;object-fit:cover;}
.vc20-carousel-cap{position:absolute;left:1.4rem;bottom:1.4rem;right:1.4rem;background:linear-gradient(transparent,rgba(0,0,0,.7));padding:1rem;}
.vc20-carousel-cap h3{color:var(--vc20-accent);font-size:1.8rem;margin:0;}
.vc20-carousel-cap p{color:var(--vc20-text-muted);font-size:1.3rem;margin-top:.3rem;}
.vc20-carousel-dots{display:flex;justify-content:center;gap:.6rem;padding:.9rem;}
.vc20-carousel-dots button{width:1rem;height:1rem;border-radius:50%;border:none;background:rgba(255,255,255,.35);cursor:pointer;}
.vc20-carousel-dots button.vc20-active{background:var(--vc20-primary);width:2.4rem;border-radius:.6rem;}

/* ---------- Game grid (compact icon layout) ---------- */
.vc20-cat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.vc20-cat-tag{display:inline-flex;align-items:center;gap:.5rem;background:var(--vc20-grad);color:#1d2c3d;font-weight:800;font-size:1.3rem;padding:.4rem 1rem;border-radius:1rem;}
.vc20-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.vc20-grid--4{grid-template-columns:repeat(4,1fr);gap:.8rem;}
.vc20-game{background:var(--vc20-bg-soft);border-radius:var(--vc20-radius-sm);overflow:hidden;cursor:pointer;border:1px solid var(--vc20-line);transition:transform .15s ease,box-shadow .15s ease;position:relative;}
.vc20-game:hover{transform:translateY(-3px);box-shadow:0 .5rem 1.4rem rgba(255,165,0,.35);border-color:var(--vc20-primary);}
.vc20-game img{width:100%;aspect-ratio:1;object-fit:cover;background:#1d2c3d;}
.vc20-game-name{font-size:1.2rem;padding:.5rem .4rem;text-align:center;color:var(--vc20-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3rem;}
.vc20-game-hot{position:absolute;top:.4rem;right:.4rem;background:var(--vc20-danger);color:#fff;font-size:1rem;font-weight:800;padding:.1rem .5rem;border-radius:.8rem;}

/* ---------- Generic cards / features / lists ---------- */
.vc20-card{background:rgba(255,255,255,.05);border:1px solid var(--vc20-line);border-radius:var(--vc20-radius-sm);padding:1.2rem;margin-bottom:1rem;}
.vc20-card h3{margin-top:0;}
.vc20-feat-row{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.2rem;}
.vc20-feat-ico{flex:0 0 4rem;width:4rem;height:4rem;border-radius:1rem;background:rgba(255,165,0,.16);color:var(--vc20-primary);display:flex;align-items:center;justify-content:center;font-size:2rem;}
.vc20-feat-row p{margin:0;color:var(--vc20-text-muted);font-size:1.4rem;line-height:2rem;}
.vc20-steps{counter-reset:step;list-style:none;}
.vc20-steps li{counter-increment:step;position:relative;padding:0 0 1.2rem 3.4rem;color:var(--vc20-text-muted);font-size:1.4rem;line-height:2rem;}
.vc20-steps li::before{content:counter(step);position:absolute;left:0;top:-.2rem;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--vc20-grad);color:#1d2c3d;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.3rem;}
.vc20-faq-item{background:rgba(255,255,255,.04);border:1px solid var(--vc20-line);border-radius:.8rem;margin-bottom:.8rem;overflow:hidden;}
.vc20-faq-q{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;font-weight:700;cursor:pointer;font-size:1.45rem;color:var(--vc20-text);}
.vc20-faq-q i{color:var(--vc20-primary);transition:transform .2s ease;}
.vc20-faq-item.vc20-open .vc20-faq-q i{transform:rotate(180deg);}
.vc20-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 1.2rem;color:var(--vc20-text-muted);font-size:1.35rem;line-height:2rem;}
.vc20-faq-item.vc20-open .vc20-faq-a{max-height:300px;padding:.4rem 1.2rem 1.2rem;}

/* ---------- Testimonials ---------- */
.vc20-testi{display:flex;gap:.9rem;background:rgba(255,255,255,.04);border:1px solid var(--vc20-line);border-radius:.9rem;padding:1rem;margin-bottom:.8rem;}
.vc20-avatar{flex:0 0 3.6rem;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--vc20-grad);display:flex;align-items:center;justify-content:center;font-weight:800;color:#1d2c3d;font-size:1.6rem;}
.vc20-stars{color:var(--vc20-accent);font-size:1.3rem;margin-top:.2rem;}
.vc20-testi p{font-size:1.35rem;color:var(--vc20-text-muted);line-height:1.9rem;}

/* ---------- Winners / badges / payments ---------- */
.vc20-winner{display:flex;align-items:center;justify-content:space-between;background:rgba(255,204,2,.08);border:1px solid rgba(255,204,2,.25);border-radius:.8rem;padding:.7rem 1rem;margin-bottom:.6rem;font-size:1.3rem;}
.vc20-winner b{color:var(--vc20-accent);}
.vc20-chip-row{display:flex;flex-wrap:wrap;gap:.6rem;}
.vc20-chip{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.07);border:1px solid var(--vc20-line);border-radius:2rem;padding:.5rem 1rem;font-size:1.25rem;color:var(--vc20-text-muted);}
.vc20-chip i{color:var(--vc20-primary);}
.vc20-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;text-align:center;margin:1rem 0;}
.vc20-stat{background:rgba(255,255,255,.05);border-radius:.8rem;padding:.9rem;border:1px solid var(--vc20-line);}
.vc20-stat b{display:block;font-size:1.9rem;color:var(--vc20-accent);}
.vc20-stat span{font-size:1.15rem;color:var(--vc20-text-muted);}

/* ---------- CTA banner ---------- */
.vc20-cta{background:var(--vc20-grad);color:#1d2c3d;border-radius:var(--vc20-radius);padding:1.6rem;text-align:center;box-shadow:0 .5rem 1.4rem rgba(255,165,0,.4);margin:2rem 0;}
.vc20-cta h2{color:#1d2c3d;justify-content:center;margin-bottom:.4rem;}
.vc20-cta p{color:#2E4057;font-weight:600;margin-bottom:1rem;}
.vc20-cta .vc20-btn{background:#1d2c3d;color:var(--vc20-accent);}

/* ---------- Footer ---------- */
.vc20-footer{background:var(--vc20-bg-deep);padding:2.2rem 1.4rem 3rem;margin-top:2rem;border-top:2px solid var(--vc20-primary);}
.vc20-footer p{color:var(--vc20-text-muted);font-size:1.35rem;line-height:2rem;margin-bottom:1rem;}
.vc20-footer h4{color:var(--vc20-accent);font-size:1.5rem;margin:1.2rem 0 .6rem;}
.vc20-footer-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem;}
.vc20-footer-links a{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.06);border:1px solid var(--vc20-line);border-radius:.7rem;padding:.5rem .9rem;font-size:1.25rem;color:var(--vc20-text-muted);}
.vc20-footer-links a:hover{color:var(--vc20-accent);border-color:var(--vc20-primary);}
.vc20-foot-promo{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0 1rem;}
.vc20-foot-promo .vc20-btn{min-height:3.8rem;font-size:1.3rem;}
.vc20-copy{text-align:center;font-size:1.2rem;color:var(--vc20-text-muted);border-top:1px solid var(--vc20-line);padding-top:1rem;margin-top:1rem;}

/* ---------- Mobile bottom nav ---------- */
.vc20-bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:1000;height:var(--vc20-bottomnav-h);
  background:linear-gradient(180deg,#36506e,#1d2c3d);
  border-top:1px solid var(--vc20-line);box-shadow:0 -.3rem 1rem rgba(0,0,0,.4);
  display:flex;justify-content:space-around;align-items:center;padding:.4rem 0;
}
.vc20-bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--vc20-text-muted);font-size:1.1rem;font-weight:700;gap:.2rem;
  min-width:6rem;min-height:5.6rem;transition:color .15s ease,transform .15s ease;position:relative;
}
.vc20-bottomnav a i{font-size:2.4rem;}
.vc20-bottomnav a:hover,.vc20-bottomnav a.vc20-active{color:var(--vc20-accent);transform:translateY(-2px);}
.vc20-bottomnav a.vc20-active::before{content:"";position:absolute;top:0;width:2.6rem;height:.3rem;border-radius:.3rem;background:var(--vc20-grad);}
.vc20-bottomnav a .vc20-badge{position:absolute;top:.4rem;right:1.4rem;background:var(--vc20-danger);color:#fff;font-size:.9rem;font-weight:800;border-radius:1rem;padding:0 .4rem;min-width:1.5rem;text-align:center;}

/* ---------- Desktop hide / responsive ---------- */
@media (min-width:769px){
  .vc20-bottomnav{display:none;}
  body{max-width:430px;}
}
@media (max-width:768px){
  .vc20-wrapper{padding-bottom:calc(var(--vc20-bottomnav-h) + 1.6rem);}
}
@media (max-width:360px){
  .vc20-grid{grid-template-columns:repeat(2,1fr);}
  .vc20-h1{font-size:2rem;}
}