/* ==========================================================================
   baogiaothong.click - Core Stylesheet (mobile-first)
   All custom classes use the uif5- prefix.
   Palette: #FF4500 (primary) | #00FF7F (accent) | #273746 (bg)
            | #9AFF9A (soft) | #00FA9A (highlight)
   ========================================================================== */
:root {
  --uif5-primary:#FF4500; --uif5-accent:#00FF7F; --uif5-bg:#273746;
  --uif5-bg-deep:#1c2733; --uif5-bg-soft:#33485c; --uif5-text:#e8f3ee;
  --uif5-text-soft:#9AFF9A; --uif5-highlight:#00FA9A; --uif5-gold:#ffd166;
  --uif5-radius:14px; --uif5-shadow:0 6px 18px rgba(0,0,0,.28);
  --uif5-header-h:58px; --uif5-bottomnav-h:62px; --uif5-maxw:430px;
}
* { box-sizing:border-box; }
html { font-size:62.5%; }
body {
  margin:0; padding:0; line-height:1.5rem; font-size:1.5rem; color:var(--uif5-text);
  background:var(--uif5-bg); overflow-x:hidden; -webkit-font-smoothing:antialiased;
  font-family:"Segoe UI","Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
img { max-width:100%; display:block; }
a { color:var(--uif5-accent); text-decoration:none; }
.uif5-wrapper {
  max-width:var(--uif5-maxw); margin:0 auto; min-height:100vh; position:relative;
  background:var(--uif5-bg-deep); box-shadow:0 0 40px rgba(0,0,0,.4);
}

/* ============================ Header ============================ */
.uif5-header {
  position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--uif5-header-h);
  max-width:var(--uif5-maxw); margin:0 auto; padding:0 12px;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg,var(--uif5-bg) 0%,var(--uif5-bg-soft) 100%);
  border-bottom:2px solid var(--uif5-primary);
}
.uif5-logo { display:flex; align-items:center; gap:8px; color:var(--uif5-text); font-weight:800; font-size:1.8rem; letter-spacing:.3px; }
.uif5-logo img { width:30px; height:30px; border-radius:6px; }
.uif5-logo .uif5-logo-text { color:var(--uif5-accent); }
.uif5-header-actions { display:flex; align-items:center; gap:8px; }
.uif5-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:38px; padding:0 14px; border:none; border-radius:22px;
  font-weight:700; font-size:1.3rem; line-height:1; cursor:pointer; text-align:center;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.uif5-btn-register { background:linear-gradient(135deg,var(--uif5-primary),#ff7a3d); color:#fff; box-shadow:0 4px 12px rgba(255,69,0,.4); }
.uif5-btn-register:active { transform:scale(.95); }
.uif5-btn-login { background:transparent; color:var(--uif5-accent); border:1.5px solid var(--uif5-accent); }
.uif5-btn-login:active { transform:scale(.95); background:rgba(0,255,127,.12); }
.uif5-menu-toggle {
  background:transparent; border:none; color:var(--uif5-text); font-size:2.2rem;
  width:38px; height:38px; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.uif5-menu-toggle:hover { background:rgba(255,255,255,.08); }
.uif5-menu-toggle.uif5-active { color:var(--uif5-primary); }

/* Mobile slide-down menu */
.uif5-mobile-menu {
  position:fixed; top:var(--uif5-header-h); left:0; right:0; z-index:9999;
  max-width:var(--uif5-maxw); margin:0 auto; max-height:0; overflow:hidden;
  background:var(--uif5-bg-deep); border-bottom:2px solid var(--uif5-primary);
  box-shadow:var(--uif5-shadow); transition:max-height .28s ease;
}
.uif5-mobile-menu.uif5-open { max-height:480px; }
.uif5-mobile-menu ul { list-style:none; margin:0; padding:6px 0; }
.uif5-mobile-menu li a {
  display:flex; align-items:center; gap:12px; padding:13px 18px;
  color:var(--uif5-text); font-size:1.45rem; border-left:3px solid transparent;
}
.uif5-mobile-menu li a:hover,.uif5-mobile-menu li a:focus {
  background:rgba(0,255,127,.08); border-left-color:var(--uif5-accent); color:var(--uif5-accent);
}
.uif5-mobile-menu li a i { width:22px; text-align:center; color:var(--uif5-primary); }

/* ============================ Main / Layout ============================ */
.uif5-main { padding-top:calc(var(--uif5-header-h) + 6px); padding-bottom:0; }
@media (max-width:768px) { .uif5-main { padding-bottom:calc(var(--uif5-bottomnav-h) + 14px); } }
.uif5-section { padding:18px 14px; }
.uif5-section + .uif5-section { padding-top:0; }
.uif5-container { width:100%; }
.uif5-h1 { font-size:2.2rem; line-height:1.35; margin:0 0 10px; color:#fff; font-weight:800; }
.uif5-h1 .uif5-h1-accent { color:var(--uif5-primary); }
.uif5-h2 { font-size:1.85rem; margin:0 0 12px; color:var(--uif5-accent); font-weight:700; display:flex; align-items:center; gap:8px; }
.uif5-h2 i { color:var(--uif5-primary); }
.uif5-h3 { font-size:1.55rem; margin:14px 0 8px; color:var(--uif5-highlight); font-weight:700; }
.uif5-lead { color:var(--uif5-text-soft); font-size:1.42rem; margin:0 0 14px; }
.uif5-p { margin:0 0 12px; color:var(--uif5-text); }

/* ============================ Carousel ============================ */
.uif5-carousel { position:relative; width:100%; border-radius:var(--uif5-radius); overflow:hidden; box-shadow:var(--uif5-shadow); background:#000; }
.uif5-slides { position:relative; width:100%; aspect-ratio:16 / 9; }
.uif5-slide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; cursor:pointer; }
.uif5-slide.uif5-active { opacity:1; }
.uif5-slide img { width:100%; height:100%; object-fit:cover; }
.uif5-slide-caption {
  position:absolute; left:14px; bottom:16px; right:14px; color:#fff;
  padding:18px 12px 10px; border-radius:8px; pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
}
.uif5-slide-caption strong { font-size:1.7rem; display:block; color:var(--uif5-accent); }
.uif5-slide-caption span { font-size:1.25rem; }
.uif5-dots { position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.uif5-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); pointer-events:auto; cursor:pointer; border:none; padding:0; }
.uif5-dot.uif5-active { background:var(--uif5-primary); width:22px; border-radius:4px; }

/* ============================ Promo CTA banner ============================ */
.uif5-cta {
  background:linear-gradient(135deg,var(--uif5-primary),#ff8a3d); border-radius:var(--uif5-radius);
  padding:14px 16px; color:#fff; display:flex; align-items:center; justify-content:space-between;
  gap:12px; box-shadow:0 6px 16px rgba(255,69,0,.35);
}
.uif5-cta-text { font-weight:700; font-size:1.45rem; }
.uif5-cta-text small { display:block; font-weight:400; font-size:1.2rem; opacity:.9; }
.uif5-cta .uif5-btn { background:#fff; color:var(--uif5-primary); padding:0 18px; min-height:40px; }

/* ============================ Game list ============================ */
.uif5-filterbar { display:flex; gap:8px; overflow-x:auto; padding:6px 0 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.uif5-filterbar::-webkit-scrollbar { display:none; }
.uif5-chip {
  flex:0 0 auto; padding:7px 14px; border-radius:20px; background:var(--uif5-bg-soft);
  color:var(--uif5-text); font-size:1.25rem; font-weight:600; white-space:nowrap; cursor:pointer;
  border:1px solid rgba(255,255,255,.08); transition:background .15s ease,color .15s ease;
}
.uif5-chip.uif5-active,.uif5-chip:hover { background:var(--uif5-primary); color:#fff; border-color:var(--uif5-primary); }
.uif5-game-group { margin-bottom:18px; }
.uif5-game-group-title {
  display:flex; align-items:center; gap:8px; font-size:1.5rem; font-weight:700;
  color:var(--uif5-accent); margin:0 0 10px; border-left:4px solid var(--uif5-primary); padding-left:10px;
}
.uif5-game-group-title i { color:var(--uif5-highlight); }
.uif5-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.uif5-game-card {
  background:var(--uif5-bg-soft); border-radius:10px; padding:6px; text-align:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.06); overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease;
}
.uif5-game-card:hover,.uif5-game-card:active { transform:translateY(-2px); box-shadow:0 6px 14px rgba(255,69,0,.25); border-color:var(--uif5-primary); }
.uif5-game-card img { width:100%; aspect-ratio:1 / 1; object-fit:cover; border-radius:8px; background:#000; }
.uif5-game-card span { display:block; font-size:1.05rem; color:var(--uif5-text); margin-top:4px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:600px) { .uif5-grid { grid-template-columns:repeat(6,1fr); } }

/* ============================ Feature cards ============================ */
.uif5-features { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.uif5-feature { background:linear-gradient(160deg,var(--uif5-bg-soft),var(--uif5-bg)); border-radius:12px; padding:14px; border:1px solid rgba(0,250,154,.15); }
.uif5-feature i { font-size:2.4rem; color:var(--uif5-primary); }
.uif5-feature h3 { margin:8px 0 4px; font-size:1.35rem; color:#fff; }
.uif5-feature p { margin:0; font-size:1.2rem; color:var(--uif5-text-soft); line-height:1.35; }

/* ============================ Steps ============================ */
.uif5-steps { list-style:none; margin:0; padding:0; counter-reset:step; }
.uif5-steps li { position:relative; padding:10px 12px 10px 44px; margin-bottom:8px; background:var(--uif5-bg-soft); border-radius:10px; counter-increment:step; font-size:1.3rem; }
.uif5-steps li::before { content:counter(step); position:absolute; left:10px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; background:var(--uif5-primary); color:#fff; font-weight:700; font-size:1.3rem; display:flex; align-items:center; justify-content:center; }

/* ============================ FAQ ============================ */
.uif5-faq-item { background:var(--uif5-bg-soft); border-radius:10px; margin-bottom:8px; overflow:hidden; border:1px solid rgba(255,255,255,.06); }
.uif5-faq-item summary { padding:12px 14px; font-weight:700; color:var(--uif5-accent); cursor:pointer; font-size:1.35rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.uif5-faq-item summary::-webkit-details-marker { display:none; }
.uif5-faq-item summary::after { content:"+"; color:var(--uif5-primary); font-size:1.8rem; font-weight:700; }
.uif5-faq-item[open] summary::after { content:"-"; }
.uif5-faq-item p { padding:0 14px 12px; margin:0; font-size:1.25rem; color:var(--uif5-text); }

/* ============================ Reviews ============================ */
.uif5-reviews { display:grid; grid-template-columns:1fr; gap:10px; }
.uif5-review { background:var(--uif5-bg-soft); border-radius:12px; padding:12px 14px; border-left:3px solid var(--uif5-highlight); }
.uif5-review-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.uif5-review-avatar { width:34px; height:34px; border-radius:50%; color:#fff; font-weight:700; font-size:1.3rem; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--uif5-primary),var(--uif5-highlight)); }
.uif5-review-name { font-weight:700; color:#fff; font-size:1.3rem; }
.uif5-review-stars { color:var(--uif5-gold); font-size:1.2rem; }
.uif5-review p { margin:0; font-size:1.22rem; color:var(--uif5-text-soft); line-height:1.4; }

/* ============================ Winners ============================ */
.uif5-winners { background:linear-gradient(135deg,#2a1a0a,var(--uif5-bg-soft)); border-radius:12px; padding:12px; border:1px solid rgba(255,209,102,.25); }
.uif5-winner-row { display:flex; align-items:center; justify-content:space-between; padding:8px 4px; border-bottom:1px dashed rgba(255,255,255,.08); font-size:1.25rem; }
.uif5-winner-row:last-child { border-bottom:none; }
.uif5-winner-name { color:var(--uif5-accent); font-weight:600; }
.uif5-winner-amount { color:var(--uif5-gold); font-weight:800; }

/* ============================ Payment ============================ */
.uif5-payments { display:flex; flex-wrap:wrap; gap:8px; }
.uif5-payment { flex:1 1 80px; background:var(--uif5-bg-soft); border-radius:10px; padding:10px 6px; text-align:center; border:1px solid rgba(255,255,255,.08); }
.uif5-payment i { font-size:2rem; color:var(--uif5-highlight); }
.uif5-payment span { display:block; margin-top:4px; font-size:1.1rem; color:var(--uif5-text-soft); }

/* ============================ App download ============================ */
.uif5-appcta { background:radial-gradient(circle at top right,rgba(0,250,154,.18),transparent),var(--uif5-bg-soft); border-radius:14px; padding:16px; text-align:center; border:1px solid rgba(0,255,127,.25); }
.uif5-appcta img { width:110px; margin:0 auto 10px; border-radius:14px; box-shadow:var(--uif5-shadow); }
.uif5-appcta h3 { margin:0 0 6px; color:#fff; font-size:1.6rem; }
.uif5-appcta p { margin:0 0 12px; color:var(--uif5-text-soft); font-size:1.25rem; }
.uif5-appcta .uif5-btn-row { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.uif5-appcta .uif5-btn { background:var(--uif5-accent); color:var(--uif5-bg); min-height:42px; padding:0 18px; }
.uif5-appcta .uif5-btn-ghost { background:transparent; color:var(--uif5-accent); border:1.5px solid var(--uif5-accent); }

/* ============================ Inline promo link ============================ */
.uif5-link { color:var(--uif5-primary); font-weight:700; cursor:pointer; border-bottom:1px dashed var(--uif5-primary); }
.uif5-link:hover { color:var(--uif5-accent); border-bottom-color:var(--uif5-accent); }

/* ============================ Footer ============================ */
.uif5-footer { background:var(--uif5-bg-deep); border-top:2px solid var(--uif5-primary); padding:18px 14px calc(var(--uif5-bottomnav-h) + 18px); text-align:center; }
@media (min-width:769px) { .uif5-footer { padding-bottom:24px; } }
.uif5-footer-brand { color:var(--uif5-accent); font-weight:800; font-size:1.6rem; margin-bottom:6px; }
.uif5-footer-desc { color:var(--uif5-text-soft); font-size:1.2rem; margin:0 0 12px; line-height:1.45; }
.uif5-footer-links { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:12px; }
.uif5-footer-links a { background:var(--uif5-bg-soft); color:var(--uif5-text); padding:6px 12px; border-radius:18px; font-size:1.15rem; border:1px solid rgba(255,255,255,.08); cursor:pointer; }
.uif5-footer-links a:hover { color:var(--uif5-accent); border-color:var(--uif5-accent); }
.uif5-footer-copy { color:var(--uif5-text-soft); font-size:1.1rem; opacity:.8; }

/* ============================ Bottom nav ============================ */
.uif5-bottomnav {
  position:fixed; bottom:0; left:0; right:0; z-index:1000; height:var(--uif5-bottomnav-h);
  max-width:var(--uif5-maxw); margin:0 auto; display:flex; justify-content:space-around; align-items:stretch;
  background:linear-gradient(180deg,var(--uif5-bg-soft),var(--uif5-bg-deep)); border-top:2px solid var(--uif5-primary);
  box-shadow:0 -4px 16px rgba(0,0,0,.4);
}
.uif5-bottomnav-btn {
  flex:1; min-width:60px; min-height:60px; background:transparent; border:none; color:var(--uif5-text-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  cursor:pointer; font-size:1.05rem; font-weight:600; position:relative; padding:4px 2px;
  transition:color .15s ease,transform .15s ease;
}
.uif5-bottomnav-btn i,.uif5-bottomnav-btn .material-icons-outlined,.uif5-bottomnav-btn .material-icons-two-tone,.uif5-bottomnav-btn ion-icon { font-size:24px; }
.uif5-bottomnav-btn ion-icon { --ionicon-stroke-width:28px; }
.uif5-bottomnav-btn:active { transform:scale(.9); }
.uif5-bottomnav-btn.uif5-current { color:var(--uif5-primary); }
.uif5-bottomnav-btn.uif5-current::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:28px; height:3px; border-radius:0 0 4px 4px; background:var(--uif5-primary); }
.uif5-bottomnav-btn.uif5-promo { color:var(--uif5-accent); }
.uif5-bottomnav-btn.uif5-promo i { color:var(--uif5-gold); }
@media (min-width:769px) { .uif5-bottomnav { display:none; } .uif5-menu-toggle { display:none; } .uif5-mobile-menu { display:none; } }

/* Desktop-only nav helper (hidden on mobile) */
.uif5-desktop-nav { display:none; }
@media (min-width:769px) { .uif5-desktop-nav { display:flex; gap:14px; align-items:center; } .uif5-desktop-nav a { color:var(--uif5-text); font-size:1.3rem; font-weight:600; } .uif5-desktop-nav a:hover { color:var(--uif5-accent); } }

/* Utility */
.uif5-hidden { display:none !important; }
.uif5-text-center { text-align:center; }
.uif5-mt-0 { margin-top:0; }