/* ============================================================
   58win top - layout.css
   Mobile-first casino layout (Vietnamese market)
   All custom classes use the "s611-" prefix
   ============================================================ */

:root{
  --s611-bg-dark:#0b2538;
  --s611-bg-deep:#07182a;
  --s611-bg-card:#102a40;
  --s611-text:#F0FDFF;
  --s611-text-muted:#a9c4d6;
  --s611-primary:#00CED1;
  --s611-secondary:#228B22;
  --s611-accent:#FFD166;
  --s611-dark:#34495E;
  --s611-border:rgba(0,206,209,.25);
  --s611-radius:14px;
  --s611-shadow:0 6px 24px rgba(0,0,0,.35);
  --s611-header-h:5.4rem;
  --s611-bottomnav-h:6.4rem;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:62.5%;-webkit-text-size-adjust:100%;}
body{
  font-family:"Segoe UI","Noto Sans",Roboto,Arial,sans-serif;
  background:radial-gradient(circle at top,#0e2d44 0%,var(--s611-bg-deep) 60%);
  color:var(--s611-text);
  line-height:1.5rem;
  font-size:1.5rem;
  overflow-x:hidden;
}
a{color:var(--s611-primary);text-decoration:none;}
img{max-width:100%;display:block;}

.s611-container{max-width:430px;margin:0 auto;padding:0 1.2rem;}
.s611-wrapper{padding-top:var(--s611-header-h);padding-bottom:calc(var(--s611-bottomnav-h) + 1rem);}

/* ===== Header ===== */
.s611-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(90deg,var(--s611-bg-dark),var(--s611-bg-deep));
  border-bottom:1px solid var(--s611-border);
  box-shadow:var(--s611-shadow);
}
.s611-header-row{
  max-width:430px;margin:0 auto;height:var(--s611-header-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 1rem;
}
.s611-brand{display:flex;align-items:center;gap:.6rem;}
.s611-brand img{width:30px;height:30px;border-radius:8px;}
.s611-brand-name{font-size:1.7rem;font-weight:800;color:var(--s611-primary);letter-spacing:.3px;}
.s611-header-actions{display:flex;align-items:center;gap:.5rem;}
.s611-btn{
  border:0;border-radius:30px;padding:.7rem 1.4rem;font-size:1.3rem;font-weight:700;
  cursor:pointer;transition:transform .15s ease,filter .15s ease;
}
.s611-btn:active{transform:scale(.94);}
.s611-btn-register{background:linear-gradient(90deg,#ff7a45,#ffae00);color:#1a0c00;}
.s611-btn-login{background:linear-gradient(90deg,var(--s611-secondary),#16a34a);color:#fff;}
.s611-btn-ghost{background:transparent;color:var(--s611-text);border:1px solid var(--s611-border);}
.s611-menu-toggle{
  background:transparent;border:0;color:var(--s611-text);font-size:2rem;cursor:pointer;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
}

/* ===== Expandable nav menu ===== */
.s611-nav{
  max-height:0;overflow:hidden;background:var(--s611-bg-dark);
  border-top:1px solid transparent;transition:max-height .35s ease;
  max-width:430px;margin:0 auto;
}
.s611-nav.s611-open{max-height:520px;border-top-color:var(--s611-border);}
.s611-nav-list{list-style:none;padding:.6rem 1rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.s611-nav-list a{
  display:block;padding:.9rem 1rem;border-radius:10px;background:var(--s611-bg-card);
  color:var(--s611-text);font-size:1.3rem;font-weight:600;
}
.s611-nav-list a:active{background:var(--s611-primary);color:#04222a;}

/* ===== Hero / Carousel ===== */
.s611-hero{margin:1.2rem 0;}
.s611-carousel{position:relative;border-radius:var(--s611-radius);overflow:hidden;box-shadow:var(--s611-shadow);}
.s611-slides{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;scroll-behavior:smooth;}
.s611-slides::-webkit-scrollbar{display:none;}
.s611-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;}
.s611-slide img{width:100%;height:180px;object-fit:cover;}
.s611-slide-cap{
  position:absolute;left:0;right:0;bottom:0;padding:1rem;
  background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-weight:700;
}
.s611-dots{display:flex;gap:.5rem;justify-content:center;margin-top:.8rem;}
.s611-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);}
.s611-dots span.s611-active{background:var(--s611-primary);}

/* ===== Section titles ===== */
.s611-section{margin:1.6rem 0;}
.s611-section-title{
  display:flex;align-items:center;gap:.6rem;font-size:1.7rem;font-weight:800;
  color:var(--s611-text);margin-bottom:.9rem;border-left:4px solid var(--s611-primary);padding-left:.8rem;
}
.s611-section-title i,.s611-section-title .material-icons{color:var(--s611-accent);}

/* ===== Game grid ===== */
.s611-cat-head{
  display:flex;align-items:center;justify-content:space-between;margin:1.2rem 0 .6rem;
}
.s611-cat-title{font-size:1.5rem;font-weight:700;color:var(--s611-primary);}
.s611-cat-tag{font-size:1.1rem;color:var(--s611-text-muted);}
.s611-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;}
.s611-card{
  background:var(--s611-bg-card);border:1px solid var(--s611-border);border-radius:12px;
  padding:.5rem;text-align:center;cursor:pointer;transition:transform .15s ease,border-color .15s;
}
.s611-card:active{transform:scale(.95);border-color:var(--s611-primary);}
.s611-card img{width:100%;height:74px;object-fit:cover;border-radius:8px;}
.s611-card-name{
  font-size:1.15rem;color:var(--s611-text);margin-top:.4rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ===== Promo banner ===== */
.s611-promo{
  background:linear-gradient(120deg,#102a40,#0b2538);
  border:1px solid var(--s611-border);border-radius:var(--s611-radius);
  padding:1.2rem;margin:1.2rem 0;text-align:center;box-shadow:var(--s611-shadow);
}
.s611-promo h3{font-size:1.6rem;color:var(--s611-accent);margin-bottom:.5rem;}
.s611-promo p{font-size:1.25rem;color:var(--s611-text-muted);margin-bottom:.8rem;}
.s611-promo .s611-btn{font-size:1.4rem;padding:.8rem 2rem;}

/* ===== Feature / info blocks ===== */
.s611-block{
  background:var(--s611-bg-card);border:1px solid var(--s611-border);border-radius:var(--s611-radius);
  padding:1.2rem;margin:1.2rem 0;
}
.s611-block h2{font-size:1.6rem;color:var(--s611-primary);margin-bottom:.6rem;}
.s611-block h3{font-size:1.35rem;color:var(--s611-accent);margin:.8rem 0 .4rem;}
.s611-block p{font-size:1.3rem;color:var(--s611-text-muted);margin-bottom:.6rem;}
.s611-block ul{padding-left:1.6rem;color:var(--s611-text-muted);font-size:1.25rem;}
.s611-block ul li{margin-bottom:.4rem;}
.s611-link-inline{color:var(--s611-primary);font-weight:700;border-bottom:1px dotted var(--s611-primary);}

/* ===== Testimonials ===== */
.s611-testi{display:grid;grid-template-columns:1fr;gap:.8rem;}
.s611-testi-item{
  background:var(--s611-bg-deep);border:1px solid var(--s611-border);border-radius:12px;padding:1rem;
}
.s611-testi-item .s611-stars{color:var(--s611-accent);font-size:1.2rem;margin-bottom:.3rem;}
.s611-testi-item p{font-size:1.25rem;color:var(--s611-text);}
.s611-testi-item .s611-author{font-size:1.1rem;color:var(--s611-primary);margin-top:.4rem;}

/* ===== Payment / winners compact rows ===== */
.s611-chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.s611-chip{
  background:var(--s611-bg-deep);border:1px solid var(--s611-border);color:var(--s611-text);
  padding:.5rem 1rem;border-radius:30px;font-size:1.2rem;font-weight:600;
}
.s611-winner-row{
  display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;
  border-bottom:1px dashed rgba(255,255,255,.08);font-size:1.25rem;
}
.s611-winner-row .s611-amt{color:var(--s611-secondary);font-weight:800;}

/* ===== Footer ===== */
.s611-footer{
  margin-top:1.6rem;padding:1.6rem 1.2rem;background:var(--s611-bg-deep);
  border-top:1px solid var(--s611-border);color:var(--s611-text-muted);font-size:1.2rem;
}
.s611-footer h4{color:var(--s611-primary);font-size:1.4rem;margin-bottom:.6rem;}
.s611-footer-links{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.8rem 0;}
.s611-footer-links a{color:var(--s611-text-muted);}
.s611-footer-promos{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0;}
.s611-footer-copy{margin-top:1rem;font-size:1.1rem;color:#5f7a8c;text-align:center;}

/* ===== Mobile bottom nav ===== */
.s611-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;height:var(--s611-bottomnav-h);
  background:linear-gradient(180deg,var(--s611-bg-dark),var(--s611-bg-deep));
  border-top:1px solid var(--s611-border);
  display:flex;justify-content:space-around;align-items:stretch;
}
.s611-bottomnav button{
  flex:1;background:transparent;border:0;color:var(--s611-text-muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  font-size:1.05rem;cursor:pointer;min-width:60px;min-height:60px;transition:color .15s;
}
.s611-bottomnav button i,.s611-bottomnav button .material-icons{font-size:24px;}
.s611-bottomnav button.s611-active{color:var(--s611-primary);}
.s611-bottomnav button:active{transform:scale(.92);color:var(--s611-accent);}
.s611-bottomnav .s611-badge{
  position:absolute;top:6px;right:18px;background:#ff4d4d;color:#fff;border-radius:10px;
  font-size:.9rem;padding:0 5px;
}

/* ===== Desktop: hide bottom nav ===== */
@media (min-width:769px){
  .s611-bottomnav{display:none;}
  .s611-container{max-width:760px;}
}
@media (max-width:768px){
  .s611-wrapper{padding-bottom:calc(var(--s611-bottomnav-h) + 1.2rem);}
}