/* Live Bóng — giao diện kênh trực tiếp bóng đá.
   Màu nhấn lấy từ cấu hình hub qua biến --wlb-accent, chủ site thay nhận diện không cần sửa file này.

   Bảng màu ĐO TỪ xoilacxtx.tv ngày 29/07 bằng getComputedStyle, không phải áng chừng:
   nền trang rgb(33,33,33) · nền khối rgb(27,33,42) · nổi rgb(41,45,46) và rgb(50,55,56)
   · chữ #fff · chữ phụ rgb(209,211,212) · chữ mờ rgb(141,146,162) · phông Raleway 15px. */

.wlb {
  --wlb-accent: #22c55e;
  --wlb-bg: #212121;
  --wlb-surface: #1b212a;
  --wlb-surface-2: #292d2e;
  --wlb-raised: #323738;
  --wlb-line: #2f3435;
  --wlb-line-soft: rgba(255, 255, 255, .07);
  --wlb-text: #ffffff;
  --wlb-text-2: #d1d3d4;
  --wlb-muted: #8d92a2;
  --wlb-live: #ef4444;
  --wlb-warn: #f0b429;
  --wlb-up: #4ade80;
  --wlb-down: #f87171;
  --wlb-r: 11px;
  --wlb-r-sm: 7px;

  /*
   * Phông SỐ. Đo xoilac 30/07: mọi chỗ mang tính con số — đếm chip, tỉ số, giờ,
   * ô kèo, bảng xếp hạng, số trang, tab — họ đổi sang Oswald (một phông HẸP), còn
   * chữ thường vẫn Barlow/Raleway. Chính cặp hẹp-rộng đó tạo ra nhịp "bảng số"
   * của họ; mình để một phông cho tất cả nên nhìn bè và mềm hơn hẳn.
   * Đã kiểm: trước bản này Oswald KHÔNG hề được nạp trên site mình (đo bề rộng
   * chữ = đúng bằng phông dự phòng), nên khai suông trong CSS là vô ích.
   */
  --wlb-font-so: Oswald, Barlow, "Segoe UI", sans-serif;

  background: var(--wlb-bg);
  color: var(--wlb-text);
  /*
   * Barlow chứ KHÔNG phải Raleway. Đo xoilac 30/07 bằng document.fonts: body họ
   * khai Raleway nhưng phần tử chữ TIẾNG VIỆT thật sự dùng "Barlow, sans-serif".
   * Chủ nhìn ra trước khi tôi đo: dấu tiếng Việt của Raleway chông chênh, Barlow
   * đặt dấu chuẩn — đó là cái "font tối ưu cho tiếng Việt" của họ.
   */
  font-family: Barlow, Raleway, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
 * NỀN tràn hết bề ngang màn hình, NỘI DUNG vẫn chặn ở 1358px và nằm giữa.
 *
 * Chủ báo 31/07: "bảng phải full ngang chứ, sao che mất các body khác". Trước đó
 * khối bị neo cứng 1358px trong khung theme chỉ 1080px nên thò ra hai bên; còn
 * trên điện thoại thì hàm nới thoát sớm, khối chỉ được 345px trong màn 375px.
 * Nay wlb-width.js kéo khối trải hết màn, và cái đệm này gánh phần căn giữa:
 *     màn 1905  →  đệm (1905−1358)/2 = 273px mỗi bên, nội dung 1358px
 *     màn 375   →  đệm 0, nội dung tràn hết mép — đúng dáng điện thoại
 * Nhờ vậy thẻ trận vẫn đúng 657px chứ không phình theo bề rộng màn.
 * Đệm do wlb-width.js đặt, KHÔNG đặt bằng CSS: `100%` trong padding tính theo
 * khung CHA (cột theme 1080px) chứ không phải bề rộng khối, nên công thức CSS
 * cho ra 0 và thẻ phình lên 931px — đã đo và loại.
 */
/* Phủ CẢ chính .wlb — QC 03/08: reset chỉ phủ con thì khối gốc content-box,
   padding căn giữa cộng dồn lên width JS đặt → 2836px trong màn 1920. */
.wlb, .wlb *, .wlb *::before, .wlb *::after { box-sizing: border-box; }
.wlb img { max-width: 100%; display: block; }

/* --------------------------------------------------------------------------
   BỀ NGANG — MẶC ĐỊNH LUÔN TÔN TRỌNG Ô CHỨA NÓ

   Luật gốc của shortcode: dán `[live_bong]` vào Row/Column nào thì khối phải nằm
   gọn trong đúng Row/Column đó. Cột 1/2 thì khối rộng bằng cột 1/2. Plugin KHÔNG
   được đụng `body`, `.row-main`, `.page-wrapper`, `.content-area` hay bất kỳ
   Row/Column nào của theme — làm vậy là phá bố cục của mọi khối khác trên trang,
   kể cả bài viết và banner chẳng liên quan gì tới plugin.

   Bản trước tôi vá bằng `body.wlb-trang .row-main { max-width: none }`. Nó kéo khối
   rộng ra thật, nhưng bằng cách gỡ trần của CẢ TRANG — sai kiến trúc, đã bỏ.

   Muốn rộng hết màn thì phải KHAI RÕ, và chỉ khối đó được rộng:

       [live_bong screen="live" width="wide"]
   -------------------------------------------------------------------------- */
.wlb { width: 100%; max-width: 100%; }

/* --------------------------------------------------------------------------
   CHẾ ĐỘ WIDE — breakout CHỈ của chính khối này

   Bề ngang màn hình không tính được bằng CSS thuần mà không đụng thanh cuộn:
   `100vw` tính CẢ thanh cuộn dọc nên đẻ ra tràn ngang ~15px, và công thức
   `margin-left: calc(50% - 50vw)` còn giả định cột nội dung nằm chính giữa màn —
   theme có sidebar là khối đè lên sidebar. Nên phần nới do `wlb-width.js` ĐO rồi
   đặt, và nó chỉ đặt lên chính phần tử `.wlb--wide`, không đụng một tổ tiên nào.

   CSS ở đây lo trường hợp JS KHÔNG chạy (LiteSpeed hoãn JS — đo được trên mm99
   31/07): khối lùi về đúng bề ngang ô chứa nó. Hẹp hơn ý muốn, nhưng không vỡ và
   không phá cột — đó mới là hành vi đúng khi thiếu JS.

   Đệm căn giữa chỉ bật SAU khi JS nới xong (`data-wlb-noi="1"`). Bật sẵn từ CSS thì
   trên một cột hẹp, `100%` tính theo khung cha vẫn ra 0 — vô hại — nhưng khi cha
   rộng hơn 1358px mà khối chưa được nới thì đệm ăn oan vào nội dung.
   -------------------------------------------------------------------------- */
/*
 * CỘT NỘI DUNG BẬC THANG — không phải một con số.
 *
 * Đo `div.container.main` của xoilac ở 15 bề ngang (01/08, `thang-do.mjs`):
 *
 *     ≥1280  → min(bề ngang, 1360)      1200–1279 → 1140
 *     992–1199 → 960                    768–991   → 720
 *     576–767  → 540                    <576      → tràn hết
 *
 * Đúng bậc thang `.container` của Bootstrap, riêng bậc trên cùng họ nâng 1320 → 1360.
 * Mình đang để MỘT con số 1358 cho mọi bề ngang, nên từ 1199 trở xuống khối của mình
 * cứ trải hết màn trong khi của họ đã lùi về 960: đo ở 1024 ngày 01/08 ra thẻ trận rộng
 * 490 so với 457 của họ, và mọi thứ trong thẻ lệch theo. Đó là toàn bộ lý do máy tính
 * bảng không sao khớp được dù thẻ đã đúng ở 1920.
 *
 * ## Vì sao là 1358 chứ không phải 1360
 *
 * Bên trong cột, mỗi khối của mình tự đệm 14px hai bên còn của họ 15px. Lấy đúng số
 * container của họ thì nội dung mình rộng hơn 2px và lệch 1px sang trái — nên trừ sẵn
 * 2px vào từng bậc: nội dung hai bên khi đó khớp TUYỆT ĐỐI cả bề rộng lẫn toạ độ
 * (kiểm ở 1024: 47px/930px đúng bằng của họ). Sửa 14 → 15 ở mười chỗ cũng ra kết quả
 * ấy nhưng đụng vào mười luật đang đúng, đổi lấy đúng một con số.
 */
/*
 * Luật này là ĐƯỜNG LUI khi JS không chạy (LiteSpeed hoãn — đo được trên mm99 31/07).
 * Khi JS chạy, `wlb-width.js` đặt đệm INLINE theo bề rộng ĐO ĐƯỢC và luôn thắng luật này.
 *
 * Trước đây luật treo vào `[data-wlb-noi="1"]`, tức là chỉ sống khi JS đã chạy VÀ đã nới
 * thành công — nghĩa là đường lui cho trường hợp thiếu JS thực ra chưa bao giờ tồn tại.
 * Không có cờ, `100%` chính là bề rộng cha, mà khối chưa nới thì rộng đúng bằng cha: công
 * thức ra đúng số cần. Nới rồi thì `100%` sai — nhưng lúc ấy inline đã đè lên.
 */
/*
 * `box-sizing` TỰ KHAI, không dựa reset `*{box-sizing:border-box}` của theme.
 * QC 03/08: theme không có reset → JS đặt width bằng màn hình xong đệm căn giữa
 * cộng CHỒNG ra ngoài (hộp 2836px trong màn 1920) — mọi trang tràn ngang. Flatsome
 * trên mm99 có reset nên không thấy; theme khác thì thấy ngay.
 */
.wlb--wide { box-sizing: border-box; padding-inline: max(0px, calc((100% - var(--wlb-cot, 1358px)) / 2)); }

/*
 * CHỚP TRẮNG HAI MÉP TRÊN ĐIỆN THOẠI — nới bằng CSS THUẦN, không đợi JS.
 *
 * Triệu chứng chủ báo 05/08: "mỗi lần mở trang hai bên trái phải chớp trắng xong
 * mới phủ đều màu". Đo lại được (`_tam-fouc.mjs`, khổ 390, JS tắt để mô phỏng
 * LiteSpeed hoãn): mép trái/phải rgb(255,255,255), giữa rgb(33,33,33).
 *
 * Vì sao luật `body:has(.wlb--wide)` sơn nền tối ở cuối tệp KHÔNG cứu được: nó sơn
 * `body`, mà Flatsome còn một wrapper nền TRẮNG nằm ĐÈ LÊN body. Khối chưa nới thì
 * trắng vẫn lộ hai bên; phải chính khối phủ ra mới che được.
 *
 * Vì sao ở đây dùng được `100vw` trong khi phần trên bác bỏ nó: ba lời bác đều là
 * chuyện của MÀN RỘNG — (1) `100vw` cộng cả thanh cuộn dọc, (2) giả định cột nội
 * dung nằm giữa màn nên theme có sidebar là đè lên, (3) không thoát được tổ tiên
 * `overflow:hidden`. Dưới 576px thì (1) trình duyệt di động dùng thanh cuộn phủ,
 * không chiếm chỗ; (2) mọi theme đều xếp sidebar xuống dưới nên cột nội dung tràn
 * hết và đúng giữa. Còn (3) thì có nới kiểu gì cũng bị cắt — bằng đúng lúc JS bỏ cuộc.
 *
 * Dùng `width:auto` + hai lề âm chứ KHÔNG `width:100vw`: bề rộng khi đó do lề tự
 * kéo ra vừa đúng khung nhìn, nên không thể phồng quá mà đẻ thanh cuộn ngang.
 * Đây cũng đúng ý đồ sẵn có — dưới 576px `--wlb-cot` vốn đã là `100%` (tràn hết).
 * JS chạy sau vẫn đặt inline đè lên, ra cùng kết quả nên không nhảy bố cục.
 */
@media (max-width: 575.98px) {
  .wlb--wide {
    width: auto;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* --------------------------------------------------------------------------
   DẢI TRẮNG TRÊN/DƯỚI KHỐI — cắt đệm dọc của theme

   ĐO ĐƯỢC trên mm99live.com 03/08 (`scripts/live-bong/do-khe.mjs`), leo từ `.wlb`
   lên `body`. Hai tổ tiên đẻ ra khe, cả hai đều của Flatsome:

       div#content.content-area.page-wrapper   đệm 30px trên / 30px dưới
       div.large-12.col                        đệm         0 / 30px dưới

   Nền trắng đến từ `main#main` và `#wrapper`. Nên khối tối nằm giữa hai dải trắng
   30px và 60px — đúng thứ chủ site chụp lại và bảo "tôi muốn sát luôn".

   `width="wide"` đã là lời tuyên bố "khối này tràn hết bề ngang". Tràn ngang mà vẫn
   chừa 90px đệm dọc của theme thì tuyên bố đó nửa vời. Nên cắt luôn đệm dọc của các
   tổ tiên — nhưng chỉ khi chủ site đã chọn `wide`, không đụng chế độ mặc định.

   ## Vì sao `:has()` chứ không phải tên lớp của Flatsome

   Viết thẳng `#content.page-wrapper` là vá cho ĐÚNG MỘT theme. Mạng có 4.000 site,
   theme nào cũng có một cái tên khác cho cùng cái hộp đó. `:has()` hỏi đúng câu cần
   hỏi — "hộp này có chứa khối của mình không" — nên không cần biết theme tên gì.

   ## Vì sao KHÔNG dùng JS

   Đo được trên mm99 ngày 31/07: LiteSpeed hoãn JS, và mọi thứ bố cục treo vào JS đều
   vỡ trong lúc chờ. Bố cục phải đứng được bằng CSS thuần.

   ## PHẢI cắt cả `margin`, không chỉ `padding`

   Bản đầu tôi chỉ cắt `padding` vì sợ đụng chỗ chừa cho thanh đầu trang cố định. Đo
   trên theme thứ hai thì luật đó vô dụng: **Twenty Twenty-Four** không dùng padding,
   nó dùng `margin-top: 19.2px` (block-gap) trên `.entry-content` và `main` —

       div.entry-content.wp-block-post-content    đệm 0/0   lề 19.2px/0
       main#wp--skip-link--target                 đệm 0/0   lề 19.2px/0

   Hai theme, hai cách hoàn toàn khác nhau để tạo ra cùng một dải trắng. Cắt mỗi
   padding là vá cho đúng Flatsome rồi tưởng mình đã tổng quát.

   ## Vì sao loại `body` và `html`

   Nhiều theme lấy khoảng dọc của `body` làm chỗ trống cho thanh đầu trang cố định. Cắt
   chỗ đó là thanh đầu trang đè lên nội dung — hỏng nặng hơn cái đang sửa. Nên chỉ nhận
   `div/main/section/article`; trong các thẻ đó, khoảng dọc bao quanh khối là khe cần
   cắt, không phải chỗ chừa cho thanh đầu trang.

   Trình duyệt chưa có `:has()` thì luật này im lặng trượt qua, khe trắng còn nguyên —
   xấu nhưng không vỡ, đúng cách một lớp trang trí nên hỏng.
   -------------------------------------------------------------------------- */
:where(div, main, section, article):has(.wlb--wide) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 1279.98px) { .wlb { --wlb-cot: 1138px; } }
@media (max-width: 1199.98px) { .wlb { --wlb-cot: 958px; } }
@media (max-width: 991.98px) { .wlb { --wlb-cot: 718px; } }
@media (max-width: 767.98px) { .wlb { --wlb-cot: 538px; } }
@media (max-width: 575.98px) { .wlb { --wlb-cot: 100%; } }

/* --------------------------------------------------------------------------
   LỚP SỐ — chép đúng bảng phông đọc được trong CSS xoilac ngày 30/07:
     .list-filter .num        Oswald 14px/500   → đếm trên chip lọc
     .single-tab ul li a      Oswald 13px/400   → tab
     .LeagueTableTab_table    Oswald 13px       → bảng xếp hạng
     .teambox__odds .box .col Oswald 13px/400   → ô kèo (số kèo 700)
     .infoRowScores_home      Oswald 13px       → tỉ số
     .wp-pagenavi span        Oswald 15px/600   → phân trang
     .table-offer thead th    Oswald 13px/bold  → đầu bảng nhà cái
     .title_box span          Oswald 24px/700   → tiêu đề khối
   Chỉ đổi PHÔNG, không đụng cỡ/màu đã cân ở các khối bên dưới.
   -------------------------------------------------------------------------- */
.wlb .wlb-filter__n,
.wlb .wlb-vtab__nut, .wlb .wlb-mtab__tag, .wlb .wlb-otab,
.wlb .wlb-table--standings, .wlb .wlb-t-pos, .wlb .wlb-t-pts,
.wlb .wlb-bxh-mini,
.wlb .wlb-keo__o, .wlb .wlb-keo__nhan, .wlb .wlb-keo-mini,
.wlb .wlb-score, .wlb .wlb-ls__cs, .wlb .wlb-ls__so, .wlb .wlb-ls__gio,
.wlb .wlb-ls__goc, .wlb .wlb-ls__the, .wlb .wlb-h2h__score,
.wlb .wlb-days__pick, .wlb .wlb-days__today,
.wlb .wlb-pager, .wlb .wlb-section__count {
  font-family: var(--wlb-font-so);
}
/* Số kèo in đậm hơn nền nhãn — đúng .oddContent span 700 của họ. */
.wlb .wlb-keo__o { font-weight: 700; }
.wlb .wlb-pager { font-weight: 600; }

/* ---------- Thanh trận sắp đá (cuộn ngang) ---------- */
.wlb-strip {
  /* Do .match-horizontals cua ho 31/07: nen DAC #303536 phu het dai, cach nhau
     13px, dem 10px tren duoi. Minh dang do gradient tu #1b212a xuong nen trang,
     cach 8px — dai tran vi the chim vao nen thay vi noi thanh mot bang rieng. */
  display: flex; gap: 13px;
  /*
   * Dem doc 21px -> khoi cao 112px, dung bang `div.section-match-horizontals` cua ho
   * (do @1920 ngay 01/08). Minh dang 10px -> 89,5. Thieu 22px o day thi moi khoi ben
   * duoi deu nam CAO hon cua ho 22px, va khong mot chinh sua nao ben duoi bu duoc.
   */
  padding: 21px 14px;
  background: #303536;
  border-bottom: 1px solid var(--wlb-line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.wlb-strip::-webkit-scrollbar { height: 4px; }
.wlb-strip::-webkit-scrollbar-thumb { background: var(--wlb-raised); border-radius: 4px; }

/* --------------------------------------------------------------------------
   NÚT ‹ › HAI ĐẦU THANH TRẬN

   Số đo nút của xoilac (02/08, DOM sống): 20×40 · nền #464F50 · bo 4px ·
   bóng `0 2px 0 0 #2D3334` · absolute · z-index 10 · ẩn hẳn ở ≤991px.

   `#464F50` là MÀU NÚT CHUẨN của họ — dùng chung cho nút này, nút "Xem thêm" và
   nút "Xem tất cả". Khai thành biến chứ không rải ba chỗ, để sau này đổi một lần.

   Hết đường cuộn: họ gắn thuộc tính `disabled` lên `<button>` rồi hạ opacity 0.3.
   Nút KHÔNG biến mất — mất hẳn nút thì hàng bên dưới nhảy chỗ mỗi lần cuộn tới đầu
   hoặc cuối. Bấm bị chặn là do bản thân `<button disabled>`, không cần tắt
   `pointer-events`.
   -------------------------------------------------------------------------- */
.wlb { --wlb-nut: #464f50; --wlb-nut-bong: #2d3334; }

.wlb-striprow { position: relative; }
.wlb-strip__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 40px; padding: 0;
  border: 0; border-radius: 4px;
  background: var(--wlb-nut); box-shadow: 0 2px 0 0 var(--wlb-nut-bong);
  color: #fff; cursor: pointer;
  transition: opacity .3s;
}
.wlb-strip__nav--truoc { left: 2px; }
.wlb-strip__nav--sau { right: 2px; }
/* Mũi tên trái dùng CHUNG một hình với mũi tên phải, xoay lại — đúng cách họ làm. */
.wlb-strip__nav--truoc svg { transform: rotate(180deg); }
.wlb-strip__nav:disabled { opacity: .3; cursor: not-allowed; }
/* ≤991px KHÔNG có nút: màn hẹp thì vuốt tay, thêm nút chỉ che mất ô trận. */
@media (max-width: 991.98px) { .wlb-strip__nav { display: none; } }
.wlb-chip {
  /* O cua ho: 120x92, nen #2E2929, bo 6px, dem 4px, KHONG vien.
     Minh de 150px rong / nen #1B212A / bo 7 / dem 8-10 nen o thap va be hon. */
  flex: 0 0 auto; min-width: 120px;
  background: #2e2929; border: 0;
  border-radius: 6px; padding: 4px;
  transition: border-color .15s, transform .15s;
}
.wlb-chip:hover { border-color: var(--wlb-raised); transform: translateY(-1px); }
.wlb-chip.is-live { border-color: rgba(239, 68, 68, .4); }
.wlb-chip__time {
  font-size: 11px; color: var(--wlb-muted); letter-spacing: .02em;
  display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
}
.wlb-chip.is-live .wlb-chip__time { color: var(--wlb-live); }
.wlb-chip__row { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 3px; }
.wlb-chip__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Tab môn thể thao ---------- */
/*
 * Khối cao 94px thì đã bằng họ, nhưng HÀNG TAB bên trong thì chưa: đo 01/08 @1920 ra tab
 * của họ ở y=146 còn của mình y=137. Đệm trên/dưới của họ không cân (34/16) chứ không
 * phải 25/25 — dải trận phía trên kết thúc cùng chỗ, nên 9px này đẩy lệch cả hàng icon.
 */
/*
 * KHE GIỮA CÁC TAB đo trên trang họ 02/08 — ba bậc ba giá trị khác nhau:
 *   ≥1201 → 19,556px · ≤1199 → 3px · ≤767 → 1px
 * (số lẻ vì họ tính theo rem: 19,556 = 14,667 × 4/3, cùng hệ với đệm 9,778/14,667.)
 *
 * Mình để 8/8/5 nên hàng tab CỘNG DỒN lệch: đo @1024 tab #0 lệch 3px và tới tab #5
 * lệch 33,8px. Viên tab có nền nên chỗ này nhìn thấy được, không phải đệm trong suốt.
 *
 * ⚠️ Chẩn đoán đầu tiên của tôi ("nhãn Live nằm trong thẻ làm tab rộng thêm") là SAI:
 * cây DOM cho thấy `.wlb-sport__live` là `position: absolute`, không cộng vào bề rộng.
 * Nhãn của họ cũng absolute. Nguyên nhân thật chỉ là khe.
 */
.wlb-sports { display: flex; gap: 19.556px; padding: 34px 14px 16px; justify-content: center; flex-wrap: wrap; }
/*
 * Tab môn — đo .sports-bars .nav-link trên trang chủ họ 30/07:
 *     thường     Barlow 14px/500, chữ TRẮNG, nền #323738, bo 7px, cao 44px, KHÔNG viền
 *     đang chọn  nền TRONG SUỐT, chữ #00FFFD (xanh ngọc), đậm 700
 * Đúng một khuôn với chip lọc: cả dãy xám, chỉ cái đang chọn sáng lên và bỏ nền.
 * Mình đang để Oswald 13px cao 38px, có viền, chọn thì tô nền xanh lá — khác cả
 * phông, cả cỡ, cả cách đánh dấu. (Oswald ở bản 1.43 là tôi gán nhầm: khoá
 * `.single-tab ul li a` Oswald 13px là tab TRONG TRANG TRẬN, không phải thanh này.)
 */
/*
 * `letter-spacing: normal` va dem ngang 14,667px — hai so nay lay tu phan ra be rong.
 *
 * Do @1024, phan ra tung vien tab thanh vien + dem + icon + khe + chu, hai ben cung tai
 * DUNG mot bo Barlow (400/500/600/700 loaded, chuoi mau "Bóng đá" 14px/700 deu ra 49,94
 * — khong phai bold tong hop, khong phai roi ve du phong). Chenh lech nam gon o hai cot:
 *
 *   chu:  HO letter-spacing `normal` · MINH `0.42px` (= .03em o 14px)
 *         Delta chu do duoc khop TUYET DOI voi 0,42 x so ky tu:
 *           "Bóng đá" 7 ky tu -> 2,94  (do 2,94)
 *           "Tennis"  6 ky tu -> 2,52  (do 2,52)
 *           "Cầu lông" 8 ky tu -> 3,36  (do 3,36)
 *   dem:  HO 29,33 ngang (9,778/14,667) · MINH 30 -> lech 0,67 co dinh
 *
 * Chi doi dem NGANG; giu dem doc 0 vi chieu cao 44px dang khop san, them dem doc se
 * lam vien tab cao them.
 */
.wlb-sport {
  display: inline-flex; align-items: center; gap: 7.333px;
  /* `min-width: 115px` — SAN be rong, do tren `.nav-link` cua ho: 115px o >=576 va
     55,716px o 390. Trong sau tab chi "Tennis" du ngan de cham san (noi dung tu nhien
     108,64 nhung ho ve 115), nen thieu san thi rieng tab do hep hon 6,37px va MOI tab
     sau no bi keo sang trai dung tung ay. */
  min-width: 115px;
  height: 44px; padding: 0 14.667px; border-radius: 7px;
  background: var(--wlb-raised); border: 0;
  color: var(--wlb-text); font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: normal; text-decoration: none;
  position: relative; transition: background .15s, color .15s;
}
.wlb-sport:hover { color: var(--wlb-text); }
/*
 * ĐẢO CHỐT 03/08 — đang-chọn CÓ GỐI, khác xoilac có chủ đích.
 * Đo bản mẫu: tab đang chọn của họ nền rgba(0,0,0,0) + chữ neon — bản mình đã chép
 * đúng như vậy. Nhưng chủ site nhìn dãy tab thấy "cái thì có viền với nền cái thì
 * không" và muốn đồng bộ. Nhận diện đang-chọn giờ nằm ở CHỮ neon + đậm, còn gối thì
 * mọi tab như nhau — hết cảnh một ô trống giữa dãy pill.
 */
/* MỤC 8 (phần an toàn): tab môn ĐANG CHỌN = nền GRADIENT 270deg như họ (đo
   linear-gradient(270deg, rgb(50,56,57), rgb(47,90,73))) thay nền phẳng --wlb-raised
   — nhất quán với nút active cột phải (mục 3). Chỉ đổi nền, không đụng layout/bậc thang. */
.wlb-sport.is-on {
  background-color: transparent;
  background-image: linear-gradient(270deg, rgb(50, 56, 57), rgb(47, 90, 73));
  color: #00fffd; font-weight: 700;
}
/* Icon môn của họ 25×25, không phải 18 — đo `use` trong `.nav-link` @1920 ngày 01/08. */
.wlb-sport__dot { width: 25px; height: 25px; border-radius: 50%; flex: 0 0 25px; }
.wlb-sport__ico { width: 25px; height: 25px; flex: 0 0 25px; opacity: .85; }
.wlb-sport.is-on .wlb-sport__ico { opacity: 1; }
/* Mỗi môn một màu icon như xoilac (chủ bắt 30/07) — chữ trên tab vẫn trung tính. */
.wlb-sport__ico--football { color: #2fd06b; }
.wlb-sport__ico--basketball { color: #ff8c42; }
/* Màu theo ẢNH CHỦ GỬI 04/08 (dàn tab xoilac): tennis + cầu lông + chuyền đều là
   họ CYAN chứ không phải vàng/xanh-dương/tím như bản cũ; esports là chuột TRẮNG. */
.wlb-sport__ico--tennis { color: #22d3ee; }
.wlb-sport__ico--badminton { color: #4cc9f0; }
.wlb-sport__ico--volleyball { color: #2dd4bf; }
.wlb-sport__ico--esports { color: #e8eef5; }
/* Glyph đặc: bỏ mờ 85% của bản nét mảnh — khối đặc mà mờ thì đục màu. */
.wlb-sport__ico { opacity: 1; }
/*
 * SỐ TRẬN TRÊN TAB MÔN — BỎ.
 *
 * Đo @1920 ngày 01/08: tab của họ rộng 118/117/115/125/152/120, của mình
 * 161/121/106/128/158/115. Chỉ tab ĐANG CHỌN lệch, và lệch 43px — đúng bằng viên số
 * "234" mình nhét thêm. Cả dãy căn giữa nên 43px ấy đẩy sáu tab lệch chỗ hết.
 * Con số này vẫn còn ở chip LIVE ngay hàng dưới, nên bỏ đi không mất thông tin nào.
 */
.wlb-sport__n { display: none; }
.wlb-sport.is-empty { opacity: .5; }
.wlb-sport.is-empty:hover { opacity: .75; }
.wlb-sport__live {
  position: absolute; top: -6px; right: -5px;
  background: var(--wlb-live); color: #fff;
  font-size: 11px; font-weight: 500; letter-spacing: .04em;
  padding: 1px 4px; border-radius: 3px;
}

/* ---------- Tiêu đề + bộ lọc ---------- */
/* Đo xoilac 30/07: tiêu đề giữa trang 22px cân 700, tông xanh sáng nổi trên nền
   tối. Pha từ màu nhấn của từng site để đổi thương hiệu là đổi theo. */
/*
 * Tiêu đề trang. Bản trước KHÔNG khai font-family nên bộ chọn `h1` của theme
 * (đặc hiệu thấp hơn `.wlb` nhưng cao hơn thừa kế) thắng, và tiêu đề chạy bằng
 * phông theme — đo trên mm99 30/07 ra "Be Vietnam Pro" chứ không phải Barlow.
 * Đây đúng bài rò rỉ theme đã dính mấy lần: khai ở phần tử cha là vô nghĩa.
 * Trang chủ họ: Barlow 22px/700, căn giữa, chữ TRẮNG — không phải chữ ngả xanh.
 */
/*
 * ĐỆM DỌC = 0. Đo `h1` của họ @1920 ngày 01/08: 1330×**30**, `padding 0`, 22px/lh 30.
 * Mình đang `padding: 8px 14px 16px` → cao 52,6. Thừa 22px, và 22px đó đẩy TOÀN BỘ
 * lưới trận xuống — mọi thẻ bên dưới lệch pha với họ suốt chiều dài trang.
 * Khoảng cách với khối trên/dưới do `.wlb-sports`/`.wlb-toolbar` lo, không phải h1.
 */
.wlb .wlb-title {
  text-align: center; font-size: 22px; font-weight: 700; line-height: 30px;
  font-family: Barlow, Raleway, system-ui, sans-serif;
  padding: 0 14px; margin: 0 0 29px;
  color: var(--wlb-text);
  text-wrap: balance;
}
/* Trang phụ (Lịch/Kết quả/BXH/Kèo/Livescore): tiêu đề đứng ĐẦU trang, căn TRÁI,
   CHỮ HOA — đúng khuôn xoilac. Trang Trực tiếp giữ tiêu đề căn giữa như trang chủ họ. */
/* Trang trong của họ (Kết quả/BXH/Livescore): Oswald 24px/700, HOA, căn TRÁI. */
.wlb .wlb-title--trai {
  text-align: left; text-transform: uppercase; letter-spacing: .3px;
  font-family: var(--wlb-font-so); font-size: 24px;
  padding: 14px 14px 12px; color: var(--wlb-text);
}
@media (max-width: 767px) { .wlb .wlb-title { font-size: 17px; } .wlb .wlb-title--trai { font-size: 19px; } }
/*
 * CHIP LỌC — đo TRÊN TRANG SỐNG của xoilac 30/07 bằng getComputedStyle, thôi
 * đọc tệp CSS. Tệp CSS của họ còn nguyên một bảng màu cầu vồng đã CHẾT
 * (a.now #00EFFF, a.today #F6427F…) bị quy tắc sau đè mất; tôi tin bảng chết đó
 * nên bản 1.42.0 ship ra chip mỗi cái một màu — SAI. Trên trang thật:
 *   khung   flex, gap 15px
 *   chip    Barlow 13px/500, chữ TRẮNG, nền #323738, bo 100px, cao 34px,
 *           đệm 0 16px, cách icon 6px, KHÔNG viền
 *   LIVE và chip ĐANG CHỌN: chữ #00FF5D, đậm 700, nền TRONG SUỐT
 *   số đếm  Oswald 11px/600, chữ trắng, nền #464F50, bo 38px, đệm 2px 6px —
 *           đồng loạt MỘT kiểu, không ăn màu theo chip.
 */
.wlb-filters {
  display: flex; gap: 15px; padding: 0 14px 14px;
  overflow-x: auto; align-items: center; scrollbar-width: none;
}
.wlb-filters::-webkit-scrollbar { display: none; }
.wlb-filter {
  height: 34px; padding: 0 16px; border-radius: 100px;
  background: var(--wlb-raised); border: 0;
  color: var(--wlb-text); font-size: 13px; font-weight: 500; line-height: 18px;
  white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s, background .15s;
}
.wlb-filter:hover { color: var(--wlb-text); }
/* Chip LIVE luôn xanh + luôn đậm giống hệt chip đang chọn — cách họ kéo mắt về
   trận đang đá mà không phải tô màu cả dãy. */
.wlb-filter--live,
.wlb-filter.is-on { background: var(--wlb-raised); color: #00ff5d; font-weight: 700; }
/* Hàng chip GIẢI LỚN (tên Việt) đứng trên hàng chip quốc gia — dải chip đầu trang
   Lịch/Kết quả của xoilac. Chip đang chọn dùng lại kiểu .is-on sẵn có. */
.wlb-filters--giai { padding-bottom: 8px; }
/* Chip giải của họ (.filter-tags__leagues a) nhỏ hơn chip lọc chính: 12px/500.
   Không đặt font-weight ở đây nữa, kẻo đè mất nét đậm 700 của chip đang chọn. */
.wlb-filters--giai .wlb-filter { font-size: 12px; }

/* 18px theo so do icon chip cua ho @390 (bon chip thuong deu 18x18). */
.wlb-filter__ico { flex: 0 0 18px; opacity: .85; }
.wlb-filter.is-on .wlb-filter__ico { opacity: 1; }
/* Icon chip ăn theo màu chữ của chip, không tự mang màu riêng. */
.wlb-filter__ico--live, .wlb-filter__ico--stream, .wlb-filter__ico--today,
.wlb-filter__ico--tomorrow, .wlb-filter__ico--all, .wlb-filter__ico--hot { color: inherit; }

/* Lưới GẤP quá 20 thẻ + nút Xem thêm. Đếm trên bản sao trang họ 30/07: 79 thẻ
   trong mã, chỉ 20 thẻ ĐANG HIỆN. Nút của họ: nền #464F50, chữ trắng 14px,
   bo 4px, 109×38px, nhãn đúng hai chữ "Xem thêm".
   Trạng thái gấp nằm ở class trên .wlb-grid nên sống qua refresh 30s. */
.wlb-grid--gap > .wlb-card:nth-child(n + 21) { display: none; }
/*
 * ⚠️ SỬA MỘT SỐ HỎNG: vòng trước tôi ghi "họ chỉ có 52px ở đây, KHÔNG có nút". Sai.
 * Con số đó rút ra từ `.home-league` cao 107px — chiều cao của thẻ `<p>` báo lỗi API
 * trên bản sao, không phải dải giải thật (152px). Nút của họ có thật và là markup TĨNH
 * (`a.btn-loadmore`, không phụ thuộc API): 109×38, `padding: 8px 12px`,
 * `box-shadow: rgb(45,51,52) 0 2px 0 0`, bọc trong `.loadmore-wrapper` căn giữa.
 * Khoảng từ đáy hàng thẻ cuối tới đỉnh dải giải: HỌ 97px, mình 111px — 14px thừa nằm
 * ở `margin` của chính cái nút.
 */
.wlb-xemthem { display: flex; justify-content: center; padding: 4px 14px 16px; }
/*
 * Đo nút của họ 02/08: 109×38 · nền #464F50 · bo 4 · bóng `0 2px 0 0 #2D3334` ·
 * đệm `8px 12px` · Barlow 600 14px/20 · **UPPERCASE** · `gap: 8px` tới mũi tên ·
 * SVG chevron xuống 10×10 trắng.
 *
 * Phép cộng ra đúng 109: `12 đệm + 65 chữ + 8 khe + 10 svg + 12 đệm + 2 viền = 109`.
 * Bề rộng chữ 65px là đo bằng Range trên DOM sống với Barlow 600 14px — phông dự phòng
 * cho 73,89px, tức thiếu Barlow là nút phình 9px. Đó là lý do `nap-phong.mjs` phải nạp
 * phông TRƯỚC khi đo, không thì mọi số chữ đều sai.
 *
 * Trước đây thiếu đúng hai thứ: `uppercase` và mũi tên. Kích thước thì đã khớp sẵn.
 */
.wlb-xemthem__nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; min-width: 109px; padding: 8px 12px; margin: 0;
  border-radius: 4px; cursor: pointer;
  background: var(--wlb-nut, #464f50); border: 0;
  box-shadow: 0 2px 0 0 var(--wlb-nut-bong, #2d3334);
  color: #fff; font-size: 14px; line-height: 20px; font-weight: 600;
  letter-spacing: normal; text-transform: uppercase;
  transition: background .15s, color .15s;
}
.wlb-xemthem__nut:hover { background: var(--wlb-raised); color: #fff; }
/* Mũi tên KHÔNG co lại khi chữ dài: nó là hình, không phải chữ. */
.wlb-xemthem__nut svg { flex: 0 0 10px; }

/* ---------- Dải logo GIẢI ĐẤU ----------
   Chép số đo `.home-league` của xoilac (01/08). Đo bằng cách bơm ảnh data-URI có kích
   thước tự nhiên thật vào `#home-league-list`: bản sao chạy ở máy không gọi được API
   giải đấu của họ, đo thẳng thì chỉ ra chiều cao của thẻ ảnh HỎNG (22px) và tôi suýt
   chép nhầm cả dải thành 74px thay vì 152px.

   Chiều cao dải = tiêu đề + 16 + 100:  1920/1024 → 36+16+100 = 152
                                        ≤991      → 26+16+100 = 142

   Cả hai bậc đều KHÔNG phụ thuộc JS và không phụ thuộc số đo phông — chiều cao dòng
   khai thẳng bằng px, vì LiteSpeed hoãn JS và một dải cao sai kéo lệch mọi thứ dưới nó. */
.wlb-giai { margin: 19px 0 0; padding: 0 14px; }

/* Tiêu đề + nút "Xem tất cả" nằm CÙNG dòng; nút neo phải, căn giữa theo chiều cao. */
.wlb-giai__dau { position: relative; height: 36px; margin-bottom: 16px; }
.wlb-giai__tit {
  margin: 0; font-family: var(--wlb-font-so); font-size: 24px; font-weight: 700;
  line-height: 36px; color: #fff; text-transform: uppercase; letter-spacing: normal;
}
.wlb-giai__het {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 3px 5px; border-radius: 4px;
  background: #464f50; color: #fff; text-decoration: none;
  font-family: Barlow, Raleway, system-ui, sans-serif;
  font-size: 12px; line-height: 20px; font-weight: 700;
  /* CẢ HAI đều HOA — đo `getComputedStyle` trên trang sống 02/08: `.title_box h4` và
     `.view-move-league` của họ đều `text-transform: uppercase`. Ảnh chụp là thứ chỉ ra
     điều này: chữ trên ảnh của họ đọc là "XEM TẤT CẢ" trong khi mã nguồn viết thường.
     Đây cũng là chỗ 5px chênh bề ngang của viên nút. */
  text-transform: uppercase;
}
.wlb-giai__het:hover { background: var(--wlb-raised); color: #fff; }

/*
 * `minmax(100px, 1fr)` là mấu chốt, KHÔNG phải `1fr`. Đo bốn bề ngang: 1920 ra 106px/cột
 * (1330 chia 10, gap 30) nhưng 1024 ra ĐÚNG 100px/cột và dải tràn ra ngoài rồi cuộn
 * ngang — tức cột có sàn cứng 100px. Để `1fr` trần thì @1024 cột co còn 66px, logo 100px
 * đè lên nhau, và đó là thứ trông rất giống "đã khớp" trên ảnh thu nhỏ.
 */
.wlb-giai__ds {
  display: grid; grid-template-columns: repeat(10, minmax(100px, 1fr));
  gap: 30px; overflow-x: auto; scrollbar-width: none;
}
.wlb-giai__ds::-webkit-scrollbar { display: none; }
/*
 * `width: auto; flex: initial` KHÔNG phải dòng thừa. Ô này trước là thẻ flex rộng cứng
 * 92px; đo với CSS bơm chồng lên gói cũ thì luật cũ vẫn thắng và ô ra 92px trong khi họ
 * 100/106px — tức con số sẽ nói "đã khớp" trên site mới mà máy đo lại thấy lệch, hoặc
 * ngược lại. Khai lại cho hết là cách duy nhất để hai bối cảnh cùng ra một kết quả.
 */
.wlb-giai__muc {
  display: block; width: auto; flex: initial; height: 100px; text-decoration: none;
  background: none; border: 0; border-radius: 0; padding: 0; gap: normal;
}
.wlb-giai__muc.is-on { opacity: 1; }
.wlb-giai__muc:not(.is-on):hover { opacity: .82; }
.wlb-giai__muc img { width: 100px; height: 100px; object-fit: contain; }

@media (max-width: 991px) {
  .wlb-giai__dau { height: 26px; }
  .wlb-giai__tit { font-size: 18px; line-height: 26px; }
  .wlb-giai__ds { gap: 16px; }
}
/* .list-filter .num đo trên trang sống: Oswald 11px/600, chữ TRẮNG, nền #464F50,
   bo 38px, đệm 2px 6px — một kiểu duy nhất cho mọi chip. */
.wlb-filter__n {
  background: #464f50; color: #fff;
  padding: 2px 6px; border-radius: 38px; font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Lưới thẻ trận + THẺ TRẬN ----------
   Dựng theo SỐ ĐO thật của xoilac/cakhia (getComputedStyle, 29/07), không chỉnh
   theo cảm giác:
     thẻ 680x179 · nền rgba(20,20,20,.4) · bo 11px · KHÔNG viền
     hàng giải cao 45 · icon giải 14 · tên giải 11px #828b98
     giờ = viên thuốc bo 13px màu #8cd5ff
     hàng đội cao 84 · logo 50 NẰM TRÊN · tên đội 13px nằm dưới, căn giữa
     ô tỷ số 63x40 bo 5px chữ 19px/500
     hàng dưới cao 40 · "HT" xanh #0cc956 · số phụ xám #acacac 11px          */

/*
 * Lưới thẻ — chép nguyên của họ (home.css, #grid-matches):
 *     .grid-matches            { display:grid; gap:16px; grid-template-columns:repeat(2,1fr) }
 *     @media (max-width:992px) { grid-template-columns:1fr; gap:12px }
 *     @media (max-width:767px) { gap:15px }
 * Mình đang để `repeat(auto-fill, minmax(500px,1fr))`, nghĩa là khung phải rộng
 * hơn ~1012px mới đủ hai cột — đo bằng khung nhúng 30/07: ở 1024px và 768px
 * trang mình chỉ còn MỘT cột trong khi họ vẫn hai. Đó là chênh lệch bố cục thấy
 * ngay bằng mắt trên mọi máy tính bảng và laptop nhỏ. Hai cột CỐ ĐỊNH thì không
 * còn phụ thuộc bề rộng khung, gãy đúng chỗ họ gãy.
 */
.wlb-grid {
  display: grid; gap: 16px; padding: 0 14px 20px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 992px) { .wlb-grid { grid-template-columns: 1fr; gap: 12px; } }
/*
 * ĐỆM HAI BÊN 15px Ở ĐIỆN THOẠI — đo xoilac @390 ngày 01/08: khối thân của họ rộng
 * 390 với `padding: 0 15px`, nên thẻ rộng đúng 360. Mình đang để 10px, thẻ ra 370:
 * rộng hơn 10px thì mọi thứ bên trong thẻ (logo, tên đội, ô tỷ số) đứng lệch chỗ so
 * với họ trên suốt chiều dài trang.
 */
@media (max-width: 767px) { .wlb-grid { gap: 15px; padding: 0 15px 16px; } }

a.wlb-card { text-decoration: none; color: inherit; }
.wlb-card {
  display: block;
  /*
   * Nền + bo góc lấy NGUYÊN VĂN từ CSS của xoilac (.grid-match):
   *   background: linear-gradient(97deg, #32373800 61.58%, #00ff5e0d), #292d2e;
   *   border-radius: 11px;
   * Trước đây mình dùng nền phẳng #292d2e và bo 8px — thiếu lớp phủ xanh rất nhạt
   * chạy chéo góc phải, thứ làm thẻ của họ trông có chiều sâu hơn thẻ của mình.
   */
  background: linear-gradient(97deg, #32373800 61.58%, #00ff5e0d), #292d2e;
  border-radius: 11px;
  /*
   * VIỀN VẼ BẰNG `box-shadow` CHỨ KHÔNG PHẢI `border`.
   *
   * `border: 1px solid transparent` cộng 2px vào chiều cao thẻ: 133 nội dung thành
   * 135, trong khi thẻ của họ đúng 133. Hai pixel một thẻ, hai mươi thẻ là bốn mươi
   * pixel trượt. `box-shadow: inset` vẽ đúng chỗ đó mà không chiếm chỗ.
   */
  overflow: hidden;
  transition: background .15s, box-shadow .15s;
  /*
   * GỠ VIỀN THEME. Đo 01/08: thẻ ra 657×135 trong khi ba khối con cộng lại đúng 133 và
   * đầu thẻ chỉ rộng 655 — theme Flatsome đặt `border: 1px` lên thẻ `a`. Chú thích ngay
   * bên trên đã cảnh báo "2px một thẻ, hai mươi thẻ là bốn mươi pixel trượt", rồi tôi vẫn
   * để lọt vì máy đo chưa in cột viền ra. Nay `do-hinh.mjs` in `bd[...]`.
   */
  border: 0;
}
.wlb-card:hover { background: rgb(50, 55, 56); box-shadow: inset 0 0 0 1px var(--wlb-line); }
/* Thẻ live KHÔNG viền đỏ — đo xoilac 30/07: thẻ live border 0px, nhận diện
   bằng mỗi nhãn xanh; viền đỏ cũ làm lưới lốm đốm khi nhiều trận cùng đá. */

/* Lưới `1fr auto 1fr`: nhãn nằm cột giữa nên vẫn CĂN GIỮA CHÍNH XÁC (hai cột hai
   bên bằng nhau theo định nghĩa), mà không bao giờ đè lên tên giải.
   Bản trước tôi đặt nhãn tuyệt đối rồi chừa chỗ bằng max-width — kết quả là 9/40
   thẻ bị cắt tên giải, đúng thứ chủ đã than "thông tin vẫn còn bị cắt". */
/*
 * CHIỀU CAO ĐẦU THẺ = 38px — đo trên DOM SỐNG của xoilac @1920 ngày 01/08:
 *
 *     div.grid-match                 133
 *       div.gmd-tournament-header     38   padding 10px 15px 8px
 *       div.gmd-content_match         57   padding 0 8px 17px
 *       div.grid-match__footer        38   padding 0 16px, gap 12
 *
 * Mình đang 41 + 64,5 + 38 = 146. Cao hơn 13px một thẻ thì tới hàng thứ mười đã
 * lệch 130px, và mọi khối bên dưới trượt theo — đó là phần lớn con số lệch 22,5%.
 */
/* `1fr 127px 1fr` chu KHONG `1fr auto 1fr`. Do 02/08: chuoi cot cua ho la
   "250px 127px 250px" @1920 va "150px 127px 150px" @1024; `auto` cho ra
   "269px 69px 269px" — cot giua hep 58px nen GIO bi keo lech vao trong. */
.wlb-card__head {
  display: grid; grid-template-columns: 1fr 127px 1fr; align-items: center;
  gap: 0; min-height: 38px; padding: 0 15px;
}
/* Nhãn của xoilac bo góc `0 0 6px 6px` — nó là cái TAB thả từ mép trên xuống. */
.wlb-card__head .wlb-badge {
  border-radius: 0 0 6px 6px; padding: 4px 12px;
  /*
   * `justify-self: center` — mục 9 (chủ bắt 03/08 "thẻ phút phải ở giữa khung").
   * Đo bệ: chip rộng 74 nằm SÁT MÉP TRÁI cột 127px nên tâm lệch trái đúng 26px
   * (127/2 − 74/2). Cột giữa vốn đã đúng tâm thẻ, chỉ thiếu lệnh căn giữa chip.
   */
  margin-top: -1px; align-self: start; justify-self: center;
}
/*
 * CHỈ TRẬN ĐANG ĐÁ MỚI CÓ NHÃN — nay chặn ở PHP, không giấu bằng CSS nữa.
 *
 * Chỗ này từng là `.wlb-badge--soon, .wlb-badge--ad { display: none }`. Xoá vì `badge()`
 * (`class-wlb-render.php`) không còn sinh ra hai nhãn đó: giấu bằng CSS thì chúng vẫn nằm
 * trong DOM của mọi thẻ, máy đọc màn hình vẫn đọc và công cụ SEO vẫn thấy.
 */
/*
 * VIÊN "ĐANG DIỄN RA" — 74×26, CÓ nền gradient.
 *
 * ⚠️ ĐÍNH CHÍNH SỐ ĐO CŨ. Chú thích ở đây từng ghi "ô của họ là chữ trần, trải trọn cột
 * giữa 127px, cao 15" và luật bên dưới đặt `background:none; border-radius:0; width:100%`
 * — tức là tự tay giết cái gradient khai ở cuối tệp. Kết quả: thẻ của mình hiện CHỮ TRẦN
 * trong khi của họ là một viên xanh.
 *
 * Đo lại 02/08 trên DOM sống, ba bề ngang, cả ba trạng thái (chữ / phút / có `data-status`):
 *
 *     .gmd-wrapper  ← VIÊN   74 × 26   gradient   bo `0 0 6px 6px`   đệm 0
 *     .t_time       ← CHỮ    127 × 23  Barlow 600 12px / line-height 20  trắng, chữ thường
 *
 * Hai thứ đó là ANH EM trong `.gmd-elapsed-time`, không lồng nhau: hộp chữ rộng bằng cả
 * cột giữa, viên chỉ 74px, tâm trùng nhau. Chuỗi "Đang diễn ra" đo được 65,77px nên lọt
 * trong viên 74px, thừa 4,1px mỗi bên — nên gộp làm MỘT phần tử 74×26 cho ra đúng mặt
 * nhìn mà không phải đẻ thêm thẻ.
 *
 * Số cũ "74×28" cũng sai: viên thật cao 26.
 */
.wlb-card__head .wlb-badge--live {
  display: flex; align-items: center; justify-content: center;
  width: 74px; min-width: 74px; height: 26px;
  margin-top: -1px; padding: 0;
  border-radius: 0 0 6px 6px;
  font-size: 12px; line-height: 20px; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums;
}
/*
 * ĐẦU THẺ NỞ RA khi có nhãn live — 38 → 41 (≤767: 27 → 30).
 *
 * Đo được: hàng lưới của họ 20 → 23px khi trận đang lăn, kéo cả thẻ 133 → 136. Không có
 * luật này thì viên 26px chèn vào hàng 38px làm dồn phần dưới, và bậc thang chiều cao thẻ
 * đã chốt (133/162/157) lệch đúng ở những thẻ đang đá.
 */
.wlb-card__head:has(.wlb-badge--live) { min-height: 41px; }
/* Nhãn trạng thái căn giữa TUYỆT ĐỐI nên không chiếm chỗ trong hàng — phải tự
   chừa chỗ cho nó, nếu không tên giải chạy tuột vào dưới nhãn và bị che.
   Tên giải của xoilac ngắn ("CÚP ROMANIA") nên họ không gặp; của mình là
   "UEFA Champions League - 2nd Qualifying Round" nên gặp ngay. */
/* .gmd-match-league cua ho: Raleway 11px #828B98, cach 6px — minh dang Barlow. */
.wlb-league {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-family: Raleway, Barlow, sans-serif;
  font-size: 11px; color: #828b98;
}
/* Neo THANG vao cot 3. Nhan `--soon`/`--ad` bi `display: none` nen o the CHUA DA
   (phan lon the tren trang) gio truot len o cot 2: mep phai gio ra 363 trong khi
   ho 642. Loi chi hien o the khong co nhan live — dung loai the de nhin nhat. */
.wlb-card__time { grid-column: 3; justify-self: end; }
/* Be rong CO DINH 120px. Do 40 the cua ho: be rong span chi nhan hai gia tri
   [120, 0] — tuc co dinh that, khong co gian theo ten giai. Cua minh chay theo
   noi dung (50,06px voi ten ngan) nen moi the mot kieu. */
.wlb-league span {
  width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: Barlow, Raleway, sans-serif;
  font-size: 11px; line-height: 14px; font-weight: 500; color: #d1d3d4;
}
.wlb-league__ico { width: 14px; height: 14px; flex: 0 0 14px; object-fit: contain; border-radius: 2px; }
/* .grid-match__date của họ: Barlow 12px/400 màu #B8C2C5, KHÔNG viên nền. Mình
   đang bọc một viên xanh nhạt #8CD5FF, nên cả lưới thẻ lấm tấm xanh trong khi
   bên họ dòng giờ chìm hẳn xuống. */
/*
 * MÀU ĐÃ ĐÚNG TỪ TRƯỚC — đo 02/08 cả ba bề ngang, 20/20 thẻ mỗi bên: hai bên cùng
 * `rgb(184, 194, 197)`, opacity 1, 12px, cân 400, Barlow, letter-spacing normal, không
 * đổ bóng, nền trong suốt. Ghi chú "giờ của mình xanh ngọc" ở báo cáo trước là đọc từ
 * ảnh chứ không đo — sai.
 *
 * Chỗ lệch thật là HỘP: của họ cao 20 (line-height 20, không đệm dọc), của mình cao 26
 * (line-height 18 + đệm 4px trên dưới). Phải sửa CẢ HAI cùng lúc: chỉ đổi line-height
 * lên 20 mà giữ đệm thì hộp thành 28 — xa hơn trước.
 */
.wlb-card__time {
  flex: 0 0 auto; padding: 0; border-radius: 0;
  background: transparent; color: #b8c2c5;
  font-size: 12px; line-height: 20px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Hàng đội NẰM NGANG — số đo lấy từ toạ độ từng ô trong thẻ 657px của xoilac
   (29/07): tên nhà căn phải · logo 40 · tỷ số 17px/700 · logo 40 · tên khách căn
   trái. Cột giữa 84px vừa đủ cho "10 : 10". */
/*
 * Hàng đội cao ĐÚNG 57px — bằng `gmd-content_match` của họ: logo 40px + đệm dưới
 * 17px, đệm trên 0. Bản trước để `6px … 12px` nên ra 58px ở thẻ thường và 64,5px ở
 * thẻ live (phút thi đấu cộng thêm chiều cao). Thẻ live cao hơn thẻ thường là thứ
 * bên họ KHÔNG có: mọi thẻ của họ đều đúng 133px, lưới không bao giờ so le.
 */
/*
 * CỘT TỶ SỐ RỘNG THEO NỘI DUNG, KHÔNG CỐ ĐỊNH 84px.
 *
 * Đo từng ô trong thẻ của họ @1920 (01/08): tên nhà kết thúc 534 · logo 545–585 · ô giữa
 * 609–639 · logo khách 663–703 · tên khách bắt đầu 714. Ô giữa chỉ 30px vì trận CHƯA ĐÁ
 * thì đó là hình "VS" 30×17, không phải viên tỷ số. Mình để `min-width: 74px` cho cả hai
 * kiểu, nên với trận chưa đá — tức PHẦN LỚN thẻ trên trang — cụm logo–tên bị đẩy ra xa
 * tâm 22px mỗi bên. Cột `auto` cộng lề 13px hai bên ô giữa (11 + 13 = 24, đúng khe
 * logo→ô giữa của họ) cho ra ĐÚNG toạ độ trên, sai lệch 0,5px.
 *
 * Đệm ngang 16 → 8 để bằng `.gmd-content_match` của họ.
 */
.wlb-teams {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px auto 40px minmax(0, 1fr);
  align-items: center; gap: 11px; padding: 0 8px 17px;
  min-height: 57px;
}
.wlb-teams > :nth-child(3) { margin-inline: 13px; }
/*
 * Ô TÊN hai bên phải CO ĐƯỢC (mục 11): cột đã khai `minmax(0,1fr)` nhưng chính ô
 * lưới vẫn lấy min-content của chuỗi `nowrap` làm sàn — thiếu `min-width: 0` thì
 * hai tên dài đẩy TRÀN RUỘT thẻ (đo 03/08: ô phình 120px, thẻ tràn ngang @390).
 * Trước đây `max-width: 45px` che lỗi này bằng cách cắt cụt MỌI tên.
 */
.wlb-teams > :nth-child(1), .wlb-teams > :nth-child(5) { min-width: 0; }
/*
 * Ô tỷ số KHÔNG căng hết cột. Chủ báo 31/07: "nhiều cái icon đội bóng chèn vào tỷ
 * số luôn". Đo ra không ô nào chồng nhau — nhưng viên tỷ số phình đầy cột nên
 * logo dính sát mép nó. Bên họ khối tỷ số rộng 74px mà hình bên trong chỉ 30px và
 * nằm giữa: từ logo tới hình tỷ số hở 27px, nhìn thoáng hẳn. Bên mình chỉ 5px.
 */
.wlb-teams > :nth-child(3) { justify-self: center; }
/*
 * 🐞 `position: relative` — thieu no thi PHUT VANG RA NGOAI THE.
 *
 * `.wlb-minute` la `position: absolute` nhung `.wlb-score` khong phai to tien co dinh
 * vi (class-wlb-render.php:207 dat hai the LA ANH EM, khong long nhau). Ket qua do
 * 02/08: khoi phut rong 1050px @1920 / 994 @1024 / 360 @390, to tien dinh vi la
 * `DIV.col-inner` cua theme, va no nam cach day the 1090..1803px — tuc nam o mot cho
 * khac han tren trang. Sau khi neo: rong 74px, nam dung giua o ty so.
 */
.wlb-teams > :nth-child(3) { position: relative; }
/* .team-name-group của họ: Roboto 13px/500 trắng — tên đội là chỗ DUY NHẤT trên
   thẻ họ dùng Roboto cho chữ (Roboto còn dùng cho dòng kèo mini). */
/* `line-height: 20px` va `max-width: 120px` do thang tu `.team-name-group` cua ho
   (cao 20, khong phai 16,89 nhu `1.3` sinh ra). `justify-self` giu mep TRONG cua
   hai ten dung cho: ten nha ket o 238,5 va ten khach bat dau o 418,5 @1920. */
.wlb-team__name {
  font-family: Roboto, Barlow, sans-serif;
  font-size: 13px; font-weight: 500; line-height: 20px; color: var(--wlb-text);
  /*
   * `min(120px, 100%)` — 120px là số đo THẬT của `.team-name-group` họ ở desktop,
   * nhưng ở 390 cột tên chỉ 85px nên trần 120 làm ô TRÀN RUỘT thẻ (đo 03/08:
   * ô 120 trong cột 85, thẻ scrollWidth 387 > 360). Giữ trần của họ ở nơi có đất,
   * và không bao giờ vượt quá ô lưới ở nơi hẹp.
   */
  text-align: left; min-width: 0; max-width: min(120px, 100%); justify-self: start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wlb-team__name--nha { text-align: right; justify-self: end; }
/* Nâng độ ưu tiên bằng cách ghép hai lớp: luật `.wlb-logo` nền nằm SAU trong tệp,
   cùng độ ưu tiên thì nó thắng và ăn mất kích thước 50px này. */
/* Ho KHONG bo tron va KHONG co nen: `.team-logo-group` do ra `border-radius: 0`,
   `background: rgba(0,0,0,0)`, va anh ben trong co `padding: 2px`. Minh dang bo 50%
   + nen #323738 — mot vong tron xam sau moi logo. */
.wlb-logo.wlb-logo--card {
  width: 40px; height: 40px; flex: 0 0 40px; font-size: 13px; font-weight: 500;
  border-radius: 0; background: none;
}
.wlb-logo.wlb-logo--card img { width: 40px; height: 40px; object-fit: contain; padding: 2px; }

/*
 * Ô tỷ số — KHÔNG có nền, KHÔNG bo góc.
 *
 * ⚠️ Viên gradient xanh 74×28 bo 8px ở bản trước lấy từ `.t_vs_num` đo hôm 30/07. Đó là
 * phần tử của TRANG XEM TRẬN, không phải ô tỷ số trên thẻ danh sách — lại đúng cái bẫy
 * "đo trúng phần tử cùng tên ở màn khác" đã một lần cho ra "logo 20px".
 *
 * Đo lại 02/08 bằng fixture (ép cả 20 thẻ hai bên về cùng trạng thái ĐANG ĐÁ) rồi
 * `getComputedStyle` trên `.gmd-mid_score` của họ: hộp 30×28, `border-radius: 0`,
 * `background: rgba(0, 0, 0, 0)` — tỷ số của họ là CHỮ TRẦN trên nền thẻ. Ảnh chụp
 * chuẩn hoá xác nhận: chỗ họ để "0 - 0" trắng mảnh thì mình đắp một viên xanh đậm, và
 * viên đó lặp trên cả 20 thẻ nên là mảng lệch lớn nhất còn lại của lưới.
 */
.wlb-score, .wlb-score--vs {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 30px; height: 28px; margin: 0 auto; padding: 0;
  border-radius: 0; background: none;
  font-size: 15px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/*
 * "VS" của họ KHÔNG phải viên tỷ số: `.gmd-mid_score` đo được 30×28, bên trong là hình
 * `#match-vs` 30×17, nền trong suốt. Mình đang dùng chung viên gradient xanh 74px cho cả
 * trận đã đá lẫn chưa đá, nên lưới thẻ lấm tấm xanh ở mọi hàng và cụm đội bị đẩy giãn ra.
 */
/* Mau #B4BEC1 doc THANG tu `<path fill>` trong `<symbol id="match-vs">` cua ho.
   Ho ve hinh vector 30x17, minh dung CHU — 17px la xap xi cho khop chieu cao, da
   kiem: hop van 30px, `scrollWidth` 30, khong lam phinh cot, logo khong xe dich. */
/* Nay ruot la HINH VECTOR 30x17 (xem WLB_Render::score) chu khong con chu, nen o day
   chi con lo canh giua va giu be rong. Bo `font-size: 17px` cua vong 20: no la con so
   xap xi cho CHU, gio khong con chu de xap xi. */
.wlb-score--vs {
  min-width: 30px; padding: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; color: #b4bec1;
}
.wlb-score--vs svg { display: block; width: 30px; height: 17px; }
.wlb-score i { font-style: normal; }
.wlb-score em { font-style: normal; color: var(--wlb-muted); }
/*
 * PHÚT THI ĐẤU KHÔNG ĐƯỢC CỘNG CHIỀU CAO.
 *
 * Nó nằm dưới ô tỷ số, và khi còn tính vào bố cục thì thẻ live cao hơn thẻ thường
 * 6px — lưới hai cột lập tức so le, hàng bên trái không thẳng hàng bên phải. Bên
 * xoilac mọi thẻ đều đúng 133px. Cho nó ra khỏi luồng, neo vào ô tỷ số.
 */
.wlb-score { position: relative; }
/* `.wlb-minute` KHÔNG còn được phát ra trên thẻ danh sách từ 02/08 — phút đã dời lên ô
   giữa hàng đầu thẻ như bên họ (xem `WLB_Render::badge`). Luật này giữ lại vì lớp còn
   dùng ở trang xem trận; đừng đem nó về thẻ, sẽ thành hai chỗ báo cùng một việc. */
.wlb-minute {
  position: absolute; top: 100%; left: 0; right: 0;
  display: block; text-align: center; margin-top: 1px;
  font-size: 11px; font-weight: 400; color: var(--wlb-live);
}

/* Chân thẻ có nền mờ riêng, không dùng đường kẻ — đo xoilac: rgba(50,55,56,.5). */
.wlb-card__foot {
  display: flex; align-items: center; gap: 12px;
  /*
   * CHIỀU CAO CỐ ĐỊNH 38px, không phải `min-height`. Chân thẻ của họ đúng 38 ở MỌI bề
   * ngang, kể cả khi khối kèo bên trong cao 32 và đệm 4px mỗi phía cộng lại thành 40 —
   * kèo tràn ra 1px mỗi mép chứ chân thẻ không giãn. Để `min-height` thì ở 1024 chân
   * thẻ của mình nở ra 42 và thẻ thành 166 thay vì 162.
   */
  height: 38px; padding: 0 16px; /* đúng số đo .grid-match__footer của xoilac */
  background: rgba(50, 55, 56, .5); border-top: 0;
  /* Ho bo 7px DEU bon goc (chan the la mot khoi rieng long trong the), khong
     phai chi bo hai goc duoi theo the. */
  border-radius: 7px;
}
/*
 * Chân thẻ chia BA PHẦN CÂN: trái (chỉ số) và phải (kèo) cùng flex 1 1 0 nên
 * rộng bằng nhau — chip BLV ở giữa mới trùng TÂM THẺ thật. Trước đây trái rỗng
 * 0px còn phải ~146px, BLV "canh giữa" phần còn lại nên lệch trái 73px (đo trên
 * mm99 30/07 sau khi cài 1.27.0 — chủ vẫn bắt được "BLV chưa vào giữa").
 */
/* Số đo lấy thẳng từ CSS xoilac (.match-item--flag): gap 16px, chữ 12px, màu #828b98,
   mỗi cụm con gap 3px. Trước đây mình để gap 9px/chữ 11px nên dải chỉ số chật hơn họ. */
/* `12px/16` đúng như `.match-item--flag` của họ. Mình thừa hưởng line-height 1.5 nên ra
   12/18, và 2px đó cộng thẳng vào hàng chỉ số khi nó đứng riêng một hàng ở màn hẹp. */
.wlb-stats { display: flex; align-items: center; gap: 16px; font-size: 12px; line-height: 16px; color: #828b98; flex: 1 1 0; min-width: 0; }
.wlb-stats > span { display: inline-flex; align-items: center; gap: 3px; }
/* Vạch ⏐ giữa các cụm chỉ số — đo xoilac 30/07: ::after 1px×16px màu #3d4445. */
/* Vach ngan chi so cua ho la `::after` TUYET DOI 1x16 mau #3d4445 dat o `right: -8px`,
   va CHI co o con 1 va 2 (con 3 khong co). Minh dang dung `border-left` + `padding-left`
   nen vach an vao dong chay bo cuc: dai chi so dai them 20px so voi ho. */
.wlb-stats > span + span { border-left: 0; padding-left: 0; position: relative; }
.wlb-stats > span + span::before {
  content: ""; position: absolute; left: -8px; top: 50%; margin-top: -8px;
  width: 1px; height: 16px; background: #3d4445;
}
.wlb-stats__ht i { font-style: normal; color: #00c44d; /* .match-item--flag .title */ }
.wlb-stats__ht b { color: #fff; font-weight: 400; font-variant-numeric: tabular-nums; }
/*
 * BA CỤM CÙNG MỘT MÀU. Đo 02/08, 20/20 thẻ, bản mobile @390: cả ba cụm của họ đều
 * `rgb(130, 139, 152)` (#828b98) — cùng màu với cụm "HT". Mình đang để cụm phạt góc và
 * cụm thẻ vàng ở #acacac (xám trung tính, sáng hơn), nên dải chỉ số của mình có hai sắc
 * trong khi của họ một sắc.
 */
.wlb-stats__it, .wlb-stats__it b { color: #828b98; font-weight: 400; font-variant-numeric: tabular-nums; }
/* Icon cờ góc màu xám như chữ chỉ số; thẻ vàng tự mang màu trong SVG. */
.wlb-ico-goc { color: #828b98; flex: 0 0 12px; }
.wlb-ico-the { flex: 0 0 9px; }

/* BLV đứng GIỮA chân thẻ như xoilac: trái là chỉ số HT/bàn, phải là kèo. */
.wlb-blv { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 0 1 auto; min-width: 0; }

/*
 * TRÊN THẺ TRẬN, BLV CHỈ CÒN MỘT DẤU 14px — không tên, không dãy avatar.
 *
 * Đo `.grid-match__footer-center` của xoilac ở cả 15 bề ngang (01/08): luôn đúng 14px,
 * bên trong là một hình duy nhất, xám khi trận không có BLV. Họ không in tên BLV lên thẻ
 * ở bất kỳ khổ nào. Của mình đang 97–157px vì in avatar + tên từng người, nên chân thẻ
 * bị đẩy và cụm kèo/nhà cái bên phải lệch theo — ở 390 đó là phần lớn chênh lệch còn lại
 * trong thẻ.
 *
 * ĐẢO CHỐT 03/08: chủ site hỏi "sao tôi không thấy tên BLV nữa" — chốt cũ (30/07, ép
 * giống xoilac: thẻ danh sách chỉ hiện chỉ báo) bị chính chủ bỏ. Nay hiện lại MỘT tên,
 * cỡ 10px cao 14px — đúng bằng avatar nên chân thẻ KHÔNG đổi chiều cao, bậc thang
 * 133/162/157 giữ nguyên. Tên thứ hai vẫn giấu để khỏi tràn ô giữa.
 */
.wlb-card__foot .wlb-blv { gap: 5px; }
.wlb-card__foot .wlb-blv__item { gap: 3px; font-size: 10px; line-height: 16px; }
/*
 * MỤC 10: HIỆN dàn nhiều BLV trên thẻ (bỏ luật giấu BLV thứ 2) — bổ trợ mục 13.
 * Avatar 14→24 (đo a.commentator của họ: 24×24).
 *
 * ĐẢO CHỐT 05/08 (mục 3.1): chủ đổi ý — avatar BLV BO TRÒN. Bản 30/07 ép vuông
 * (`border-radius: 0`) theo số đo a.commentator; nay tròn kín như ảnh xoilac chủ gửi.
 * Chỉ đụng `border-radius` + nền: KÍCH THƯỚC giữ nguyên 24px nên bậc thang thẻ
 * (133/136 @1920) không suy suyển — bo góc không phải thuộc tính bố cục.
 *
 * Nền trả về `--wlb-raised`: ô CHỮ CÁI ĐẦU (BLV không có ảnh) mà nền trong suốt thì
 * chỉ còn một chữ cái trơ, không ra hình tròn. Ảnh thật không thấy nền vì `img` phủ
 * kín ô và `overflow: hidden` của luật gốc cắt theo đường tròn.
 */
.wlb-card__foot .wlb-blv__avatar {
  width: 24px; height: 24px; flex: 0 0 24px; font-size: 10px;
  border-radius: 50%; background: var(--wlb-raised);
}
/* a.commentator của họ: Raleway 10px/500 màu #BBB, avatar 24×24, chừa 5px trái. */
.wlb-blv__item {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: Raleway, Barlow, sans-serif;
  font-size: 10px; font-weight: 500; color: #bbb; white-space: nowrap;
}
.wlb-blv__avatar {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wlb-raised); font-size: 11px; font-weight: 700;
  overflow: hidden;
}
/* Ảnh BLV thật từ okwin — tròn kín ô; thiếu ảnh thì ô chữ cái đầu ở trên gánh. */
.wlb-blv__avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Cúp chung khi giải không có logo (Europa/Conference League trả rỗng). */
.wlb-ico--cup { color: #828b98; }

.wlb-card__right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 1 1 0; min-width: 0; }
/* .grid-match__odds của họ: 11px, màu #8D92A2, khối rộng tối thiểu 105px. */
/* Kèo mini dưới thẻ trận: họ KHÔNG dùng Oswald ở đây mà là Roboto 11px/400
   màu #8D92A2 (.grid-match__odds, đo trên trang sống 30/07) — khác hẳn ô kèo
   trong trang trận. Đừng gộp hai chỗ này làm một. */
/* `11px/16` và KHÔNG cách dòng — `.grid-match__odds` của họ cao đúng 32 (hai hàng 16).
   Mình đang 11/17 cộng khe 1px nên ra 34, và 2px đó đội chân thẻ lên ở màn hẹp. */
/* `repeat(3, 1fr)` + khe 15: o keo cua ho la `flex: 1 1 0%` nen ba cot deu nhau va
   hinh hoc KHONG phu thuoc noi dung. Voi `minmax(26px, auto)` cot co theo so ky tu
   nen tam ba cot troi theo tung the. Tam do duoc sau khi sua: 464,83 / 501,49 /
   538,16 — trung ho toi hai chu so thap phan. */
.wlb-odds {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 15px; row-gap: 0; padding-right: 10px;
  line-height: 16px; font-size: 11px; text-align: center; min-width: 105px;
  font-family: Roboto, Barlow, sans-serif; font-weight: 400;
  font-variant-numeric: tabular-nums; color: #8d92a2;
}
/* Cột giữa mang vạch ⏐ hai bên — xoilac ngăn ba cột kèo bằng vạch mảnh (chủ
   soi 30/07, đo lại đúng: vạch 1px xám #3d4445 trong cả hai hàng kèo). */
/* HO KHONG CO vach doc o keo — do ca `border-left/right` (0px) lan `::before`/
   `::after` (deu `none`). Hai vach cua minh vua thua vua day tam cot lech 4..6px. */
.wlb-odds__line { color: var(--wlb-muted); border-left: 0; border-right: 0; padding: 0; }
.wlb-odds .is-up { color: var(--wlb-up); }
.wlb-odds .is-down { color: var(--wlb-down); }
/*
 * KHỔ CHIP NHÀ CÁI CỐ ĐỊNH — vì nó quyết định chỗ đứng của khối kèo bên cạnh.
 *
 * Đo @1920 (01/08): khối kèo của họ ở x=749, của mình x=775 — lệch 26px. Cả hai đều
 * rộng 105 và đều căn phải, nên 26px ấy đến từ chip nhà cái: của họ là ẢNH logo rộng 70,
 * của mình là chữ ("10Bet") nên chỉ 46. Chip co theo tên nhà cái còn có nghĩa là mỗi
 * site cấu hình một tên là kèo lại đứng một chỗ khác.
 *
 * Khổ theo bậc: 70×23 ở máy tính, 52×21 từ 1199px xuống — đo đúng `.odds-comp` của họ.
 */
/*
 * Nhà cái — hộp 70×23 GIỮ NGUYÊN, nhưng bỏ nền xanh và bo góc.
 *
 * Đo 02/08: `.odds-comp` của họ 70×23,2 với `border-radius: 0` và
 * `background: rgba(0, 0, 0, 0)` — ruột là ẢNH logo nhà cái, không phải viên nền màu.
 * Mình đang tô #1D4ED8 bo 4px: một mảng xanh chói ở góc phải MỌI thẻ.
 *
 * Bề rộng 70 là số ĐO ĐƯỢC nên giữ; ruột mình vẫn là chữ (khác họ dùng ảnh) và đó là
 * khác biệt thiết kế còn lại, cố ý để ảnh diff tiếp tục chỉ ra chứ không giấu đi.
 */
.wlb-bookmaker {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 70px; height: 23px; padding: 0;
  border-radius: 0; background: none; color: var(--wlb-text-2);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
@media (max-width: 1199.98px) {
  .wlb-bookmaker { min-width: 52px; height: 21px; }
  /* Khe kèo → nhà cái của họ hẹp lại còn 6px ở bậc này (máy tính là 12). */
  .wlb-card__right { gap: 6px; }
}

/* --------------------------------------------------------------------------
   THANG CHIỀU CAO THẺ — thẻ của họ KHÔNG cao 133px ở mọi bề ngang

   Đo `thang-do.mjs` 01/08, cộng đúng từng khối con:

       ≥1201   38 + 57 + —  + 38 = 133
       ≤1200   38 + 48 + 38 + 38 = 162     ← dải chỉ số tách thành hàng riêng
       ≤767    27 + 48 + 38 + 38 = 151     ← đầu thẻ thấp xuống
       ≤576    27 + 54 + 38 + 38 = 157     ← hàng đội cao lên (tên xuống dòng dưới logo)

   Trước bản này mình để 133 cho mọi bề ngang, nên ở 1024 thẻ mình 135 còn của họ 162:
   cứ mười hàng là trượt 270px, và mọi khối bên dưới lưới trôi theo.

   Ở 390 thì tổng số CŨNG ra 157 — nhưng bằng 38+63+54 chứ không phải 27+54+38+38. Hai
   con số bằng nhau mà ruột khác hẳn: đúng loại trùng hợp làm người ta đóng sổ sớm.
   -------------------------------------------------------------------------- */
.wlb-card__flag { display: none; }

@media (max-width: 1200px) {
  /* Cao CỐ ĐỊNH 28: môn không có chỉ số (bóng rổ, tennis…) thì hàng này rỗng, và rỗng
     mà co lại thì thẻ tụt xuống 141 — lưới hai cột lệch ngay hàng đầu. */
  .wlb-card__flag { display: flex; justify-content: center; height: 28px; margin: 0 0 10px; }
  /* Trong hàng riêng thì dải chỉ số co theo nội dung; `flex:1 1 0` là để căn BLV
     giữa chân thẻ, mang sang đây thì nó căng hết bề ngang và lệch trái. */
  .wlb-card__flag .wlb-stats { flex: 0 0 auto; padding: 6px 10px; }
  .wlb-card__foot > .wlb-stats { display: none; }

  /* .gmd-content_match của họ: đệm dưới 17 → 8, nên hàng đội 57 → 48. */
  .wlb-teams { min-height: 48px; padding: 0 8px 8px; }
  /* .grid-match__footer của họ ở bậc này: đệm 4px đều, gap 0 — BLV về sát mép trái
     vì dải chỉ số đã rời khỏi chân thẻ. */
  .wlb-card__foot { padding: 4px; gap: 0; }
}

/* Đầu thẻ của họ ở màn hẹp: pad `2 10 5 10`, cao 27. */
@media (max-width: 767px) {
  /* Chuoi cot cua ho @390 la "115px 110px 115px" — cot giua 110, khong phai 127. */
  .wlb-card__head { min-height: 27px; padding: 0 10px; grid-template-columns: 1fr 110px 1fr; }
  /* Nở 27 → 30 khi có nhãn live, cùng luật với bậc 38 → 41 ở trên. */
  .wlb-card__head:has(.wlb-badge--live) { min-height: 30px; }
  /* Ten giai o bac nay ho ghim 90px (do: 30..120). */
  .wlb-league span { width: 90px; }
}

/*
 * ĐIỆN THOẠI ≤575px: GIẤU KÈO trên thẻ trận — đọc CSS thật của xoilac 30/07:
 *   @media (max-width: 575px) { .grid-match__odds { opacity: 0 !important; } }
 * Màn hẹp mà nhét ba cột kèo thì tên đội bị bóp; họ bỏ hẳn kèo, giữ tên đội và
 * tỷ số. Chân thẻ của họ cũng gọn lại: padding 6px 10px, cao 38px.
 */
@media (max-width: 575px) {
  .wlb-card__foot .wlb-odds { display: none; }
}

@media (max-width: 575px) {
  /* Đệm đầu/chân thẻ giữ nguyên bậc ≤767 và ≤1200 — trước bản này chỗ này ghi đè
     `padding: 0 12px` và `flex-wrap: wrap`, làm chân thẻ ở 390 phình lên 54px trong
     khi của họ đúng 38. */
  .wlb-card__foot { flex-wrap: nowrap; }

  /*
   * Điện thoại: giữ HÀNG NGANG như xoilac — chủ chốt 31/07 sau khi tôi đặt hai
   * lựa chọn cạnh nhau kèm số đo.
   *
   * Bản 29/07 tôi xếp DỌC vì đo ra tên đội chỉ còn 39px và 74/80 tên bị cắt. Đo
   * lại chính thẻ của họ ở 390px (31/07): ô tên của họ rộng đúng 45px và
   * `text-overflow: clip` — họ cắt còn thẳng tay hơn, không cả dấu ba chấm. Chủ
   * biết rõ đánh đổi này và vẫn chọn giống họ.
   *
   * Có nới hơn họ một chút ở chỗ không tốn kém: logo 24px thay vì để nguyên 40px,
   * và dùng dấu ba chấm thay vì cắt phựt — cùng bố cục, dễ đọc hơn vài ký tự.
   */
  /*
   * Hàng đội của họ ở ≤576 cao 54 (đệm dưới 8, ruột 46) — không phải 63 như bản trước.
   *
   * Đo từng ô @390 (01/08): tên nhà 63–108 · logo 113–153 · ô giữa 158–232 · logo khách
   * 237–277 · tên khách 282–327. Khe đều 5px, và logo của họ ở điện thoại vẫn 40px —
   * chú thích ngay trên viết "nới hơn họ một chút: logo 24px thay vì 40px" là ghi theo
   * bản đo cũ đã sai; 24px làm cụm đội hụt 32px so với họ.
   */
  .wlb-teams {
    grid-template-columns: minmax(0, 1fr) 40px auto 40px minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0 5px; padding: 0 8px 8px; min-height: 54px; align-items: center;
  }
  .wlb-teams > :nth-child(3) { margin-inline: 0; }
  .wlb-teams > :nth-child(1) { grid-row: 1; grid-column: 1; text-align: right; }
  .wlb-teams > :nth-child(2) { grid-row: 1; grid-column: 2; }
  .wlb-teams > :nth-child(3) { grid-row: 1; grid-column: 3; }
  .wlb-teams > :nth-child(4) { grid-row: 1; grid-column: 4; }
  .wlb-teams > :nth-child(5) { grid-row: 1; grid-column: 5; text-align: left; }
  /*
   * MỤC 11 (chủ bắt 03/08): BỎ trần cứng `max-width: 45px`. Con số 45 là bề rộng
   * NỘI DUNG đo được của một tên NGẮN ("o ten nha = 48..93") — đóng nó thành trần
   * thì mọi tên dài hơn đều cụt: đo lại 03/08 @390 "Indonesia" cần 57px, "Việt Nam"
   * cần 54px, đều bị cắt trong khi cột 1fr còn ~85px trống. Ảnh xoilac mobile chủ
   * gửi hiện ĐỦ "Indonesia"/"Việt Nam".
   * Nay để cột `minmax(0,1fr)` quyết định; ellipsis vẫn còn nên tên THẬT SỰ dài
   * (Manchester United ~110px) mới bị cắt — đúng ý "chỉ cắt khi thật sự dài".
   */
  .wlb-team__name {
    font-size: 13px; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* O ty so cua ho @390 rong 74 (143..217, tam 180 = tam the); cua minh 30 nen hai
     logo bi keo vao giua.
     `text-align: center` — do 02/08: hop cua ho rong 74 va hinh VS 30x17 nam GIUA
     (@x165), con hinh VS cua minh dinh MEP TRAI o (@x143). Lech 22px tren 13/20 the.
     O boc la khoi `block`, con `.wlb-score--vs` la `inline-flex`, nen can giua bang
     `text-align` la du — khong can doi o boc sang flex (o do con chua `.wlb-minute`
     tuyet doi va `.wlb-pen`). */
  .wlb-teams > :nth-child(3) { min-width: 74px; text-align: center; }
  /* Logo cua ho @390 cao 36 chu khong 40 (do: 98..138 rong 40 CAO 36). */
  .wlb-logo.wlb-logo--card, .wlb-logo.wlb-logo--card img {
    width: 40px; height: 36px; flex-basis: 40px; font-size: 12px;
  }
}


/* ---------- Nhãn trạng thái + logo nền (đã có từ trước, giữ nguyên vai trò) ---------- */
.wlb-logo {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  background: var(--wlb-raised); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--wlb-text-2);
}
.wlb-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Đo nhãn của xoilac 29/07: 12px cân 600, CHỮ THƯỜNG. Trước đây mình ép
   `text-transform: uppercase` — tiếng Việt có dấu viết hoa hết nhìn rất nặng,
   và "NGHỈ GIỮA HIỆP" thì dài gấp rưỡi "Nghỉ giữa hiệp". */
.wlb-badge {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; letter-spacing: 0;
  padding: 3px 8px; border-radius: 4px; white-space: nowrap;
}
/* Nhãn live XANH LÁ như xoilac — đo 30/07: linear-gradient(#0b540b 0%, #069b3c
   169%) chữ trắng. Trước đây mình dùng đỏ; chủ so hai tab cạnh nhau là thấy lệch. */
.wlb-badge--live { background: linear-gradient(180deg, #0b540b 0%, #069b3c 169%); color: #fff; }
/*
 * Nhãn "Kết thúc" — CHỈ mọc ở bảng tỷ số trang trận (xem scoreboard_badge()).
 *
 * Cố ý TRẦM: nó đứng ngay trên con số tỷ số, mà tỷ số mới là thứ mắt phải bắt
 * trước. Dùng đúng hai biến nền/chữ phụ đã có, không thêm mã màu mới.
 * `.wlb` ở đầu cho đủ 0,2,0 — theme Flatsome có luật nền/viền riêng cho `span`.
 */
.wlb .wlb-badge--xong {
  background: var(--wlb-raised); color: var(--wlb-text-2); font-weight: 500;
}
/*
 * ĐÃ XOÁ `--soon`, `--ad`, `--half`, `--has`.
 *
 * `badge()` nay chỉ trả về nhãn live hoặc chuỗi rỗng, nên bốn luật này không còn phần tử
 * nào để bám. Grep toàn bộ `includes/` và `templates/`: không nơi nào sinh ra chúng nữa.
 *
 * Xoá chứ không để lại "phòng khi cần": luật CSS không ai dùng là thứ người sửa sau đọc
 * rồi tưởng tính năng còn sống — đúng loại rác đã làm tôi mất một vòng khi đọc chú thích
 * "ô của họ là chữ trần" ngay phía trên.
 */
.wlb-pulse {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin-right: 4px; vertical-align: 1px;
  animation: wlb-blink 1.4s ease-in-out infinite;
}
@keyframes wlb-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .wlb-pulse { animation: none; } }

.wlb-pm--goal { color: var(--wlb-up); }


/* ---------- Thanh cuộn ----------
   Đối thủ tạo kiểu ::-webkit-scrollbar 4px cho toàn trang; mình trước đây chỉ tạo
   cho đúng một khối, còn lại để mặc định của hệ điều hành nên thô và lạc tông. */
.wlb *::-webkit-scrollbar { width: 4px; height: 4px; }
.wlb *::-webkit-scrollbar-track { background: transparent; }
.wlb *::-webkit-scrollbar-thumb {
  background: var(--wlb-raised); border-radius: 4px;
}
.wlb *::-webkit-scrollbar-thumb:hover { background: #3a4552; }
.wlb * { scrollbar-width: thin; scrollbar-color: var(--wlb-raised) transparent; }


/* Cắt chữ dài bằng CSS (dấu ba chấm) thay vì cắt cứng trong mã.
   Cắt cứng làm mất thông tin thật; cắt bằng CSS thì chỗ rộng ra là chữ hiện đủ,
   và di chuột vẫn xem được toàn bộ qua thuộc tính title. */
.wlb-chip__row span,
.wlb-blv__item {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.wlb-chip__row { min-width: 0; }


/* ---------- Menu dính, nút lên đầu, trạng thái bàn phím ---------- */

/* Menu dính theo khi cuộn — danh sách dài tới 500 trận, không có nó thì muốn đổi
   trang phải cuộn ngược lên tận đầu. z-index vừa đủ, không tranh với theme. */
/* --wlb-dinh-top do bang JS: be cao header dinh cua theme, mac dinh 0. */
.wlb-nav { position: sticky; top: var(--wlb-dinh-top, 0px); z-index: 20; }

/* Chỉ dành cho máy đọc màn hình và máy tìm kiếm, mắt không thấy. */
.wlb-sronly {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wlb-totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 30;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--wlb-accent); color: #06120a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(8px);
  /* Mờ thôi thì cái nút vẫn ăn chuột — một vòng tròn vô hình chặn click
     ở góc phải mọi trang. Phải tắt hẳn tương tác khi chưa hiện. */
  pointer-events: none;
  transition: opacity .2s, transform .2s, filter .15s;
}
.wlb-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wlb-totop:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .wlb-totop { transition: none; } }

/* Trạng thái bàn phím. Trước đây chỉ có 1 luật :focus trong khi đối thủ có 132 —
   bấm Tab qua trang gần như không biết mình đang đứng ở đâu. */
/* Liệt kê THIẾU là hở thật: đo 29/07 trên site đang chạy, trong 147 phần tử bấm
   Tab được của khối thì đúng MỘT cái không có viền — <summary> của ô chọn giải,
   vì nó không phải a/button/select/input và cũng không mang thuộc tính tabindex.
   Nút chính của bộ lọc mà người dùng bàn phím không thấy mình đang đứng ở đâu. */
.wlb a:focus-visible,
.wlb button:focus-visible,
.wlb select:focus-visible,
.wlb input:focus-visible,
.wlb textarea:focus-visible,
.wlb summary:focus-visible,
.wlb details:focus-visible,
.wlb [tabindex]:focus-visible {
  outline: 2px solid var(--wlb-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.wlb-card:focus-visible { outline-offset: 3px; border-radius: 11px; }
.wlb-totop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


/* ---------- Màn Livescore ----------
   Một dòng cao ~40px so với thẻ trận 175px — nhìn được gấp bốn số trận trong
   cùng một màn hình, đúng việc mà bảng tỷ số sinh ra để làm. */
.wlb-ls { padding: 0 14px 20px; }
.wlb-ls__khoi { margin-bottom: 18px; }
.wlb-ls__dau {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--wlb-r-sm) var(--wlb-r-sm) 0 0;
  background: var(--wlb-surface); border: 1px solid var(--wlb-line); border-bottom: 0;
  font-size: 13px; font-weight: 600; color: var(--wlb-text);
}
.wlb-ls__n {
  background: rgba(255, 255, 255, .09); color: var(--wlb-text-2);
  padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.wlb-ls__giai {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; background: rgba(255, 255, 255, .03);
  border-left: 1px solid var(--wlb-line); border-right: 1px solid var(--wlb-line);
  border-top: 1px solid var(--wlb-line);
  font-size: 11px; color: #828b98;
}
.wlb-ls__giai span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlb-ls__ico { width: 14px; height: 14px; flex: 0 0 14px; object-fit: contain; border-radius: 2px; }

/* Sáu cột như bảng của xoilac: giờ · nhà+logo · tỷ số · logo+khách · chỉ số · trạng thái. */
.wlb-ls__dong {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 52px 1fr 62px 1fr auto 92px;
  padding: 9px 12px; text-decoration: none; color: var(--wlb-text-2);
  border: 1px solid var(--wlb-line); border-top: 0;
  font-size: 13px; transition: background .13s;
}
.wlb-ls__dong:last-child { border-radius: 0 0 var(--wlb-r-sm) var(--wlb-r-sm); }
.wlb-ls__dong:hover { background: var(--wlb-surface-2); color: var(--wlb-text); }
.wlb-ls__gio {
  font-size: 12px; color: var(--wlb-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wlb-ls__dong.is-live .wlb-ls__gio { color: var(--wlb-live); font-weight: 600; }
/* Tên + logo trên một hàng; đội nhà dồn phải, đội khách dồn trái — đối xứng qua tỷ số. */
.wlb-ls__doi { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wlb-ls__doi > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlb-ls__doi--nha { justify-content: flex-end; text-align: right; }
.wlb-ls__doi .wlb-logo--xs { flex: 0 0 20px; width: 20px; height: 20px; }

/* Cụm chỉ số cuối dòng: HT · phạt góc · thẻ vàng (bảng kết quả xoilac có ba cột này). */
.wlb-ls__cs {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--wlb-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wlb-ls__cs i { font-style: normal; }
.wlb-ls__cs b { color: var(--wlb-text-2); font-weight: 500; margin-right: 4px; }
.wlb-ls__goc { color: #828b98; }
.wlb-ls__the { color: #eab308; }
@media (max-width: 991px) { .wlb-ls__cs { display: none; } }
.wlb-ls__so {
  text-align: center; font-size: 15px; font-weight: 700; color: var(--wlb-text);
  font-variant-numeric: tabular-nums;
  background: var(--wlb-raised); border-radius: 5px; padding: 3px 0;
}
.wlb-ls__dong.is-live .wlb-ls__so { background: rgba(239, 68, 68, .16); }
.wlb-ls__tt { font-size: 11px; color: var(--wlb-muted); text-align: right; white-space: nowrap; }

@media (max-width: 767px) {
  .wlb-ls { padding: 0 10px 16px; }
  .wlb-ls__dong { grid-template-columns: 44px 1fr 54px 1fr; gap: 7px; font-size: 12px; }
  .wlb-ls__tt { display: none; }
}

/* ---------- Bài giới thiệu ----------
   Đo 29/07: xoilac có khối 4787 ký tự với 13 tiêu đề phụ dưới danh sách trận,
   cakhia cũng có mục tương tự; của mình trước đây không có chữ nào nên đếm
   được ĐÚNG 0 thẻ h3 trong khi họ 11–35.
   Bề rộng dòng bó ở 68 ký tự — dài hơn thì mắt lạc dòng khi xuống hàng. */
/* Hộp bài viết FULL-NGANG có nền như khối "BÌNH LUẬN" của xoilac (đo 30/07: khối
   họ rộng 1330px; của mình bó 661px căn giữa trông như trang khác hẳn). Chữ bên
   trong vẫn bó 78ch cho dễ đọc — bó DÒNG chứ không bó cả hộp. */
/*
 * MỖI PHẦN BÀI = MỘT KHỐI RIÊNG (mục 14, chủ chốt 03/08): tách để sau này sửa phần
 * nào chỉ đụng phần đó, và các khối dùng CHUNG nền #292D2E với mọi khối khác trên
 * trang. Hộp cũ dùng --wlb-surface (#1B212A) nên lệch tông hẳn với phần còn lại.
 * `.wlb-intro` nay chỉ là khung xếp, không còn nền/viền của riêng nó.
 */
/*
 * LỀ TRÊN 18px, không phải 0 (chủ chỉ 05/08 — lỗi 4). Khối ngay trên bài SEO ở trang
 * trận là `<details>` "So sánh nhà cái", mà `.wlb-panel` chỉ khai `margin-top`, không
 * khai `margin-bottom`: đo được khe ĐÚNG 0px, hộp gấp dính thẳng vào tiêu đề bên dưới.
 * Chữa ở `.wlb-intro` chứ không chỉ ở `.wlb-gap` để MỌI màn có bài đều có chỗ thở, chứ
 * không phải chỉ trang trận. Lề kề nhau tự gộp nên không cộng dồn với lề của khối trên.
 */
.wlb-intro {
  margin: 18px 14px; padding: 0; background: none; border: 0;
  display: grid; gap: 12px;
  color: var(--wlb-text-2); font-size: 15px; line-height: 1.7;
}
.wlb-intro__phan {
  padding: 16px 20px;
  background: var(--wlb-surface-2); border: 1px solid var(--wlb-line);
  border-radius: var(--wlb-r);
}
/*
 * BÀI CŨ CHƯA CHIA PHẦN vẫn phải có khung.
 *
 * `WLB_Plugin::don_intro_xuong_trang()` đã ĐỔ bài vào nội dung trang trên các site
 * chạy thật, và bản đổ trước 03/08 là h2/p TRẦN trong `.wlb-intro` — plugin không còn
 * đường nào dựng lại chúng thành `.wlb-intro__phan`. Không có luật này thì trên đúng
 * những site ấy, phần bài đổ xuống trang vẫn nằm trần trên nền trang trong khi phần
 * bài do khuôn in ra đã có khung: lại đúng cái hai-kiểu-khung chủ chê.
 * Bài đã chia phần thì luật này im, để `.wlb-intro` giữ vai khung xếp như cũ.
 */
.wlb-intro:not(:has(.wlb-intro__phan)) {
  padding: 16px 20px;
  background: var(--wlb-surface-2); border: 1px solid var(--wlb-line);
  border-radius: var(--wlb-r);
}
.wlb-intro__phan > *:first-child { margin-top: 0; }
.wlb-intro__phan > *:last-child { margin-bottom: 0; }
/* Bó DÒNG chữ 78ch cho dễ đọc — bó phần chữ bên trong, KHÔNG bó cả khối. */
.wlb-intro__phan > *, .wlb-intro > p, .wlb-intro > ul, .wlb-intro > ol { max-width: 78ch; }
/*
 * MỤC 14 (03/08): phông tiêu đề bài SEO — bản cũ KHÔNG khai font-family nên h2/h3 rơi
 * về phông CHÂN (serif) của theme, lệch hẳn phần còn lại. Đo họ: h2 và h3 CÙNG cỡ,
 * Oswald 24/700 lh 36 màu #F2F3F3 (desktop), thu nhỏ ở mobile. Khai tường minh.
 */
.wlb-intro h2, .wlb-intro h3 {
  margin: 0 0 8px; font-family: Oswald, sans-serif;
  font-size: 24px; font-weight: 700; color: #f2f3f3;
  line-height: 1.35; text-wrap: balance;
}
@media (max-width: 767px) { .wlb-intro h2, .wlb-intro h3 { font-size: 18px; line-height: 1.4; } }
.wlb-intro h2:first-child, .wlb-intro h3:first-child { margin-top: 0; }
.wlb-intro p { margin: 0 0 12px; }
.wlb-intro a { color: var(--wlb-accent); }
.wlb-intro ul, .wlb-intro ol { margin: 0 0 12px; padding-left: 22px; }
.wlb-intro li { margin-bottom: 5px; }
@media (max-width: 767px) {
  .wlb-intro { font-size: 14px; padding: 0; gap: 10px; margin-bottom: 26px; }
  .wlb-intro__phan { padding: 13px 14px; }
}

/* Khung bao mọi giải ở màn Lịch. Không tạo kiểu gì — chỉ để phần tự làm mới
   có một mục tiêu duy nhất mà thay. */
.wlb-list { display: contents; }

/* Khung nhúng quảng cáo (YouTube/Vimeo) — phủ kín đúng chỗ thẻ video vẫn nằm. */
.wlb-stage__embed {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.wlb-stage.is-embed .wlb-stage__video { display: none; }

/* Khung dòng gọn cho màn Lịch / Kết quả — tái dùng .wlb-ls__dong của Livescore.
   Ở Livescore dòng đầu tựa vào đầu bảng nên không cần viền trên; ở đây tiêu đề
   giải nằm ngoài khung, dòng đầu phải tự có viền và bo góc trên. */
.wlb-rows { margin: 0 14px 16px; }
.wlb-rows .wlb-ls__dong:first-child {
  border-top: 1px solid var(--wlb-line);
  border-radius: var(--wlb-r-sm) var(--wlb-r-sm) 0 0;
}
/* Giải chỉ có MỘT trận: phần tử vừa first vừa last, luật last-child của Livescore
   khai sau nên đè bottom-radius về 0 — bo đủ bốn góc cho nó. */
.wlb-rows .wlb-ls__dong:only-child { border-radius: var(--wlb-r-sm); }
@media (max-width: 767px) { .wlb-rows { margin: 0 10px 12px; } }

/* ---------- Bảng kèo có tab (trang xem trận) ----------
   Đo xoilac 29/07: khung kèo 1330px có thanh tab Châu Á / Châu Âu / Tài xỉu.
   Tab chạy bằng radio + CSS — hỏng JS vẫn bấm được. */
.wlb-otab {
  background: var(--wlb-surface); border: 1px solid var(--wlb-line);
  border-radius: var(--wlb-r-sm); overflow: hidden;
}
.wlb-otab__thanh {
  display: flex; align-items: center; gap: 2px;
  padding: 6px 8px; border-bottom: 1px solid var(--wlb-line);
  /* Cuộn ngang như thanh tab trận: QC 369px vừa khít, nhưng màn hẹp hơn cộng tên
     nhà cái dài thì tràn — cho cuộn thay vì vỡ. */
  overflow-x: auto; scrollbar-width: none;
}
.wlb-otab__thanh::-webkit-scrollbar { display: none; }
.wlb-otab__nhacai { flex: 0 0 auto; }
.wlb-otab__radio {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
.wlb-otab__nut {
  padding: 6px 13px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 500; color: var(--wlb-text-2);
}
.wlb-otab__nut:hover { background: var(--wlb-raised); color: var(--wlb-text); }
/* Label nằm TRONG thanh, không phải anh em kề radio — dấu + không với tới.
   (Codex bắt 30/07: người dùng bàn phím đổi tab mà không thấy viền.) */
#wlb-otab-a:focus-visible ~ .wlb-otab__thanh label[for="wlb-otab-a"],
#wlb-otab-e:focus-visible ~ .wlb-otab__thanh label[for="wlb-otab-e"],
#wlb-otab-o:focus-visible ~ .wlb-otab__thanh label[for="wlb-otab-o"] { outline: 2px solid var(--wlb-accent); outline-offset: 1px; }
.wlb-otab__nhacai { margin-left: auto; font-size: 11px; color: var(--wlb-muted); }
.wlb-otab__pane { display: none; padding: 10px 12px; }

/* Radio nào được chọn thì tô nút của nó và mở đúng khung của nó.
   Ba cặp :checked ~ viết TAY từng tab: CSS không có phép "nút thứ N ứng khung
   thứ N" khi radio, nhãn và khung là anh em cùng cấp. */
#wlb-otab-a:checked ~ .wlb-otab__thanh label[for="wlb-otab-a"],
#wlb-otab-e:checked ~ .wlb-otab__thanh label[for="wlb-otab-e"],
#wlb-otab-o:checked ~ .wlb-otab__thanh label[for="wlb-otab-o"] { background: color-mix(in srgb, var(--wlb-accent) 14%, transparent); color: var(--wlb-accent); }
#wlb-otab-a:checked ~ .wlb-otab__pane[data-pane="a"],
#wlb-otab-e:checked ~ .wlb-otab__pane[data-pane="e"],
#wlb-otab-o:checked ~ .wlb-otab__pane[data-pane="o"] { display: block; }

.wlb-otab__hang {
  display: grid; grid-template-columns: 1fr 64px 64px 64px;
  align-items: center; gap: 8px;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
/* SỐ NẰM TRONG Ô HỘP như bảng kèo xoilac (chủ so 30/07: chữ trần nhìn mỏng dính,
   của họ mỗi con số một ô tối bo góc — bảng nhìn dày dặn hẳn). */
.wlb-otab__hang b,
.wlb-otab__hang .wlb-otab__line {
  background: var(--wlb-raised); border: 1px solid var(--wlb-line);
  border-radius: 6px; padding: 6px 0;
}
.wlb-otab__hang b { font-weight: 700; color: var(--wlb-up); text-align: center; }
.wlb-otab__hang b:last-child { color: var(--wlb-down); }
.wlb-otab__nhan { font-size: 12px; color: var(--wlb-muted); }
/* Kèo 1X2: ô giữa cũng là giá cược chứ không phải mốc kèo — cho cùng cỡ chữ. */
.wlb-otab__hang--ba .wlb-otab__line { font-size: 14px; font-weight: 700; color: var(--wlb-text); }
.wlb-otab__line { text-align: center; color: var(--wlb-text-2); font-size: 13px; }

/* ---------- BẢNG KÈO kiểu xoilac: 4 nhóm cùng lúc × 2 hàng ----------
   Thanh đầu: [Chọn nhà cái] + 4 nhãn nhóm chia đều. Thân: [logo nhà cái] + lưới
   2 hàng × 4 nhóm, mỗi nhóm 1 nhãn + 3 ô số. Ô số là hộp tối bo góc như của họ. */
.wlb-keo {
  background: var(--wlb-surface); border: 1px solid var(--wlb-line);
  border-radius: var(--wlb-r-sm); overflow: hidden;
}
.wlb-keo__thanh {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--wlb-line);
  background: var(--wlb-surface-2);
}
.wlb-keo__daus { display: grid; grid-template-columns: repeat(4, 1fr); flex: 1 1 auto; gap: 8px; }
.wlb-keo__dau {
  text-align: center; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; color: var(--wlb-text-2);
}
.wlb-keo__than { display: flex; align-items: stretch; }
.wlb-keo__nhacai {
  flex: 0 0 128px; display: flex; align-items: center; justify-content: center;
  padding: 10px; border-right: 1px solid var(--wlb-line);
}
.wlb-keo__nhacai img { max-width: 96px; max-height: 34px; object-fit: contain; }
.wlb-keo__luoi {
  flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px 8px; padding: 8px 10px;
}
.wlb-keo__hang {
  display: grid; grid-template-columns: 46px repeat(3, 1fr); gap: 4px; align-items: center;
}
.wlb-keo__nhan {
  font-size: 11px; font-weight: 700; color: var(--wlb-muted);
  text-transform: uppercase; white-space: nowrap;
}
.wlb-keo__o {
  text-align: center; padding: 6px 2px; border-radius: 5px;
  background: var(--wlb-raised); border: 1px solid var(--wlb-line);
  font-size: 13px; font-weight: 600; color: var(--wlb-text-2);
  font-variant-numeric: tabular-nums;
}
/* Màu riêng từng nhóm kèo — đo xoilac 30/07: nhãn nhóm và viền ô mỗi loại một tông
   (Châu Á xanh lá · Châu Âu xanh dương · Tài xỉu cam · Phạt góc tím), nhờ đó mắt bắt
   đúng cột ngay mà không phải đọc chữ. */
.wlb-keo__dau.wlb-keo--a { color: #2fd06b; }
.wlb-keo__dau.wlb-keo--e { color: #4da3ff; }
.wlb-keo__dau.wlb-keo--o { color: #ff9d3d; }
.wlb-keo__dau.wlb-keo--g { color: #b07cff; }
.wlb-keo__hang.wlb-keo--a .wlb-keo__o { border-color: rgba(47, 208, 107, .35); }
.wlb-keo__hang.wlb-keo--e .wlb-keo__o { border-color: rgba(77, 163, 255, .35); }
.wlb-keo__hang.wlb-keo--o .wlb-keo__o { border-color: rgba(255, 157, 61, .35); }
.wlb-keo__hang.wlb-keo--g .wlb-keo__o { border-color: rgba(176, 124, 255, .35); }

/* ---------- Dải kèo phụ: đôi cơ hội + 2 đội ghi bàn ----------
   Để RIÊNG dưới lưới 4 nhóm chứ không nhồi thành 6 cột: lưới trên cứng 4 cột, thêm
   2 cột nữa thì mỗi ô số tụt xuống dưới 40px và vỡ bố cục đã đo theo xoilac.
   Hai thị trường này nguồn có ở 100% số trận (đo 121 trận) nên dải gần như luôn đầy. */
.wlb-keo__phu {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  padding: 8px 10px; border-top: 1px solid var(--wlb-line);
  background: var(--wlb-surface-2);
}
/* Nhãn rộng hơn lưới chính (46px) vì "2 đội ghi bàn" dài hơn hẳn "Châu Á". */
.wlb-keo__phu .wlb-keo__hang { grid-template-columns: 92px repeat(3, 1fr); }
/* Hai đội ghi bàn chỉ có HAI cửa (Có/Không). Để nguyên lưới 3 cột thì cột thứ ba hở
   một khoảng trống — mà thêm một ô gạch thứ ba vào đó là bịa ra một cửa không tồn tại. */
.wlb-keo__phu .wlb-keo--b { grid-template-columns: 92px repeat(2, 1fr); }
.wlb-keo__dau.wlb-keo--d, .wlb-keo__hang.wlb-keo--d .wlb-keo__nhan { color: #f472b6; }
.wlb-keo__dau.wlb-keo--b, .wlb-keo__hang.wlb-keo--b .wlb-keo__nhan { color: #38bdf8; }
/*
 * MỤC 6 (chủ chỉ đích danh "viền hồng" 03/08): bảng kèo mini TRANG TRẬN đo lại thấy
 * họ dùng Ô GIÁ NỀN ĐẶC #323738 KHÔNG VIỀN + nhãn nhóm là PILL trắng — không phải
 * viền màu theo nhóm. Gom vào scope `.wlb-match` (lop_goc('wlb-match')) để KHÔNG đụng
 * trang Tỷ lệ kèo (dùng chung tên lớp .wlb-keo* nhưng bọc .wlb-keo__cuon, không .wlb-match).
 * Giữ dải phụ Đôi cơ hội/BTS (dữ liệu thật mình có) — chỉ mặc áo giống ô kèo chính.
 */
.wlb-match .wlb-keo__luoi .wlb-keo__o,
.wlb-match .wlb-keo__phu .wlb-keo__o {
  background: #323738; border-color: transparent; color: #fff;
}
.wlb-match .wlb-keo__daus .wlb-keo__dau,
.wlb-match .wlb-keo__phu .wlb-keo__nhan {
  display: inline-flex; align-items: center; justify-content: center;
  color: #d6dade; /* nhãn nhóm trắng đều, bỏ tô màu theo nhóm */
}
/* Chú cửa ("1X · 12 · X2") — mờ, không tranh chỗ với con số. */
.wlb-keo__chu {
  grid-column: 2 / -1; font-size: 10px; color: var(--wlb-muted);
  text-align: center; letter-spacing: .3px;
}
/*
   Nhãn nhà cái cho kèo MƯỢN. pick_odds() duyệt mọi nhà để lấp chỗ trống (kèo chấp
   39,7% -> 100% số trận), nên số hiện ra có thể KHÔNG phải của nhà đang đứng tên.
   Con chữ này là chỗ duy nhất người xem biết được điều đó — đừng bỏ đi cho gọn.
*/
.wlb-keo__muon {
  display: inline-block; margin-left: 5px; padding: 0 4px;
  border: 1px solid var(--wlb-line); border-radius: 3px;
  font-size: 9px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--wlb-muted); vertical-align: middle;
}

/* Tỷ số loạt luân lưu — dòng riêng dưới ô tỷ số, không trộn vào số bàn thắng. */
.wlb-pen {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 600; color: var(--wlb-muted);
  white-space: nowrap;
}

@media (max-width: 991px) {
  .wlb-keo__daus, .wlb-keo__luoi { grid-template-columns: repeat(2, 1fr); }
  .wlb-keo__nhacai { flex-basis: 84px; }
}
@media (max-width: 575px) {
  .wlb-keo__daus, .wlb-keo__luoi { grid-template-columns: 1fr; }
  .wlb-keo__nhacai { display: none; }
  /* Hai dòng kèo phụ xếp dọc: 92px nhãn + 3 ô trên màn 360px là ô số bị bóp méo. */
  .wlb-keo__phu { grid-template-columns: 1fr; }

  /*
   * BẢNG KÈO TRÀN KHỎI MÉP PHẢI — bẫy flexbox kinh điển (đo 05/08, khổ 360–575:
   * 8/8 hàng có mép phải vượt khung nhìn, bị khung cha CẮT nên nhìn như bảng cụt).
   *
   * `.wlb-keo__luoi` là flex item (`flex:1 1 auto`) mà flex item mặc định
   * `min-width:auto`, tức KHÔNG được co nhỏ hơn nội dung của nó. Lưới bên trong khai
   * `46px repeat(3, 1fr)`, mà `1fr` cũng có sàn là `min-content` — cộng lại thành một
   * bề rộng tối thiểu lớn hơn màn. Phải mở khoá ở CẢ HAI tầng: `min-width:0` cho flex
   * item, và `minmax(0, 1fr)` cho từng cột.
   */
  .wlb-keo__than, .wlb-keo__luoi, .wlb-keo__phu, .wlb-keo__hang { min-width: 0; }
  .wlb-keo__hang { grid-template-columns: 92px repeat(3, minmax(0, 1fr)); }
  .wlb-keo__phu .wlb-keo__hang { grid-template-columns: 92px repeat(3, minmax(0, 1fr)); }
  .wlb-keo__phu .wlb-keo--b { grid-template-columns: 92px repeat(2, minmax(0, 1fr)); }
  /* 10px để "Phạt góc · Hiệp 1" — nhãn dài nhất — nằm gọn, hàng khỏi cao so le. */
  .wlb-keo__luoi .wlb-keo__nhan { font-size: 10px; }
  /* Chip: 5 cái (thêm "Tất cả") nên bóp đệm cho đỡ phải cuộn ngay từ đầu. */
  .wlb-kchip { padding: 0 9px; font-size: 11px; }

  /*
   * TÊN NHÓM KÈO PHẢI ĐI CÙNG HÀNG.
   *
   * Tiêu đề nhóm nằm ở `.wlb-keo__daus` — một khối TÁCH RỜI khỏi `.wlb-keo__luoi`.
   * Trên màn rộng hai khối xếp thành cột nên tiêu đề đứng ngay trên hàng của nó; co
   * về một cột thì thành 4 tiêu đề dồn lên đầu rồi 8 hàng chỉ ghi "Hiệp 1"/"FT" —
   * người xem không còn biết hàng nào là kèo gì (đúng ảnh chủ gửi 05/08).
   *
   * Xoilac gom mỗi nhóm thành MỘT khối màu chứa sẵn hai hàng Hiệp 1 + FT. Đổi khuôn
   * HTML cho giống hẳn thì đụng cả bố cục màn rộng đã đo khớp; nên ở đây giữ nguyên
   * khuôn và trả tên nhóm về đúng chỗ nó cần xuất hiện: ngay trong nhãn của hàng.
   * Màu chữ vẫn theo nhóm (luật `.wlb-keo--a/e/o/g .wlb-keo__nhan`) nên vẫn phân biệt
   * được bằng màu như bên họ.
   */
  .wlb-keo__daus { display: none; }
  .wlb-keo__nhan { white-space: normal; line-height: 1.25; }
  .wlb-keo__luoi .wlb-keo--a .wlb-keo__nhan::before { content: "Châu Á · "; }
  .wlb-keo__luoi .wlb-keo--e .wlb-keo__nhan::before { content: "Châu Âu · "; }
  .wlb-keo__luoi .wlb-keo--o .wlb-keo__nhan::before { content: "Tài xỉu · "; }
  .wlb-keo__luoi .wlb-keo--g .wlb-keo__nhan::before { content: "Phạt góc · "; }
  /*
   * Màu theo nhóm — bù cho hàng tiêu đề vừa ẩn. Bốn màu này vốn chỉ gắn ở
   * `.wlb-keo__dau` (đo xoilac 30/07: Á xanh lá · Âu xanh dương · T/X cam · Góc tím);
   * ẩn tiêu đề mà không mang màu xuống thì bốn nhóm xám như nhau, mất đúng thứ giúp
   * người xem phân biệt nhanh trên màn hẹp.
   */
  .wlb-keo__luoi .wlb-keo--a .wlb-keo__nhan { color: #2fd06b; }
  .wlb-keo__luoi .wlb-keo--e .wlb-keo__nhan { color: #4da3ff; }
  .wlb-keo__luoi .wlb-keo--o .wlb-keo__nhan { color: #ff9d3d; }
  .wlb-keo__luoi .wlb-keo--g .wlb-keo__nhan { color: #b07cff; }
}

/* --------------------------------------------------------------------------
   KHỐI CHIA SẺ — vòng tròn TO màu thương hiệu + nhãn chữ + nút Copy link trải ngang

   Bản cũ (`.wlb-share__*`) là một hàng chấm xám 30px cùng một màu; chủ soi 05/08 gọi
   là "vừa lỏ vừa lỗi". Bảng chia sẻ của xoilac là vòng tròn to nhiều màu, có tên nền
   tảng bên dưới, dưới cùng một nút Copy link viền xám hết bề ngang.

   ## GỐC của "viền đỏ nét đứt"

   KHÔNG phải CSS của plugin. Dựng lại đúng markup cũ chỉ với `wlb.css` rồi đo (05/08,
   khổ 390) ra `border: 0px none` · `outline: 3px none` — sạch. Viền đó là luật của
   theme rò vào, và nó thắng được vì hai chỗ hở, cả hai đều nằm trong tệp này:

     1. `.wlb-share__nut { outline: none; border: 0 }` chỉ MỘT lớp = 0,1,0.
        Khối "Ghì kiểu cho các phần tử form thật" ở dưới đã ghi đúng bài học này:
        Flatsome dùng `input[type="search"]` (0,1,1) nên thắng đứt một lớp, và cách
        chữa đã chốt từ hồi đó là viết `.wlb .wlb-<tên>` cho đủ 0,2,0.
     2. Khối trung hoà `:where(.wlb) :where(button, input, select, …)` KHÔNG liệt kê
        thẻ `a`. Bốn nút chia sẻ là `<a>` nên không được trung hoà lấy một dòng, còn
        nút Copy là `<button>` thì có — đó chính là lý do chủ thấy bốn cái viền đỏ mà
        cái thứ năm lại xanh lá đặc.

   KHÔNG chữa bằng cách thêm `a` vào khối `:where()` chung: khối đó đặt cả
   `line-height: 1.4`, mà `.wlb-intro a` nằm giữa đoạn văn dòng 1.7 — thêm vào là mọi
   dòng có liên kết co lại so với dòng bên cạnh. Ghì tại CHỖ, đúng hai lớp, ngay dưới.
   -------------------------------------------------------------------------- */
.wlb-chiase { display: flex; flex-direction: column; gap: 14px; }
/*
 * Chặn trần ở CẢ LƯỚI rồi căn giữa, KHÔNG chặn trần từng ô.
 * Để `1fr` suông thì trên máy tính năm vòng tròn dạt ra hai mép cột, mỗi cái một góc;
 * bảng của họ là một cụm gọn giữa. Nhưng `minmax(58px, 96px)` thì hỏng nặng hơn: với
 * `auto-fit`, số cột tính theo cạnh LỚN, nên ở khổ 390 lưới chỉ nhận 3 cột 96px và
 * năm nút gãy làm hai hàng (đo 05/08: khối cao 198,6 thay vì 121,3).
 */
.wlb-chiase__luoi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 12px 8px; max-width: 480px; margin-inline: auto;
}
.wlb-chiase__nut {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; min-width: 0;
}
.wlb-chiase__tron {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: #fff; transition: transform .13s, filter .13s;
}
.wlb-chiase__nut:hover .wlb-chiase__tron { transform: translateY(-2px); filter: brightness(1.12); }
.wlb-chiase__tron--fb { background: #1877f2; }
.wlb-chiase__tron--zl { background: #0068ff; }
/* X: nền đen tuyền chìm hẳn vào khối tối — dùng xanh Twitter như bảng của họ. */
.wlb-chiase__tron--x  { background: #1d9bf0; }
.wlb-chiase__tron--tg { background: #2aabee; }
.wlb-chiase__tron--sk { background: #00aff0; }
.wlb-chiase__ten {
  font-size: 11px; line-height: 1.3; text-align: center; color: var(--wlb-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.wlb-chiase__copy {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; border: 1px solid var(--wlb-line);
  border-radius: var(--wlb-r-sm); background: var(--wlb-raised);
  color: var(--wlb-text); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; cursor: pointer;
}
.wlb-chiase__copy:hover { border-color: var(--wlb-accent); color: var(--wlb-accent); }
.wlb-chiase__copyico { display: flex; }
.wlb-chiase__copyico svg { width: 16px; height: 16px; }
/* Đã chép — nhãn đổi bằng JS, màu đổi bằng đây. */
.wlb-chiase__copy.is-done { background: var(--wlb-accent); border-color: var(--wlb-accent); color: #06120a; }
/*
 * GHÌ TẠI CHỖ, hai lớp = 0,2,0. Đây là phần vá gốc của "viền đỏ nét đứt": đủ sức
 * thắng `a[target]`, `a:hover`, `button[type]`, `.entry-content a` của theme mà
 * KHÔNG cần một dấu !important nào. Khai đủ cả bốn thứ theme hay khoác lên liên kết:
 * viền, outline, bóng đổ, gạch chân.
 */
.wlb .wlb-chiase__nut,
.wlb .wlb-chiase__copy {
  margin: 0; box-shadow: none; text-decoration: none;
  -webkit-appearance: none; appearance: none;
  font-family: inherit; text-transform: none; min-height: 0; height: auto;
}
.wlb .wlb-chiase__nut { padding: 0; border: 0; outline: 0; background: none; color: inherit; }
.wlb .wlb-chiase__copy { outline: 0; text-transform: uppercase; }
/* Người dùng bàn phím vẫn phải thấy mình đang ở đâu — không bỏ a11y. */
.wlb .wlb-chiase__nut:focus-visible .wlb-chiase__tron,
.wlb .wlb-chiase__copy:focus-visible { outline: 2px solid var(--wlb-accent); outline-offset: 2px; }

/* ---------- Tab vùng dưới trang trận ----------
   Đo xoilac 29/07: vùng dưới khung hình là thanh tab (Thông số | Diễn biến |
   Đội hình…) thay vì xếp chồng. Radio + CSS, cùng lối với bảng kèo. */
.wlb-mtab {
  background: var(--wlb-surface); border: 1px solid var(--wlb-line);
  border-radius: var(--wlb-r-sm); overflow: hidden;
}
.wlb-mtab__thanh {
  display: flex; align-items: center; gap: 2px;
  padding: 6px 8px; border-bottom: 1px solid var(--wlb-line);
  overflow-x: auto; scrollbar-width: none;
}
.wlb-mtab__thanh::-webkit-scrollbar { display: none; }
.wlb-mtab__radio {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
.wlb-mtab__nut {
  padding: 7px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--wlb-text-2);
}
.wlb-mtab__nut:hover { background: var(--wlb-raised); color: var(--wlb-text); }
#wlb-mtab-doihinh:focus-visible ~ .wlb-mtab__thanh label[for="wlb-mtab-doihinh"],
#wlb-mtab-dienbien:focus-visible ~ .wlb-mtab__thanh label[for="wlb-mtab-dienbien"],
#wlb-mtab-thongke:focus-visible ~ .wlb-mtab__thanh label[for="wlb-mtab-thongke"],
#wlb-mtab-doidau:focus-visible ~ .wlb-mtab__thanh label[for="wlb-mtab-doidau"] { outline: 2px solid var(--wlb-accent); outline-offset: 1px; }
.wlb-mtab__pane { display: none; padding: 13px 14px; }
.wlb-mtab__tag { margin: 0 0 10px; font-size: 12px; color: var(--wlb-muted); }

/* Bốn cặp :checked ~ viết TAY từng tab — như bảng kèo, CSS không có phép
   "nút thứ N ứng khung thứ N" giữa anh em cùng cấp. */
#wlb-mtab-doihinh:checked ~ .wlb-mtab__thanh label[for="wlb-mtab-doihinh"],
#wlb-mtab-dienbien:checked ~ .wlb-mtab__thanh label[for="wlb-mtab-dienbien"],
#wlb-mtab-thongke:checked ~ .wlb-mtab__thanh label[for="wlb-mtab-thongke"],
#wlb-mtab-doidau:checked ~ .wlb-mtab__thanh label[for="wlb-mtab-doidau"] { background: color-mix(in srgb, var(--wlb-accent) 14%, transparent); color: var(--wlb-accent); }
#wlb-mtab-doihinh:checked ~ .wlb-mtab__pane[data-pane="doihinh"],
#wlb-mtab-dienbien:checked ~ .wlb-mtab__pane[data-pane="dienbien"],
#wlb-mtab-thongke:checked ~ .wlb-mtab__pane[data-pane="thongke"],
#wlb-mtab-doidau:checked ~ .wlb-mtab__pane[data-pane="doidau"] { display: block; }

/* ---------- Chế độ toàn trang ----------
   Trang plugin tự vẽ trọn tài liệu: nền tối phủ mép-tới-mép như xoilac, khối
   nội dung bó 1330px ở giữa (bằng vùng nội dung của họ, đo 29/07). */
body.wlb-toan-trang {
  margin: 0; background: var(--wlb-bg, #212121);
  min-height: 100vh;
}
body.wlb-toan-trang .wlb {
  max-width: 1330px; margin: 0 auto; min-height: 100vh;
}
/* Có thanh quản trị của WordPress thì chừa đúng chỗ cho nó. */
body.wlb-toan-trang.admin-bar { padding-top: 0; }

/* Chip nhà cái dạng ẢNH (xoilac dùng ảnh 8xbet). */
.wlb-bookmaker img { height: 20px; width: auto; display: block; border-radius: 3px; }
.wlb-bookmaker.is-link { cursor: pointer; }
.wlb-bookmaker.is-link:hover { filter: brightness(1.12); }

/* ---------- Trạng thái rỗng ---------- */
.wlb-empty {
  text-align: center; padding: 40px 20px; color: var(--wlb-muted); font-size: 14px;
}

/* ---------- Nhóm theo ngày / giải ---------- */
.wlb-section { margin-bottom: 6px; }
/* Có logo giải đứng đầu — hàng tên giải như của xoilac (gap cho logo, tên đẩy sát). */
.wlb-section__title {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 12px 16px 10px;
  font-size: 14px; font-weight: 500; color: var(--wlb-text-2);
  letter-spacing: .01em;
}
.wlb-section__title > span:first-of-type { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlb-section__count { font-size: 11px; color: var(--wlb-muted); font-weight: 400; flex: 0 0 auto; }

/* ---------- Bảng (kèo, xếp hạng) ---------- */
.wlb-table-wrap {
  margin: 0 14px 20px; border: 1px solid var(--wlb-line);
  border-radius: var(--wlb-r); overflow-x: auto; background: var(--wlb-surface);
}
.wlb-table {
  width: 100%; min-width: 720px; border-collapse: collapse;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.wlb-table th {
  background: var(--wlb-surface-2); color: var(--wlb-muted);
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  padding: 9px 8px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--wlb-line);
}
.wlb-table td {
  padding: 9px 8px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--wlb-line-soft); color: var(--wlb-text);
}
.wlb-table tbody tr:last-child td { border-bottom: 0; }
.wlb-table tbody tr:hover { background: rgba(255, 255, 255, .025); }
.wlb-table tr.is-live td { background: rgba(239, 68, 68, .05); }
.wlb-table .is-up { color: var(--wlb-up); }
.wlb-table .is-down { color: var(--wlb-down); }
.wlb-t-line { color: var(--wlb-muted); }
.wlb-t-time { text-align: left; color: var(--wlb-text-2); }
.wlb-t-day { display: block; font-size: 11px; color: var(--wlb-muted); }
.wlb-t-league { text-align: left; color: var(--wlb-muted); font-size: 12px; }
.wlb-t-team { text-align: left; min-width: 220px; }
.wlb-t-team span { color: var(--wlb-text); }
.wlb-t-team b { color: var(--wlb-muted); font-weight: 500; margin: 0 7px; }
.wlb-table--standings .wlb-t-team { display: flex; align-items: center; gap: 8px; }

/* ---------- Trang trận sắp theo trật tự xoilac (chủ so 30/07) ---------- */
/*
 * MỘT THANH duy nhất — chủ mắng 30/07 "chế nhiều rồi": bản cũ để bình chọn rơi
 * xuống hàng riêng, thừa nguyên khoảng trống phải. Của họ: chỉ số trái · đội-tỷ
 * số giữa · bình chọn phải, CÙNG MỘT HÀNG trong một hộp nền chung.
 */
.wlb-topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  margin-bottom: 14px; padding: 10px 16px;
  background: var(--wlb-surface); border: 1px solid var(--wlb-line);
  border-radius: var(--wlb-r);
}
.wlb-topbar .wlb-scoreboard--bar { flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0; }
.wlb-topbar .wlb-poll {
  /* T7 đo lại 03/08: bảng vote họ 420.2px và CO theo màn (386 @1280) — 0 1, không 0 0.
     Mục 1: bỏ viền trái — họ KHÔNG có (đo .team-vote viền 0). */
  flex: 0 1 420px; margin: 0; padding-top: 0; padding-bottom: 14px;
  background: none; border: 0;
  border-radius: 0; flex-flow: row wrap; align-content: center; align-items: center; gap: 8px 10px;
}
.wlb-topbar .wlb-poll__hoi { flex-basis: 100%; font-size: 13px; }
@media (max-width: 991px) {
  .wlb-topbar { flex-wrap: wrap; }
  .wlb-topbar .wlb-poll { flex: 1 1 100%; }
}
/* Mục 1 (khác biệt NẶNG NHẤT @390): họ đổi khối vote thành MỘT THẺ có nền + bo góc. */
@media (max-width: 575px) {
  .wlb-topbar .wlb-poll {
    background: rgb(41, 45, 46); border-radius: 7px; padding: 12px 5px;
    justify-content: center;
  }
}
/* Bảng tỷ số bản GỌN: đệm hẹp — nhường đất cho kèo ngay dưới.
 *
 * ⚠️ ĐÃ GỠ cặp luật `.wlb-scoreboard--bar .wlb-logo--lg{ 34px }` từng nằm ở đây
 * (05/08). Nó là số đo CŨ, đã bị bộ T4 ở cuối tệp đè hẳn bằng 49×49 — đo lại
 * 05/08 ở cả ba khổ 360/390/1280: logo ra đúng 49×49, flex-basis 49px, tức hai
 * dòng đó không còn vẽ ra gì. Giữ lại chỉ tổ làm người đọc sau tưởng bảng tỷ số
 * chạy 34px rồi đi sửa nhầm chỗ (chính bản ghi "logo ghim 34px" đã sinh ra từ
 * việc đọc hai dòng này chứ không phải từ số đo). Số đo thật sống ở khối T4.
 */
.wlb-scoreboard--bar { margin-top: 0; padding: 10px 14px; }

/* Cụm tab kèo đứng GIỮA thanh, Chọn nhà cái trái, tên nhà phải — như xoilac. */
.wlb-otab__nhom { display: flex; gap: 2px; margin: 0 auto; }

/* ---------- Thanh BA KHÚC Trực tiếp | Mô phỏng | Chia sẻ ôm khung phát ---------- */
.wlb-vtab { margin-bottom: 14px; }
.wlb-vtab__radio {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
.wlb-vtab__thanh {
  display: flex; overflow: hidden;
  background: var(--wlb-surface); border: 1px solid var(--wlb-line);
  border-radius: 10px 10px 0 0; /* T3 so do: ho bo 10 */ border-bottom: 0;
}
.wlb-vtab__nut {
  flex: 1 1 0; text-align: center; cursor: pointer;
  /* T3 sổ đo: nút 55px = 12 đệm ×2 + chữ 31. QC 03/08: thiếu line-height thì chữ 16px
     chỉ cao 22.4 → nút 46.4. (390: 43px = 10×2 + 23, media dưới.) */
  padding: 12px 10px; font-size: 16px; font-weight: 500; line-height: 31px;
  text-transform: uppercase; letter-spacing: .3px; color: var(--wlb-text-2);
}
.wlb-vtab__nut + .wlb-vtab__nut { border-left: 1px solid var(--wlb-line); }
.wlb-vtab__nut:hover { color: var(--wlb-text); background: var(--wlb-raised); }
#wlb-vtab-truc:checked ~ .wlb-vtab__thanh label[for="wlb-vtab-truc"],
#wlb-vtab-mophong:checked ~ .wlb-vtab__thanh label[for="wlb-vtab-mophong"],
#wlb-vtab-chiase:checked ~ .wlb-vtab__thanh label[for="wlb-vtab-chiase"] {
  /* T3 sổ đo TRANG TRẬN — cố tình KHÁC gradient nhãn live trang chủ. Bài học 1.71.19:
     script thay chuỗi khớp lần-đầu-tiên đã đè nhầm .wlb-badge--live, phá trang đóng băng. */
  background: linear-gradient(180deg, #042104 39.71%, #045830 119.12%); color: #fff;
}
#wlb-vtab-truc:focus-visible ~ .wlb-vtab__thanh label[for="wlb-vtab-truc"],
#wlb-vtab-mophong:focus-visible ~ .wlb-vtab__thanh label[for="wlb-vtab-mophong"],
#wlb-vtab-chiase:focus-visible ~ .wlb-vtab__thanh label[for="wlb-vtab-chiase"] {
  outline: 2px solid var(--wlb-accent); outline-offset: -2px;
}
.wlb-vtab__pane { display: none; }
#wlb-vtab-truc:checked ~ .wlb-vtab__pane[data-vpane="truc"],
#wlb-vtab-mophong:checked ~ .wlb-vtab__pane[data-vpane="mophong"],
#wlb-vtab-chiase:checked ~ .wlb-vtab__pane[data-vpane="chiase"] { display: block; }
.wlb-vtab__pane[data-vpane="mophong"],
.wlb-vtab__pane[data-vpane="chiase"] {
  padding: 14px; background: var(--wlb-surface);
  border: 1px solid var(--wlb-line); border-top: 0;
  border-radius: 0 0 var(--wlb-r-sm) var(--wlb-r-sm);
}

/* Hàng nút tắt dưới khối kèo — CĂN GIỮA đúng như dải nút của xoilac. */
/*
 * Hàng tab trong trang trận. Đo `.single-tab` của họ 31/07: MỘT THANH LIỀN trải
 * hết bề ngang — nền #292D2E, bo 6px, cao 36px — các mục nằm trong đó, mỗi mục
 * Oswald 13px/400 chữ TRẮNG, đệm 7px 15px, không nền riêng, không viền, không
 * cách nhau.
 * Mình đang để các VIÊN RỜI có viền, chữ hoa 12px/700, cách nhau 8px, căn giữa —
 * khác cả hình khối lẫn kiểu chữ.
 */
.wlb-mnut {
  display: flex; gap: 0; flex-wrap: wrap; margin: 0 0 14px;
  /* T6: desktop CĂN GIỮA như họ (mobile trả về flex-start ở media dưới). */
  justify-content: center;
  background: #292d2e; border-radius: 6px; min-height: 36px;
  overflow: hidden;
}
.wlb-mnut__muc {
  display: inline-flex; align-items: center;
  /* Mục KHÔNG co không gãy dòng — mobile cuộn ngang thay vì phồng 2 tầng (QC 03/08). */
  flex: 0 0 auto; white-space: nowrap;
  padding: 7px 15px; border-radius: 0; text-decoration: none;
  background: none; border: 0;
  color: var(--wlb-text);
  font-family: var(--wlb-font-so); font-size: 13px; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  transition: background .15s, color .15s;
}
.wlb-mnut__muc:hover { background: var(--wlb-raised); color: var(--wlb-text); }

/* ---------- Bình chọn TÀI/XỈU + So sánh nhà cái + Mô phỏng (chủ đòi 30/07) ---------- */
.wlb-poll {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--wlb-surface); border: 1px solid var(--wlb-line);
  border-radius: var(--wlb-r-sm); font-size: 13px;
}
/* Câu hỏi: TRẮNG + HOA như họ (đo .team-vote h5 màu #fff uppercase). */
.wlb-poll__hoi { color: #fff; font-weight: 600; text-transform: uppercase; }
/*
 * Nút bình chọn: HỘP bo 4px chữ TRẮNG nền GRADIENT đặc (đo .vote-btn: 98×28 bo 4,
 * không viên tròn, chữ trắng). Tài/Chủ nhà dùng gradient đo được rgb(28,170,23)→
 * rgb(0,90,25); Xỉu/Khách + Hòa CHƯA đo đủ nên giữ cùng NGÔN NGỮ (gradient đậm chữ
 * trắng) theo hệ màu up/down của mình — không chép mù màu chưa đo.
 */
.wlb-poll__nut {
  min-width: 98px; padding: 5px 8px; border-radius: 4px; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: .3px; color: #fff; text-align: center;
  transition: transform .12s;
}
.wlb-poll__nut--tai { background-image: linear-gradient(-180deg, rgb(28, 170, 23), rgb(0, 90, 25)); }
.wlb-poll__nut--xiu { background-image: linear-gradient(-180deg, #d64545, #8a1f1f); }
.wlb-poll__nut--hoa { background-image: linear-gradient(-180deg, #4a5568, #2b323d); }
.wlb-poll__nut:hover { transform: translateY(-1px); }
@media (max-width: 575px) { .wlb-poll__nut { min-width: 0; flex: 1 1 0; } }
.wlb-poll__nut b { font-weight: 700; margin-left: 4px; }
/* Đã bỏ phiếu: khoá bàn phím chuột, nút mình chọn sáng hẳn lên. */
.wlb-poll.is-da-bam .wlb-poll__nut { cursor: default; opacity: .55; transform: none; }
.wlb-poll.is-da-bam .wlb-poll__nut.is-chon { opacity: 1; box-shadow: 0 0 0 1px currentColor inset; }

/* Ba ô chỉ số kiểu xoilac: SỐ · icon · SỐ, mỗi cụm một hộp nhỏ. */
.wlb-stats__o {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 6px;
  background: var(--wlb-raised); border: 1px solid var(--wlb-line);
  font-size: 12px; color: var(--wlb-muted);
}
.wlb-stats__o b { color: var(--wlb-text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Chỉ số ở thanh đầu: nằm TRẦN trong thanh chung, không hộp riêng nữa. */
.wlb-stats--topbar { flex: 0 0 auto; align-self: center; }
.wlb-stats--topbar > span {
  padding: 5px 9px; background: var(--wlb-raised);
  border: 1px solid var(--wlb-line); border-radius: 6px;
}
.wlb-stats--topbar > span + span { border-left: 1px solid var(--wlb-line); padding-left: 9px; }
/* Băng chuyền: hai TRANG, trang is-hien mới hiện; chấm tròn + mũi tên hai bên. */
.wlb-poll--bang { position: relative; padding-left: 26px; padding-right: 30px; padding-bottom: 18px; }
.wlb-poll__trang { display: none; }
.wlb-poll__trang.is-hien { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 8px 10px; }
.wlb-poll__trang .wlb-poll__hoi { flex-basis: 100%; }
.wlb-poll__trang.is-da-bam .wlb-poll__nut { cursor: default; opacity: .55; }
.wlb-poll__trang.is-da-bam .wlb-poll__nut.is-chon { opacity: 1; box-shadow: 0 0 0 1px currentColor inset; }
/* Rule cũ nút Hòa (nền xám nhạt + viền) ĐÃ BỎ — nó đè gradient mới ở trên (mục 1,
   QC bắt: nút Hòa ra rgba(255,255,255,.07) không gradient). Nút Hòa dùng gradient
   ở `.wlb-poll__nut--hoa` phía trên cùng hệ với Tài/Xỉu. */
.wlb-poll__mui {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--wlb-muted); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px;
}
.wlb-poll__mui[data-poll-truoc] { left: 2px; }
.wlb-poll__mui[data-poll-sau] { right: 4px; }
.wlb-poll__mui:hover { color: var(--wlb-text); }
.wlb-poll__cham { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 5px; }
.wlb-poll__cham i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.wlb-poll__cham i.is-on { background: var(--wlb-accent); }

/* Ô "Chọn nhà cái" góc trái bảng kèo — details, KHÔNG phải select (luật cấm). */
.wlb-chonnha { position: relative; margin-right: 6px; }
/*
 * MỤC 4: nút "Chọn nhà cái" = CHỮ TRẦN (đo họ: không nền/viền/bo/đệm, 400, #fff).
 * Bảng xổ nền TRẮNG viền rgb(204,204,204) như họ. Chỉ dùng ở bảng kèo mini trang trận.
 */
.wlb-chonnha__nut {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 400; color: #fff; white-space: nowrap;
}
.wlb-chonnha__nut::-webkit-details-marker { display: none; }
.wlb-chonnha[open] .wlb-chonnha__nut { color: #fff; }
.wlb-chonnha__ds {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  margin: 0; padding: 0; list-style: none; min-width: 117px;
  background: #fff; border: 1px solid rgb(204, 204, 204);
  border-radius: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  max-height: 260px; overflow-y: auto;
}
.wlb-chonnha__muc {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 7px 12px; border: 0; border-bottom: 1px solid #eee; border-radius: 0; background: none;
  color: #222; font-size: 12px; font-weight: 400;
}
.wlb-chonnha__muc:hover { background: #f0f0f0; color: #000; }

/* ---------- Cột phải 10 NGĂN tab icon như xoilac (chủ soi 15 ảnh 30/07) ---------- */
.wlb-side {
  background: var(--wlb-surface); border: 1px solid var(--wlb-line);
  border-radius: var(--wlb-r); overflow: hidden;
}
/* MỘT HÀNG như thanh icon xoilac — không gãy hai hàng (chủ chê 30/07);
   chật thì cuộn ngang, thanh cuộn giấu đi. */
.wlb-side__thanh {
  display: flex; align-items: center; gap: 1px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
  /*
   * SỐ ĐO CỦA HỌ, đọc từ DOM sống xoilac @1920 (`_soi-out/keo3/ho-tran-1920.json`):
   *     .as-tabs-icon        438,3 × 57      y = 472
   *     .as-tabs-icon__item      22 × 32      y = 484  → đệm 12 trên / 13 dưới
   * Bề rộng ngăn 22px chính là bề rộng ICON của họ; mình để svg 20px nên nhỏ hơn.
   *
   * Nâng svg 20 → 22 (nút thành 34) và hạ đệm 12/13 → 11/12 để thanh vẫn ĐÚNG 57px
   * trên máy tính — không tự ý rời con số đã đo.
   */
  padding: 11px 8px 12px; border-bottom: 1px solid var(--wlb-line);
  background: var(--wlb-surface-2);
}
.wlb-side__thanh::-webkit-scrollbar { display: none; }
.wlb-side__nut {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  /* nút 34 = svg 22 + đệm 6×2. */
  padding: 6px; border: 0; border-radius: 6px; cursor: pointer;
  background: none; color: var(--wlb-muted);
}
.wlb-side__nut svg { width: 22px; height: 22px; }
.wlb-side__nut:hover { color: var(--wlb-text); background: var(--wlb-raised); }
/* Ngăn đang mở: viên xanh + hiện nhãn chữ — các ngăn khác chỉ icon (như xoilac). */
.wlb-side__nhan { display: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.wlb-side__nut.is-on {
  /*
   * MỤC 3 (câu hỏi chính của chủ 03/08): đo `.as-tabs-icon__item.as-active` của họ
   * = NỀN GRADIENT ĐẶC, KHÔNG VIỀN. Bản cũ mình để viền neon rỗng (box-shadow inset).
   * Icon giữ neon #00FF5E — đó là màu active họ dùng khắp trang trận.
   */
  color: #00ff5e;
  background-color: transparent;
  background-image: linear-gradient(-90deg, rgb(50, 56, 57), rgb(47, 90, 73));
}
.wlb-side__nut.is-on .wlb-side__nhan { display: inline; }
/* 596px = khung phát 543 + thanh 3 khúc ~44 + viền: cột phải đứng ĐÚNG ngang khung
   phát (đo mm99 30/07 bản trước: side 506 vs khung 660 — cụt 154px). */
.wlb-side__ngan { display: none; padding: 10px; min-height: 596px; max-height: 660px; overflow-y: auto; scrollbar-width: thin; }
/* Flex column để ruột (chat…) giãn đầy ngăn — mục 2: min-height:100% không ăn khi
   cha chỉ có min-height, phải cho cha flex thì con flex:1 mới nuốt hết chiều cao. */
.wlb-side__ngan.is-hien { display: flex; flex-direction: column; }
.wlb-side__trong {
  padding: 40px 10px; text-align: center;
  color: var(--wlb-muted); font-size: 13px;
}

/*
 * Máy tính bảng & điện thoại: cột phải NẰM DƯỚI khung phát nên không cần ép cao
 * bằng khung nữa — giữ min-height là để lại một khoảng trống dài thượt.
 * Thanh ba khúc cũng thu chữ đúng như xoilac (đọc CSS của họ: ≤390px là
 * `font-size: 11px; gap: 4px; padding: 6px`).
 */
@media (max-width: 991px) {
  .wlb-side__ngan { min-height: 0; max-height: 520px; }
  /*
   * MỤC 2 (bug mobile): ngăn CHỨA CHAT phải giữ chiều cao ~596 như họ (đo .as-match-
   * detail 652, ruột 595). Luật chung min-height:0/max-height:520 làm vỏ chat tụt còn
   * 250px trên mobile — khung chat cụt lủn. Chỉ ngăn có .wlb-chat mới cần cao.
   */
  .wlb-side__ngan:has(.wlb-chat) { min-height: 596px; max-height: none; overflow: visible; }
  /*
   * THANH ICON THẤP LẠI trên màn hẹp (chủ chỉ 05/08: "icon thì thấp mà khung thì cao").
   *
   * 57px là số đo THẬT của họ nhưng đo ở 1920, nơi cột phải rộng 438px và thanh nằm
   * cạnh khung phát. Trên điện thoại cột phải tụt XUỐNG DƯỚI khung phát, thanh trải hết
   * bề ngang, và 11+12 đệm quanh một icon 22px đọc ra thành một dải trống hai đầu:
   * icon chỉ chiếm 34,5% chiều cao thanh (đo 05/08, khổ 390).
   * Bóp đệm còn 6/7 → thanh 47px, icon chiếm 46,8%, viên đang chọn 72%.
   * Máy tính KHÔNG đổi: vẫn đúng 57px như họ.
   */
  .wlb-side__thanh { padding: 6px 8px 7px; }
}
@media (max-width: 575px) {
  /* T3 @390: nút 43px = 10 đệm ×2 + chữ 23. */
  .wlb-vtab__nut { font-size: 12px; padding: 10px 6px; line-height: 23px; }
}
@media (max-width: 390px) {
  .wlb-vtab__nut { font-size: 11px; padding: 10px 6px; line-height: 23px; letter-spacing: 0; }
}

/* BXH thu nhỏ trong ngăn. */
.wlb-bxh-mini { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.wlb-bxh-mini th { text-align: left; color: var(--wlb-muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--wlb-line); }
.wlb-bxh-mini td { padding: 5px 6px; border-bottom: 1px solid var(--wlb-line); color: var(--wlb-text-2); }
.wlb-bxh-mini tr:last-child td { border-bottom: 0; }
.wlb-bxh-mini__doi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; color: var(--wlb-text); }
.wlb-bxh-mini .is-doi-nay td { background: color-mix(in srgb, var(--wlb-accent) 10%, transparent); }

/* Kèo thu nhỏ trong ngăn cột phải — cùng bộ ô với bảng kèo lớn, chỉ hẹp hơn. */
.wlb-keo-mini { display: flex; flex-direction: column; gap: 8px; }
.wlb-keo__hang--mini { grid-template-columns: 62px repeat(3, 1fr); }

/* TT trận: nhãn trái mờ, giá trị phải rõ. */
.wlb-tttran { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.wlb-tttran > div {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 6px; border-bottom: 1px solid var(--wlb-line);
}
.wlb-tttran > div:last-child { border-bottom: 0; }
.wlb-tttran dt { color: var(--wlb-muted); font-size: 12px; }
.wlb-tttran dd { margin: 0; color: var(--wlb-text); font-size: 13px; font-weight: 600; text-align: right; }

/* Hàng nút đầu chat như xoilac: các nút CHIA ĐỀU một hàng, Tắt chat cuối.
   Nhãn "Phòng chung · Chỉ xem" là dòng chữ mờ riêng bên dưới — bản cũ nhét nó
   giữa hàng nút thành cục méo (chủ chê 30/07). */
.wlb-chat__congdong { display: flex; gap: 6px; padding: 8px 10px 0; flex-wrap: nowrap; }
.wlb-chat__nutcd {
  flex: 1 1 0; text-align: center;
  padding: 6px 10px; border-radius: 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; text-decoration: none;
  border: 0; cursor: pointer; color: #fff; white-space: nowrap;
}
.wlb-chat__nutcd--tg { background: #2aabee; }
.wlb-chat__nutcd--fb { background: #1877f2; }
/*
 * "Tắt chat" CHIA ĐỀU như hai nút kia (chủ chỉ 05/08). `flex: 0 0 auto` co nút theo
 * bề rộng chữ, nên khi chưa khai link Telegram/Facebook thì nó còn lại một mình,
 * bé tí, dính mép trái — đúng cái "đứng lủi thủi" chủ chê.
 * Nền ĐEN như nút TẮT CHAT của họ, không phải xám nổi.
 */
.wlb-chat__tat { background: #1c1f20; color: var(--wlb-text-2); flex: 1 1 0; }
.wlb-chat__badge {
  display: block; padding: 6px 12px 0; font-size: 11px; color: var(--wlb-muted);
}
/* Tắt chat: giấu phần tin nhắn, giữ đầu khung để còn nút bật lại. */
.wlb-chat.is-tat .wlb-chat__list,
.wlb-chat.is-tat .wlb-chat__note,
.wlb-chat.is-tat .wlb-chat__pin { display: none; }

/* Bảng so nhà cái nằm trong panel — bỏ lề trang của .wlb-table-wrap. */
.wlb-panel__body .wlb-table-wrap { margin: 0; border-radius: var(--wlb-r-sm); }
.wlb-sosanh { min-width: 640px; }
.wlb-sosanh__nha { font-weight: 600; color: var(--wlb-text); white-space: nowrap; }

/* Khối MÔ PHỎNG TRẬN ĐẤU full-ngang dưới lưới hai cột — như mục cùng tên của xoilac. */
.wlb-mophong-khoi { margin: 0 14px 18px; }

/* Panel GẤP (details) — bảng so nhà cái không chiếm đất khi chưa cần, mở bằng
   nút cùng tên ở hàng nút. Khung phát nhờ đó đứng cao ngang xoilac. */
/*
 * LỀ RIÊNG cho hộp gấp (chủ chỉ 05/08 — lỗi 4: "So sánh nhà cái" dính chữ dưới).
 *
 * Hai chuyện, cùng một gốc: `.wlb-panel` chỉ khai `margin-top: 12px` và KHÔNG khai
 * lề ngang, còn hai khối kề nó ở cuối trang trận — `.wlb-mophong-khoi` bên trên và
 * `.wlb-intro` bên dưới — đều là `margin: … 14px …`. Nên hộp gấp vừa dính sát khối
 * dưới (đo được khe ĐÚNG 0px) vừa thò rộng hơn hai khối kia 14px mỗi bên.
 * Khai đủ bốn phía, cùng nhịp 18px với `.wlb-mophong-khoi`; đúng vậy cả khi ĐÓNG
 * lẫn khi MỞ vì lề nằm trên chính `<details>`, không phụ thuộc ruột.
 */
.wlb-gap { margin: 12px 14px 18px; }
.wlb-gap__nut {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wlb-gap__nut::-webkit-details-marker { display: none; }
.wlb-gap__dau { color: var(--wlb-muted); font-size: 12px; transition: transform .15s; }
.wlb-gap[open] .wlb-gap__dau { transform: rotate(180deg); }

/* Ba vòng mô phỏng — nhà = màu xanh (up), khách = màu đỏ (down), số hai bên vòng. */
/* --------------------------------------------------------------------------
   SÂN CỎ + HỘP THÔNG SỐ — nửa trên khối "Mô phỏng trận đấu" của xoilac.
   Sân là SVG tự vẽ nên co giãn tuỳ ý, không tải ảnh, không phụ thuộc JS.
   -------------------------------------------------------------------------- */
.wlb-mps {
  margin-bottom: 14px; border-radius: var(--wlb-r-sm);
  overflow: hidden; border: 1px solid var(--wlb-line);
}
/*
 * Mặt sân là LỚP NỀN, hộp số là ruột — sân giãn theo hộp chứ không ngược lại.
 *
 * Bản cũ: sân cao cứng 210px, hộp `position:absolute; top:50%`. Hai tật đi kèm —
 * (a) trận có đủ 5–6 chỉ số thì hộp cao hơn 210 và bị `overflow:hidden` CẮT CỤT
 * hàng cuối; (b) từ lúc có hàng đội bên dưới, "giữa" tính theo cả khối nên hộp
 * trôi xuống đè lên hàng đội. Cả hai chỉ lộ ra khi CHỤP ẢNH — số đo bề rộng
 * không hé một chữ nào.
 */
.wlb-mps__khung {
  position: relative; min-height: 210px; padding: 14px 0;
  display: flex; align-items: center; justify-content: center;
}
.wlb-mps__san { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Hộp số nổi giữa sân — nền tối mờ để số luôn đọc được trên nền cỏ. */
/*
 * Hộp số nổi GIỮA sân, KHÔNG phủ kín.
 *
 * Bản đầu để `inset:12px` — hộp ăn gần trọn mặt sân, chỉ còn viền cỏ mỏng, tức vẽ
 * sân xong rồi che mất (thấy ngay khi chụp ảnh khổ 390). Bên xoilac hộp chỉ chiếm
 * phần giữa, cỏ lộ rõ hai bên. Neo giữa + chặn bề ngang thay cho `inset`.
 */
.wlb-mps__hop {
  /* `relative` + z-index để nổi TRÊN lớp sân (phần tử định vị vẽ sau phần tử
     thường; sân nay là `absolute` nên không có dòng này là hộp bị sân phủ kín). */
  position: relative; z-index: 1;
  width: min(268px, calc(100% - 40px));
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px; border-radius: var(--wlb-r-sm);
  background: rgba(14, 18, 20, .84); backdrop-filter: blur(2px);
}
.wlb-mps__tit {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--wlb-text); text-align: center; margin-bottom: 2px;
}
/* Số nhà · tên · số khách trên một hàng, thanh tỉ lệ nằm dưới suốt bề ngang. */
.wlb-mps__hang {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; gap: 0 8px;
  align-items: center; font-size: 12px;
}
.wlb-mps__hang b { font-weight: 700; color: var(--wlb-text); font-variant-numeric: tabular-nums; }
.wlb-mps__hang b:first-child { text-align: left; }
.wlb-mps__hang b:nth-child(3) { text-align: right; }
.wlb-mps__ten { text-align: center; color: var(--wlb-text-2); font-size: 11px; }
.wlb-mps__thanh {
  grid-column: 1 / -1; height: 4px; border-radius: 2px;
  background: var(--wlb-down); overflow: hidden;
}
.wlb-mps__thanh i { display: block; height: 100%; background: var(--wlb-up); }

/* --------------------------------------------------------------------------
   HÀNG ĐỘI DƯỚI SÂN CỎ — [cờ · tên · chip góc/thẻ] · [tỷ số + trạng thái] · đối xứng.

   Trước đây mặt sân cụt ngay dưới hộp số: hộp chỉ có hai cột số trần, không chỗ
   nào ghi bên trái là đội nào. Hàng này đóng khối lại đúng như xoilac.
   -------------------------------------------------------------------------- */
.wlb-mpd {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 10px;
  padding: 9px 12px; border-top: 1px solid var(--wlb-line);
  background: var(--wlb-surface-2); font-size: 13px;
}
.wlb-mpd__ben { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wlb-mpd__ben--away { flex-direction: row; justify-content: flex-end; }
/* `min-width:0` ở ô lưới thôi chưa đủ — chính thẻ chữ mới là chỗ ellipsis bám vào. */
.wlb-mpd__ten {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--wlb-text); font-weight: 500;
}
.wlb-mpd__chips { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.wlb-mpd__chip {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--wlb-text-2); font-size: 12px; font-variant-numeric: tabular-nums;
}
.wlb-mpd__giua { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wlb-mpd__giua b {
  font-family: Oswald, Barlow, sans-serif; font-size: 17px; font-weight: 700;
  color: var(--wlb-text); font-variant-numeric: tabular-nums;
}
@media (max-width: 575px) {
  /* @390 hàng chỉ còn ~330px: bỏ chip góc/thẻ để tên đội không teo lại thành "M…".
     Số góc/thẻ vẫn còn nguyên trong hộp "Thông số trận đấu" ngay phía trên, nên
     đây là bỏ chỗ TRÙNG chứ không mất dữ liệu. */
  .wlb-mpd { gap: 6px; padding: 8px 10px; font-size: 12px; }
  .wlb-mpd__chips { display: none; }
}

/* --------------------------------------------------------------------------
   BIỂU ĐỒ NHỊP TRẬN — dải 0→90', nhà ở trên, khách ở dưới.
   -------------------------------------------------------------------------- */
.wlb-nhip {
  position: relative; margin-bottom: 14px; padding: 6px 10px;
  background: var(--wlb-surface-2); border: 1px solid var(--wlb-line);
  border-radius: var(--wlb-r-sm);
}
.wlb-nhip__hang { position: relative; height: 22px; }
.wlb-nhip__truc {
  position: relative; height: 18px; border-top: 1px solid var(--wlb-line);
  border-bottom: 1px solid var(--wlb-line); background: rgba(255, 255, 255, .03);
}
.wlb-nhip__truc span {
  position: absolute; top: 2px; transform: translateX(-50%);
  font-size: 10px; color: var(--wlb-muted); white-space: nowrap;
}
/*
 * Dấu sự kiện — hình tròn nhỏ, KHÔNG dùng emoji: emoji mỗi hệ điều hành vẽ một
 * kiểu và cỡ khác nhau, đặt cạnh nhau trên một dải hẹp là so le ngay.
 */
.wlb-nhip__dau {
  position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 1px solid rgba(0, 0, 0, .45);
}
.wlb-nhip--goal { background: var(--wlb-text); }
.wlb-nhip--yellow { background: #f0b429; border-radius: 1px; width: 7px; height: 9px; }
.wlb-nhip--red { background: #ef4444; border-radius: 1px; width: 7px; height: 9px; }
/*
 * ĐƯỜNG CONG lượn qua các dấu — phủ TRỌN ba dải (22 + 18 + 22 = 62), đúng khung
 * nhìn `0 0 100 62` mà PHP dựng. Đổi chiều cao ba dải ở trên thì phải đổi cả khung
 * nhìn kia, không thì nét lệch khỏi dấu.
 *
 * `pointer-events: none` là BẮT BUỘC: nét nằm đè lên dấu, không chặn thì rê chuột
 * vào dấu không ra chú giải phút/cầu thủ nữa.
 */
.wlb-nhip__duong {
  position: absolute; left: 10px; right: 10px; top: 6px; height: 62px;
  width: calc(100% - 20px); pointer-events: none;
  color: color-mix(in srgb, var(--wlb-accent) 55%, transparent);
}

.wlb-mophong {
  display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
  padding: 14px 10px 18px; margin-bottom: 14px;
  background: linear-gradient(160deg, rgba(34, 197, 94, .10) 0%, rgba(34, 197, 94, .03) 100%);
  border: 1px solid var(--wlb-line); border-radius: var(--wlb-r-sm);
}
.wlb-mophong__muc { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wlb-mophong__vong { position: relative; display: flex; align-items: center; gap: 8px; }
.wlb-mophong__vong i,
.wlb-mophong__vong em {
  font-style: normal; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; min-width: 22px; text-align: center;
}
.wlb-mophong__vong i { color: var(--wlb-up); }
.wlb-mophong__vong em { color: var(--wlb-down); }
.wlb-mophong__muc span { font-size: 12px; color: var(--wlb-text-2); }
.wlb-t-pos { color: var(--wlb-muted); width: 34px; }
.wlb-t-pts { font-weight: 700; color: var(--wlb-accent); }

/* ---------- Logo cỡ nhỏ ---------- */
.wlb-logo--sm { width: 26px; height: 26px; flex: 0 0 26px; font-size: 11px; }
.wlb-logo--xs { width: 18px; height: 18px; flex: 0 0 18px; font-size: 11px; }

/* ---------- Khối hướng dẫn khi chưa cấu hình (chỉ quản trị viên thấy) ---------- */
.wlb-setup {
  margin: 14px; padding: 22px 24px;
  background: var(--wlb-surface); border: 1px dashed var(--wlb-raised);
  border-radius: var(--wlb-r); text-align: center;
}
.wlb-setup__title {
  font-size: 15px; font-weight: 500; color: var(--wlb-text); margin-bottom: 6px;
}
.wlb-setup p { margin: 0 auto 14px; max-width: 52ch; color: var(--wlb-text-2); font-size: 14px; }
.wlb-setup__btn {
  display: inline-block; padding: 9px 20px; border-radius: 6px;
  background: var(--wlb-accent); color: #04140b;
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.wlb-setup__btn:hover { filter: brightness(1.08); }
.wlb-setup__hint {
  margin: 14px auto 0 !important; font-size: 12px; color: var(--wlb-muted);
}
.wlb-setup code {
  background: var(--wlb-raised); padding: 1px 5px; border-radius: 3px;
  font-size: 12px; color: var(--wlb-text-2);
}


/* ---------- Thanh công cụ: lọc + chọn giải ---------- */
/*
 * Hàng lọc: `gap 15px`, KHÔNG đệm dọc — đo `.filter-match` của họ @1920: 990×**34**,
 * `padding 0`, `gap 15px`. Mình đang cao 50 vì `padding-bottom: 14px` và gap 10.
 * Khoảng hở tới lưới trận nằm ở `margin-bottom`, để nó không cộng vào chiều cao khối
 * (chiều cao khối là thứ bộ so ảnh đối chiếu).
 */
/* `flex-start` chứ không `center`: hàng chip của họ bám MÉP TRÊN hàng 36px (265..299,
   chiều cao hàng do ô chọn giải quyết định); `center` chia đôi 2px thừa nên hàng chip
   của mình tụt xuống 266. `margin-bottom: 30px` = `.grid-matches_wrapper{margin-top:30}`
   của họ — 32px cũ đẩy lưới xuống 333 trong khi họ 331. */
.wlb-toolbar {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 0 14px; margin-bottom: 30px; flex-wrap: wrap;
}
.wlb-toolbar .wlb-filters { padding: 0; flex: 1; min-width: 0; }
/*
 * Màn hẹp: hàng chip và ô chọn giải MỖI THỨ MỘT DÒNG.
 *
 * Chủ báo 31/07 "lệch hàng rồi cắt tè le". Đo ở khổ 375px: hai thứ này nằm
 * cùng một dòng nên hàng chip bị bóp còn 168px — chỉ thấy "LIVE" và nửa chữ
 * "BLV", ô chọn giải chiếm 169px ngay cạnh. Xoilac ở khổ này cũng tách: dãy
 * chip cuộn ngang một dòng, nút LIVESCORE + ô chọn giải xuống dòng dưới.
 */
/*
 * Ô CHỌN GIẢI XUỐNG DÒNG TỪ 1199px, KHÔNG PHẢI TỪ 767px.
 *
 * Đo chuỗi đầu trang ở 1024 ngày 01/08, quy về mép trên khối thân:
 *
 *              dải trận  tab môn     h1        hàng lọc     lưới
 *     HỌ       0..112    141..200   213..243   272..359     389
 *     MÌNH     0..112    137..181   206..236   265..301     333
 *
 * Lưới của mình bắt đầu SỚM HƠN 56px, và 51px trong đó nằm ở hàng lọc: cột 930 vẫn đủ
 * chỗ nên ô chọn giải của mình ở lại cùng dòng với dãy chip, còn của họ đã tụt xuống
 * dòng thứ hai. Lệch 56px ở đầu trang thì mọi thẻ trận bên dưới lệch theo suốt trang —
 * và vì thẻ đã khớp từng pixel, đó chính là phần lớn con số còn lại ở máy tính bảng.
 */
@media (max-width: 1199.98px) {
  /* row-gap 3 chứ không 5: hàng chip của họ hết ở 313, hàng chọn giải bắt đầu 316. */
  .wlb-toolbar { flex-wrap: wrap; row-gap: 3px; padding: 7px 14px; margin-bottom: 30px; }
  .wlb-toolbar .wlb-filters { flex: 1 0 100%; }
  .wlb-toolbar .wlb-ldrop { flex: 1 0 100%; }
  .wlb-toolbar .wlb-ldrop__nut { width: 100%; justify-content: space-between; }
  .wlb-toolbar .wlb-ldrop__hien { max-width: none; }

  /* Dải tab môn của họ ở bậc này cao 59 (141..200) rồi cách h1 13px — khối phải kết
     thúc ở 213 chứ không phải 206.
     34/23 chứ không 29/28: TỔNG dải vẫn 101 (34+44+23) nên `do-hinh` không bắt được,
     nhưng VIÊN TAB của họ nằm 146..190 còn của mình 141..185 — lệch 5px, và đó là thứ
     bộ so ảnh nhìn thấy. Tổng bằng nhau ≠ ruột giống nhau. */
  .wlb-sports { padding: 34px 14px 23px; gap: 3px; }
}


/* ---------- Gỡ kiểu theme chèn vào form ----------
   Đo trên okkingf.club 29/07: theme đặt `margin-bottom:12.5px` và
   `font-weight:700` cho <select> — viên thuốc chọn giải cao 53,4px thay vì
   34px của đối thủ, và nhãn bị in đậm sai. Theme nào cũng có thói này.

   Bọc trong :where() để độ ưu tiên bằng KHÔNG: đây chỉ là mức nền, mọi luật
   có tên lớp bên dưới đều thắng nó mà không cần !important.

   ĐỔI LẠI, mức nền này YẾU hơn luật của theme: Flatsome dùng
   `input[type="search"]` (một thẻ + một thuộc tính) nên thắng cả `.wlb-ldrop__tim`
   một lớp — đo 29/07 thấy ô tìm vẫn dính viền #ddd. Nên bốn phần tử form thật
   của mình được viết dưới dạng `.wlb .wlb-<tên>` để đủ sức, xem cuối tệp. */
:where(.wlb) :where(button, input, select, textarea, label, summary, fieldset, legend) {
  margin: 0; padding: 0; border: 0; outline: 0;
  background: none; box-shadow: none; border-radius: 0;
  font: inherit; font-weight: 400; line-height: 1.4; letter-spacing: normal;
  color: inherit; text-transform: none; min-height: 0; height: auto;
  -webkit-appearance: none; appearance: none;
}

/* ---------- Ô chọn giải đấu ----------
   Số đo lấy từ `.custom-dropdown-trigger` của cakhia (29/07): cao 34px, chữ
   13px cân 400, bo 30px, cách 10px. Bảng xổ của họ: nền rgb(20,21,22), bo 6px,
   đổ bóng rgba(0,0,0,.5) 0 0 24px. */
.wlb-ldrop { position: relative; flex: 0 0 auto; }
.wlb-ldrop__nut {
  display: inline-flex; align-items: center; gap: 10px;
  /* Do .custom-dropdown-trigger cua ho 31/07: 178x36, nen #292D2E, bo 8px,
     dem 8px 16px, Raleway 13px/500, chu rgba(255,255,255,.77). Minh dang de
     vien mong bo 30px chu trang — nhin nhu mot the loc chu khong ra o chon. */
  height: 36px; padding: 8px 16px; border-radius: 8px;
  /* Viền 1px #3B4041 như họ — `border: 0` cũ còn giết luôn hiệu ứng :hover đổi viền. */
  background: #292d2e; border: 1px solid #3b4041;
  font-family: Raleway, Barlow, sans-serif;
  font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .77);
  cursor: pointer; user-select: none; white-space: nowrap;
  /* Gỡ hình tam giác mặc định của <summary> ở cả hai họ trình duyệt. */
  list-style: none;
}
.wlb-ldrop__nut::-webkit-details-marker { display: none; }
.wlb-ldrop__nut:hover { border-color: var(--wlb-raised); }
.wlb-ldrop__huy { flex: 0 0 auto; color: var(--wlb-muted); }
.wlb-ldrop__hien { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.wlb-ldrop__mui { flex: 0 0 auto; color: var(--wlb-muted); transition: transform .18s; }
.wlb-ldrop[open] .wlb-ldrop__mui { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .wlb-ldrop__mui { transition: none; } }

.wlb-ldrop__bang {
  /* Neo PHAI: nut nam cuoi thanh cong cu, neo trai thi bang tran khoi mep khoi.
     Do 29/07: neo trai lam bang thua ra ~94px ben ngoai. */
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0;
  width: 340px; max-width: calc(100vw - 24px);
  background: #141516; border: 1px solid var(--wlb-line);
  border-radius: 6px; box-shadow: 0 0 24px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.wlb-ldrop__dau {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--wlb-line);
  font-size: 12px; color: var(--wlb-muted);
}
.wlb-ldrop__dau b { font-weight: 700; color: var(--wlb-text-2); }
.wlb-ldrop__dong {
  display: flex; padding: 4px; border-radius: 4px;
  color: var(--wlb-muted); cursor: pointer;
}
.wlb-ldrop__dong:hover { color: var(--wlb-text); background: var(--wlb-raised); }

/* Ghi RO tung thuoc tinh: khoi :where() o tren co do uu tien BANG KHONG nen
   bat ky luat nao cua theme co mot lop hay mot thuoc tinh
   (vi du `input[type="search"]` cua Flatsome) deu thang no. */
.wlb-ldrop__tim {
  display: block; width: 100%; padding: 9px 12px;
  border: 0; border-bottom: 1px solid var(--wlb-line); border-radius: 0;
  background: transparent; box-shadow: none; outline: 0;
  color: var(--wlb-text); font-size: 13px; font-family: inherit; font-weight: 400;
  height: auto; min-height: 0; margin: 0;
}
.wlb-ldrop__tim:focus { border-bottom-color: var(--wlb-accent); }
.wlb-ldrop__tim::placeholder { color: var(--wlb-muted); }

/* Do bang xo cua cakhia 29/07: danh sach cao toi da 450px. */
.wlb-ldrop__ds { max-height: 420px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; }
.wlb-ldrop__ds li { margin: 0; }
.wlb-ldrop__muc {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 9px; border-radius: 5px;
  font-size: 13px; color: var(--wlb-text-2); text-decoration: none;
}
.wlb-ldrop__muc:hover { background: var(--wlb-raised); color: var(--wlb-text); }
.wlb-ldrop__muc.is-on { color: var(--wlb-accent); background: color-mix(in srgb, var(--wlb-accent) 13%, transparent); }
.wlb-ldrop__ico { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; object-fit: contain; }
.wlb-ldrop__ten { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.wlb-ldrop__so { flex: 0 0 auto; margin-top: 2px; font-size: 11px; color: var(--wlb-muted); font-variant-numeric: tabular-nums; }
.wlb-ldrop__trong { padding: 14px 12px; font-size: 13px; color: var(--wlb-muted); text-align: center; }

a.wlb-chip { text-decoration: none; color: inherit; }

/* ---------- Màn xem trận ---------- */
.wlb-match { padding: 0 0 22px; }
.wlb-crumb {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 12px 16px; font-size: 13px; color: var(--wlb-muted);
}
.wlb-crumb a { color: var(--wlb-text-2); text-decoration: none; }
.wlb-crumb a:hover { color: var(--wlb-accent); }
.wlb-crumb strong { color: var(--wlb-text); font-weight: 500; }

/*
 * Trang trận chia cột 2:1 — đo trên trang trận của họ 30/07: .play_main_left
 * là col-lg-8 rộng 907px, .play_main_right là col-lg-4 rộng 453px, trong khung
 * 1360px. Mình đang neo cột phải CỨNG 316px, tức hẹp hơn họ gần 140px và càng
 * màn to càng lệch (cột trái nở ra, cột phải đứng yên). Đổi sang tỉ lệ để cả
 * hai cùng nở đúng nhịp của họ.
 */
.wlb-match__grid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px; padding: 0 16px; align-items: start;
}
/* Trang trận của họ dựng bằng cột Bootstrap col-lg-*, tức gãy xuống một cột ở
   991px. Mình để 980px — lệch một dải 11px, chỉnh cho trùng. */
@media (max-width: 991px) { .wlb-match__grid { grid-template-columns: 1fr; } }
/* min-width:0 để nội dung dài (tên đội, dòng chat) không làm phình cột lưới. */
.wlb-match__main, .wlb-match__side { min-width: 0; }

/* Khung hình 16:9 — không bao giờ để trống, không có luồng thì phát quảng cáo.
   Chặn chiều cao theo màn hình để bảng tỷ số luôn nhìn thấy, khỏi phải kéo xuống. */
.wlb-stage {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  max-width: calc((100vh - 230px) * 16 / 9); margin-inline: auto;
  background: #14181c; border-radius: var(--wlb-r); overflow: hidden;
  border: 1px solid var(--wlb-line);
}
.wlb-stage__video { width: 100%; height: 100%; object-fit: contain; background: #14181c; display: block; }
.wlb-stage.is-clickable { cursor: pointer; }
.wlb-stage__msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .62); color: #fff; font-size: 13px;
  padding: 9px 16px; border-radius: 999px; pointer-events: none;
}
.wlb-stage__note {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: 20px; text-align: center; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, #101822, #05080b);
}
/* "du-phong" chu KHONG phai "is-ad": adblock co luat token .is-ad — do tren
   mm99 30/07, khung video quang cao bi display:none !important, go lop la hien. */
.wlb-stage.is-du-phong .wlb-stage__note { background: none; }
.wlb-stage__note strong { font-size: 15px; color: var(--wlb-text); }
.wlb-stage__note p { margin: 0; font-size: 13px; color: var(--wlb-text-2); max-width: 420px; }
.wlb-stage__note a { color: var(--wlb-accent); pointer-events: auto; }

/* Hàng chọn bình luận viên */
.wlb-blvbar { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: thin; }
.wlb-blvbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  /* T8 sổ đo 03/08: chip 26px bo 2px KHÔNG viền, đang phát nền #009B3A
     (QC: đệm 6 + avatar 26 làm chip phồng 40px). */
  padding: 4px 10px 4px 5px; border-radius: 2px; cursor: pointer;
  background: var(--wlb-surface); border: 0;
  color: var(--wlb-text-2); font-size: 13px; font-family: inherit;
  transition: color .15s, background .15s;
}
.wlb-blvbtn:hover { background: var(--wlb-surface-2); color: var(--wlb-text); }
.wlb-blvbtn.is-on {
  /* Chữ TRẮNG trên nền #009B3A — dòng `color: var(--wlb-text)` cũ đè mất #fff (QC 03/08). */
  background: #009b3a; color: #fff;
}
.wlb-blvbtn img, .wlb-blvbtn__ini {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px;
  object-fit: cover; background: var(--wlb-raised);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--wlb-text-2);
}

/* Bảng điện tử dưới khung hình */
.wlb-scoreboard {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  margin-top: 12px; padding: 16px;
  background: var(--wlb-surface); border: 1px solid var(--wlb-line); border-radius: var(--wlb-r);
}
/* .teambox__team-name của họ: Raleway 14px/700 — đậm hơn và nhỏ hơn mình một
   bậc, nên tên hai đội đứng chắc hai bên tỉ số thay vì loãng ra. */
.wlb-scoreboard__team {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  font-family: Raleway, Barlow, sans-serif;
  font-size: 14px; font-weight: 700;
}
/* Tên đội là <a> mở hồ sơ đội — không ép màu thì ăn màu link ĐỎ của theme
   (đo mm99 30/07: "Maccabi Tel Aviv" đỏ lòm giữa bảng tỷ số; xoilac chữ trắng). */
.wlb-scoreboard__team a { color: var(--wlb-text); text-decoration: none; }
.wlb-scoreboard__team a:hover { color: var(--wlb-accent); }
.wlb-scoreboard__team--away { flex-direction: row-reverse; text-align: right; }
/* `white-space: nowrap` BẮT BUỘC — thiếu nó thì `text-overflow:ellipsis` vô hiệu,
   tên đội dài xổ ~4 dòng @390 làm vỡ chiều cao scoreboard (QC 03/08 bắt). */
.wlb-scoreboard__team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlb-logo--lg { width: 46px; height: 46px; flex: 0 0 46px; font-size: 15px; }
.wlb-logo--lg img { width: 46px; height: 46px; }
.wlb-scoreboard__mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wlb-scoreboard__meta {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; color: var(--wlb-muted); white-space: nowrap;
}
.wlb-viewers { color: var(--wlb-text-2); }
.wlb-viewers::before { content: "👁 "; }
@media (max-width: 575px) {
  .wlb-scoreboard { padding: 13px 10px; gap: 8px; }
  .wlb-scoreboard__team { font-size: 13px; gap: 7px; }
  .wlb-logo--lg, .wlb-logo--lg img { width: 34px; height: 34px; flex-basis: 34px; }
}

/* Khối nội dung chung của màn xem trận */
.wlb-panel {
  margin-top: 12px; background: var(--wlb-surface);
  border: 1px solid var(--wlb-line); border-radius: var(--wlb-r); overflow: hidden;
}
.wlb-panel__title {
  margin: 0; padding: 11px 15px; font-size: 13px; font-weight: 500;
  color: var(--wlb-text); border-bottom: 1px solid var(--wlb-line);
  background: var(--wlb-surface-2);
}
.wlb-panel__body { padding: 14px 15px; }

.wlb-banner { display: block; margin-top: 12px; border-radius: var(--wlb-r); overflow: hidden; }
.wlb-cta {
  display: block; padding: 12px; margin-bottom: 12px; border-radius: var(--wlb-r);
  background: var(--wlb-accent); color: #06120a; text-align: center;
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.wlb-cta:hover { filter: brightness(1.07); color: #06120a; }

/* Cột bên: trận khác đang phát */
.wlb-side-list { max-height: 560px; overflow-y: auto; scrollbar-width: thin; }
.wlb-side-item {
  display: block; padding: 10px 14px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--wlb-line-soft); transition: background .15s;
}
.wlb-side-item:last-child { border-bottom: 0; }
.wlb-side-item:hover { background: var(--wlb-surface-2); }
.wlb-side-item__league { display: block; font-size: 11px; color: var(--wlb-muted); margin-bottom: 4px; }
.wlb-side-item__teams {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
}
.wlb-side-item__teams b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; }
.wlb-side-item__teams b:last-of-type { text-align: right; }
.wlb-side-item__teams em {
  font-style: normal; font-weight: 700; color: var(--wlb-text);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.wlb-side-item__time {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--wlb-live); margin-top: 4px;
}
.wlb-side-empty { margin: 0; padding: 16px 14px; font-size: 13px; color: var(--wlb-muted); }

/* ---------- Chat cộng đồng ---------- */
.wlb-chat .wlb-panel__title { display: flex; align-items: center; gap: 8px; }
/* (kiểu .wlb-chat__badge nằm ở khối hàng nút phía trên — dòng chữ mờ, không viên) */
.wlb-chat__pin {
  margin: 0; padding: 9px 14px; font-size: 12px; line-height: 1.45;
  color: var(--wlb-warn);
  background: color-mix(in srgb, var(--wlb-warn) 9%, transparent);
  border-bottom: 1px solid var(--wlb-line);
}
/*
 * MỤC 2: ruột chat GIÃN ĐẦY ngăn (đo 03/08: ngăn 596 nhưng ruột chỉ 171, thừa 425
 * trống — chủ chê "thưa thớt"). Cho .wlb-chat xếp dọc chiếm trọn chiều cao ngăn,
 * danh sách tin flex:1 nuốt phần còn lại; rỗng thì giữ dải mỏng chứ không banh cứng.
 */
.wlb-chat { display: flex; flex-direction: column; flex: 1 1 auto; }
.wlb-chat__list {
  flex: 1 1 auto; min-height: 72px; overflow-y: auto; scrollbar-width: thin;
  padding: 8px 12px; display: flex; flex-direction: column; gap: 6px;
}
.wlb-chat__list::-webkit-scrollbar { width: 4px; }
.wlb-chat__list::-webkit-scrollbar-thumb { background: var(--wlb-raised); border-radius: 4px; }
/*
 * VỎ TIN BA Ô — [ảnh 26] [tên + nội dung] [giờ dạt PHẢI].
 *
 * Bản cũ là một dòng chữ chảy: tên, nội dung và giờ nối đuôi nhau trong cùng một
 * mạch, nên tin dài thì giờ trôi vào giữa đoạn văn và không có mốc nào cho mắt
 * bám. Nay giờ neo cứng ở cột ba, tên đứng riêng một dòng trên nội dung.
 *
 * `align-items: start` để ảnh và giờ bám MÉP TRÊN của tin nhiều dòng, không trôi
 * xuống giữa. Cột giữa `minmax(0, 1fr)` — thiếu `minmax(0,…)` thì ô lưới lấy
 * min-content của chữ dài và tin không xuống dòng, đẩy giờ ra khỏi khung.
 */
.wlb-chat__msg {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: start; column-gap: 8px;
  font-size: 13px; line-height: 1.45; word-break: break-word;
}
.wlb-chat__ava {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--wlb-raised); font-size: 12px; font-weight: 700;
}
.wlb-chat__ava img { width: 100%; height: 100%; object-fit: cover; }
.wlb-chat__than { min-width: 0; }
/* Tên một dòng RIÊNG: `block` chứ không `inline` — kèm dấu hai chấm cũ thì tên và
   nội dung lại dính vào nhau, đúng cái vừa gỡ. */
/* Màu tên do JS gắn thẳng vào thẻ (băm theo tên). Tin của BLV/ADMIN thì JS KHÔNG
   gắn màu băm, để luật dưới đây ăn — kiểu gắn-thẳng luôn thắng mọi bộ chọn, nên
   phải quyết ở nơi sinh ra thẻ chứ không cố đè bằng CSS. */
.wlb-chat__who { display: block; font-weight: 500; color: var(--wlb-accent); }
.wlb-chat__msg.is-staff .wlb-chat__who,
.wlb-chat__msg.is-staff .wlb-chat__ava { color: var(--wlb-warn); }
.wlb-chat__text { display: block; color: var(--wlb-text-2); }
.wlb-chat__msg time { color: var(--wlb-muted); font-size: 11px; padding-top: 1px; }
.wlb-chat__rep {
  margin-left: 6px; padding: 0 5px; border-radius: 4px;
  background: var(--wlb-raised); color: var(--wlb-text-2);
  font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.wlb-chat__sticker { font-size: 17px; vertical-align: -2px; }
.wlb-chat__note {
  margin: 0; padding: 11px 14px; font-size: 12px; color: var(--wlb-muted);
  border-top: 1px solid var(--wlb-line-soft);
}

/* ---------- Chân khung chat: gõ tin / mời đăng nhập (mục 3.2, 05/08) ---------- */

/*
 * `.wlb-auth` phủ kín khung chat bằng `position: absolute`, nên KHUNG phải là mốc.
 * Phủ chứ không chèn: chèn thêm một khối cao 300px vào giữa cột sẽ đẩy toàn bộ
 * ngăn bên phải và làm lệch bậc thang đã đo của trang trận.
 */
.wlb .wlb-chat { position: relative; }

.wlb .wlb-chat__chan { flex: 0 0 auto; padding: 8px 12px 10px; border-top: 1px solid var(--wlb-line); }

/* CHƯA đăng nhập: một dải y như ô gõ, bấm vào mở bảng — đúng cách đối thủ làm.
   Không ẩn khung chat, chỉ nói rõ vì sao chưa gõ được. */
.wlb .wlb-chat__moica {
  display: block; box-sizing: border-box; width: 100%; margin: 0; cursor: pointer;
  padding: 10px 12px; border-radius: var(--wlb-r-sm);
  background: var(--wlb-raised); color: var(--wlb-muted);
  font-size: 13px; line-height: 18px; text-align: left;
}
.wlb .wlb-chat__moica:hover { color: var(--wlb-text-2); }
/* `display: block` ở trên THẮNG luật `[hidden]{display:none}` của trình duyệt —
   thiếu hai dòng này thì lúc đã đăng nhập, dải mời đăng nhập vẫn nằm chình ình. */
.wlb .wlb-chat__moica[hidden] { display: none; }
.wlb .wlb-chat__badge[hidden] { display: none; }

/* ĐÃ đăng nhập: hàng danh tính (ảnh + tên + Đăng xuất) rồi tới ô gõ. */
.wlb .wlb-chat__gui { display: flex; flex-direction: column; gap: 7px; }
.wlb .wlb-chat__gui[hidden] { display: none; }
.wlb .wlb-chat__toi { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wlb .wlb-chat__toiten {
  font-size: 12px; font-weight: 600; color: var(--wlb-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.wlb .wlb-chat__thoat {
  margin-left: auto; flex: 0 0 auto; padding: 0; border: 0; background: none;
  cursor: pointer; font-family: inherit; font-size: 11px; color: var(--wlb-muted);
  text-decoration: underline;
}
.wlb .wlb-chat__thoat:hover { color: var(--wlb-text-2); }
.wlb .wlb-chat__hang { display: flex; align-items: stretch; gap: 6px; }
/*
 * RESET Ô NHẬP ĐẦY ĐỦ. Theme Row/Column nhồi kiểu vào `input` trần (bài học 29/07:
 * `input[type=search]` của theme thắng cả `:where()`), nên mọi thuộc tính có thể bị
 * rò đều phải khai lại tại đây: nền, viền, bo, bóng, chiều cao, lề, phông.
 */
.wlb .wlb-chat__o {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box; margin: 0;
  appearance: none; -webkit-appearance: none;
  height: 38px; padding: 0 12px; min-height: 0; max-width: none;
  border: 1px solid var(--wlb-line); border-radius: var(--wlb-r-sm);
  background: var(--wlb-bg); color: var(--wlb-text); box-shadow: none;
  font-family: inherit; font-size: 13px; line-height: 36px;
}
.wlb .wlb-chat__o::placeholder { color: var(--wlb-muted); opacity: 1; }
.wlb .wlb-chat__o:focus { border-color: var(--wlb-accent); outline: none; }
.wlb .wlb-chat__nutgui {
  flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--wlb-r-sm); background: var(--wlb-accent); color: #06120a;
}
.wlb .wlb-chat__nutgui[disabled] { opacity: .5; cursor: default; }
.wlb .wlb-chat__loi { margin: 0; font-size: 11px; color: var(--wlb-down); }
.wlb .wlb-chat__loi[hidden] { display: none; }

/* Tắt chat thì giấu luôn chân khung + bảng đăng nhập, giữ mỗi hàng nút để bật lại. */
.wlb-chat.is-tat .wlb-chat__chan,
.wlb-chat.is-tat .wlb-auth { display: none; }

/* ---------- Bảng ĐĂNG NHẬP / ĐĂNG KÝ okwin ---------- */

/*
 * MỞ/ĐÓNG và ĐỔI TAB chạy bằng ô đánh dấu ẩn + `:checked ~`, KHÔNG bằng JS —
 * LiteSpeed hoãn script nên bảng phải bật được trước lúc JS chạy. Ô đánh dấu dùng
 * `.wlb-sronly` (kỹ thuật cắt) chứ KHÔNG `display: none`: mắt không thấy nhưng bàn
 * phím vẫn tab tới và Space vẫn lật được.
 */
.wlb .wlb-auth {
  display: none; position: absolute; inset: 0; z-index: 3;
  flex-direction: column; overflow: hidden; background: var(--wlb-surface-2);
}
/*
 * 🐞 `:not(.is-tat)` KHÔNG PHẢI TRANG TRÍ — thiếu nó là bảng đăng nhập sống dai hơn
 * chính khung chat.
 *
 * Luật tắt chat `.wlb-chat.is-tat .wlb-auth { display: none }` chỉ nặng (0,3,0), còn
 * luật mở bảng này nặng (0,4,0) nên THẮNG: ai đang mở bảng mà bấm TẮT CHAT thì danh
 * sách tin và chân khung biến mất đúng như mong đợi, riêng bảng đăng nhập vẫn nằm
 * chình ình trên một cái hộp rỗng cao 576px, và nút TẮT CHAT thì bị chính bảng ấy
 * che nên không bấm lại được (đo được: display vẫn `flex`, cao 576).
 *
 * Vá bằng cách cho luật MỞ tự loại trừ, chứ không bơm đặc hiệu cho luật ẨN: như thế
 * thứ tự dòng trong tệp muốn đổi thế nào cũng không lật ngược được kết quả.
 */
.wlb .wlb-chat:not(.is-tat) .wlb-auth__mo:checked ~ .wlb-auth { display: flex; }

.wlb .wlb-auth__hd {
  flex: 0 0 auto; display: flex; align-items: stretch;
  border-bottom: 1px solid var(--wlb-line);
}
.wlb .wlb-auth__tab {
  flex: 1 1 0; margin: 0; padding: 12px 8px; cursor: pointer; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--wlb-muted);
  border-bottom: 2px solid transparent;
}
.wlb .wlb-auth__tab:hover { color: var(--wlb-text-2); }
.wlb .wlb-auth__r--dn:checked ~ .wlb-auth__hd .wlb-auth__tab--dn,
.wlb .wlb-auth__r--dk:checked ~ .wlb-auth__hd .wlb-auth__tab--dk {
  color: var(--wlb-text); border-bottom-color: var(--wlb-accent);
}
.wlb .wlb-auth__dong {
  flex: 0 0 38px; margin: 0; cursor: pointer; color: var(--wlb-muted);
  display: flex; align-items: center; justify-content: center;
}
.wlb .wlb-auth__dong:hover { color: var(--wlb-text); }

.wlb .wlb-auth__than { flex: 1 1 auto; overflow-y: auto; padding: 14px; scrollbar-width: thin; }
.wlb .wlb-auth__form { display: none; flex-direction: column; gap: 10px; }
.wlb .wlb-auth__r--dn:checked ~ .wlb-auth__than .wlb-auth__form--dn,
.wlb .wlb-auth__r--dk:checked ~ .wlb-auth__than .wlb-auth__form--dk { display: flex; }

/* Cùng lý do reset như ô gõ chat — theme rò kiểu vào input trần. */
.wlb .wlb-auth__o {
  display: block; box-sizing: border-box; width: 100%; margin: 0;
  appearance: none; -webkit-appearance: none;
  height: 40px; padding: 0 12px; min-height: 0; max-width: none;
  border: 1px solid var(--wlb-line); border-radius: var(--wlb-r-sm);
  background: var(--wlb-bg); color: var(--wlb-text); box-shadow: none;
  font-family: inherit; font-size: 14px; line-height: 38px;
}
.wlb .wlb-auth__o::placeholder { color: var(--wlb-muted); opacity: 1; }
.wlb .wlb-auth__o:focus { border-color: var(--wlb-accent); outline: none; }

.wlb .wlb-auth__mk { position: relative; }
.wlb .wlb-auth__mk .wlb-auth__o { padding-right: 44px; }
.wlb .wlb-auth__mat {
  position: absolute; right: 4px; top: 4px; width: 32px; height: 32px;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--wlb-muted);
  display: flex; align-items: center; justify-content: center;
}
.wlb .wlb-auth__mat:hover { color: var(--wlb-text-2); }
/* Mắt ĐANG CHE = có gạch chéo; bấm hiện mật khẩu thì bỏ gạch. */
.wlb .wlb-auth__mat.is-mo .wlb-auth__mat-gach { display: none; }

/*
 * Ô CAPTCHA — chép số đo okwin 05/08: hộp nền #f4ecf5 rộng 112, chữ 35, bước 19,
 * lề trái 10; màu 5 chữ số theo VỊ TRÍ; hai gạch chéo đúng bề rộng/góc/màu/toạ độ.
 * Chiều cao hộp KHÔNG có trong sổ đo — chọn 40px cho bằng ô nhập bên cạnh, và vì
 * gạch thứ hai nằm ở y=29 nên hộp phải cao hơn 31.
 */
.wlb .wlb-auth__hangcap { display: flex; align-items: center; gap: 8px; }
.wlb .wlb-auth__hangcap .wlb-auth__o { flex: 1 1 auto; width: auto; min-width: 0; }
.wlb .wlb-auth__cap {
  position: relative; flex: 0 0 112px; width: 112px; height: 40px; overflow: hidden;
  background: #f4ecf5; border-radius: var(--wlb-r-sm);
}
/*
 * 🐞 CHỮ SỐ CHỒNG LÊN NHAU — cũng do soi ảnh gần mới thấy.
 *
 * Sổ đo cho ba con số cùng lúc: chữ 35px, bước 19px. Với phông thân trang (Barlow)
 * một chữ số 35px rộng 18,8–21,2px (số "4" rộng nhất) → chữ sau ĐÈ lên chữ trước tới
 * 2,2px, đọc ra thành một cục. Ba con số ấy đo từ trang họ nên không được sửa; thứ
 * sửa được là MẶT CHỮ. Dùng phông số của chính plugin (Oswald, `--wlb-font-so`): chữ
 * số 35px rộng ~16,5px, lọt gọn trong bước 19 và vẫn kín hộp 112.
 */
.wlb .wlb-auth__capso {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 35px; line-height: 1; font-weight: 700; font-family: var(--wlb-font-so);
}
.wlb .wlb-auth__capso:nth-child(1) { left: 10px; color: #31a936; }
.wlb .wlb-auth__capso:nth-child(2) { left: 29px; color: #287fc7; }
.wlb .wlb-auth__capso:nth-child(3) { left: 48px; color: #287fc7; }
.wlb .wlb-auth__capso:nth-child(4) { left: 67px; color: #b52758; }
.wlb .wlb-auth__capso:nth-child(5) { left: 86px; color: #b52758; }
.wlb .wlb-auth__capgach { position: absolute; display: block; height: 2px; }
.wlb .wlb-auth__capgach--1 { left: 7px; top: 13px; width: 100px; background: #ef7fa2; transform: rotate(12deg); }
.wlb .wlb-auth__capgach--2 { left: 22px; top: 29px; width: 82px; background: #7bbfba; transform: rotate(-8deg); }
.wlb .wlb-auth__xoay {
  flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer;
  background: none; color: var(--wlb-muted);
  display: flex; align-items: center; justify-content: center;
}
.wlb .wlb-auth__xoay:hover { color: var(--wlb-text-2); }

.wlb .wlb-auth__nut {
  box-sizing: border-box; width: 100%; height: 42px; padding: 0 14px;
  border: 0; border-radius: var(--wlb-r-sm); cursor: pointer;
  background: var(--wlb-accent); color: #06120a;
  font-family: inherit; font-size: 14px; font-weight: 700; text-transform: uppercase;
}
.wlb .wlb-auth__nut[disabled] { opacity: .6; cursor: default; }
.wlb .wlb-auth__nho {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: 12px; color: var(--wlb-text-2); cursor: pointer;
}
/*
 * 🐞 Ô ĐÁNH DẤU BIẾN MẤT — bắt được bằng ẢNH CHỤP GẦN, số đo "đạt" không hé một lời.
 *
 * Mức nền `:where(.wlb) :where(button, input, …)` ở đầu tệp khai `appearance: none`
 * để dẹp thói trang trí của theme. Với `input[type=checkbox]` thì `appearance: none`
 * là XOÁ HẲN hình vẽ sẵn của trình duyệt, mà ô đánh dấu không có nội dung nên nó co
 * về ĐÚNG 0×0 (đo được: rect 0×0, computed width/height 0px). Nhìn ra màn hình chỉ
 * còn dòng chữ "Lưu tài khoản" trơ trọi, bấm vào vẫn ăn nhưng không ai biết đang bật
 * hay tắt. Trả `appearance: auto` + ghim cỡ để hết phụ thuộc mặc định từng trình duyệt.
 */
.wlb .wlb-auth__nho input {
  margin: 0; flex: 0 0 15px; width: 15px; height: 15px;
  appearance: auto; -webkit-appearance: auto; accent-color: var(--wlb-accent);
}
.wlb .wlb-auth__loi { margin: 0; font-size: 12px; line-height: 1.4; color: var(--wlb-down); }
.wlb .wlb-auth__loi[hidden] { display: none; }
.wlb .wlb-auth__loi.is-ok { color: var(--wlb-up); }

/* ---------- Phong độ & đối đầu ---------- */
.wlb-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.wlb-form__side { min-width: 0; }
.wlb-form__name {
  display: block; font-size: 13px; font-weight: 500; color: var(--wlb-text);
  text-decoration: none; margin-bottom: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wlb-form__name:hover { color: var(--wlb-accent); }
.wlb-form__marks { display: flex; gap: 5px; }
.wlb-form__none { font-size: 12px; color: var(--wlb-muted); }
.wlb-mark {
  width: 22px; height: 22px; border-radius: 5px; cursor: help;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #06120a;
}
.wlb-mark.is-win { background: var(--wlb-up); }
.wlb-mark.is-draw { background: var(--wlb-muted); color: #0a0e13; }
.wlb-mark.is-loss { background: var(--wlb-down); }

.wlb-h2h { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.wlb-h2h caption {
  text-align: left; color: var(--wlb-muted); font-size: 12px;
  padding-bottom: 7px; caption-side: top;
}
.wlb-h2h td { padding: 7px 6px; border-top: 1px solid var(--wlb-line-soft); }
.wlb-h2h__date { color: var(--wlb-muted); font-size: 12px; white-space: nowrap; }
.wlb-h2h { table-layout: fixed; }
.wlb-h2h__team { color: var(--wlb-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlb-h2h td:nth-child(2) { text-align: right; }
.wlb-h2h td:nth-child(4) { text-align: left; }
.wlb-h2h td:nth-child(1) { width: 88px; }
.wlb-h2h td:nth-child(3) { width: 62px; }
.wlb-h2h td:nth-child(5) { width: 150px; }
.wlb-h2h__score {
  text-align: center; font-weight: 700; color: var(--wlb-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wlb-h2h__lg { color: var(--wlb-muted); font-size: 11px; text-align: right; white-space: nowrap; }
.wlb-h2h__none { margin: 12px 0 0; font-size: 13px; color: var(--wlb-muted); }

/* ---------- Hồ sơ đội ----------
   Dùng .wlb-teampage chứ KHÔNG phải .wlb-team: tên đó đã là "một đội trong thẻ
   trận" và có display:flex, trùng tên thì cả trang hồ sơ bị xếp ngang. */
.wlb-teampage { padding: 0 16px 22px; }
.wlb-teamhead {
  display: flex; align-items: center; gap: 16px;
  padding: 18px; border-radius: var(--wlb-r);
  background: linear-gradient(120deg, var(--wlb-surface), var(--wlb-bg) 75%);
  border: 1px solid var(--wlb-line);
}
.wlb-logo--xl { width: 62px; height: 62px; flex: 0 0 62px; font-size: 19px; }
.wlb-logo--xl img { width: 62px; height: 62px; }
.wlb-teamhead__text { min-width: 0; }
.wlb-teamhead h1 { margin: 0; font-size: 22px; line-height: 1.25; color: var(--wlb-text); }
.wlb-teamhead__meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 5px; font-size: 13px; color: var(--wlb-text-2);
}
.wlb-teamhead__meta b { color: var(--wlb-text); font-weight: 500; }

.wlb-panel__n {
  font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 999px;
  background: var(--wlb-raised); color: var(--wlb-text-2); margin-left: 6px;
}
.wlb-squad {
  display: grid;
  /* Cột rộng tay: tên cầu thủ nước ngoài rất dài, hẹp quá là cắt mất họ. */
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}
.wlb-squad > .wlb-player:nth-child(odd) { border-right: 1px solid var(--wlb-line-soft); }
@media (max-width: 991px) { .wlb-squad > .wlb-player { border-right: 0; } }
.wlb-player {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 15px; border-top: 1px solid var(--wlb-line-soft); min-width: 0;
}
.wlb-player.is-hurt { opacity: .62; }
.wlb-player__num {
  width: 26px; flex: 0 0 26px; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--wlb-muted);
  font-variant-numeric: tabular-nums;
}
.wlb-player__face {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  object-fit: cover; background: var(--wlb-raised);
}
.wlb-player__face--none {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--wlb-text-2);
}
.wlb-player__name {
  flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--wlb-text);
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wlb-player__c {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #06120a; background: var(--wlb-warn);
}
.wlb-player__hurt {
  flex: 0 0 auto; font-size: 11px; color: var(--wlb-down);
  border: 1px solid color-mix(in srgb, var(--wlb-down) 40%, transparent);
  padding: 1px 6px; border-radius: 999px;
}
.wlb-player__stats {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px; margin-left: auto;
  font-size: 12px; color: var(--wlb-muted); white-space: nowrap;
}
.wlb-player__stats b { color: var(--wlb-text-2); font-weight: 500; }
.wlb-player__stats em { font-style: normal; }
.wlb-player__stats .is-goal { color: var(--wlb-up); }

/* ---------- Sân 2D ----------
   Sân là nền, cầu thủ nằm trên. Hai bên là hai lưới cột: bên nhà đá từ trái sang,
   bên khách đá ngược lại nên tuyến của họ xếp theo chiều ngược. */
.wlb-pitch {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  aspect-ratio: 2 / 1; min-height: 290px; max-height: 470px;
  border-radius: var(--wlb-r); overflow: hidden;
  background: linear-gradient(100deg, #10321f, #0d2a1a 45%, #10321f);
}
.wlb-pitch__turf { position: absolute; inset: 0; pointer-events: none; }
.wlb-pitch__turf > span { position: absolute; border: 1.5px solid rgba(255, 255, 255, .13); }
.wlb-pitch__mid { left: 50%; top: 0; bottom: 0; border-width: 0 0 0 1.5px; }
.wlb-pitch__circle {
  left: 50%; top: 50%; width: 17%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
}
.wlb-pitch__box { top: 21%; bottom: 21%; width: 13%; }
.wlb-pitch__box--l { left: 0; border-left: 0; }
.wlb-pitch__box--r { right: 0; border-right: 0; }

.wlb-pitch__side {
  position: relative; display: grid; align-items: center;
  grid-auto-flow: column; grid-auto-columns: 1fr; padding: 10px 4px;
}
.wlb-pitch__side--away { direction: rtl; }
.wlb-pitch__line {
  display: flex; flex-direction: column; justify-content: space-evenly;
  align-items: center; gap: 4px; height: 100%; direction: ltr;
}

.wlb-pp { display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.wlb-pp__num {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e9eff6; color: #0d2a1a;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}
.wlb-pitch__side--away .wlb-pp__num { background: var(--wlb-accent); color: #06120a; }
.wlb-pp__name {
  font-size: 11px; line-height: 1.25; color: #dfe8f0; text-align: center;
  max-width: 82px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wlb-pp__marks { position: absolute; top: -5px; right: -8px; display: flex; gap: 2px; }
.wlb-pm { font-style: normal; font-size: 11px; line-height: 1; }
.wlb-pm--y, .wlb-pm--r {
  display: inline-block; width: 7px; height: 10px; border-radius: 1.5px;
  vertical-align: -1px;
}
.wlb-pm--y { background: var(--wlb-warn); }
.wlb-pm--r { background: var(--wlb-live); }
.wlb-pm--out { color: var(--wlb-down); }
.wlb-pm--in { color: var(--wlb-up); }

@media (max-width: 767px) {
  .wlb-pitch { aspect-ratio: auto; min-height: 0; grid-template-columns: 1fr; }
  .wlb-pitch__side { grid-auto-flow: row; grid-auto-rows: 1fr; padding: 12px 4px; }
  .wlb-pitch__side--away { direction: ltr; }
  .wlb-pitch__line { flex-direction: row; height: auto; padding: 6px 0; }
  .wlb-pitch__turf { display: none; }
  .wlb-pitch__side--home { background: rgba(255, 255, 255, .03); }
}

.wlb-panel__tag {
  font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
  background: var(--wlb-raised); color: var(--wlb-text-2); margin-left: 8px;
  font-variant-numeric: tabular-nums;
}
.wlb-note {
  margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--wlb-muted);
  padding-left: 11px; border-left: 2px solid var(--wlb-line);
}

/* ---------- Diễn biến ---------- */
.wlb-tl { list-style: none; margin: 0; padding: 0; }
.wlb-tl__i {
  display: flex; align-items: baseline; gap: 9px;
  padding: 7px 0; border-top: 1px solid var(--wlb-line-soft); font-size: 13px;
}
.wlb-tl__i:first-child { border-top: 0; }
.wlb-tl__i.is-away { flex-direction: row-reverse; text-align: right; }
.wlb-tl__min {
  flex: 0 0 34px; color: var(--wlb-muted); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.wlb-tl__ico { flex: 0 0 auto; font-size: 12px; }
.wlb-tl__who { flex: 1 1 auto; min-width: 0; color: var(--wlb-text); }
.wlb-tl__who em { font-style: normal; color: var(--wlb-muted); font-size: 12px; margin: 0 6px; }
.wlb-tl__score {
  flex: 0 0 auto; font-variant-numeric: tabular-nums;
  color: var(--wlb-accent); font-size: 12px;
}
.wlb-tl__i.is-goal .wlb-tl__who { font-weight: 500; }
.wlb-tl__i.is-penmiss { opacity: .62; }
.wlb-tl__i.is-penmiss .wlb-tl__ico { color: var(--wlb-down); }
.wlb-tl__head {
  margin: 16px 0 4px; font-size: 12px; font-weight: 500; letter-spacing: .02em;
  color: var(--wlb-text-2); text-transform: uppercase;
  padding-top: 12px; border-top: 1px solid var(--wlb-line);
}

/* ---------- Thanh chỉ số ---------- */
.wlb-bars { display: flex; flex-direction: column; gap: 11px; }
.wlb-bar {
  display: grid; grid-template-columns: 42px 1fr 42px;
  align-items: center; gap: 8px; font-size: 13px;
}
.wlb-bar__h, .wlb-bar__a { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wlb-text); }
.wlb-bar__a { text-align: right; }
.wlb-bar__label { text-align: center; color: var(--wlb-text-2); font-size: 12px; }
.wlb-bar__track {
  grid-column: 1 / -1; height: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--wlb-accent) 26%, var(--wlb-raised));
  overflow: hidden;
}
.wlb-bar__track i { display: block; height: 100%; background: var(--wlb-accent); }


/* ---------- Thanh điều hướng ----------
   Mọi trang bóng đá đều có; thiếu nó thì khách vào một trang là cụt đường. */
/* Cao 68px, đúng #header của họ (đo 30/07 ở khổ 1440). Mình đang 52px nên thanh
   trên cùng mảnh hơn hẳn — đặt hai tab cạnh nhau là thấy ngay. */
.wlb-nav {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px; min-height: 68px; flex-wrap: wrap;
  background: #1b212a; border-bottom: 1px solid var(--wlb-line);
}
.wlb-nav__brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  color: var(--wlb-text); text-decoration: none;
  padding-right: 12px; margin-right: 4px;
  border-right: 1px solid var(--wlb-line);
  white-space: nowrap;
}
.wlb-nav__brand:hover { color: var(--wlb-accent); }
/* Logo của họ cao 50px (rộng 164px). Mình để 30px nên nhỏ hơn gần một nửa. */
.wlb-nav__brand img { height: 50px; width: auto; }
.wlb-nav__links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
/*
 * ĐIỆN THOẠI: menu CUỘN NGANG chứ không xuống dòng. Đo khung 371px (30/07):
 * các mục Lịch thi đấu / Kết quả / BXH / Tỷ lệ kèo / Livescore nằm ở x=425…754,
 * tức NGOÀI màn hình, mà thân trang không cuộn ngang được → khách điện thoại
 * KHÔNG BẤM TỚI được các trang đó. Xoilac trên mobile cũng cho menu trượt ngang.
 */
@media (max-width: 767px) {
  .wlb-nav { flex-wrap: nowrap; }
  .wlb-nav__links {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .wlb-nav__links::-webkit-scrollbar { display: none; }
  .wlb-nav__link { white-space: nowrap; flex: 0 0 auto; }
}
/* Đo xoilac 30/07: liên kết menu 14px cân 500 CHỮ HOA, trắng 80% — tầng chữ
   "in đậm in hoa" là thứ làm thanh menu của họ nhìn chắc hơn hẳn chữ thường. */
.wlb-nav__link {
  padding: 8px 13px; border-radius: var(--wlb-r-sm);
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8); text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
/* Menu của họ: chữ 12–13px, màu rgba(255,255,255,.8), HOVER XANH #2FB925 (không đổi
   nền); dãy liên kết cách nhau 16px (#header .main-menu ul.navbar-nav { gap:16px }). */
.wlb-nav__link:hover { background: none; color: #2fb925; }
.wlb-nav__links { gap: 16px; }
.wlb-nav__link.is-on { color: var(--wlb-accent); background: color-mix(in srgb, var(--wlb-accent) 13%, transparent); }
/* Nút mời của họ: 120×32px, bo 4px, chữ 14px/700 — mình đang 13px và bo 7px. */
.wlb-nav__cta {
  margin-left: auto; min-width: 120px; height: 32px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: var(--wlb-accent); color: #06120a;
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.wlb-nav__cta:hover { filter: brightness(1.08); color: #06120a; }
@media (max-width: 767px) {
  .wlb-nav { padding: 8px 10px; gap: 4px; }
  .wlb-nav__brand { border-right: 0; padding-right: 0; font-size: 15px; }
  .wlb-nav__links { overflow-x: auto; flex-wrap: nowrap; width: 100%; scrollbar-width: none; }
  .wlb-nav__links::-webkit-scrollbar { display: none; }
  .wlb-nav__cta { margin-left: 0; }
}

/* ---------- Phân trang ---------- */
.wlb-pager {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 14px 4px; font-size: 13px;
}
.wlb-pager__btn {
  padding: 8px 16px; border-radius: var(--wlb-r-sm);
  background: var(--wlb-surface); border: 1px solid var(--wlb-line);
  color: var(--wlb-text-2); text-decoration: none; font-weight: 500;
  transition: background .15s, color .15s;
}
.wlb-pager__btn:hover { background: var(--wlb-surface-2); color: var(--wlb-text); }
.wlb-pager__now { color: var(--wlb-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.wlb-pager__total { margin-left: auto; color: var(--wlb-muted); font-variant-numeric: tabular-nums; }

/* ---------- Thanh chọn ngày ---------- */
.wlb-days {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 14px 14px;
}
.wlb-days__nav {
  width: 34px; height: 34px; border-radius: var(--wlb-r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wlb-surface); border: 1px solid var(--wlb-line);
  color: var(--wlb-text-2); text-decoration: none; font-size: 17px; line-height: 1;
}
.wlb-days__nav:hover { background: var(--wlb-surface-2); color: var(--wlb-text); }
.wlb-days__today {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: var(--wlb-r-sm);
  background: var(--wlb-surface); border: 1px solid var(--wlb-line);
  color: var(--wlb-text-2); text-decoration: none;
  /* C2: Barlow 14 + icon lịch 15 → pill ~102.6×28 (QC 03/08: thiếu icon, sai phông → 72×28). */
  font-family: var(--wlb-font); font-size: 14px; font-weight: 500;
}
.wlb-days__today svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* Nhãn "Cụ thể" trước ô ngày (sổ L4) + móc treo cho label bọc input. */
.wlb-days__pick { display: inline-flex; align-items: center; gap: 6px; }
.wlb-days__cuthe { font-family: Raleway, sans-serif; font-size: 12px; font-weight: 500; color: var(--wlb-text-2); }
.wlb-days__today:hover { background: var(--wlb-surface-2); color: var(--wlb-text); }
.wlb-days__today.is-on {
  background: color-mix(in srgb, var(--wlb-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--wlb-accent) 45%, transparent);
  color: var(--wlb-accent);
}
.wlb-days__label { font-size: 14px; font-weight: 500; color: var(--wlb-text); }
.wlb-days__pick { margin-left: auto; }
.wlb-days__pick input {
  background: var(--wlb-surface); border: 1px solid var(--wlb-line);
  color: var(--wlb-text-2); border-radius: var(--wlb-r-sm);
  padding: 7px 11px; font-size: 13px; font-family: inherit; color-scheme: dark;
}
@media (max-width: 575px) { .wlb-days__pick { margin-left: 0; width: 100%; } }
/*
 * Màn hẹp. Luật cũ lật bảng sang neo TRÁI vì tưởng thanh công cụ xuống dòng đưa
 * nút về sát mép trái — ĐO 30/07 ở khung 390px thì thanh KHÔNG xuống dòng, nút
 * vẫn nằm ở x=244, nên neo trái đẩy bảng ra tận x=548: lòi khỏi màn 158px, người
 * dùng điện thoại không bấm tới nửa bảng bên phải.
 * Giữ neo PHẢI như bản gốc; đo lại sau khi vá: 390px → 21..361, 575px → 206..546,
 * 767px → 398..738 — cả ba đều nằm trọn trong màn.
 */
@media (max-width: 767px) {
  .wlb-ldrop__bang { right: 0; left: auto; }
  .wlb-ldrop__hien { max-width: 150px; }
}

/* ---------- Ghì kiểu cho các phần tử form thật ----------
   Hai lớp lồng nhau để thắng luật `thẻ[thuộc-tính]` của theme mà không cần
   !important. Chỉ áp cho ĐÚNG bốn chỗ plugin có phần tử form, không quét bừa. */
.wlb .wlb-ldrop__tim {
  border: 0; border-bottom: 1px solid var(--wlb-line); border-radius: 0;
  background: transparent; box-shadow: none; outline: 0;
  height: auto; min-height: 0; margin: 0; padding: 9px 12px;
  font-family: inherit; font-size: 13px; font-weight: 400; color: var(--wlb-text);
}
.wlb .wlb-ldrop__tim:focus { border-bottom-color: var(--wlb-accent); }
/*
 * `font-family: inherit` ở đây từng nuốt mất phông Raleway của ô chọn giải: luật
 * này đặc hiệu 0,2,0, còn khai Raleway ở `.wlb-ldrop__nut` chỉ 0,1,0 nên thua.
 * Tách ô chọn giải ra khỏi danh sách ghì PHÔNG; nó vẫn được ghì margin, bóng đổ
 * và chữ hoa như cũ.
 */
.wlb .wlb-ldrop__nut { margin: 0; box-shadow: none; text-transform: none; }
.wlb .wlb-ldrop__dong,
.wlb .wlb-totop { margin: 0; box-shadow: none; text-transform: none; font-family: inherit; }
.wlb .wlb-days__pick input {
  border: 1px solid var(--wlb-line); border-radius: var(--wlb-r-sm);
  background: var(--wlb-surface); color: var(--wlb-text-2);
  margin: 0; height: auto; min-height: 0; padding: 7px 11px;
  font-family: inherit; font-size: 13px; font-weight: 400; box-shadow: none;
}

/* ==========================================================================
   HEADER · THANH ĐÁY · FOOTER
   Đo xoilac 30/07 bằng bản sao chạy trên máy chủ nội bộ, xem ở đúng ba khổ
   390 / 768 / 1024 (thu cửa sổ Chrome trên máy này hỏng: báo thành công mà
   innerWidth vẫn 1920, nên phải nhúng khung mới nhìn được khổ nhỏ).
   ========================================================================== */

/* --- Hamburger: dưới 992px họ GIẤU HẲN dãy menu, chỉ chừa logo + nút mời + ☰.
       Mình để dãy chữ cuộn ngang nên ở 768px các mục bị cắt cụt.

   BA lớp lồng nhau (.wlb .wlb-nav .wlb-nav__ham) chứ không phải một, vì Flatsome
   có luật `input[type="checkbox"] + label { display: inline }` — đặc hiệu 0,2,1,
   ăn đứt `.wlb-nav__ham` 0,1,0 của mình. Mà cấu trúc ngăn kéo của mình ĐÚNG là
   checkbox đứng liền trước label, nên dính trọn. Hậu quả đo được trên mm99 ở
   1920px (31/07): hamburger hiện chình ình cạnh LIVESCORE trên bản desktop, chỗ
   lẽ ra phải trống. Đúng bài rò rỉ theme đã dính mấy lần — khai một lớp là thua. */
.wlb .wlb-nav .wlb-nav__ham { display: none; }
.wlb .wlb-nav .wlb-nav__hop { display: none; }
.wlb-nav__ham span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--wlb-text); transition: transform .18s, opacity .18s;
}
.wlb-nav__ham span + span { margin-top: 5px; }

@media (max-width: 991px) {
  .wlb-nav { position: relative; flex-wrap: wrap; }
  /* Cũng phải ba lớp: luật ẩn ở trên đã là 0,3,0 nên một lớp không bật lại được. */
  .wlb .wlb-nav .wlb-nav__ham {
    display: flex; flex-direction: column; justify-content: center;
    order: 3; margin-left: 10px; padding: 6px; cursor: pointer;
    background: none; border: 0;
  }
  .wlb-nav__cta { order: 2; margin-left: auto; }
  /*
   * Ngăn kéo. Bản đầu dùng `grid-template-rows: 0fr` — SAI, và ảnh chụp khung
   * 390px/768px lòi ra ngay: menu mở toang sẵn, đẩy tụt cả trang xuống. Lý do:
   * 0fr chỉ bóp hàng THỨ NHẤT, mà sáu liên kết đẻ ra sáu hàng ngầm cỡ auto nên
   * năm hàng còn lại vẫn cao nguyên. Đổi sang max-height — kém "tự đo" hơn
   * nhưng đóng đúng và vẫn chạy mượt.
   */
  .wlb-nav__links {
    order: 4; flex-basis: 100%; overflow: hidden;
    display: block; max-height: 0;
    transition: max-height .22s ease;
  }
  .wlb-nav__hop:checked ~ .wlb-nav__links { max-height: 60vh; overflow-y: auto; }
  .wlb-nav__hop:checked ~ .wlb-nav__ham span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .wlb-nav__hop:checked ~ .wlb-nav__ham span:nth-child(2) { opacity: 0; }
  .wlb-nav__hop:checked ~ .wlb-nav__ham span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .wlb-nav__link { display: block; padding: 11px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .wlb-nav__links, .wlb-nav__ham span { transition: none; }
}

/* --- Thanh đáy điện thoại: dải xanh #01B243 cao 38px ghim đáy màn, các mục
       chia đều, chữ Oswald 13px trắng. Chỉ hiện dưới 992px như họ. --- */
.wlb-daybar { display: none; }
@media (max-width: 991px) {
  .wlb-daybar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #01b243; height: 38px;
  }
  .wlb-daybar__muc {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--wlb-font-so); font-size: 13px; font-weight: 400;
    color: #fff; text-decoration: none; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  /* Vạch ngăn của họ là GẠCH CHÉO, không phải kẻ dọc — ảnh chụp 390px thấy rõ
     dấu "/" nghiêng giữa các mục. Nghiêng 20° cho khớp. */
  .wlb-daybar__muc + .wlb-daybar__muc { position: relative; }
  .wlb-daybar__muc + .wlb-daybar__muc::before {
    content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
    width: 1px; background: rgba(255, 255, 255, .5);
    transform: skewX(-20deg);
  }
  .wlb-daybar__muc.is-on { font-weight: 700; background: rgba(0, 0, 0, .16); }
  /* Chừa chỗ cho thanh đáy, kẻo nó che mất dòng cuối cùng của trang. */
  .wlb-footer { padding-bottom: 46px; }
  .wlb-totop { bottom: 48px; }
}

/* --- Footer: nền #232626, chữ 13px màu #AFB4BA, mọi thứ căn giữa. --- */
.wlb-footer {
  background: #232626; color: #afb4ba;
  font-size: 13px; line-height: 1.7; text-align: center;
  padding: 26px 14px 18px; margin-top: 26px;
}
.wlb-footer__trong { max-width: 980px; margin: 0 auto; }
.wlb-footer__loi { margin: 0 0 14px; color: #afb4ba; }
.wlb-footer__logo { display: inline-block; margin: 6px 0 12px; }
.wlb-footer__logo img { height: 45px; width: auto; display: block; }
.wlb-footer__menu {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 26px; margin: 0 0 14px;
}
.wlb-footer__lk {
  color: var(--wlb-accent); text-decoration: none;
  text-transform: uppercase; font-weight: 500; letter-spacing: .02em;
}
.wlb-footer__lk:hover { color: #fff; }
.wlb-footer__dong { margin: 0; }
.wlb-footer__mxhs { display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; }
.wlb-footer__mxh {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wlb-raised); color: #fff; text-decoration: none;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
}
.wlb-footer__mxh:hover { background: var(--wlb-accent); color: #06120a; }
.wlb-footer__bq { margin: 16px 0 0; color: #8d92a2; }

/* --- Tab môn trên màn hẹp: đo xoilac 390px — mỗi ô XẾP DỌC (icon trên, chữ
       dưới), 56×70px, chữ 10px, bo 7px, cách nhau 5px, SÁU ô vừa khít MỘT hàng.
       Mình đang để icon-chữ nằm ngang và cho xuống dòng, nên ở 390px tràn thành
       BA hàng cao ~130px, ở 768px thành hai hàng — đẩy tụt cả trang xuống. --- */
@media (max-width: 991px) {
  .wlb-sports { gap: 1px; padding: 10px; flex-wrap: nowrap; justify-content: stretch; }
  /* San be rong o bac hep: ho de 55,716px. */
  .wlb-sport { min-width: 55.716px; }
  .wlb-sport {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; justify-content: center; gap: 4px;
    height: 70px; padding: 0 2px;
    font-size: 10px; line-height: 1.15; letter-spacing: 0;
    text-align: center; white-space: normal;
  }
  .wlb-sport__ico, .wlb-sport__dot { width: 22px; height: 22px; flex: 0 0 22px; }
  .wlb-sport__n { padding: 0 4px; font-size: 10px; }
  .wlb-sport__live { top: 2px; right: 2px; font-size: 9px; padding: 0 3px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ĐIỆN THOẠI — KHỚP CHUỖI CHIỀU CAO ĐẦU TRANG VỚI HỌ

   Đo hai bên @390 ngày 01/08, tính từ mép trên khối thân:

                    HỌ                MÌNH (trước)      lệch
     thanh trận     0 →112            0 →111,5           ok
     tab môn      112 →187  (75)    112 →202  (90)      +15
     tiêu đề      187 →247  (60)    202 →262  (60)       ok
     hở           247 →250   (3)    262 →291  (29)      +26
     hàng lọc     250 →300  (50)    291 →376  (85)      +35
     hở           300 →351  (51)    376 →408  (32)      −19
     lưới trận         351               408            +57

   Cộng dồn 57px: lưới trận của mình bắt đầu THẤP hơn của họ 57px, nên từ thẻ
   đầu tiên trở đi không thẻ nào còn trùng hàng. Bốn luật dưới đây đóng đúng
   57px đó, không hơn.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* 90 → 76: dải tab môn của họ chỉ chiếm 75px giữa thanh trận và tiêu đề.
     8/0 + margin âm 3: viên tab của họ nằm 120..190, của mình 115..185 khi để 3/3 —
     lại đúng cái bẫy "tổng bằng nhau, ruột lệch 5px". */
  .wlb-sports { padding: 8px 10px 0; margin-bottom: -3px; }

  /* Họ chỉ hở 3px từ tiêu đề xuống hàng lọc; khoảng thở dồn xuống dưới hàng lọc. */
  .wlb .wlb-title { margin-bottom: 3px; }

  /*
   * HAI DÒNG: hàng chip cuộn ngang, rồi ô chọn giải chiếm trọn một dòng riêng.
   *
   * 🐞 LỖI SẢN PHẨM, không chỉ lệch giao diện. Bản trước để `flex-wrap: nowrap` trên
   * CẢ thanh công cụ, nên ô chọn giải bị đẩy ra `x = 382` trong khi màn chỉ rộng 390 —
   * tức nó nằm NGOÀI màn hình và trên điện thoại KHÔNG bấm được vào lọc giải. Chiều cao
   * tổng thì vẫn "đúng" nhờ `margin-bottom: 51px` bù vào, nên máy đo tổng không kêu.
   *
   * Chuỗi của họ @390 (gốc = đỉnh thanh trận): chip 260..294 → khe 3 → chọn giải
   * 303..339 → đệm đáy 7 → `.grid-matches_wrapper{margin-top:5}` → lưới 351.
   * Chuỗi mới của mình: h1 hết 250 → +10 chip 260..294 → +9 chọn giải 303..339
   * → +6 đệm → +6 lề → lưới 351.
   */
  .wlb-toolbar {
    flex-wrap: wrap; overflow-x: visible;
    gap: 6px; row-gap: 9px; padding: 10px 14px 6px; margin-bottom: 6px;
  }
  .wlb-toolbar .wlb-filters {
    flex: 1 0 100%; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
      /* Khe giua cac chip o bac hep: do tren hang chip cua ho @390 la 6px, minh 15px. */
    gap: 6px;
  }
  .wlb-toolbar .wlb-filters::-webkit-scrollbar { display: none; }
  .wlb-toolbar .wlb-ldrop { flex: 1 0 100%; }
  .wlb-toolbar .wlb-ldrop__nut { width: 100%; justify-content: space-between; }
  .wlb-toolbar .wlb-filters > * { flex: 0 0 auto; }

  /* Chip của họ @390: đệm ngang 6px, gap trong 4px (desktop là 16/6). */
  .wlb-toolbar .wlb-chip2, .wlb-toolbar .wlb-filters > * { padding: 0 6px; gap: 4px; }

  /*
   * Thẻ trận ở điện thoại CAO HƠN ở máy tính: đo họ @390 ra 157, @1920 ra 133.
   *
   * Bản trước tôi dồn cả 24px chênh lệch vào hàng đội (`min-height: 63`) vì tổng số khi
   * ấy khớp — 38+63+54 cũng ra 157. Đo lại từng khối con ngày 01/08 thì ruột hoàn toàn
   * khác: 27 (đầu) + 54 (đội) + 28+10 (hàng chỉ số riêng) + 38 (chân). Tổng bằng nhau mà
   * mọi đường ngang bên trong thẻ đều lệch — và một thẻ lệch thì cả cột lệch theo.
   */
  .wlb-teams { padding: 0 8px 8px; min-height: 54px; }
}

}



/* --------------------------------------------------------------------------
   TRANG DANH SÁCH GIẢI + TRANG MỘT GIẢI

   Số đo lấy từ trang THẬT `xoilacxtl.tv/danh-sach-giai-dau/`, DOM sống @1920
   ngày 03/08 (`scripts/live-bong/do-trang-giai.mjs`):

       h1                                  Oswald 700 24px UPPERCASE · cao 36
       .as-competition-page__search-input   760×36 · #292D2E · bo 8 · viền 1px #3B4041
                                            Barlow 400 14px · đệm 8px 16px
       .as-competition-block__header        cao 54 · #323738 · đệm 15px 16px · Barlow 14
       .as-competition-item                 cao 60 · #222222 · đệm 16 · khe 6
       .as-competition-item__logo           24×24

   Bản trước của tôi là lưới thẻ 260px với logo 44×44 — tự nghĩ ra, không đo.
   -------------------------------------------------------------------------- */
.wlb-giaids { padding: 10px 14px 26px; }
.wlb-giaids__tit {
  margin: 10px 0 0; font-family: Oswald, sans-serif; font-weight: 700;
  font-size: 24px; line-height: 36px; color: var(--wlb-text); text-transform: uppercase;
}
.wlb-giaids__dem { margin: 14px 0 10px; font-size: 13px; color: var(--wlb-text-2); }

/* Ô tìm giải — 760×36, căn giữa như của họ. Lọc bằng JS; JS chưa chạy thì ô vẫn hiện
   nhưng không lọc, danh sách đầy đủ vẫn ở đó nên không ai mất gì. */
.wlb-giaids__tim { display: flex; justify-content: center; margin: 16px 0 0; }
.wlb-giaids__o {
  width: 100%; max-width: 760px; height: 36px; box-sizing: border-box;
  padding: 8px 16px; border-radius: 8px;
  background: #292d2e; border: 1px solid #3b4041; color: #fff;
  font-size: 14px; line-height: 20px;
}
.wlb-giaids__o::placeholder { color: var(--wlb-text-2); }
.wlb-giaids__o:focus { outline: none; border-color: var(--wlb-accent); }

/* Nhóm gập được. Dùng <details> nên chạy bằng HTML thuần — LiteSpeed hoãn JS vẫn bấm được. */
.wlb-giaids__nhom { margin: 0 0 8px; }
.wlb-giaids__nhomdau {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 54px; padding: 15px 16px; box-sizing: border-box;
  background: #323738; color: #fff; cursor: pointer;
  font-size: 14px; font-weight: 600; list-style: none;
}
.wlb-giaids__nhomdau::-webkit-details-marker { display: none; }
/* Mũi tên tự vẽ bằng viền, xoay khi mở — không cần ảnh, không cần JS. */
.wlb-giaids__nhomdau::after {
  content: ''; width: 7px; height: 7px; margin-left: auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.wlb-giaids__nhom[open] > .wlb-giaids__nhomdau::after { transform: rotate(-135deg) translate(-2px, -2px); }
.wlb-giaids__nhomso {
  padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.wlb-giaids__ds { display: block; }
.wlb-giaids__muc {
  display: flex; align-items: center; gap: 6px;
  height: 60px; padding: 16px; box-sizing: border-box;
  background: #222; border-bottom: 1px solid var(--wlb-line);
  color: var(--wlb-text); text-decoration: none; font-size: 14px;
  transition: background .15s;
}
.wlb-giaids__muc:hover { background: var(--wlb-raised); }
.wlb-giaids__muc[hidden] { display: none; }
.wlb-giaids__anh { display: flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; }
.wlb-giaids__anh img { width: 24px; height: 24px; object-fit: contain; }
.wlb-giaids__chu {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--wlb-raised); color: var(--wlb-text-2);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
}
/* Tên dài cắt bằng "…", KHÔNG xuống dòng — hàng cao đúng 60 thì danh sách mới thẳng. */
.wlb-giaids__ten {
  flex: 1 1 auto; min-width: 0; margin-left: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wlb-giaids__n {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
  background: var(--wlb-raised); color: var(--wlb-text-2);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---- Trang MỘT giải ---- */
.wlb-giaids__lui { display: inline-block; margin: 0 0 12px; font-size: 13px; color: var(--wlb-text-2); text-decoration: none; }
.wlb-giaids__lui:hover { color: var(--wlb-accent); }
.wlb-giaids__top { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; }
.wlb-giaids__topanh { width: 56px; height: 56px; object-fit: contain; flex: 0 0 56px; }
.wlb-giaids--mot .wlb-giaids__tit { margin: 0; }
/* Tiêu đề panel của họ: Barlow 600 16px — KHÔNG phải Oswald như tiêu đề trang. */
.wlb-giaids__phu {
  margin: 22px 0 12px; font-weight: 600;
  font-size: 16px; line-height: 33px; color: var(--wlb-text);
}
/* Lưới thẻ trong trang giải bỏ đệm ngang: khối cha đã có đệm, cộng dồn là thụt hai lần. */
.wlb-giaids--mot .wlb-grid { padding-inline: 0; }

@media (max-width: 767px) {
  .wlb-giaids { padding: 8px 15px 22px; }
  .wlb-giaids__tit { font-size: 18px; line-height: 26px; }
  .wlb-giaids__topanh { width: 44px; height: 44px; flex: 0 0 44px; }
}

/* --------------------------------------------------------------------------
   CHẾ ĐỘ "HÒA THEO THEME" — .wlb--blend

   Đo mm99live.com 03/08 khi chủ site bật blend trên theme nền TRẮNG, từng phần tử
   một (khoảng cách độ sáng chữ/nền, dưới 60 coi như vỡ):

       .wlb-title        chữ #fff  · nền hiệu dụng #fff   → lệch 0, BIẾN MẤT
       .wlb-giai__tit    chữ #fff  · nền hiệu dụng #fff   → lệch 0, BIẾN MẤT
       .wlb-sport.is-on  nền transparent + chữ #00fffd    → rơi xuống nền trắng
       .wlb-filter--live nền transparent + chữ #00ff5d    → rơi xuống nền trắng
       tab thường        nền ĐẶC #323738                  → vẫn ổn, không đụng

   Nguyên tắc: "hòa" nghĩa là CHỮ TỰ DO thừa kế màu chữ của THEME (theme sáng cho
   chữ tối, theme tối cho chữ sáng — đúng nghĩa hòa, không đoán hộ); còn thành phần
   có nền riêng thì nền phải ĐẶC, vì `transparent` chỉ có nghĩa khi cả khối có nền
   tối đứng sau — thứ mà blend vừa bỏ đi.
   -------------------------------------------------------------------------- */
.wlb--blend .wlb-title,
.wlb--blend .wlb-giai__tit,
.wlb--blend .wlb-giaids__tit,
.wlb--blend .wlb-giaids__phu,
.wlb--blend .wlb-giaids__dem,
.wlb--blend .wlb-giaids__lui,
.wlb--blend .wlb-empty { color: inherit; }

/* --------------------------------------------------------------------------
   TRANG CHI TIẾT MỘT GIẢI — .wlb-gct

   Toàn bộ số từ SỔ ĐO trang giải xoilac (DOM sống @1920, La Liga, 03/08):
   thẻ đầu 95px nền #292D2E · thân 2 cột 2fr/1fr khe 20 · tab pill 27px bo 16,
   đang-chọn nền GRADIENT qua background-image · BXH là DIV GRID hàng 48 đều,
   header 42 nền #2A2D2E, vạch hạng = gradient 2px hở 15% hai đầu (KHÔNG border) ·
   panel phải nền rgba(48,53,54,.5) · nút vòng 32×29.6 viền trắng .1 ·
   thanh ngày 44px nền #3A3A3A · hàng trận 56px.
   -------------------------------------------------------------------------- */
.wlb-gct { padding: 10px 14px 26px; }
.wlb-gct__the {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 95px; box-sizing: border-box; margin: 14px 0 20px; padding: 20px;
  background: #292d2e; border-radius: 8px;
}
.wlb-gct__trai { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wlb-gct__logo { width: 55px; height: 55px; object-fit: contain; flex: 0 0 55px; }
.wlb-gct__ten { font-size: 22px; font-weight: 700; color: var(--wlb-text); }
.wlb-gct__qg { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.wlb-gct__qg img { width: 20px; height: 20px; object-fit: contain; }
.wlb-gct__qg span { font-size: 16px; color: rgba(255, 255, 255, .8); }
/* Nhãn mùa TĨNH — nguồn không có mùa cũ nên không có gì để mở. Không phải select. */
.wlb-gct__mua {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  height: 28px; padding: 0 16px; box-sizing: border-box;
  background: #292d2e; border: 1px solid #3b4041; border-radius: 8px;
  font-size: 13px; color: var(--wlb-text);
}
.wlb-gct__mua svg { color: #2fb925; opacity: .5; }

.wlb-gct__than { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }

/* ---- tab sân ---- */
.wlb-gct__tabbar {
  display: flex; gap: 8px; padding: 12px; margin: 0 0 2px;
  background: rgba(40, 55, 77, .2); border-radius: 8px 8px 0 0;
}
.wlb-gct__tab {
  display: inline-flex; align-items: center; height: 27px; padding: 0 12px;
  border-radius: 16px; box-sizing: border-box;
  background: #323738; color: #afb4ba;
  font-size: 13px; text-transform: uppercase; text-decoration: none;
}
/* Đang-chọn: nền là BACKGROUND-IMAGE gradient — bật/tắt phải đụng background-image,
   đổi background-color là vô hình (sổ đo H.5). */
.wlb-gct__tab.is-on {
  background-color: transparent;
  background-image: linear-gradient(-90deg, #323839, #2f5a49);
  color: #00ff5e;
}

/* ---- BXH: DIV grid ---- */
.wlb-gct__bxh { background: rgba(48, 53, 54, .5); border-radius: 0 0 8px 8px; overflow: hidden; }
.wlb-gct__hang {
  display: grid; align-items: center;
  grid-template-columns: 45px minmax(0, 1fr) repeat(7, 44px) 50px;
  column-gap: 15px; height: 48px; padding: 0 12px;
  background: #2a2d2e; font-size: 13px; color: var(--wlb-text); text-align: center;
}
.wlb-gct__hang--dau { height: 42px; }
.wlb-gct__doi { display: flex; align-items: center; gap: 6px; min-width: 0; text-align: left; }
.wlb-gct__doiten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.wlb-gct__tiep { display: flex; align-items: center; justify-content: center; }
.wlb-gct__tiep img { width: 20px; height: 20px; object-fit: contain; }
/* Vạch hạng: gradient 2px, hở 15% hai đầu — border-left làm vạch cao full hàng, SAI mẫu. */
.wlb-gct__hang[data-vach] {
  background-image: linear-gradient(to bottom, transparent 15%, var(--wlb-vach) 15%, var(--wlb-vach) 85%, transparent 85%);
  background-size: 2px 100%; background-position: left center; background-repeat: no-repeat;
}
.wlb-gct__hang[data-vach="ucl"]  { --wlb-vach: #fa8072; }
.wlb-gct__hang[data-vach="uefa"] { --wlb-vach: #41c3ff; }
.wlb-gct__hang[data-vach="conf"] { --wlb-vach: #ffff00; }
.wlb-gct__hang[data-vach="xh"]   { --wlb-vach: #b1a7a7; }
.wlb-gct__hang[data-vach="khac"] { --wlb-vach: #8d92a2; }
.wlb-gct__trong { padding: 18px 12px; font-size: 13px; color: var(--wlb-text-2); }

/* ---- chú thích: chấm 8×8 TỰ VẼ, màu trùng vạch ---- */
.wlb-gct__cthich { margin: 12px 0 0; padding: 0 12px; }
.wlb-gct__ctdong { display: flex; align-items: center; min-height: 22px; margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--wlb-text); }
.wlb-gct__cham { width: 8px; height: 8px; border-radius: 50%; margin-right: 12px; flex: 0 0 8px; background: #8d92a2; }
.wlb-gct__cham--ucl  { background: #fa8072; }
.wlb-gct__cham--uefa { background: #41c3ff; }
.wlb-gct__cham--conf { background: #ffff00; }
.wlb-gct__cham--xh   { background: #b1a7a7; }

/* ---- cột phải ---- */
.wlb-gct__phaicot { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.wlb-gct__panel { background: rgba(48, 53, 54, .5); border-radius: 8px; overflow: hidden; }
.wlb-gct__pt { margin: 0 0 16px; padding: 12px 12px 0; font-size: 16px; font-weight: 600; color: var(--wlb-text); }

/* panel trận tiếp theo */
.wlb-gct__ttgio { margin: 0 0 18px; font-size: 14px; color: #b8c2c5; text-align: center; }
.wlb-gct__ttdoi { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 12px; align-items: center; padding: 0 12px; }
.wlb-gct__ttnha, .wlb-gct__ttkhach { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wlb-gct__ttnha { justify-content: flex-end; }
.wlb-gct__ttten { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.wlb-gct__ttlogo, .wlb-gct__ttlogo img { width: 50px; height: 50px; }
.wlb-gct__ttlogo { display: flex; align-items: center; justify-content: center; flex: 0 0 50px; }
.wlb-gct__ttlogo img { object-fit: contain; }
.wlb-gct__ttvs { display: flex; align-items: center; justify-content: center; color: var(--wlb-text-2); }
.wlb-doc-an { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wlb-gct__ttchan { height: 38px; margin-top: 18px; background: #323738; border-radius: 0 0 6px 6px; }

/* ổ chọn vòng */
.wlb-gct__vongdau { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; }
.wlb-gct__vongdau .wlb-gct__pt { padding: 12px 0 0; text-align: center; flex: 1 1 auto; }
.wlb-gct__vnav {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px;
  width: 28px; height: 28px; margin-top: 10px; border-radius: 999px;
  color: rgba(255, 255, 255, .8); text-decoration: none;
}
a.wlb-gct__vnav:hover { background: rgba(255, 255, 255, .08); }
.wlb-gct__vong { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 0 12px 12px; }
.wlb-gct__vnut {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; padding: 6px 8px; box-sizing: border-box; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1); background: transparent;
  font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .8); text-decoration: none;
}
.wlb-gct__vnut.is-on { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff; }

/* lịch gom ngày */
.wlb-gct__lich { display: flex; flex-direction: column; gap: 16px; padding: 0 12px 12px; }
.wlb-gct__ngay { height: 44px; display: flex; align-items: center; padding: 0 10px; box-sizing: border-box; background: #3a3a3a; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--wlb-text); }
.wlb-gct__tran {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
  min-height: 56px; padding: 14px 16px; box-sizing: border-box;
  color: var(--wlb-text); text-decoration: none;
}
.wlb-gct__tran + .wlb-gct__tran { border-top: 1px solid rgba(255, 255, 255, .08); }
.wlb-gct__tdoi { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 500; }
.wlb-gct__tdoi--nha { justify-content: flex-end; }
.wlb-gct__tdoi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlb-gct__tlogo, .wlb-gct__tlogo img { width: 28px; height: 28px; }
.wlb-gct__tlogo { display: flex; align-items: center; justify-content: center; flex: 0 0 28px; }
.wlb-gct__tlogo img { object-fit: contain; }
.wlb-gct__tgio { font-size: 13px; font-weight: 500; color: #afafaf; white-space: nowrap; }

/* Bậc thang: chưa đo được @1024/@390 trên bản mẫu, lấy theo bậc sẵn có của dự án —
   một cột từ 1199.98; màn hẹp giấu cột phụ của BXH. */
@media (max-width: 1199.98px) {
  .wlb-gct__than { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .wlb-gct__hang { grid-template-columns: 32px minmax(0, 1fr) repeat(4, 34px) 42px; column-gap: 8px; }
  /* Giấu G, HSBT, Tiếp: giữ Trận/W/D/L/Điểm — đội với kết cục là thứ người ta quét. */
  .wlb-gct__hang > span:nth-child(7),
  .wlb-gct__hang > span:nth-child(8),
  .wlb-gct__hang > span:nth-child(10) { display: none; }
  .wlb-gct__the { min-height: 0; padding: 14px; }
  .wlb-gct__ten { font-size: 18px; }
  .wlb-gct__logo { width: 44px; height: 44px; flex: 0 0 44px; }
  .wlb-gct__ttten { max-width: 90px; }
}

/* --------------------------------------------------------------------------
   PANEL CHỌN NGÀY + BIẾN THỂ MÀN LỊCH / KẾT QUẢ

   Sổ đo 03/08 (do-cac-trang-xoilac). Toàn bộ scoped dưới .wlb-panelngay /
   .wlb-man-kq / .wlb-man-lich — KHÔNG đụng lớp gốc .wlb-days/.wlb-filter/.wlb-ls__*
   vì trang chủ và Livescore còn dùng bộ số cũ (cảnh báo trang chủ trong sổ việc).
   -------------------------------------------------------------------------- */
.wlb-panelngay {
  background: var(--wlb-surface-2); border-radius: 6px;
  margin: 0 14px 16px; overflow: hidden;
}
.wlb-panelngay__hang {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px;
}
/* Kẻ ngăn giữa hàng ngày và hàng chip giải — đúng #2A3038 đo được. */
.wlb-panelngay > * + * { border-top: 1px solid #2a3038; }
/* Hàng chip giải trong panel: bỏ nền/đệm riêng cũ, nó đã nằm trong hộp. */
.wlb-panelngay .wlb-filters { margin: 0; padding: 10px 15px; }

/* day_picker trong panel: thu gọn, bỏ nhãn thứ/ngày dài (họ không có). */
.wlb-panelngay .wlb-days { margin: 0; padding: 0; background: none; flex: 1 1 auto; }
.wlb-panelngay .wlb-days__label { display: none; }
.wlb-panelngay .wlb-days__nav { height: 28px; line-height: 28px; }
/* Pill HÔM NAY: 28px bo 7, uppercase, đang-chọn = gradient(-90deg) chữ TRẮNG (C2). */
.wlb-panelngay .wlb-days__today {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 7px; box-sizing: border-box;
  background: #323738; color: #afb4ba;
  font-size: 14px; text-transform: uppercase; text-decoration: none;
}
.wlb-panelngay .wlb-days__today.is-on {
  background-color: transparent;
  background-image: linear-gradient(-90deg, #323839, #2f5a49);
  color: #fff;
}

/* Nhãn Sắp xếp (K4): hai liên kết thật, đang chọn xanh #07EB66. */
.wlb-sapxep { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--wlb-text-2); white-space: nowrap; }
.wlb-sapxep a { color: var(--wlb-text-2); text-decoration: none; }
.wlb-sapxep a.is-on { color: #07eb66; font-weight: 600; }

/* Chip giải biến thể màn Lịch/KQ (C4): 26px bo 6, #AFB4BA; active gradient + viền #00FF5D. */
.wlb-man-lich .wlb-filters--giai .wlb-filter,
.wlb-man-kq .wlb-filters--giai .wlb-filter {
  height: 26px; padding: 0 10px; border-radius: 6px;
  background: #323738; color: #afb4ba;
  font-size: 13px; text-transform: uppercase;
}
.wlb-man-lich .wlb-filters--giai .wlb-filter.is-on,
.wlb-man-kq .wlb-filters--giai .wlb-filter.is-on {
  background-color: transparent;
  background-image: linear-gradient(-90deg, #323839, #2f5a49);
  border: 1px solid #00ff5d; color: #00ff5d;
}
/* Desktop cho chip giải xuống nhiều hàng như họ; mobile giữ cuộn ngang. */
@media (min-width: 768px) {
  .wlb-man-lich .wlb-filters--giai,
  .wlb-man-kq .wlb-filters--giai { flex-wrap: wrap; overflow: visible; }
}

/* ---- KHUNG NHÓM GIẢI (C3): mỗi giải một hộp viền, tiêu đề NẰM TRONG ---- */
.wlb-man-kq .wlb-section,
.wlb-man-lich .wlb-section {
  border: 1px solid #343940; border-radius: 6px;
  margin: 0 14px 15px; overflow: hidden;
}
.wlb-man-kq .wlb-section__title,
.wlb-man-lich .wlb-section__title {
  margin: 0; padding: 12px 15px; background: var(--wlb-surface-2);
  font-size: 13px; color: var(--wlb-text);
}
.wlb-man-kq .wlb-section .wlb-rows,
.wlb-man-lich .wlb-section .wlb-rows { margin: 0; }

/* --------------------------------------------------------------------------
   DÒNG TRẬN MÀN KẾT QUẢ — .wlb-ls__dong--kq  (K1/K2/K3/K6/K7/C5)

   hộp tỷ số 72×30 bo 6 gradient navy · số 17px/700 Barlow, số thắng bọc chip
   27×28 bo 5 · HT nút 56×26 · góc/thẻ 12px/500 vế thắng #00EB1F · chip giờ
   nền #202229 viền #343940 · KHÔNG cột "Kết thúc".
   -------------------------------------------------------------------------- */
.wlb-ls__dong--kq {
  display: grid; align-items: center;
  /* Cột meta 260px như họ — QC 03/08: 128px làm chip giờ + chip vòng RỚT TẦNG,
     hàng phình 74px thay vì 53px. */
  grid-template-columns: 260px 1fr 72px 1fr 150px;
  gap: 10px; min-height: 53px; padding: 6px 15px;
  background: rgba(40, 55, 77, .2); border-bottom: 1px solid #343940;
  color: var(--wlb-text); text-decoration: none; box-sizing: border-box;
}
.wlb-ls__dong--kq:last-child { border-bottom: 0; }
.wlb-ls__meta { display: flex; flex-direction: row; gap: 6px; align-items: center; }
.wlb-ls__chipgio {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  background: #202229; border: 1px solid #343940; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: #afb4ba; white-space: nowrap;
}
/* Hộp tỷ số navy — CHỈ ở màn Kết quả, đừng đem sang Lịch/Livescore.
   Selector `.wlb .wlb-ls__so--kq` (0,2,0): phải THẮNG `.wlb .wlb-ls__so` đang phát
   Oswald/900 lên cùng phần tử — QC 03/08 đo ra số render Oswald dù đây khai Barlow. */
.wlb .wlb-ls__so--kq {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: 72px; height: 30px; border-radius: 6px; box-sizing: border-box;
  background: linear-gradient(91.74deg, #0e0065 5.46%, #09003f 92.29%);
  border: 1px solid #0e0065;
  font-family: Barlow, "Segoe UI", sans-serif; font-size: 17px; font-weight: 700; color: #fff;
}
.wlb-ls__so--kq i { font-style: normal; font-weight: 700; }
.wlb-ls__so--kq b.is-thang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 27px; height: 28px; border-radius: 5px;
  background: linear-gradient(0deg, #2532d5, #070e59 76%);
}
/* Ba cột chỉ số. */
.wlb-ls__kqcs { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.wlb-ls__htnut {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 56px; height: 26px; padding: 0 6px; border-radius: 6px;
  background: var(--wlb-surface-2); font-size: 15px; font-weight: 700;
}
.wlb-ls__htnut--trong { visibility: hidden; }
.wlb-ls__gt { min-width: 110px; font-size: 12px; font-weight: 500; color: var(--wlb-text-2); }
/* Dấu ngăn "|" xám giữa hai vế góc/thẻ (sổ K3). <u> chỉ là móc treo màu, bỏ gạch chân. */
.wlb-ls__gt u { text-decoration: none; color: #343940; margin: 0 4px; }
.wlb-ls__kqcs b { font-weight: inherit; color: inherit; }
.wlb-ls__kqcs b.is-hon { color: #00eb1f; }
/* Dòng luân lưu — chiếm trọn hàng dưới. */
.wlb-ls__pen {
  grid-column: 1 / -1; text-align: center;
  font-size: 11px; color: var(--wlb-text); opacity: .9;
}

@media (max-width: 991.98px) {
  /*
   * Mobile HAI TẦNG như thẻ 91px của họ (QC 03/08: bản cũ meta/đội/chỉ-số ba tầng
   * thành 120px). Tầng 1: chip giờ bên trái + cụm HT/góc/thẻ dồn phải CHUNG hàng;
   * tầng 2: đội – tỷ số – đội.
   */
  .wlb-ls__dong--kq { grid-template-columns: 1fr 72px 1fr; min-height: 91px; }
  .wlb-ls__meta { grid-row: 1; grid-column: 1 / 2; flex-direction: row; }
  .wlb-ls__kqcs { grid-row: 1; grid-column: 2 / 4; justify-content: flex-end; gap: 8px; }
  .wlb-ls__doi--nha { grid-row: 2; grid-column: 1; }
  .wlb-ls__dong--kq .wlb-ls__so, .wlb-ls__dong--kq .wlb-ls__so--kq { grid-row: 2; grid-column: 2; }
  .wlb-ls__dong--kq .wlb-ls__doi:not(.wlb-ls__doi--nha) { grid-row: 2; grid-column: 3; }
  .wlb-ls__htnut { height: 24px; font-size: 11px; font-weight: 500; min-width: 0; padding: 0 8px; background: #202229; border: 1px solid #343940; }
  .wlb-ls__gt { min-width: 0; height: 24px; display: inline-flex; align-items: center; padding: 0 8px; background: #202229; border: 1px solid #343940; border-radius: 6px; box-sizing: border-box; }
  .wlb .wlb-ls__so--kq { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   MÀN LIVESCORE — .wlb-man-ls / .wlb-mls__*  (sổ đo S1–S11, 03/08)

   Widget xoilac thuê từ apistatscore — chép HÌNH THỨC bằng dữ liệu nhà. Toàn bộ
   scoped: lớp gốc .wlb-ls__dong/.wlb-ls__gio... vẫn nguyên cho màn Lịch.
   -------------------------------------------------------------------------- */
/* S9: widget họ toàn Barlow — bỏ Oswald khỏi số trong scope này, KHÔNG đổi biến gốc. */
.wlb-man-ls .wlb-mls__so, .wlb-man-ls .wlb-mls__gio, .wlb-man-ls .wlb-mls__cs {
  font-family: Barlow, "Segoe UI", sans-serif;
}

/* S2: thanh lọc pill + đếm. */
.wlb-mls__loc { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.wlb-mls__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 6px;
  background: #323738; color: var(--wlb-text-2);
  font-size: 13px; text-transform: uppercase; text-decoration: none;
}
.wlb-mls__pill.is-on { background: var(--wlb-raised); color: #fff; font-weight: 700; }
@media (max-width: 767px) {
  .wlb-mls__loc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wlb-mls__pill { white-space: nowrap; }
}

/* S8: hàng tiêu đề cột — cùng lưới với dòng trận, 45px nền #2E2E2E 14/700. */
.wlb-mls__cot {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 64px 44px 1fr 70px 1fr 48px 40px 28px;
  min-height: 45px; padding: 0 12px;
  background: #2e2e2e; font-size: 14px; font-weight: 700; color: var(--wlb-text);
  border-radius: var(--wlb-r-sm) var(--wlb-r-sm) 0 0;
}
.wlb-mls__cot span { text-align: center; }
.wlb-mls__cot--nha { text-align: right !important; }

/* S7: đầu nhóm giải 45px nền đặc, tên 13 TRẮNG, logo 16 — đè trong scope. */
.wlb-man-ls .wlb-ls__giai {
  min-height: 45px; padding: 0 12px; align-items: center;
  background: #2e2e2e; font-size: 13px; color: var(--wlb-text);
}
.wlb-man-ls .wlb-ls__giai .wlb-ls__ico { width: 16px; height: 16px; flex: 0 0 16px; }

/* S1+S5: dòng trận — 8 ô, 61px, chẵn lẻ #232323/#1B1B1B, kẻ đáy rgb(51,54,57). */
.wlb-mls__dong {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 64px 44px 1fr 70px 1fr 48px 40px 28px;
  min-height: 61px; padding: 0 12px;
  text-decoration: none; color: var(--wlb-text-2); font-size: 13px;
  border-bottom: 1px solid rgb(51, 54, 57);
}
.wlb-mls__dong:nth-child(odd) { background: #232323; }
.wlb-mls__dong:nth-child(even) { background: #1b1b1b; }
.wlb-mls__dong:hover { color: var(--wlb-text); }

/* S6: giờ LUÔN xanh lá + ngày xám cùng ô; phút ô riêng màu vàng. */
.wlb-mls__gio { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.wlb-mls__gio b { font-size: 12px; font-weight: 600; color: rgb(47, 185, 37); }
.wlb-mls__gio i { font-style: normal; font-size: 11px; color: rgb(180, 187, 196); }
.wlb-mls__phut { text-align: center; font-size: 12px; font-weight: 700; color: rgb(255, 200, 0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.wlb-mls__doi { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--wlb-text); }
.wlb-mls__doi > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlb-mls__doi--nha { justify-content: flex-end; text-align: right; }
.wlb-mls__logo, .wlb-mls__logo img { width: 40px; height: 40px; }
.wlb-mls__logo { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.wlb-mls__logo img { object-fit: contain; }

/* S4: viên tỷ số 70×28 bo 8 gradient xanh dương; trận XONG lớp đỏ (S3). */
.wlb-mls__so {
  display: inline-flex; align-items: center; justify-content: center;
  width: 70px; height: 28px; border-radius: 8px;
  background: linear-gradient(130deg, rgb(21, 83, 239) -6.25%, rgb(12, 48, 137) 24.62%, rgb(12, 26, 76) 70.73%);
  font-size: 17px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.wlb-mls__so.is-xong { background: rgb(255, 54, 30); } /* S3: đỏ đo được, không phải đỏ trầm */
/* S10: chưa đá — chữ VS trần, trắng, không nền. */
.wlb-mls__vs { text-align: center; font-size: 14px; font-weight: 700; color: #fff; }

.wlb-mls__cs { text-align: center; font-size: 12px; color: var(--wlb-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wlb-mls__phat { display: flex; align-items: center; justify-content: center; color: rgb(47, 185, 37); }
.wlb-mls__phat--an { visibility: hidden; }

/* S11: mobile GIỮ đủ cột, chỉ co ô + logo 30; viên tỷ số giữ 70×28. */
@media (max-width: 767px) {
  .wlb-mls__cot { display: none; }
  .wlb-mls__dong { grid-template-columns: 48px 34px 1fr 70px 1fr 34px 28px 20px; gap: 5px; font-size: 12px; padding: 0 8px; }
  .wlb-mls__logo, .wlb-mls__logo img { width: 30px; height: 30px; }
  .wlb-mls__logo { flex: 0 0 30px; }
}
/*
 * ≤575 (mục 12, chủ bắt 03/08): 8 cột nhồi vào 390 làm tên đội cụt còn 1 chữ.
 * BỎ hai cột HT/góc (.wlb-mls__cs) — nhường bề rộng cho tên đội; giữ giờ | phút |
 * đội | tỷ số | đội | nút phát. Nhãn phút đã rút ngắn (HT/PEN) từ render.
 */
@media (max-width: 575px) {
  .wlb-mls__dong { grid-template-columns: 42px 30px 1fr 62px 1fr 18px; gap: 5px; }
  .wlb-mls__cs { display: none; }
  .wlb-mls__so { width: 62px; }
}

/* --------------------------------------------------------------------------
   TRANG TRẬN — T1/T4/T6 (sổ đo 03/08), scoped .wlb-scoreboard--bar

   ⚠️ CẢNH BÁO 1 của sổ việc: `.wlb-score` TRẦN là của thẻ trang chủ (chủ đích bỏ
   nền) — mọi luật dưới đây bám `--bar`, cấm đè lớp trần.
   -------------------------------------------------------------------------- */
/* T1: hộp tỷ số dải đầu trang — 74×28 bo 6, gradient xanh dương của họ. */
.wlb-scoreboard--bar .wlb-score {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 74px; height: 28px; border-radius: 6px; padding: 0 8px;
  background: linear-gradient(110deg, #1553ef, #0c3089 40%, #01081e 99%);
  font-size: 17px; font-weight: 700; color: #fff;
}
@media (max-width: 575.98px) { .wlb-scoreboard--bar .wlb-score { font-size: 15px; } }
/* T4: logo 49×49, tên 15/400 — CHỈ trong dải, scoreboard thường giữ 700/14.
   (Tên nằm trong .wlb-scoreboard__team > a|span — không có lớp __ten riêng.) */
.wlb-scoreboard--bar .wlb-logo--lg, .wlb-scoreboard--bar .wlb-logo--lg img { width: 49px; height: 49px; }
.wlb-scoreboard--bar .wlb-logo--lg { flex: 0 0 49px; }
.wlb-scoreboard--bar .wlb-scoreboard__team > a,
.wlb-scoreboard--bar .wlb-scoreboard__team > span { font-size: 15px; font-weight: 400; }
/* T6: mobile hàng nút cuộn ngang thay vì gãy dòng. */
@media (max-width: 991.98px) {
  .wlb-mnut { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .wlb-mnut::-webkit-scrollbar { display: none; }
}

/* T2: hàng tiêu đề trận + nút cược trên khung phát — 62,5px của họ, KHÔNG nền không viền. */
.wlb-tieude-tran {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 62px; padding: 0 12px; box-sizing: border-box;
}
.wlb-tieude-tran__ten {
  font-family: var(--wlb-font-so); font-size: 15px; font-weight: 700; color: #f2f3f3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Nút cược trên player: 270×32 gradient cam của họ. */
.wlb-cta--player {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 200px; max-width: 270px; height: 32px; padding: 0 14px;
  /* Bo 2px + gradient ĐỔ DỌC như đo (QC 03/08: mình từng bo 6 + 90deg). */
  border-radius: 2px; box-sizing: border-box;
  background: linear-gradient(180deg, #ff7f23, #ffbc09);
  color: #1b1b1b; font-size: 12px; font-weight: 700; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 991.98px) {
  /* ≤991 họ ẨN tên trận, giữ nút cược. */
  .wlb-tieude-tran__ten { display: none; }
  .wlb-tieude-tran { justify-content: center; min-height: 32px; }
  /* Không cấu hình nút cược thì ≤991 hàng chỉ còn hộp rỗng — ẩn hẳn
     (chốt 03/08: không có dữ liệu thì không vẽ khối). */
  .wlb-tieude-tran--khongcta { display: none; }
}

/* --------------------------------------------------------------------------
   TRANG BXH RIÊNG — biến thể VÒNG TRÒN + cột PHONG ĐỘ (sổ đo BXH 03/08)

   Trang BXH xoilac đánh dấu hạng bằng VÒNG TRÒN 24×24 chữ ĐEN quanh số (khác
   vạch 2px của trang giải — hai trang hai kiểu, đo được cả hai). Phong độ:
   5 nút 24×24 bo 4, W #56AC49 · D #FF8A00 · L #BF3D3D; header W/D/L tô màu.
   -------------------------------------------------------------------------- */
.wlb-gct__hangso i { font-style: normal; }
/* Kiểu vòng tròn: nền màu theo data-vach của HÀNG, chữ đen; hàng không hạng đặc biệt giữ chữ thường. */
.wlb-gct__bxh--tron .wlb-gct__hang[data-vach] { background-image: none; } /* tắt vạch 2px */
.wlb-gct__bxh--tron .wlb-gct__hang[data-vach] .wlb-gct__hangso i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--wlb-vach); color: #111; font-weight: 700;
}
/* Header W/D/L tô màu như của họ. */
.wlb-gct__hang--dau .wlb-gct__w { color: #01b243; }
.wlb-gct__hang--dau .wlb-gct__d { color: #3667c9; }
.wlb-gct__hang--dau .wlb-gct__l { color: #af2929; }
/* Lưới có cột Phong độ: thêm 180px trước cột Tiếp. */
.wlb-gct__bxh--pd .wlb-gct__hang {
  grid-template-columns: 45px minmax(0, 1fr) repeat(7, 44px) 180px 50px;
}
.wlb-gct__pd { display: flex; align-items: center; justify-content: center; gap: 5px; }
.wlb-gct__pdnut {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 4px;
  font-style: normal; font-size: 14px; font-weight: 700; color: #fff;
}
.wlb-gct__pdnut--w { background: #56ac49; }
.wlb-gct__pdnut--d { background: #ff8a00; }
.wlb-gct__pdnut--l { background: #bf3d3d; }
@media (max-width: 767.98px) {
  /* Mobile 7 cột như bậc thang của họ: giấu G, HSBT, Phong độ, Tiếp. */
  .wlb-gct__bxh--pd .wlb-gct__hang { grid-template-columns: 32px minmax(0, 1fr) repeat(4, 34px) 42px; column-gap: 8px; }
  .wlb-gct__pd { display: none; }
}

/* --------------------------------------------------------------------------
   MÀN TỶ LỆ KÈO — .wlb-keo__* (sổ đo B1, 03/08)

   Khối 3 hàng ~128px/trận (43/42/43) · tiêu đề giải 41px · mức kèo XANH DƯƠNG
   #0D57E9 + giá CAM #FF4C13 · header 40px · tab nhà cái 42px active #01B243.
   Mobile: bảng min-width 760 cuộn ngang TRONG .wlb-keo__cuon.
   -------------------------------------------------------------------------- */
.wlb-keo__nha {
  display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  margin: 0 14px 12px; min-height: 42px; align-items: center;
}
.wlb-keo__nha::-webkit-scrollbar { display: none; }
.wlb-keo__nhamuc {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: 6px; background: #323738; color: var(--wlb-text-2);
  font-size: 13px; white-space: nowrap; text-decoration: none;
}
.wlb-keo__nhamuc.is-on { background: #01b243; color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   CHIP LỌC NHÓM KÈO — dải "Tất cả · Châu Á · Châu Âu · Tài xỉu · Phạt góc"

   Chạy bằng radio + `~`, KHÔNG JS (bố cục/chức năng cấm phụ thuộc JS — bài học
   LiteSpeed hoãn script 31/07). Radio ẩn đi nhưng KHÔNG dùng `display:none`:
   phần tử `display:none` không nhận được tiêu điểm bàn phím, người dùng Tab sẽ
   không tới được chip nào. Đẩy ra ngoài khung nhìn thì vẫn bấm Tab tới được.
   -------------------------------------------------------------------------- */
.wlb-klr { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wlb-kchips {
  display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  margin: 0 14px 10px;
}
.wlb-kchips::-webkit-scrollbar { display: none; }
/*
 * GỢI Ý VUỐT (05/08). Đo @390: dải cần 365px trong khung 330 nên chip "PHẠT GÓC"
 * cụt mất 35px (@360 cụt 65px) — thanh cuộn thì đã bị giấu ở ngay trên, nên trên
 * điện thoại KHÔNG có dấu hiệu nào cho biết còn chip phía sau. Người dùng đọc là
 * "chip bị vỡ", không phải "vuốt sang trái".
 *
 * Chữa bằng vệt mờ 28px ở mép phải + đúng 28px đệm phải BÊN TRONG vùng cuộn:
 * lúc chưa cuộn hết, chip cuối mờ dần → mắt hiểu là còn nữa; vuốt tới cuối thì
 * phần nằm dưới vệt mờ là ĐỆM chứ không phải chữ, nên chip cuối vẫn rõ nguyên.
 * Không dùng JS (bố cục cấm phụ thuộc JS) và không dựng nút mũi tên giả.
 *
 * 28px chứ không phải 18: thử 18px rồi chụp lại, vệt mờ mảnh tới mức nhìn vẫn ra
 * "chip bị cắt" chứ không ra "còn nữa" — đúng cái bẫy tin số mà không xem ảnh.
 *
 * Chỉ bật ở khổ hẹp: từ 768 trở lên dải vừa khung, thêm vệt mờ là bịa một dấu
 * hiệu cuộn cho thứ không cuộn được.
 */
@media (max-width: 767.98px) {
  .wlb .wlb-kchips {
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}
.wlb-kchip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: 6px; background: var(--wlb-raised); color: var(--wlb-text-2);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; user-select: none;
}
/* Chip đang chọn — nền đặc như tab đang-chọn (chốt parity 03/08: có gối, không viền rỗng). */
.wlb-klr:checked + .wlb-kchips .wlb-kchip { background: var(--wlb-raised); }
.wlb-keo-boc > .wlb-klr:nth-of-type(1):checked ~ .wlb-kchips .wlb-kchip:nth-of-type(1),
.wlb-keo-boc > .wlb-klr--a:checked ~ .wlb-kchips .wlb-kchip--a,
.wlb-keo-boc > .wlb-klr--e:checked ~ .wlb-kchips .wlb-kchip--e,
.wlb-keo-boc > .wlb-klr--o:checked ~ .wlb-kchips .wlb-kchip--o,
.wlb-keo-boc > .wlb-klr--g:checked ~ .wlb-kchips .wlb-kchip--g {
  background: linear-gradient(270deg, #01b243, #018f36); color: #fff;
}
.wlb-klr:focus-visible + .wlb-kchips .wlb-kchip { outline: 2px solid var(--wlb-accent); outline-offset: 2px; }
/*
 * Chọn một nhóm → giấu ba nhóm kia. Giấu CẢ tiêu đề (`__dau`) lẫn hai hàng
 * (`__hang`) của nhóm đó, nếu không tiêu đề còn trơ lại mà không có số bên dưới.
 * Dải kèo phụ (đôi cơ hội / hai đội ghi bàn) luôn giữ — nó không thuộc nhóm nào.
 */
.wlb-keo-boc > .wlb-klr--a:checked ~ .wlb-keo :is(.wlb-keo__dau, .wlb-keo__luoi > .wlb-keo__hang):not(.wlb-keo--a),
.wlb-keo-boc > .wlb-klr--e:checked ~ .wlb-keo :is(.wlb-keo__dau, .wlb-keo__luoi > .wlb-keo__hang):not(.wlb-keo--e),
.wlb-keo-boc > .wlb-klr--o:checked ~ .wlb-keo :is(.wlb-keo__dau, .wlb-keo__luoi > .wlb-keo__hang):not(.wlb-keo--o),
.wlb-keo-boc > .wlb-klr--g:checked ~ .wlb-keo :is(.wlb-keo__dau, .wlb-keo__luoi > .wlb-keo__hang):not(.wlb-keo--g) {
  display: none;
}

.wlb-keo__cuon { margin: 0 14px 16px; overflow-x: auto; }
/*
 * 760px CHỈ cho bảng NẰM TRONG khung cuộn ngang của trang Tỷ lệ kèo.
 *
 * Luật này trước đây không phân biệt: `.wlb-keo { min-width: 760px }`. Nhưng cùng
 * lớp `.wlb-keo` còn được `WLB_Render::odds_tabs()` dùng trên TRANG TRẬN, nơi KHÔNG
 * có `.wlb-keo__cuon` bọc ngoài — nên bảng ghim 760px trong màn 390px rồi bị khung
 * cha cắt cụt, mất hẳn cột bên phải (chủ gửi ảnh 05/08; đo được `.wlb-keo` w=760,
 * `.wlb-keo__hang` right=749 trong khung nhìn 390).
 *
 * Trang Tỷ lệ kèo vẫn giữ nguyên hành vi cũ (cuộn ngang trong khối, cấm tràn trang)
 * vì bảng ở đó nằm đúng trong khung cuộn.
 */
.wlb-keo__cuon .wlb-keo { min-width: 760px; }

.wlb-keo__dau,
.wlb-keo__tran {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 66px minmax(160px, 1fr) 80px 93px repeat(4, minmax(110px, 186px));
  padding: 0 12px;
}
.wlb-keo__dau {
  min-height: 40px; background: #2e2e2e;
  font-family: var(--wlb-font-so); font-size: 13px; font-weight: 700; color: var(--wlb-text);
  text-align: center; border-radius: var(--wlb-r-sm) var(--wlb-r-sm) 0 0;
}
.wlb-keo__dau--trai { text-align: left; }

.wlb-keo__giai {
  display: flex; align-items: center; gap: 7px;
  min-height: 41px; padding: 0 12px; background: rgba(40, 55, 77, .2);
  font-family: var(--wlb-font-so); font-size: 13px; font-weight: 700; color: var(--wlb-text);
}
.wlb-keo__tran {
  min-height: 128px; text-decoration: none; color: var(--wlb-text);
  background: #232323; border-bottom: 1px solid rgb(51, 54, 57); font-size: 13px;
}
.wlb-keo__tran:nth-child(even) { background: #1b1b1b; }
.wlb-keo__gio { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wlb-keo__gio b { font-size: 13px; font-weight: 600; font-family: var(--wlb-font-so); }
.wlb-keo__gio i { font-style: normal; font-size: 11px; color: var(--wlb-text-2); }
/* Nhãn Live đỏ dưới giờ — đúng lối widget. */
.wlb-keo__gio em { font-style: normal; font-size: 11px; font-weight: 700; color: #d64444; }
/* Ba hàng đội: chủ / Hòa / khách. */
.wlb-keo__doi { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wlb-keo__doi > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.wlb-keo__hoa { color: var(--wlb-text-2); font-weight: 400 !important; }
.wlb-keo__so { text-align: center; font-size: 15px; font-weight: 700; }
/* Tỷ số đang đá xanh #0089F1 — đúng màu widget. */
.wlb-keo__so.is-live { color: #0089f1; }
/* Cột kèo: 3 ô xếp dọc thẳng hàng với 3 hàng đội. */
.wlb-keo__cot { display: flex; flex-direction: column; gap: 10px; }
.wlb-keo__o { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 18px; }
.wlb-keo__o b { color: #4f8af1; font-weight: 600; }   /* mức — xanh dương (nâng sáng cho nền tối) */
.wlb-keo__o i { font-style: normal; color: #ff7a4d; font-weight: 600; } /* giá — cam */

/* --------------------------------------------------------------------------
   DÒNG TRẬN MÀN LỊCH — .wlb-lich__* (sổ đo L1/L3, 03/08)
   -------------------------------------------------------------------------- */
.wlb-lich__dong {
  display: grid; align-items: center; gap: 10px;
  /* L1: bộ cột 260|…|100|…|190 của họ (QC 03/08: auto co cột giờ còn 46px). */
  grid-template-columns: 260px 1fr 100px 1fr 190px;
  min-height: 53px; padding: 10px 15px;
  background: rgba(40, 55, 77, .2); border-bottom: 1px solid #343940;
  color: var(--wlb-text); text-decoration: none; font-size: 13px;
}
.wlb-lich__dong:last-child { border-bottom: 0; }
.wlb-lich__meta { display: flex; gap: 6px; align-items: center; }
.wlb-lich__doi { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; }
.wlb-lich__doi > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlb-lich__doi--nha { justify-content: flex-end; text-align: right; }
.wlb-lich__logo, .wlb-lich__logo img { width: 32px; height: 32px; }
.wlb-lich__logo { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; }
.wlb-lich__logo img { object-fit: contain; }
/* Chưa đá: VS TRẦN — sổ đo L1 bắt đúng lỗi ô "–" nền xám của bản cũ. */
.wlb-lich__vs { text-align: center; font-weight: 700; color: #fff; }
.wlb-lich__so {
  text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--wlb-raised); border-radius: 5px; padding: 3px 0;
}
.wlb-lich__so.is-live { color: var(--wlb-live); }
/* Nút đỏ "Xem trực tiếp" — thế chỗ cột trạng thái rỗng 92px. */
.wlb-lich__nut {
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px;
  border-radius: 10px; background: #aa332a; color: #fff;
  font-size: 12px; white-space: nowrap;
}
/* L3 — mobile HAI HÀNG như thẻ 358×84 của họ: meta + nút hàng trên, đội hàng dưới. */
@media (max-width: 767.98px) {
  .wlb-lich__dong { grid-template-columns: 1fr 54px 1fr; row-gap: 8px; min-height: 84px; }
  .wlb-lich__meta { grid-column: 1 / 3; }
  .wlb-lich__nut { grid-column: 3 / 4; grid-row: 1; justify-self: end; }
  .wlb-lich__doi--nha { grid-row: 2; }
  .wlb-lich__logo, .wlb-lich__logo img { width: 26px; height: 26px; }
  .wlb-lich__logo { flex: 0 0 26px; }
}
/* Nhãn Sắp xếp TĨNH ở màn Lịch (họ chỉ có một lối sắp) — không phải liên kết. */
.wlb-sapxep b { color: #07eb66; font-weight: 600; }

/* --------------------------------------------------------------------------
   VÁ QC ĐỐI NGHỊCH 03/08 — mọi luật SCOPED (.wlb-panelngay/.wlb-man-*/.wlb-lich),
   không đụng lớp gốc trang chủ. Nguồn số: 3 workflow đo computed style trên WP
   thật vs sổ đo xoilac (SO-VIEC-PARITY-4-TRANG + SO-VIEC-BXH-TYLE).
   -------------------------------------------------------------------------- */

/* C2: pill HÔM NAY Barlow 14 (mobile Oswald 13) — luật `.wlb .wlb-days__today`
   dòng ~221 phát Oswald cho cả cụm số, phải đè trong scope panel. */
.wlb-panelngay .wlb-days__today { font-family: var(--wlb-font); }
@media (max-width: 575px) {
  .wlb-panelngay .wlb-days__today { font-family: var(--wlb-font-so); font-size: 13px; }
  /* @360 hàng ngày + hàng Sắp xếp cộng lại 347 > khung 332 (đo 03/08) — cho xuống
     dòng thay vì cắt cụt nút Sắp xếp. */
  .wlb-panelngay__hang { padding: 10px 6px; flex-wrap: wrap; gap: 8px; }
  .wlb-ls__chipgio { font-size: 11px; }
}

/* S2: huy hiệu đếm trong pill lọc Livescore — 30×18 nền #1b212a 11/600 bo 38. */
.wlb-man-ls .wlb-mls__pill .wlb-ls__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 18px; padding: 0 7px; border-radius: 38px;
  background: #1b212a; font-size: 11px; font-weight: 600;
}

/* C3: đầu hộp nhóm giải 49px, logo giải 24, chữ 13 trắng — khai PHÔNG tường minh
   vì h3 của theme (serif Cardo) thắng kế thừa từ .wlb (bài học PR #405/#406). */
.wlb-man-kq .wlb-section__title, .wlb-man-lich .wlb-section__title {
  min-height: 49px; padding: 12px 15px; box-sizing: border-box;
  font-family: var(--wlb-font); font-size: 13px; font-weight: 600; color: #fff;
}
.wlb-man-kq .wlb-section__title .wlb-ls__ico, .wlb-man-lich .wlb-section__title .wlb-ls__ico,
.wlb-man-kq .wlb-section__title .wlb-ls__ico img, .wlb-man-lich .wlb-section__title .wlb-ls__ico img {
  width: 24px; height: 24px;
}

/* K7: logo đội hàng Kết quả 32 (như Lịch) — lớp gốc --xs 20 giữ cho nơi khác. */
.wlb-man-kq .wlb-logo--xs, .wlb-man-kq .wlb-logo--xs img { width: 32px; height: 32px; }
.wlb-man-kq .wlb-logo--xs { flex-basis: 32px; }

/* K5: hàng tiêu đề cột màn Kết quả (họ có, mình thiếu) — cùng bộ cột với dòng trận. */
.wlb-ls__cot--kq {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 260px 1fr 72px 1fr 150px;
  padding: 8px 15px; font-size: 12px; font-weight: 500; color: var(--wlb-text-2);
  border-bottom: 1px solid #343940;
}
.wlb-ls__cot--kq span { text-align: center; }
.wlb-ls__cot--kq span:first-child { text-align: left; }
@media (max-width: 991.98px) { .wlb-ls__cot--kq { display: none; } }

/* K4/L2: nhãn Sắp xếp chạy Raleway (bộ phông đã nạp), không rơi về Barlow. */
.wlb-sapxep, .wlb-sapxep a, .wlb-sapxep b { font-family: Raleway, sans-serif; }

/* L1: nút "Xem trực tiếp" đứng giữa vùng 190px ở desktop (mobile giữ neo phải cũ). */
@media (min-width: 768px) { .wlb-lich__nut { justify-self: center; } }

/* --------------------------------------------------------------------------
   BIẾN THỂ TRANG BXH RIÊNG — .wlb-man-bxh (sổ đo BXH 03/08, mục A)
   Trang BXH của họ RỘNG toàn khối nên bộ cột KHÁC trang chi tiết giải; thanh môn,
   chip giải, thẻ đầu giải cũng đo ra bộ số riêng. Tất cả chỉ sống trong scope này.
   -------------------------------------------------------------------------- */
.wlb.wlb-man-bxh { background: #212324; }

/* Thanh môn: hàng 67, nút cao 41 Oswald 14, đang-chọn gradient 270deg chữ #00FFFD. */
.wlb-man-bxh .wlb-sports { padding: 13px 0; }
.wlb-man-bxh .wlb-sport {
  min-height: 41px; padding: 0 18px;
  font-family: var(--wlb-font-so); font-size: 14px;
}
.wlb-man-bxh .wlb-sport.is-on {
  background: linear-gradient(270deg, #323839, #2f5a49); color: #00fffd;
}

/* Chip giải: 26px bo 6 nền #323738, đang-chọn gradient −90deg (phải đè background-image
   vì lớp gốc .is-on chỉ đổi màu chữ). */
.wlb-man-bxh .wlb-filter {
  height: 26px; padding: 0 10px; border-radius: 6px;
  background: #323738; display: inline-flex; align-items: center;
}
.wlb-man-bxh .wlb-filter.is-on {
  background-image: linear-gradient(-90deg, #323839, #2f5a49); color: #fff;
}

/* Thẻ đầu giải GỌN 53px: logo 18, tên 14/700 Barlow (trang giải giữ thẻ 95 riêng). */
.wlb-man-bxh .wlb-gct__the { min-height: 53px; padding: 8px 12px; }
.wlb-man-bxh .wlb-gct__logo, .wlb-man-bxh .wlb-gct__logo img { width: 18px; height: 18px; }
.wlb-man-bxh .wlb-gct__logo { flex-basis: 18px; }
.wlb-man-bxh .wlb-gct__ten { font-family: var(--wlb-font); font-size: 14px; font-weight: 700; }

/* Tab sân + ổ mùa: viền 1px cho đủ nhịp 52/67-78-93 (QC: hụt 2px đồng đều = thiếu viền). */
.wlb-man-bxh .wlb-gct__tab, .wlb-man-bxh .wlb-gct__mua { border: 1px solid #3f4040; }

/* Bảng: bộ cột trang BXH — # 45 | Đội 232 | 7 cột chỉ số | Phong độ 180 | Tiếp 50;
   hàng nền #292D2E kẻ đáy 1px #3F4040 (trang giải: không kẻ — khác nhau THẬT). */
.wlb-man-bxh .wlb-gct__hang {
  grid-template-columns: 45px 232px repeat(7, 1fr) 180px 50px;
  background: #292d2e; border-bottom: 1px solid #3f4040;
}
.wlb-man-bxh .wlb-gct__doiten { font-family: "Be Vietnam Pro", Barlow, sans-serif; }
.wlb-man-bxh .wlb-gct__doi .wlb-logo, .wlb-man-bxh .wlb-gct__doi .wlb-logo img { width: 24px; height: 24px; }
.wlb-man-bxh .wlb-gct__doi .wlb-logo { flex-basis: 24px; }

/*
 * DẢI TABLET 768–991: bộ cột desktop cần ~1154px nhưng cột nội dung chỉ 718–958.
 * Đo 03/08 @768: các cột chỉ số co còn 7–31px và hàng bị CẮT (cha overflow:hidden,
 * ruột 790 > khung 690) — số liệu không đọc được. Thu gọn: giữ đủ 7 cột chỉ số
 * 44px, ẩn cột Phong độ (số tự suy, không phải của nguồn) để vừa khít.
 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .wlb-man-bxh .wlb-gct__hang { grid-template-columns: 40px minmax(0, 1fr) repeat(7, 44px) 50px; }
  .wlb-man-bxh .wlb-gct__pd { display: none; }
}
/*
 * @390 họ ẨN G/HSBT/Phong độ VÀ Tiếp — còn 7 cột (QC: quên Tiếp nên Đội teo 80px).
 *
 * ⚠️ VÁ 05/08 — TÊN ĐỘI TEO CÒN MỘT CHỮ CÁI. Bản cũ đổi bộ cột nhưng để nguyên
 * `column-gap: 15px` và `padding: 0 12px` của bộ desktop. Cộng lại: 30 + 4×36 + 40
 * cột cứng = 214, cộng 6 khe × 8 = 48 (khe 8px là của luật trang giải ăn sang), cộng
 * đệm 24 → 286 trên một hàng chỉ rộng 308 (@360). Cột Đội còn 46px, mà TRONG đó đã
 * có logo 24 + khe 6, nên phần chữ chỉ còn 16px = ĐÚNG một ký tự rồi "…".
 * Đo trước khi vá: @360 tên 16px/1 ký tự · @390 46px/6 ký tự.
 *
 * Nay bóp đúng ba thứ đang ăn đất mà không mang thông tin: khe 8→6, đệm 12→8, và
 * các cột số 36→26 / 40→32 (số hai chữ ở 13px chỉ cần ~15px, 26px vẫn dư chỗ thở).
 * KHÔNG bỏ thêm cột nào — bảng xếp hạng mà thiếu W/D/L thì không còn là bảng.
 */
@media (max-width: 767.98px) {
  .wlb-man-bxh .wlb-gct__hang {
    grid-template-columns: 26px minmax(0, 1fr) repeat(4, 26px) 32px;
    column-gap: 6px; padding: 0 8px;
  }
  .wlb-man-bxh .wlb-gct__hang > :nth-child(7), .wlb-man-bxh .wlb-gct__hang > :nth-child(8),
  .wlb-man-bxh .wlb-gct__pd, .wlb-man-bxh .wlb-gct__tiep { display: none; }
  /* Tiêu đề "Đội bóng" gãy hai dòng làm hàng đầu cao vống — cột nay đủ rộng, ghì một dòng. */
  .wlb-man-bxh .wlb-gct__hang--dau > span { white-space: nowrap; }
}

/* Kèo @390: ba cột đầu gọn 40|177|46, mỗi nhóm kèo 108 — bảng thấy ngay 317px
   trước mép cuộn như widget của họ. */
@media (max-width: 767.98px) {
  /* scope .wlb-keo__cuon: KHONG lay sang bang keo mini trang tran (trung ten __dau) */
  .wlb-keo__cuon .wlb-keo__dau, .wlb-keo__cuon .wlb-keo__tran {
    grid-template-columns: 40px 177px 46px 54px repeat(4, 108px);
  }
}

/* B2: hàng 7 pill ngày trang kèo — áo chip 28/bo 7 nền #323738, đang-chọn gradient −90deg. */
.wlb-keo__ngay { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 14px 12px; }
.wlb-keo__ngaymuc {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: 7px; background: #323738; color: #afb4ba;
  font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.wlb-keo__ngaymuc:hover { color: #fff; }
.wlb-keo__ngaymuc.is-on { background-image: linear-gradient(-90deg, #323839, #2f5a49); color: #fff; }

/* A1: hàng lọc trang BXH = ổ quốc gia 110×28 + hàng chip giải (hàng ~59, @390 ~41). */
.wlb-bxh__hangloc { display: flex; align-items: flex-start; gap: 10px; margin: 0 14px 12px; }
.wlb-bxh__hangloc .wlb-filters { margin: 0; flex: 1 1 auto; }
.wlb-ldrop--qg { position: relative; flex: 0 0 auto; }
.wlb-ldrop--qg .wlb-ldrop__nut {
  height: 28px; min-width: 110px; padding: 4px 10px; border-radius: 6px;
  font-size: 12px; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
}

/* B1 (y chang 03/08): hạng [n] đỏ + thẻ vàng/đỏ hàng live + cột H1 empty-state. */
/* Ten __bac — __hang da la khoi grid o bang keo trang tran, trung ten la chip thanh grid vo hang. */
.wlb-keo__bac { color: #f04a3e; font-style: normal; font-size: 11px; font-weight: 600; margin-right: 3px; }
.wlb-keo__the--v, .wlb-keo__the--d {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 12px; height: 14px; padding: 0 2px; margin-left: 3px;
  border-radius: 2px; font-size: 10px; font-weight: 700; text-decoration: none;
}
.wlb-keo__the--v { background: #ffc800; color: #1b1b1b; }
.wlb-keo__the--d { background: #e02c1e; color: #fff; }
/* Cột hiệp 1 chờ nguồn: mờ đi cho khỏi tưởng kèo thật đang khoá. */
.wlb-keo__cot--trong { opacity: .45; }

/* Ổ chọn mùa (details) — summary mặc áo .wlb-gct__mua sẵn, bảng xổ nhỏ neo phải. */
.wlb-gct__muadrop { position: relative; }
.wlb-gct__muadrop summary { list-style: none; cursor: pointer; }
.wlb-gct__muadrop summary::-webkit-details-marker { display: none; }
.wlb-gct__muabang {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 130px; padding: 4px; border-radius: 6px;
  background: #292d2e; border: 1px solid #3b4041; box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.wlb-gct__muamuc {
  display: block; padding: 7px 10px; border-radius: 4px;
  color: #afb4ba; font-size: 13px; text-decoration: none; white-space: nowrap;
}
.wlb-gct__muamuc:hover { background: #323738; color: #fff; }
.wlb-gct__muamuc.is-on { background: linear-gradient(-90deg, #323839, #2f5a49); color: #fff; }

/* Lưới TIN TỨC + 3 khối dưới trang chủ (y chang xl_home 03/08). */
.wlb-tin {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 14px 16px;
}
@media (max-width: 991.98px) { .wlb-tin { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .wlb-tin { grid-template-columns: 1fr; } }
.wlb-tin__the {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: #292d2e; border-radius: 6px; overflow: hidden; padding-bottom: 10px;
}
.wlb-tin__anh { display: block; aspect-ratio: 16 / 9; background: #202229; }
.wlb-tin__anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wlb-tin__ten {
  padding: 0 10px; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wlb-tin__ngay { padding: 0 10px; color: #7f8790; font-size: 11px; }
.wlb-nha__khoi { margin-top: 18px; }
.wlb-nha__xemall { margin-left: auto; color: #00ff5d; font-size: 12px; text-decoration: none; white-space: nowrap; }
.wlb-nha__xemall:hover { text-decoration: underline; }

/* Bóng tự vẽ thế chỗ ảnh tin thiếu thumbnail — ô 16:9 không được trống trơn. */
.wlb-tin__anh { display: flex; align-items: center; justify-content: center; }
.wlb-tin__bong { width: 36px; height: 36px; color: #3a4145; }

/* Dải nói thật khi trận không có luồng — người xem phải biết vì sao đang thấy quảng cáo. */
.wlb-thieuluong {
  margin-top: 8px; padding: 9px 14px; border-radius: 6px;
  background: #292d2e; border-left: 3px solid #ffc800;
  color: #d6dade; font-size: 13px;
}

/*
 * CHỐNG LOÉ TRẮNG HAI BÊN khi tải lại (chủ 03/08): khối full-bleed do wlb-width.js
 * nới SAU DOMContentLoaded — trước lúc đó khối còn bề rộng cột theme, nền trang
 * trắng lộ hai mép. Sơn nền tối cho CẢ TRANG ngay từ lượt vẽ đầu bằng CSS thuần
 * (bố cục cấm phụ thuộc JS — bài học LiteSpeed 31/07). CHỪA chế độ hòa theme
 * (--blend): chủ site đã chọn ăn màu theme thì không ép tối.
 */
body:has(.wlb.wlb--wide:not(.wlb--blend)) { background: #212324; }