/*
 * style-sunwin01.css — Override palette + component riêng cho sunwin01.com.co
 * Extends lib.css (luôn load SAU lib.css).
 * Palette: nền đen ấm (ngả nâu-đỏ), brand GOLD cổ điển casino + accent ĐỎ (dải ruy-băng).
 *
 * R-41 — TRÍCH THẬT bằng Python PIL (KHÔNG dùng số có sẵn, tự verify độc lập):
 *   Nguồn quét: design/brands/sunwin/mainsite/logo/logo-cbtpcen4-310x296-7ae6bf.webp,
 *               design/brands/sunwin/mainsite/logo/logo-sp-cotyq2df-318x305-d431d0.webp,
 *               design/brands/sunwin/mainsite/banner/sun-win-cfoksiij-385x98-091cec.png
 *   Đếm pixel (loại nền trắng >235/đen <40), gom cụm theo hue:
 *     GOLD (hue 25-60°, sat>0.3) — weight 4599px → trung bình #fec559
 *     RED  (hue ≤15° hoặc ≥345°, sat>0.5) — weight 3109px → trung bình #e30002
 *   GOLD áp đảo (chữ "SUN" + wordmark "Sun.win") → --brand chính. RED (ruy-băng "win")
 *   → điểm nhấn phụ trong hero/glow, KHÔNG override --brand2 (giữ cùng-hue-gold đậm hơn,
 *   đúng pattern brand-grad của lib.css).
 *   Nền: verify _provided/resourceMainsite/sunwin.tg/bg.webp (ẢNH NỀN MAINSITE THẬT,
 *   3840×3962) → pixel áp đảo #0a0000 (đen ấm ngả nâu-đỏ) → --bg tối ấm, TUYỆT ĐỐI
 *   KHÔNG navy (R-41).
 *
 * MAP biến lib.css → giá trị sunwin:
 *   --bg          #0d0a05   (lib: #0b0e16)
 *   --panel       #1c130a   (lib: #161b27)
 *   --panel2      #241a0e   (lib: #1e2536)
 *   --line        #3a2c18   (lib: #2b3346)
 *   --line-soft   rgba(254,197,89,.08)
 *   --ink         #f2e9da   (lib: #eaeefb)
 *   --mut         #b3a58c   (lib: #9aa5bf)
 *   --brand       #fec559   (lib: #ffc83d)  — GOLD sunwin (chữ "SUN"/wordmark)
 *   --brand2      #c6921f   (lib: #e0a92a)  — GOLD đậm (accent, glow, gradient tối)
 *   --on          #241505   (lib: #15110a)  — chữ TỐI trên nút brand (nền vàng sáng)
 *   --heading     #fdf3e3   (lib: #fff)
 *   --brand-grad  linear-gradient(135deg,#ffdb8a,#c6921f)
 *   --glow        0 0 0 1px rgba(254,197,89,.35), 0 8px 26px -8px rgba(254,197,89,.45)
 *   --panel-grad  linear-gradient(160deg,#231708,#160e04)
 *   --panel-grad2 linear-gradient(160deg,#2b1d0c,#1a1006)
 *
 * Header mã h2-center-sticky (rows-2) — giống rikvip01: lib.css
 * `.lh.a-center .lh-main{justify-content:center}` tự căn giữa ĐÚNG desktop lẫn mobile ở
 * mức base (không nằm trong media query) nên KHÔNG cần override non-media riêng —
 * tránh bẫy specificity đè media query đã gặp ở gem88-vin.
 */

:root {
  /* === NỀN & PANEL (đen ấm, ngả nâu-đỏ — R-41 verify từ bg.webp mainsite thật) === */
  --bg:           #0d0a05;
  --panel:        #1c130a;
  --panel2:       #241a0e;
  --line:         #3a2c18;
  --line-soft:    rgba(254, 197, 89, .08);

  /* === CHỮ === */
  --ink:          #f2e9da;
  --mut:          #b3a58c;
  --heading:      #fdf3e3;

  /* === BRAND GOLD + accent đỏ === */
  --brand:        #fec559;
  --brand2:       #c6921f;
  --on:           #241505;
  --brand-grad:   linear-gradient(135deg, #ffdb8a, #c6921f);
  --glow:         0 0 0 1px rgba(254,197,89,.35), 0 8px 26px -8px rgba(254,197,89,.45);

  /* === PANEL GRADIENT (tông nâu-vàng thay navy) === */
  --panel-grad:   linear-gradient(160deg, #231708, #160e04);
  --panel-grad2:  linear-gradient(160deg, #2b1d0c, #1a1006);

  /* === 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:         #fbbf24;
}

/* ── NỀN TRANG: đen ấm + glow gold/đỏ nhẹ ở đỉnh (dark-bg technique, KHÔNG navy) ── */
.lib {
  background:
    radial-gradient(900px 420px at 70% -110px, rgba(254,197,89,.10), transparent 60%),
    radial-gradient(700px 480px at -5% 5%, rgba(227,0,2,.06), transparent 55%),
    var(--bg);
}

/* ── HEADER STICKY: nền frosted đen-vàng (override lib default navy) ── */
.lh.sticky {
  background: rgba(13, 10, 5, .90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(254, 197, 89, .18);
}

/* ── DRAWER: nền đen-vàng (override lib default panel) ── */
.drawer {
  background: linear-gradient(180deg, #1c130a, #0d0a05);
}

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

/* ── STICKY CTA: nền đen-vàng thay navy ── */
@media (max-width: 640px) {
  .sticky-cta {
    background: rgba(13, 10, 5, .97);
    border-top-color: rgba(254, 197, 89, .22);
    box-shadow: 0 -8px 24px -10px rgba(254, 197, 89, .12), 0 -2px 0 rgba(254, 197, 89, .08);
  }
}

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

.lh .lh-main .logo img { max-height: 52px; }
.lf-logo img { width: 84px; height: auto; }
.drawer .logo img { max-height: 44px; }

/* ── NÚT CTA-main: GOLD (mặc định lib.css đã gold — nhắc lại tường minh theo brand-grad
   riêng của sunwin, chữ TỐI trên nền sáng — contrast tốt) ── */
.btn-main {
  background: var(--brand-grad);
  color: var(--on);
  border-color: transparent;
  box-shadow: 0 6px 18px -6px rgba(254, 197, 89, .5);
}

.btn-main:hover {
  background: linear-gradient(135deg, #ffe6ab, #d9a530);
  box-shadow: 0 0 0 1px rgba(254,197,89,.55), 0 12px 30px -8px rgba(254,197,89,.6);
  transform: translateY(-2px);
}

.lib a.btn-main,
.lib a.btn-main:hover {
  color: var(--on);
}

/* btn outline hover: chữ gold + nền gold 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(254,197,89,.10);
}

/* ── HEADING: gold chủ đạo, H3 điểm nhấn đỏ nhẹ (nod tới ruy-băng "win") ── */
.h2, .read h2 {
  color: var(--heading);
}
.h2 {
  border-left-color: var(--brand);
  background: linear-gradient(90deg, rgba(254,197,89,.10), transparent 40%);
}
.read h3, .box h3, .card .t, .subcards .box h3 {
  color: var(--brand);
}

/* H1: gradient GOLD sáng → GOLD đậm (đồng bộ brand-grad, không đổi hue giữa chừng) */
.h1 {
  color: var(--brand);
  background: linear-gradient(92deg, #ffe6ab 0%, #fec559 45%, #c6921f 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(254,197,89,.16));
}

/* ── HERO: tông vàng-đen ấm, điểm nhấn đỏ nhẹ (ruy-băng "win") ── */
.hero {
  background:
    radial-gradient(900px 360px at 75% -60px, rgba(254,197,89,.20), transparent 60%),
    radial-gradient(600px 300px at 0% 120%, rgba(227,0,2,.10), transparent 55%),
    var(--panel-grad2);
}

/* ── CARD HOVER: viền gold ── */
.card:hover {
  border-color: rgba(254,197,89,.4);
}

.box:hover {
  border-color: rgba(254,197,89,.35);
}

.gcard:hover {
  border-color: rgba(254,197,89,.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(254,197,89,.5);
}

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

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

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

/* ── STEPS: đầu số gold, chữ tối ── */
.steps li::before {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 4px 12px -4px rgba(254,197,89,.6);
}

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

/* ── PAGER ── */
.pager a:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(254,197,89,.06);
}

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

/* ── FOOTER: nền đen-vàng sâu hơn ── */
.lf {
  background: linear-gradient(180deg, #170f06, #0a0603);
}

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

.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(--brand);
}

/* ── CTA-BLOCK: tông vàng ── */
.cta-block {
  background:
    radial-gradient(400px 120px at 50% -20px, rgba(254,197,89,.16), transparent),
    var(--panel-grad2);
  border-color: rgba(254,197,89,.25);
}

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

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

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

/* ── ARCHIVE grid-3 (archiveB) — đảm bảo card ĐỒNG CỠ, KHÔNG so le ── */
/*
  lib.css đã có .grid-3{grid-template-columns:repeat(3,1fr);gap:14px}.
  Thêm: card ảnh cùng aspect-ratio → cùng chiều cao, không so le kiểu masonry.
*/
.arc-grid-3 .card .thumb,
.grid-3 .card .thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.arc-grid-3 .card .thumb img,
.grid-3 .card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── ARCHIVE B (list) — viền gold nhẹ khi hover (dùng nếu có arc-row phụ) ── */
.arc-row:hover {
  border-color: rgba(254,197,89,.35);
}

/* ── BADGE 18+ trên nền tối: thêm nền trắng bo tròn để glyph đen không biến mất
   (đã gặp cùng lỗi go8-8/rikvip01 với CÙNG file asset dùng chung
   design/shared/badge/18plus.webp) ── */
.lf-badges img[alt^="18+"] {
  background: #fff;
  border-radius: 8px;
  padding: 3px;
}

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

/* ── HOMEPAGE (D1) — 3 component nhỏ chưa có trong lib.css ─────────────── */

/* SIDEBAR trang chủ (Bài mới nhất + Banner dọc) — GIỐNG .rail (sticky, gap) NHƯNG KHÔNG
   dùng thẳng class "rail" vì lib.css có rule ".rail{display:none}" ở ≤640px (thiết kế cho
   TOC mục lục trong bài viết — ẩn hợp lý vì TOC dư thừa trên mobile). Sidebar trang chủ
   chứa NỘI DUNG THẬT (3 thẻ "Bài mới nhất" + banner CTA) — KHÔNG được biến mất trên mobile
   (đa số traffic là mobile — feedback_mobile_first). ".home-side" = ".rail" trên desktop,
   LUÔN hiển thị + stack dưới main trên mobile (không có rule display:none nào đè).
   Bug đã bắt bằng Playwright thật (Chrome CLI --screenshot cho kết quả sai/gây nhiễu). */
.home-side { position: sticky; top: 80px; display: grid; gap: 16px; align-self: start; }
@media (max-width: 1024px) { .home-side { position: static; } }

/* KHO GAME (2.5) — lưới tĩnh 4 ô, KHÔNG carousel (Bruce chỉ định), 4→2→1 cột */
.kho-game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 12px 0; }
@media (max-width: 900px) { .kho-game-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kho-game-grid { grid-template-columns: 1fr; } }

/* SIDEBAR "Bài mới nhất" — mCardList-style: ảnh trái nhỏ + tiêu đề/mô tả phải */
.side-list { display: grid; gap: 10px; }
.side-item {
  display: flex; gap: 10px; background: var(--panel-grad); border: 1px solid var(--line);
  border-radius: var(--rad); padding: 9px; transition: border-color var(--ease), box-shadow var(--ease);
}
.side-item:hover { border-color: rgba(254, 197, 89, .4); box-shadow: var(--shadow); }
.side-item .thumb { flex: 0 0 74px; width: 74px; height: 74px; border-radius: 8px; overflow: hidden; background: var(--panel2); }
.side-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.side-item .body { min-width: 0; }
.side-item .t {
  font-weight: 700; color: var(--heading); font-size: 13px; line-height: 1.35; margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.side-item .d {
  color: var(--mut); font-size: 11.5px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

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

  .lh .lh-main .logo img {
    max-height: 38px;
  }

  .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. */
}