/* ===========================================================
   f1688s theme - mobile-first gaming site
   Prefix: uib4- (CSS) / pro24e (JS)
   Comments in English. Vietnamese content rendered in HTML.
   =========================================================== */

:root{
  --uib4-primary:#E91E63;
  --uib4-bg:#0C0C0C;
  --uib4-text:#FFFFFF;
  --uib4-pink:#EE82EE;
  --uib4-gray:#999999;
  --uib4-coral:#FA8072;
  --uib4-deep:#FF1493;
  --uib4-card:#161016;
  --uib4-card2:#1f1424;
  --uib4-border:rgba(233,30,99,.25);
  --uib4-radius:14px;
  --uib4-shadow:0 6px 22px rgba(0,0,0,.45);
  --uib4-maxw:430px;
}

*{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,system-ui,Arial,sans-serif;
  background:radial-gradient(circle at 20% 0%,#1a0a16 0%,#0C0C0C 55%) fixed;
  color:var(--uib4-text);
  line-height:1.5rem;
  font-size:1.4rem;
  overflow-x:hidden;
  min-height:100vh;
}
a{color:var(--uib4-pink);text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.8rem;font-weight:700}
h1{font-size:2.2rem;color:#fff}
h2{font-size:1.9rem;color:var(--uib4-pink);margin:1.2rem 0}
h3{font-size:1.6rem;color:var(--uib4-coral);margin:1rem 0}

.uib4-wrapper{
  max-width:var(--uib4-maxw);
  margin:0 auto;
  padding:0 12px;
  width:100%;
}
main{padding-bottom:90px}

/* ---------- Header ---------- */
.uib4-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,#1a0a14 0%,#0C0C0C 100%);
  border-bottom:1px solid var(--uib4-border);
  box-shadow:var(--uib4-shadow);
}
.uib4-header-inner{
  max-width:var(--uib4-maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;gap:8px;
}
.uib4-brand{display:flex;align-items:center;gap:8px;min-width:0}
.uib4-brand img{width:28px;height:28px;border-radius:6px}
.uib4-brand-name{font-weight:800;color:#fff;font-size:1.6rem;letter-spacing:.5px}
.uib4-brand-name span{color:var(--uib4-primary)}
.uib4-head-actions{display:flex;align-items:center;gap:6px}
.uib4-btn{
  border:none;cursor:pointer;border-radius:20px;
  padding:8px 14px;font-size:1.25rem;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
  transition:transform .15s, box-shadow .15s, filter .15s;
  min-height:36px;
}
.uib4-btn:active{transform:scale(.94)}
.uib4-btn-primary{
  background:linear-gradient(135deg,var(--uib4-primary),var(--uib4-deep));
  color:#fff;box-shadow:0 4px 14px rgba(255,20,147,.35);
}
.uib4-btn-ghost{
  background:transparent;color:#fff;border:1px solid var(--uib4-pink);
}
.uib4-btn-block{display:block;width:100%;text-align:center;padding:12px;font-size:1.5rem;border-radius:12px}

/* menu toggle */
.uib4-menu-btn{
  background:transparent;border:none;color:#fff;font-size:2rem;cursor:pointer;
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
}

/* ---------- Dropdown nav ---------- */
.uib4-nav{
  max-height:0;overflow:hidden;
  background:rgba(12,12,12,.98);
  transition:max-height .35s ease;
  border-top:1px solid transparent;
}
.uib4-nav.open{max-height:520px;border-top:1px solid var(--uib4-border)}
.uib4-nav ul{list-style:none;padding:6px 12px 12px}
.uib4-nav li{border-bottom:1px dashed rgba(238,130,238,.12)}
.uib4-nav a{
  display:block;padding:11px 6px;color:#fff;font-size:1.35rem;
}
.uib4-nav a:hover{color:var(--uib4-pink)}

/* ---------- Hero carousel ---------- */
.uib4-hero{margin-top:62px;padding-top:10px}
.uib4-carousel{
  position:relative;border-radius:var(--uib4-radius);overflow:hidden;
  box-shadow:var(--uib4-shadow);
}
.uib4-slides{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;scrollbar-width:none}
.uib4-slides::-webkit-scrollbar{display:none}
.uib4-slide{
  flex:0 0 100%;scroll-snap-align:start;position:relative;cursor:pointer;
}
.uib4-slide img{width:100%;height:200px;object-fit:cover}
.uib4-slide-cap{
  position:absolute;left:12px;bottom:12px;right:12px;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);
  padding:24px 12px 10px;border-radius:0 0 var(--uib4-radius) var(--uib4-radius);
}
.uib4-slide-cap b{color:var(--uib4-deep);font-size:1.5rem}
.uib4-dots{display:flex;gap:6px;justify-content:center;padding:8px 0}
.uib4-dots span{
  width:8px;height:8px;border-radius:50%;background:var(--uib4-gray);cursor:pointer;
}
.uib4-dots span.active{background:var(--uib4-primary);width:18px;border-radius:4px}

/* ---------- Section ---------- */
.uib4-section{padding:14px 0}
.uib4-section-title{
  display:flex;align-items:center;gap:8px;
  border-left:4px solid var(--uib4-primary);padding-left:10px;margin-bottom:10px;
}
.uib4-section-title h2{margin:0}
.uib4-section-title .material-icons{color:var(--uib4-coral);font-size:22px}

/* ---------- Game grid ---------- */
.uib4-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.uib4-card{
  background:linear-gradient(160deg,var(--uib4-card),var(--uib4-card2));
  border:1px solid var(--uib4-border);border-radius:12px;
  padding:6px;text-align:center;cursor:pointer;overflow:hidden;
  transition:transform .15s, box-shadow .15s;
}
.uib4-card:active{transform:scale(.96)}
.uib4-card img{
  width:100%;height:74px;object-fit:cover;border-radius:8px;
}
.uib4-card-name{
  font-size:1.1rem;color:#fff;margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.uib4-card-tag{
  display:inline-block;font-size:.95rem;color:#fff;
  background:linear-gradient(135deg,var(--uib4-primary),var(--uib4-deep));
  padding:2px 8px;border-radius:10px;margin-top:4px;
}

/* ---------- Info / feature blocks ---------- */
.uib4-panel{
  background:linear-gradient(160deg,var(--uib4-card),var(--uib4-card2));
  border:1px solid var(--uib4-border);border-radius:14px;
  padding:14px;margin-bottom:14px;
}
.uib4-panel p{color:#eee;margin-bottom:8px;font-size:1.35rem}
.uib4-panel ul{padding-left:18px;color:#eee}
.uib4-panel li{margin-bottom:4px;font-size:1.3rem}
.uib4-text-link{color:var(--uib4-pink);font-weight:700;border-bottom:1px dotted var(--uib4-pink)}
.uib4-pill{
  display:inline-block;font-size:1.1rem;padding:3px 10px;border-radius:12px;
  background:rgba(238,130,238,.12);color:var(--uib4-pink);margin:2px;
}

/* ---------- Promo CTA banner ---------- */
.uib4-cta{
  background:linear-gradient(135deg,#2a0a1c,#160a1a);
  border:1px solid var(--uib4-deep);border-radius:14px;
  padding:16px;text-align:center;margin:14px 0;
}
.uib4-cta h3{margin-top:0;color:#fff}
.uib4-cta p{color:#eee;margin-bottom:10px;font-size:1.3rem}

/* ---------- Testimonial ---------- */
.uib4-quote{
  border-left:3px solid var(--uib4-coral);padding:6px 0 6px 10px;margin-bottom:10px;
  font-style:italic;color:#f0f0f0;font-size:1.3rem;
}
.uib4-quote b{display:block;color:var(--uib4-pink);font-style:normal;font-size:1.15rem;margin-top:4px}

/* ---------- RTP table ---------- */
.uib4-rtp-row{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:6px;align-items:center;
  padding:8px;border-bottom:1px dashed rgba(238,130,238,.15);font-size:1.2rem;
}
.uib4-rtp-row span:last-child{color:var(--uib4-coral);font-weight:700;text-align:right}
.uib4-bar{height:6px;border-radius:4px;background:#222;overflow:hidden;margin-top:3px}
.uib4-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--uib4-primary),var(--uib4-coral))}

/* ---------- Payment / winners ---------- */
.uib4-chips{display:flex;flex-wrap:wrap;gap:6px}
.uib4-chip{
  background:#1c0e18;border:1px solid var(--uib4-border);
  padding:6px 10px;border-radius:20px;font-size:1.15rem;color:#eee;
  display:inline-flex;align-items:center;gap:6px;
}
.uib4-winner{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 4px;border-bottom:1px dashed rgba(238,130,238,.12);font-size:1.2rem;
}
.uib4-winner b{color:var(--uib4-coral)}

/* ---------- Footer ---------- */
.uib4-footer{
  background:#070607;border-top:1px solid var(--uib4-border);padding:18px 0 30px;
}
.uib4-footer p{color:var(--uib4-gray);font-size:1.2rem;margin-bottom:10px}
.uib4-footer-links{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0;
}
.uib4-footer-links a{
  font-size:1.1rem;color:#eee;background:#160a14;
  padding:5px 10px;border-radius:14px;border:1px solid var(--uib4-border);
}
.uib4-footer-links a:hover{color:var(--uib4-pink)}
.uib4-copy{text-align:center;color:#666;font-size:1.1rem;margin-top:10px}

/* ---------- Mobile bottom nav ---------- */
.uib4-bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  height:62px;display:flex;justify-content:space-around;align-items:center;
  background:linear-gradient(180deg,#1a0a14,#0C0C0C);
  border-top:1px solid var(--uib4-border);
  box-shadow:0 -4px 14px rgba(0,0,0,.5);
}
.uib4-bottomnav button{
  flex:1;background:transparent;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#ddd;font-size:1rem;gap:2px;min-width:60px;min-height:60px;
  transition:color .15s, transform .15s;
}
.uib4-bottomnav button:active{transform:scale(.9)}
.uib4-bottomnav button.active{color:var(--uib4-primary)}
.uib4-bottomnav button i,.uib4-bottomnav button .material-icons,
.uib4-bottomnav button ion-icon{font-size:22px}
.uib4-bottomnav button b{font-size:2rem;color:var(--uib4-deep);line-height:1}

/* ---------- Desktop ---------- */
@media (min-width:769px){
  .uib4-bottomnav{display:none}
  body{background:#0C0C0C}
  main{padding-bottom:30px}
}

/* ---------- Helpers ---------- */
.uib4-mt{margin-top:14px}
.uib4-center{text-align:center}
.uib4-row{display:flex;gap:8px;flex-wrap:wrap}
.uib4-hide-desktop{}