/* Trang chủ VNGC */
body{padding:0}
.home_header{background:linear-gradient(rgba(12,12,14,.85),rgba(12,12,14,.35));border-bottom-color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-light)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(92vh,880px);display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:120px 16px 96px;
  background:radial-gradient(120% 90% at 85% 0%,rgba(var(--accent2-rgb),.38),transparent 55%),radial-gradient(100% 90% at 0% 100%,rgba(var(--accent-rgb),.5),transparent 60%),#160c0e}
.hero_img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;transform:scale(1.04);animation:heroZoom 18s ease-out both}
.hero_pattern{position:absolute;inset:-25%;z-index:-2;opacity:.07;background:url(/static/img/mark.png) 0 0/96px auto repeat;transform:rotate(-12deg)}
.hero.has_img .hero_pattern{opacity:.035}
.hero_shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,12,14,.35) 0%,rgba(12,12,14,.15) 40%,rgba(12,12,14,.75) 85%,var(--bg) 100%)}
.hero.has_img .hero_shade{background:linear-gradient(180deg,rgba(12,12,14,.55) 0%,rgba(12,12,14,.35) 45%,rgba(12,12,14,.85) 85%,var(--bg) 100%),radial-gradient(70% 60% at 50% 45%,rgba(var(--accent-rgb),.18),transparent 70%)}
.hero_inner{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px}
.hero_logo{width:min(440px,78vw);height:auto;filter:drop-shadow(0 10px 40px rgba(var(--accent-rgb),.45));animation:rise .9s cubic-bezier(.22,1,.36,1) both}
.hero_tagline{margin-top:26px;font-size:clamp(17px,2.2vw,22px);font-weight:500;line-height:1.6;color:#e7e5e4;text-shadow:0 2px 14px rgba(0,0,0,.5);animation:rise .9s .12s cubic-bezier(.22,1,.36,1) both}
.hero_pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px;animation:rise .9s .24s cubic-bezier(.22,1,.36,1) both}
.hero_pills:empty{display:none}
.social_pill{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);transition:transform .2s,background .2s,border-color .2s}
.social_pill:hover{transform:translateY(-2px);background:var(--grad);border-color:transparent}
.hero_scroll{position:absolute;bottom:24px;left:50%;translate:-50% 0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--soft);
  border:1px solid var(--line-2);background:rgba(12,12,14,.4);animation:bob 2.2s ease-in-out infinite}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes bob{50%{transform:translateY(6px)}}
@keyframes heroZoom{from{transform:scale(1.12)}}

/* ---------- Nội dung ---------- */
.home_main{max-width:1140px;margin:0 auto;padding:40px 16px 20px;display:flex;flex-direction:column;gap:96px}
.home_main:not(:has(section)){padding:0}
.home_main h2{font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.15;margin-top:12px;letter-spacing:-.01em}

.about{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.about.no_img{grid-template-columns:1fr;max-width:760px;margin:0 auto;text-align:center}
.about.no_img .eyebrow{justify-content:center}
.about_img{position:relative;border-radius:28px;padding:2px;background:linear-gradient(140deg,rgba(var(--accent2-rgb),.9),rgba(var(--accent-rgb),.6) 40%,rgba(255,255,255,.08) 75%);
  box-shadow:0 30px 80px -30px rgba(var(--accent-rgb),.55)}
.about_img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:26px}
.about_img::after{content:"";position:absolute;right:-18px;bottom:-18px;width:110px;height:110px;z-index:-1;border-radius:24px;background:url(/static/img/mark.png) center/70% no-repeat,var(--grad);opacity:.9}
.about_text p{margin-top:18px;font-size:16px;line-height:1.8;color:var(--soft);white-space:pre-line}

.community{text-align:center}
.community .eyebrow{justify-content:center}
.social_cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-top:34px;text-align:left}
.social_card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:22px 20px 20px;min-height:168px;border-radius:22px;color:#fff;text-decoration:none;overflow:hidden;isolation:isolate;
  border:1px solid rgba(255,255,255,.12);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.social_card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sc);opacity:.92}
.social_card::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;z-index:-1;border-radius:50%;background:rgba(255,255,255,.12)}
.social_card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -18px var(--sc-glow)}
.sc_icon{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.sc_text{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.sc_text b{font-size:18px;font-weight:800}
.sc_text small{font-size:13px;opacity:.85}
.sc_arrow{position:absolute;top:20px;right:18px;opacity:.7;transition:transform .2s,opacity .2s}
.social_card:hover .sc_arrow{opacity:1;transform:translate(2px,-2px)}
.sc_discord{--sc:linear-gradient(135deg,#5865f2,#404eed);--sc-glow:rgba(88,101,242,.8)}
.sc_facebook{--sc:linear-gradient(135deg,#1877f2,#0b5fcc);--sc-glow:rgba(24,119,242,.8)}
.sc_tiktok{--sc:linear-gradient(135deg,#111 30%,#25f4ee 140%);--sc-glow:rgba(254,44,85,.55)}
.sc_tiktok .sc_icon{background:linear-gradient(135deg,rgba(37,244,238,.35),rgba(254,44,85,.35))}
.sc_instagram{--sc:linear-gradient(135deg,#f58529,#dd2a7b 50%,#8134af 80%,#515bd4);--sc-glow:rgba(221,42,123,.7)}
.sc_youtube{--sc:linear-gradient(135deg,#ff0033,#c4001f);--sc-glow:rgba(255,0,51,.7)}

.site_footer{padding:56px 16px 28px}

@media (max-width:860px){
  .about{grid-template-columns:1fr;gap:36px;text-align:center}
  .about .eyebrow{justify-content:center}
  .about_img::after{display:none}
  .home_main{gap:72px}
}
@media (max-width:720px){
  .social_cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .social_card{min-height:150px;padding:18px 16px}
  .hero{min-height:86vh;padding:110px 16px 90px}
  .social_pill{height:42px;padding:0 16px;font-size:13px}
  .home_header .bt{height:34px;padding:0 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .hero_img,.hero_logo,.hero_tagline,.hero_pills,.hero_scroll{animation:none}
}