/* go8 link - design stylesheet (Vietnamese market) */
/* All custom classes use the w14a2- prefix */

:root{
  --w14a2-bg:#2D2D2D;
  --w14a2-bg-soft:#3a3a3a;
  --w14a2-bg-card:#333333;
  --w14a2-text:#CED4DA;
  --w14a2-pink:#FFB3FF;
  --w14a2-mint:#BAFFC9;
  --w14a2-white:#ffffff;
  --w14a2-muted:#9aa0a6;
  --w14a2-border:#454545;
  --w14a2-shadow:0 4px 18px rgba(0,0,0,.45);
  --w14a2-radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;}
body{
  font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--w14a2-bg);
  color:var(--w14a2-text);
  line-height:1.5rem;
  font-size:1.5rem;
  max-width:430px;
  margin:0 auto;
  position:relative;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:var(--w14a2-pink);text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3{line-height:1.25;}

/* ============ Header ============ */
.w14a2-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(135deg,#222 0%,#2D2D2D 60%,#3a2438 100%);
  border-bottom:1px solid var(--w14a2-border);
  max-width:430px;margin:0 auto;
}
.w14a2-header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1rem;gap:.6rem;
}
.w14a2-logo{display:flex;align-items:center;gap:.55rem;min-width:0;}
.w14a2-logo img{width:30px;height:30px;border-radius:8px;object-fit:cover;}
.w14a2-logo span{font-size:1.6rem;font-weight:800;color:var(--w14a2-white);white-space:nowrap;}
.w14a2-logo b{color:var(--w14a2-pink);}
.w14a2-header-actions{display:flex;align-items:center;gap:.45rem;}
.w14a2-btn{
  border:0;border-radius:20px;padding:.55rem 1.1rem;font-size:1.25rem;font-weight:700;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;min-height:34px;
}
.w14a2-btn:active{transform:scale(.95);}
.w14a2-btn-login{background:transparent;color:var(--w14a2-text);border:1px solid var(--w14a2-border);}
.w14a2-btn-register{background:linear-gradient(90deg,#FFB3FF,#BAFFC9);color:#2D2D2D;font-weight:800;}
.w14a2-menu-btn{
  background:transparent;border:0;color:var(--w14a2-text);font-size:2rem;cursor:pointer;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
}
.w14a2-menu-panel{
  display:none;background:#262626;border-top:1px solid var(--w14a2-border);
  padding:.4rem 0;max-height:65vh;overflow-y:auto;
}
.w14a2-menu-panel.open{display:block;}
.w14a2-menu-panel a{
  display:block;padding:.85rem 1.3rem;color:var(--w14a2-text);font-size:1.35rem;
  border-bottom:1px dashed #3a3a3a;
}
.w14a2-menu-panel a:active{background:#333;}

/* ============ Layout ============ */
.w14a2-wrapper{padding:6.2rem 1rem 9rem;}
.w14a2-section{margin-bottom:2.2rem;}
.w14a2-section-title{
  font-size:1.75rem;color:var(--w14a2-white);font-weight:800;margin-bottom:1rem;
  padding-left:.6rem;border-left:4px solid var(--w14a2-pink);
}
.w14a2-section-title.mint{border-color:var(--w14a2-mint);}

/* ============ Hero carousel ============ */
.w14a2-carousel{position:relative;border-radius:var(--w14a2-radius);overflow:hidden;box-shadow:var(--w14a2-shadow);}
.w14a2-carousel-track{display:flex;transition:transform .4s ease;}
.w14a2-carousel-slide{flex:0 0 100%;cursor:pointer;position:relative;}
.w14a2-carousel-slide img{width:100%;height:180px;object-fit:cover;}
.w14a2-carousel-slide span{
  position:absolute;left:1rem;bottom:1rem;font-size:1.4rem;font-weight:700;color:#fff;
  background:rgba(0,0,0,.55);padding:.3rem .7rem;border-radius:8px;
}
.w14a2-carousel-dots{display:flex;gap:.5rem;justify-content:center;margin-top:.7rem;}
.w14a2-carousel-dots button{
  width:8px;height:8px;border-radius:50%;border:0;background:#555;cursor:pointer;padding:0;
}
.w14a2-carousel-dots button.active{background:var(--w14a2-pink);width:20px;border-radius:5px;}

/* ============ H1 hero box ============ */
.w14a2-hero-h1{
  background:linear-gradient(135deg,#3a2438,#2D2D2D);
  border:1px solid var(--w14a2-border);border-radius:var(--w14a2-radius);
  padding:1.3rem;color:var(--w14a2-white);
}
.w14a2-hero-h1 h1{font-size:2rem;margin-bottom:.5rem;}
.w14a2-hero-h1 p{font-size:1.3rem;color:var(--w14a2-text);}
.w14a2-cta-row{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap;}
.w14a2-cta-row .w14a2-btn{flex:1;min-width:120px;}

/* ============ Game grid ============ */
.w14a2-cat-head{
  display:flex;align-items:center;gap:.6rem;margin:1.6rem 0 .9rem;
}
.w14a2-cat-head i{color:var(--w14a2-pink);font-size:1.8rem;}
.w14a2-cat-head h2{font-size:1.6rem;color:var(--w14a2-white);font-weight:800;}
.w14a2-cat-head .w14a2-cat-tag{
  margin-left:auto;font-size:1.1rem;color:var(--w14a2-mint);background:rgba(186,255,201,.12);
  padding:.2rem .6rem;border-radius:6px;
}
.w14a2-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;
}
.w14a2-game{
  display:block;background:var(--w14a2-bg-card);border:1px solid var(--w14a2-border);
  border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .15s;
  text-align:center;
}
.w14a2-game:active{transform:scale(.96);}
.w14a2-game img{width:100%;height:78px;object-fit:cover;background:#222;}
.w14a2-game span{
  display:block;padding:.45rem .3rem;font-size:1.1rem;color:var(--w14a2-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ============ Cards / features ============ */
.w14a2-card{
  background:var(--w14a2-bg-card);border:1px solid var(--w14a2-border);
  border-radius:var(--w14a2-radius);padding:1.2rem;margin-bottom:1rem;
}
.w14a2-card h3{color:var(--w14a2-white);font-size:1.5rem;margin-bottom:.6rem;}
.w14a2-card p{color:var(--w14a2-text);font-size:1.3rem;margin-bottom:.6rem;}
.w14a2-card .w14a2-text-link{color:var(--w14a2-pink);font-weight:700;}
.w14a2-card .w14a2-text-link.mint{color:var(--w14a2-mint);}

.w14a2-feature-list{list-style:none;}
.w14a2-feature-list li{
  display:flex;gap:.7rem;padding:.7rem 0;border-bottom:1px dashed #3a3a3a;font-size:1.3rem;
}
.w14a2-feature-list li:last-child{border:0;}
.w14a2-feature-list i{color:var(--w14a2-mint);font-size:1.6rem;flex-shrink:0;margin-top:.1rem;}

.w14a2-testimonial{
  background:var(--w14a2-bg-card);border-left:3px solid var(--w14a2-pink);
  border-radius:10px;padding:1rem;margin-bottom:.8rem;
}
.w14a2-testimonial .w14a2-stars{color:#FFB3FF;font-size:1.2rem;margin-bottom:.3rem;}
.w14a2-testimonial p{font-size:1.25rem;color:var(--w14a2-text);font-style:italic;}
.w14a2-testimonial b{color:var(--w14a2-white);font-size:1.2rem;}

.w14a2-rtp-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.55rem 0;border-bottom:1px dashed #3a3a3a;font-size:1.25rem;
}
.w14a2-rtp-row:last-child{border:0;}
.w14a2-rtp-bar{flex:1;height:6px;background:#444;border-radius:4px;margin:0 .7rem;overflow:hidden;}
.w14a2-rtp-bar i{display:block;height:100%;background:linear-gradient(90deg,#FFB3FF,#BAFFC9);}

.w14a2-payment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;}
.w14a2-payment-grid div{
  background:#262626;border:1px solid var(--w14a2-border);border-radius:8px;
  padding:.7rem .2rem;text-align:center;font-size:1rem;color:var(--w14a2-text);
}

.w14a2-winner{
  display:flex;align-items:center;gap:.7rem;background:#262626;border-radius:10px;
  padding:.6rem .8rem;margin-bottom:.5rem;font-size:1.2rem;
}
.w14a2-winner i{color:var(--w14a2-mint);font-size:1.6rem;}
.w14a2-winner b{color:var(--w14a2-pink);}

.w14a2-app-banner{
  background:linear-gradient(135deg,#3a2438,#2D2D2D);
  border:1px solid var(--w14a2-border);border-radius:var(--w14a2-radius);
  padding:1.2rem;text-align:center;
}
.w14a2-app-banner h3{color:var(--w14a2-white);font-size:1.55rem;margin-bottom:.4rem;}
.w14a2-app-banner p{font-size:1.25rem;color:var(--w14a2-text);margin-bottom:.8rem;}

/* ============ Footer ============ */
.w14a2-footer{
  background:#1f1f1f;border-top:1px solid var(--w14a2-border);
  padding:1.5rem 1rem 2rem;color:var(--w14a2-muted);font-size:1.2rem;
}
.w14a2-footer h4{color:var(--w14a2-white);font-size:1.35rem;margin:.8rem 0 .5rem;}
.w14a2-footer p{margin-bottom:.7rem;line-height:1.6rem;}
.w14a2-footer-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem;}
.w14a2-footer-links a{
  background:#2a2a2a;border:1px solid var(--w14a2-border);border-radius:18px;
  padding:.4rem .9rem;font-size:1.15rem;color:var(--w14a2-text);
}
.w14a2-footer-links a:active{background:#333;color:var(--w14a2-pink);}
.w14a2-footer-copy{text-align:center;border-top:1px dashed #3a3a3a;padding-top:.8rem;font-size:1.1rem;}

/* ============ Mobile bottom nav ============ */
.w14a2-bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  max-width:430px;margin:0 auto;
  background:linear-gradient(180deg,#2a2a2a,#1a1a1a);
  border-top:1px solid var(--w14a2-border);
  display:flex;justify-content:space-around;align-items:center;
  height:62px;
}
.w14a2-bottom-nav button{
  flex:1;background:transparent;border:0;color:var(--w14a2-muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:1rem;cursor:pointer;min-width:60px;min-height:60px;
  transition:color .15s ease,transform .15s ease;gap:.15rem;padding:.2rem;
}
.w14a2-bottom-nav button i{font-size:22px;}
.w14a2-bottom-nav button.active{color:var(--w14a2-pink);}
.w14a2-bottom-nav button:active{transform:scale(.9);}
.w14a2-bottom-nav .w14a2-nav-promo{
  color:var(--w14a2-mint);position:relative;
}
.w14a2-bottom-nav .w14a2-nav-promo::after{
  content:' ';position:absolute;top:6px;right:22px;width:8px;height:8px;
  background:#FFB3FF;border-radius:50%;
}

/* desktop: hide bottom nav */
@media (min-width:769px){
  .w14a2-bottom-nav{display:none;}
}

/* main content bottom padding for mobile nav clearance */
@media (max-width:768px){
  .w14a2-wrapper{padding-bottom:9rem;}
}