


:root{
  --bg:#f7f8fa; --panel:#ffffff; --panel2:#f1f2f5; --line:#e4e6ec; --line-soft:rgba(20,20,30,.06);
  --ink:#24272e; --mut:#6a707c; --heading:#191c22;
  --brand:#d81f26; --brand2:#a3161c;      
  --accent:#22252b; --accent2:#3a3f4a;    
  --on:#ffffff;
  --panel-grad:linear-gradient(160deg,#ffffff,#f3f4f7); --panel-grad2:linear-gradient(160deg,#fbfbfc,#eef0f4);
  --shadow:0 6px 18px -10px rgba(30,30,40,.12); --shadow-lg:0 16px 40px -16px rgba(30,30,40,.16);
  --brand-grad:linear-gradient(135deg,#d81f26,#a3161c);   
}


.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)}


.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)}


.lh.sticky{background:rgba(255,255,255,.9)}
.lf{background:linear-gradient(180deg,#fbfbfc,#eef0f4)}
@media(max-width:640px){ .sticky-cta{background:#ffffff} }


.lib a:hover{color:var(--brand2)}
.btn-main:hover{background:linear-gradient(135deg,#a3161c,#7d1015)}


.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)}   


.sec-band{width:100%}
.sec-band--a{background:var(--panel)}
.sec-band--b{background:var(--panel2)}
.sec-band--c{background:linear-gradient(180deg,rgba(216,31,38,.05),transparent)}
.sec-band .wrap{padding:32px 16px}


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


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


.lib img[width="800"]{max-width:min(800px,100%)!important;height:auto;margin-left:auto;margin-right:auto;display:block}


.lh.a-center .lh-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.lh.a-center .lh-main .burger{grid-column:1;justify-self:start}
.lh.a-center .lh-main .logo{grid-column:2;justify-self:center}
.lh.a-center .lh-main .cta{grid-column:3;justify-self:end}
.lh.a-center .lh-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 20px}


.lh .lh-nav{background:var(--brand-grad);border-top:0}
.lh .lh-nav a{color:#fff;text-transform:uppercase;font-weight:700;font-size:13.5px;letter-spacing:.03em}
.lh .lh-nav a:hover{color:#ffd9db}


.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){
  
  .lh.a-center .lh-nav{display:none}
  
  .lh.a-center .lh-main .burger{order:0;grid-row:1;grid-column:1}
  .lh.a-center .lh-main .logo{grid-row:1}
  .h1{font-size:26px;line-height:1.28}
  .hero-in{padding:28px 16px}
  .lf{padding-bottom:88px}   
}


.keobongvip-root{
  --theme-primary:#d81f26!important;
  --theme-primary-hover:#a3161c!important;
  --theme-on-primary:#ffffff!important;
  --theme-highlight:#8f1419!important;
  --theme-tab-active:#d81f26!important;
  --theme-tab-active-gradient:linear-gradient(135deg,#d81f26,#a3161c)!important;
  --theme-tab-hover-active:#a3161c!important;
  --theme-filter-active-bg:#d81f26!important;
  --theme-table-header-bg:#22252b!important;
  --theme-table-header-bg-end:#3a3f4a!important;
}


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



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



.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}}   
@media(max-width:640px){
  
  
  .catfish{grid-template-columns:1fr;gap:6px;padding:4px 8px;bottom:62px}
  .cf-close{top:-32px;right:6px}
  .lf{padding-bottom:300px}   
}


.lf.lf--4 .lf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:860px){ .lf.lf--4 .lf-cols{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .lf.lf--4 .lf-cols{grid-template-columns:1fr} }


.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-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{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}

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