/* style-go88im.css — per-site override cho go88.com.im
   KHÔNG viết lại component CSS — mọi component dùng design/library/lib.css (load TRƯỚC file này).
   Chỉ: đặt :root brand palette (R-41 — trích THẬT bằng PIL, KHÔNG mặc định navy) + tinh chỉnh nhỏ.
   ============================================================

   R-41 — TRÍCH MÀU THẬT (PIL đếm pixel, loại nền trắng/đen trước khi phân cụm theo hue):
   Nguồn quét (4 ảnh + 1 screenshot mainsite thật):
     - design/brands/go88/logo.webp               (2467×1035, RGBA — logo GO88 sạch, KHÔNG domain text)
     - design/brands/go88/go88-logo.webp           (1024×493)
     - design/brands/go88/mainsite/banner/go88-cong-game-bai-doi-thuong-uy-tin-800x400-f4bf6f.webp
     - design/brands/go88/mainsite/banner/go88-khuyen-mai-va-vip-800x400-0592ed.webp
     - _provided/resourceMainsite/go88.tw/screencapture-go88-tax-2026-06-13-16_23_34.png (fullpage, 3024×28800)

   Kết quả phân cụm (loại pixel l<0.08 / l>0.92, sat<0.35):
     GOLD (hue 30–60°)  n=83067 px  avg=#c9a42c   ← áp đảo trên CẢ 5 ảnh (logo/banner/mainsite)
     RED  (hue ≤12/≥350°) n=17419 px avg=#640d07  ← phụ (dải ruy-băng/accent), KHÔNG áp đảo
     Nền: tỉ lệ pixel l<0.08 (đen) = 83.2% toàn ảnh mainsite fullpage; avg màu nền
          (chỉ các pixel l<0.08) = #0e0904 → ĐEN ẤM (ngả đỏ-nâu nhẹ), TUYỆT ĐỐI KHÔNG navy.

   → --brand chọn GOLD (áp đảo, đúng tông "vàng gold" go88 quen thuộc), brightened lên mức UI
     (H≈46°, S 0.83, V 1.0) từ avg #c9a42c → #ffce2b. --brand2 = tông vàng đậm hơn cùng hue
     (brand-grad 2 sắc độ, đúng convention lib.css) → #d19c15.
   RED (#640d07 avg, brightened → #990c11) là accent PHỤ (hero glow/hover nhấn), KHÔNG override
   --brand2 core (giữ đúng tông 1-hue của brand-grad, tránh xung đột màu nút CTA).
   Nền tối ĐEN ẤM xác nhận qua ảnh mainsite thật → --bg:#0e0904 (không dùng --bg mặc định
   #0b0e16 hơi xanh của lib.css — site này đúng ra ngả nâu-đỏ ấm hơn 1 chút).
*/

:root{
  --brand:#ffce2b;   /* GOLD — trích từ logo+banner+mainsite go88 (avg #c9a42c, brightened cho UI) */
  --brand2:#d19c15;  /* GOLD đậm hơn, cùng hue — dùng cho brand-grad/hover */
  --heading:#fff;    /* heading trắng — tương phản tốt trên nền đen ấm */
  --bg:#0e0904;      /* ĐEN ẤM (ngả đỏ-nâu nhẹ) — verify PIL screencapture mainsite go88.tw thật */
  --accent2:#990c11; /* RED phụ (brightened từ #640d07) — dùng CHỌN LỌC cho glow/hover nhấn, KHÔNG phải brand2 core */

  /* ── FIX GATE Bruce (2026-07-27): vấn đề gốc — style-go88im.css CHỈ override --bg, KHÔNG
     override --panel/--panel-grad/--panel-grad2/--line → MỌI block (.box/.card/.tbl/.acc/.rv…)
     vẫn ăn navy mặc định lib.css (#161b27 / panel-grad #1b2233→#141925) lệch hẳn tông gold-ấm.
     Override toàn bộ 4 biến "panel family" sang tông vàng-ấm/kính mờ — áp dụng TỰ ĐỘNG cho mọi
     component dùng var(--panel-grad) (.box/.card/.tbl/.acc details/.rv/.toc/.author/.steps li/
     .faq details) mà KHÔNG cần sửa lib.css (đúng convention "chỉ đặt token, không viết lại component"). */
  --panel: rgba(32,23,8,.55);
  --panel2: rgba(48,34,12,.5);
  --panel-grad: linear-gradient(155deg, rgba(255,206,43,.10), rgba(20,14,4,.55));
  --panel-grad2: linear-gradient(160deg, rgba(40,28,10,.92), rgba(16,10,4,.96)); /* NEW — header/hero nền phụ, không có trong lib.css mặc định override */
  --line: rgba(255,206,43,.18);
}

/* Heading: giữ nguyên hành vi lib.css (.h1 trắng, .read h2 trắng, .read h3 vàng-brand) —
   KHÔNG áp dụng override "mọi heading = vàng" như go88-win.com.co (giữ tương phản đọc bài tốt hơn
   trên nền đen ấm site này, tránh vàng-trên-vàng ở card/box có border brand). */

/* ── Dọn nốt các chỗ HARDCODE màu xanh dương/navy trong lib.css (không đi qua biến --panel*) ──
   Đây là nguồn "lệch tông" thứ 2 ngoài --panel: .lib (nền toàn trang) và .hero có 1 lớp radial-gradient
   xanh dương CỨNG (rgba(57,120,255,…)) không đổi theo brand; .lf/.lh.sticky/.sticky-cta/.drawer cũng
   hardcode hex navy thay vì dùng biến. Ghi đè lại đúng CÙNG cấu trúc (chỉ đổi màu), KHÔNG đổi layout. */
.lib{background:
    radial-gradient(900px 420px at 85% -120px,rgba(255,206,43,.09),transparent 60%),
    radial-gradient(700px 500px at -10% 0,rgba(153,12,17,.10),transparent 55%),
    var(--bg)}
.hero{background:
    radial-gradient(900px 360px at 80% -60px,rgba(255,206,43,.24),transparent 60%),
    radial-gradient(600px 300px at 0% 120%,rgba(153,12,17,.14),transparent 55%),
    var(--panel-grad2)}
.lh.sticky{background:rgba(20,14,4,.88)}
.lf{background:linear-gradient(180deg,#1c1207,#0e0904)}
.sticky-cta{background:rgba(20,14,4,.97)}
/* .drawer mặc định dùng var(--panel) — nay --panel là rgba(...,.55) TRONG SUỐT (dùng cho .gblock kính
   mờ) → nếu để nguyên, menu mobile full-màn-hình sẽ bị "xuyên thấu" đọc chữ chồng lem nội dung phía
   sau. Ép ĐẶC lại riêng cho .drawer (không đụng biến --panel dùng chung). */
.drawer{background:#150e06}

/* ── Khối "liquid glass" — dùng cho content block full-width Section 2/4 (thay .subcards 3 cột chật) ── */
.gblock{ position:relative; border-radius:18px; padding:22px 24px;
  background:linear-gradient(155deg, rgba(255,206,43,.09), rgba(20,14,4,.42));
  backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(255,206,43,.16);
  box-shadow:0 10px 34px -14px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05); }
/* Block chẵn = tông đỏ-ấm xen kẽ (nhịp thị giác, tránh 1 dải màu đơn điệu 8-11 khối liên tiếp) */
.gblock.alt{ background:linear-gradient(155deg, rgba(209,60,0,.10), rgba(20,10,4,.45));
  border-color:rgba(255,120,40,.18); }
.gblock + .gblock{ margin-top:20px; }
.gblock h3{ margin-top:0 }
@media(max-width:640px){ .gblock{ padding:18px 16px; border-radius:14px } }

/* ── H1/H2/H3 — UPPERCASE + gradient gold (Bruce: h2/h3 cùng màu H1) ── */
.hero .h1, .h1, .h2, .h3, h2, h3{ text-transform:uppercase; letter-spacing:.4px; }
.hero .h1, .h1, .h2, .h3, h2, h3,
.read h2, .read h3, .gblock h2, .gblock h3, .comments-h{
  background:linear-gradient(92deg,#ffe27a,#ffce2b,#ff9d2b);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ── Khối 💬 Bình luận — FULL-WIDTH, dàn đều 2 cột desktop (mobile 1 cột, mặc định block) ──
   Mỗi .cmt top-level đã tự chứa reply lồng bên trong (.cmt-reply là CON của .cmt-body cùng phần tử) —
   nên gộp thành 1 ô lưới/1 thẻ không cần đổi cấu trúc HTML sinh từ gen-comments.py. */
.comments .cmt{ background:rgba(255,255,255,.03); border:1px solid var(--line-soft);
  border-top:0!important; border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.comments .cmt:first-of-type{ border-top:0!important; }
/* Bruce: comment 1 HÀNG full-width (bỏ 2 cột) */
.comments{ display:block; }
.comments .cmt{ margin-bottom:14px; }

/* ── FIX Bruce: link "bài viết của tác giả" trong author box (E-E-A-T) ── */
.author-more { margin-top: 8px; }
.author-more a { color: var(--brand); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.author-more a:hover { text-decoration: underline; }

/* ── FIX Bruce (v3) ── */
/* Menu CĂN GIỮA + UPPERCASE */
.lh-nav{ justify-content:center; }
.lh nav a{ text-transform:uppercase; letter-spacing:.4px; }
/* Ảnh content GIỮ 800×400 gốc — KHÔNG upscale (cap 800px, CĂN GIỮA) */
/* !important để thắng inline style="margin:10px 0" của generator (nếu không sẽ căn trái) */
.gblock img, .box img, .read figure img, .read img, figure img{
  max-width:800px; width:100%; height:auto; display:block;
  margin:12px auto !important; }