/* ============================================================
   bong da so - theme.css (core base stylesheet)
   All custom classes use the g368- prefix.
   Mobile-first layout, max-width 430px.
   Color palette: #C71585 | #DC143C | #BDC3C7 | #5D5D5D | #1E1E1E
   ============================================================ */

:root{
  --g368-primary:#C71585;     /* MediumVioletRed - brand */
  --g368-accent:#DC143C;      /* Crimson - CTA accent */
  --g368-silver:#BDC3C7;      /* light text on dark */
  --g368-gray:#5D5D5D;        /* secondary text */
  --g368-bg:#1E1E1E;          /* dark background */
  --g368-bg-2:#29222e;        /* card surface */
  --g368-bg-3:#151214;        /* deep section */
  --g368-text:#f6f5f8;
  --g368-gold:#ffcf4d;
  --g368-green:#39d98a;
  --g368-shadow:0 6px 22px rgba(0,0,0,.45);
  --g368-shadow-soft:0 3px 12px rgba(0,0,0,.35);
  --g368-radius:12px;
  --g368-radius-lg:18px;
  --g368-grad:linear-gradient(135deg,#C71585 0%,#DC143C 100%);
  --g368-grad-soft:linear-gradient(135deg,rgba(199,21,133,.18),rgba(220,20,60,.18));
}

*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:62.5%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:'Segoe UI','Inter',Roboto,system-ui,sans-serif;
  background:var(--g368-bg);
  color:var(--g368-text);
  line-height:1.5;
  font-size:1.5rem;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--g368-silver);text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{line-height:1.3;font-weight:700;}

/* ===== Layout helpers ===== */
.g368-container{width:100%;max-width:430px;margin:0 auto;padding:0 1.2rem;}
.g368-wrapper{padding-top:5.6rem;padding-bottom:7.8rem;}
.g368-section{padding:2.2rem 0;}
.g368-section--alt{background:var(--g368-bg-3);}
.g368-section--soft{background:var(--g368-grad-soft);}
.g368-text-center{text-align:center;}
.g368-hidden-mobile{display:none;}
.g368-pill{display:inline-block;padding:.3rem .9rem;border-radius:999px;font-size:1.2rem;font-weight:600;background:rgba(199,21,133,.18);color:#ffd;}

/* ===== Header ===== */
.g368-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(21,18,20,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(199,21,133,.25);
}
.g368-header-inner{max-width:430px;margin:0 auto;padding:.55rem 1rem;display:flex;align-items:center;gap:.6rem;}
.g368-logo{display:flex;align-items:center;gap:.5rem;min-width:0;flex:1;}
.g368-logo-img{width:30px;height:30px;border-radius:8px;object-fit:cover;}
.g368-logo-name{font-size:1.5rem;font-weight:800;color:#fff;white-space:nowrap;letter-spacing:.2px;}
.g368-logo-name span{color:var(--g368-primary);}
.g368-header-actions{display:flex;align-items:center;gap:.4rem;}
.g368-btn-login{
  padding:.5rem 1rem;border-radius:999px;font-size:1.25rem;font-weight:700;
  background:transparent;color:#fff;border:1px solid rgba(189,195,199,.45);
  cursor:pointer;transition:.2s;
}
.g368-btn-login:hover{border-color:var(--g368-primary);color:var(--g368-primary);}
.g368-btn-register{
  padding:.5rem 1.1rem;border-radius:999px;font-size:1.25rem;font-weight:800;
  background:var(--g368-grad);color:#fff;border:none;cursor:pointer;
  box-shadow:0 3px 10px rgba(220,20,60,.4);transition:.2s;
}
.g368-btn-register:hover{transform:translateY(-1px);filter:brightness(1.08);}
.g368-menu-toggle{
  width:34px;height:34px;border-radius:8px;border:1px solid rgba(189,195,199,.3);
  background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.6rem;
}

/* ===== Mobile drawer menu ===== */
.g368-mobile-menu{
  position:fixed;top:0;right:-86%;width:80%;max-width:330px;height:100vh;z-index:9999;
  background:linear-gradient(180deg,#241a23 0%,#151214 100%);
  box-shadow:-8px 0 30px rgba(0,0,0,.5);
  transform:translateX(0);transition:right .3s ease;padding:1.4rem 1.2rem;overflow-y:auto;
}
.g368-mobile-menu.open{right:0;}
.g368-mobile-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;opacity:0;visibility:hidden;transition:.3s;}
.g368-mobile-menu-overlay.open{opacity:1;visibility:visible;}
.g368-mobile-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.4rem;padding-bottom:1rem;border-bottom:1px solid rgba(199,21,133,.3);}
.g368-mobile-menu-title{font-size:1.7rem;font-weight:800;color:#fff;}
.g368-mobile-menu-close{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;border:none;font-size:1.6rem;cursor:pointer;}
.g368-mobile-menu-link{
  display:flex;align-items:center;gap:.9rem;padding:.95rem .8rem;border-radius:10px;
  font-size:1.4rem;font-weight:600;color:#eee;margin-bottom:.4rem;transition:.2s;
}
.g368-mobile-menu-link:hover,.g368-mobile-menu-link:focus{background:rgba(199,21,133,.18);color:#fff;}
.g368-mobile-menu-link i{color:var(--g368-primary);font-size:1.5rem;width:22px;text-align:center;}
.g368-mobile-menu-cta{margin-top:1rem;display:flex;flex-direction:column;gap:.7rem;}

/* ===== Buttons ===== */
.g368-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem 1.6rem;border-radius:999px;font-size:1.4rem;font-weight:700;
  cursor:pointer;border:none;transition:.2s;text-decoration:none;
}
.g368-btn-primary{background:var(--g368-grad);color:#fff;box-shadow:0 4px 14px rgba(220,20,60,.42);}
.g368-btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);}
.g368-btn-outline{background:transparent;color:#fff;border:1.5px solid var(--g368-primary);}
.g368-btn-ghost{background:rgba(255,255,255,.08);color:#fff;}
.g368-btn-block{display:flex;width:100%;}

/* ===== Hero / Titles ===== */
.g368-section-head{margin-bottom:1.4rem;}
.g368-section-title{font-size:2rem;color:#fff;margin-bottom:.4rem;}
.g368-section-title i{color:var(--g368-primary);margin-right:.4rem;}
.g368-section-sub{font-size:1.3rem;color:var(--g368-silver);}

/* ===== Carousel ===== */
.g368-carousel{position:relative;border-radius:var(--g368-radius-lg);overflow:hidden;box-shadow:var(--g368-shadow);margin-bottom:1.6rem;}
.g368-carousel-track{display:flex;transition:transform .45s ease;}
.g368-carousel-slide{min-width:100%;position:relative;}
.g368-carousel-slide img{width:100%;height:190px;object-fit:cover;cursor:pointer;}
.g368-carousel-cap{position:absolute;left:0;right:0;bottom:0;padding:1.2rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));}
.g368-carousel-cap h3{font-size:1.6rem;color:#fff;margin-bottom:.2rem;}
.g368-carousel-cap p{font-size:1.2rem;color:var(--g368-silver);}
.g368-carousel-dots{position:absolute;bottom:.8rem;left:0;right:0;display:flex;justify-content:center;gap:.5rem;z-index:5;}
.g368-carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;transition:.2s;}
.g368-carousel-dot.active{background:var(--g368-primary);width:22px;border-radius:5px;}

/* ===== Category tab strip ===== */
.g368-cat-head{display:flex;align-items:center;justify-content:space-between;margin:1.8rem 0 1rem;}
.g368-cat-title{font-size:1.7rem;font-weight:800;color:#fff;display:flex;align-items:center;gap:.5rem;}
.g368-cat-title .g368-cat-badge{font-size:1.05rem;padding:.2rem .6rem;border-radius:6px;background:var(--g368-grad);color:#fff;}

/* ===== Game grid ===== */
.g368-game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;}
.g368-game-card{position:relative;border-radius:var(--g368-radius);overflow:hidden;background:var(--g368-bg-2);cursor:pointer;transition:.2s;border:1px solid rgba(255,255,255,.05);}
.g368-game-card:hover{transform:translateY(-3px);border-color:var(--g368-primary);box-shadow:0 6px 18px rgba(199,21,133,.3);}
.g368-game-img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.g368-game-name{font-size:1.15rem;font-weight:600;color:#eee;padding:.45rem .4rem .55rem;text-align:center;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.g368-game-hot{position:absolute;top:.3rem;right:.3rem;background:var(--g368-accent);color:#fff;font-size:.95rem;font-weight:700;padding:.1rem .45rem;border-radius:6px;}

/* ===== Cards / generic ===== */
.g368-card{background:var(--g368-bg-2);border-radius:var(--g368-radius-lg);padding:1.4rem;box-shadow:var(--g368-shadow-soft);border:1px solid rgba(255,255,255,.04);}
.g368-card h3{font-size:1.55rem;color:#fff;margin-bottom:.6rem;}
.g368-card p{font-size:1.3rem;color:var(--g368-silver);margin-bottom:.6rem;line-height:1.6;}
.g368-card-grid{display:grid;grid-template-columns:1fr;gap:.9rem;}

/* ===== Feature list ===== */
.g368-feature-list{display:grid;grid-template-columns:1fr;gap:.9rem;}
.g368-feature-item{display:flex;gap:1rem;align-items:flex-start;background:var(--g368-bg-2);padding:1.2rem;border-radius:var(--g368-radius);border:1px solid rgba(255,255,255,.04);}
.g368-feature-icon{flex-shrink:0;width:42px;height:42px;border-radius:10px;background:var(--g368-grad-soft);display:flex;align-items:center;justify-content:center;font-size:1.9rem;color:var(--g368-primary);}
.g368-feature-text h4{font-size:1.35rem;color:#fff;margin-bottom:.25rem;}
.g368-feature-text p{font-size:1.2rem;color:var(--g368-silver);line-height:1.5;}

/* ===== FAQ accordion ===== */
.g368-faq-item{background:var(--g368-bg-2);border-radius:var(--g368-radius);margin-bottom:.7rem;overflow:hidden;border:1px solid rgba(255,255,255,.04);}
.g368-faq-q{width:100%;text-align:left;background:none;border:none;color:#fff;font-size:1.35rem;font-weight:600;padding:1.1rem 1.2rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.6rem;}
.g368-faq-q .g368-faq-icon{color:var(--g368-primary);font-size:1.4rem;transition:.2s;}
.g368-faq-item.open .g368-faq-icon{transform:rotate(45deg);}
.g368-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 1.2rem;}
.g368-faq-item.open .g368-faq-a{max-height:320px;padding:0 1.2rem 1.1rem;}
.g368-faq-a p{font-size:1.25rem;color:var(--g368-silver);line-height:1.6;}

/* ===== RTP table ===== */
.g368-rtp-table{display:flex;flex-direction:column;gap:.7rem;}
.g368-rtp-row{background:var(--g368-bg-2);border-radius:10px;padding:.8rem 1rem;}
.g368-rtp-top{display:flex;justify-content:space-between;font-size:1.2rem;margin-bottom:.4rem;}
.g368-rtp-name{color:#fff;font-weight:600;}
.g368-rtp-val{color:var(--g368-green);font-weight:700;}
.g368-rtp-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;}
.g368-rtp-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--g368-primary),var(--g368-green));}

/* ===== Testimonials ===== */
.g368-testi-grid{display:grid;grid-template-columns:1fr;gap:.9rem;}
.g368-testi-card{background:var(--g368-bg-2);border-radius:var(--g368-radius);padding:1.2rem;border:1px solid rgba(255,255,255,.04);}
.g368-testi-stars{color:var(--g368-gold);font-size:1.2rem;margin-bottom:.5rem;}
.g368-testi-text{font-size:1.25rem;color:#eee;line-height:1.55;margin-bottom:.6rem;}
.g368-testi-author{font-size:1.15rem;color:var(--g368-silver);font-weight:600;}

/* ===== Payment ===== */
.g368-pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;}
.g368-pay-item{background:var(--g368-bg-2);border-radius:10px;padding:.8rem .4rem;text-align:center;border:1px solid rgba(255,255,255,.05);}
.g368-pay-item i{font-size:2rem;color:var(--g368-primary);margin-bottom:.3rem;}
.g368-pay-item span{display:block;font-size:1.05rem;color:var(--g368-silver);}

/* ===== Winners ===== */
.g368-winner-list{display:flex;flex-direction:column;gap:.5rem;}
.g368-winner-item{display:flex;align-items:center;justify-content:space-between;background:var(--g368-bg-2);padding:.7rem 1rem;border-radius:10px;font-size:1.2rem;}
.g368-winner-name{color:#fff;font-weight:600;}
.g368-winner-game{color:var(--g368-silver);font-size:1.05rem;}
.g368-winner-amount{color:var(--g368-gold);font-weight:800;}

/* ===== CTA ===== */
.g368-cta{background:var(--g368-grad);border-radius:var(--g368-radius-lg);padding:1.8rem 1.4rem;text-align:center;box-shadow:0 8px 24px rgba(220,20,60,.35);margin:1.6rem 0;}
.g368-cta h3{font-size:1.9rem;color:#fff;margin-bottom:.5rem;}
.g368-cta p{font-size:1.25rem;color:rgba(255,255,255,.92);margin-bottom:1rem;}

/* ===== App download CTA ===== */
.g368-app-row{display:flex;gap:1rem;align-items:center;background:var(--g368-bg-2);padding:1.2rem;border-radius:var(--g368-radius-lg);border:1px solid rgba(255,255,255,.05);}
.g368-app-row img{width:90px;height:90px;border-radius:14px;object-fit:cover;flex-shrink:0;}
.g368-app-row h4{font-size:1.5rem;color:#fff;margin-bottom:.3rem;}
.g368-app-row p{font-size:1.2rem;color:var(--g368-silver);margin-bottom:.7rem;}

/* ===== Inline SEO text link ===== */
.g368-text-link{color:var(--g368-primary);font-weight:700;border-bottom:1px dashed rgba(199,21,133,.5);}
.g368-text-link:hover{color:var(--g368-accent);}

/* ===== Footer ===== */
.g368-footer{background:var(--g368-bg-3);padding:2.4rem 0 1.4rem;border-top:1px solid rgba(199,21,133,.25);}
.g368-footer-brand{font-size:1.3rem;color:var(--g368-silver);line-height:1.6;margin-bottom:1.2rem;}
.g368-footer-promo{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem;}
.g368-footer-promo .g368-btn{font-size:1.2rem;padding:.6rem 1rem;}
.g368-footer-links{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .8rem;margin-bottom:1.4rem;}
.g368-footer-links a{font-size:1.2rem;color:var(--g368-silver);padding:.35rem 0;}
.g368-footer-links a:hover{color:var(--g368-primary);}
.g368-footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1rem;text-align:center;font-size:1.1rem;color:var(--g368-gray);}

/* ===== Mobile bottom nav ===== */
.g368-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;height:62px;
  background:linear-gradient(180deg,#241a23,#151214);
  border-top:1px solid rgba(199,21,133,.35);
  display:flex;justify-content:space-around;align-items:stretch;
  box-shadow:0 -4px 18px rgba(0,0,0,.45);
}
.g368-bottomnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;color:var(--g368-silver);cursor:pointer;background:none;border:none;
  font-size:1rem;font-weight:600;min-width:60px;min-height:60px;transition:.2s;position:relative;
}
.g368-bottomnav-icon{font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;}
.g368-bottomnav-icon .material-symbols-outlined{font-size:24px;}
.g368-bottomnav-item:hover,.g368-bottomnav-item.active{color:var(--g368-primary);}
.g368-bottomnav-item.active::before{content:"";position:absolute;top:0;left:25%;right:25%;height:3px;background:var(--g368-grad);border-radius:0 0 4px 4px;}
.g368-bottomnav-item:active{transform:scale(.94);}
.g368-bottomnav-badge{position:absolute;top:6px;right:18%;background:var(--g368-accent);color:#fff;font-size:.85rem;font-weight:700;padding:0 .35rem;border-radius:999px;min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;}

/* ===== Responsive ===== */
@media (min-width:431px){
  body{background:#151214;}
  .g368-header,.g368-bottomnav{max-width:430px;left:50%;transform:translateX(-50%);right:auto;}
  .g368-header{transform:translateX(-50%);}
  .g368-bottomnav{border-radius:14px 14px 0 0;}
}
@media (min-width:769px){
  .g368-hidden-mobile{display:block;}
  .g368-bottomnav{display:none;}
  .g368-wrapper{padding-bottom:2rem;}
  .g368-game-grid{grid-template-columns:repeat(6,1fr);}
  .g368-pay-grid{grid-template-columns:repeat(6,1fr);}
  .g368-testi-grid{grid-template-columns:repeat(2,1fr);}
  .g368-footer-links{grid-template-columns:repeat(3,1fr);}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}