/* ===========================================================
   kubetvip.homes - theme.css
   Mobile-first HTML5 casino/gaming styles (Vietnamese market)
   All custom classes use prefix: g2f6-
   =========================================================== */

:root{
  /* Brand palette */
  --g2f6-bg:#262626;
  --g2f6-bg-soft:#1c1c1c;
  --g2f6-bg-card:#303030;
  --g2f6-primary:#D2691E;
  --g2f6-accent:#CC99FF;
  --g2f6-gold:#F5DEB3;
  --g2f6-wood:#8B7355;
  --g2f6-text:#F5DEB3;
  --g2f6-text-muted:#c9b48b;
  --g2f6-white:#ffffff;
  --g2f6-border:#3a3a3a;
  --g2f6-success:#5bbf6a;
  --g2f6-danger:#e0533d;

  /* Layout */
  --g2f6-radius:1.4rem;
  --g2f6-radius-sm:1rem;
  --g2f6-gap:1.2rem;
  --g2f6-shadow:0 0.5rem 1.6rem rgba(0,0,0,.45);
  --g2f6-header-h:6rem;
  --g2f6-bottomnav-h:6.4rem;
}

*{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","Noto Sans",Roboto,system-ui,sans-serif;
  background:radial-gradient(circle at 30% 0%,#333 0%,var(--g2f6-bg) 60%);
  color:var(--g2f6-text);
  line-height:1.5rem;
  font-size:1.5rem;
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--g2f6-gold);text-decoration:none;}
h1,h2,h3,h4{line-height:2.2rem;font-weight:700;color:var(--g2f6-white);}

/* Layout containers — NOTE literal max-width: 430px used for mobile wrapper */
.g2f6-wrapper{
  width:100%;
  max-width:430px;
  margin:0 auto;
  background:var(--g2f6-bg);
  box-shadow:var(--g2f6-shadow);
  min-height:100vh;
  position:relative;
}
.g2f6-container{
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding:0 1.2rem;
}
.g2f6-main{padding-bottom:9rem;padding-top:1.5rem;}

/* ===== Header ===== */
.g2f6-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,#1a1a1a 0%,var(--g2f6-bg) 100%);
  border-bottom:2px solid var(--g2f6-primary);
  box-shadow:0 .3rem 1rem rgba(0,0,0,.55);
}
.g2f6-header-inner{
  max-width:430px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1rem;gap:.6rem;
}
.g2f6-brand{display:flex;align-items:center;gap:.7rem;}
.g2f6-brand img{width:3rem;height:3rem;border-radius:.6rem;}
.g2f6-brand-name{
  font-size:1.7rem;font-weight:800;color:var(--g2f6-gold);
  letter-spacing:.05em;
}
.g2f6-brand-name span{color:var(--g2f6-accent);}
.g2f6-header-actions{display:flex;align-items:center;gap:.5rem;}
.g2f6-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  border:none;cursor:pointer;
  font-weight:700;font-size:1.3rem;
  padding:.65rem 1.1rem;border-radius:2rem;
  transition:transform .15s ease,filter .15s ease;
  min-height:44px;min-width:44px;
}
.g2f6-btn:active{transform:scale(.94);}
.g2f6-btn-primary{background:linear-gradient(135deg,var(--g2f6-primary),#a04d0d);color:#fff;}
.g2f6-btn-accent{background:linear-gradient(135deg,var(--g2f6-accent),#7a4fb3);color:#fff;}
.g2f6-btn-outline{background:transparent;border:1.5px solid var(--g2f6-gold);color:var(--g2f6-gold);}
.g2f6-btn-block{display:block;width:100%;padding:1rem;font-size:1.5rem;}
.g2f6-menu-btn{
  background:transparent;color:var(--g2f6-gold);font-size:1.8rem;
  width:44px;height:44px;border-radius:.6rem;
}
.g2f6-link-text{
  color:var(--g2f6-accent);font-weight:700;cursor:pointer;
  text-decoration:underline;
}

/* Expandable nav menu */
.g2f6-nav{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
  background:#1f1f1f;border-top:1px solid var(--g2f6-border);
}
.g2f6-nav.open{max-height:520px;}
.g2f6-nav-list{list-style:none;padding:.6rem 1rem;display:flex;flex-direction:column;gap:.2rem;}
.g2f6-nav-list a{
  display:flex;align-items:center;gap:.7rem;
  padding:.85rem .8rem;color:var(--g2f6-gold);
  border-radius:.6rem;font-size:1.4rem;font-weight:600;
}
.g2f6-nav-list a:active{background:var(--g2f6-bg-card);}
.g2f6-nav-list i{color:var(--g2f6-accent);font-size:1.6rem;}

/* ===== Hero / Carousel ===== */
.g2f6-hero{padding-top:var(--g2f6-header-h);}
.g2f6-carousel{
  position:relative;border-radius:var(--g2f6-radius);overflow:hidden;
  box-shadow:var(--g2f6-shadow);margin:1rem 0;
}
.g2f6-slides{position:relative;}
.g2f6-slide{display:none;}
.g2f6-slide.active{display:block;animation:g2f6Fade .6s ease;}
@keyframes g2f6Fade{from{opacity:0;}to{opacity:1;}}
.g2f6-slide img{width:100%;height:18rem;object-fit:cover;}
.g2f6-slide-cap{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);
  padding:1.2rem 1rem 1rem;color:#fff;font-weight:700;font-size:1.4rem;
}
.g2f6-dots{display:flex;justify-content:center;gap:.5rem;padding:.7rem 0;}
.g2f6-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--g2f6-border);cursor:pointer;
}
.g2f6-dot.active{background:var(--g2f6-primary);width:22px;border-radius:5px;}

/* ===== Section ===== */
.g2f6-section{padding:1.5rem 0;}
.g2f6-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1rem;
}
.g2f6-section-title{
  font-size:1.7rem;color:var(--g2f6-gold);
  display:flex;align-items:center;gap:.5rem;
}
.g2f6-section-title i{color:var(--g2f6-accent);}
.g2f6-section-more{font-size:1.2rem;color:var(--g2f6-accent);font-weight:600;}

/* ===== Game grid ===== */
.g2f6-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.7rem;
}
.g2f6-game{
  background:var(--g2f6-bg-card);
  border:1px solid var(--g2f6-border);
  border-radius:var(--g2f6-radius-sm);
  overflow:hidden;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.g2f6-game:active{transform:scale(.95);border-color:var(--g2f6-primary);}
.g2f6-game img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.g2f6-game-name{
  font-size:1.15rem;color:var(--g2f6-text);
  padding:.45rem .4rem;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:600;
}
.g2f6-cat-tag{
  display:inline-block;font-size:1rem;font-weight:700;
  padding:.25rem .8rem;border-radius:1rem;
  background:rgba(210,105,30,.18);color:var(--g2f6-primary);
  margin-bottom:.6rem;
}

/* ===== Cards ===== */
.g2f6-card{
  background:var(--g2f6-bg-card);
  border:1px solid var(--g2f6-border);
  border-radius:var(--g2f6-radius-sm);
  padding:1.2rem;margin-bottom:1rem;
  box-shadow:0 .3rem .8rem rgba(0,0,0,.3);
}
.g2f6-card h3{color:var(--g2f6-gold);margin-bottom:.6rem;font-size:1.5rem;}
.g2f6-card p{color:var(--g2f6-text-muted);font-size:1.3rem;line-height:1.7rem;}

/* ===== CTA banner ===== */
.g2f6-cta{
  background:linear-gradient(135deg,var(--g2f6-primary),var(--g2f6-accent));
  border-radius:var(--g2f6-radius);
  padding:1.6rem;text-align:center;color:#fff;
  box-shadow:var(--g2f6-shadow);margin:1.5rem 0;
}
.g2f6-cta h2{color:#fff;font-size:1.8rem;margin-bottom:.5rem;}
.g2f6-cta p{font-size:1.3rem;opacity:.92;margin-bottom:1rem;}
.g2f6-cta .g2f6-btn{background:#fff;color:var(--g2f6-primary);}

/* RTP table */
.g2f6-rtp-table{width:100%;border-collapse:collapse;font-size:1.2rem;}
.g2f6-rtp-table th,.g2f6-rtp-table td{
  padding:.6rem .4rem;text-align:center;
  border-bottom:1px solid var(--g2f6-border);
}
.g2f6-rtp-table th{color:var(--g2f6-accent);font-size:1.1rem;}
.g2f6-rtp-table td{color:var(--g2f6-text);}
.g2f6-rtp-high{color:var(--g2f6-success);font-weight:700;}

/* Testimonials */
.g2f6-testi{
  background:var(--g2f6-bg-card);
  border-left:3px solid var(--g2f6-accent);
  border-radius:.6rem;padding:.9rem 1rem;margin-bottom:.8rem;
}
.g2f6-testi-name{color:var(--g2f6-gold);font-weight:700;font-size:1.3rem;}
.g2f6-stars{color:#FFD700;font-size:1.2rem;}

/* Payment */
.g2f6-pay{display:flex;flex-wrap:wrap;gap:.5rem;}
.g2f6-pay span{
  background:var(--g2f6-bg-card);border:1px solid var(--g2f6-border);
  padding:.5rem .9rem;border-radius:.5rem;font-size:1.1rem;color:var(--g2f6-gold);
}

/* Winner list */
.g2f6-winner{
  display:flex;justify-content:space-between;align-items:center;
  padding:.55rem 0;border-bottom:1px dashed var(--g2f6-border);font-size:1.2rem;
}
.g2f6-winner:last-child{border:none;}
.g2f6-winner b{color:var(--g2f6-success);}

/* Steps */
.g2f6-steps{counter-reset:step;list-style:none;}
.g2f6-steps li{
  position:relative;padding:.6rem 0 .6rem 3.2rem;
  font-size:1.3rem;color:var(--g2f6-text-muted);
}
.g2f6-steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:.5rem;
  width:2.4rem;height:2.4rem;border-radius:50%;
  background:linear-gradient(135deg,var(--g2f6-primary),var(--g2f6-accent));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:800;
}

/* FAQ */
.g2f6-faq{border:1px solid var(--g2f6-border);border-radius:.6rem;margin-bottom:.6rem;overflow:hidden;}
.g2f6-faq-q{
  padding:.9rem 1rem;background:var(--g2f6-bg-card);
  font-weight:700;color:var(--g2f6-gold);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;font-size:1.35rem;
}
.g2f6-faq-a{padding:0 1rem;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;color:var(--g2f6-text-muted);font-size:1.25rem;}
.g2f6-faq.open .g2f6-faq-a{max-height:300px;padding:.9rem 1rem;}

/* Features list */
.g2f6-feat{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:.9rem;}
.g2f6-feat i{color:var(--g2f6-accent);font-size:2rem;flex-shrink:0;margin-top:.2rem;}
.g2f6-feat h4{color:var(--g2f6-gold);font-size:1.4rem;margin-bottom:.2rem;}
.g2f6-feat p{font-size:1.2rem;color:var(--g2f6-text-muted);line-height:1.6rem;}

/* Promo text */
.g2f6-promo-line{
  text-align:center;margin:1rem 0;
  font-size:1.3rem;color:var(--g2f6-gold);font-weight:600;
}

/* ===== Footer ===== */
.g2f6-footer{
  background:#1a1a1a;border-top:2px solid var(--g2f6-primary);
  padding:2rem 1.2rem 1.5rem;color:var(--g2f6-text-muted);
}
.g2f6-footer h4{color:var(--g2f6-gold);font-size:1.4rem;margin:1rem 0 .6rem;}
.g2f6-footer p{font-size:1.2rem;line-height:1.6rem;margin-bottom:.6rem;}
.g2f6-footer-links{
  display:flex;flex-wrap:wrap;gap:.4rem .8rem;margin:.6rem 0;
}
.g2f6-footer-links a{
  font-size:1.15rem;color:var(--g2f6-gold);
  padding:.25rem .4rem;
}
.g2f6-footer-promos{
  display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0;
}
.g2f6-footer-promos button{
  flex:1 1 45%;
}
.g2f6-footer-copy{
  text-align:center;font-size:1.1rem;color:#7a7a7a;
  border-top:1px solid var(--g2f6-border);margin-top:1rem;padding-top:1rem;
}

/* ===== Bottom Nav ===== */
.g2f6-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,#222 0%,#1a1a1a 100%);
  border-top:2px solid var(--g2f6-primary);
  display:flex;justify-content:space-around;align-items:stretch;
  height:var(--g2f6-bottomnav-h);
}
.g2f6-bottomnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;color:var(--g2f6-text-muted);
  background:transparent;border:none;cursor:pointer;
  font-size:1rem;font-weight:600;
  transition:color .15s ease,transform .15s ease;
  min-width:60px;min-height:60px;
}
.g2f6-bottomnav-item i,.g2f6-bottomnav-item .material-icons,
.g2f6-bottomnav-item ion-icon{
  font-size:2.2rem;
}
.g2f6-bottomnav-item:active{transform:scale(.9);}
.g2f6-bottomnav-item.active{color:var(--g2f6-primary);}
.g2f6-bottomnav-item .g2f6-bn-promo{color:var(--g2f6-accent);}
.g2f6-bottomnav-badge{
  position:relative;
}
.g2f6-bottomnav-badge::after{
  content:"HOT";position:absolute;top:.2rem;right:1rem;
  background:var(--g2f6-danger);color:#fff;
  font-size:.8rem;font-weight:800;padding:.1rem .3rem;border-radius:.4rem;
}

/* Desktop behavior */
@media (min-width:769px){
  .g2f6-bottomnav{display:none;}
  .g2f6-wrapper{max-width:430px;}
}
@media (max-width:768px){
  .g2f6-main{padding-bottom:9rem;}
}

/* Utility */
.g2f6-center{text-align:center;}
.g2f6-mt{margin-top:1.2rem;}
.g2f6-mb{margin-bottom:1.2rem;}
.g2f6-hidden{display:none !important;}

/* Top-back */
.g2f6-backtop{
  position:fixed;right:1rem;bottom:calc(var(--g2f6-bottomnav-h) + 1rem);
  width:4rem;height:4rem;border-radius:50%;
  background:var(--g2f6-primary);color:#fff;border:none;
  display:none;align-items:center;justify-content:center;
  font-size:1.8rem;z-index:999;box-shadow:var(--g2f6-shadow);
}
.g2f6-backtop.show{display:flex;}