/* style-hitclub-win.css — per-site override cho hitclub-win.com.co
   Palette: GOLD #f5b400 + ĐỎ #e11d2a + ĐEN ẤM #0d0b08
   CHỐNG FOOTPRINT sunwin: KHÔNG navy, KHÔNG radial-glow-ảnh, KHÔNG body 3-6-3.
   Hitclub = đen thuần (solid) + gold sáng + đỏ accent + body [8|4] + header TRÁI.
   ============================================================ */

/* ── PALETTE — LỚP 1: :root ─────────────────────────────────── */
:root {
  --bg:          #0d0b08;
  --bg-2:        #16120c;
  --panel:       rgba(30,22,10,.85);
  --panel-grad:  linear-gradient(160deg,rgba(38,27,12,.88),rgba(20,15,6,.88));
  --panel-grad2: linear-gradient(180deg,rgba(30,22,10,.85),rgba(13,11,8,.90));
  --panel2:      rgba(20,15,6,.72);
  --line:        #2a2012;
  --line-soft:   rgba(42,32,18,.60);
  --ink:         #eae6df;
  --heading:     #ffd24a;
  --mut:         #8c7d5e;
  --brand:       #f5b400;
  --brand2:      #e11d2a;
  --brand-grad:  linear-gradient(135deg,#f5b400,#c88a00);
  --glow:        0 0 0 1px rgba(245,180,0,.35), 0 8px 26px -8px rgba(245,180,0,.45);
  --on:          #0d0b08;
}

/* ── PALETTE — LỚP 2: .lib + body.lib ─────────────────────────── */
.lib,
body.lib {
  --bg:          #0d0b08;
  --bg-2:        #16120c;
  --panel:       rgba(30,22,10,.85);
  --panel-grad:  linear-gradient(160deg,rgba(38,27,12,.88),rgba(20,15,6,.88));
  --panel-grad2: linear-gradient(180deg,rgba(30,22,10,.85),rgba(13,11,8,.90));
  --panel2:      rgba(20,15,6,.72);
  --line:        #2a2012;
  --line-soft:   rgba(42,32,18,.60);
  --ink:         #eae6df;
  --heading:     #ffd24a;
  --mut:         #8c7d5e;
  --brand:       #f5b400;
  --brand2:      #e11d2a;
  --brand-grad:  linear-gradient(135deg,#f5b400,#c88a00);
  --glow:        0 0 0 1px rgba(245,180,0,.35), 0 8px 26px -8px rgba(245,180,0,.45);
  --on:          #0d0b08;
}

/* ── NỀN HTML: ĐEN THUẦN (solid) — KHÔNG bê kỹ thuật glow-ảnh sunwin ── */
html {
  background-color: #0d0b08;
  /* Hitclub: solid đen ấm, KHÔNG dùng ảnh radial-glow hay bg.webp chồng nhiều lớp
     → chống footprint sunwin-win.com.co hoàn toàn */
}

body.lib {
  background: #0d0b08;
  color: var(--ink);
}

/* ── HEADING MÀU GOLD ────────────────────────────────────────── */
.h1, .h2, .read h1, .read h2, .read h3,
h1, h2, h3 {
  color: var(--heading);
}

/* text-shadow bám glyph để đọc được trên nền tối */
.lib h1, .lib h2, .lib h3, .lib .h1, .lib .h2, .lib .h3 {
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 16px rgba(0,0,0,.5);
}
.lib p, .lib li, .lib .sapo, .lib summary, .lib td, .lib th {
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* ── HEADER h3-left-sticky: logo TRÁI, sticky ─────────────────── */
/* KHÁC sunwin: sunwin logo giữa (a-center); hitclub logo TRÁI (không có .lh-sp spacer) */
.lh, .lh.sticky {
  background: rgba(13,11,8,.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line-soft) !important;
}

/* topbar hàng 1 */
.lh-topbar {
  background: rgba(245,180,0,.08) !important;
  color: var(--mut);
  border-bottom: 1px solid var(--line-soft);
}
.lh-topbar a { color: var(--brand); }
.lh-topbar a:hover { color: #ffd24a; }

/* lh-main hàng 2: logo TRÁI (flex-start) */
.lh .lh-main {
  padding: 10px 16px;
  justify-content: flex-start !important;
  gap: 16px;
}

/* CTA bên phải (push via margin-left: auto) */
.lh .lh-main > .cta {
  margin-left: auto;
  flex-shrink: 0;
}

/* lh-nav hàng 3 */
.lh-nav {
  justify-content: flex-start !important;
  flex-wrap: nowrap;
  gap: 20px;
  padding: 0 16px;
}
.lh-nav a { white-space: nowrap; }
.lh-nav a:hover { color: var(--brand); }

/* rail sticky: offset topbar(29) + lh-main(70) + lh-nav(42) = ~141px */
.rail { top: 142px; }

/* ── LAYOUT [8|4] — main 8fr + sidebar 4fr ────────────────────── */
/* KHÁC sunwin: sunwin dùng .b7grid 3-6-3; hitclub dùng .lay-84 */
.lay-84 {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
  align-items: start;
}
.lay-84 > .sidebar-sticky,
.lay-84 > aside {
  position: sticky;
  top: 142px;
  align-self: start;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
@media (max-width: 1024px) {
  .lay-84 {
    grid-template-columns: 1fr;
  }
  .lay-84 > .sidebar-sticky,
  .lay-84 > aside {
    position: static;
    max-height: none;
  }
}

/* ── SURFACE: card/acc/tbl ─────────────────────────────────────── */
/* Hitclub: giữ nền đặc nhẹ trên đen thuần để có depth,
   KHÔNG làm trong suốt hoàn toàn như sunwin (khác phong cách) */
.card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  border-radius: var(--rad, 8px);
  transition: box-shadow .18s, border-color .18s;
}
.card:hover {
  border-color: rgba(245,180,0,.35);
  box-shadow: 0 4px 20px rgba(0,0,0,.6), 0 0 0 1px rgba(245,180,0,.20);
}

.acc details {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--rad, 6px);
  margin-bottom: 6px;
}
.acc details[open] {
  box-shadow: 0 0 0 1px rgba(245,180,0,.18);
}

/* Bảng so sánh */
.tbl { border-radius: var(--rad, 6px); overflow: hidden; }
.tbl th { background: rgba(245,180,0,.12); color: var(--heading); }
.tbl td { border-bottom: 1px solid var(--line-soft); }

/* ── DRAWER ─────────────────────────────────────────────────────── */
.drawer {
  background: #16120c !important;
  border-left: 1px solid var(--line);
}

/* ── FOOTER: giữ nen nhẹ + viền trên ─────────────────────────── */
.lf {
  background: rgba(13,11,8,.96) !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: none !important;
}

/* ── HERO: nền tối nhẹ ─────────────────────────────────────────── */
.hero {
  background: rgba(30,22,10,.65) !important;
  border-bottom: 1px solid var(--line-soft);
}

/* ── NÚT — hitclub theme ──────────────────────────────────────── */
/* NÚT CHÍNH (.btn-main): gradient gold → amber, chữ đen tương phản AA */
.btn-main {
  background: linear-gradient(180deg, #f5b400, #c88a00);
  color: #0d0b08 !important;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 16px -4px rgba(245,180,0,.50);
}
.btn-main:hover {
  background: linear-gradient(180deg, #ffd24a, #f5b400);
  box-shadow: 0 0 0 1px rgba(245,180,0,.55), 0 8px 24px -6px rgba(245,180,0,.55);
}

/* NÚT PHỤ (.btn không có .btn-main): vien đỏ + chữ đỏ rõ trên đen */
.lib a.btn:not(.btn-main) {
  border: 1.5px solid #e11d2a;
  color: #e11d2a;
  background: rgba(225,29,42,.10);
}
.lib a.btn:not(.btn-main):hover {
  border-color: #ff4455;
  color: #ff4455;
  background: rgba(225,29,42,.20);
}

/* ── TAB component ─────────────────────────────────────────────── */
.lib .tabs .tab     { color: var(--ink); border-bottom: 2px solid transparent; }
.lib .tabs .tab.on  { color: var(--brand); border-bottom: 2px solid var(--brand); }

/* ── archiveC: GRID BÀI (3 cột, sapo + pager) ─────────────────── */
/* archiveC = grid-3 card chuẩn — sunwin dùng archiveB (tương tự nhưng branding khác) */
/* Hitclub dùng class .arc-c để tránh xung đột nếu có override */
.arc-c {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 0 32px;
}
@media (max-width: 900px) {
  .arc-c { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .arc-c { grid-template-columns: 1fr; }
}

/* ── Pager (phân trang archive) ────────────────────────────────── */
.pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0 16px;
}
.pager a, .pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--panel);
  transition: background .15s, border-color .15s;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager span.on  { background: var(--brand); color: var(--on); border-color: var(--brand); font-weight: 700; }

/* ── MARQUEE (tùy chọn, nếu home dùng) ─────────────────────────── */
.mq {
  overflow: hidden; width: 100%; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.mq-track {
  display: flex; width: max-content; will-change: transform;
  animation: mq-run var(--mq-dur, 30s) linear infinite;
}
.mq-track > * { margin-right: 12px !important; flex: 0 0 auto; }
.mq:hover .mq-track { animation-play-state: paused; }
@keyframes mq-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
  .mq { overflow-x: auto; }
}

/* ── MOBILE ≤640px ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Ẩn topbar hàng 1 */
  .lh .lh-topbar { display: none; }
  /* Ẩn nav hàng 3 */
  .lh .lh-nav { display: none !important; }
  /* Ẩn CTA desktop trong hàng 2 */
  .lh .lh-main > .cta { display: none !important; }

  /* Hàng 2 mobile: logo trái, burger phải */
  .lh .lh-main {
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 10px 16px !important;
    gap: 0 !important;
  }
  .lh .lh-main .logo {
    order: 0 !important;
    flex: 0 0 auto !important;
  }
  .lh .lh-main .burger {
    order: 9 !important;
    display: flex !important;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }

  /* Typography */
  .h1 { font-size: 20px; letter-spacing: 0; }
  .h2 { font-size: 17px; }
  .h1, .h2, h1, h2, h3 { word-break: break-word; overflow-wrap: break-word; }

  /* Layout */
  .wrap, .lay, section { overflow-x: clip; }
  .arc-c { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }

  /* CTA */
  .hero .btn, .cta-block .btn { width: 100% !important; justify-content: center; }
  .sticky-cta .btn { font-size: 13px; padding: 12px 8px; }

  /* Read */
  .read img, .read figure, .read table { max-width: 100%; }
  .tbl { min-width: 560px; }

  body { overflow-x: hidden; }
}