/* ===========================================================
   VS365 Live — styles.css  (v2 — premium dark, mobile-first)
   Body: Be Vietnam Pro (VN diacritics) · Display: Exo 2
   One token system, reused across every page.
   md breakpoint = 768px
   =========================================================== */

:root{
  /* ---- surfaces ---- */
  --bg:#0d0b08;            /* deep warm black */
  --surface:#17120c;
  --surface-2:#1f1810;
  --surface-3:#271e12;

  /* ---- brand ---- */
  --gold:#E8B84B;
  --gold-deep:#C9972B;
  --gold-soft:#ffde7f;
  --accent:#ff6a00;        /* orange */
  --live:#ff2d55;          /* live red */
  --lixi:#e11d2a;          /* lì xì red */

  /* ---- text ---- */
  --text:#f7f1e6;
  --text-dim:#b9ad97;
  --line:rgba(232,184,75,.18);
  --line-strong:rgba(232,184,75,.34);

  /* legacy aliases (kept so nothing breaks) */
  --ink:var(--text); --muted:var(--text-dim); --gold-light:var(--gold-soft);
  --brown:#caa24f; --orange-2:var(--accent); --card:var(--surface); --card-2:var(--surface-2);

  /* ---- gradients ---- */
  --grad-gold:linear-gradient(135deg,#ffde7f 0%,#E8B84B 48%,#C9972B 100%);
  --grad-gold-soft:linear-gradient(135deg,#ffde7f 0%,#E8B84B 100%);
  --grad-cta:linear-gradient(135deg,#ff8a00 0%,#ff2d55 100%);
  --grad-orange:linear-gradient(135deg,#ff8a3d 0%,#ff6a00 100%);

  /* ---- shape ---- */
  --radius:16px;
  --radius-lg:20px;
  --radius-pill:999px;
  --radius-btn:12px;

  /* ---- elevation ---- */
  --shadow-sm:0 2px 10px rgba(0,0,0,.45);
  --shadow-md:0 16px 44px rgba(0,0,0,.55);
  --shadow-gold:0 14px 36px rgba(232,184,75,.26);
  --glow-gold:0 0 0 1px var(--line-strong),0 18px 46px rgba(232,184,75,.22);

  /* ---- metrics ---- */
  --header-h:72px;
  --header-h-m:58px;
  --promo-h:30px;
  --sidebar-w:244px;
  --bottombar-h:64px;

  --stick-m:calc(var(--promo-h) + var(--header-h-m));
  --stick-d:calc(var(--promo-h) + var(--header-h));

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Be Vietnam Pro",system-ui,Segoe UI,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-top:var(--stick-m);
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
b{font-weight:700;}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;}

/* display font for headings / brand / numbers */
h1,h2,h3,.brand-wordmark,.page-head h1,.cskh-hero h1,.cd-num,.sr-name,.streamer-name{
  font-family:"Exo 2","Be Vietnam Pro",sans-serif;
}

/* warm grain + gold ambience on the deep bg */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 460px at 100% -10%,rgba(232,184,75,.13),transparent 60%),
    radial-gradient(820px 420px at -12% 6%,rgba(255,106,0,.08),transparent 55%),
    radial-gradient(700px 700px at 50% 120%,rgba(225,29,42,.06),transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ BRAND WORDMARK ============ */
.brand-wordmark{
  display:inline-flex;align-items:baseline;gap:.16em;
  font-weight:900;font-style:italic;letter-spacing:.5px;font-size:27px;line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(232,184,75,.25));
}
.brand-wordmark .brand-live{
  font-size:.46em;font-weight:800;font-style:normal;letter-spacing:3px;
  -webkit-text-fill-color:#fff;color:#fff;
  background:var(--grad-cta);padding:.18em .42em;border-radius:6px;transform:translateY(-.25em);
  box-shadow:0 4px 12px rgba(255,45,85,.4);
}
.brand-wordmark.sm{font-size:23px;}
.brand-wordmark.md{font-size:32px;}
.brand-img{height:38px;width:auto;}

/* ============ HEADER (glass) ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--stick-m);
  display:flex;flex-direction:column;
  background:rgba(19,15,10,.72);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 4px 22px rgba(0,0,0,.4);
}
/* slim top promo strip (injected) */
.top-promo{
  height:var(--promo-h);flex:none;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--grad-gold);color:#2a1c06;font-weight:700;font-size:12.5px;letter-spacing:.2px;
  text-align:center;padding:0 12px;overflow:hidden;white-space:nowrap;
}
.top-promo .tp-spark{filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));}
.header-inner{
  flex:1;width:100%;                     /* full-width: cap removed so the bar spans edge-to-edge */
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:0 14px;
}
.brand{justify-self:center;display:flex;align-items:center;}
.hamburger{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:none;background:transparent;color:var(--gold);border-radius:12px;cursor:pointer;transition:background .2s;
}
.hamburger:hover{background:rgba(232,184,75,.14);}
.btn-login{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;color:#2a1c06;
  background:var(--grad-gold);padding:9px 16px;border-radius:var(--radius-pill);
  box-shadow:var(--shadow-gold);white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s,filter .18s;
}
.btn-login::after{ /* moving shine */
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-18deg);animation:shine 3.6s ease-in-out infinite;
}
.btn-login:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 16px 38px rgba(232,184,75,.4);}
.btn-login:active{transform:scale(.97);}
.btn-login svg{flex:none;}

/* ============ LAYOUT ============ */
.layout{width:100%;display:block;}     /* full-width: cap removed (was max-width:1480px;margin:0 auto) */
.main{padding:14px 14px 40px;}

/* ============ SIDEBAR / NAV ============ */
/* PC-only build; H5 is a separate site (m.oklive.co pattern). The sidebar is ALWAYS present
   (was display:none below 768). Mobile nav furniture is force-hidden at ALL widths below. */
.sidebar{display:block;}
/* PC-only build; H5 is a separate site — no mobile navigation furniture at ANY width. */
.bottom-bar,.hamburger,.mobile-drawer,.drawer-scrim{display:none !important;}
.nav-title{
  font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px;padding-left:6px;opacity:.9;
}
.nav-list{display:flex;flex-direction:column;gap:6px;}
.nav-item{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:12px;font-weight:600;font-size:15px;color:var(--text);
  border:1px solid transparent;cursor:pointer;transition:all .18s var(--ease);overflow:hidden;
}
.nav-item svg{flex:none;color:var(--gold);opacity:.85;transition:color .18s,opacity .18s;}
.nav-item:hover{background:rgba(232,184,75,.09);border-color:var(--line);transform:translateX(4px);}
.nav-item.is-active{
  background:linear-gradient(90deg,rgba(232,184,75,.20),rgba(232,184,75,.06));
  color:var(--gold-soft);border-color:var(--line-strong);box-shadow:inset 0 0 0 1px rgba(232,184,75,.08);
}
.nav-item.is-active::before{ /* left gold bar */
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--grad-gold);
}
.nav-item.is-active svg{color:var(--gold-soft);opacity:1;}
.nav-item .badge-hot{
  margin-left:auto;font-size:10px;font-weight:800;color:#fff;background:var(--grad-cta);
  padding:2px 7px;border-radius:var(--radius-pill);letter-spacing:.5px;
}

/* ============ MOBILE DRAWER ============ */
.drawer-scrim{position:fixed;inset:0;background:rgba(6,4,1,.62);z-index:1100;backdrop-filter:blur(3px);animation:fade .25s ease;}
.mobile-drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(82vw,320px);z-index:1200;
  background:linear-gradient(180deg,#191309,#0f0b07);border-right:1px solid var(--line-strong);
  box-shadow:18px 0 50px rgba(0,0,0,.6);
  transform:translateX(-105%);transition:transform .34s var(--ease);
  padding:16px 14px 26px;overflow-y:auto;
}
.mobile-drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.drawer-close{width:40px;height:40px;border:none;background:rgba(232,184,75,.14);color:var(--gold);border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}

/* ============ SECTION TITLES ============ */
.section-title{font-size:18px;font-weight:800;margin:22px 4px 12px;color:var(--text);}
.section-title span{display:inline-block;position:relative;padding-bottom:6px;}
.section-title b{color:var(--gold);}
.section-title span::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:46px;background:var(--grad-gold);border-radius:3px;}

/* ============ HERO CAROUSEL ============ */
.hero{margin-top:8px;}
.carousel{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:#0a0703;border:1px solid var(--line);}
.carousel-track{display:flex;transition:transform .6s var(--ease);}
.slide{min-width:100%;position:relative;aspect-ratio:16/7;overflow:hidden;}
@media (max-width:768px){.slide{aspect-ratio:16/10;}}
.slide img{width:100%;height:100%;object-fit:cover;}
/* full-bleed: the (clean) WC2026 art blurred fills the whole slide; the sharp copy
   stays as the right-side focal. No empty gradient half. */
.slide-promo{background:#0c0804;}
.slide-promo .promo-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(30px) brightness(.5) saturate(1.15);transform:scale(1.12);}
.slide-promo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,5,2,.94) 0%,rgba(8,5,2,.6) 44%,rgba(8,5,2,.12) 72%,transparent 100%);}
.slide-promo .promo-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 6% 0 7%;max-width:62%;z-index:3;}
.slide-promo .promo-kicker{color:var(--gold-soft);font-weight:700;letter-spacing:3px;font-size:13px;text-transform:uppercase;}
.slide-promo h2{margin:0;font-size:clamp(20px,3.4vw,44px);line-height:1.08;font-weight:900;font-style:italic;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.6);}
.slide-promo h2 .hl{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;}
.slide-promo .promo-sub{color:#f3e8cf;font-size:clamp(13px,1.5vw,17px);font-weight:500;}
.slide-promo .promo-img{position:absolute;right:-2%;bottom:0;height:108%;width:auto;z-index:2;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));object-fit:contain;}
@media (max-width:768px){.slide-promo .promo-text{max-width:82%;}.slide-promo .promo-img{display:none;}}
.cta{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  font-weight:800;font-size:clamp(13px,1.4vw,16px);color:#2a1c06;
  background:var(--grad-gold);padding:12px 22px;border-radius:var(--radius-pill);
  box-shadow:var(--shadow-gold);transition:transform .18s var(--ease),filter .18s;
}
.cta:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.06);}
.cta:active{transform:scale(.97);}
.cta .arrow{transition:transform .2s;}
.cta:hover .arrow{transform:translateX(4px);}

/* "featured streamer" slide — blurred avatar backdrop, styled like the cards */
.slide-feature{display:flex;align-items:flex-end;background:#0c0804;}
.slide-feature .feat-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:50% 22%;background-repeat:no-repeat;filter:blur(20px) brightness(.6) saturate(1.1);transform:scale(1.12);}
.slide-feature .feat-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,5,2,.9) 0%,rgba(8,5,2,.25) 55%,transparent 100%);z-index:1;}
.slide-feature .feat-text{position:relative;z-index:2;padding:0 7% 5%;display:flex;flex-direction:column;gap:10px;}
.slide-feature .feat-row{display:flex;align-items:center;gap:14px;}
.slide-feature .feat-ava{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--gold);box-shadow:0 0 0 3px rgba(232,184,75,.3),0 6px 18px rgba(0,0,0,.5);}
@media (max-width:768px){.slide-feature .feat-ava{width:52px;height:52px;}}
.slide-feature .feat-live{display:inline-flex;align-items:center;gap:7px;width:max-content;background:rgba(255,45,85,.16);border:1px solid rgba(255,90,110,.5);color:#ffd0d8;padding:5px 12px;border-radius:var(--radius-pill);font-weight:700;font-size:12px;letter-spacing:1px;}
.slide-feature .feat-live .dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(255,45,85,.7);animation:pulse 1.4s infinite;}
.slide-feature h2{margin:0;color:#fff;font-weight:900;font-style:italic;font-size:clamp(20px,3vw,40px);text-shadow:0 4px 20px rgba(0,0,0,.7);}
.slide-feature p{margin:0;color:#f1e6cd;font-size:clamp(13px,1.4vw,16px);max-width:30ch;}

.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border:none;border-radius:50%;cursor:pointer;background:rgba(19,15,10,.6);color:var(--gold-soft);border:1px solid var(--line-strong);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.45);transition:background .2s,transform .2s;}
.carousel-arrow:hover{background:rgba(232,184,75,.22);transform:translateY(-50%) scale(1.08);}
.carousel-arrow.prev{left:14px;}
.carousel-arrow.next{right:14px;}
@media (max-width:768px){.carousel-arrow{width:38px;height:38px;}}
.carousel-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:8px;}
.dot{width:9px;height:9px;border-radius:var(--radius-pill);background:rgba(255,255,255,.4);border:none;cursor:pointer;padding:0;transition:width .3s,background .3s;}
.dot.is-active{width:26px;background:var(--grad-gold);}

/* ============ COUNTDOWN (home, injected) ============ */
.countdown{
  margin:16px 0 4px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  padding:16px 18px;border-radius:var(--radius-lg);
  background:linear-gradient(120deg,rgba(225,29,42,.16),rgba(232,184,75,.10)),var(--surface);
  border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.countdown::before{content:"🎁";position:absolute;right:-6px;top:-10px;font-size:80px;opacity:.08;transform:rotate(12deg);}
.cd-info{display:flex;flex-direction:column;gap:3px;min-width:0;}
.cd-kick{font-size:11.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--live);}
.cd-title{font-weight:900;font-style:italic;font-size:clamp(16px,2.2vw,24px);color:var(--gold-soft);line-height:1.1;}
.cd-sub{color:var(--text-dim);font-size:12.5px;font-weight:500;}
.cd-timer{display:flex;gap:8px;flex:none;}
.cd-cell{min-width:58px;text-align:center;padding:8px 6px;border-radius:12px;background:rgba(13,11,8,.55);border:1px solid var(--line);}
.cd-num{font-weight:800;font-size:clamp(18px,2.6vw,26px);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:1px;}
.cd-lbl{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);margin-top:2px;}
@media (max-width:560px){.cd-cell{min-width:46px;}.countdown{padding:14px;}}

/* ============ MARQUEE ============ */
.marquee{margin:14px 0 4px;overflow:hidden;white-space:nowrap;background:var(--grad-gold);border-radius:12px;box-shadow:var(--shadow-sm);border:1px solid rgba(150,104,35,.4);}
.marquee-track{display:inline-flex;gap:60px;padding:11px 0;animation:marquee 34s linear infinite;will-change:transform;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-item{font-weight:700;font-size:14.5px;color:#2a1c06;}
.marquee-item b{color:#7a1f00;}

/* ============ PROMO RAIL (gift gifs) ============ */
.promo-strip{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin;}
.promo-strip::-webkit-scrollbar{height:7px;}
.promo-strip::-webkit-scrollbar-thumb{background:rgba(232,184,75,.4);border-radius:99px;}
.promo-card{flex:0 0 auto;width:188px;scroll-snap-align:start;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .22s var(--ease),box-shadow .22s;cursor:pointer;}
.promo-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--glow-gold);}
.promo-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--surface-2);}
.promo-card .pc-label{padding:8px 10px;font-weight:700;font-size:13px;color:var(--gold-soft);text-align:center;}
@media (max-width:768px){.promo-card{width:150px;}}

/* ============ CATEGORY TABS ============ */
.tabs-bar{position:sticky;top:var(--stick-m);z-index:600;display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(13,11,8,.82);backdrop-filter:blur(10px);padding:10px 2px;margin:10px 0 4px;border-bottom:1px solid var(--line);}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{position:relative;flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--text-dim);font-family:inherit;font-weight:800;font-size:14px;letter-spacing:.4px;padding:9px 18px;border-radius:var(--radius-pill);cursor:pointer;transition:all .2s var(--ease);white-space:nowrap;}
.tab:hover{border-color:var(--line-strong);color:var(--gold-soft);}
.tab.is-active{background:var(--grad-gold);color:#2a1c06;border-color:transparent;box-shadow:var(--shadow-gold);}
.tab::after{content:"";position:absolute;left:18px;right:18px;bottom:5px;height:3px;border-radius:3px;background:#2a1c06;transform:scaleX(0);transform-origin:center;transition:transform .25s var(--ease);}
.tab.is-active::after{transform:scaleX(1);}
.see-all{flex:none;font-weight:700;font-size:14px;color:var(--gold);padding:6px 4px;transition:color .2s,transform .2s;}
.see-all:hover{color:var(--accent);transform:translateX(3px);}

/* ============ STREAMER GRID + CARD (the hero element) ============ */
.grid-wrap{margin-top:6px;}
.streamer-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);}   /* mobile: 2 cols */
/* full-width: ≥768px auto-fill so wider screens get MORE cards, never fat cards (was 3/4/5 fixed) */
@media (min-width:768px){.streamer-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}}

.card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-sm);cursor:pointer;aspect-ratio:9/16;border:1px solid var(--line);transition:transform .26s var(--ease),box-shadow .26s,border-color .26s;opacity:0;transform:translateY(18px);text-decoration:none;color:inherit;}
.card.in{opacity:1;transform:none;animation:cardIn .5s var(--ease) both;}
.card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--glow-gold);border-color:var(--line-strong);}
/* soft "live preview" backdrop: each streamer's real avatar, blurred + darkened.
   Lives on a pseudo-element so all overlays stay sharp. Each card differs. */
.card .thumb{position:absolute;inset:0;overflow:hidden;background-color:#15100a;
  background-size:cover;background-position:50% 28%;background-repeat:no-repeat;
  filter:blur(10px) brightness(.82) saturate(1.14);transform:scale(1.12);
  transition:transform .6s var(--ease),filter .4s;}
.card:hover .thumb{transform:scale(1.2);filter:blur(8px) brightness(.97) saturate(1.22);}
/* sharp ▶ play motif, tinted with the per-card accent */
.card .play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:2;
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(8,5,2,.34);border:2px solid var(--accent,#ffd24a);
  box-shadow:0 0 22px -2px var(--accent,#ffd24a),0 6px 18px rgba(0,0,0,.45);
  backdrop-filter:blur(2px);transition:opacity .25s,transform .3s var(--ease);}
.card .play svg{width:24px;height:24px;margin-left:2px;color:var(--accent,#ffd24a);filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));}
.card:hover .play{opacity:0;transform:translate(-50%,-50%) scale(.8);}
.card .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,4,1,.94) 0%,rgba(6,4,1,.42) 30%,transparent 56%);}
.card:hover .shade{background:linear-gradient(to top,rgba(6,4,1,.94) 0%,rgba(40,20,2,.42) 32%,rgba(232,184,75,.10) 72%,transparent 100%);}
/* hover "Vào phòng →" CTA (pure CSS, no markup needed) */
.card::after{content:"Vào phòng →";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) translateY(10px);z-index:4;pointer-events:none;font-family:"Exo 2",sans-serif;font-weight:800;font-size:13px;color:#2a1c06;background:var(--grad-gold);padding:9px 16px;border-radius:var(--radius-pill);box-shadow:var(--shadow-gold);opacity:0;transition:opacity .22s,transform .26s var(--ease);white-space:nowrap;}
.card:hover::after{opacity:1;transform:translate(-50%,-50%) translateY(0);}

.badge-live{position:absolute;top:9px;left:9px;z-index:3;display:flex;align-items:center;gap:5px;background:linear-gradient(90deg,#ff2d55,#ff6a00);color:#fff;font-weight:800;font-size:11px;letter-spacing:1px;padding:4px 9px 4px 7px;border-radius:8px;box-shadow:0 3px 12px rgba(255,45,85,.55);animation:livePulse 1.8s ease-in-out infinite;}
.badge-live .gif{height:14px;width:auto;border-radius:3px;}
.viewers{position:absolute;top:9px;right:9px;z-index:3;display:flex;align-items:center;gap:5px;background:rgba(6,4,1,.62);backdrop-filter:blur(4px);color:#fff;font-weight:700;font-size:12px;padding:4px 9px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.14);font-variant-numeric:tabular-nums;}
.viewers svg{width:13px;height:13px;color:#ff8a4d;}

.card-bottom{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:11px 11px 12px;}
.streamer-row{display:flex;align-items:center;gap:9px;}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--gold);background:#332615;box-shadow:0 0 0 2px rgba(232,184,75,.28),0 2px 8px rgba(0,0,0,.5);animation:onlineRing 2.6s ease-in-out infinite;}
.streamer-meta{min-width:0;}
.streamer-name{color:#fff;font-weight:800;font-size:14px;line-height:1.1;text-shadow:0 1px 4px rgba(0,0,0,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.streamer-foll{color:var(--gold-soft);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;}
.tagline{margin-top:8px;color:#f3e7cf;font-size:11.5px;line-height:1.25;font-weight:500;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;background:rgba(232,184,75,.14);border:1px solid var(--line);padding:5px 9px;border-radius:8px;backdrop-filter:blur(2px);}
.grid-empty{text-align:center;color:var(--text-dim);padding:40px 0;font-weight:600;}

/* ============ PARTNERS ============ */
.partner-strip{display:flex;flex-wrap:wrap;gap:12px;}
.partner-card{flex:1 1 150px;max-width:220px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s;}
.partner-card:hover{transform:translateY(-4px);box-shadow:var(--glow-gold);}
.partner-card img{width:100%;height:auto;object-fit:cover;filter:grayscale(1) brightness(.9);transition:filter .25s;}
.partner-card:hover img{filter:none;}

/* ============ FOOTER ============ */
.site-footer{margin-top:40px;background:linear-gradient(180deg,#120d07 0%,#080503 100%);border-top:1px solid var(--line-strong);color:var(--text-dim);}
.footer-inner{width:100%;padding:34px 18px 30px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}  /* full-width bar; content stays centered */
.footer-brand{margin-bottom:2px;}
.footer-alliance{margin:0;font-weight:800;letter-spacing:1.5px;color:var(--gold-soft);font-size:15px;}
.footer-follow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;font-weight:600;font-size:14px;color:var(--text-dim);}
.socials{display:flex;gap:10px;}
.socials a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(232,184,75,.12);border:1px solid var(--line);color:var(--gold-soft);transition:all .2s var(--ease);}
.socials a:hover{background:var(--grad-gold);color:#241a06;transform:translateY(-3px);}
.footer-copy{margin:6px 0 0;font-size:12.5px;letter-spacing:1px;color:#8c7d5e;}

/* ===========================================================
   SUB-PAGE SHELL
   =========================================================== */
.site-header.scrolled{box-shadow:0 8px 26px rgba(0,0,0,.55);}

.page-head{margin:6px 4px 18px;}
.page-head h1{margin:0;font-weight:900;font-style:italic;letter-spacing:.4px;font-size:clamp(24px,4vw,40px);line-height:1.1;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;}
.page-head .page-sub{margin:10px 0 0;color:var(--text-dim);font-weight:500;font-size:clamp(13px,1.5vw,16px);max-width:64ch;}
.page-head .crumbs{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text-dim);margin-bottom:10px;}
.page-head .crumbs a{color:var(--gold);transition:color .18s;}
.page-head .crumbs a:hover{color:var(--accent);}
.page-head .crumbs b{color:var(--gold-soft);}

.reveal{opacity:0;transform:translateY(16px);}
.reveal.in{animation:cardIn .55s var(--ease) both;}

/* ---- PAGE 1 — LỊCH LIVESTREAM ---- */
.date-bar{display:flex;gap:10px;overflow-x:auto;padding:8px 2px 14px;scrollbar-width:thin;scroll-snap-type:x proximity;position:sticky;top:var(--stick-m);z-index:600;background:rgba(13,11,8,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);margin-bottom:6px;}
.date-bar::-webkit-scrollbar{height:7px;}
.date-bar::-webkit-scrollbar-thumb{background:rgba(232,184,75,.4);border-radius:99px;}
.date-chip{flex:0 0 auto;scroll-snap-align:start;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:72px;padding:9px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text-dim);font-family:inherit;transition:all .2s var(--ease);}
.date-chip .dc-dow{font-size:11px;font-weight:700;letter-spacing:.4px;opacity:.85;}
.date-chip .dc-day{font-size:17px;font-weight:800;color:var(--text);}
.date-chip:hover{border-color:var(--line-strong);color:var(--gold-soft);transform:translateY(-2px);}
.date-chip.is-active{background:var(--grad-gold);color:#2a1c06;border-color:transparent;box-shadow:var(--shadow-gold);}
.date-chip.is-active .dc-dow,.date-chip.is-active .dc-day{color:#2a1c06;}

.sched-meta{display:flex;align-items:center;gap:10px;margin:6px 4px 14px;flex-wrap:wrap;}
.sched-meta .sm-count{font-weight:800;color:var(--gold);font-size:15px;font-variant-numeric:tabular-nums;}
.sched-meta .sm-note{color:var(--text-dim);font-size:13px;font-weight:500;}

.sched-list{display:flex;flex-direction:column;gap:12px;}
.sched-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;}
.sched-row:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.sched-row .sr-ava{flex:none;display:flex;flex-direction:column;align-items:center;gap:7px;}
.sched-row .sr-ava img{width:60px;height:60px;border-radius:14px;object-fit:cover;border:2px solid var(--gold);background:#332615;box-shadow:0 3px 10px rgba(0,0,0,.4);}
/* time pill stacked UNDER the avatar (own column) — never overlaps the caption */
.sched-row .sr-time{white-space:nowrap;font-size:10.5px;font-weight:800;color:#2a1c06;background:var(--grad-gold);padding:2px 8px;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);font-variant-numeric:tabular-nums;}
.sched-row .sr-body{min-width:0;}
.sched-row .sr-name{font-weight:800;font-size:16px;color:var(--text);line-height:1.15;}
.sched-row .sr-slot{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-weight:700;font-size:12.5px;margin-top:2px;font-variant-numeric:tabular-nums;}
.sched-row .sr-slot svg{width:14px;height:14px;}
.sched-row .sr-tag{margin-top:6px;color:var(--text-dim);font-size:13px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sched-row .sr-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:none;}

.pill{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:11.5px;letter-spacing:.4px;padding:5px 11px;border-radius:var(--radius-pill);white-space:nowrap;}
.pill .pdot{width:7px;height:7px;border-radius:50%;}
.pill.live{background:linear-gradient(90deg,#ff2d55,#ff6a00);color:#fff;box-shadow:0 3px 12px rgba(255,45,85,.45);}
.pill.live .pdot{background:#fff;animation:pulse-w 1.3s infinite;}
.pill.soon{background:rgba(232,184,75,.14);border:1px solid var(--line-strong);color:var(--gold-soft);}
.pill.soon .pdot{background:var(--gold);}

.btn-room{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-family:inherit;font-weight:800;font-size:13px;color:#2a1c06;cursor:pointer;background:var(--grad-gold);border:none;padding:9px 16px;border-radius:var(--radius-pill);box-shadow:var(--shadow-gold);transition:transform .18s var(--ease),filter .18s,box-shadow .18s;text-decoration:none;}
.btn-room:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 14px 32px rgba(232,184,75,.4);}
.btn-room:active{transform:scale(.97);}
.btn-room svg{width:15px;height:15px;}
.btn-room.is-soon{background:var(--surface-2);color:var(--gold-soft);border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);}
.btn-room.is-soon:hover{background:var(--surface-3);}

@media (max-width:620px){
  .sched-row{grid-template-columns:auto 1fr;gap:12px;}
  .sched-row .sr-side{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center;width:100%;margin-top:2px;}
  .sched-row .sr-ava img{width:52px;height:52px;}
}

/* ---- PAGE 2 — SỰ KIỆN HOT ---- */
.event-grid{display:grid;gap:18px;grid-template-columns:1fr;}
@media (min-width:640px){.event-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.event-grid{grid-template-columns:repeat(3,1fr);}}
.event-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .24s var(--ease),box-shadow .24s,border-color .24s;}
.event-card:hover{transform:translateY(-7px) scale(1.01);box-shadow:var(--glow-gold);border-color:var(--line-strong);}
.event-banner{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(160deg,var(--surface-2),var(--surface));}
.event-banner img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);background:var(--surface-2);}
.event-card:hover .event-banner img{transform:scale(1.06);}
.event-banner .ev-flag{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;background:linear-gradient(90deg,#ff2d55,#ff6a00);color:#fff;font-weight:800;font-size:11px;letter-spacing:.6px;padding:4px 10px;border-radius:var(--radius-pill);box-shadow:0 3px 12px rgba(255,45,85,.5);}
.event-body{display:flex;flex-direction:column;gap:9px;padding:14px 15px 16px;flex:1;}
.event-body h3{margin:0;font-weight:800;font-size:16px;line-height:1.25;color:var(--text);}
.event-body .ev-desc{margin:0;color:var(--text-dim);font-size:13px;font-weight:500;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.event-date{display:inline-flex;align-items:center;gap:7px;color:var(--gold);font-weight:700;font-size:12.5px;margin-top:auto;font-variant-numeric:tabular-nums;}
.event-date svg{width:15px;height:15px;flex:none;}
.event-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;font-weight:800;font-size:14px;color:#2a1c06;cursor:pointer;background:var(--grad-gold);padding:11px 16px;border-radius:var(--radius-btn);box-shadow:var(--shadow-sm);transition:transform .18s var(--ease),filter .18s,box-shadow .18s;border:none;font-family:inherit;}
.event-cta:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:var(--shadow-gold);}
.event-cta:active{transform:scale(.97);}
.event-cta .arrow{transition:transform .2s;}
.event-cta:hover .arrow{transform:translateX(4px);}

/* ---- PAGE 3 — VS365 GAMES ---- */
.cat-block{margin-top:10px;}
.game-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);}
@media (min-width:560px){.game-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:900px){.game-grid{grid-template-columns:repeat(4,1fr);}}
@media (min-width:1200px){.game-grid{grid-template-columns:repeat(5,1fr);}}
.game-tile{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;cursor:pointer;background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .24s var(--ease),box-shadow .24s,border-color .24s;font-family:inherit;padding:0;}
.game-tile:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--glow-gold);border-color:var(--line-strong);}
.game-tile .gt-media{position:relative;aspect-ratio:1/1;overflow:hidden;}
.game-tile .gt-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);background:var(--surface-2);}
.game-tile:hover .gt-media img{transform:scale(1.08);}
.game-tile .gt-media.icon{display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 50% 20%,#2a1c06,#100b05);}
.game-tile .gt-media.icon svg{width:46%;height:46%;color:var(--gold-soft);}
.game-tile .gt-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px 12px;}
.game-tile .gt-name{font-weight:800;font-size:14px;color:var(--gold-soft);letter-spacing:.3px;}
.game-tile .gt-play{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:11.5px;color:#2a1c06;background:var(--grad-gold);padding:5px 11px;border-radius:var(--radius-pill);transition:transform .18s,filter .18s;}
.game-tile:hover .gt-play{filter:brightness(1.06);transform:translateX(2px);}
.game-tile .gt-play svg{width:12px;height:12px;}

/* ---- PAGE 5 — CSKH 24/7 ---- */
.cskh-hero{text-align:center;border-radius:var(--radius-lg);padding:36px 22px;margin:2px 0 26px;background:radial-gradient(130% 150% at 50% 0%,#2a1c06 0%,#0c0804 64%);border:1px solid var(--line-strong);box-shadow:var(--shadow-md);position:relative;overflow:hidden;}
.cskh-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at 50% -10%,rgba(232,184,75,.22),transparent 70%);}
.cskh-hero h1{margin:0;font-weight:900;font-style:italic;font-size:clamp(22px,3.6vw,38px);line-height:1.12;position:relative;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cskh-hero p{margin:12px auto 0;max-width:60ch;color:#f3e8cf;font-weight:600;font-size:clamp(13px,1.6vw,16px);position:relative;}
.cskh-section-title{font-size:19px;font-weight:800;margin:26px 4px 14px;color:var(--text);}
.cskh-section-title b{color:var(--gold);}

.issue-grid{display:grid;gap:14px;grid-template-columns:1fr;}
@media (min-width:560px){.issue-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:980px){.issue-grid{grid-template-columns:repeat(3,1fr);}}
.issue-card{display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;padding:15px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-family:inherit;transition:all .2s var(--ease);}
.issue-card:hover{transform:translateY(-4px);box-shadow:var(--glow-gold);border-color:var(--line-strong);}
.issue-card .ic-ico{flex:none;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--grad-gold-soft);color:#2a1c06;box-shadow:var(--shadow-sm);}
.issue-card .ic-ico svg{width:24px;height:24px;}
.issue-card .ic-label{font-weight:700;font-size:14.5px;color:var(--text);line-height:1.3;}
.issue-card .ic-arrow{margin-left:auto;color:var(--gold);transition:transform .2s,color .2s;flex:none;}
.issue-card:hover .ic-arrow{transform:translateX(4px);color:var(--gold-soft);}

.action-row{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin:8px 0 6px;}
@media (min-width:780px){.action-row{grid-template-columns:repeat(4,1fr);}}
.action-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-align:center;font-family:inherit;font-weight:800;font-size:14px;color:#2a1c06;cursor:pointer;background:var(--grad-gold);border:none;padding:14px 16px;border-radius:14px;box-shadow:var(--shadow-gold);transition:transform .18s var(--ease),filter .18s,box-shadow .18s;}
.action-btn:hover{transform:translateY(-3px);filter:brightness(1.05);box-shadow:0 16px 36px rgba(232,184,75,.4);}
.action-btn:active{transform:scale(.97);}
.action-btn svg{width:20px;height:20px;flex:none;}

.faq-list{display:flex;flex-direction:column;gap:10px;}
.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.faq-item.open{border-color:var(--line-strong);box-shadow:var(--shadow-md);}
.faq-q{width:100%;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;color:var(--text);background:transparent;border:none;padding:16px 16px;}
.faq-q .faq-ico{flex:none;color:var(--gold);transition:transform .3s var(--ease);}
.faq-item.open .faq-q .faq-ico{transform:rotate(180deg);}
.faq-q .faq-txt{flex:1;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .34s var(--ease);}
.faq-a-inner{padding:0 16px 16px;color:var(--text-dim);font-size:14px;font-weight:500;line-height:1.55;}

/* ---- shared rail header ---- */
.rail-title{font-size:18px;font-weight:800;margin:26px 4px 12px;color:var(--text);display:flex;align-items:center;gap:9px;}
.rail-title svg{width:20px;height:20px;color:var(--gold);}
.rail-title b{color:var(--gold);}

/* ===========================================================
   MOBILE BOTTOM TAB BAR (app-style, injected) — phones only
   =========================================================== */
.bottom-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1300;height:var(--bottombar-h);
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(15,11,7,.86);backdrop-filter:saturate(150%) blur(16px);
  border-top:1px solid var(--line-strong);box-shadow:0 -8px 28px rgba(0,0,0,.5);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.bb-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-dim);font-weight:700;font-size:10.5px;letter-spacing:.2px;transition:color .2s;position:relative;min-height:44px;}
.bb-item svg{width:23px;height:23px;}
.bb-item.is-active{color:var(--gold-soft);}
.bb-item.is-active::before{content:"";position:absolute;top:0;width:30px;height:3px;border-radius:0 0 4px 4px;background:var(--grad-gold);box-shadow:0 0 12px rgba(232,184,75,.6);}
.bb-item:active{transform:scale(.94);}

/* ===========================================================
   FLOATING CS BUTTON (Zalo + Telegram, injected)
   =========================================================== */
.cs-fab{position:fixed;right:16px;bottom:20px;z-index:1250;display:flex;flex-direction:column;align-items:center;gap:12px;}
.cs-bubbles{display:flex;flex-direction:column;gap:12px;align-items:center;}
.cs-bubble{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.18);opacity:0;transform:translateY(14px) scale(.6);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);}
.cs-bubble svg{width:24px;height:24px;}
.cs-bubble.zalo{background:linear-gradient(135deg,#0190f3,#0068ff);}
.cs-bubble.tele{background:linear-gradient(135deg,#37bdf3,#1f95d3);}
.cs-fab.open .cs-bubble{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.cs-fab.open .cs-bubble:nth-child(2){transition-delay:.05s;}
.cs-toggle{width:58px;height:58px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#2a1c06;background:var(--grad-gold);box-shadow:var(--shadow-gold);position:relative;animation:csBounce 2.6s ease-in-out infinite;transition:transform .2s var(--ease);}
.cs-toggle::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(232,184,75,.5);animation:ringOut 2.2s ease-out infinite;}
.cs-toggle svg{width:28px;height:28px;transition:transform .3s var(--ease);}
.cs-fab.open .cs-toggle{animation:none;}
.cs-fab.open .cs-toggle svg{transform:rotate(135deg);}
.cs-toggle:active{transform:scale(.94);}

/* ===========================================================
   SKELETON LOADERS (shown while api.js data loads)
   =========================================================== */
.skel{position:relative;overflow:hidden;border:1px solid var(--line);box-shadow:none;
  background:linear-gradient(100deg,#1b150d 28%,#262013 50%,#1b150d 72%) !important;
  background-size:200% 100% !important;animation:shimmer 1.4s linear infinite !important;}
.skel > *{visibility:hidden !important;}
.card.skel{opacity:1 !important;transform:none !important;cursor:default;}
.card.skel::after{display:none !important;}
.sched-row.skel{display:block;height:88px;}
.event-card.skel{height:300px;}
.game-tile.skel{aspect-ratio:auto;height:206px;}
.faq-item.skel{height:54px;}
.issue-card.skel{height:78px;}

/* ===========================================================
   ROOM PAGE (live player)
   =========================================================== */
.room-grid{display:grid;gap:16px;grid-template-columns:1fr;align-items:start;}
@media (min-width:1024px){.room-grid{grid-template-columns:1fr 344px;}}
.room-stage{min-width:0;}
.room-video{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow-md);}
.room-video video{width:100%;height:100%;object-fit:contain;background:#000;display:block;}
.room-ph{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--text-dim);background:radial-gradient(120% 120% at 50% 30%,#1a1208,#0a0703);}
.room-ph svg{width:46px;height:46px;color:var(--gold);}
.room-ph .rp-title{font-weight:800;font-size:16px;color:var(--gold-soft);}
.room-ph .rp-sub{font-size:13px;max-width:42ch;}
.room-ph .rp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);margin-right:6px;animation:pulse-w 1.3s infinite;}
.room-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;}
.room-ava{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);background:#332615;flex:none;animation:onlineRing 2.6s ease-in-out infinite;}
.room-id{min-width:0;}
.room-name{font-family:"Exo 2",sans-serif;font-weight:800;font-size:18px;color:var(--text);line-height:1.1;}
.room-tag{color:var(--text-dim);font-size:13px;font-weight:500;}
.room-stats{margin-left:auto;display:flex;gap:9px;align-items:center;}
.room-viewers{display:inline-flex;align-items:center;gap:6px;background:rgba(6,4,1,.55);border:1px solid var(--line-strong);color:#fff;font-weight:700;font-size:13px;padding:7px 13px;border-radius:var(--radius-pill);font-variant-numeric:tabular-nums;}
.room-viewers svg{width:15px;height:15px;color:#ff8a4d;}
.room-livechip{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(90deg,#ff2d55,#ff6a00);color:#fff;font-weight:800;font-size:12px;letter-spacing:.6px;padding:7px 12px;border-radius:var(--radius-pill);}
.room-livechip .pdot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse-w 1.3s infinite;}

.room-chat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;min-height:380px;box-shadow:var(--shadow-sm);}
@media (min-width:1024px){.room-chat{height:calc(56.25vw * 0 + 100%);position:sticky;top:calc(var(--stick-d) + 16px);}}
.room-chat-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:800;color:var(--gold-soft);}
.room-chat-head svg{width:18px;height:18px;}
.room-chat-body{flex:1;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;color:var(--text-dim);padding:22px;font-size:13px;}
.room-chat-body svg{width:40px;height:40px;color:var(--line-strong);}
.room-chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);}
.room-chat-input input{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:10px 14px;color:var(--text);font-family:inherit;font-size:13px;}
.room-chat-input input::placeholder{color:var(--text-dim);}
.room-chat-input button{border:none;border-radius:var(--radius-pill);background:var(--grad-gold);color:#2a1c06;font-weight:800;padding:0 16px;cursor:not-allowed;opacity:.7;font-family:inherit;}
.room-back{display:inline-flex;align-items:center;gap:7px;color:var(--gold);font-weight:700;font-size:14px;margin-bottom:6px;}
.room-back:hover{color:var(--accent);}
.room-back svg{width:18px;height:18px;}

/* ============ ANIMATIONS ============ */
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,45,85,.6);}70%{box-shadow:0 0 0 9px rgba(255,45,85,0);}100%{box-shadow:0 0 0 0 rgba(255,45,85,0);}}
@keyframes pulse-w{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7);}70%{box-shadow:0 0 0 6px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}
@keyframes cardIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}
@keyframes shine{0%,60%{left:-60%;}100%{left:140%;}}
@keyframes onlineRing{0%,100%{box-shadow:0 0 0 2px rgba(232,184,75,.28),0 2px 8px rgba(0,0,0,.5);}50%{box-shadow:0 0 0 3px rgba(232,184,75,.5),0 2px 12px rgba(232,184,75,.3);}}
@keyframes csBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes livePulse{0%,100%{box-shadow:0 3px 12px rgba(255,45,85,.55);}50%{box-shadow:0 3px 18px rgba(255,45,85,.9);}}
@keyframes ringOut{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.5);opacity:0;}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto;}
  .carousel-track{transition:none;}
  .card .thumb{animation:none;transform:scale(1.12);}
}

/* ===========================================================
   DESKTOP (>=768px)
   =========================================================== */
@media (min-width:768px){
  body{padding-top:var(--stick-d);}
  .site-header{height:var(--stick-d);}
  .header-inner{grid-template-columns:1fr auto;padding:0 18px;}   /* match .layout's 0 18px so header edges align with the sidebar/content edges */
  .hamburger{display:none;}
  .brand{justify-self:start;}
  .brand-wordmark{font-size:30px;}
  .btn-login{font-size:15px;padding:10px 20px;}

  .layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;gap:18px;padding:0 18px;align-items:start;}
  .sidebar{display:block;position:sticky;top:calc(var(--stick-d) + 16px);align-self:start;padding:18px 12px;background:linear-gradient(180deg,var(--surface),#120d07);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
  .main{padding:16px 0 50px;min-width:0;}
  .tabs-bar{top:var(--stick-d);}
  .date-bar{top:var(--stick-d);}
  .mobile-drawer,.drawer-scrim{display:none !important;}
  .section-title{font-size:20px;}

  /* bottom bar is mobile-only */
  .bottom-bar{display:none;}
  .cs-fab{right:22px;bottom:24px;}
}
@media (min-width:1024px){.header-inner{max-width:none;}}   /* full-width: was max-width:1480px */

/* phones: reserve space for the fixed bottom bar */
@media (max-width:767px){
  body{padding-bottom:calc(var(--bottombar-h) + env(safe-area-inset-bottom,0px));}
  .cs-fab{bottom:calc(var(--bottombar-h) + 14px + env(safe-area-inset-bottom,0px));}
}

/* ===========================================================
   POLISH PASS — online counter · home live-scores · crests
   Additive only; furniture injected by widgets.js / app.js.
   =========================================================== */
:root{ --surface-elev:#241b10; }   /* lighter elevated tone for contrast */

/* live "đang xem" online counter (header) */
.header-inner{grid-template-columns:auto 1fr auto auto;}
.online{display:inline-flex;align-items:center;gap:6px;justify-self:end;font-size:12px;font-weight:700;
  color:var(--gold-soft);background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);padding:5px 11px;white-space:nowrap;animation:onlineRing 3s ease-in-out infinite;}
.online .od{width:7px;height:7px;border-radius:50%;background:#33d17a;flex:none;animation:dotG 1.7s infinite;}
.online .ol{color:var(--text-dim);font-weight:600;}
.online .on-num{font-family:"Exo 2",sans-serif;font-weight:800;color:var(--gold-soft);min-width:44px;text-align:right;}
@media (max-width:560px){ .online{padding:4px 8px;gap:5px;} .online .ol{display:none;} }
@keyframes dotG{0%{box-shadow:0 0 0 0 rgba(51,209,122,.55);}70%{box-shadow:0 0 0 6px rgba(51,209,122,0);}100%{box-shadow:0 0 0 0 rgba(51,209,122,0);}}

/* home live-scores strip */
.live-scores{margin:18px 0 6px;}
.ls-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.ls-head .ls-t{display:flex;align-items:center;gap:8px;font-family:"Exo 2",sans-serif;font-weight:800;font-size:16px;color:var(--text);}
.ls-head .ls-more{font-size:12px;color:var(--gold-soft);text-decoration:none;}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--live);flex:none;display:inline-block;
  box-shadow:0 0 0 0 rgba(255,45,85,.6);animation:pulse 1.5s infinite;}
.ls-rail{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity;scrollbar-width:none;}
.ls-rail::-webkit-scrollbar{display:none;}
.ls-card{flex:0 0 auto;width:236px;scroll-snap-align:start;padding:12px 14px;border-radius:16px;
  border:1px solid var(--line);background:linear-gradient(160deg,var(--surface-elev),var(--surface));
  box-shadow:var(--shadow-sm);transition:transform .22s var(--ease),box-shadow .22s,border-color .22s;
  text-decoration:none;color:inherit;}
.ls-card:hover{transform:translateY(-5px);box-shadow:var(--glow-gold);border-color:var(--line-strong);}
.ls-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-dim);margin-bottom:12px;}
.ls-live{display:inline-flex;align-items:center;gap:5px;color:var(--live);font-weight:800;font-size:10.5px;letter-spacing:.4px;}
.ls-soon{color:var(--gold-soft);font-weight:700;font-size:10.5px;}
.ls-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;}
.ls-tm{display:flex;align-items:center;gap:8px;min-width:0;}
.ls-tm.home{justify-content:flex-end;text-align:right;}
.ls-tm .tn{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ls-score{font-family:"Exo 2",sans-serif;font-weight:800;font-size:19px;color:var(--gold-soft);padding:0 4px;white-space:nowrap;}
.ls-score.soon{font-size:13px;color:var(--text-dim);}

/* styled team crest (replaces plain letter-circles) */
.crest{width:32px;height:32px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:"Exo 2",sans-serif;font-weight:800;font-size:11.5px;color:var(--gold-soft);
  background:linear-gradient(160deg,var(--surface-3),var(--surface));border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.35);}

/* hot-news ticker (home) — sits under the live-scores cluster, 8pt rhythm */
.live-scores .news-ticker{margin:10px 0 0;}   /* folded under the scores rail — one combined band */
.news-ticker{display:flex;align-items:stretch;gap:0;margin:8px 0 16px;height:40px;border-radius:12px;
  background:linear-gradient(160deg,var(--surface-elev),var(--surface));border:1px solid var(--line);
  box-shadow:var(--shadow-sm);overflow:hidden;}
.nt-label{flex:none;display:inline-flex;align-items:center;gap:6px;padding:0 14px;font-family:"Exo 2",sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.6px;color:#fff;background:var(--grad-cta);
  box-shadow:4px 0 14px rgba(255,45,85,.35);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);padding-right:22px;}
.nt-flash{filter:drop-shadow(0 0 4px rgba(255,222,127,.8));animation:fade 1.1s ease-in-out infinite alternate;}
.nt-viewport{flex:1;display:flex;overflow:hidden;position:relative;min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);}
.nt-track{flex:none;display:flex;align-items:center;gap:40px;padding-right:40px;white-space:nowrap;animation:ticker 42s linear infinite;}
.news-ticker:hover .nt-track{animation-play-state:paused;}
.nt-item{font-size:13px;font-weight:500;color:var(--text-dim);transition:color .2s;}
.nt-item b{color:var(--gold-soft);font-weight:800;margin-right:8px;font-size:11px;letter-spacing:.5px;}
.nt-item:hover{color:var(--text);}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@media (max-width:560px){.news-ticker{height:36px;}.nt-label{padding:0 18px 0 11px;font-size:11px;}.nt-item{font-size:12px;}}

/* stronger VS365 header wordmark */
.brand-wordmark{letter-spacing:.7px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45)) drop-shadow(0 3px 10px rgba(232,184,75,.4));}
.site-header .brand-wordmark{font-size:30px;}
.site-header .brand-wordmark .brand-live{box-shadow:0 4px 14px rgba(255,45,85,.55),0 0 0 1px rgba(255,255,255,.12);}
@media (min-width:768px){.site-header .brand-wordmark{font-size:33px;}}

/* ===========================================================
   COLLAPSIBLE SIDEBAR + HERO STAGE (2026-07-06 sidebar rework)
   Desktop-only collapse (≥768px, where the sidebar exists). Toggle + live counts
   injected by widgets.js; persisted class applied pre-paint in config.js. Additive.
   =========================================================== */
:root{ --sidebar-w-collapsed:64px; }
.sidebar-toggle{ display:none; }               /* mobile: sidebar itself is hidden, so is this */

/* nav live indicators (expanded desktop only) */
.nav-live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.nav-live-dot{ width:7px; height:7px; border-radius:50%; background:var(--live); flex:none;
  box-shadow:0 0 0 0 rgba(255,45,85,.6); animation:pulse 1.5s infinite; }
.nav-live-n{ font-family:"Exo 2",sans-serif; font-weight:800; font-size:11px; color:#2a1c06;
  background:var(--grad-gold); border-radius:var(--radius-pill); padding:1px 8px; line-height:1.55; }

@media (min-width:768px){
  .layout{ transition:grid-template-columns .2s var(--ease); }
  .sidebar{ transition:padding .2s var(--ease); }
  .sidebar-toggle{ display:flex; align-items:center; justify-content:center; width:34px; height:34px;
    margin:0 0 12px auto; border:1px solid var(--line-strong); border-radius:10px;
    background:var(--surface-2); color:var(--gold-soft); cursor:pointer;
    transition:background .18s var(--ease); }
  .sidebar-toggle:hover{ background:rgba(232,184,75,.14); }
  .sidebar-toggle svg{ width:18px; height:18px; transition:transform .2s var(--ease); }

  /* ---- collapsed state ---- */
  html.sidebar-collapsed .layout{ grid-template-columns:var(--sidebar-w-collapsed) 1fr; }
  html.sidebar-collapsed .sidebar{ padding:18px 8px; }
  html.sidebar-collapsed .sidebar .nav-title{ display:none; }
  html.sidebar-collapsed .sidebar .nav-item{ justify-content:center; gap:0; padding-left:0; padding-right:0; }
  html.sidebar-collapsed .sidebar .nav-item > span,
  html.sidebar-collapsed .sidebar .nav-item .badge-hot{ display:none; }   /* label span + hot badge + live pill (all <span>) */
  html.sidebar-collapsed .sidebar .nav-item:hover{ transform:none; }      /* translateX looks odd in a slim rail */
  html.sidebar-collapsed .sidebar-toggle{ margin:0 auto 12px; }
  html.sidebar-collapsed .sidebar-toggle svg{ transform:rotate(180deg); }
}

/* ---- Homepage hero stage: dominant hero + live-rooms rail ---- */
.hero-stage{ margin-top:8px; }
.hero-stage .hero{ margin-top:0; }
.hero-rail{ margin-top:14px; }
.hr-head{ display:flex; align-items:center; gap:8px; font-family:"Exo 2",sans-serif; font-weight:800;
  font-size:15px; color:var(--text); margin-bottom:10px; }
.hr-list{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }  /* mobile: horizontal scroll */
.hr-list::-webkit-scrollbar{ display:none; }
.hr-room{ flex:0 0 200px; text-decoration:none; color:inherit; border:1px solid var(--line);
  border-radius:14px; overflow:hidden; background:var(--surface);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s; }
.hr-room:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--glow-gold); }
.hr-room.is-active{ border-color:var(--gold-soft); box-shadow:var(--glow-gold); }   /* current hero match */
.hr-room.hr-match{ cursor:pointer; }
/* transient toast (rail-click on a non-live match) */
.vs-toast{ position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(12px); z-index:9999;
  background:rgba(13,11,8,.94); color:var(--gold-soft); border:1px solid var(--gold-soft); border-radius:var(--radius-pill);
  padding:11px 20px; font-size:14px; font-weight:600; box-shadow:0 12px 34px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease),transform .2s var(--ease); }
.vs-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.hr-thumb{ position:relative; aspect-ratio:16/10; background-size:cover; background-position:center; background-color:var(--surface-3); }
.hr-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%); }
.hr-live{ position:absolute; top:8px; left:8px; z-index:2; display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:800; color:#fff; background:var(--grad-cta); padding:2px 7px; border-radius:var(--radius-pill); }
.hr-live .dot{ width:6px; height:6px; border-radius:50%; background:#fff; }
.hr-view{ position:absolute; bottom:8px; right:8px; z-index:2; display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; color:#fff; }
.hr-view svg{ width:13px; height:13px; }
.hr-name{ padding:9px 10px; font-size:13px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- MATCH variant of the rail card (real live matches): reuses .hr-room chrome ---- */
.hr-room.hr-match{ display:block; flex:0 0 210px; }   /* single-column match layout (overrides the thumb|name grid) */
.hm-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px 0; }
.hm-league{ font-size:10.5px; font-weight:700; color:var(--gold-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-live{ flex:none; display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:800; color:#fff;
  background:var(--grad-cta); padding:2px 6px; border-radius:var(--radius-pill); }
.hm-live .dot{ width:5px; height:5px; border-radius:50%; background:#fff; }
.hm-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; padding:8px 10px; }
.hm-team{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; }
.hm-logo{ width:26px; height:26px; object-fit:contain; border-radius:6px; background:var(--surface-3); }
.hm-tn{ font-size:11px; font-weight:600; color:var(--text); text-align:center; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-score{ font-family:"Exo 2",sans-serif; font-weight:800; font-size:16px; color:var(--gold-soft); min-width:36px; text-align:center; }
.hm-foot{ display:flex; align-items:center; justify-content:flex-end; padding:0 10px 9px; }
.hm-view{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--text-dim); }
.hm-view svg{ width:13px; height:13px; }

@media (min-width:900px){
  .hero-stage{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:stretch; position:relative; }
  .hero-stage .slide{ aspect-ratio:16/9; }                 /* taller, more dominant hero */
  .hero-rail{ margin-top:0; display:flex; flex-direction:column; min-width:0; }
  .hr-head{ margin-bottom:12px; }
  .hr-list{ flex-direction:column; overflow:visible; gap:10px; flex:1; }
  .hr-room{ flex:0 0 auto; display:grid; grid-template-columns:104px 1fr; align-items:center; }
  .hr-room.hr-match{ display:block; flex:0 0 auto; }    /* single-column + natural height (210px basis is a mobile WIDTH only) */
  .hr-name{ padding:0 12px; }
}

/* ===========================================================
   PC-LIVE polish (2026-07-06): shared skeleton utilities + table hover
   =========================================================== */
/* shared shimmer blocks (replaces text-only "Đang tải…") — reuses @keyframes shimmer */
.skel-block{ position:relative; overflow:hidden; border-radius:10px;
  background:linear-gradient(90deg,var(--surface-2) 25%,rgba(232,184,75,.10) 37%,var(--surface-2) 63%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
.skel-row{ height:66px; margin-bottom:10px; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(90deg,var(--surface-2) 25%,rgba(232,184,75,.10) 37%,var(--surface-2) 63%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
.skel-row.tall{ height:92px; }
.skel-line{ height:12px; border-radius:6px; margin:6px 0;
  background:linear-gradient(90deg,var(--surface-2) 25%,rgba(232,184,75,.10) 37%,var(--surface-2) 63%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
/* .dt-table row hover highlight (Part D2) */
.dt-table tbody tr{ transition:background .15s var(--ease); }
.dt-table tbody tr:hover{ background:rgba(232,184,75,.06); }

/* ===========================================================
   PART A — homepage LIVE VIDEO hero (reuses the room player stack: hls.js/flv.js)
   =========================================================== */
/* display:block is REQUIRED — as a bare <a>/inline element the box collapsed to a
   text line (aspect-ratio ignored) and the absolute overlays escaped outside it. */
.hero-live{ display:block; position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
  background:#0a0703; border:1px solid var(--line); box-shadow:var(--shadow-md); cursor:pointer; }
.hero-live video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; display:block; }
/* hover CTA — the ONLY navigation into the room (plain click on the video toggles mute) */
.hl-cta{ position:absolute; left:50%; top:50%; transform:translate(-50%,-46%); z-index:6; opacity:0; pointer-events:none;
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:var(--radius-pill);
  background:var(--grad-gold); color:#2a1c06; font-weight:800; font-size:15px; text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.45); transition:opacity .2s var(--ease),transform .2s var(--ease); white-space:nowrap; }
.hl-cta .arw{ font-size:17px; line-height:1; }
.hero-live:hover .hl-cta{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
.hero-live:hover::after{ content:""; position:absolute; inset:0; z-index:5; background:rgba(0,0,0,.28); transition:background .2s; }
.hl-badge{ position:absolute; top:14px; left:14px; z-index:4; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; letter-spacing:.4px; color:#fff; background:var(--grad-cta);
  padding:4px 10px; border-radius:var(--radius-pill); box-shadow:0 4px 14px rgba(255,45,85,.4); }
.hl-badge .dot{ width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.5s infinite; }
.hl-ctrls{ position:absolute; top:12px; right:12px; z-index:5; display:flex; gap:8px; }
.hl-ctrls button{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); cursor:pointer;
  background:rgba(13,11,8,.55); color:var(--gold-soft); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:background .18s var(--ease); }
.hl-ctrls button:hover{ background:rgba(232,184,75,.22); }
.hl-ctrls svg{ width:18px; height:18px; }
.hl-overlay{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding:26px 16px 14px; pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.78),transparent); }
.hl-league{ display:block; font-size:12px; font-weight:800; color:var(--gold-soft); letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hl-teams{ display:flex; align-items:center; gap:10px; margin-top:5px; font-family:"Exo 2",sans-serif; font-weight:800; color:#fff; }
.hl-teams .t{ font-size:clamp(15px,1.6vw,22px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38%; }
.hl-teams .sc{ font-size:clamp(16px,1.8vw,24px); color:var(--gold-soft); }
.hl-teams .vs{ font-size:13px; color:var(--text-dim); }

/* slim promo carousel strip below the hero-stage (only when the LIVE hero is showing) */
.promo-slot{ margin:14px 0 4px; }
.promo-slot:empty{ display:none; }
.carousel.slim{ box-shadow:var(--shadow-sm); }
.carousel.slim .slide{ aspect-ratio:auto; height:96px; }
.carousel.slim .slide-promo .promo-text h2{ font-size:clamp(13px,1.6vw,18px); }
.carousel.slim .slide-promo .promo-text{ max-width:70%; gap:4px; }
.carousel.slim .slide-promo .promo-sub,.carousel.slim .promo-kicker,.carousel.slim .cta{ display:none; }
.carousel.slim .slide-feature .feat-text p{ display:none; }
.carousel.slim .carousel-arrow{ width:32px; height:32px; }
.carousel.slim .carousel-dots{ bottom:8px; }

/* ===========================================================
   PART C — homepage live chat (hero-stage). hc-* classes are homepage-only so they
   NEVER collide with room/index.html's inline .chat-* rules. Gold/luxe, matches room.
   =========================================================== */
.hero-chat{ display:none; }                                  /* hidden until a live hero exists (app.js flips it on) */
.hero-chat.on{ display:flex; }
.hc-panel{ display:flex; flex-direction:column; width:100%; min-height:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); }
.hc-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line);
  font-family:"Exo 2",sans-serif; font-weight:800; color:var(--text); font-size:14px; letter-spacing:.3px; flex:none; }
.hc-head svg{ width:17px; height:17px; color:var(--gold-soft); }
.hc-head .hc-dot{ width:8px; height:8px; border-radius:50%; background:var(--text-dim); margin-left:auto; flex:none; }
.hc-head .hc-dot.on{ background:#37d67a; box-shadow:0 0 0 4px rgba(55,214,122,.18); }
.hc-head .hc-close{ display:none; background:none; border:none; color:var(--text-dim); cursor:pointer; padding:2px; }
.hc-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.hc-body::-webkit-scrollbar{ width:6px; } .hc-body::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:6px; }
.hc-msg{ font-size:13px; line-height:1.5; color:var(--text); }
.hc-msg .hc-user{ color:var(--gold); font-weight:700; margin-right:6px; }
.hc-empty{ margin:auto; text-align:center; color:var(--text-dim); font-size:12.5px; line-height:1.6; padding:0 12px; }
.hc-empty svg{ width:30px; height:30px; opacity:.5; margin-bottom:8px; }
.hc-foot{ padding:10px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; flex:none; }
.hc-foot input{ flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-pill);
  color:var(--text); padding:9px 14px; font-size:13px; font-family:inherit; outline:none; }
.hc-foot input:focus{ border-color:var(--gold); }
.hc-foot input::placeholder{ color:var(--text-dim); }
.hc-foot .hc-send{ flex:none; background:var(--grad-gold); color:#1a1206; border:none; font-weight:800;
  padding:9px 15px; border-radius:var(--radius-pill); cursor:pointer; }
.hc-foot .hc-like{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--live); font-size:16px; line-height:1; cursor:pointer; transition:transform .15s var(--ease); }
.hc-foot .hc-like:active{ transform:scale(.88); }
.hc-foot .hc-like.pop{ animation:likepop .5s ease; }
@keyframes likepop{ 0%{transform:scale(1);} 40%{transform:scale(1.4);} 100%{transform:scale(1);} }
.hc-gate{ padding:0 12px 12px; text-align:center; }
.hc-gate a{ color:var(--gold); font-weight:700; font-size:12.5px; text-decoration:underline; }
.hc-reconnect{ margin:6px auto 0; text-align:center; color:var(--text-dim); font-size:11.5px; }

/* toggle button that lives in the rail head (only shown < 1600px) */
.hero-chat-toggle{ display:none; align-items:center; gap:6px; margin-left:auto; flex:none; cursor:pointer;
  border:1px solid var(--gold-soft); background:var(--surface); color:var(--gold-soft);
  font-size:12px; font-weight:700; padding:5px 11px; border-radius:var(--radius-pill); }
.hero-chat-toggle svg{ width:14px; height:14px; }

@media (min-width:900px){
  /* 2-col (player | rail); chat is an overlay pinned over the rail column, toggled */
  .hero-chat.on{ position:absolute; top:0; right:0; bottom:0; width:320px; z-index:20;
    transform:translateX(106%); transition:transform .28s var(--ease); }
  .hero-chat.on.open{ transform:translateX(0); }
  .hc-panel{ height:100%; }
  .hc-head .hc-close{ display:inline-flex; }
  .hero-chat-toggle.avail{ display:inline-flex; }         /* app.js adds .avail when a live hero exists */
}
@media (min-width:1600px){
  /* 3-col: player | chat (static column) | rail */
  .hero-stage{ grid-template-columns:minmax(0,1fr) 330px 300px; }
  .hero-chat.on{ position:static; width:auto; transform:none; z-index:auto; }
  .hc-head .hc-close{ display:none; }
  .hero-chat-toggle.avail{ display:none; }                /* chat is always visible → no toggle */
}