/* ==========================================================================
   bongdanet.click - Core Stylesheet
   All custom classes use the sdef- prefix. Mobile-first, max-width 430px.
   ========================================================================== */
:root{
  --sdef-primary:#8470FF; --sdef-secondary:#0000FF; --sdef-bg:#2C2C2C;
  --sdef-bg-deep:#1a1a1f; --sdef-surface:#34343d; --sdef-text:#F0F8FF;
  --sdef-text-muted:#c7c7d8; --sdef-accent:#F0F8FF; --sdef-success:#E8F5E8;
  --sdef-gold:#ffd86b; --sdef-border:rgba(132,112,255,0.25);
  --sdef-radius:12px; --sdef-radius-sm:8px; --sdef-shadow:0 4px 14px rgba(0,0,0,0.35);
  --sdef-header-h:56px; --sdef-bottomnav-h:62px; font-size:62.5%;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{font-family:'Segoe UI','Roboto','Inter',system-ui,-apple-system,sans-serif;
  background:var(--sdef-bg);color:var(--sdef-text);line-height:1.5rem;font-size:1.4rem;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--sdef-text);text-decoration:none}
img{max-width:100%;display:block}
ul,ol{list-style:none}

/* Layout */
.sdef-container{width:100%;max-width:430px;margin:0 auto;padding:0 1.2rem}
.sdef-wrapper{width:100%;max-width:430px;margin:0 auto;background:var(--sdef-bg);min-height:100vh;position:relative}

/* Header / Top Navigation */
.sdef-header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--sdef-header-h);
  background:linear-gradient(135deg,var(--sdef-primary) 0%,var(--sdef-secondary) 100%);
  box-shadow:0 2px 10px rgba(0,0,0,0.4);display:flex;align-items:center}
.sdef-header-inner{width:100%;max-width:430px;margin:0 auto;padding:0 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:0.6rem}
.sdef-logo{display:flex;align-items:center;gap:0.5rem;min-width:0}
.sdef-logo img{width:28px;height:28px;border-radius:6px;flex-shrink:0}
.sdef-logo-text{font-size:1.5rem;font-weight:700;color:var(--sdef-accent);letter-spacing:0.3px;white-space:nowrap}
.sdef-header-actions{display:flex;align-items:center;gap:0.4rem}

.sdef-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.35rem;
  min-height:36px;padding:0 0.9rem;border:none;border-radius:var(--sdef-radius-sm);
  font-size:1.3rem;font-weight:600;cursor:pointer;transition:transform 0.18s ease,background 0.18s ease;
  text-decoration:none;line-height:1}
.sdef-btn-login{background:rgba(255,255,255,0.15);color:var(--sdef-accent);border:1px solid rgba(255,255,255,0.4)}
.sdef-btn-register{background:var(--sdef-gold);color:var(--sdef-bg-deep);font-weight:700}
.sdef-btn-promo{background:linear-gradient(135deg,var(--sdef-gold) 0%,#ffb347 100%);color:var(--sdef-bg-deep);
  font-weight:700;padding:0 1.4rem;min-height:42px;border-radius:24px;box-shadow:0 3px 10px rgba(255,216,107,0.3)}
.sdef-btn:hover{transform:translateY(-1px)}
.sdef-btn:active{transform:scale(0.96)}
.sdef-menu-btn{background:transparent;border:1px solid rgba(255,255,255,0.4);color:var(--sdef-accent);
  width:36px;height:36px;border-radius:var(--sdef-radius-sm);display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:1.6rem}

/* Mobile expandable menu */
.sdef-mobile-menu{position:fixed;top:var(--sdef-header-h);left:0;right:0;z-index:9999;
  background:var(--sdef-bg-deep);border-bottom:1px solid var(--sdef-border);
  max-height:0;overflow:hidden;transition:max-height 0.3s ease}
.sdef-mobile-menu.sdef-menu-open{max-height:480px;overflow-y:auto;box-shadow:var(--sdef-shadow)}
.sdef-mobile-menu-inner{padding:0.6rem 1.2rem 1rem;display:grid;gap:0.4rem}
.sdef-mobile-menu a{display:flex;align-items:center;gap:0.6rem;padding:0.7rem 0.8rem;
  border-radius:var(--sdef-radius-sm);color:var(--sdef-text);font-size:1.35rem;
  border:1px solid transparent;transition:background 0.18s ease,border-color 0.18s ease}
.sdef-mobile-menu a:hover,.sdef-mobile-menu a:active{background:rgba(132,112,255,0.18);border-color:var(--sdef-border)}
.sdef-mobile-menu a i,.sdef-mobile-menu a span.material-icons-outlined{font-size:1.8rem;color:var(--sdef-primary)}

/* Hero / Carousel */
.sdef-hero{margin-top:calc(var(--sdef-header-h) + 0.8rem);padding-top:0.2rem}
.sdef-carousel{position:relative;width:100%;border-radius:var(--sdef-radius);overflow:hidden;
  box-shadow:var(--sdef-shadow);background:var(--sdef-surface)}
.sdef-carousel-track{position:relative;width:100%;aspect-ratio:16 / 9}
.sdef-carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.6s ease;cursor:pointer}
.sdef-carousel-slide.sdef-slide-active{opacity:1}
.sdef-carousel-slide img{width:100%;height:100%;object-fit:cover}
.sdef-carousel-caption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1rem 1.6rem;
  background:linear-gradient(to top,rgba(0,0,0,0.75),transparent);font-size:1.35rem;font-weight:600;color:var(--sdef-accent)}
.sdef-carousel-dots{position:absolute;bottom:0.6rem;left:0;right:0;display:flex;justify-content:center;gap:0.4rem}
.sdef-carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.5);
  border:none;cursor:pointer;transition:background 0.2s ease,transform 0.2s ease}
.sdef-carousel-dot.sdef-dot-active{background:var(--sdef-gold);transform:scale(1.25)}

/* Section headings */
.sdef-section{padding:1.4rem 0 0.6rem}
.sdef-section-title{font-size:1.7rem;font-weight:700;color:var(--sdef-accent);margin-bottom:0.2rem;
  display:flex;align-items:center;gap:0.5rem}
.sdef-section-title i,.sdef-section-title .material-icons-outlined{color:var(--sdef-primary);font-size:2rem}
.sdef-section-sub{font-size:1.25rem;color:var(--sdef-text-muted);margin-bottom:0.8rem}
.sdef-h1{font-size:2rem;font-weight:700;color:var(--sdef-accent);line-height:1.35;margin:0.8rem 0 0.4rem}
.sdef-lead{font-size:1.3rem;color:var(--sdef-text-muted);margin-bottom:1rem}

/* Category strip */
.sdef-category-strip-wrap{display:flex;align-items:center;gap:0.4rem;margin:0.6rem 0 0.8rem}
.sdef-category-arrow{flex-shrink:0;width:32px;height:36px;border-radius:var(--sdef-radius-sm);
  background:var(--sdef-surface);color:var(--sdef-accent);border:1px solid var(--sdef-border);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.sdef-category-strip{display:flex;gap:0.5rem;overflow-x:auto;scroll-behavior:smooth;padding:0.2rem 0;
  flex:1;scrollbar-width:none}
.sdef-category-strip::-webkit-scrollbar{display:none}
.sdef-category-chip{flex-shrink:0;padding:0.4rem 0.9rem;background:var(--sdef-surface);
  color:var(--sdef-text);border-radius:18px;font-size:1.2rem;font-weight:600;
  border:1px solid var(--sdef-border);white-space:nowrap}

/* Game grid */
.sdef-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.6rem;margin-top:0.4rem}
.sdef-game-card{display:flex;flex-direction:column;align-items:center;background:var(--sdef-surface);
  border-radius:var(--sdef-radius-sm);padding:0.5rem 0.3rem;border:1px solid var(--sdef-border);
  cursor:pointer;transition:transform 0.18s ease,border-color 0.18s ease;text-align:center;overflow:hidden}
.sdef-game-card:hover,.sdef-game-card:active{transform:translateY(-2px);border-color:var(--sdef-primary)}
.sdef-game-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;margin-bottom:0.35rem}
.sdef-game-name{font-size:1.05rem;color:var(--sdef-text);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6rem}

/* Generic cards / blocks */
.sdef-card{background:var(--sdef-surface);border:1px solid var(--sdef-border);
  border-radius:var(--sdef-radius);padding:1rem 1.1rem;margin-bottom:0.8rem}
.sdef-card h2{font-size:1.55rem;color:var(--sdef-accent);margin-bottom:0.4rem;display:flex;align-items:center;gap:0.45rem}
.sdef-card h3{font-size:1.35rem;color:var(--sdef-primary);margin:0.6rem 0 0.3rem}
.sdef-card p{font-size:1.28rem;color:var(--sdef-text-muted);margin-bottom:0.5rem}
.sdef-card ul{list-style:disc;padding-left:1.4rem;margin:0.4rem 0}
.sdef-card ul li{font-size:1.25rem;color:var(--sdef-text-muted);margin-bottom:0.3rem}
.sdef-link-text{color:var(--sdef-gold);font-weight:700;text-decoration:underline;cursor:pointer}

.sdef-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.6rem}
.sdef-feature-item{background:var(--sdef-surface);border:1px solid var(--sdef-border);
  border-radius:var(--sdef-radius-sm);padding:0.8rem;text-align:center;cursor:pointer}
.sdef-feature-item i,.sdef-feature-item .material-icons-outlined{font-size:2.4rem;color:var(--sdef-primary);margin-bottom:0.3rem}
.sdef-feature-item h3{font-size:1.3rem;color:var(--sdef-accent);margin-bottom:0.2rem}
.sdef-feature-item p{font-size:1.15rem;color:var(--sdef-text-muted)}

/* RTP / compact data table */
.sdef-rtp-table{width:100%;border-collapse:collapse;font-size:1.2rem}
.sdef-rtp-table th,.sdef-rtp-table td{padding:0.45rem 0.5rem;border-bottom:1px solid var(--sdef-border);text-align:left}
.sdef-rtp-table th{color:var(--sdef-primary);font-weight:700}
.sdef-rtp-table td{color:var(--sdef-text-muted)}
.sdef-rtp-bar{height:6px;background:rgba(255,255,255,0.12);border-radius:4px;overflow:hidden;margin-top:0.25rem}
.sdef-rtp-bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--sdef-primary),var(--sdef-gold))}

/* Testimonials */
.sdef-testimonial{background:var(--sdef-surface);border:1px solid var(--sdef-border);
  border-radius:var(--sdef-radius);padding:0.9rem 1rem;margin-bottom:0.6rem}
.sdef-testimonial .sdef-stars{color:var(--sdef-gold);font-size:1.2rem;margin-bottom:0.25rem}
.sdef-testimonial p{font-size:1.25rem;color:var(--sdef-text-muted);margin-bottom:0.3rem}
.sdef-testimonial strong{color:var(--sdef-accent);font-size:1.2rem}

/* Winners showcase */
.sdef-winner-row{display:flex;align-items:center;justify-content:space-between;padding:0.55rem 0.7rem;
  background:var(--sdef-surface);border:1px solid var(--sdef-border);border-radius:var(--sdef-radius-sm);margin-bottom:0.4rem}
.sdef-winner-row span:first-child{font-size:1.2rem;color:var(--sdef-text)}
.sdef-winner-row .sdef-amount{color:var(--sdef-gold);font-weight:700;font-size:1.25rem}

/* Payment methods */
.sdef-payment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;margin-top:0.4rem}
.sdef-payment-item{background:var(--sdef-surface);border:1px solid var(--sdef-border);
  border-radius:var(--sdef-radius-sm);padding:0.6rem 0.3rem;text-align:center;font-size:1.1rem;color:var(--sdef-text-muted)}
.sdef-payment-item i,.sdef-payment-item .material-icons-outlined{font-size:2rem;color:var(--sdef-primary);margin-bottom:0.2rem}

/* App download CTA */
.sdef-app-cta{background:linear-gradient(135deg,var(--sdef-primary),var(--sdef-secondary));
  border-radius:var(--sdef-radius);padding:1.1rem;text-align:center;margin-bottom:0.8rem}
.sdef-app-cta h2{color:var(--sdef-accent);font-size:1.6rem;margin-bottom:0.3rem}
.sdef-app-cta p{color:var(--sdef-accent);font-size:1.25rem;margin-bottom:0.7rem}

/* FAQ */
.sdef-faq-item{background:var(--sdef-surface);border:1px solid var(--sdef-border);
  border-radius:var(--sdef-radius-sm);padding:0.7rem 0.9rem;margin-bottom:0.5rem}
.sdef-faq-item h3{font-size:1.3rem;color:var(--sdef-accent);margin-bottom:0.2rem}
.sdef-faq-item p{font-size:1.22rem;color:var(--sdef-text-muted)}

/* Play now CTA banner */
.sdef-play-now{background:linear-gradient(135deg,var(--sdef-gold),#ffb347);border-radius:var(--sdef-radius);
  padding:1.1rem;text-align:center;margin:0.8rem 0;color:var(--sdef-bg-deep)}
.sdef-play-now h2{color:var(--sdef-bg-deep);font-size:1.7rem;margin-bottom:0.3rem}
.sdef-play-now p{color:var(--sdef-bg-deep);font-size:1.25rem;margin-bottom:0.7rem}

/* Footer */
.sdef-footer{background:var(--sdef-bg-deep);border-top:1px solid var(--sdef-border);padding:1.4rem 0 2rem;margin-top:1.2rem}
.sdef-footer-brand{font-size:1.35rem;color:var(--sdef-text-muted);margin-bottom:0.8rem;line-height:1.5}
.sdef-footer-links{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.8rem}
.sdef-footer-links a{display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.8rem;
  background:var(--sdef-surface);border:1px solid var(--sdef-border);border-radius:var(--sdef-radius-sm);
  font-size:1.18rem;color:var(--sdef-text);transition:background 0.18s ease,border-color 0.18s ease;cursor:pointer}
.sdef-footer-links a:hover{background:rgba(132,112,255,0.2);border-color:var(--sdef-primary)}
.sdef-footer-copy{font-size:1.1rem;color:var(--sdef-text-muted);text-align:center;padding-top:0.6rem;border-top:1px solid var(--sdef-border)}

/* Mobile bottom navigation (fixed) */
.sdef-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:1000;height:var(--sdef-bottomnav-h);
  background:linear-gradient(180deg,var(--sdef-bg-deep) 0%,#0e0e12 100%);
  border-top:1px solid var(--sdef-border);display:flex;justify-content:space-around;align-items:stretch;
  box-shadow:0 -3px 12px rgba(0,0,0,0.4)}
.sdef-bottom-nav-btn{flex:1;min-width:60px;min-height:60px;background:transparent;border:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.2rem;
  color:var(--sdef-text-muted);cursor:pointer;transition:color 0.2s ease,transform 0.2s ease;padding:0.2rem}
.sdef-bottom-nav-btn i,.sdef-bottom-nav-btn .material-icons-outlined{font-size:24px;color:var(--sdef-text-muted);transition:color 0.2s ease}
.sdef-bottom-nav-btn span.sdef-nav-label{font-size:1.05rem;font-weight:600}
.sdef-bottom-nav-btn:hover,.sdef-bottom-nav-btn:active{color:var(--sdef-primary);transform:scale(1.05)}
.sdef-bottom-nav-btn:hover i,.sdef-bottom-nav-btn:hover .material-icons-outlined,
.sdef-bottom-nav-btn:active i,.sdef-bottom-nav-btn:active .material-icons-outlined{color:var(--sdef-primary)}
.sdef-bottom-nav-btn.sdef-nav-active{color:var(--sdef-gold)}
.sdef-bottom-nav-btn.sdef-nav-active i,.sdef-bottom-nav-btn.sdef-nav-active .material-icons-outlined{color:var(--sdef-gold)}

/* Tap feedback ripple */
.sdef-ripple{transform:scale(0.92)}

/* Desktop rules: hide bottom nav on desktop, pad main content on mobile */
.sdef-main{padding-bottom:calc(var(--sdef-bottomnav-h) + 1rem)}
@media (min-width:769px){
  .sdef-bottom-nav{display:none}
  .sdef-main{padding-bottom:1rem}
  .sdef-wrapper,.sdef-header-inner,.sdef-container{max-width:430px}
}
@media (max-width:768px){
  .sdef-main{padding-bottom:calc(var(--sdef-bottomnav-h) + 1.2rem)}
}

/* Accessibility focus styles */
a:focus-visible,button:focus-visible{outline:2px solid var(--sdef-gold);outline-offset:2px}