/*
 * style-go8-8.css — Override palette + component riêng cho go8-8.nl
 * Extends lib.css (luôn load SAU lib.css).
 * Palette: nền ĐỎ-NÂU-ĐEN tối ("sòng bài cổ điển"), brand VÀNG GOLD, accent ĐỎ.
 *
 * R-41: màu trích từ mainsite GO88 THẬT (đo bằng PIL trên logo.webp + hero.webp,
 * design/brands/go88/):
 *   gold  #f8c000 (màu chữ "GO88" trên logo, kênh phổ biến nhất trong ảnh)
 *   nền tối hero.webp: đen-đỏ sâu (#0c0000 .. #180c00) — casino tối cổ điển
 *   KHÔNG dùng navy (R-41).
 *
 * MAP biến lib.css → giá trị go88:
 *   --bg          #1a0808   (lib: #0b0e16)  — đỏ-nâu-đen tối (khớp gợi ý prompt)
 *   --panel       #241209   (lib: #161b27)  — nền card/panel nâu-đỏ tối
 *   --panel2      #2c160c   (lib: #1e2536)
 *   --line        #4a2414   (lib: #2b3346)  — viền nâu-đỏ nhạt
 *   --line-soft   rgba(248,192,0,.08)
 *   --ink         #f2e6d8   (lib: #eaeefb)  — body text kem ấm
 *   --mut         #b89a86   (lib: #9aa5bf)
 *   --brand       #ffc107   (lib: #ffc83d)  — VÀNG GOLD chủ đạo (trích logo #f8c000, tăng sáng nhẹ)
 *   --brand2      #d00000   (lib: #e0a92a)  — ĐỎ accent (logo/nền gợi ý prompt)
 *   --on          #1a0f00   (lib: #15110a)  — chữ tối trên nền gold
 *   --heading     #ffedb3   (lib: #fff)     — heading kem-gold sáng, đọc rõ trên nền tối
 *   --brand-grad  linear-gradient(135deg,#ffd54a,#e0a000)
 *   --glow        0 0 0 1px rgba(248,192,0,.35), 0 8px 26px -8px rgba(248,192,0,.45)
 *   --panel-grad  linear-gradient(160deg,#2c160c,#160a05)
 *   --panel-grad2 linear-gradient(160deg,#34190d,#1a0e07)
 */

:root {
  /* === NỀN & PANEL (đỏ-nâu-đen tối — casino cổ điển) === */
  --bg:           #1a0808;
  --panel:        #241209;
  --panel2:       #2c160c;
  --line:         #4a2414;
  --line-soft:    rgba(248, 192, 0, .08);

  /* === CHỮ === */
  --ink:          #f2e6d8;
  --mut:          #b89a86;
  --heading:      #ffedb3;

  /* === BRAND GOLD + ĐỎ === */
  --brand:        #ffc107;
  --brand2:       #d00000;
  --on:           #1a0f00;
  --brand-grad:   linear-gradient(135deg, #ffd54a, #e0a000);
  --glow:         0 0 0 1px rgba(248,192,0,.35), 0 8px 26px -8px rgba(248,192,0,.45);

  /* === ACCENT ĐỎ (phụ) === */
  --accent-red:   #d00000;

  /* === PANEL GRADIENT === */
  --panel-grad:   linear-gradient(160deg, #2c160c, #160a05);
  --panel-grad2:  linear-gradient(160deg, #34190d, #1a0e07);

  /* === 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: đỏ-nâu-đen + glow gold nhẹ ở đỉnh (dark-bg technique) ── */
/* Bài học feedback_dark_bg_atmosphere_technique: radial-gradient ấm ở đỉnh +
   block trong suốt + text-shadow + header frosted (KHÔNG chỉnh dim thô). */
.lib {
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(248,192,0,.10), transparent 60%),
    radial-gradient(700px 500px at 90% 10%, rgba(208,0,0,.08), transparent 55%),
    var(--bg);
}

/* ── HEADER STICKY: nền frosted đỏ-nâu-đen (override lib default navy) ── */
.lh.sticky {
  background: rgba(20, 8, 4, .90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(248, 192, 0, .18);
}

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

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

/* ── STICKY CTA: nền đỏ-nâu-đen thay navy ── */
@media (max-width: 640px) {
  .sticky-cta {
    background: rgba(20, 8, 4, .97);
    border-top-color: rgba(248, 192, 0, .2);
    box-shadow: 0 -8px 24px -10px rgba(248, 192, 0, .12), 0 -2px 0 rgba(248, 192, 0, .08);
  }
}

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

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

/* ── FIX Bruce: logo NHỎ lại (trước desktop không cap → to đùng) ── */
.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: nút ở body CĂN GIỮA (hàng nút flex + cta-block) ── */
.read .cta-block, .cta-block { text-align: center; }
.cta-block .btn { margin-left: auto; margin-right: auto; }

/* ── BADGE 18+ trên nền tối: glyph đen của 18plus.webp (PNG trong suốt, chữ đen)
   biến mất trên nền đỏ-nâu-đen gần cùng tông → 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;
}

/* LƯU Ý: design/brands/go88/cert.webp KHÔNG dùng ở footer — self-verify screenshot phát hiện
   đây thực chất là 1 bản khác của badge "DMCA.com" (trùng lặp với dmca.webp), KHÔNG phải
   "chứng nhận Go88" riêng như A2 phỏng đoán trong home.yaml note. */

/* ── HEADING TEXT-SHADOW nhẹ (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(248, 192, 0, .12);
}

/* ── HERO: tông gold-đỏ ── */
.hero {
  background:
    radial-gradient(900px 360px at 70% -60px, rgba(248, 192, 0, .16), transparent 60%),
    radial-gradient(600px 300px at 0% 120%, rgba(208, 0, 0, .12), transparent 55%),
    var(--panel-grad2);
}

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

/* FOOTER: khoảng cách đều trước mỗi h4 (3 heading cột 2/3/4 — lf--4) */
.lf h4 {
  color: var(--brand);
  margin-top: 24px;
}

.lf .lf-cols > div:first-child h4 {
  margin-top: 0;
}

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

/* ─────────────────────────────────────────
   MOBILE RESPONSIVE — go8-8.nl overrides
   Viewport ≤ 640px (desktop-first — B2 tinh chỉnh sâu hơn)
   ───────────────────────────────────────── */
@media (max-width: 640px) {
  .lh .lh-main .logo img {
    max-height: 40px;
    width: auto;
  }

  .wrap {
    padding: 0 14px;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
  }

  /* overflow-x:CLIP (không phải hidden) — hidden trên html/body/section phá position:sticky
     của header/CTA con cháu (xem feedback_mobile_first). clip vẫn chặn tràn ngang, không phá
     sticky. */
  .hero,
  section {
    max-width: 100vw;
    overflow-x: clip;
  }

  .lay-mag,
  .related-grid,
  .lay-363 {
    grid-template-columns: 1fr !important;
  }

  body {
    overflow-x: clip;
  }
}

/* ─────────────────────────────────────────
   TABLET/MOBILE REORDER — .lay-363 (D1 home [3|6|3])
   lib.css sập .lay-363 về 1 cột ở ≤1024px theo THỨ TỰ DOM gốc
   (rail trái → main → rail phải) — banner ảnh đại sứ sẽ hiện
   TRƯỚC H1/hero, không tốt cho mobile-first (feedback_mobile_first).
   Đặt lại thứ tự: main lên đầu, 2 rail xuống sau (giống quy ước
   sunwin-win.com.co) — chỉ ảnh hưởng khoảng 641–1024px vì ≤640px
   lib.css đã ẩn hẳn .rail (thay bằng .sticky-cta đáy).
   ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .lay-363 > main { order: 0; }
  .lay-363 > aside.rail { order: 1; }
}

/* ── FIX Bruce: tabs "Tìm Hiểu Toàn Diện" responsive đẹp — 2×2 grid đều thay vì wrap 3+1 ── */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; }
.tabs .tab { white-space: normal; text-align: center; flex: none; }