/* === RESET & BASE === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-dark:#0a0a0c;--bg-card:#14111d;--bg-glass:rgba(15,12,25,0.85);
  --gold:#f1c40f;--gold-light:#ffecb3;--gold-dark:#996515;--gold-mid:#d4af37;
  --red:#ff4d4d;--tg-blue:#0088cc;--zalo-blue:#0068ff;
  --text:#f0f0f5;--text-muted:#b0a8c0;
  --radius:16px;--transition:all .3s ease;
}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',sans-serif;background:var(--bg-dark);color:var(--text);line-height:1.7;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* === FLOATING CONTACT === */
.floating-contact{position:fixed;right:16px;bottom:20px;z-index:9999;display:flex;flex-direction:column;gap:12px}
.float-btn{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.4);transition:var(--transition);animation:floatPulse 2s infinite}
.tg-float{background:linear-gradient(135deg,#0088cc,#00aaff)}
.zalo-float{background:linear-gradient(135deg,#0068ff,#00a2ff)}
.float-btn:hover{transform:scale(1.15);box-shadow:0 6px 30px rgba(212,175,55,.4)}
@keyframes floatPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* === HERO / MAIN SECTION === */
.main-section{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 0 40px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 20%,#1a152b 0%,#0a0a0c 40%,#000000 100%)}

/* Banner */
.banner-section{position:relative;z-index:1;width:100%;margin:0 auto 30px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.8)}
.hero-banner{width:100%;display:block;object-fit:cover;min-height:200px}
.hero-bg-effects{position:absolute;inset:0;pointer-events:none;z-index:0}
#particleCanvas{position:absolute;inset:0;width:100%;height:100%}
.glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.4}
.g1{width:500px;height:500px;background:rgba(212,175,55,.15);top:-15%;left:-10%;animation:glowFloat 8s ease-in-out infinite}
.g2{width:600px;height:600px;background:rgba(200,50,50,.08);bottom:-20%;right:-15%;animation:glowFloat 10s ease-in-out infinite reverse}
.g3{width:350px;height:350px;background:rgba(100,50,200,.08);top:40%;right:10%;animation:glowFloat 7s ease-in-out infinite 2s}
@keyframes glowFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}

.hero-container{position:relative;z-index:1;text-align:center;max-width:900px;margin:0 auto}

/* Logo */
.logo-area{position:relative;display:inline-block;margin-bottom:10px}
.main-logo{width:220px;margin:0 auto;filter:drop-shadow(0 0 30px rgba(241,196,15,0.6));animation:logoGlow 3s ease-in-out infinite}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 20px rgba(241,196,15,0.4))}50%{filter:drop-shadow(0 0 40px rgba(241,196,15,0.8))}}
.sparkle-wrap{position:absolute;inset:0;pointer-events:none}
.sparkle{position:absolute;width:30px;opacity:.7;animation:sparkleSpin 4s linear infinite}
.sp1{top:-10px;right:-10px}
.sp2{bottom:-10px;left:-10px;animation-delay:2s;animation-direction:reverse}
@keyframes sparkleSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Brand Title */
.brand-title{margin-bottom:30px}
.dealer-name{font-size:clamp(1.8rem,5vw,3.2rem);font-weight:900;
  background:linear-gradient(135deg,#fff1a8 0%,#f1c40f 20%,#d4af37 40%,#996515 60%,#d4af37 80%,#fff1a8 100%);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:goldShimmer 3s linear infinite;
  text-shadow:2px 2px 4px rgba(0,0,0,0.3);letter-spacing:2px;margin-bottom:8px;filter:drop-shadow(0 0 8px rgba(241,196,15,0.4))}
.dealer-slogan{font-size:clamp(1rem,2.5vw,1.4rem);font-weight:700;color:var(--gold-light);letter-spacing:3px;margin-bottom:12px;text-shadow:0 2px 4px rgba(0,0,0,0.5)}
.dealer-tagline{font-size:.95rem;color:var(--text-muted);font-weight:600;letter-spacing:1px}

/* Download Area */
.download-area{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:0}
.qr-section{background:var(--bg-glass);backdrop-filter:blur(12px);border:1px solid rgba(241,196,15,0.2);border-radius:var(--radius);padding:15px;text-align:center;flex:1;min-width:140px}
.qr-section h4{color:var(--gold);font-size:.85rem;margin-bottom:8px;line-height:1.2}
.platform-icons{display:flex;gap:12px;justify-content:center;margin-bottom:12px}
.platform-icons img{width:28px;height:28px}
.qr-code{width:140px;height:140px;border-radius:8px;margin:0 auto;border:2px solid rgba(212,175,55,.3)}

.action-area{display:flex;flex-direction:column;gap:12px;min-width:260px}
.btn-action{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:30px;font-weight:700;font-size:.95rem;transition:var(--transition);cursor:pointer;border:none}
.btn-play{background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-mid),var(--gold-dark));color:#000;box-shadow:0 4px 20px rgba(241,196,15,0.3);text-transform:uppercase;letter-spacing:1px}
.btn-play:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(241,196,15,0.5)}
.btn-telegram{background:linear-gradient(135deg,#0088cc,#00bbff);color:#fff}
.btn-telegram:hover{transform:translateY(-3px);box-shadow:0 6px 25px rgba(0,136,204,.4)}
.btn-zalo{background:linear-gradient(135deg,#0068ff,#00aaff);color:#fff}
.btn-zalo:hover{transform:translateY(-3px);box-shadow:0 6px 25px rgba(0,104,255,.4)}
.warning-text{font-size:.8rem;color:var(--red);margin-top:8px;text-align:center}
.warning-text strong{color:var(--gold)}

/* Partner Section */
.partner-section{display:flex;flex-direction:column;align-items:center;margin-top:30px;width:100%}
.partner-badge{display:inline-block;padding:8px 30px;border-radius:30px;font-size:0.85rem;font-weight:800;color:var(--gold);border:2px solid var(--gold);background:rgba(241,196,15,0.05);margin-bottom:20px;letter-spacing:2px;text-shadow:0 0 10px rgba(241,196,15,0.2)}
.partner-items{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;width:100%}
.p-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:var(--transition)}
.p-item img{width:90px;height:auto;border-radius:12px;filter:drop-shadow(0 5px 15px rgba(0,0,0,0.5))}
.p-item span{font-size:0.8rem;color:var(--text-muted);font-weight:700;text-transform:uppercase}
.p-item:hover img{transform:translateY(-5px);filter:brightness(1.2) drop-shadow(0 0 15px var(--gold))}

/* === HERO TRIPLE GRID LAYOUT === */
.hero-triple-grid{display:grid;grid-template-columns:280px 1fr 220px;gap:30px;align-items:stretch;margin:0 auto 50px;max-width:960px;width:100%;padding:0 10px}

/* Column Live */
.premium-frame{background:#000;border:1px solid var(--gold-mid);border-radius:12px;overflow:hidden;box-shadow:0 0 40px rgba(241,196,15,0.15);height:100%;display:flex;flex-direction:column}
.frame-top{padding:10px 15px;background:linear-gradient(to bottom, #1a1a1a, #000);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(241,196,15,0.2)}
.live-status{color:var(--red);font-weight:800;font-size:0.75rem;display:flex;align-items:center;gap:6px}
.pulse-dot{width:8px;height:8px;background:var(--red);border-radius:50%;animation:pulseRed 1.5s infinite}
.frame-title{color:var(--gold-light);font-size:0.75rem;font-weight:700;letter-spacing:1px}
.video-window{position:relative;flex:1;background:#000;aspect-ratio:9/14;overflow:hidden}
.video-window video{width:100%;height:100%;object-fit:cover}
.video-overlay-gradient{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.8), transparent 40%)}
.frame-bottom{padding:10px;background:#000;text-align:center;border-top:1px solid rgba(241,196,15,0.1)}
.viewer-count{color:var(--text-muted);font-size:0.75rem;font-weight:600}
.viewer-count i{color:var(--red)}

/* Column Info (Middle) */
.col-info{display:flex;flex-direction:column;justify-content:center;gap:25px;padding:0 5px;text-align:center}
.trust-features{display:flex;justify-content:center;gap:15px}
.t-feat{display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(255,255,255,0.03);padding:10px;border-radius:10px;border:1px solid rgba(241,196,15,0.1);flex:1}
.t-feat img{width:32px;height:32px;filter:drop-shadow(0 0 5px rgba(241,196,15,0.3))}
.t-feat span{font-size:0.7rem;color:var(--gold-light);font-weight:700;text-transform:uppercase;white-space:nowrap}

.action-center{display:flex;flex-direction:column;gap:12px}
.btn-luxury{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:8px;font-weight:800;transition:var(--transition);text-transform:uppercase;letter-spacing:1px;border:none;cursor:pointer}
.btn-gold-shimmer{background:linear-gradient(135deg, #fff1a8, #f1c40f, #daa520, #b8860b);background-size:200% auto;color:#000;padding:18px;font-size:1.1rem;box-shadow:0 0 30px rgba(241,196,15,0.4);animation:goldShimmer 3s linear infinite}
.btn-gold-shimmer:hover{transform:scale(1.02);filter:brightness(1.1)}
.btn-group-row{display:flex;gap:10px}
.btn-group-row .btn-luxury{flex:1;padding:14px;font-size:0.85rem}
.btn-tg{background:var(--tg-blue);color:#fff;box-shadow:0 4px 15px rgba(0,136,204,0.3)}
.btn-zalo{background:var(--zalo-blue);color:#fff;box-shadow:0 4px 15px rgba(0,104,255,0.3)}
.btn-luxury:hover{transform:translateY(-3px)}

.info-badge-wrap{text-align:center}
.info-badge{background:rgba(241,196,15,0.1);color:var(--gold);border:1px solid var(--gold);padding:6px 20px;border-radius:20px;font-size:0.75rem;font-weight:700;letter-spacing:2px}

/* Column QR (Right) */
.col-qr{display:flex;flex-direction:column;justify-content:center;gap:15px}
.qr-station{display:flex;flex-direction:column;gap:15px}
.qr-card{background:linear-gradient(145deg, #1a1525, #0a0a0c);border:1px solid rgba(241,196,15,0.2);border-radius:15px;padding:15px;text-align:center;box-shadow:0 10px 20px rgba(0,0,0,0.4);transition:var(--transition)}
.qr-card:hover{border-color:var(--gold);transform:translateY(-5px)}
.qr-card-head{font-size:0.75rem;font-weight:800;color:var(--gold);margin-bottom:10px;letter-spacing:1px}
.qr-wrap{background:#fff;padding:8px;border-radius:8px;display:inline-block;margin-bottom:10px}
.qr-wrap img{width:120px;height:120px;display:block}
.qr-card-foot{font-size:0.65rem;font-weight:700;color:var(--text-muted)}

@media (max-width: 1000px) {
  .hero-triple-grid{grid-template-columns:1fr 1fr;gap:20px}
  .col-qr{grid-column: span 2; flex-direction: row; justify-content: center}
  .qr-station{flex-direction: row; gap:20px}
}

@media (max-width: 768px) {
  .hero-triple-grid{grid-template-columns:1fr;gap:30px;padding:0 15px}
  .col-qr{grid-column: auto}
  .qr-station{flex-direction: column; align-items: center}
  .video-window{aspect-ratio:4/5}
  .video-window video{object-position: top}
}

/* === CONTENT SECTIONS === */
.content-section{padding:60px 0;background:linear-gradient(180deg,#0a0a0c 0%,#000000 100%)}
.content-section p{color:var(--text-muted);margin-bottom:20px;font-size:.95rem}
.content-section strong,.content-section .hl{color:var(--gold)}

.section-heading{text-align:center;margin:50px 0 25px;position:relative}
.section-heading:first-child{margin-top:0}
.section-heading span{display:inline-block;padding:10px 30px;font-size:clamp(1rem,2.5vw,1.5rem);font-weight:800;
  background:linear-gradient(135deg,#fff1a8,#e8c547,#daa520,#b8860b,#daa520,#fff1a8);
  background-size:200% auto;animation:goldShimmer 4s linear infinite;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  border:2px solid rgba(218,165,32,.3);border-radius:12px;
  text-transform:uppercase;letter-spacing:1px;position:relative;filter:drop-shadow(0 0 4px rgba(218,165,32,.2))}
.section-heading span::before{content:'';position:absolute;inset:-2px;border-radius:12px;background:linear-gradient(135deg,rgba(212,175,55,.2),transparent);z-index:-1}

.content-list{list-style:none;margin:20px 0 30px;padding-left:0}
.content-list li{padding:10px 0 10px 20px;border-left:3px solid var(--gold);margin-bottom:10px;background:rgba(212,175,55,.03);border-radius:0 8px 8px 0;color:var(--text-muted)}
.section-img{border-radius:var(--radius);margin:20px auto;box-shadow:0 10px 40px rgba(0,0,0,.5)}

/* Feature Grid */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;margin-bottom:40px}
.feature-item{background:var(--bg-glass);backdrop-filter:blur(8px);border:1px solid rgba(212,175,55,.1);border-radius:var(--radius);padding:24px 16px;text-align:center;transition:var(--transition)}
.feature-item:hover{border-color:rgba(212,175,55,.4);transform:translateY(-6px);box-shadow:0 10px 30px rgba(212,175,55,.1)}
.feature-item img{width:60px;height:60px;margin:0 auto 14px;object-fit:contain}
.feature-item span{font-size:.85rem;font-weight:600;color:var(--text-muted);line-height:1.4}

/* Advantage */
.advantage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-bottom:40px}
.adv-card{background:var(--bg-glass);backdrop-filter:blur(8px);border:1px solid rgba(212,175,55,.15);border-radius:var(--radius);padding:30px;text-align:center;transition:var(--transition)}
.adv-card:hover{border-color:var(--gold);box-shadow:0 0 30px rgba(212,175,55,.1)}
.adv-card img{width:80px;margin:0 auto 16px}
.adv-title{color:var(--gold);font-weight:700;font-size:1.05rem;margin-bottom:12px}
.adv-card ul{list-style:none;text-align:left}
.adv-card ul li{padding:6px 0;padding-left:18px;position:relative;color:var(--text-muted);font-size:.9rem}
.adv-card ul li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700}

/* Game Marquee */
.game-marquee{overflow:hidden;margin:30px 0;border-radius:var(--radius);position:relative}
.game-marquee::before,.game-marquee::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.game-marquee::before{left:0;background:linear-gradient(90deg,var(--bg-dark),transparent)}
.game-marquee::after{right:0;background:linear-gradient(270deg,var(--bg-dark),transparent)}
.marquee-track{display:flex;gap:12px;animation:marqueeScroll 30s linear infinite;width:max-content}
.marquee-track img{width:120px;height:160px;object-fit:cover;border-radius:12px;flex-shrink:0;transition:var(--transition)}
.marquee-track img:hover{transform:scale(1.08)}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Game Categories */
.game-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:40px}
.game-cat-card{background:var(--bg-glass);backdrop-filter:blur(8px);border:1px solid rgba(212,175,55,.12);border-radius:var(--radius);padding:24px;transition:var(--transition)}
.game-cat-card:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:0 8px 25px rgba(241,196,15,0.15)}
.game-cat-card h3{color:var(--gold);font-size:1.1rem;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.game-cat-card p{font-size:.85rem;color:var(--text-muted);margin:0}

/* Product */
.product-showcase{display:flex;gap:30px;align-items:center;margin-bottom:30px;background:var(--bg-glass);border:1px solid rgba(212,175,55,.1);border-radius:var(--radius);padding:20px;flex-wrap:wrap}
.product-left{flex:1;min-width:200px}
.product-left img{border-radius:12px}
.product-right{flex:1;min-width:200px}
.product-right h3{color:var(--gold);font-size:1.3rem;margin-bottom:10px}
.mini-game-section{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin-bottom:40px;background:var(--bg-glass);border:1px solid rgba(212,175,55,.1);border-radius:var(--radius);padding:20px}
.mg-text{flex:1;min-width:200px}
.mg-text h3{color:var(--gold);font-size:1.3rem;margin-bottom:10px}
.mini-game-section>img{flex:1;min-width:200px;max-width:350px;border-radius:12px}

/* Security */
.security-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:40px}
.security-card{display:flex;gap:16px;align-items:flex-start;background:var(--bg-glass);border:1px solid rgba(212,175,55,.1);border-radius:var(--radius);padding:24px;transition:var(--transition)}
.security-card:hover{border-color:var(--gold)}
.security-card img{width:70px;flex-shrink:0;border-radius:8px}
.security-card h4{color:var(--gold);font-size:.95rem;margin-bottom:8px;font-weight:700}
.security-card p{font-size:.85rem;color:var(--text-muted);margin:0}

/* Support */
.support-section{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin-bottom:30px}
.support-section>div{flex:1;min-width:250px}
.support-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.support-section>img{flex:1;min-width:200px;max-width:350px;border-radius:var(--radius)}

/* === FOOTER === */
.footer{background:#060609;padding:50px 0 0;border-top:1px solid rgba(212,175,55,.15)}
.footer-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;margin-bottom:30px}
.footer-col h4{color:var(--gold);font-size:.95rem;margin-bottom:16px;letter-spacing:1px}
.footer-logo-img{width:120px;margin-bottom:12px}
.footer-col p{font-size:.85rem;color:var(--text-muted)}
.footer-contacts{display:flex;flex-direction:column;gap:12px}
.footer-contacts a{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:.9rem;transition:var(--transition)}
.footer-contacts a:hover{color:var(--gold)}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{color:var(--text-muted);font-size:.85rem;transition:var(--transition)}
.footer-col ul li a:hover{color:var(--gold)}
.copyright{text-align:center;padding:20px;border-top:1px solid rgba(255,255,255,.05);color:var(--text-muted);font-size:.8rem}

/* Scroll to top */
#scrollTopBtn{position:fixed;bottom:90px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:rgba(212,175,55,.1);color:var(--gold);font-size:18px;cursor:pointer;z-index:9998;opacity:0;transform:translateY(20px);transition:var(--transition);display:flex;align-items:center;justify-content:center}
#scrollTopBtn.show{opacity:1;transform:translateY(0)}
#scrollTopBtn:hover{background:var(--gold);color:#000}

/* === ANIMATIONS === */
.anim-item{opacity:0;transform:translateY(30px);transition:opacity .6s ease-out,transform .6s ease-out}
.anim-item.revealed{opacity:1;transform:translateY(0)}

@keyframes goldShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}


/* === RESPONSIVE === */
@media(max-width:768px){
  .main-logo{width:160px}
  .download-area{flex-direction:column;gap:24px}
  .qr-section{width:100%;max-width:280px}
  .action-area{width:100%;max-width:320px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .game-categories{grid-template-columns:1fr}
  .product-showcase,.mini-game-section,.support-section{flex-direction:column}
  .security-grid{grid-template-columns:1fr}
  .security-card{flex-direction:column;text-align:center}
  .security-card img{margin:0 auto}
}
@media(max-width:480px){
  .feature-grid{grid-template-columns:1fr}
  .dealer-name{letter-spacing:0}
  .partner-items{gap:12px}
  .p-item img{width:60px}
}