/* =========================================================
   KubetVIP - design.css  (prefix: ui2d-)
   Mobile-first HTML5 casino/gaming layout for VN market
   Comments in English only.
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --ui2d-primary:   #00CED1;
  --ui2d-accent:    #AFEEEE;
  --ui2d-deep:      #E0FFFF;
  --ui2d-muted:     #CED4DA;
  --ui2d-bg:        #0b1320;
  --ui2d-bg2:       #0f1b2e;
  --ui2d-card:      #14223a;
  --ui2d-card2:     #1b2c49;
  --ui2d-text:      #f3f8ff;
  --ui2d-text-soft: #c3d2e6;
  --ui2d-gold:      #ffd76b;
  --ui2d-red:       #ff5a6e;
  --ui2d-shadow:    0 6px 24px rgba(0,0,0,.35);
  --ui2d-radius:    14px;
  --ui2d-radius-sm: 10px;
  --ui2d-maxw:      430px;
  --ui2d-hh:        58px;
  --ui2d-bh:        62px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html,body{
  font-size:62.5%;            /* 1rem = 10px */
  font-family:"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
  background:var(--ui2d-bg);
  color:var(--ui2d-text);
  line-height:1.55;
  scroll-behavior:smooth;
}
body{ max-width:100vw; overflow-x:hidden; min-height:100vh; }
a{ color:var(--ui2d-primary); text-decoration:none; }
img{ max-width:100%; display:block; }
ul,ol{ list-style:none; }
h1,h2,h3,h4{ line-height:1.3; font-weight:700; }

/* ---------- Layout containers ---------- */
.ui2d-container{ width:100%; max-width:var(--ui2d-maxw); margin:0 auto; padding:0 1.4rem; }
.ui2d-wrapper{ padding-top:calc(var(--ui2d-hh) + 1rem); padding-bottom:calc(var(--ui2d-bh) + 2rem); min-height:100vh; }
main{ display:block; }
@media (max-width:768px){
  main{ padding-bottom:84px; }
}

/* ---------- Header ---------- */
.ui2d-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--ui2d-hh);
  background:linear-gradient(180deg,#0c1729 0%, #0a1424 100%);
  border-bottom:1px solid rgba(0,206,209,.18);
  box-shadow:0 2px 14px rgba(0,0,0,.45);
}
.ui2d-header-inner{
  height:100%; max-width:var(--ui2d-maxw); margin:0 auto;
  padding:0 1.2rem;
  display:flex; align-items:center; gap:.8rem;
}
.ui2d-logo{ display:flex; align-items:center; gap:.6rem; flex:1; min-width:0; }
.ui2d-logo img{ width:30px; height:30px; border-radius:8px; }
.ui2d-logo-text{ font-size:1.7rem; font-weight:800; letter-spacing:.4px; color:var(--ui2d-deep); }
.ui2d-logo-text b{ color:var(--ui2d-primary); }
.ui2d-header-actions{ display:flex; align-items:center; gap:.5rem; }
.ui2d-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.6rem 1.1rem; font-size:1.3rem; font-weight:700;
  border-radius:999px; border:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.ui2d-btn:active{ transform:scale(.96); }
.ui2d-btn-login{
  background:transparent; color:var(--ui2d-deep);
  border:1px solid rgba(0,206,209,.5);
}
.ui2d-btn-register{
  background:linear-gradient(90deg,#00CED1,#0aa3ad);
  color:#062028; box-shadow:0 4px 14px rgba(0,206,209,.35);
}
.ui2d-menu-btn{
  width:36px; height:36px; border-radius:10px;
  background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer; color:var(--ui2d-deep);
}

/* ---------- Mobile slide menu ---------- */
.ui2d-menu{
  position:fixed; top:0; right:-100%; width:82%; max-width:340px;
  height:100%; background:#0a1424; z-index:9999;
  transition:right .28s ease;
  padding:1.6rem 1.4rem; overflow-y:auto;
  border-left:1px solid rgba(0,206,209,.18);
}
.ui2d-menu.open{ right:0; }
.ui2d-menu-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9998;
  opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.ui2d-menu-overlay.open{ opacity:1; visibility:visible; }
.ui2d-menu-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; }
.ui2d-menu-title{ font-size:1.6rem; color:var(--ui2d-primary); font-weight:700; }
.ui2d-menu-close{ background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; }
.ui2d-menu-list li{ margin-bottom:.4rem; }
.ui2d-menu-list a{
  display:block; padding:1rem 1rem; color:var(--ui2d-text-soft);
  font-size:1.35rem; border-radius:10px;
  border:1px solid transparent; transition:all .15s;
}
.ui2d-menu-list a:hover, .ui2d-menu-list a:active{
  background:rgba(0,206,209,.08); color:var(--ui2d-deep);
  border-color:rgba(0,206,209,.25);
}
.ui2d-menu-list a .material-symbols-outlined,
.ui2d-menu-list a i{ vertical-align:middle; margin-right:.6rem; color:var(--ui2d-primary); font-size:1.8rem; }

/* ---------- Hero / Carousel ---------- */
.ui2d-hero{ margin-top:1rem; }
.ui2d-carousel{
  position:relative; border-radius:var(--ui2d-radius); overflow:hidden;
  box-shadow:var(--ui2d-shadow);
}
.ui2d-slides{ display:flex; transition:transform .5s ease; }
.ui2d-slide{ min-width:100%; position:relative; cursor:pointer; }
.ui2d-slide img{ width:100%; height:200px; object-fit:cover; }
.ui2d-slide-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.2rem; background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));
  color:#fff;
}
.ui2d-slide-cap h2{ font-size:1.7rem; color:var(--ui2d-deep); margin-bottom:.2rem; }
.ui2d-slide-cap p{ font-size:1.2rem; color:var(--ui2d-text-soft); }
.ui2d-dots{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  display:flex; gap:.5rem; z-index:3;
}
.ui2d-dots span{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.4); cursor:pointer;
}
.ui2d-dots span.active{ background:var(--ui2d-primary); width:22px; border-radius:6px; }

/* ---------- Section / Title ---------- */
.ui2d-section{ margin:2.2rem 0; }
.ui2d-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.ui2d-section-title{
  font-size:1.7rem; color:var(--ui2d-deep); font-weight:800;
  display:flex; align-items:center; gap:.6rem;
}
.ui2d-section-title::before{
  content:""; width:5px; height:22px; border-radius:4px;
  background:linear-gradient(180deg,var(--ui2d-primary),var(--ui2d-accent));
}
.ui2d-section-link{ font-size:1.2rem; color:var(--ui2d-primary); }

/* ---------- Category chips ---------- */
.ui2d-cats{ display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.6rem; scrollbar-width:none; }
.ui2d-cats::-webkit-scrollbar{ display:none; }
.ui2d-chip{
  flex:0 0 auto; padding:.6rem 1.2rem; border-radius:999px;
  background:var(--ui2d-card); color:var(--ui2d-text-soft);
  font-size:1.25rem; font-weight:600; cursor:pointer;
  border:1px solid rgba(255,255,255,.06);
  transition:all .15s;
}
.ui2d-chip.active, .ui2d-chip:hover{
  background:linear-gradient(90deg,var(--ui2d-primary),#0aa3ad);
  color:#062028;
}

/* ---------- Game Grid ---------- */
.ui2d-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.ui2d-card{
  background:var(--ui2d-card); border-radius:var(--ui2d-radius-sm);
  overflow:hidden; cursor:pointer; position:relative;
  border:1px solid rgba(255,255,255,.05);
  transition:transform .15s, box-shadow .15s;
}
.ui2d-card:hover, .ui2d-card:active{ transform:translateY(-3px); box-shadow:var(--ui2d-shadow); }
.ui2d-card-img{ position:relative; aspect-ratio:1/1; background:#0a1424; }
.ui2d-card-img img{ width:100%; height:100%; object-fit:cover; }
.ui2d-card-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,17,34,.5); opacity:0; transition:opacity .2s;
}
.ui2d-card:hover .ui2d-card-play{ opacity:1; }
.ui2d-card-play span{
  width:38px; height:38px; border-radius:50%;
  background:var(--ui2d-primary); color:#062028;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
}
.ui2d-card-name{
  padding:.5rem .6rem; font-size:1.05rem; color:var(--ui2d-text-soft);
  text-align:center; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ui2d-card-tag{
  position:absolute; top:6px; left:6px; z-index:2;
  padding:.2rem .5rem; font-size:1rem; border-radius:6px;
  background:var(--ui2d-red); color:#fff; font-weight:700;
}
.ui2d-card-tag.hot{ background:linear-gradient(90deg,#ff5a6e,#ff9966); }
.ui2d-card-tag.new{ background:linear-gradient(90deg,#00CED1,#5ad1d4); color:#062028; }

/* ---------- Featured ---------- */
.ui2d-featured{
  background:linear-gradient(135deg,#102542 0%, #0a1a30 100%);
  border-radius:var(--ui2d-radius); padding:1.2rem;
  border:1px solid rgba(0,206,209,.2);
}
.ui2d-featured-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.ui2d-feat-card{
  background:var(--ui2d-card2); border-radius:var(--ui2d-radius-sm);
  overflow:hidden; cursor:pointer;
}
.ui2d-feat-card img{ width:100%; height:90px; object-fit:cover; }
.ui2d-feat-body{ padding:.6rem .7rem; }
.ui2d-feat-body h4{ font-size:1.2rem; color:var(--ui2d-deep); margin-bottom:.2rem; }
.ui2d-feat-body p{ font-size:1rem; color:var(--ui2d-text-soft); }

/* ---------- Promo CTA banner ---------- */
.ui2d-cta{
  background:linear-gradient(90deg,#0aa3ad,#00CED1);
  color:#062028; border-radius:var(--ui2d-radius);
  padding:1.4rem 1.2rem; text-align:center; margin:1.6rem 0;
  box-shadow:var(--ui2d-shadow);
}
.ui2d-cta h3{ font-size:1.7rem; margin-bottom:.4rem; }
.ui2d-cta p{ font-size:1.2rem; margin-bottom:.8rem; opacity:.85; }
.ui2d-cta .ui2d-btn{ background:#062028; color:#fff; padding:.8rem 1.6rem; }

/* ---------- SEO long content ---------- */
.ui2d-content{
  background:var(--ui2d-card); border-radius:var(--ui2d-radius);
  padding:1.4rem; margin:1.6rem 0;
  border:1px solid rgba(255,255,255,.05);
}
.ui2d-content h2{ font-size:1.7rem; color:var(--ui2d-deep); margin:1.2rem 0 .6rem; }
.ui2d-content h2:first-child{ margin-top:0; }
.ui2d-content h3{ font-size:1.4rem; color:var(--ui2d-primary); margin:1rem 0 .4rem; }
.ui2d-content p{ font-size:1.25rem; color:var(--ui2d-text-soft); margin-bottom:.8rem; line-height:1.6; }
.ui2d-content ul{ padding-left:1.4rem; margin-bottom:.8rem; }
.ui2d-content li{ font-size:1.2rem; color:var(--ui2d-text-soft); margin-bottom:.4rem; list-style:disc; }
.ui2d-content strong{ color:var(--ui2d-deep); }
.ui2d-content a{ color:var(--ui2d-primary); text-decoration:underline; }

/* ---------- Steps list ---------- */
.ui2d-steps{ counter-reset:step; margin:1rem 0; }
.ui2d-steps li{
  position:relative; padding:1rem 1rem 1rem 3.4rem;
  background:var(--ui2d-card2); border-radius:var(--ui2d-radius-sm);
  margin-bottom:.7rem; font-size:1.2rem; color:var(--ui2d-text-soft);
  border-left:3px solid var(--ui2d-primary);
}
.ui2d-steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:.8rem; top:50%; transform:translateY(-50%);
  width:2rem; height:2rem; border-radius:50%;
  background:var(--ui2d-primary); color:#062028;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.1rem;
}

/* ---------- FAQ ---------- */
.ui2d-faq-item{
  background:var(--ui2d-card2); border-radius:var(--ui2d-radius-sm);
  margin-bottom:.7rem; overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
}
.ui2d-faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:1.1rem 1.2rem; color:var(--ui2d-deep); font-size:1.3rem; font-weight:700;
  display:flex; justify-content:space-between; align-items:center; gap:.6rem;
}
.ui2d-faq-q .ui2d-ico{ color:var(--ui2d-primary); font-size:1.6rem; transition:transform .2s; }
.ui2d-faq-item.open .ui2d-faq-q .ui2d-ico{ transform:rotate(45deg); }
.ui2d-faq-a{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  padding:0 1.2rem; color:var(--ui2d-text-soft); font-size:1.18rem;
}
.ui2d-faq-item.open .ui2d-faq-a{ max-height:320px; padding:0 1.2rem 1.1rem; }

/* ---------- Footer ---------- */
.ui2d-footer{
  background:#070e1c; padding:2rem 1.4rem 1.4rem;
  border-top:1px solid rgba(0,206,209,.15);
  margin-top:1.5rem;
}
.ui2d-footer-brand{ font-size:1.25rem; color:var(--ui2d-text-soft); margin-bottom:1rem; line-height:1.6; }
.ui2d-footer-links{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem;
  margin-bottom:1rem;
}
.ui2d-footer-links a{
  font-size:1.15rem; color:var(--ui2d-text-soft);
  padding:.5rem .6rem; background:rgba(255,255,255,.04); border-radius:8px;
  text-align:center;
}
.ui2d-footer-promo{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin:.8rem 0;
}
.ui2d-footer-promo button{
  flex:1 1 30%; min-width:90px; padding:.7rem .4rem;
  background:linear-gradient(90deg,#0aa3ad,#00CED1); color:#062028;
  border:none; border-radius:8px; font-weight:700; font-size:1.15rem; cursor:pointer;
}
.ui2d-footer-copy{
  text-align:center; font-size:1.1rem; color:var(--ui2d-muted);
  padding-top:1rem; border-top:1px solid rgba(255,255,255,.05);
}

/* ---------- Bottom nav ---------- */
.ui2d-bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:1000;
  height:var(--ui2d-bh);
  background:linear-gradient(180deg,#0c1729,#070e1c);
  border-top:1px solid rgba(0,206,209,.25);
  display:flex; justify-content:space-around; align-items:stretch;
}
.ui2d-bottomnav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem; background:none; border:none; cursor:pointer;
  color:var(--ui2d-text-soft); font-size:1rem; font-weight:600;
  transition:color .15s, transform .15s;
  min-width:60px; min-height:60px;
}
.ui2d-bottomnav-item .material-symbols-outlined,
.ui2d-bottomnav-item i,
.ui2d-bottomnav-item ion-icon{ font-size:24px; }
.ui2d-bottomnav-item.active{ color:var(--ui2d-primary); }
.ui2d-bottomnav-item:active{ transform:scale(.9); }
.ui2d-bottomnav-item.promo{ color:var(--ui2d-gold); }
@media (min-width:769px){
  .ui2d-bottomnav{ display:none; }
}

/* ---------- Utility ---------- */
.ui2d-hide-mobile{ display:none; }
.ui2d-text-center{ text-align:center; }
.ui2d-mt-1{ margin-top:1rem; }
.ui2d-mt-2{ margin-top:2rem; }
.ui2d-badge-count{
  position:absolute; top:4px; right:14px; min-width:16px; height:16px;
  background:var(--ui2d-red); color:#fff; font-size:.9rem; font-weight:700;
  border-radius:8px; padding:0 4px; display:flex; align-items:center; justify-content:center;
}
.ui2d-bottomnav-item{ position:relative; }

/* ---------- Desktop layout ---------- */
@media (min-width:769px){
  :root{ --ui2d-maxw:960px; }
  body{ background:#070e1c; }
  .ui2d-container{ max-width:960px; }
  .ui2d-grid{ grid-template-columns:repeat(6,1fr); }
  .ui2d-featured-grid{ grid-template-columns:repeat(4,1fr); }
  .ui2d-footer-links{ grid-template-columns:repeat(4,1fr); }
  .ui2d-slide img{ height:340px; }
  .ui2d-hide-mobile{ display:block; }
  main{ padding-bottom:2rem; }
}

/* ---------- Marquee ---------- */
.ui2d-marquee{
  background:rgba(255,215,107,.08); border:1px solid rgba(255,215,107,.25);
  border-radius:10px; padding:.7rem 1rem; margin:1rem 0;
  display:flex; align-items:center; gap:.6rem; overflow:hidden;
}
.ui2d-marquee i{ color:var(--ui2d-gold); font-size:1.6rem; }
.ui2d-marquee-track{
  font-size:1.2rem; color:var(--ui2d-gold); white-space:nowrap;
  animation:ui2dScroll 22s linear infinite;
}
@keyframes ui2dScroll{
  from{ transform:translateX(20%); }
  to{ transform:translateX(-100%); }
}

/* ---------- Trust badges ---------- */
.ui2d-trust{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:1.2rem 0; }
.ui2d-trust-badge{
  background:var(--ui2d-card2); padding:.5rem 1rem; border-radius:8px;
  font-size:1.1rem; color:var(--ui2d-text-soft);
  border:1px solid rgba(0,206,209,.2);
  display:flex; align-items:center; gap:.4rem;
}
.ui2d-trust-badge i, .ui2d-trust-badge .material-symbols-outlined{ color:var(--ui2d-primary); font-size:1.5rem; }