/*
 * style-hitclub01.com.co.css — Override palette + component riêng cho hitclub01.com.co
 * Extends lib.css (luôn load SAU lib.css).
 * Palette (PIL 2026-07-20 — brand hitclub, cùng bộ ảnh brand với hitclub-vin, verify lại
 * bằng PIL trực tiếp cho lần build này):
 *   Nguồn 1: design/brands/hitclub/hitclub-logo.webp (150x150 resample, loại pixel đen<30/trắng>235)
 *            → cluster gold #f0b400–#f0dc00 (~13% tổng số pixel không-đen/trắng)
 *            → cluster đỏ #f00000 (~1.6%)
 *   Nguồn 2: design/brands/hitclub/mainsite/banner/banner5-796x1212-9ad7e3.webp
 *            → 73.1% pixel <30,30,30 (undertone ấm #141400/#281400) → nền dark WARM, KHÔNG navy/xám (R-41)
 *   --bg        #0d0a08  (nền dark warm casino)
 *   --brand     #f5b800  (vàng cam gold hitclub, dominant cluster logo)
 *   --brand2    #e53935  (đỏ nhấn hitclub từ logo cluster #f00000)
 *   --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ị hitclub01:
 *   --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
 *
 * LƯU Ý HEADER: header mã h2-center-sticky (lh rows-2 a-center sticky). lib.css .lh.a-center
 * TỰ canh giữa logo (không cần override desktop riêng như hitclub-vin (a-left) từng cần).
 * lib.css cũng đã tự fix mobile (logo trái/☰ phải cho cả a-center) — KHÔNG viết đè ở đây,
 * tránh lặp lại bẫy specificity đã ghi trong bài học gem88-vin.
 */

: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 50% -80px, rgba(245,184,0,.07), transparent 60%),
    radial-gradient(600px 300px at 100% 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 */
}

/* ── 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ờ (btn-main KHÔNG bị đè — bẫy đã ghi trong knowledge) */
.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 50% -60px, rgba(245,184,0,.14), transparent 60%),
    radial-gradient(500px 300px at 100% 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);
}

/* R1 FIX — ten + vai tro xuong dong rieng (tranh dinh sat vao nhau) */
.rv-role {
  display: block;
  margin-top: 1px;
}

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

/* ── GRID-4 (4 cột desktop, nếu dùng ở section khác) ── */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ── R1 FIX — .rv-av letter-avatar review (đồng bộ hitclub-vin) ──
   Circle gold, chu dam toi, ~40px, canh giua. */
.rv-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-grad, var(--brand));
  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;
}

/* Bruce feedback 2026-07-21: layout stack tới <=1024px nhưng lib.css chỉ ẩn scrollbar <=640px
   → ở 641-1024px (giao diện đã kiểu mobile) thanh cuộn dọc vẫn hiện = "slider nhỏ bên phải".
   Ẩn scrollbar dọc cho khớp breakpoint stack (giữ desktop >1024 có scrollbar bình thường). */
@media(max-width:1024px){
  html{scrollbar-width:none}
  html::-webkit-scrollbar{display:none}
  body::-webkit-scrollbar{display:none}
}