/* ============================================================
   style-nowgoalwtf.css — theme SÁNG editorial (Bruce chốt redesign 2026-07-30,
   bỏ hẳn nền tối/navy #0b0e14 cũ). File PER-SITE, load SAU lib.css trong head()
   -> cùng specificity thì rule đứng SAU (nguồn này) thắng, không cần !important.
   Đây là NGUỒN THẬT — _shell.py copy_assets() copy file này vào dist/, KHÔNG còn
   sinh chuỗi _BRAND_CSS hardcode trong .py nữa (tránh 2 nguồn lệch nhau).
   ============================================================ */

/* 1) TOKENS — nền sáng editorial. Giữ tông gold đã trích PIL trước đó nhưng đậm
   hơn để đủ tương phản trên nền trắng. ĐÃ ĐO WCAG (công thức relative luminance):
     --brand  #99621a / nền trắng  = 5.11:1  (PASS AA text thường ≥4.5:1)
     --brand2 #7a4d15 / nền trắng  = 7.24:1  (PASS AA, gần AAA)
     --ink    #2a2f3b / nền trắng  = 13.4:1  (PASS AAA)
     --mut    #6b7280 / nền trắng  = 4.83:1  (PASS AA, sát ngưỡng — chỉ dùng cho
                                              text phụ: breadcrumb/footer/caption) */
:root{
  --bg:#f6f7fb; --panel:#ffffff; --panel2:#f0f1f6; --line:#e3e6ef; --line-soft:rgba(20,20,30,.06);
  --ink:#2a2f3b; --mut:#6b7280; --heading:#1a1f2b;
  --brand:#e8202c; --brand2:#c41722;      /* ĐỎ như logo (chữ NOWGOAL #f84040 -> đậm đủ WCAG 4.5:1) */
  --accent:#1860b8; --accent2:#164f9e;    /* XANH DƯƠNG như logo (đại bàng) — điểm nhấn */
  --on:#ffffff;
  --panel-grad:linear-gradient(160deg,#ffffff,#f4f5f9); --panel-grad2:linear-gradient(160deg,#fbfbfd,#eef0f6);
  --shadow:0 6px 18px -10px rgba(30,30,50,.12); --shadow-lg:0 16px 40px -16px rgba(30,30,50,.16);
  /* 2 điểm dừng gradient ĐỀU ≥4.5:1 với chữ trắng --on (đo: #a06a1a=4.59:1, #7a4d15=7.24:1) —
     lần đầu dùng #b8791f cho điểm sáng chỉ đạt 3.63:1 (fail chữ thường), đã đậm lại. */
  --brand-grad:linear-gradient(135deg,#e8202c,#c41722);   /* nút = gradient ĐỎ, chữ trắng (đo #c41722=6:1 PASS) */
}

/* 2) FIX 6 chỗ lib.css HARDCODE color:#fff (KHÔNG qua biến -> trắng-trên-trắng nếu
   bỏ sót). .cmt-av GIỮ NGUYÊN ở lib.css (chữ initials trên avatar nền gradient
   brand, không phải chữ trên nền trang -> không cần đổi). */
.gcard .nm{color:var(--heading)}
.acc summary{color:var(--heading)}
.faq summary{color:var(--heading)}
.author b{color:var(--heading)}
.rv-top b{color:var(--heading)}
.cmt-name{color:var(--heading)}

/* 3) FIX THÊM — hardcode chữ SÁNG gần-trắng (viết sẵn cho nền tối cũ, không qua
   biến) phát hiện khi grep lại toàn bộ lib.css. Đây LÀ phần chữ nội dung chính
   (sapo/đoạn văn bài viết/accordion/FAQ/TOC) — ảnh hưởng lớn nếu bỏ sót vì gần
   như mọi trang đều dùng .sapo và .read p: */
.sapo{color:var(--ink)}
.acc .acc-body{color:var(--ink)}
.faq .a{color:var(--ink)}
.toc a{color:var(--ink)}
.read p{color:var(--ink)}

/* 4) FIX 3 chỗ NỀN TỐI hardcode (không qua biến) phát hiện bằng MẮT sau khi
   render (không grep ra vì không phải "color:#fff") — nếu bỏ sót thì header
   sticky/footer/thanh CTA mobile vẫn ĐEN dù mọi token khác đã đổi sáng, và chữ
   var(--ink) (giờ tối) rơi vào nền tối đó -> tối-trên-tối: */
.lh.sticky{background:rgba(255,255,255,.88)}
.lf{background:linear-gradient(180deg,#fbfbfd,#eef0f6)}
@media(max-width:640px){
  .sticky-cta{background:#ffffff}
}

/* 4b) hover link + hover nút chính hardcode màu SÁNG (#ffdf86 / #ffe27a) chỉ hợp
   nền tối cũ — trên nền trắng gần như trắng-trên-trắng khi hover. Đổi tối hơn,
   vẫn giữ hiệu ứng "sáng lên khi hover" nhưng theo hướng đậm hơn thay vì nhạt hơn. */
.lib a:hover{color:var(--brand2)}
.btn-main:hover{background:linear-gradient(135deg,#c41722,#9e1119)}

/* 5) HEADING — IN HOA + màu đặc biệt (không đen/trắng trơn) */
.h1,.h2,h3,.read h2,.read h3{text-transform:uppercase;letter-spacing:.02em}
.h1{color:var(--brand2);background:none}
.h2,.read h2{color:var(--brand2)}
.read h3{color:var(--accent)}   /* xanh dương — kết hợp hài hoà với đỏ */

/* 6) SECTION BAND — băng full-width xen kẽ màu (C1/D1 tự bọc mỗi H2/section bằng
   <section class="sec-band sec-band--a|b|c"> luân phiên; B1 chỉ cấp CSS). */
.sec-band{width:100%}
.sec-band--a{background:var(--panel)}
.sec-band--b{background:var(--panel2)}
.sec-band--c{background:linear-gradient(180deg,rgba(24,96,184,.06),transparent)}
.sec-band .wrap{padding:32px 16px}

/* 7) BÀI VIẾT / CONTENT — cột đọc ĐỒNG NHẤT + ảnh CĂN GIỮA
   (fix Bruce 2026-07-30: trên ~900 dưới rộng hơn 1200 + ảnh căn trái).
   .read nằm trong .wrap(1200) -> ghì .read về bề rộng đọc 860px, căn giữa,
   áp cho MỌI section (top=bottom đồng nhất). Ảnh block + margin auto = căn giữa. */
.read{max-width:860px;margin-left:auto;margin-right:auto}
.read img,.read figure{display:block;max-width:100%;width:auto!important;height:auto;margin:18px auto;float:none}
.read figure img{margin:0 auto}

/* 8) LOGO <img> — FIX phình 200px: lib.css `.lib img{height:auto!important}` đè inline
   height:32px (!important thắng inline). Dùng max-height ghì lại (max-height không bị
   height:auto đè vì là property khác). Header cao 269px -> ~54px. */
/* Bruce 2026-08-03: logo to hơn (wordmark ngang 4:1 → cao 56 = rộng ~224px) + footer 44 */
.lh .logo img{max-height:56px!important;width:auto!important}
.lf .logo img{max-height:44px!important;width:auto!important}
@media(max-width:640px){
  .lh .logo img{max-height:44px!important}
  .lf .logo img{max-height:40px!important}
}

/* Bruce 2026-08-03: menu IN HOA */
.lh-nav a{text-transform:uppercase;font-weight:700;font-size:13.5px;letter-spacing:.03em}

/* 9) ẢNH CONTENT (banner gốc 800px) — KHÔNG upscale + căn GIỮA. Nhắm chính xác img[width="800"]
   (ảnh content home/static/blog), KHÔNG đụng logo/avatar(64)/widget(có class). Chặn cả inline
   width:100% (gây phóng lên rộng cột 1200/860 -> vỡ). Bruce 2026-07-30. */
.lib img[width="800"]{max-width:800px!important;margin-left:auto;margin-right:auto;display:block}

/* ==== BANNER SLIDER + CATFISH (spec chuẩn Bruce 2026-08-03) ==== */
/* 10e) BANNER SLIDER logo nhà cái (Bruce 2026-08-03) — marquee vô hạn, pause hover.
   Track = 2 bộ item → translateX(-50%) loop liền mạch. */
/* Khung GIỚI HẠN 1080px căn giữa (Bruce 2026-08-03 round 2) + logo to 76px. */
.bslider{overflow:hidden;padding:16px 0;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;max-width:1080px;margin:18px auto;box-shadow:var(--shadow)}
.bs-track{display:flex;align-items:center;width:max-content;animation:bs-marq 26s linear infinite}
.bs-track:hover{animation-play-state:paused}
.bs-item{flex:0 0 auto;margin-right:22px;line-height:0}
.bs-item img{height:96px!important;width:96px!important;object-fit:contain;border-radius:16px;box-shadow:var(--shadow)}
@keyframes bs-marq{to{transform:translateX(-50%)}}
@media(max-width:1120px){.bslider{margin-inline:16px}}
@media(max-width:640px){.bs-item{margin-right:14px}.bs-item img{height:64px!important;width:64px!important}}

/* 10f) CATFISH banner sticky đáy (desktop; ≤640 ẩn — mobile đã có sticky-cta).
   2 khối giovang+gem88 click cả khối, tracking data-link-id, nút đóng ✕. */
/* Desktop: lưới 2x2 (Bruce) · nền TRONG SUỐT, vùng trống không chặn click */
.catfish{position:fixed;left:0;right:0;bottom:0;z-index:960;display:grid;
  grid-template-columns:repeat(2,minmax(0,430px));gap:8px;justify-content:center;
  padding:6px 10px;background:transparent;pointer-events:none}
.catfish .cf-item{line-height:0;min-width:0;pointer-events:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.catfish .cf-item img{width:100%!important;height:auto!important;border-radius:8px;display:block}
.cf-close{position:absolute;right:8px;top:-34px;background:rgba(15,18,24,.72);pointer-events:auto;
  border:0;color:#fff;font-size:14px;width:30px;height:30px;border-radius:50%;cursor:pointer}
.cf-close:hover{background:rgba(15,18,24,.95)}
@media(min-width:641px){.lf{padding-bottom:150px}}   /* chừa chỗ catfish 2x2 không che footer */
@media(max-width:640px){
  /* Bruce: mobile CÓ catfish — 4 banner xếp DỌC (1 cột 4 dòng); sticky-cta do JS nhường chỗ */
  /* catfish nằm NGAY TRÊN 2 nút sticky-cta (cao ~62px) — không che nút (Bruce) */
  .catfish{grid-template-columns:1fr;gap:6px;padding:4px 8px;bottom:62px}
  .cf-close{top:-32px;right:6px}
  .lf{padding-bottom:300px}   /* 4 dòng banner + 2 nút sticky */
}


/* ==== HERO LIVE-FRAME (Bruce 2026-08-03): thay ảnh hero tĩnh = khung preview livestream.
   Click toàn khung -> giovang (tracking). JS SSE live-score.keobongvip.digital điền trận
   đang LIVE realtime; không có trận -> dòng mời xem mặc định. ==== */
.lvframe{position:relative;display:block;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);line-height:0}
.lvframe img{width:100%!important;height:auto!important;display:block;filter:brightness(.72) saturate(1.05)}
.lvf-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.6) 80%)}
.lvf-badge{position:absolute;top:12px;left:12px;background:#e01e28;color:#fff;font:800 12px/1 inherit;
  padding:6px 11px;border-radius:999px;letter-spacing:.07em;animation:lvf-blink 1.4s infinite}
@keyframes lvf-blink{50%{opacity:.5}}
.lvf-ch{position:absolute;top:13px;right:14px;color:#fff;font-size:12px;font-weight:800;line-height:1;
  letter-spacing:.08em;opacity:.92;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.lvf-play{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);
  padding:13px 30px;border-radius:11px;background:var(--brand-grad);color:#fff;
  font-size:16px;font-weight:800;letter-spacing:.02em;line-height:1;white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.4);animation:lvf-pulse 1.9s infinite}
@keyframes lvf-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 24px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.lvframe:hover .lvf-play{filter:brightness(1.15)}
.lvf-bar{position:absolute;left:0;right:0;bottom:0;padding:13px 15px;color:#fff;font-size:14px;
  font-weight:700;line-height:1.4;text-align:left;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.lvf-bar b{color:#ffd7d9}
@media(max-width:640px){.lvf-play{padding:10px 20px;font-size:13.5px}.lvf-bar{font-size:12.5px;padding:10px 12px}}

/* LVF SCOREBOARD (Bruce 2026-08-03): thumbnail động — logo 2 đội + tỷ số (live) / VS + giờ
   (sắp đá) từ API bảng kèo, JS thêm .lvf-board + class has-board. */
.lvf-board{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);display:flex;
  align-items:center;gap:26px;pointer-events:none;line-height:1.2}
.lvf-side{display:flex;flex-direction:column;align-items:center;gap:8px;width:126px}
.lvf-side img{width:58px!important;height:58px!important;object-fit:contain;background:#fff;
  border-radius:50%;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.lvf-side em{font-style:normal;color:#fff;font-weight:800;font-size:13.5px;text-align:center;
  text-shadow:0 1px 6px rgba(0,0,0,.85)}
.lvf-mid{display:flex;flex-direction:column;align-items:center;gap:5px;color:#fff}
.lvf-score,.lvf-vs{font-size:30px;font-weight:900;letter-spacing:.05em;text-shadow:0 2px 10px rgba(0,0,0,.85)}
.lvf-mid i{font-style:normal;font-size:12.5px;font-weight:700;opacity:.95;text-shadow:0 1px 5px rgba(0,0,0,.8)}
.lvframe.has-board .lvf-play{top:auto;bottom:54px;transform:translateX(-50%);padding:10px 22px;font-size:14px}
@media(max-width:640px){
  .lvf-board{gap:14px}
  .lvf-side{width:88px}
  .lvf-side img{width:44px!important;height:44px!important;padding:4px}
  .lvf-side em{font-size:11.5px}
  .lvf-score,.lvf-vs{font-size:22px}
  .lvframe.has-board .lvf-play{bottom:42px;padding:8px 16px;font-size:12.5px}
}

/* HOTBAR — 2 CARD trận hot kiểu DARK-SPORT (mẫu Bruce 2026-08-03 v3): nền ảnh sân tối +
   badge HOT + bảng tỷ số/VS + footer kênh + nút Cược ngay (gem88). Data JS tự đổ. */
.hotbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 16px}
.hotbar:empty{display:none}
.hb-card{position:relative;border-radius:16px;overflow:hidden;color:#fff;
  background:#12151d url('/assets/img/home/live-poster.webp') center/cover;box-shadow:var(--shadow-lg)}
.hb-card::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,18,.85),rgba(10,12,18,.55) 45%,rgba(10,12,18,.85))}
.hb-main{position:relative;display:block;padding:12px 14px 10px;color:#fff;text-decoration:none}
.hb-main:hover{color:#fff}
.hb-head{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:10px}
.hb-lg{display:flex;align-items:center;gap:7px;min-width:0;font-weight:800}
.hb-lg img{width:20px!important;height:20px!important;object-fit:contain;border-radius:4px;background:#fff}
.hb-lg b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-hot{background:linear-gradient(135deg,#ff8a00,#e01e28);font-size:10.5px;font-weight:900;
  padding:3px 9px;border-radius:999px;letter-spacing:.04em;white-space:nowrap}
.hb-time{margin-left:auto;font-weight:800;white-space:nowrap;font-size:13.5px}
.hb-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.hb-team{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.hb-team img{width:52px!important;height:52px!important;object-fit:contain;border-radius:50%;
  background:rgba(255,255,255,.12);padding:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hb-team em{font-style:normal;font-weight:800;font-size:13px;text-align:center;line-height:1.25;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-mid{display:flex;flex-direction:column;align-items:center;gap:6px}
.hb-score{background:rgba(8,10,14,.8);border-radius:12px;padding:9px 18px;font-weight:900;
  font-size:21px;letter-spacing:.05em;line-height:1;white-space:nowrap}
.hb-score i{font-style:normal;opacity:.5}
.hb-live{font-size:11px;font-weight:800;color:#ff5d64;letter-spacing:.06em}
.hb-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px;background:rgba(8,10,14,.6);backdrop-filter:blur(3px)}
.hb-ch{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:#fff}
/* !important: lib.css `.lib a{color:brand}` specificity cao hơn -> chữ đỏ trên nút đỏ (Bruce) */
.hb-bet{background:var(--brand-grad);color:#fff!important;font-weight:800;font-size:12.5px;
  padding:8px 16px;border-radius:9px;text-decoration:none;white-space:nowrap}
.hb-bet:hover{filter:brightness(1.15);color:#fff!important}
.hb-main,.hb-main:hover,.hb-ch{color:#fff!important}
@media(max-width:760px){.hotbar{grid-template-columns:1fr}}