/* ============================================================
   style-keonhacai05comco.css — theme SÁNG editorial cho keonhacai05.com.co.
   Palette XANH #1466c4 (logo com.co xanh thuần) + navy — KHÁC bản đỏ để chống footprint.
   Layout thứ 3: header single-row (rows-1) + footer lf--2.
   ============================================================ */

/* 1) TOKENS — brand XANH. WCAG (nền trắng):
     --brand2 #0f4f96 = 7.0:1 (AA heading)  ·  --accent #0d3b73 = 10:1 (AAA)
     --brand #1466c4 chỉ dùng nút (gradient tối dần đảm bảo chữ trắng ≥4.5:1). */
:root{
  --bg:#f5f8fc; --panel:#ffffff; --panel2:#eef3fa; --line:#dde5f0; --line-soft:rgba(15,25,45,.06);
  --ink:#1e2733; --mut:#5f6b7c; --heading:#132033;
  --brand:#1466c4; --brand2:#0f4f96;      /* XANH như logo keonhacai05.com.co */
  --accent:#0d3b73; --accent2:#0a2c57;    /* NAVY — điểm nhấn đậm hơn */
  --on:#ffffff;
  --panel-grad:linear-gradient(160deg,#ffffff,#f1f5fb); --panel-grad2:linear-gradient(160deg,#fafcff,#e9f0f9);
  --shadow:0 6px 18px -10px rgba(15,35,70,.14); --shadow-lg:0 16px 40px -16px rgba(15,35,70,.18);
  --brand-grad:linear-gradient(135deg,#1466c4,#0f4f96);   /* nút = gradient XANH, chữ trắng */
}

/* 2) FIX lib.css hardcode color:#fff */
.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 chữ sáng gần-trắng (nội dung chính) */
.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 nền tối hardcode → sáng */
.lh.sticky{background:rgba(255,255,255,.92)}
.lf{background:linear-gradient(180deg,#fafcff,#e9f0f9)}
@media(max-width:640px){ .sticky-cta{background:#ffffff} }

/* 4b) hover link + nút chính */
.lib a:hover{color:var(--brand2)}
.btn-main:hover{background:linear-gradient(135deg,#0f4f96,#0a3a72)}

/* 5) HEADING — IN HOA + màu (H1/H2 xanh, H3 navy) */
.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)}

/* 6) SECTION BAND — band c = tint XANH nhạt */
.sec-band{width:100%}
.sec-band--a{background:var(--panel)}
.sec-band--b{background:var(--panel2)}
.sec-band--c{background:linear-gradient(180deg,rgba(20,102,196,.06),transparent)}
.sec-band .wrap{padding:32px 16px}

/* 7) BÀI VIẾT — cột đọc 860px + ảnh 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> — ghì max-height. Bruce 2026-08-03: logo to hơn — chiều ngang ≥ nút CTA
   (~130px) → cao 80px (ratio 5:3). Mobile co 52px. Footer 60px. */
.lh .logo img{max-height:80px!important;width:auto!important}
.lf .logo img{max-height:60px!important;width:auto!important}
@media(max-width:640px){
  .lh .logo img{max-height:52px!important}
  .lf .logo img{max-height:48px!important}
}

/* 9) ẢNH CONTENT gốc 800px — KHÔNG upscale + căn giữa. min(800px,100%): desktop cap 800,
   mobile co theo màn (fix Bruce 2026-08-03: 800px cứng làm ảnh TRÀN + CẮT mép ở 390px). */
.lib img[width="800"]{max-width:min(800px,100%)!important;height:auto;margin-left:auto;margin-right:auto;display:block}

/* 10) HEADER single-row (rows-1) — logo trái · nav inline giữa · CTA phải · burger (mobile).
   Bruce 2026-08-03: menu IN HOA. */
.lh.rows-1 .lh-main{display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
.lh.rows-1 .logo{flex:0 0 auto}
.lh.rows-1 .lh-inline{display:flex;gap:15px;flex:1 1 auto;justify-content:center;flex-wrap:wrap}
.lh.rows-1 .lh-inline a{white-space:nowrap;font-weight:700;text-transform:uppercase;font-size:13.5px;letter-spacing:.03em}
.lh.rows-1 .cta{flex:0 0 auto}
.lh.rows-1 .burger{display:none}
@media(max-width:900px){
  .lh.rows-1 .lh-inline{display:none}
  .lh.rows-1 .burger{display:inline-block}
  .lh.rows-1 .cta{margin-left:auto}
}

/* 10b) HERO 2 CỘT ĐỀU (Bruce 2026-08-03, chung 2 site): lib.css hero-split=6fr/5fr lệch →
   1fr/1fr; ảnh co theo cột (giữ tỉ lệ). MOBILE (fix round 2): về 1 CỘT — ảnh full-width
   dưới text (rule desktop không guard đã đè media lib.css làm mobile kẹt 2 cột hẹp xấu). */
.hero-split{grid-template-columns:1fr 1fr}
.hero-split img[width="800"]{max-width:100%!important}
@media(max-width:1024px){
  .hero-split{grid-template-columns:1fr}
}
@media(max-width:640px){
  .h1{font-size:26px;line-height:1.28}
  .hero-in{padding:28px 16px}
  .lf{padding-bottom:88px}   /* chừa chỗ sticky-cta, không che link footer */
}

/* 10b2) WIDGET KÈO = MÀU XANH LOGO (Bruce 2026-08-03: "bảng kèo màu chủ đạo xanh dương").
   Widget chỉ nhận 5 key data-config (Primary/Secondary/Bg/Text/Foreground); tab/table-header
   do THEME đặt qua BIẾN CSS nội bộ → override thẳng biến với !important (thắng cả inline
   style widget lẫn stylesheet main.css load sau). */
.keobongvip-root{
  --theme-primary:#1466c4!important;
  --theme-primary-hover:#0f4f96!important;
  --theme-on-primary:#ffffff!important;
  --theme-highlight:#0d4c96!important;
  --theme-tab-active:#1466c4!important;
  --theme-tab-active-gradient:linear-gradient(135deg,#1466c4,#0d4c96)!important;
  --theme-tab-hover-active:#0f4f96!important;
  --theme-filter-active-bg:#1466c4!important;
  --theme-table-header-bg:#0d3b73!important;
  --theme-table-header-bg-end:#0d4c96!important;
}

/* 10c) SLIDER CHUYÊN MỤC (Bruce 2026-08-03, thay cat-grid responsive xấu): marquee vô hạn,
   card 250px cố định, pause hover; track = 2 bộ card → translateX(-50%) loop liền mạch. */
.cm-slider{overflow:hidden;margin:16px 0}
.cm-track{display:flex;width:max-content;animation:cm-marq 32s linear infinite}
.cm-track:hover{animation-play-state:paused}
.cm-track .card{flex:0 0 auto;width:250px;margin-right:16px}
@keyframes cm-marq{to{transform:translateX(-50%)}}
@media(max-width:640px){.cm-track .card{width:200px;margin-right:12px}}

/* 10e) BANNER SLIDER logo nhà cái (Bruce 2026-08-03) — marquee vô hạn, pause hover. */
/* 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). */
/* 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 */
}

/* 11) FOOTER lf--2 — brand rộng | 2 nhóm link */
.lf.lf--2 .lf-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:34px}
.lf.lf--2 .lf-linkgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:640px){
  .lf.lf--2 .lf-cols{grid-template-columns:1fr}
}

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