/* lag — site dữ liệu thi đấu bi-a. Chất liệu mới theo WNT: editorial sáng,
   nền trắng/xám nhạt, thẻ bo lớn, ảnh cơ thủ trồi trên bảng trắng kèm vạch
   màu riêng từng hạng. Chữ ký giữ lại: viên bi pool trước tiêu đề mục,
   số liệu mono. */
:root{
  --bg:#f4f4f6; --panel:#ffffff; --line:#e3e3e8; --ink:#232327; --mute:#6e6e78;
  --red:#ef342a; --gold:#f3a801; --navy:#003770;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,Menlo,monospace;
  --r:1rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);
  text-rendering:optimizeLegibility}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.primary{min-width:0}
.layout{margin-top:36px}
@media (min-width:960px){
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:28px;align-items:start}
  .layout.no-side{grid-template-columns:minmax(0,1fr)}
}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline;color:var(--red)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* chữ ký: thoi màu trước tiêu đề mục — gọn, editorial */
.ball{display:inline-block;width:.55em;height:.55em;border-radius:.14em;flex:none;
  transform:rotate(45deg);margin-right:.9em}
.ball::after{display:none}
.ball b{display:none}
.b1{background:#f7c400}.b2{background:#2456c8}.b3{background:#d73a31}
.b4{background:#6b3fa0}.b5{background:#e8722a}.b6{background:#1f7a4d}
.b7{background:#7b2d26}.b8{background:#14161c}

/* thanh tour — dải sự kiện cuộn ngang dưới đầu trang */
.oop{background:var(--ink);color:#f4f4f6;overflow:hidden}
.oop-row{display:flex;align-items:stretch;min-height:44px}
.oop-label{display:flex;align-items:center;gap:8px;padding:0 16px 0 0;flex:0 0 auto;
  font:700 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;
  color:#fff;border-right:1px solid rgba(255,255,255,.16);margin-right:16px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .live-dot{animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.35}}
}
.oop-track{display:flex;align-items:center;gap:28px;overflow-x:auto;white-space:nowrap;
  scrollbar-width:thin;padding:0 4px}
.oop-track::-webkit-scrollbar{height:4px}
.oop-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}
.oop-item{font:.72rem/1 var(--mono);color:rgba(255,255,255,.65);letter-spacing:.02em;flex:0 0 auto}
.oop-item b{color:var(--gold);font-weight:600}
.oop-item i{font-style:normal;color:#fff;font-weight:700;padding:0 .35em}
.oop-item s{text-decoration:none;color:rgba(255,255,255,.5);padding-left:.6em}
.oop-item.is-live b{color:var(--red)}

/* đầu trang */
.mast{padding:18px 0;border-bottom:1px solid var(--line);background:var(--panel)}
.mast-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand-text{font:800 1.35rem/1 var(--sans);letter-spacing:-.01em;text-transform:uppercase}
.brand-mark{width:26px;height:26px;border-radius:6px;flex:0 0 auto;display:block}
.brand-mark.small{width:18px;height:18px;border-radius:4px}

.nav{display:flex;gap:22px;flex:1 1 auto;min-width:0;overflow-x:auto;
  scrollbar-width:none;font-size:.82rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--mute);padding-bottom:4px;border-bottom:2px solid transparent;
  white-space:nowrap}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a.on{color:var(--red);border-bottom-color:var(--red)}

.mast-tools{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.qs{display:flex;border:1px solid var(--line);border-radius:.5rem;overflow:hidden;
  background:var(--bg)}
.qs input{width:150px;min-width:0;border:0;background:transparent;padding:7px 10px;
  color:var(--ink);font:inherit;font-size:.85rem}
.qs input::placeholder{color:var(--mute)}
.qs input:focus{outline:none}
.qs button{border:0;background:transparent;padding:0 10px;display:flex;align-items:center;
  color:var(--mute);cursor:pointer}
.qs button:hover{color:var(--ink)}
.feed-link{color:var(--mute);display:flex}
.feed-link:hover{color:var(--red)}

/* tiêu đề mục — viên bi + chữ in hoa, hàng có link "xem tất cả" căn phải */
.sec{display:flex;align-items:center;font:700 1.15rem/1.2 var(--sans);
  text-transform:uppercase;letter-spacing:.02em;margin:0 0 18px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:20px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.sec-head .sec{margin:0}
.sec-all{flex:0 0 auto;font:700 .72rem/1 var(--sans);text-transform:uppercase;
  letter-spacing:.08em;color:var(--mute)}
.sec-all:hover{color:var(--red);text-decoration:none}
.sub{font:600 .78rem/1 var(--sans);text-transform:uppercase;letter-spacing:.09em;
  color:var(--mute);margin:30px 0 14px;display:flex;align-items:center;gap:8px}

/* hero — sáng, ảnh cơ thủ bên phải */
.hero{padding:44px 0 40px;overflow:hidden;
  background:radial-gradient(55% 85% at 78% 35%,rgba(239,52,42,.08),transparent 70%),
    linear-gradient(180deg,#fff,transparent 85%)}
.hero-row{display:grid;gap:32px;align-items:center}
@media (min-width:880px){.hero-row{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.hero-art{min-width:0}
/* slide ảnh cơ thủ — chồng lớp, chuyển bằng opacity */
.hph{position:relative;aspect-ratio:5/4;max-height:460px;margin:0 auto;max-width:430px}
.hph-slide{position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .9s ease}
.hph-slide.is-on{opacity:1}
.hph-slide>img{width:100%;height:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.28))}
.hph-cap{position:absolute;left:0;right:0;bottom:8px;display:flex;align-items:center;
  justify-content:center;gap:10px;padding:9px 16px;background:rgba(255,255,255,.9);
  backdrop-filter:blur(4px);border:1px solid var(--line);border-radius:.5rem;
  width:max-content;max-width:92%;margin:0 auto;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.hph-rank{font:800 .95rem/1 var(--mono);color:var(--red)}
.hph-name{font:600 .92rem/1.2 var(--sans);color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hph-flag{width:20px;height:auto;border-radius:2px;display:block}
@media (prefers-reduced-motion:reduce){.hph-slide{transition:none}}
@media (max-width:879px){.hero-art{order:-1}.hph{max-width:320px;max-height:280px}}
.hero-kick{margin:0 0 8px;font:700 .78rem/1 var(--mono);text-transform:uppercase;
  letter-spacing:.18em;color:var(--red)}
.hero-title{margin:0;font:800 clamp(2rem,1.2rem + 4.6vw,4rem)/1.05 var(--sans);
  text-transform:uppercase;letter-spacing:-.02em;max-width:16ch}
.hero-actions{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.hero-cta{display:inline-flex;padding:12px 22px;border-radius:.5rem;
  background:var(--ink);color:#fff;font:700 .8rem/1 var(--sans);
  text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.hero-cta:hover{text-decoration:none;background:var(--red);color:#fff}
.hero-lede{margin:18px 0 0;max-width:52ch;color:var(--mute);font-size:1.05rem;
  line-height:1.65}
a.oop-label:hover{color:var(--gold);text-decoration:none}
.live-cell{color:var(--red);font-weight:700}

/* thẻ giải sắp tới trong hero */
.hero-next{display:flex;align-items:center;gap:12px;padding:13px 16px;
  border:1px solid var(--line);border-radius:.75rem;background:var(--panel);
  color:var(--ink);max-width:480px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.hero-next:hover{text-decoration:none;border-color:var(--red);color:var(--ink)}
.hero-next b{font:700 .68rem/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;
  color:var(--red);flex:0 0 auto}
.hero-next span{font:600 .86rem/1.3 var(--sans);color:var(--ink)}
.hero-next i{margin-left:auto;font-style:normal;color:var(--mute);
  font:.72rem/1 var(--mono);flex:0 0 auto}

/* thẻ tin — ảnh trên, chữ dưới, bo lớn kiểu WNT */
.cards{display:grid;gap:20px;margin-bottom:44px}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.cards{grid-template-columns:repeat(3,1fr)}}
.ncard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.ncard:hover{border-color:#c6c6c6}
.ncard-img{display:block;aspect-ratio:16/9;background:#ececef;
  position:relative;overflow:hidden}
.ncard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top}
.ncard-img.empty{display:flex;align-items:center;justify-content:center}
.ncard-img.empty::after{content:"";width:34px;height:34px;border-radius:7px;
  background:#d7d8df;transform:rotate(45deg)}
.ncard-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.ncard-tags{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.ncard-t{margin:0;font:600 1.05rem/1.3 var(--sans);letter-spacing:-.005em}
.ncard-t a{color:var(--ink)}
.ncard-t a:hover{color:var(--red);text-decoration:none}
.ncard-d{margin-top:auto;color:var(--mute);font:.72rem/1 var(--mono)}

/* mục tin tức kiểu WNT — lưới bento: thẻ đầu rộng gấp đôi, thẻ sau đều nhau */
.bento{display:grid;gap:20px}
@media (min-width:640px){.bento{grid-template-columns:repeat(2,1fr)}
  .ncard.wide{grid-column:1/-1}}
@media (min-width:960px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .ncard.wide{grid-column:span 2;grid-row:span 2}
  .ncard.wide .ncard-img{aspect-ratio:auto;flex:1;min-height:230px}
  .ncard.wide .ncard-img img{height:100%}
  .ncard.wide .ncard-body{padding:20px 22px 22px}
  .ncard.wide .ncard-t{font-size:clamp(1.25rem,1rem + 1.3vw,1.7rem);line-height:1.15;font-weight:800}
}
.ncard-x{margin:2px 0 0;color:var(--mute);font-size:.9rem;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ảnh bìa nhỏ cho 2 mục đầu danh sách */
.mthumb{flex:0 0 auto;width:96px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;
  background:#ececef;position:relative}
.mthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top}
.row:has(.mthumb){align-items:flex-start}

.rankband,.tourband,.newsband{margin-bottom:56px}

/* dải xếp hạng nền tối — mobile nằm gọn bo góc, desktop mới phá khung full-bleed như WNT */
.rankband{background:#17191f;border-radius:var(--r);padding:30px 18px 40px}
@media (min-width:960px){
  .rankband{border-radius:0;padding:46px calc(50vw - 50%) 58px;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
}
.rankband .sec{color:#f4f4f6}
.rankband .sec-all{color:#b9bcc4}
.rankband .sec-all:hover{color:#fff}

/* mục tin liên quan cuối bài — thẻ ảnh nhỏ */
.rel-bento{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-bottom:44px}
.rel-bento .ncard-t{font-size:.95rem}

/* thẻ cơ thủ kiểu WNT — ảnh phủ thẻ, bảng trắng dưới, vạch màu theo hạng */
.pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (min-width:700px){.pcards{grid-template-columns:repeat(3,1fr)}}
.pcard{display:block;color:var(--ink)}
.pcard:hover{text-decoration:none;color:var(--ink)}
.pcard-img{position:relative;aspect-ratio:1/1.12;border-radius:var(--r);
  background:linear-gradient(170deg,#e9eaf0 0%,#d8d9e2 100%);overflow:hidden;
  box-shadow:0 2px 12px rgba(20,22,28,.09);
  display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease}
.pcard:hover .pcard-img{transform:translateY(-5px);
  box-shadow:0 16px 34px -12px rgba(20,22,28,.28)}
.pcard-img>img{flex:1;min-height:0;width:100%;
  object-fit:contain;object-position:bottom}
.pcard-info{position:relative;flex:none;min-height:34%;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:12px 66px 22px 14px;background:#fff}
@media (max-width:480px){
  .pcard-info{padding-right:52px}
  .pcard-rank{font-size:1.55rem;right:10px;bottom:16px}
}
.pcard-flag{width:auto;height:20px;border-radius:.25rem;background:#fff;
  box-shadow:0 0 0 1px var(--line)}
.pcard-rank{position:absolute;right:14px;bottom:20px;
  font:800 2rem/1 var(--sans);color:var(--ink);letter-spacing:-.02em}
.pcard-rank i{font-style:normal;font-size:.9em;color:var(--mute)}
.pcard-band{position:absolute;left:0;right:0;bottom:0;height:9px}
/* cờ + tên + điểm nằm trong bảng trắng */
.pcard-id{display:flex;align-items:flex-start;gap:9px;min-width:0}
.pcard-who{display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden}
.pcard-name{font:700 1.05rem/1.15 var(--sans);color:var(--ink)}
.pcard-name b{font-weight:800;text-transform:uppercase}
.pcard-who i{font:700 .82rem/1.2 var(--mono);color:var(--ink);font-style:normal;
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){.pcard-name{font-size:.92rem}.pcard-who i{font-size:.76rem}}
/* panel nhuốm nhẹ màu của hạng + quầng sáng cho top 3 */
.pcard.r1 .pcard-info{background:linear-gradient(180deg,#fff 55%,#fbf0d0)}
.pcard.r2 .pcard-info{background:linear-gradient(180deg,#fff 55%,#dde9f6)}
.pcard.r3 .pcard-info{background:linear-gradient(180deg,#fff 55%,#f9dce0)}
.pcard.r4 .pcard-info{background:linear-gradient(180deg,#fff 55%,#fde7ec)}
.pcard.r5 .pcard-info{background:linear-gradient(180deg,#fff 55%,#e9e4f5)}
.pcard.r6 .pcard-info{background:linear-gradient(180deg,#fff 55%,#dcf3ea)}
.pcard.r7 .pcard-info{background:linear-gradient(180deg,#fff 55%,#efe2db)}
.pcard.r8 .pcard-info{background:linear-gradient(180deg,#fff 55%,#e2e2e6)}
.pcard.r9 .pcard-info{background:linear-gradient(180deg,#fff 55%,#f6ecd0)}
.pcard.r1 .pcard-img{box-shadow:0 10px 28px -10px rgba(243,168,1,.55)}
.pcard.r2 .pcard-img{box-shadow:0 10px 28px -10px rgba(0,55,112,.45)}
.pcard.r3 .pcard-img{box-shadow:0 10px 28px -10px rgba(199,1,37,.4)}
.pcard.r1:hover .pcard-img{box-shadow:0 18px 36px -12px rgba(243,168,1,.6)}
.pcard.r2:hover .pcard-img{box-shadow:0 18px 36px -12px rgba(0,55,112,.5)}
.pcard.r3:hover .pcard-img{box-shadow:0 18px 36px -12px rgba(199,1,37,.45)}
/* màu vạch theo hạng — bảng màu của WNT */
.pcard.r1 .pcard-band{background:#f3a801}
.pcard.r2 .pcard-band{background:#003770}
.pcard.r3 .pcard-band{background:#c70125}
.pcard.r4 .pcard-band{background:#fa798f}
.pcard.r5 .pcard-band{background:#715ca9}
.pcard.r6 .pcard-band{background:#2eb887}
.pcard.r7 .pcard-band{background:#964e28}
.pcard.r8 .pcard-band{background:#1a1a1a}
.pcard.r9 .pcard-band{background:linear-gradient(to right,#1d1d1d 30%,#fcc000 30% 70%,#1d1d1d 70%)}
/* hạng 1 nổi bật hơn */
@media (min-width:700px){
  .pcard.r1{grid-column:span 1}
  .pcard.r1 .pcard-rank{font-size:2.6rem}
  .pcard.r1 .pcard-flag{height:26px}
}

/* hồ sơ cơ thủ — khối ngang ảnh trái, giới thiệu phải */
.plyr{display:grid;gap:20px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;margin-bottom:20px;
  box-shadow:0 2px 10px rgba(20,22,28,.04);align-items:center}
@media (min-width:720px){.plyr{grid-template-columns:230px minmax(0,1fr);gap:28px;padding:24px}}
.plyr-photo{position:relative;aspect-ratio:3/3.7;border-radius:.75rem;overflow:hidden;
  background:linear-gradient(170deg,#e9eaf0 0%,#d8d9e2 100%)}
.plyr-photo img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:bottom;padding:10px 10px 0}
.plyr-pos{position:absolute;top:10px;left:14px;font:800 2rem/1 var(--sans);
  color:var(--ink)}
.plyr-band{position:absolute;left:0;right:0;bottom:0;height:8px}
.plyr-id{display:flex;align-items:center;gap:12px}
.plyr-id h2{margin:0;font:800 1.45rem/1.1 var(--sans);letter-spacing:-.01em}
.plyr-flag{width:auto;height:22px;border-radius:.25rem;box-shadow:0 0 0 1px var(--line)}
.plyr-meta{margin:7px 0 10px;font:600 .78rem/1.5 var(--mono);color:var(--mute);
  text-transform:uppercase;letter-spacing:.05em}
.plyr-body p{margin:.55em 0;line-height:1.65}
.plyr-body p:last-child{margin-bottom:0}

/* huy hiệu loại giải WNT */
.ev-tag{margin-left:auto;flex:0 0 auto;font:700 .66rem/1 var(--sans);
  letter-spacing:.08em;padding:5px 9px;border-radius:.4rem;text-transform:uppercase}
.ev-tag.major{background:var(--gold);color:#1d1d1d}
.ev-tag.ranking{background:var(--navy);color:#fff}
.ev-tag.ribbon{background:#715ca9;color:#fff}
.ev-tag.next{background:transparent;color:var(--red);border:1px solid var(--red)}
.ev-tag.live{background:var(--red);color:#fff}

.lede{color:var(--mute);font-size:1.02rem;margin:10px 0 0;line-height:1.6}
.rail{color:var(--mute);font-size:.78rem;margin:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px;font-family:var(--mono)}
.chip{display:inline-block;background:transparent;border:1px solid var(--red);
  color:var(--red);padding:3px 9px;border-radius:.5rem;font:400 .72rem/1.4 var(--sans);
  text-transform:uppercase;letter-spacing:.04em}
.chip:hover{text-decoration:none}
.meta{color:var(--mute);font-size:.82rem;margin:8px 0}
.empty{color:var(--mute);padding:48px 0;text-align:center;list-style:none}

/* hàng tin — vạch kẻ mảnh, tiêu đề trái, ngày phải */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.row{display:flex;align-items:baseline;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line)}
.row-t{color:var(--ink);font-weight:600;font-size:.95rem;line-height:1.4}
a.row-t:hover{color:var(--red);text-decoration:none}
.row-d{margin-left:auto;flex:0 0 auto;color:var(--mute);font:.72rem/1.4 var(--mono)}
.rows.big .row{padding:16px 0}
.row-main{min-width:0}
.row-x{margin:4px 0 0;color:var(--mute);font-size:.85rem;line-height:1.5}

/* bảng dữ liệu — khung panel, header dính khi cuộn, top-3 tô màu hạng */
.table-wrap{overflow-x:auto}
.table-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:8px 20px 18px;box-shadow:0 2px 12px rgba(20,22,28,.05)}
.table-card .rt{border-top:0}
.rt{width:100%;border-collapse:collapse;font:.8rem/1.4 var(--mono);
  border-top:1px solid var(--line)}
.rt th{font:600 .68rem/1 var(--sans);text-transform:uppercase;letter-spacing:.07em;
  color:var(--mute);text-align:left;padding:12px 10px 10px 0;
  border-bottom:1px solid var(--line);background:var(--panel)}
.table-card .rt th{position:sticky;top:0;z-index:1}
.rt td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.rt td:first-child{color:var(--mute)}
.rt .num{text-align:right;padding-right:0}
.rt th.num{text-align:right}
.rt tbody tr:nth-child(even){background:rgba(0,0,0,.018)}
.rt tbody tr:hover{background:rgba(239,52,42,.045)}
.rt a{color:var(--ink)}
.rt a:hover{color:var(--red);text-decoration:none}
.rt.full td:first-child{color:var(--ink);font-weight:700}
.rt.full .num{font-weight:600}
/* top 3 — vạch màu và số hạng tô theo màu huy chương */
.rt.rank tbody tr:nth-child(1) td:first-child{color:#b8860b;
  box-shadow:inset 3px 0 0 var(--gold)}
.rt.rank tbody tr:nth-child(2) td:first-child{color:var(--navy);
  box-shadow:inset 3px 0 0 var(--navy)}
.rt.rank tbody tr:nth-child(3) td:first-child{color:var(--red);
  box-shadow:inset 3px 0 0 var(--red)}
.more{margin:12px 0 28px;font-size:.82rem}
.more a{color:var(--mute)}
.more a:hover{color:var(--red);text-decoration:none}

/* danh sách giải/lịch */
.ev{list-style:none;margin:0 0 8px;padding:0;border-top:1px solid var(--line)}
.ev li{display:flex;align-items:baseline;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line)}
.ev-d{flex:0 0 78px;color:var(--red);font:.72rem/1.5 var(--mono);letter-spacing:.02em;
  font-weight:600}
.ev a{color:var(--ink);font-weight:600;font-size:.95rem}
.ev a:hover{color:var(--red);text-decoration:none}
.ev-l{display:block;color:var(--mute);font-size:.78rem;margin-top:2px}
.ev.big li{align-items:center}
.cal-m{font:700 .78rem/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;
  color:var(--mute);margin:28px 0 0}

/* trang bài */
.page-head{margin-bottom:26px}
.page-head h1{margin:0 0 10px}
/* bài báo = thẻ trắng bento kiểu WNT: ảnh sát mép trên, chữ đệm đều */
.post{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;padding-bottom:30px}
.post-head{padding:26px 30px 0}
.post-head h1{font:800 clamp(1.7rem,1.2rem + 2.4vw,2.6rem)/1.15 var(--sans);
  letter-spacing:-.015em;margin:10px 0 0;text-transform:uppercase}
.post-head .rail{margin-bottom:4px}
.cover{margin:24px 0;border-radius:var(--r);overflow:hidden}
.cover img{width:100%}
.cover figcaption{color:var(--mute);font-size:.78rem;margin-top:8px;font-family:var(--mono)}
/* ảnh bìa dẫn đầu bài báo — hero điện ảnh 16:9, sát mép thẻ */
.cover-hero{margin:0;border-radius:0}
.cover-hero img{aspect-ratio:16/9;object-fit:cover;display:block}
/* ảnh bìa dọc/vuông — trọn người trên nền tối, không cắt đầu */
.cover-hero.tall{background:linear-gradient(160deg,#232c42,#10182b)}
.cover-hero.tall img{aspect-ratio:16/10;object-fit:contain;object-position:bottom}
/* ảnh bìa siêu dẹt (banner ngang) — giữ nguyên tỉ lệ thật, không cắt mép */
.cover-hero.xwide img{aspect-ratio:auto;object-fit:contain}
.cover-hero figcaption{padding:0 30px}
@media (max-width:640px){.post-head{padding:18px 18px 0}
  .post .prose,.cover-hero figcaption{padding:0 18px}
  .post-foot{margin:32px 18px 0}}

.prose{font-size:1rem;max-width:68ch}
.post .prose{max-width:none;font-size:1.03rem;padding:0 30px}
/* trang giải — chữ chảy 2 cột cho cân bằng với banner rộng */
.ev-prose{max-width:none}
@media (min-width:760px){
  .ev-prose{columns:2;column-gap:44px}
  .ev-prose h2,.ev-prose h3{column-span:all}
  .ev-prose p,.ev-prose li{break-inside:avoid}
  .ev-prose table,.ev-prose figure,.ev-prose blockquote,
  .ev-prose [data-note],.ev-prose [data-faq]{break-inside:avoid}
}
.prose h2{font:800 1.3rem/1.3 var(--sans);margin:1.8em 0 .5em;letter-spacing:-.01em}
.prose h3{font:700 1.05rem/1.3 var(--sans);margin:1.6em 0 .4em}
.prose p{margin:1em 0}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.35em 0}
.prose img{margin:1.4em 0;border-radius:var(--r)}
.prose blockquote{margin:1.4em 0;padding:2px 0 2px 16px;border-left:3px solid var(--red);
  color:var(--mute)}
.prose pre{background:var(--panel);border:1px solid var(--line);border-radius:.5rem;
  padding:14px;overflow:auto;font-size:.85rem}
.prose code{font-family:var(--mono);font-size:.9em}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;
  font:.82rem/1.4 var(--mono)}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:8px 10px 8px 0;
  text-align:left}
.prose a{color:var(--navy)}

.post-foot{margin:32px 30px 0;padding-top:18px;border-top:1px solid var(--line)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.tag{background:var(--panel);border:1px solid var(--line);color:var(--mute);
  padding:4px 10px;border-radius:.4rem;font-size:.75rem}
.tag:hover{color:var(--ink);border-color:var(--mute);text-decoration:none}
.source{color:var(--mute);font-size:.8rem;font-family:var(--mono)}

/* phân trang */
.pager{display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:.85rem}
.pager a{color:var(--mute)}
.pager a:hover{color:var(--red);text-decoration:none}
.pager-count{color:var(--mute);font-family:var(--mono);font-size:.75rem}

/* cột phụ */
.side{margin-bottom:28px}

/* khối do core sinh — tô bằng data-* */
[data-note]{margin:1.4em 0;padding:12px 16px;border:1px solid var(--line);
  border-left:3px solid var(--navy);background:var(--panel);border-radius:.5rem;
  font-size:.92rem}
[data-note="warning"]{border-left-color:var(--gold)}
[data-note="tip"]{border-left-color:#2eb887}
[data-note="danger"]{border-left-color:var(--red)}
[data-embed] iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;
  border-radius:var(--r)}
[data-gallery]{margin:1.4em 0}
[data-toc]{background:var(--panel);border:1px solid var(--line);border-radius:.75rem;
  padding:14px 18px;margin:1.4em 0;font-size:.88rem}
[data-toc] a{color:var(--mute)}
[data-faq] details{border-bottom:1px solid var(--line);padding:12px 0}
[data-faq] summary{font-weight:600;cursor:pointer}

/* form tìm kiếm */
.search-form{display:flex;gap:10px;margin:0 0 24px}
.search-form input{flex:1;padding:11px 14px;border:1px solid var(--line);
  border-radius:.5rem;background:var(--panel);color:var(--ink);font:inherit}
.search-form input:focus{outline:none;border-color:var(--ink)}
.search-form button{padding:11px 22px;border:0;border-radius:.5rem;background:var(--ink);
  color:#fff;font:700 .85rem/1 var(--sans);cursor:pointer;text-transform:uppercase;
  letter-spacing:.05em}
.search-form button:hover{background:var(--red)}

/* chân trang */
.foot{border-top:1px solid var(--line);margin-top:56px;background:var(--panel)}
.foot-grid{display:grid;gap:24px;padding-top:32px;padding-bottom:32px}
@media (min-width:700px){.foot-grid{grid-template-columns:repeat(3,1fr)}}
.foot-h{font:700 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);margin:0 0 12px}
.foot-col{display:flex;flex-direction:column;gap:8px}
.foot-col a{color:var(--mute);font-size:.85rem}
.foot-col a:hover{color:var(--ink);text-decoration:none}
.foot-base{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);
  padding:16px 20px;color:var(--mute);font-size:.8rem}
.foot-base p{margin:0}

a.oop-item{text-decoration:none}
a.oop-item:hover{color:#fff}

/* hub giải đấu — ô thông tin nhanh */
.efacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0 26px}
.efact{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.efact b{display:block;font:600 .66rem/1 var(--mono);text-transform:uppercase;
  letter-spacing:.09em;color:var(--mute);margin-bottom:7px}
.efact span{font:700 .95rem/1.3 var(--sans);color:var(--ink)}

/* lưới thẻ hub trên trang Events */
.ehubs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:14px 0 30px}
@media (min-width:900px){.ehubs{grid-template-columns:repeat(4,1fr)}}
.ehub{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:0;overflow:hidden;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.ehub:hover{text-decoration:none;transform:translateY(-3px);
  box-shadow:0 12px 26px -12px rgba(20,22,28,.25)}
.ehub-img{display:block;height:130px;background:linear-gradient(160deg,#232c42,#10182b)}
.ehub-img>img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ehub-img>img.cut{object-fit:contain;object-position:bottom}
.ehub-b{display:block;padding:14px 16px 16px}
.ehub-b>b{display:block;font:800 .98rem/1.25 var(--sans);margin-bottom:6px}
.ehub-b>span{display:block;font:.8rem/1.4 var(--sans);color:var(--mute)}
.ehub-st{display:inline-block;margin-top:12px;font:700 .66rem/1 var(--mono);
  text-transform:uppercase;letter-spacing:.08em;font-style:normal;
  padding:5px 9px;border-radius:99px;background:var(--bg);color:var(--mute)}
.ehub-st.next{background:#fdeaea;color:var(--red)}
.ehub-st.done{background:#eef4ea;color:#3a7d3a}

/* banner ảnh trang giải + thẻ giải không có ảnh */
.eban{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center;
  border-radius:var(--r);display:block;margin:6px 0 22px;
  box-shadow:0 14px 34px -18px rgba(20,22,28,.3)}
/* ảnh dọc/vuông (chân dung cơ thủ) — hiện trọn trên nền tối thay vì crop */
.eban-t{object-fit:contain;object-position:bottom center;aspect-ratio:16/7;
  background:radial-gradient(ellipse 75% 130% at 50% 108%,#2c3a55 0%,#1a2333 55%,#12192b 100%)}
.ehub-img:empty{position:relative}
.ehub-img:empty::after{content:"";position:absolute;inset:0;margin:auto;width:44px;height:44px;
  border-radius:8px;background:#ef342a;transform:rotate(45deg);
  box-shadow:0 8px 18px rgba(0,0,0,.35)}
.ehub-img:empty::before{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border-radius:4px;background:#10182b;transform:rotate(45deg);z-index:1}

/* khối nổi bật cơ thủ vô địch / gương mặt của giải */
.echamp{display:flex;align-items:stretch;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin:20px 0 28px;
  box-shadow:0 14px 34px -18px rgba(20,22,28,.28)}
.echamp-img{width:min(300px,40%);flex:0 0 auto;object-fit:cover;object-position:top;display:block}
.echamp-img.cut{object-fit:contain;object-position:bottom;background:linear-gradient(160deg,#232c42,#10182b)}
.echamp-t{padding:22px 26px;display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0}
.echamp-tag{font:700 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);font-style:normal}
.echamp-t>b{font:800 1.45rem/1.15 var(--sans)}
.echamp-t>span{font:.9rem/1.55 var(--sans);color:var(--mute)}
.echamp-t>a{font:700 .85rem/1 var(--sans);color:var(--red);margin-top:4px}
.echamp-t>a:hover{text-decoration:underline}
@media (max-width:640px){.echamp{flex-direction:column}.echamp-img{width:100%;height:190px}}

/* dải thông tin nhanh trong hồ sơ cơ thủ */
.pstats{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.pstats span{font:700 .7rem/1 var(--mono);letter-spacing:.03em;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:6px 11px}

/* tab trạng thái — tách All posts / Most read thành 2 view riêng */
.vtabs{display:flex;gap:8px;margin:2px 0 22px;border-bottom:2px solid var(--line)}
.vtabs a{font:800 .8rem/1 var(--sans);text-transform:uppercase;letter-spacing:.07em;
  color:var(--mute);padding:10px 14px;border-bottom:3px solid transparent;margin-bottom:-2px}
.vtabs a:hover{text-decoration:none;color:var(--ink)}
.vtabs a.on{color:var(--red);border-bottom-color:var(--red)}

/* danh sách most read trên trang riêng */
.mrl .row{display:flex;align-items:baseline;gap:14px}
.mrl .row-n{font:800 1.15rem/1 var(--mono);color:var(--red);flex:0 0 1.4em;text-align:right}
.mrl .row-t{font-weight:700}

/* tin mới nhất của giải — thẻ ảnh nhỏ */
.enews{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:14px 0 30px}
.enews a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.enews a:hover{text-decoration:none;transform:translateY(-3px);
  box-shadow:0 12px 26px -12px rgba(20,22,28,.25)}
.enews a>img{width:100%;height:130px;object-fit:cover;object-position:top;display:block}
.enews a>b{display:block;padding:11px 14px 13px;font:700 .85rem/1.45 var(--sans)}

/* bracket — kết quả theo vòng */
.brkt-r{font:800 .74rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink);margin:26px 0 10px;border-left:4px solid var(--red);padding-left:10px}
.ms{list-style:none;margin:0;padding:0;display:grid;gap:6px 14px}
@media (min-width:700px){.ms{grid-template-columns:repeat(2,1fr)}}
.ms.late{grid-template-columns:1fr}
.m{display:flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:.6rem;padding:9px 12px;font-size:.86rem}
.m-a{font-weight:700;color:var(--ink)}
.m-b{color:var(--mute)}
.m-s{margin-left:auto;margin-right:auto;flex:0 0 auto;
  font:700 .8rem/1 var(--mono);background:var(--bg);border-radius:.4rem;padding:4px 8px}
.cc{font:600 .62rem/1 var(--mono);color:var(--mute);font-style:normal;
  vertical-align:2px;margin-left:2px}

@media (max-width:640px){
  .mast-row{gap:16px}
  .nav{order:3;flex-basis:100%}
  .oop-row{flex-direction:column;min-height:0}
  .oop-label{border-right:0;border-bottom:1px solid rgba(255,255,255,.16);padding:8px 0;margin-right:0}
  .oop-track{padding:8px 0}
}