/*
 * style-rikvip-vin.css — Override palette + component riêng cho rikvip-vin.com.co
 * Extends lib.css (luôn load SAU lib.css).
 * Palette: nền đen ấm sâu, brand ĐỎ cổ điển casino + accent GOLD sang trọng.
 *
 * R-41: màu trích/xác nhận từ config/brands.yaml (đã pixel-analysis mainsite trước đó):
 *   rikvip: { gold: #fbbf24, gold_2: #d99a1a, red: #e11d2a, bg: #100808 }
 *   Logo (design/brands/rikvip/logo.webp): chữ "RIK" đỏ-gold nổi khối 3D + oval tím
 *   + lá bài/xúc xắc/mũ — xác nhận tông đỏ-gold cổ điển casino Mỹ.
 *
 * MAP biến lib.css → giá trị rikvip:
 *   --bg          #100808   (lib: #0b0e16)  — nền đen ấm sâu (verified brands.yaml)
 *   --panel       #1e0f0d   (lib: #161b27)  — nền card/panel nâu-đỏ tối
 *   --panel2      #26120f   (lib: #1e2536)  — nền panel2
 *   --line        #3a1b16   (lib: #2b3346)  — viền nâu-đỏ nhạt
 *   --line-soft   rgba(225,29,42,.08)        — viền mờ đỏ
 *   --ink         #f1e3d8   (lib: #eaeefb)  — body text kem ấm
 *   --mut         #b99a89   (lib: #9aa5bf)  — muted text nâu nhạt
 *   --brand       #e11d2a   (lib: #ffc83d)  — ĐỎ rikvip (CTA nổi, link/hover/border)
 *   --brand2      #fbbf24   (lib: #e0a92a)  — GOLD rikvip (accent sang trọng)
 *   --on          #fff7ec   (lib: #15110a)  — chữ SÁNG trên nền đỏ (khác mặc định gold/chữ tối)
 *   --heading     #fdf1de   (lib: #fff)     — heading kem-gold sáng, đọc rõ trên nền tối
 *   --brand-grad  linear-gradient(135deg,#ff4757,#ad1220)  — đỏ sáng → đỏ đậm
 *   --glow        0 0 0 1px rgba(225,29,42,.4), 0 8px 26px -8px rgba(225,29,42,.5)
 *   --panel-grad  linear-gradient(160deg,#241110,#150908)
 *   --panel-grad2 linear-gradient(160deg,#2c1512,#1a0c0a)
 *
 * --gold2 (riêng, KHÔNG có trong lib.css mặc định): #d99a1a — gold đậm, dùng cho viền/gradient phụ.
 */

:root {
  /* === NỀN & PANEL (đen ấm sâu) === */
  --bg:           #100808;
  --panel:        #1e0f0d;
  --panel2:       #26120f;
  --line:         #3a1b16;
  --line-soft:    rgba(225, 29, 42, .08);

  /* === CHỮ === */
  --ink:          #f1e3d8;
  --mut:          #b99a89;
  --heading:      #fdf1de;

  /* === BRAND ĐỎ + GOLD === */
  --brand:        #e11d2a;
  --brand2:       #fbbf24;
  --gold2:        #d99a1a;
  --on:           #fff7ec;
  --brand-grad:   linear-gradient(135deg, #ff4757, #ad1220);
  --glow:         0 0 0 1px rgba(225,29,42,.4), 0 8px 26px -8px rgba(225,29,42,.5);

  /* === PANEL GRADIENT (tông nâu-đỏ thay navy) === */
  --panel-grad:   linear-gradient(160deg, #241110, #150908);
  --panel-grad2:  linear-gradient(160deg, #2c1512, #1a0c0a);

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

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

/* ── NỀN TRANG: đen ấm + glow đỏ/gold nhẹ ở đỉnh (dark-bg technique) ── */
/* Bài học: radial-gradient ấm ở đỉnh + block trong suốt + text-shadow + header frosted */
.lib {
  background:
    radial-gradient(900px 420px at 60% -100px, rgba(225,29,42,.10), transparent 60%),
    radial-gradient(700px 500px at 90% 10%, rgba(251,191,36,.06), transparent 55%),
    var(--bg);
}

/* ── HEADER: logo CENTER (h3-center-sticky, rows-3) ── */
/* Desktop ≥641px: [nav trái | LOGO dead-center | CTA phải] hàng 2 cân đối thật. */
/* Mobile ≤640px: lib.css đổi thành space-between (logo trái, ☰ phải) — KHÔNG override */
@media (min-width: 641px) {
  .lh.rows-3.a-center .lh-main {
    justify-content: center;
  }
  /* Vô hiệu 2 lh-sp (trước+sau logo hàng 2) — tránh bug lệch logo do lib.css gán
     CHUNG order:0;flex:1 cho cả nav LẪN lh-sp (xem 789club LỖI 1). Header rows-3 không
     có <nav> trong lh-main (nav nằm ở hàng 3 riêng .lh-nav) nên chỉ cần vô hiệu lh-sp
     để logo center thật giữa 2 phía [trống | CTA+burger]. */
  .lh.rows-3.a-center .lh-main > .lh-sp {
    display: none;
  }
}

/* ── HEADER STICKY: nền frosted đen-đỏ (override lib default navy) ── */
.lh.sticky {
  background: rgba(16, 8, 8, .90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(225, 29, 42, .18);
}

/* ── TOPBAR (rows-3 hàng 1): chữ gold nhẹ cho sang trọng ── */
.lh-topbar {
  color: var(--brand2);
  background: rgba(0, 0, 0, .32);
}

/* ── DRAWER: nền đen-đỏ (override lib default panel) ── */
.drawer {
  background: linear-gradient(180deg, #1e0f0d, #100808);
}

/* ── DRAWER body scroll-lock (JS thêm class .drawer-open vào body) ── */
body.drawer-open {
  overflow: hidden;
}

/* ── STICKY CTA: nền đen-đỏ thay navy ── */
@media (max-width: 640px) {
  .sticky-cta {
    background: rgba(16, 8, 8, .97);
    border-top-color: rgba(225, 29, 42, .22);
    box-shadow: 0 -8px 24px -10px rgba(225, 29, 42, .15), 0 -2px 0 rgba(225, 29, 42, .1);
  }
}

/* ── NÚT CTA — màu ĐỎ nổi thay gold, chữ SÁNG (nền đỏ cần chữ sáng, không phải tối) ── */
.btn-main {
  background: var(--brand-grad);
  color: var(--on);
  border-color: transparent;
  box-shadow: 0 6px 18px -6px rgba(225, 29, 42, .55);
}

.btn-main:hover {
  background: linear-gradient(135deg, #ff6b78, #c01620);
  box-shadow: 0 0 0 1px rgba(225,29,42,.55), 0 12px 30px -8px rgba(225,29,42,.6);
  transform: translateY(-2px);
}

/* chữ nút đỏ-main luôn SÁNG (--on) — nền đỏ tối cần tương phản sáng */
.lib a.btn-main,
.lib a.btn-main:hover {
  color: var(--on);
}

/* btn outline hover: chữ đỏ + nền đỏ nhạt */
.lib a.btn:not(.btn-main):hover {
  color: var(--brand);
  background: rgba(225,29,42,.10);
}

/* ── HEADING MÀU đỏ-gold (thay vì trắng) — H1 gradient · H2 gold · H3 đỏ ── */
/* H2: chữ GOLD + viền/nền đỏ (đỏ accent + gold chữ = casino cổ điển) */
.h2, .read h2 {
  color: var(--brand2);
}
.h2 {
  border-left-color: var(--brand);
  background: linear-gradient(90deg, rgba(225,29,42,.10), transparent 40%);
}
/* H3: chữ ĐỎ (phân cấp khác H2 gold) */
.read h3, .box h3, .card .t, .subcards .box h3 {
  color: var(--brand);
}

/* H1: gradient GOLD → CAM-ĐỎ (nổi bật, sang; fallback gold nếu trình duyệt cũ) */
.h1 {
  color: var(--brand2);
  background: linear-gradient(92deg, #ffd24a 0%, #ffb020 45%, #ff6a3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .h1 {
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(225,29,42,.18));
}

/* ── HERO: tông đỏ-gold ── */
.hero {
  background:
    radial-gradient(900px 360px at 65% -60px, rgba(225,29,42,.18), transparent 60%),
    radial-gradient(600px 300px at 0% 120%, rgba(251,191,36,.10), transparent 55%),
    var(--panel-grad2);
}

/* ── CARD HOVER: viền đỏ thay gold ── */
.card:hover {
  border-color: rgba(225,29,42,.4);
}

.box:hover {
  border-color: rgba(225,29,42,.35);
}

.gcard:hover {
  border-color: rgba(251,191,36,.5);
  box-shadow: var(--glow);
}

/* ── TABS: on = đỏ ── */
.tabs .tab.on {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 6px 16px -6px rgba(225,29,42,.5);
}

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

/* ── ACCORDION / FAQ: viền đỏ khi mở, dấu +/− gold ── */
.acc details[open],
.faq details[open] {
  border-color: rgba(225,29,42,.4);
}

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

/* ── STEPS: đầu số đỏ, chữ sáng ── */
.steps li::before {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 4px 12px -4px rgba(225,29,42,.6);
}

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

/* ── PAGER ── */
.pager a:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(225,29,42,.06);
}

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

/* ── FOOTER: nền đen-đỏ sâu hơn ── */
.lf {
  background: linear-gradient(180deg, #170c0a, #0a0403);
}

.lf h4 {
  color: var(--brand2);
  margin-top: 24px;
}

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

/* footer logo: kích thước gọn, luôn hiện trọn vẹn, đúng tỉ lệ thật (245x158) */
.lh .logo img,
.lf-logo img,
.drawer .logo img {
  aspect-ratio: 245 / 158;
}

.lf-logo img {
  width: 92px;
  height: auto;
}

/* ── HEADER NAV (hàng 3 — .lh-nav) ── */
.lh nav a:hover {
  color: var(--brand);
}

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

.lh .logo {
  color: var(--heading);
}

.lh .burger {
  color: var(--brand2);
}

/* ── CTA-BLOCK: tông đỏ-gold ── */
.cta-block {
  background:
    radial-gradient(400px 120px at 50% -20px, rgba(225,29,42,.14), transparent),
    var(--panel-grad2);
  border-color: rgba(225,29,42,.25);
}

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

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

.author--2 img {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--brand);
}

/* ── TABLE ── */
.tbl th {
  color: var(--brand2);
}

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

/* ── TRUST BADGES (dùng cả ở hero lẫn footer col1) ── */
.trust span::before {
  color: var(--brand2);
}

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

/* ── ARCHIVE E (list) — viền đỏ nhẹ khi hover ── */
.arc-row:hover {
  border-color: rgba(225,29,42,.35);
}

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

/* ─────────────────────────────────────────
   MOBILE BASELINE — rikvip-vin overrides
   (B2 mobile-specialist sẽ tinh chỉnh thêm sau)
   Viewport ≤ 640px
   ───────────────────────────────────────── */
@media (max-width: 640px) {

  /* Logo trên mobile: giữ kích thước hợp lý */
  .lh .lh-main .logo img {
    max-height: 36px;
    width: auto;
  }

  /* Topbar (rows-3 hàng 1) — thu gọn chữ, tránh tràn ngang */
  .lh-topbar {
    font-size: 11.5px;
    padding: 5px 10px;
  }

  /* STICKY CTA: 2 nút dính đáy, fill width đều */
  .sticky-cta {
    padding: 8px 10px;
    gap: 8px;
  }

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

  /* WRAP: không tràn ngang */
  .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;
  }

  /* H2 font nhỏ hơn */
  .h2 {
    font-size: clamp(17px, 4.5vw, 22px);
  }

  /* KHÔNG set body{overflow-x:hidden} ở đây — lib.css đã cố tình dùng
     overflow-x:CLIP (không phải hidden) cho html/body ở mobile để chặn tràn
     ngang MÀ KHÔNG biến body thành scroll container mới (hidden ép overflow-y
     tính thành auto → phá position:sticky của header/CTA con cháu, xem
     lib.css dòng comment + memory feedback_mobile_first). Site CSS load SAU
     lib.css nên nếu khai lại body{overflow-x:hidden} ở đây sẽ ĐÈ lại giá trị
     đúng, tái tạo bug sticky. Đã xác minh bằng Playwright: trước khi xoá rule
     này, scroll xuống thì header.getBoundingClientRect().top = -900 (KHÔNG
     dính top:0) + getComputedStyle(body).overflowY = 'auto' (bị ép). Sau khi
     xoá, sticky hoạt động đúng — xem thêm _shell.py/lib.css.
     KHÔNG tự thêm lại 'body{overflow-x:hidden}' trong site CSS nữa. */
}