/*
  style-sunwin-vin.css — CSS riêng cho sunwin-vin.com.co
  Palette đỏ-vàng (trích pixel từ logo SUNWIN + mainsite banner bằng PIL):
    --brand  #c00010  crimson đỏ (màu chủ đạo logo SUNWIN)
    --brand2 #d4a800  vàng gold (màu phụ từ banner mainsite)
    --bg     #0e0608  tím-đỏ rất tối (nền hero mainsite sunwin.tg)
    --heading #fff

  Import: sau lib.css (override :root tokens).
  KHÔNG sửa lib.css — mọi override ở đây.
*/

/* ── PALETTE OVERRIDE ───────────────────────────────────────────────────── */
:root {
  --brand:       #c00010;
  --brand2:      #a5000d;
  --on:          #fff;           /* chữ TRÊN nút brand (nền đỏ → chữ trắng) */
  --bg:          #0e0608;
  --panel:       #1a0a0c;
  --panel2:      #22100f;
  --line:        #3a1a1c;
  --line-soft:   rgba(255,255,255,.06);
  --ink:         #f0e8e8;
  --mut:         #b08080;
  --heading:     #fff;
  --ok:          #34d399;
  --warn:        #fbbf24;
  --rad:         12px;

  /* Gradient brand đỏ */
  --brand-grad:  linear-gradient(135deg, #e8001a, #8a0008);
  --glow:        0 0 0 1px rgba(192,0,16,.35), 0 8px 26px -8px rgba(192,0,16,.5);
  --panel-grad:  linear-gradient(160deg, #1f0c0d, #160808);
  --panel-grad2: linear-gradient(160deg, #260e10, #190909);
  --shadow:      0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-lg:   0 16px 40px -14px rgba(0,0,0,.7);
  --ease:        .22s cubic-bezier(.4,.2,.2,1);
}

/* ── BODY + NỀN ─────────────────────────────────────────────────────────── */
/* Glow đỏ ấm ở đỉnh — không phải navy tối lạnh */
.lib {
  background:
    radial-gradient(900px 420px at 85% -120px, rgba(192,0,16,.10), transparent 60%),
    radial-gradient(700px 500px at -10% 0,     rgba(212,168,0,.06),  transparent 55%),
    var(--bg);
}

/* ── NÚT — override màu btn-main (đỏ thay vì gold mặc định lib.css) ─────── */
/* lib.css đã có .lib a.btn{color:var(--ink)} + .lib a.btn-main{color:var(--on)}
   → tương phản đúng với nền đỏ (chữ trắng). Không cần thêm gì. */

/* hover nút main: đỏ sáng hơn */
.btn-main:hover {
  background: linear-gradient(135deg, #e8002a, #a00010);
  box-shadow: 0 0 0 1px rgba(192,0,16,.55), 0 12px 30px -8px rgba(192,0,16,.6);
  transform: translateY(-2px);
}

/* ── BURGER ☰ MOBILE — contrast fix ─────────────────────────────────────── */
/*
  lib.css mặc định .lh .burger{color:var(--brand)} = #c00010 đỏ sẫm trên header frosted tối.
  Contrast đo: 2.68:1 → FAIL WCAG AA icon ≥3:1.
  Fix: đổi sang vàng gold #ffc83d (contrast 11.20:1) — đúng brand đỏ-vàng casino, sáng rõ.
*/
@media (max-width: 640px) {
  .lh .burger { color: #ffc83d; }
}

/* ── HEADER LIQUID GLASS (site-wide) ────────────────────────────────────── */
/*
  Nền bán trong suốt + kính mờ. Áp cho cả mobile + desktop.
  Nền đỏ-đen tối theo brand, alpha ~0.55 để thấy content phía sau khi scroll.
  border-bottom mảnh sáng nhẹ = cảm giác mặt kính.
*/
.lh {
  background: rgba(14, 6, 8, 0.55) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── HEADER DESKTOP OVERRIDE ────────────────────────────────────────────── */
/*
  BÀI HỌC gem88-vin specificity: override layout header cho desktop
  PHẢI bọc @media(min-width:641px) để mobile lib.css (≤640px) thắng.
  Không bọc → specificity ĐÁNH ĐÈ mobile rule → ☰ bị kẹt giữa.
*/
@media (min-width: 641px) {
  .lh.rows-1 .lh-main {
    justify-content: flex-start;  /* logo trái, cta phải — spacer lh-sp giữa */
  }
  .lh.rows-1 .lh-nav {
    display: flex;         /* hiện nav ngang ở desktop */
    justify-content: center; /* nav links căn GIỮA giữa logo và CTA */
    flex: 1;               /* chiếm không gian giữa */
  }
}

/* ── NAV LINKS: UPPERCASE + căn giữa ─────────────────────────────────────── */
/* Desktop nav (.lh-nav a) + Drawer mobile (nav a) đều uppercase */
.lh-nav a,
.drawer nav a {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
}

/* ── HEADER LOGO HEIGHT ──────────────────────────────────────────────────── */
/* logo img = dùng height:44px (inline style), ở đây đảm bảo */
.lh .logo img {
  max-height: 44px;
  width: auto;
}

/* ── HERO: nền radial đỏ brand ──────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(900px 360px at 80% -60px,  rgba(192,0,16,.25), transparent 60%),
    radial-gradient(600px 300px at 0% 120%,    rgba(212,168,0,.10), transparent 55%),
    var(--panel-grad2);
}

/* ── H2 BORDER đỏ ───────────────────────────────────────────────────────── */
.h2 {
  border-left-color: var(--brand);
  background: linear-gradient(90deg, rgba(192,0,16,.10), transparent 40%);
}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.lf {
  background: linear-gradient(180deg, #1a0a0c, #0e0608);
}

/* Cột 1 footer (1 cột → căn giữa, lf--1 lo) — link inline */
.lf .lf-cols a {
  color: var(--mut);
  display: inline;
  padding: 0 2px;
}
.lf .lf-cols a:hover {
  color: var(--brand);
}

/* ── CTA-BLOCK trong bài ─────────────────────────────────────────────────── */
.cta-block {
  background:
    radial-gradient(400px 120px at 50% -20px, rgba(192,0,16,.18), transparent),
    var(--panel-grad2);
  border-color: rgba(192,0,16,.3);
}

/* ── ARCHIVE grid-2 (archiveA) — đảm bảo card ĐỒNG CỠ ─────────────────── */
/*
  Archive A = grid 2 cột, card cùng cỡ, KHÔNG so le.
  lib.css đã có .grid-2{grid-template-columns:repeat(2,1fr);gap:14px}.
  Thêm: card ảnh cùng aspect-ratio → không so le.
*/
.arc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.arc-grid-2 .card .thumb {
  aspect-ratio: 16 / 10;   /* cùng tỉ lệ → card đồng cỡ */
  overflow: hidden;
}
.arc-grid-2 .card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .arc-grid-2 {
    grid-template-columns: 1fr;  /* mobile về 1 cột */
  }
}

/* ── HERO-IN 2 cột desktop → 1 cột mobile ───────────────────────────────── */
/* KHÔNG đặt grid-template-columns trong inline style — media query sẽ bị thua */
.hero-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 640px) {
  .hero-in {
    grid-template-columns: 1fr;  /* mobile: 1 cột, H1 + ảnh xếp dọc */
  }
}

/* ── GAME GRID 4 cột desktop → 2 cột mobile ─────────────────────────────── */
/* KHÔNG đặt grid-template-columns trong inline style — media query sẽ bị thua */
.game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .game-grid {
    grid-template-columns: repeat(2, 1fr);  /* mobile: 2 cột, card game vừa tay */
  }
}

/* ── HOME GRID [3|6|3] ──────────────────────────────────────────────────── */
/*
  Layout trang chủ: rail trái (3) · main (6) · rail phải (3).
  D1 sẽ đổ nội dung; B1 lo khung + class.
*/
.home-grid {
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
  align-items: start;
}
.home-grid .rail {
  position: sticky;
  top: 80px;
}
.home-grid .main-col {
  min-width: 0;  /* tránh overflow */
}
@media (max-width: 1024px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
  .home-grid .rail {
    position: static;
    display: none;  /* banner dọc ẩn mobile (B2 sẽ lo nếu cần hiện) */
  }
}

/* ── TOC (Table of Contents) — pageB ────────────────────────────────────── */
.toc h3 {
  color: var(--brand);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.toc ol {
  padding-left: 18px;
  color: var(--mut);
  font-size: 14px;
}
.toc ol li {
  margin-bottom: 4px;
}
.toc a {
  color: var(--mut);
  font-size: 14px;
}
.toc a:hover {
  color: var(--brand);
}

/* ── RELATED GRID (blog) ────────────────────────────────────────────────── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 640px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
}

/* ── BREADCRUMB ─────────────────────────────────────────────────────────── */
.breadcrumb a {
  color: var(--brand);
}
.breadcrumb a:hover {
  color: var(--mut);
}

/* ── STICKY CTA MOBILE ──────────────────────────────────────────────────── */
/* lib.css đã có .sticky-cta (display:none → flex ≤640px). Màu brand đỏ tự thừa kế. */

/* ── READ (bài viết body) ────────────────────────────────────────────────── */
.read h2 { color: var(--heading); }
.read h3 { color: var(--brand); }

/* ── REVIEW AVATAR (chữ-cái đầu tên — không dùng ảnh người) ────────────── */
.rv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-grad);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  margin-bottom: 6px;
}
.rv-top {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Reviews section heading */
#reviews .h2 {
  border-left-color: var(--brand);
}

/* ── MARQUEE AUTO (kho game + chuyên mục) ──────────────────────────────── */
@keyframes marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marq-mask {
  overflow: hidden;
  width: 100%;
}
.marq-auto {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: marq 30s linear infinite;
}
.marq-mask:hover .marq-auto {
  animation-play-state: paused;
}

/* ── H1 HERO: vàng gold lấp lánh (shimmer) ─────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.hero h1 {
  background: linear-gradient(
    90deg,
    #f5b301 0%,
    #ffe89a 30%,
    #ffd54a 50%,
    #ffe89a 70%,
    #f5b301 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3.5s linear infinite;
  text-shadow: none;  /* text-shadow không áp dụng khi dùng background-clip:text */
}