/*
 * style-iwin-win.css — Override palette + component riêng cho iwin-win.com.co
 * Extends lib.css (luôn load SAU lib.css).
 * Palette: nền TỐI/ĐEN sang trọng ("sòng bạc thượng lưu"), brand GOLD, accent ĐỎ (quân bài).
 *
 * R-41: màu trích từ mainsite IWIN (logo.webp — badge crown + IWIN + spade, nền tối):
 *   gold  #e4a957 / #e7b15c (title mainsite)
 *   green #00bf36, cyan #19b0bf (nút phụ mainsite — dùng làm accent phụ, KHÔNG ép vào nút chính)
 *   nền mainsite = tối/đen sâu
 *
 * MAP biến lib.css → giá trị iwin:
 *   --bg          #0c0704   (lib: #0b0e16)  — nền đen ấm sâu (mainsite)
 *   --panel       #1d150b   (lib: #161b27)  — nền card/panel nâu tối
 *   --panel2      #241a0d   (lib: #1e2536)
 *   --line        #3a2c17   (lib: #2b3346)  — viền nâu-gold nhạt
 *   --line-soft   rgba(232,176,74,.08)
 *   --ink         #f3ead9   (lib: #eaeefb)  — body text kem ấm
 *   --mut         #b7a687   (lib: #9aa5bf)
 *   --brand       #e8b04a   (lib: #ffc83d)  — GOLD chủ đạo (trích logo)
 *   --brand2      #c0392b   (lib: #e0a92a)  — ĐỎ quân bài (accent, không phải nút chính)
 *   --on          #1a1005   (lib: #15110a)  — chữ tối trên nền gold
 *   --heading     #ffe9b6   (lib: #fff)     — heading kem-gold sáng
 *   --brand-grad  linear-gradient(135deg,#ffd576,#c98a2c)
 *   --glow        0 0 0 1px rgba(232,176,74,.35), 0 8px 26px -8px rgba(232,176,74,.45)
 *   --panel-grad  linear-gradient(160deg,#241a0e,#160f08)
 *   --panel-grad2 linear-gradient(160deg,#2c2013,#1a1209)
 *   --ok          #00bf36  (từ mainsite — thay forest mặc định)
 *
 * Cyan #19b0bf → dùng riêng cho --accent-cyan (highlight phụ, D1/home dùng nếu cần).
 */

:root {
  /* === NỀN & PANEL (đen ấm sâu — "sòng bạc thượng lưu") === */
  --bg:           #0c0704;
  --panel:        #1d150b;
  --panel2:       #241a0d;
  --line:         #3a2c17;
  --line-soft:    rgba(232, 176, 74, .08);

  /* === CHỮ === */
  --ink:          #f3ead9;
  --mut:          #b7a687;
  --heading:      #ffe9b6;

  /* === BRAND GOLD === */
  --brand:        #e8b04a;
  --brand2:       #c0392b;
  --on:           #1a1005;
  --brand-grad:   linear-gradient(135deg, #ffd576, #c98a2c);
  --glow:         0 0 0 1px rgba(232,176,74,.35), 0 8px 26px -8px rgba(232,176,74,.45);

  /* === ACCENT ĐỎ + CYAN (phụ, không phải nút chính) === */
  --accent-red:   #c0392b;
  --accent-cyan:  #19b0bf;

  /* === PANEL GRADIENT === */
  --panel-grad:   linear-gradient(160deg, #241a0e, #160f08);
  --panel-grad2:  linear-gradient(160deg, #2c2013, #1a1209);

  /* === 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:           #00bf36;
  --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 50% -120px, rgba(232,176,74,.10), transparent 60%),
    radial-gradient(700px 500px at 90% 10%, rgba(192,57,43,.07), transparent 55%),
    var(--bg);
}

/* ── HEADER STICKY: nền frosted đen-ấm (override lib default navy) ── */
.lh.sticky {
  background: rgba(15, 10, 5, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(232, 176, 74, .18);
}

/* ── DRAWER: nền đen-ấm (override lib default panel) ── */
.drawer {
  background: linear-gradient(180deg, #1d150b, #0c0704);
}

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

/* ── STICKY CTA: nền đen-ấm thay navy ── */
@media (max-width: 640px) {
  .sticky-cta {
    background: rgba(15, 10, 5, .97);
    border-top-color: rgba(232, 176, 74, .2);
    box-shadow: 0 -8px 24px -10px rgba(232, 176, 74, .12), 0 -2px 0 rgba(232, 176, 74, .08);
  }
}

/* ── LOGO: khoá đúng tỉ lệ ảnh thật (179×125) — tránh méo/cắt trên engine khác ── */
.lh .logo img,
.lf-logo img,
.drawer .logo img {
  aspect-ratio: 179 / 125;
}

.lf-logo img {
  width: 70px;
  height: 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 đen ấm --bg gần như 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;
}

/* ── 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(232, 176, 74, .12);
}

/* ── HERO: tông gold ── */
.hero {
  background:
    radial-gradient(900px 360px at 70% -60px, rgba(232, 176, 74, .16), transparent 60%),
    radial-gradient(600px 300px at 0% 120%, rgba(192, 57, 43, .10), transparent 55%),
    var(--panel-grad2);
}

/* ── FOOTER: nền đen-ấm sâu hơn ── */
.lf {
  background: linear-gradient(180deg, #17100a, #0a0603);
}

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

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

/* ── BYLINE tác giả "Bởi Biên Tập Viên Iwin" (author--3, không ảnh — chưa có avatar chính thức) ── */
.author--3 b {
  color: var(--heading);
}

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

/* ─────────────────────────────────────────
   MOBILE RESPONSIVE — iwin-win 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 {
    grid-template-columns: 1fr !important;
  }

  body {
    overflow-x: clip;
  }
}