/*
 * style-rikvip01.css — Override palette + component riêng cho rikvip01.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: TÁI DÙNG NGUYÊN palette rikvip-vin.com.co — CÙNG BRAND rikvip, CÙNG logo nguồn
 * (design/brands/rikvip/logo.webp), đã verify từ config/brands.yaml rikvip:
 *   { gold: #fbbf24, gold_2: #d99a1a, red: #e11d2a, bg: #100808 }
 *   Logo: chữ "RIK" đỏ-gold nổi khối 3D + oval tím + lá bài/xúc xắc/mũ — tông đỏ-gold cổ
 *   điển casino Mỹ. KHÔNG dùng navy (R-41).
 *
 * MAP biến lib.css → giá trị rikvip:
 *   --bg          #100808   (lib: #0b0e16)
 *   --panel       #1e0f0d   (lib: #161b27)
 *   --panel2      #26120f   (lib: #1e2536)
 *   --line        #3a1b16   (lib: #2b3346)
 *   --line-soft   rgba(225,29,42,.08)
 *   --ink         #f1e3d8   (lib: #eaeefb)
 *   --mut         #b99a89   (lib: #9aa5bf)
 *   --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 đỏ
 *   --heading     #fdf1de   (lib: #fff)
 *   --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-grad  linear-gradient(160deg,#241110,#150908)
 *   --panel-grad2 linear-gradient(160deg,#2c1512,#1a0c0a)
 *
 * KHÁC rikvip-vin.com.co: header mã h2-center-sticky (rows-2), KHÔNG rows-3 — lib.css
 * `.lh.a-center .lh-main{justify-content:center}` đã tự căn giữa ĐÚNG cả desktop lẫn
 * mobile ở mức base (không nằm trong media query) nên KHÔNG cần thêm rule non-media
 * riêng cho rows-2 (khác rows-3 cần override vì nav nằm hàng riêng ngoài .lh-main) —
 * tránh bẫy specificity đè media query đã gặp ở gem88-vin (xem _shell.py docstring).
 */

: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) ── */
.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 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);
}

/* ── 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);
  }
}

/* ── LOGO: khoá đúng tỉ lệ ảnh thật logo.webp (245×158) — tránh méo/cắt ── */
.lh .logo img,
.lf-logo img,
.drawer .logo img {
  aspect-ratio: 245 / 158;
  width: auto;
}

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

/* ── 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 (bug đã gặp: .btn:hover đè nền gold của
   .btn-main — dùng :not(.btn-main) để .btn-main GIỮ nền gradient khi hover) */
.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, .read h2 {
  color: var(--brand2);
}
.h2 {
  border-left-color: var(--brand);
  background: linear-gradient(90deg, rgba(225,29,42,.10), transparent 40%);
}
.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 .lf-cols > div:first-child h4 {
  margin-top: 0;
}

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

/* ── HEADER NAV (hàng 2 — .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);
}

/* ── 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);
}

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

/* ── BADGE 18+ trên nền tối: glyph ĐEN của 18plus.webp (PNG trong suốt, số/dấu + đen)
   gần như biến mất trên nền đỏ-nâu-đen tối (đã tự-chụp-kiểm phát hiện — cùng lỗi go8-8.nl
   gặp với CÙNG file asset dùng chung design/shared/badge/18plus.webp) → thêm nền trắng bo
   tròn phía sau CHỈ badge 18+ (gamcare/dmca đã có nền/chữ đủ tương phản, không cần sửa). ── */
.lf-badges img[alt^="18+"] {
  background: #fff;
  border-radius: 8px;
  padding: 3px;
}

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

/* ── DẢI GAME MARQUEE (Section 2, D1) — CSS-only tự chạy vô hạn, track x2, pause-on-hover ── */
.game-marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.game-marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: game-marquee-x 34s linear infinite;
}
.game-marquee-track:hover { animation-play-state: paused; }
@keyframes game-marquee-x {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.game-tile {
  flex: 0 0 auto;
  width: 300px;
  display: block;
  background: var(--panel-grad);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color var(--ease), transform var(--ease);
}
.game-tile:hover {
  border-color: rgba(225, 29, 42, .4);
  transform: translateY(-3px);
}
.game-tile img { width: 100%; height: auto; display: block; }
.game-tile .gt-pad { padding: 12px 14px; }
.game-tile .gt-t {
  display: block;
  font-weight: 700;
  color: var(--heading);
  font-size: 15px;
  margin-bottom: 6px;
  text-decoration: none;
}
.game-tile .gt-d { font-size: 12.5px; color: var(--mut); line-height: 1.55; }
.game-tile .gt-d a { color: var(--brand2); text-decoration: underline; }

@media (max-width: 640px) {
  .game-tile { width: 240px; }
}

/* ── TẢI APP (Section 4A, D1) — 2 nhánh Android/iOS ── */
.app-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 14px 0 18px;
}
.app-branch {
  background: var(--panel-grad);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  padding: 16px;
  box-shadow: var(--shadow);
}
.app-branch .ab-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.app-branch .ab-head b { color: var(--brand2); font-size: 16px; }
.app-branch p { margin: 0; color: #dce3f5; font-size: 14px; line-height: 1.6; }
@media (max-width: 640px) {
  .app-branches { grid-template-columns: 1fr; }
}

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

  .lh .lh-main .logo img {
    max-height: 36px;
    width: auto;
  }

  .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-size: clamp(17px, 4.5vw, 22px);
  }

  /* KHÔNG set body{overflow-x:hidden} ở đây — lib.css cố tình dùng overflow-x:CLIP cho
     html/body ở mobile để chặn tràn ngang MÀ KHÔNG phá position:sticky của header/CTA
     (xem _shell.py + memory feedback_mobile_first). KHÔNG khai lại rule này ở site CSS. */
}

/* ── FIX Bruce: logo NHỎ lại (desktop trước không cap) ── */
.lh .lh-main .logo img { max-height: 56px; width: auto; }
/* ── FIX Bruce: menu UPPERCASE + CĂN GIỮA ── */
.lh-nav { justify-content: center; }
.lh nav a { text-transform: uppercase; letter-spacing: .4px; }

/* ── FIX Bruce: logo trong DRAWER mobile cũng NHỎ lại (trước không cap → to đùng) ── */
.drawer .logo img { max-height: 48px; width: auto; }