/* ===========================================================
   fly88 h - theme.css
   Mobile-first HTML5 gaming portal (Vietnamese market)
   All custom classes use the uid3- prefix
   =========================================================== */

:root{
  --uid3-bg:#262626;
  --uid3-bg-2:#1f1f1f;
  --uid3-bg-3:#303030;
  --uid3-primary:#5F9EA0;
  --uid3-primary-d:#3f7d7f;
  --uid3-light:#B0E0E6;
  --uid3-accent:#ffd24c;
  --uid3-text:#f3fafa;
  --uid3-text-mute:#9fb4b6;
  --uid3-border:#3a3a3a;
  --uid3-danger:#ff5a5a;
  --uid3-radius:14px;
  --uid3-shadow:0 6px 18px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;}
body{
  font-family:"Segoe UI","Noto Sans Vietnamese",Roboto,system-ui,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#2e5759 0,var(--uid3-bg) 60%);
  color:var(--uid3-text);
  line-height:1.5rem;
  font-size:1.4rem;
  overflow-x:hidden;
}
a{color:var(--uid3-light);text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}

.uid3-container{max-width:430px;margin:0 auto;padding:0 14px;}
.uid3-wrapper{padding-top:62px;padding-bottom:90px;min-height:100vh;}

/* ===== Header ===== */
.uid3-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,#1c2d2e 0%,#242424 100%);
  border-bottom:1px solid var(--uid3-primary-d);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.uid3-header-inner{
  max-width:430px;margin:0 auto;height:62px;padding:0 12px;
  display:flex;align-items:center;gap:8px;
}
.uid3-logo{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.uid3-logo img{width:30px;height:30px;border-radius:8px;}
.uid3-logo strong{color:#fff;font-size:1.7rem;font-weight:800;letter-spacing:.4px;}
.uid3-logo span{color:var(--uid3-light);font-size:1.1rem;display:block;line-height:1.2rem;}

.uid3-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;padding:0 14px;border-radius:20px;
  font-size:1.3rem;font-weight:700;border:none;cursor:pointer;
  transition:transform .15s ease,filter .15s ease;
}
.uid3-btn:active{transform:scale(.96);}
.uid3-btn-register{
  background:linear-gradient(135deg,#ffd24c 0%,#ff9d2c 100%);
  color:#3a2200;
}
.uid3-btn-login{
  background:linear-gradient(135deg,var(--uid3-primary) 0%,var(--uid3-primary-d) 100%);
  color:#fff;
}
.uid3-btn-block{display:flex;width:100%;padding:14px;font-size:1.5rem;border-radius:12px;}
.uid3-btn-ghost{background:transparent;border:1px solid var(--uid3-light);color:var(--uid3-light);}

.uid3-menu-toggle{
  background:transparent;border:none;color:var(--uid3-light);font-size:2rem;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;
}

/* ===== Slide-down nav ===== */
.uid3-nav{
  position:fixed;top:62px;left:0;right:0;z-index:999;
  background:#1c1c1c;border-bottom:1px solid var(--uid3-border);
  max-height:0;overflow:hidden;transition:max-height .3s ease;
}
.uid3-nav.open{max-height:480px;}
.uid3-nav ul{max-width:430px;margin:0 auto;padding:8px 12px 14px;}
.uid3-nav li a{
  display:flex;align-items:center;gap:10px;
  padding:12px 8px;border-bottom:1px dashed #333;color:var(--uid3-text);
  font-size:1.35rem;
}
.uid3-nav li a i{color:var(--uid3-primary);width:22px;text-align:center;}

/* ===== Hero carousel ===== */
.uid3-hero{margin:14px 0 6px;}
.uid3-carousel{position:relative;border-radius:var(--uid3-radius);overflow:hidden;box-shadow:var(--uid3-shadow);}
.uid3-track{display:flex;transition:transform .45s ease;}
.uid3-slide{min-width:100%;position:relative;}
.uid3-slide img{width:100%;height:188px;object-fit:cover;}
.uid3-slide .uid3-slide-cap{
  position:absolute;left:0;right:0;bottom:0;padding:10px 14px;
  background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,transparent 100%);
}
.uid3-slide-cap h2{color:#fff;font-size:1.7rem;line-height:2rem;}
.uid3-slide-cap p{color:var(--uid3-light);font-size:1.2rem;}
.uid3-dots{display:flex;gap:6px;justify-content:center;margin:8px 0 2px;}
.uid3-dots button{
  width:8px;height:8px;border-radius:50%;border:none;background:#5a5a5a;cursor:pointer;padding:0;
}
.uid3-dots button.active{background:var(--uid3-accent);width:22px;border-radius:6px;}

/* ===== Section ===== */
.uid3-section{margin:18px 0;}
.uid3-section-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.uid3-section-head h2{font-size:1.55rem;color:#fff;display:flex;align-items:center;gap:8px;}
.uid3-section-head h2 i{color:var(--uid3-accent);}
.uid3-section-head a{font-size:1.15rem;color:var(--uid3-light);}

/* ===== Game grid ===== */
.uid3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.uid3-game{
  background:var(--uid3-bg-3);border-radius:12px;overflow:hidden;
  border:1px solid var(--uid3-border);cursor:pointer;transition:transform .15s ease,border-color .15s ease;
}
.uid3-game:active{transform:scale(.95);border-color:var(--uid3-primary);}
.uid3-game img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#222;}
.uid3-game .uid3-game-name{
  padding:5px 6px;font-size:1.05rem;color:var(--uid3-text);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3rem;
}

/* ===== Cards ===== */
.uid3-card{
  background:linear-gradient(160deg,#2f2f2f 0%,#232323 100%);
  border:1px solid var(--uid3-border);border-radius:var(--uid3-radius);
  padding:14px;margin-bottom:12px;box-shadow:var(--uid3-shadow);
}
.uid3-card h3{color:var(--uid3-light);font-size:1.4rem;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.uid3-card h3 i{color:var(--uid3-accent);}
.uid3-card p{color:var(--uid3-text-mute);font-size:1.25rem;line-height:1.7rem;}

.uid3-features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.uid3-feature{
  background:var(--uid3-bg-3);border:1px solid var(--uid3-border);border-radius:12px;
  padding:12px;text-align:center;
}
.uid3-feature i{font-size:2.4rem;color:var(--uid3-primary);margin-bottom:6px;}
.uid3-feature b{display:block;color:#fff;font-size:1.25rem;}
.uid3-feature small{color:var(--uid3-text-mute);font-size:1.05rem;line-height:1.4rem;display:block;}

.uid3-promo-link{
  color:var(--uid3-accent);font-weight:800;cursor:pointer;border-bottom:1px dashed var(--uid3-accent);
}

/* ===== Testimonials ===== */
.uid3-testi{display:flex;flex-direction:column;gap:10px;}
.uid3-testi-item{
  background:var(--uid3-bg-3);border-left:3px solid var(--uid3-primary);
  padding:10px 12px;border-radius:8px;
}
.uid3-testi-item b{color:var(--uid3-light);font-size:1.2rem;}
.uid3-stars{color:var(--uid3-accent);font-size:1.1rem;}
.uid3-testi-item p{color:var(--uid3-text-mute);font-size:1.2rem;margin-top:4px;}

/* ===== Winners ===== */
.uid3-winner{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--uid3-bg-3);padding:9px 12px;border-radius:8px;margin-bottom:6px;font-size:1.2rem;
}
.uid3-winner b{color:var(--uid3-accent);}

/* ===== Payment ===== */
.uid3-pay{display:flex;flex-wrap:wrap;gap:8px;}
.uid3-pay span{
  background:var(--uid3-bg-3);border:1px solid var(--uid3-border);border-radius:8px;
  padding:8px 12px;font-size:1.15rem;display:flex;align-items:center;gap:6px;color:var(--uid3-light);
}

/* ===== App CTA ===== */
.uid3-app-cta{
  background:linear-gradient(135deg,var(--uid3-primary) 0%,var(--uid3-primary-d) 100%);
  border-radius:var(--uid3-radius);padding:16px;color:#fff;text-align:center;
}
.uid3-app-cta h3{font-size:1.5rem;margin-bottom:6px;}
.uid3-app-cta p{font-size:1.2rem;color:#eafafa;margin-bottom:10px;}
.uid3-app-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}

/* ===== FAQ ===== */
.uid3-faq-item{border-bottom:1px solid var(--uid3-border);padding:10px 0;}
.uid3-faq-q{font-weight:700;color:#fff;font-size:1.3rem;cursor:pointer;display:flex;justify-content:space-between;gap:8px;}
.uid3-faq-a{color:var(--uid3-text-mute);font-size:1.2rem;margin-top:6px;line-height:1.7rem;display:none;}
.uid3-faq-item.open .uid3-faq-a{display:block;}
.uid3-faq-item.open .uid3-faq-q i{transform:rotate(180deg);}

/* ===== Footer ===== */
.uid3-footer{
  background:#1a1a1a;border-top:1px solid var(--uid3-border);
  padding:18px 0 14px;margin-top:20px;
}
.uid3-footer p{color:var(--uid3-text-mute);font-size:1.2rem;line-height:1.7rem;margin-bottom:12px;}
.uid3-footer-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.uid3-footer-links a{
  background:var(--uid3-bg-3);border:1px solid var(--uid3-border);border-radius:8px;
  padding:6px 10px;font-size:1.1rem;color:var(--uid3-light);
}
.uid3-footer-promos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.uid3-footer-copy{color:#666;font-size:1.05rem;text-align:center;border-top:1px solid #2a2a2a;padding-top:10px;}

/* ===== Mobile bottom nav ===== */
.uid3-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;height:62px;
  background:linear-gradient(180deg,#242424 0%,#141414 100%);
  border-top:1px solid var(--uid3-primary-d);
  display:flex;justify-content:space-around;align-items:stretch;
}
.uid3-bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--uid3-text-mute);font-size:1rem;gap:2px;position:relative;cursor:pointer;
}
.uid3-bottomnav a i{font-size:2.2rem;line-height:2.2rem;}
.uid3-bottomnav a.active{color:var(--uid3-accent);}
.uid3-bottomnav a:active{transform:scale(.92);}
.uid3-bottomnav a.active::before{
  content:"";position:absolute;top:0;width:32px;height:3px;border-radius:0 0 4px 4px;background:var(--uid3-accent);
}

/* ===== Desktop ===== */
@media (min-width:769px){
  .uid3-bottomnav{display:none;}
  .uid3-wrapper{padding-bottom:30px;}
}

/* ===== Utility ===== */
.uid3-center{text-align:center;}
.uid3-mt{margin-top:14px;}
.uid3-kw{color:var(--uid3-light);font-weight:700;}
.uid3-badge{
  display:inline-block;background:var(--uid3-accent);color:#3a2200;
  font-size:1rem;padding:2px 8px;border-radius:10px;font-weight:700;margin-left:6px;
}