/*
 * style-hitclub-vin.css — Override palette + component riêng cho hitclub-vin.com.co
 * Extends lib.css (luôn load SAU lib.css).
 * Palette (PIL 2026-07-06, nguồn: hitclub-logo.webp + mainsite/banner/banner5):
 *   --bg        #0d0a08  (nền dark warm casino, banner5 87.6% dark pixels)
 *   --brand     #f5b800  (vàng cam gold hitclub, dominant cluster logo)
 *   --brand2    #e53935  (đỏ nhấn hitclub từ logo f00000 cluster)
 *   --heading   #ffd700  (vàng sáng heading trên nền tối)
 *   TUYỆT ĐỐI KHÔNG navy mặc định (R-41).
 *
 * MAP biến lib.css → giá trị hitclub-vin:
 *   --bg        #0d0a08   (lib: #0b0e16)  — nền dark warm
 *   --panel     #1a1208   (lib: #161b27)  — nền card/panel tối warm
 *   --panel2    #231808   (lib: #1e2536)  — nền panel2, tab on
 *   --line      #2e2010   (lib: #2b3346)  — viền warm
 *   --line-soft rgba(245,184,0,.08)
 *   --ink       #f0e8d0   (lib: #eaeefb)  — body text warm ivory
 *   --mut       #b09060   (lib: #9aa5bf)  — muted text
 *   --brand     #f5b800   (lib: #ffc83d)  — gold hitclub
 *   --brand2    #e53935   (lib: #e0a92a)  — đỏ nhấn
 *   --on        #1a0a00   (lib: #15110a)  — chữ trên nền brand
 *   --heading   #ffd700   (lib: #fff)     — heading sáng
 *   --ok        #34d399
 *   --warn      #f5b800
 */

:root {
  /* === NỀN & PANEL === */
  --bg:           #0d0a08;
  --panel:        #1a1208;
  --panel2:       #231808;
  --line:         #2e2010;
  --line-soft:    rgba(245, 184, 0, .08);

  /* === CHỮ === */
  --ink:          #f0e8d0;
  --mut:          #b09060;
  --heading:      #ffd700;

  /* === BRAND GOLD === */
  --brand:        #f5b800;
  --brand2:       #e53935;
  --on:           #1a0a00;
  --brand-grad:   linear-gradient(135deg, #ffd233, #c88a00);
  --glow:         0 0 0 1px rgba(245,184,0,.35), 0 8px 26px -8px rgba(245,184,0,.45);

  /* === PANEL GRADIENT (tông warm dark) === */
  --panel-grad:   linear-gradient(160deg, #1e1408, #0e0a04);
  --panel-grad2:  linear-gradient(160deg, #231808, #140e04);

  /* === SHADOW (nền tối → shadow đậm hơn) === */
  --shadow:       0 6px 18px -8px rgba(0, 0, 0, .7);
  --shadow-lg:    0 16px 40px -14px rgba(0, 0, 0, .8);

  /* === OK / WARN === */
  --ok:           #34d399;
  --warn:         #f5b800;
}

/* ── NỀN TRANG: nền tối warm + radial-gradient gold mờ ở đỉnh ── */
.lib {
  background:
    radial-gradient(900px 420px at 60% -80px, rgba(245,184,0,.07), transparent 60%),
    radial-gradient(600px 300px at 0% 0, rgba(229,57,53,.04), transparent 50%),
    var(--bg);
}

/* ── HEADER STICKY: override lib.css rgba(24,30,46,.85) navy → warm dark hitclub (R-41) ── */
.lh.sticky {
  background: rgba(13, 10, 8, .92);   /* khớp --bg #0d0a08, không navy */
}

/* ── HEADER: logo TRÁI (DESKTOP). Bọc @media(min-width:641px) — tránh đè lib.css
   justify-content:space-between (mobile ☰ sát phải). Bài học gem88-vin specificity bug. ── */
@media (min-width: 641px) {
  .lh.rows-2 .lh-main {
    justify-content: flex-start;
  }
  /* spacer đẩy CTA + burger về phải trên desktop */
  .lh.rows-2 .lh-main .lh-sp {
    flex: 1;
  }
}

/* ── NÚT CTA — màu gold hitclub ── */
.btn-main {
  background: var(--brand-grad);
  color: var(--on);
  border-color: transparent;
  box-shadow: 0 6px 18px -6px rgba(245, 184, 0, .5);
}

.btn-main:hover {
  background: linear-gradient(135deg, #ffe155, #c88a00);
  box-shadow: 0 0 0 1px rgba(245,184,0,.55), 0 12px 30px -8px rgba(245,184,0,.6);
  transform: translateY(-2px);
}

/* Chữ nút main: --on (tối, tương phản tốt trên nền gold) */
.lib a.btn-main,
.lib a.btn-main:hover {
  color: var(--on);
}

/* Nút outline hover: chữ gold + nền gold mờ */
.lib a.btn:not(.btn-main):hover {
  color: var(--brand);
  background: rgba(245, 184, 0, .10);
}

/* ── HEADER NAV: hover gold ── */
.lh nav a:hover {
  color: var(--brand);
}

.lh nav a::after {
  background: var(--brand);
}

/* Logo color (override lib.css mặc định gold — đồng bộ với ảnh) */
.lh .logo {
  color: var(--heading);
}

/* Burger: màu gold */
.lh .burger {
  color: var(--brand);
}

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

/* ── HEADING TEXT-SHADOW (dark-bg technique) ── */
.h1 {
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  color: var(--heading);
}

.hero .h1 {
  text-shadow: 0 2px 18px rgba(0,0,0,.7), 0 0 30px rgba(245,184,0,.15);
}

/* ── HERO: tông gold warm ── */
.hero {
  background:
    radial-gradient(900px 360px at 70% -60px, rgba(245,184,0,.14), transparent 60%),
    radial-gradient(500px 300px at 0% 120%, rgba(229,57,53,.06), transparent 55%),
    var(--panel-grad2);
}

/* ── CARD HOVER: viền gold ── */
.card:hover {
  border-color: rgba(245, 184, 0, .4);
}

.box:hover {
  border-color: rgba(245, 184, 0, .35);
}

.gcard:hover {
  border-color: rgba(245, 184, 0, .5);
  box-shadow: var(--glow);
}

/* ── TABS: on = gold ── */
.tabs .tab.on {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 6px 16px -6px rgba(245, 184, 0, .5);
}

.tabs .tab:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ── ACCORDION / FAQ mở: viền gold ── */
.acc details[open],
.faq details[open] {
  border-color: rgba(245, 184, 0, .4);
}

.acc summary::after,
.acc details[open] summary::after,
.faq summary::after,
.faq details[open] summary::after {
  color: var(--brand);
}

/* ── STEPS: đầu số gold ── */
.steps li::before {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 4px 12px -4px rgba(245, 184, 0, .6);
}

/* ── TOC: link gold ── */
.toc a:hover {
  color: var(--brand);
}

/* ── PAGER ── */
.pager a:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(245, 184, 0, .06);
}

/* ── FILTER CHIP ── */
.filter .chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ── FOOTER LF: nền tối warm ── */
.lf {
  background: linear-gradient(180deg, #170f04, #0a0602);
}

.lf h4 {
  color: var(--brand);
}

.lf a:hover {
  color: var(--brand);
}

/* ── READ AREA ── */
.read h3 {
  color: var(--brand);
}

/* ── CTA-BLOCK: tông gold ── */
.cta-block {
  background:
    radial-gradient(400px 120px at 50% -20px, rgba(245,184,0,.10), transparent),
    var(--panel-grad2);
  border-color: rgba(245, 184, 0, .25);
}

/* ── AUTHOR box: viền brand gold ── */
.author {
  border-left-color: var(--brand);
}

.author .role {
  color: var(--brand);
}

/* ── TABLE: header row gold ── */
.tbl th {
  color: var(--brand);
}

.tbl .rank,
.tbl .star {
  color: var(--brand);
}

/* ── TRUST BADGES: checkmark gold ── */
.trust span::before {
  color: var(--brand);
}

/* ── REVIEW STARS ── */
.rv-role,
.rv-stars {
  color: var(--brand);
}

/* ── SCROLLBAR ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* ── GRID-4 (4 cot desktop — category section FAIL-2 fix) ── */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ── W2 FIX — MARQUEE AUTO-SCROLL vô tận (CSS keyframes) ──
   Track đã ×2 trong Python (6 item = 3×2).
   Animate translateX 0 → -50% (1 bộ 3 item) = loop liền mạch.
   pause on hover. */
@keyframes hitclub-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee {
  overflow: hidden !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100%;
  max-width: var(--maxw);      /* CAP về container — không tràn 2 bên ở màn rộng */
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
  cursor: default;
}

.marquee > * {
  /* Mỗi item trong track cần flex-shrink:0 để không co */
  flex: 0 0 auto;
}

/* Tao inner track wrapper de animate — wrap tat ca children */
.marquee-inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  animation: hitclub-marquee 18s linear infinite;
  width: max-content;
}

.marquee-inner:hover,
.marquee:hover .marquee-inner {
  animation-play-state: paused;
}

/* ── MINOR-1 FIX — .rv-av letter-avatar review ──
   Circle gold, chu dam toi, ~40px, canh giua. */
.rv-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-grad);
  color: var(--on);         /* #1a0a00 — toi, tuong phan tren gold */
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -4px rgba(245, 184, 0, .5);
  letter-spacing: 0;
}

/* .rv-top: avatar + ten cach nhau 10px, canh giua doc */
.rv-top {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.rv-top b {
  font-size: 15px;
  color: var(--ink);
  font-weight: 700;
}

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE — hitclub-vin overrides
   Viewport ≤ 640px
   ══════════════════════════════════════════ */
@media (max-width: 640px) {

  /* 1. Ẩn lh-nav (hàng 2 của rows-2) trên mobile — drawer lo nav */
  .lh-nav {
    display: none;
  }

  /* ── LỖI 4: BANNER — giữ tỉ lệ, không bóp/méo ──
     Hero-split chuyển từ grid 25%/1fr → 1 cột stack.
     Banner col hiển thị với aspect-ratio giữ nguyên (796x1212 ≈ 2/3),
     không ép width:100% làm bóp ảnh dọc. */
  .hero-split {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 0 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: unset !important;
  }

  .hero-split > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Banner dọc 796x1212: hiển thị full-width giữ tỉ lệ thật.
     KHÔNG ép aspect-ratio:16/9 (sẽ cắt/bóp). */
  .hero-banner-col img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: unset !important;
    max-width: 100% !important;
  }

  .hero-in {
    padding: 0 !important;
  }

  /* ── LỖI 5: H1 căn giữa mobile ── */
  .hero .h1,
  .hero-split .h1 {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 1.25;
    text-align: center !important;
  }

  /* ── LỖI 8: Nút body căn giữa mobile ── */
  .hero-in > div[style*="display:flex"] {
    justify-content: center !important;
  }

  /* 3. Sticky CTA */
  .sticky-cta {
    padding: 8px 10px;
    gap: 8px;
  }

  .sticky-cta .btn {
    font-size: 14px;
    padding: 11px 10px;
    min-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 4. Wrap */
  .wrap {
    padding: 0 14px;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .hero {
    overflow-x: hidden;
    max-width: 100vw;
  }

  section {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* 5. Layouts → 1 cột */
  .lay-mag,
  .lay-93,
  .lay-363,
  .lay-v2 {
    grid-template-columns: 1fr !important;
  }

  /* 6. Archive list → 1 cột */
  .arc-row {
    grid-template-columns: 1fr !important;
  }

  .arc-row .thumb {
    aspect-ratio: 16 / 9;
    width: 100%;
  }

  /* 7. Related → 1 cột */
  .related-grid {
    grid-template-columns: 1fr !important;
  }

  /* 8. Archive grid-3 → 1 cột (archiveB desktop 3 cột) */
  .grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* 9. Table scroll */
  .tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 10. Body overflow */
  body {
    overflow-x: hidden;
  }

  /* 11. H2 responsive */
  .h2 {
    font-size: clamp(17px, 4.5vw, 22px);
  }

  /* W1 FIX — Hero CTAs mobile: xuống dòng, full-width, không clip chữ */
  .hero-in > div[style*="display:flex"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .hero-in .btn,
  .hero-in .btn-main {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }

  /* FAIL-2 — grid-4 category → 2 cột mobile */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* ── LỖI 1: MARQUEE — đảm bảo clip gọn, không tràn ngang ──
     Section wrapper đã có overflow:hidden inline.
     Đảm bảo .marquee không tạo scroll ngang. */
  .marquee {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .marquee-inner {
    /* width: max-content giữ nguyên để animation chạy được,
       nhưng parent overflow:hidden sẽ clip */
    will-change: transform;
  }

  /* ── LỖI 2: KHO GAME — topgames ngang 1123x373 giữ nét, không upscale ──
     width:100% + height:auto đã có inline. object-fit:contain giữ pixel thật.
     Ảnh nhỏ hơn viewport (max-width:100%) không bị kéo rộng. */
  img[src*="topgames"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    image-rendering: -webkit-optimize-contrast;
  }

  /* Jackpot icons (171x176 — gần vuông): .jackpot-grid giữ 3 cột mobile,
     không 1 cột. .jackpot-icon giữ kích thước gốc, không phóng to. */
  .jackpot-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .jackpot-icon {
    width: 100% !important;
    max-width: 172px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* ── LỖI 3: CARD CHUYÊN MỤC — đồng bộ khung ảnh 5 card ──
     Các card dùng ảnh gốc khác tỉ lệ (176px vuông, 373px ngang, icon nhỏ…).
     Đặt aspect-ratio:16/9 + object-fit:cover để 5 card đồng đều chiều cao ảnh.
     Chỉ nhắm .card trong section chuyên mục (không phải .grid-3 jackpot). */
  section .card > a > img,
  section .card a img {
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
  }

  /* ── LỖI 6: LOGO FOOTER căn giữa mobile ── */
  .lf-logo,
  .lf .logo {
    display: block !important;
    text-align: center !important;
    margin: 0 auto 10px !important;
  }

  .lf-logo img,
  .lf .logo img {
    display: block !important;
    margin: 0 auto !important;
  }

  /* Footer cột 1: căn giữa toàn bộ nội dung */
  .lf-cols > div:first-child {
    text-align: center !important;
  }

  .lf-badges {
    justify-content: center !important;
  }

  /* ── LỖI 7: RESPONSIVE TỔNG THỂ — spacing gọn hơn ──
     Section padding giảm xuống trên mobile. */
  section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* ── LỖI 9: KHỐI TẢI APP — 1 cột (badge DMCA/chứng nhận đã bỏ khỏi HTML,
     .app-dl-wrap chỉ còn 1 con — giữ flex column cho gap đều). */
  .app-dl-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Tab button trong khối tải app: wrap text không clip */
  .tabs .tab {
    font-size: 13px !important;
    padding: 8px 10px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* Nút CTA trong section body: căn giữa */
  section .btn-main,
  section > .wrap > div > .btn-main,
  section .wrap > .btn-main,
  div[style*="margin-top"] > .btn-main,
  div[style*="margin-top:16px"] .btn-main {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Wrapper nút có text-align cha = căn giữa */
  div[style*="margin-top:16px"],
  div[style*="margin-top: 16px"] {
    text-align: center !important;
  }
}