/*
Theme Name: soicau247
Theme URI: https://soicau247.local
Description: Theme cho site KQXS + Thống kê soicau247.local. CSS thuần viết tay, KHÔNG Tailwind, KHÔNG npm, không webfont, mobile-first. Design system "Mẫu 2" (xanh dương đậm + trắng, khung mảnh, nhiều khoảng thở) — ADR-005.
Author: Dự án soicau247
Version: 0.5.13
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: soicau247
*/

/* ============================================================
   1) DESIGN TOKENS — nguồn sự thật cho màu/viền/khoảng cách.
   Mẫu 2: xanh dương đậm + trắng, khung mảnh, thoáng.
   ============================================================ */
:root {
  /* Thương hiệu */
  --color-primary: #0b3d91;      /* xanh dương đậm */
  --color-primary-d: #082a63;
  --color-primary-l: #2563eb;
  --color-accent: #2563eb;       /* xanh nhấn (link/nút) */
  --color-db: #c81e1e;           /* số Đặc Biệt — đỏ, nổi nhất trang */

  /* Nền & chữ */
  --bg: #f2f2f2;                 /* nền trang */

  --bg-card: #ffffff;            /* nền thẻ/bảng */
  --bg-alt: #f1f5fb;             /* nền phụ (hàng ĐB, nhãn) */
  --bg-muted: #f8fafc;
  --text: #1e293b;
  --text-muted: #64748b;
  --text-invert: #ffffff;
  /* ADR-036: LINK gom về token — đổi 1 dòng đổi màu/độ đậm link toàn site.
     LUẬT: CẤM set color/font-weight cho <a> nội dung bằng giá trị cứng — chỉ dùng
     các token này; link trên nền đậm dùng lớp ngữ cảnh .on-dark (--link-invert). */
  --link: #1a73e8;               /* xanh link (ĐÃ CHỐT) */
  --link-hover: #1768d1;         /* đậm hơn ~10% khi hover */
  --link-weight: 400;            /* link thanh mảnh — KHÔNG bold */
  --link-invert: #ffffff;        /* link trên nền đậm (.on-dark / header / footer / th) */

  /* Viền */
  --border: #dbe4f0;
  --border-strong: #c3d0e4;
  /* ADR-033: bo góc gom về 2 token duy nhất. --radius cho khung/bảng/ô/nút/tab/khối;
     --radius-pill riêng badge/viên (BOT·QTV·đếm nháy). Cả 2 = 0 → toàn site vuông 90°.
     LUẬT: CẤM viết border-radius giá trị cứng — chỉ dùng 2 biến này (lint grep = 0). */
  --radius: 0;
  --radius-pill: 0;

  /* Nhịp khoảng cách */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Bố cục / chữ */
  --container-max: 1000px;

  --sidebar-w: 280px;
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  --fs: 15px;
  --lh: 1.55;
  --shadow: 0 1px 3px rgba(11, 61, 145, .08);
}

/* ============================================================
   2) RESET / BASE tối giản
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-base);
  font-size: var(--fs);
  line-height: var(--lh);
}
a { color: var(--link); font-weight: var(--link-weight); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
/* ADR-036: link trên NỀN ĐẬM — 1 lớp ngữ cảnh .on-dark (gắn cho wrapper nền xanh:
   header/footer + hàng th), KHÔNG viết rule trắng lẻ cho từng khối. */
.on-dark a, .kq-multi thead th a { color: var(--link-invert); }
.on-dark a:hover, .kq-multi thead th a:hover { color: var(--link-invert); text-decoration: underline; }
h1, h2, h3, h4, .h1, .h2, .h3 { line-height: 1.3; color: var(--color-primary-d); font-weight: 600; }
h1, .h1 { font-size: 1.4rem; font-weight: 600; margin: 16px 0 12px; }
h2, .h2 { font-size: 1.18rem; font-weight: 600; margin: 20px 0 12px; }
h3, .h3 { font-size: 1.02rem; font-weight: 600; margin: 16px 0 10px; }
img { max-width: 100%; height: auto; }
/* Mọi ô chứa số: số thẳng cột (ADR-005). */
table, .num, .kq-num, .lo, .db-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   3) KHUNG SITE (header/main/footer)
   ============================================================ */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); }

.site-header { background: var(--color-primary); color: var(--text-invert); }
.site-header .container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
}
.site-branding { display: flex; align-items: center; gap: 10px; }
.site-branding img.custom-logo { max-height: 38px; width: auto; height: auto; display: block; }
.site-brand { font-size: 1.25rem; font-weight: 700; color: var(--text-invert); letter-spacing: .3px; text-decoration: none; }
.site-brand:hover { text-decoration: none; opacity: .95; }
.site-tagline { font-size: .8rem; color: rgba(255,255,255,.82); }

/* Nút Toggle Hamburger ẩn trên Desktop */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: #ffffff;
  padding: 6px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.15s ease;
}
.nav-toggle:hover,
.nav-toggle:focus {
  background: rgba(255, 255, 255, 0.15);
}

/* Menu chính (Navigation) */
.site-nav { display: flex; align-items: center; }
.site-nav .nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav .nav-menu li { position: relative; margin: 0; list-style: none; }
.site-nav .nav-menu a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  /* ADR-036: màu trắng do .on-dark (trên .site-header) cấp — không set cứng ở đây. */
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.site-nav .nav-menu a:hover,
.site-nav .nav-menu li.current-menu-item > a,
.site-nav .nav-menu li.current_page_item > a {
  background: rgba(255, 255, 255, 0.18);
  text-decoration: none; /* ADR-036: giữ 'không gạch chân' cho menu (thắng .on-dark a:hover); màu trắng do .on-dark cấp */
}

/* Mũi tên tam giác ▾ cân bằng, tinh tế khớp Ảnh Demo 4 */
.site-nav .nav-menu li.menu-item-has-children > a::after,
.site-nav .nav-menu li.page_item_has_children > a::after,
.site-nav .nav-menu li:has(> ul) > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255, 255, 255, 0.9);
  margin-left: 2px;
  margin-top: 2px;
  transition: transform 0.2s ease, border-top-color 0.2s ease;
}
.site-nav .nav-menu li.menu-item-has-children:hover > a::after,
.site-nav .nav-menu li.page_item_has_children:hover > a::after,
.site-nav .nav-menu li:has(> ul):hover > a::after {
  border-top-color: #ffffff;
  transform: rotate(180deg);
}

/* Sub-menu (Dropdown) */
.site-nav .nav-menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 0;
  min-width: 180px;
  display: none;
  z-index: 999;
  list-style: none;
}
.site-nav .nav-menu li:hover > ul { display: block; }
.site-nav .nav-menu ul li { width: 100%; }
.site-nav .nav-menu ul a {
  color: #1e293b;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 0.88rem;
  border-radius: var(--radius);
  display: block;
}
.site-nav .nav-menu ul a:hover {
  background: #f1f5f9;
  color: #0b3d91;
}
.site-nav .nav-menu ul li > a::after { display: none; }

/* Responsive Mobile (< 768px): Logo bên TRÁI, Nút Hamburger bên PHẢI */
@media (max-width: 768px) {
  .site-header .container {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .site-branding img.custom-logo {
    max-height: 30px;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .site-nav {
    display: none;
    width: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
  .site-nav.is-open {
    display: block;
  }
  .site-nav .nav-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
  }
  .site-nav .nav-menu li {
    width: 100%;
  }
  .site-nav .nav-menu a {
    width: 100%;
    justify-content: space-between;
    padding: 9px 12px;
  }
  .site-nav .nav-menu ul {
    position: static;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: var(--radius);
    margin: 4px 0;
    width: 100%;
  }
  .site-nav .nav-menu ul a {
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
  }
  .site-nav .nav-menu ul a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
  }
}

.site-main { padding: var(--space-6) 0 var(--space-8); min-height: 50vh; }

/* .site-footer — xem phần 10 ở cuối file. */


/* ============================================================
   4) LAYOUT 70/30 cho nhóm KQXS
   ============================================================ */
.kq-layout { display: block; }
/* Trang KQXS/thống kê (router): thu nội dung về 1000px cho gọn, GIỮ sidebar 320px;
   header/footer vẫn full theo --container-max. */
body.xoso-kqpage .kq-layout { max-width: 1000px; margin-left: auto; margin-right: auto; }
.kq-main { min-width: 0; }
.kq-side { margin-top: var(--space-6); }
@media (min-width: 1024px) {
  .kq-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: var(--space-6); align-items: start; }
  .kq-side { margin-top: 0; }
}

/* ============================================================
   5) THẺ / PANEL
   ============================================================ */
.panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: var(--space-5);
}
.panel-head { background: var(--color-primary); color: #fff; padding: 10px var(--space-4); font-weight: 700; font-size: .95rem; }
.panel-body { padding: var(--space-4); }

.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4);
}

/* Tiêu đề trang */
.kq-h1 { font-size: 1.2rem; margin: 0 0 var(--space-1); }
@media (min-width: 640px) { .kq-h1 { font-size: 1.5rem; } }
.kq-when { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: .9rem; font-weight: 600; }
.subtle { color: var(--text-muted); font-size: .85rem; }
.lead { color: var(--text-muted); margin: 0 0 var(--space-4); }

/* ============================================================
   6) ĐIỀU HƯỚNG: segmented (miền), tabs (thứ) — KHỚP ẢNH DEMO
   ============================================================ */
.tab-nav {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #ffffff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 var(--space-5);
  box-shadow: 0 1px 2px rgba(11, 61, 145, .04);
}

.tab-nav > a,
.tab-nav > span {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-primary);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: all .15s ease-in-out;
}

.tab-nav > a:last-child,
.tab-nav > span:last-child {
  border-right: 0;
}

.tab-nav > a:hover {
  background: var(--bg-alt);
  color: var(--color-primary-d);
  text-decoration: none;
}

.tab-nav .is-active,
.tab-nav > span.is-active {
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 700;
  cursor: default;
}

/* Nav chọn miền (Miền Bắc / Trung / Nam) */
.seg-nav {
  display: inline-flex;
  flex-wrap: nowrap;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #ffffff;
  overflow: hidden;
  margin: 0 0 var(--space-4);
}
.seg-nav > a,
.seg-nav > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-primary);
  border: 0;
  border-right: 1px solid var(--border-strong);
  background: transparent;
  text-decoration: none;
  transition: all .15s ease-in-out;
}
.seg-nav > a:last-child,
.seg-nav > span:last-child {
  border-right: 0;
}
.seg-nav > a:hover {
  background: var(--bg-alt);
  color: var(--color-primary-d);
}
.seg-nav .is-active,
.seg-nav > span.is-active {
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 700;
}


/* Breadcrumb */
/* ADR-039: breadcrumb trong KHUNG, luôn 1 dòng — dài quá thì cắt "…" (nhất là mobile). */
.crumb { font-size: .82rem; color: var(--text-muted); margin: 0 0 var(--space-4);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px var(--space-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ADR-036: bỏ '.crumb a { color }' — kế thừa token từ rule gốc 'a'. */
.crumb .sep { color: var(--border-strong); margin: 0 6px; }

/* ============================================================
   7) BẢNG rộng — cuộn ngang mobile (ADR-005 / quy tắc 23)
   ============================================================ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   8) BẢNG KẾT QUẢ (giải) — UI CHỈNH CHU KHỚP DEMO
   ============================================================ */
.kqxs-card {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(11, 61, 145, .05);
  overflow: hidden;
  margin-bottom: var(--space-5);
}

/* Bảng MB (bảng giải 1 miền) */
.kq-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--bg-card);
}
.kq-table th, .kq-table td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 9px 12px;
  vertical-align: middle;
  text-align: center;
}
.kq-table td:last-child, .kq-table th:last-child {
  border-right: 0;
}

.kq-table .lbl {
  width: 85px;
  background: var(--bg-alt);
  color: #475569;
  font-weight: 600;
  font-size: .85rem;
  text-align: center;
  white-space: nowrap;
}

/* Hàng Đặc Biệt MB */
.kq-row-db {
  background: #ffffff;
}
.kq-row-db .lbl {
  color: var(--color-primary);
}

/* Số Đặc Biệt */
.db-num {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-db);
  letter-spacing: 2px;
  line-height: 1.2;
}
@media (min-width: 640px) {
  .db-num { font-size: 1.75rem; }
}

/* Ô chứa dãy số MB: Căn giữa & khoảng cách hài hòa */
.kq-nums {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 24px;
  text-align: center;
}

/* Số thường trong bảng giải */
.kq-num {
  display: inline-block;
  font-weight: 600;
  font-size: 1.15rem;
  color: #1e293b;
  line-height: 1.35;
}
@media (min-width: 640px) {
  .kq-num { font-size: 1.25rem; }
}
.is-red {
  color: var(--color-db);
  font-weight: 600;
}

/* ADR-036 NGOẠI LỆ số-liệu-đỏ: 2 số cuối ĐB (link "đề về XX") = ĐỎ token --color-db,
   KHÔNG theo màu link nội dung. Đặt cả :hover để thắng base 'a:hover' (cùng specificity). */
.de-link { color: var(--color-db); text-decoration: underline dotted; text-underline-offset: 3px; }
.de-link:hover { color: var(--color-db); text-decoration: underline solid; }

/* Bảng MT/MN nhiều đài (cột = đài) */
.kq-multi {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--bg-card);
}
.kq-multi th, .kq-multi td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
}
.kq-multi td:last-child, .kq-multi th:last-child {
  border-right: 0;
}
.kq-multi tr:last-child th, .kq-multi tr:last-child td {
  border-bottom: 0;
}
.kq-multi th:first-child, .kq-multi td:first-child {
  width: 75px;
  text-align: center;
  color: #475569;
  font-weight: 600;
  font-size: .85rem;
  background: var(--bg-alt);
}
.kq-multi thead th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  padding: 10px 8px;
  text-align: center;
}
/* ADR-036: link trong hàng th (nền xanh) đã gộp vào rule '.on-dark a, .kq-multi thead th a' ở đầu file. */

/* Hàng Giải ĐB MT/MN */
.kq-multi .row-db td {
  background: #ffffff;
}
.kq-multi .row-db .db-num {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-db);
  letter-spacing: 1px;
}
@media (min-width: 640px) {
  .kq-multi .row-db .db-num { font-size: 1.5rem; }
}

/* Bar Soi Số / Controls bên dưới bảng */
.kq-soi-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin: 0; /* ADR-034: sát bảng giải, bỏ dòng trống — border-top đã là ranh giới */
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.kq-soi-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.kq-soi-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 4px;
}

/* Nút toggle Mode (Đầy đủ / 2 số / 3 số) và Soi số (0..9) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--radius);
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text);
  transition: all .15s ease-in-out;
}
.btn:hover {
  border-color: var(--color-primary-l);
  color: var(--color-primary);
  text-decoration: none;
}
.btn-primary, .btn.is-active {
  background: var(--color-db);
  border-color: var(--color-db);
  color: #fff;
}
.btn-primary:hover, .btn.is-active:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

/* Các ô tròn soi số (0..9) */
.kq-soi-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: 700;
}

/* ============================================================
   9) BẢNG LÔ TÔ (đầu 0–9)
   ============================================================ */
.loto-title { margin: var(--space-5) 0 var(--space-2); font-size: 1rem; }
.loto-table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--bg-card); }
.loto-table th, .loto-table td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 8px var(--space-3); vertical-align: middle; }
.loto-table thead th { background: var(--color-primary); color: #fff; font-weight: 700; }
.loto-table td:last-child, .loto-table th:last-child { border-right: 0; }
.loto-table tr:last-child th, .loto-table tr:last-child td { border-bottom: 0; }
.loto-head { background: var(--bg-alt); color: var(--color-primary-d); font-weight: 800; width: 48px; text-align: center; }
.lo { display: inline-block; padding: 0 6px; font-weight: 600; }
.lo-db { color: #dc2626; font-weight: 800; padding: 0 6px; }
.lo-empty { color: var(--border-strong); }



/* Controls (toggle hiển thị / soi số / xem thêm) */
.ctl-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: var(--radius); font-size: .85rem; font-weight: 600;
  border: 1px solid var(--border-strong); background: #fff; color: var(--text);
}
.btn:hover { border-color: var(--color-primary-l); color: var(--color-primary); text-decoration: none; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-d); color: #fff; }
.btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ============================================================
   10) SIDEBAR (lịch quay hôm nay + hộp đài MN/MT)
   ============================================================ */
.side-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-5); box-shadow: var(--shadow); }
.side-box__head { background: var(--color-primary); color: #fff; padding: 9px var(--space-4); font-size: .9rem; font-weight: 700; }
.side-box__sect { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.side-box__sect:first-of-type { border-top: 0; }
.side-label { margin: 0 0 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { padding: 2px 0; }
.side-list--cols { columns: 2; column-gap: var(--space-4); }
.side-list--cols li { break-inside: avoid; }

/* ============================================================
   11) BOX "Thống kê liên quan" + lưới link
   ============================================================ */
.related { margin-top: var(--space-8); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6); }
.related h2 { font-size: 1.05rem; margin: 0 0 var(--space-3); }
.related__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .related__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .related__grid { grid-template-columns: 1fr 1fr 1fr; } }
.related__grid h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin: 0 0 var(--space-2); }
.related__grid ul { list-style: none; margin: 0; padding: 0; }
.related__grid li { padding: 2px 0; }

/* Dải tham khảo cuối trang */
.refs { margin-top: var(--space-5); font-size: .85rem; color: var(--text-muted); }
.refs .sep { color: var(--border-strong); margin: 0 6px; }

/* ============================================================
   12) THÀNH PHẦN DÙNG CHUNG cho template KQXS
   ============================================================ */
/* Tiêu đề trang (khung nhấn) */
.kq-titlebox { border: 1px solid var(--border-strong); border-left: 4px solid var(--color-primary); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); background: var(--bg-card); }

/* Một kỳ kết quả */
/* ADR-034: khối KQXS gộp 1 KHUNG LIỀN. .kq-ky (trang) & .kq-unit (shortcode) = viền ngoài
   vẽ 1 lần ở wrapper; con bên trong bỏ margin + viền/bo/shadow riêng, ranh giới 2 khối kề =
   ĐÚNG 1 border-top (không viền đôi). Chỉ đụng margin/border/padding — KHÔNG đổi màu/token. */
.kq-ky,
.kq-unit { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; margin-bottom: var(--space-6); box-shadow: var(--shadow); }
.kq-ky { padding: 0; } /* bỏ inset để con sát mép khung */
/* Reset con: dùng .kq-ky > .KLASS (0,2,0) để THẮNG cả rule gốc lẫn @media (0,1,0). */
.kq-ky > .kqxs-card, .kq-unit > .kqxs-card,
.kq-ky > .kq-subcrumb, .kq-unit > .kq-subcrumb { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
/* Ranh giới 2 khối kề = ĐÚNG 1 border-top. :not(:first-child) = 0,2,0, đặt SAU reset → thắng border:0. */
.kq-ky > *:not(:first-child),
.kq-unit > *:not(:first-child) { border-top: 1px solid var(--border); }
/* ADR-036: bỏ font-weight:700 (breadcrumb hết đậm) + bỏ '.kq-subcrumb a {color}' (kế thừa token). */
.kq-subcrumb { border: 1px solid var(--border); background: var(--bg-alt); border-radius: var(--radius); padding: 7px var(--space-3); margin-bottom: var(--space-3); font-size: .85rem; }
.kq-subcrumb .sep { color: var(--color-primary-l); margin: 0 4px; }

/* Danh sách "Tham khảo thêm" */
.refs-list { list-style: disc; margin: 0; padding: var(--space-3) var(--space-6); }
.refs-list li { padding: 3px 0; }

/* Bảng dữ liệu phụ (cơ cấu giải, lịch quay) */
.tbl { border-collapse: collapse; width: 100%; background: var(--bg-card); font-size: .9rem; }
.tbl th, .tbl td { border: 1px solid var(--border); padding: 8px var(--space-3); }
.tbl thead th { background: var(--bg-alt); color: var(--color-primary-d); }

/* Khối văn bản */
.prose { color: var(--text); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: 1.2rem; }
.prose h3 { font-size: 1rem; }
.prose p { margin: 0; line-height: 1.7; }

/* FAQ (details) */
.faq { display: flex; flex-direction: column; gap: var(--space-2); }
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.faq summary { cursor: pointer; padding: var(--space-3); font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq details p { margin: 0; padding: var(--space-3); color: var(--text-muted); }

.center { text-align: center; }
.mt-section { margin-top: var(--space-8); }

/* Nhãn responsive (ẩn/hiện theo bề rộng) */
.lg-only { display: none; }
.sm-only { display: inline; }
@media (min-width: 640px) { .lg-only { display: inline; } .sm-only { display: none; } }

/* ============================================================
   13) TRANG THỐNG KÊ (Phiên 3) — TOC, ma trận, section
   ============================================================ */
.stat-lead { color: var(--text-muted); margin: 0 0 var(--space-5); max-width: 70ch; }

/* Mục lục nhảy nhanh */
.toc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-6); }
.toc__title { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin: 0 0 var(--space-2); font-weight: 700; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { padding: 2px 0; }

/* Section có neo — chừa khoảng cho khi nhảy tới (header dính) */
.stat-sec { margin: 0 0 var(--space-8); scroll-margin-top: var(--space-4); }
.stat-sec > h2 { font-size: 1.15rem; margin: 0 0 var(--space-2); }
.stat-note { margin: var(--space-2) 0 0; font-size: .85rem; color: var(--text-muted); }
.stat-note--tiny { font-size: .78rem; }

/* Thanh chọn cửa sổ (30/60/90 kỳ) */
.win-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); align-items: center; }
.win-nav .lbl { font-size: .82rem; font-weight: 600; color: var(--text-muted); }

/* Bảng dữ liệu thống kê (top gan/hot…) — dùng .tbl + căn phải số */
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* ADR-049: bảng thống kê GỘP 3 đài (bài Dự đoán MT/MN) — STT | mỗi đài 1 cột. */
.dd-tkmulti th, .dd-tkmulti td { text-align: center; white-space: nowrap; }
.dd-tkmulti .stt { width: 40px; color: var(--text-muted); }
.dd-tkmulti .dd-tknum { color: var(--color-db); font-weight: 700; }
.dd-tkmulti .dd-tkmut { color: var(--text-muted); }
/* ADR-052: liên kết nội bộ NGỮ CẢNH (dưới KQXS/Dự đoán/Thống kê) — câu văn tự nhiên, không dồn cuối. */
.dd-more { margin: var(--space-3) 0 var(--space-5); font-size: .95rem; color: var(--text-muted); }
/* GỐC LỖI "cột trống": class chip `.lo { display:inline-block }` (dòng ~569, cho ô lô tô
   KQXS) rò sang ô <td class="lo"> của bảng .tbl → ô bật khỏi lưới table → chừa cột trống
   borderless giữa cột 1 và 2. Ép lại table-cell cho ô bảng (KHÔNG đụng chip .lo ngoài bảng). */
.tbl td.lo, .tbl th.lo { display: table-cell; font-weight: 700; color: var(--color-primary-d); }
.tbl .muted { color: var(--text-muted); }
.tbl .hot { color: var(--color-db); font-weight: 700; }

/* Bảng thống kê co theo nội dung để KHÔNG hở khoảng trắng giữa cột "Số" (căn trái)
   và cột số liệu (căn phải) khi bảng ít cột. Áp cho: bảng trong bài dự đoán
   (.dd-thongke) VÀ 4 trang thống kê gọn (.stat-sec). Ma trận dùng .matrix nên không dính. */
.dd-thongke .tbl, .stat-sec .tbl { width: auto; max-width: 100%; }
.dd-thongke .tbl th.lo, .dd-thongke .tbl td.lo,
.stat-sec .tbl th.lo, .stat-sec .tbl td.lo { min-width: 52px; text-align: center; }
.dd-thongke .tbl th.num, .dd-thongke .tbl td.num,
.stat-sec .tbl th.num, .stat-sec .tbl td.num { min-width: 120px; }
.dd-thongke .tbl th:last-child:not(.num),
.dd-thongke .tbl td:last-child:not(.num),
.stat-sec .tbl th:last-child:not(.num),
.stat-sec .tbl td:last-child:not(.num) { min-width: 130px; }

/* Ma trận tần suất 00–99 × N ngày (và 10×10 đầu-đuôi) */
.matrix { border-collapse: collapse; width: 100%; background: var(--bg-card); font-size: .8rem; }
.matrix th, .matrix td { border: 1px solid var(--border); padding: 3px 6px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.matrix thead th { background: var(--bg-alt); color: var(--color-primary-d); font-weight: 700; position: sticky; top: 0; }
.matrix tbody th { background: var(--bg-alt); color: var(--color-primary-d); font-weight: 700; text-align: center; }
.matrix .z { color: #cbd5e1; }               /* ô 0 lần */
.matrix .sum { font-weight: 700; }
.matrix .is-hot { background: #fdecec; color: var(--color-db); font-weight: 700; }
.matrix .is-cold { background: #eaf1fb; color: var(--color-primary); }
.matrix .is-db { outline: 2px solid var(--color-db); outline-offset: -2px; }

/* Lưới 2 cột (nóng/khan, đầu/đuôi) */
.dd-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .dd-grid { grid-template-columns: 1fr 1fr; } }
.dd-grid h3 { font-size: .95rem; margin: 0 0 var(--space-2); }
/* Căn GIỮA nội dung MỌI bảng .stat-sec → số không dồn sang phải chừa "cột trắng" một bên
   (ghi đè căn-phải của .num). Bảng ĐƠN co gọn + căn giữa trong khung; bảng CẠNH NHAU
   (.dd-grid: đầu-đuôi, nóng/khan) giãn ĐẦY nửa cột cho cân đối. */
.stat-sec .tbl th, .stat-sec .tbl td { text-align: center; }
.stat-sec .tbl { margin-left: 0; margin-right: auto; } /* bảng SÁT TRÁI (không căn giữa) */
.dd-grid .tbl { width: 100%; }

/* Link chốt cuối trang */
.stat-foot { margin-top: var(--space-6); font-size: .9rem; }

/* ============================================================
   14) SOI CẦU (Phiên 4)
   ============================================================ */
.cau-chot { font-weight: 800; color: var(--color-db); font-size: 1.15rem; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.cau-rev { color: var(--text-muted); font-weight: 600; }
.badge-n { display: inline-block; background: var(--color-primary); color: #fff; border-radius: var(--radius-pill); padding: 1px 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-pos { font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
.hit-y { color: #15803d; font-weight: 700; }
.hit-n { color: var(--text-muted); }
.sc-empty { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--space-5); color: var(--text-muted); background: var(--bg-muted); }
.sc-dais { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .sc-dais { grid-template-columns: 1fr 1fr; } }
.sc-dai h3 { font-size: 1rem; margin: 0 0 var(--space-2); color: var(--color-primary-d); }
.sc-disclaimer { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-muted); }

/* Bảng "chốt số" trong bài dự đoán (6 hàng × 2 cột) */
.dd-chot { max-width: 640px; }
/* ADR-048/051: nhãn co theo nội dung; ADR-051: chữ + số THƯỜNG (400, không đậm), thanh mảnh;
   nới padding-phải cột nhãn để viền không sát chữ "ĐB". */
.dd-chot td:first-child { font-weight: 400; white-space: nowrap; padding-right: var(--space-6); }
.dd-chot td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.dd-chot td:last-child strong { color: var(--color-db); font-weight: 400; font-size: 1rem; }

/* Hộp lỗi (API không tải được) */
.alert-err { border: 1px solid #f5c2c2; background: #fdecec; color: #8a1414; border-radius: var(--radius); padding: var(--space-5); }
.alert-err h1 { color: #8a1414; font-size: 1.15rem; margin: 0 0 var(--space-2); }

/* ============================================================
   Trang DANH MỤC dự đoán (hub) — danh sách bài dạng hàng ngang
   ============================================================ */
/* Thanh mục vàng "Dự đoán xổ số … hôm nay" */
.dd-sec-head {
  background: #fff5da; border: 1px solid #f2df9f; border-radius: var(--radius);
  color: #1e293b; font-weight: 700; font-size: 1.02rem;
  padding: 10px var(--space-4); margin: 0 0 var(--space-4);
}

/* Danh sách bài: mỗi bài 1 hàng ngang (ảnh trái · tiêu đề+tóm tắt phải) */
.dd-list { display: flex; flex-direction: column; }
.dd-item {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4);
  align-items: start; padding: var(--space-4) 0; border-top: 1px solid var(--border);
}
.dd-item:first-child { border-top: 0; padding-top: 0; }
/* ADR-039: bài KHÔNG có ảnh đại diện → chữ tràn full 1 cột (không chừa ô ảnh trống, xấu). */
.dd-item:not(:has(.dd-item__media)) { grid-template-columns: 1fr; }
.dd-item__media { display: block; background: var(--bg-alt); border-radius: var(--radius); overflow: hidden; }
.dd-item__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.dd-item__body { min-width: 0; }
.dd-item__title { font-size: 1.05rem; line-height: 1.4; margin: 0 0 var(--space-2); }
/* ADR-036: link tiêu đề kế thừa token 'a' + hover var(--link-hover) (bỏ rule màu/hover riêng). */
.dd-item__date { color: var(--text-muted); font-size: .78rem; font-weight: 600; margin: 0 0 var(--space-1); }
.dd-item__excerpt { color: var(--text); font-size: .9rem; margin: 0; }
@media (max-width: 560px) {
  .dd-item { grid-template-columns: 120px 1fr; gap: var(--space-3); }
  .dd-item__title { font-size: .96rem; }
}

/* Văn bản SEO cuối trang danh mục (chủ dự án soạn ở tab Danh mục) */
.dd-seo { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border); color: var(--text); }
.dd-seo h2, .dd-seo h3, .dd-seo h4 { color: var(--color-primary-d); margin: var(--space-5) 0 var(--space-2); }
.dd-seo h2 { font-size: 1.15rem; }
.dd-seo h3 { font-size: 1.05rem; }
.dd-seo p { margin: 0 0 var(--space-3); }
.dd-seo ul, .dd-seo ol { margin: 0 0 var(--space-3); padding-left: var(--space-6); }
.dd-seo li { margin: 2px 0; }
.dd-seo img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* ============================================================
   MODULE LÔ & ĐỀ — nuôi dàn qua shortcode [nuoi_dan]
   ============================================================ */
.lode-box { margin: var(--space-5) 0; }
.lode-box__head { background: var(--color-primary); color: #fff; font-weight: 700; padding: 10px var(--space-4); font-size: .98rem; }
.lode-cur { padding: var(--space-4); border-bottom: 1px solid var(--border); }
.lode-cur--empty { color: var(--text-muted); }
.lode-cur__label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: var(--space-2); }
/* Dàn số trong BẢNG lịch sử: text thường, số trúng đậm+xanh (gọn dòng mobile) */
.lode-dan { font-variant-numeric: tabular-nums; line-height: 1.85; color: var(--text); word-spacing: 1px; }
.lode-hit { color: #1f7a44; font-weight: 700; }
.lode-meta { margin: var(--space-3) 0 0; font-size: .9rem; }
.lode-reason { margin: 6px 0 0; font-size: .82rem; color: var(--text-muted); font-style: italic; }
.lode-hist { padding: var(--space-4); }
/* Tỉ lệ cột FIX CỨNG (PC + Mobile như nhau): Dàn số 55% · Khoảng ngày 20% · Kết quả 35%.
   Chữ tự xuống dòng trong ô (overflow-wrap), KHÔNG nowrap → không tràn/đè cột. */
.lode-tbl { width: 100%; table-layout: fixed; }
.lode-tbl th, .lode-tbl td { border: 1px solid var(--border); padding: 8px var(--space-3); vertical-align: top; overflow-wrap: break-word; }
.lode-tbl thead th { background: var(--bg-alt); color: var(--color-primary-d); text-align: left; font-size: .85rem; }
.lode-tbl th:nth-child(1), .lode-tbl td:nth-child(1) { width: 52%; font-size: .92rem; }
/* ADR-039: "Khoảng ngày" đủ rộng + nowrap → khoảng ngày (vd 17 – 18/08/2026) về 1 dòng. */
.lode-tbl th:nth-child(2), .lode-tbl td:nth-child(2) { width: 23%; white-space: nowrap; }
.lode-tbl th:nth-child(3), .lode-tbl td:nth-child(3) { width: 25%; }
.lode-range { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: .88rem; white-space: nowrap; }
/* ADR-039 fix: MOBILE hẹp — bỏ nowrap để "Khoảng ngày" xuống dòng trong ô (không tràn đè cột Kết quả); desktop giữ 1 dòng. */
@media (max-width: 700px) {
  .lode-tbl th:nth-child(2), .lode-tbl td:nth-child(2), .lode-range { white-space: normal; }
}
/* ADR-022 bổ sung: dàn khung ≥4 ngày — cột Kết quả nhiều dòng. Desktop 38/22/40. */
.lode-tbl--long th:nth-child(1), .lode-tbl--long td:nth-child(1) { width: 38%; }
.lode-tbl--long th:nth-child(2), .lode-tbl--long td:nth-child(2) { width: 22%; }
.lode-tbl--long th:nth-child(3), .lode-tbl--long td:nth-child(3) { width: 40%; }
/* Mobile: cột "Khung ngày" nới rộng (30/32/38) + giảm padding → ngày "18/08/2026" đủ
   chỗ, gãy 2 dòng gọn (không vụn giữa số), Kết quả không bị đẩy khuất. Đặt SAU base để thắng. */
@media (max-width: 700px) {
  .lode-tbl--long th:nth-child(1), .lode-tbl--long td:nth-child(1) { width: 30%; }
  .lode-tbl--long th:nth-child(2), .lode-tbl--long td:nth-child(2) { width: 32%; }
  .lode-tbl--long th:nth-child(3), .lode-tbl--long td:nth-child(3) { width: 38%; }
  .lode-tbl--long th, .lode-tbl--long td { padding-left: 6px; padding-right: 6px; }
}
.lode-win { color: #1f7a44; font-weight: 700; }
.lode-lose { color: var(--text-muted); font-weight: 600; }
.lode-rate { margin: var(--space-3) 0 0; font-size: .9rem; }

/* Lô & Đề — render giọng SEO (ADR-022a) */
.lode-box { margin: var(--space-6) 0; }
.lode-h { color: var(--color-primary-d); margin: 0 0 var(--space-2); line-height: 1.35; }
.lode-intro { margin: 0 0 var(--space-3); }
.lode-numbox { position: relative; background: #fff5f5; border: 1px solid #f2b8b8; border-left: 4px solid var(--color-db); border-radius: var(--radius); padding: var(--space-4) 76px var(--space-4) var(--space-4); margin: 0 0 var(--space-3); }
.lode-numbox__nums { color: var(--color-db); font-weight: 600; font-size: 1.15rem; letter-spacing: .5px; font-variant-numeric: tabular-nums; line-height: 1.7; word-spacing: 5px; }
.lode-copy { position: absolute; top: 10px; right: 10px; border: 1px solid var(--border-strong); background: #fff; color: var(--text); border-radius: var(--radius); padding: 4px 12px; font-size: .8rem; font-weight: 600; cursor: pointer; font-variant-numeric: normal; }
.lode-copy:hover { border-color: var(--color-primary); color: var(--color-primary); }
.lode-copy.is-done { background: #e7f6ec; border-color: #38a169; color: #1f7a44; }
.lode-dienbien { margin: 0 0 var(--space-2); }
.lode-updated { margin: 0 0 var(--space-4); }
/* ADR-039: khung xanh "Xem dự đoán 3 miền" dưới bảng thống kê nuôi (link động, KHÔNG gạch chân). */
.lode-ddbox { background: #e8f1fd; border: 1px solid #cfe0fb; border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0 0; }
.lode-ddbox__h { font-weight: 700; color: var(--color-primary-d); margin: 0 0 var(--space-2); font-size: 1.02rem; }
.lode-ddbox__list { list-style: disc; margin: 0; padding-left: var(--space-5); }
.lode-ddbox__list li { margin: var(--space-1) 0; }
.lode-ddbox__list a, .lode-ddbox__list a:hover { text-decoration: none; }
/* ADR-022 bổ sung: khung "Xem thêm Dàn lô/đề khung khác" — 10 tiêu đề, dưới bài viết. */
.lode-more { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); margin-top: var(--space-5); }
.lode-more__h { font-size: 1.2rem; margin: 0 0 var(--space-3); color: var(--color-primary-d); }
.lode-more__list { list-style: none; margin: 0; padding: 0; }
.lode-more__list li { padding: 9px 0; border-bottom: 1px solid var(--border); }
.lode-more__list li:last-child { border-bottom: 0; }
.lode-more__list li::before { content: "›"; color: var(--color-primary-l); font-weight: 800; margin-right: var(--space-2); }
.lode-h2 { color: var(--color-primary-d); font-size: 1.05rem; margin: var(--space-6) 0 var(--space-2); }
.lode-rate { margin: 0 0 var(--space-3); }
.lode-ketqua { line-height: 1.7; font-size: .9rem; }
.lode-ketqua .lode-win, .lode-ketqua .lode-lose { font-weight: 700; }

/* Trang DANH MỤC Lô & Đề — 900px lệch trái, không sidebar */
.lode-hub { max-width: 900px; }
/* ADR-039: bọc danh sách bài trong 1 KHUNG nền trắng. */
.lode-cards { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-2) var(--space-5); }
.lode-card { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.lode-card:first-child { border-top: 0; }
.lode-card__media { display: block; }
.lode-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; background: var(--bg-alt); }
.lode-card__ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); color: var(--color-primary); font-weight: 800; letter-spacing: 1px; }
.lode-card__title { font-size: 1.05rem; line-height: 1.35; margin: 0 0 var(--space-2); }
/* ADR-036: link tiêu đề kế thừa token 'a' (bỏ rule màu/hover riêng). */
.lode-card__excerpt { color: var(--text-muted); font-size: .9rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ADR-039: khối SEO cuối trang hub = 1 KHUNG nền trắng + typography chuẩn. */
.lode-catseo { margin-top: var(--space-5); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); line-height: 1.7; color: var(--text); }
.lode-catseo > :first-child { margin-top: 0; }
.lode-catseo > :last-child { margin-bottom: 0; }
.lode-catseo h2 { font-size: 1.2rem; color: var(--color-primary-d); margin: var(--space-6) 0 var(--space-3); }
.lode-catseo h3 { font-size: 1.05rem; color: var(--color-primary-d); margin: var(--space-5) 0 var(--space-2); }
.lode-catseo h4 { font-size: 1rem; color: var(--color-primary-d); margin: var(--space-4) 0 var(--space-2); }
.lode-catseo p { margin: 0 0 var(--space-4); }
.lode-catseo ul, .lode-catseo ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.lode-catseo li { margin: var(--space-1) 0; }
.lode-catseo img { height: auto; border-radius: var(--radius); }
@media (max-width: 560px) { .lode-card { grid-template-columns: 96px 1fr; gap: var(--space-3); } }

/* Dòng meta bài Lô & Đề: Tác giả | Ngày đăng | Cập nhật (kèm icon nhỏ) */
.lode-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 var(--space-4); }
.lode-mi { display: inline-flex; align-items: center; gap: 5px; }
.lode-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; opacity: .75; }
.lode-msep { color: var(--border-strong); }

/* ============================================================
   THỐNG KÊ SHORTCODE (ADR-023) — [tk_*]
   ============================================================ */
.tk-block { margin: var(--space-6) 0; }
.tk-h3 { color: var(--color-primary-d); font-size: 1.1rem; margin: 0 0 var(--space-1); }
.tk-sub { color: var(--text-muted); font-size: .82rem; margin: 0 0 var(--space-3); }
.tk-double { display: flex; gap: var(--space-4); align-items: flex-start; }
.tk-double > .tk-scroll { flex: 1 1 0; min-width: 0; }
.tk-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tk-table { width: 100%; border-collapse: collapse; background: var(--bg-card); font-size: .9rem; }
.tk-table th, .tk-table td { border: 1px solid var(--border); padding: 7px var(--space-3); text-align: left; vertical-align: middle; }
.tk-table thead th { background: #1e4e8c; color: #fff; font-weight: 700; font-size: .82rem; border-color: #1e4e8c; white-space: nowrap; }
.tk-table .tk-stt { width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.tk-table tbody .tk-stt { color: var(--text-muted); }
.tk-table thead th.tk-stt { color: #fff; }
.tk-num { color: var(--color-db); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.tk-det { color: var(--text-muted); font-size: .82rem; }
.tk-det2 { color: var(--text); font-variant-numeric: tabular-nums; }
.tk-day { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tk-kq { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 1px; }
.tk-kq b { color: var(--color-db); font-weight: 800; }
/* Bảng ĐÔI 5–8 gộp 1 DOM (ADR-023 bổ sung): desktop 2 cột, mobile 1 bảng 1→10.
   Mỗi .tk-g2-col là 1 grid 3 cột; .tk-g2-row = display:contents nên các ô con
   là grid item → cột thẳng hàng. Viền: col vẽ top+left, ô vẽ right+bottom → 1px sạch. */
.tk-g2 { display: flex; gap: var(--space-4); align-items: flex-start; }
.tk-g2-col { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: minmax(40px, max-content) minmax(0, 1fr) minmax(0, 1fr); align-items: center; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.tk-g2-row { display: contents; }
.tk-g2-c { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 7px var(--space-3); font-size: .9rem; text-align: left; background: var(--bg-card); overflow-wrap: anywhere; }
.tk-g2-row > .tk-g2-c:first-child { text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tk-g2-head .tk-g2-c { background: #1e4e8c; color: #fff; font-weight: 700; font-size: .82rem; border-color: #1e4e8c; white-space: nowrap; }
.tk-g2-head > .tk-g2-c:first-child { color: #fff; }

@media (max-width: 640px) {
	.tk-double { flex-direction: column; gap: var(--space-5); align-items: stretch; }
	.tk-double > .tk-scroll { flex: 0 0 auto; width: 100%; }
	.tk-g2 { display: block; }
	.tk-g2-col + .tk-g2-col { margin-top: -1px; }
	.tk-g2-head2 { display: none; }
}

/* ============================================================
   9b) TRANG CHỦ (ADR-025) — front-page.php + shortcode kqxs_bang/bai_moi/lich_quay
   ============================================================ */
.kq-layout--full { display: block; }
@media (min-width: 1024px) { .kq-layout--full { display: block; } } /* ép 1 cột kể cả desktop */
.home-h1 { font-size: 1.6rem; margin: 0 0 var(--space-4); }
.home-content > *:first-child { margin-top: 0; }
.home-content h2 { font-size: 1.25rem; margin: var(--space-6) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--border); }
.home-content h3 { font-size: 1.06rem; margin: var(--space-5) 0 var(--space-2); }
.home-content p { margin: 0 0 var(--space-3); }

/* [kqxs_bang] */
.kqb { margin: 0 0 var(--space-6); }
.kqb-title { font-size: 1.15rem; margin: 0 0 var(--space-3); }
.kqb-title .kqb-day { font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.kqb-more { margin: var(--space-2) 0 0; }
/* ADR-036: bỏ font-weight:600 — link kế thừa var(--link-weight). */
.kqb-empty { color: var(--text-muted); padding: var(--space-3); background: var(--bg-card); border: 1px dashed var(--border-strong); border-radius: var(--radius); }

/* [bai_moi] */
.baimoi { margin: 0 0 var(--space-5); }
.baimoi-h { font-size: 1.15rem; margin: 0 0 var(--space-3); }
.baimoi-list { list-style: none; margin: 0; padding: 0; }
.baimoi-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.baimoi-item:last-child { border-bottom: 0; }
.baimoi-link { min-width: 0; } /* ADR-036: bỏ font-weight:600 → link kế thừa var(--link-weight) */
.baimoi-date { flex: 0 0 auto; color: var(--text-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.baimoi-empty { color: var(--text-muted); }

/* [lich_quay] */
.lichquay { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 0 0 var(--space-5); }
.lq-head { background: var(--color-primary); color: var(--text-invert); font-weight: 700; padding: var(--space-3) var(--space-4); }
.lq-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.lq-row:first-of-type { border-top: 0; }
.lq-h { flex: 0 0 168px; font-weight: 700; color: var(--color-primary-d); }
.lq-time { color: var(--color-db); font-variant-numeric: tabular-nums; }
.lq-dai { flex: 1 1 220px; min-width: 0; }
/* ADR-036: bỏ '.lq-dai a { font-weight:600 }' — tên đài/tỉnh kế thừa var(--link-weight). */
@media (max-width: 560px) { .lq-h { flex-basis: 100%; } }

/* ============================================================
   9c) TAB CHỐT SỐ / KQXS trang chủ (ADR-028) — [chot_so_tabs] [kqxs_tabs]
   ============================================================ */
.ch-tabs { margin: 0 0 var(--space-4); }
/* ADR-039: thanh tab Bắc/Trung/Nam = segmented full-width, chia đều 33/33/33; active nền đỏ chữ trắng. */
.ch-tabnav { display: flex; margin-bottom: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.ch-tab { flex: 1 1 0; min-width: 0; appearance: none; cursor: pointer; font: inherit; font-weight: 700; text-align: center;
  color: var(--text-invert); background: var(--color-primary); border: 0; border-left: 1px solid var(--color-primary-d); padding: var(--space-3) var(--space-2); }
.ch-tab:first-child { border-left: 0; }
.ch-tab:hover { background: var(--color-primary-d); color: var(--text-invert); }
.ch-tab.is-active, .ch-tab.is-active:hover { background: var(--color-db); color: var(--text-invert); }
.ch-panel { display: none; }
.ch-panel.is-active { display: block; }

.ch-table { width: 100%; border-collapse: collapse; background: var(--bg-card); margin: 0 0 var(--space-4); }
.ch-table td { border: 1px solid var(--border); padding: 9px var(--space-3); vertical-align: middle; }
.ch-table .ch-k { width: 42%; color: var(--text); font-weight: 600; }
.ch-table .ch-v { color: var(--color-db); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .3px; }

.ch-dai { margin: 0 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ch-dai-h { background: #fff8e1; color: var(--color-primary-d); font-weight: 700; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.ch-dai .ch-table { margin: 0; border: 0; }
.ch-dai .ch-table td { border-width: 0 0 1px 0; }
.ch-dai .ch-table tr:last-child td { border-bottom: 0; }
.ch-dai .ch-table .ch-k { border-right: 1px solid var(--border); }
.ch-caption { color: var(--text-muted); font-size: .82rem; margin: calc(-1 * var(--space-2)) 0 var(--space-5); }
.ch-empty { color: var(--text-muted); padding: var(--space-3); }
.ch-kqxs .ch-panel .kqb { margin-bottom: 0; }

/* 2 khối cạnh nhau + list link ❖ (trang chủ, khối Nuôi Lô/Đề & Thống kê nhanh) */
.home-cols { display: grid; gap: var(--space-5); margin: 0 0 var(--space-5); }
@media (min-width: 720px) { .home-cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.home-cols > * { min-width: 0; }
.home-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.home-list li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.home-list li:last-child { border-bottom: 0; }
/* ADR-036: bỏ '.home-list a { font-weight:600 }' (Nuôi Lô/Đề + Thống kê nhanh) → var(--link-weight). */

/* ============================================================
   10) GIAO DIỆN FOOTER 2 TẦNG (Footer Settings) — KHỚP 2 ẢNH DEMO
   ============================================================ */
.home-footer-content-sec { margin: var(--space-6) 0 0; }
.home-footer-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); line-height: 1.6; }

.site-footer { background: #050811; color: #94a3b8; font-size: 0.9rem; line-height: 1.6; padding: 0; }
/* ADR-036: link footer màu trắng do .on-dark (trên .site-footer) cấp — bỏ màu cứng. */
.site-footer a { transition: color .2s; }

/* Tầng 1: 4 Cột (40% - 20% - 20% - 20%) & 1200px Container */
.site-footer-top { padding: var(--space-8) 0 var(--space-6); background: #050811; border-top: 3px solid var(--color-primary); }
.site-footer-top .container,
.site-footer-bottom .container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); }
}

.footer-title {
  color: #ffffff; font-size: 1.15rem; font-weight: 800;
  margin: 0 0 var(--space-4); letter-spacing: 0.5px;
  position: relative; display: inline-block; padding-bottom: 8px;
  text-transform: uppercase;
}
.footer-title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 40px; height: 3px; background: var(--color-primary-l);
  border-radius: var(--radius);
}

.footer-desc { margin: 0 0 var(--space-4); color: #94a3b8; font-size: 0.88rem; line-height: 1.5; }

/* Cột 1 Contact List */
.footer-contact-list { list-style: none; padding: 0; margin: 0; }
.contact-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; font-size: 0.88rem; }
.contact-item .fc-icon { flex: 0 0 auto; margin-top: 4px; color: var(--color-primary-l); }
.contact-item .label { font-weight: 600; color: #cbd5e1; white-space: nowrap; }
.contact-item .val { color: #94a3b8; }


/* Cột 2 Links (Từ khung soạn thảo WYSIWYG) */
.footer-links-content ul, .footer-links-content ol { list-style: none; padding: 0; margin: 0; }
.footer-links-content li { margin-bottom: 8px; }
/* ADR-036: màu link do .on-dark cấp — bỏ #cbd5e1/#fff cứng; giữ layout + mũi tên ›. */
.footer-links-content a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; text-decoration: none; transition: color .2s; }
.footer-links-content a::before { content: "›"; color: var(--color-primary-l); font-weight: 800; font-size: 1.1rem; line-height: 1; margin-right: 2px; }


/* Cột 3 Social & DMCA */
.footer-social-icons { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4); }
.social-btn { opacity: 0.9; transition: opacity .2s, transform .2s; } /* ADR-036: màu trắng do .on-dark cấp */
.social-btn:hover { opacity: 1; transform: translateY(-2px); }
.footer-dmca-badge { margin-top: 12px; }

/* Tầng 2: Bản quyền */
.site-footer-bottom { background: #1e242e; padding: var(--space-4) 0; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); }
.copyright-text { margin: 0; color: #94a3b8; font-size: 0.85rem; font-weight: 500; }

/* ============================================================
   15) CẤU HÌNH MOBILE — SANG TRỌNG & THOÁNG MẮT (KHỚP ẢNH DEMO 2 & 3)
   ============================================================ */
@media (max-width: 640px) {
  /* Khung container 2 bên mép màn hình: 10px thoáng mắt */
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .site-main {
    padding-top: 12px;
    padding-bottom: 24px;
  }

  /* Khung thẻ panel/card */
  .panel-body,
  .card,
  .panel,
  .home-footer-card {
    padding: 12px 10px;
  }

  .kqxs-card {
    margin-bottom: 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    box-shadow: 0 1px 3px rgba(11, 61, 145, .05);
  }

  /* Bảng giải KQXS trên Mobile */
  .kq-table th, .kq-table td,
  .kq-multi th, .kq-multi td,
  .loto-table th, .loto-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }

  .kq-table .lbl {
    width: 72px;
    font-size: 0.82rem;
    padding: 8px 4px;
    text-align: center;
    background: var(--bg-alt);
  }

  .kq-multi th:first-child,
  .kq-multi td:first-child {
    width: 62px;
    font-size: 0.82rem;
    padding: 8px 4px;
    text-align: center;
  }

  .kq-nums {
    gap: 6px 14px;
    justify-content: center;
    text-align: center;
  }

  .db-num {
    font-size: 1.5rem;
    letter-spacing: 1px;
  }

  .kq-num {
    font-size: 1.1rem;
  }

  .kq-multi .row-db .db-num {
    font-size: 1.25rem;
    letter-spacing: 0.5px;
  }

  /* Bar Soi số bên dưới */
  .kq-soi-bar {
    padding: 10px;
    gap: 6px;
    background: #f8fafc;
    border-top: 1px solid var(--border);
  }

  .kq-soi-label {
    font-size: 0.78rem;
  }

  .kq-soi-btn {
    width: 25px;
    height: 25px;
    font-size: 0.78rem;
  }

  /* Dải tab Thứ 2..Chủ Nhật trên mobile */
  .tab-nav > a,
  .tab-nav > span {
    padding: 9px 2px;
    font-size: 0.82rem;
  }
}




/* ============================================================
   9d) KHỐI DÀN LÔ VIP (ADR-029) — [dan_vip]
   ============================================================ */
.dv-box { border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); margin: 0 0 var(--space-5); }
.dv-head { background: var(--color-primary); color: #fff; font-weight: 700; padding: var(--space-3) var(--space-4); }
.dv-body { padding: var(--space-4); }
.dv-desc { color: var(--text-muted); margin: 0 0 var(--space-4); }
.dv-out { min-height: 0; text-align: center; }
.dv-out.is-on { min-height: 44px; margin: 0 0 var(--space-4); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.dv-n { display: inline-block; min-width: 56px; padding: 6px 12px; background: var(--bg-alt); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--color-db); font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 2px; }
/* ADR-029 bổ sung: nút GỌN inline kẹp 2 mũi tên gif trỏ vào nút, cả cụm căn giữa (không full-width). */
.dv-btn-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin: var(--space-3) 0; flex-wrap: nowrap; }
.dv-arrow { height: 24px; width: auto; display: block; flex: 0 0 auto; }
.dv-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px var(--space-5); background: var(--color-db); color: #fff; border: 0; border-radius: var(--radius); font-size: 1.05rem; font-weight: 800; cursor: pointer; }
.dv-btn:hover { background: #a81717; }
.dv-btn:disabled { opacity: .85; cursor: default; }
/* Ảnh loading trong ô (dàn chưa nhận / kết quả chưa chấm): cao ~20px, căn giữa ô. */
.dv-loading { height: 12px; width: auto; display: block; margin: 0 auto; }

/* ADR-029/034 — Công cụ QUAY THỬ: UI token (thay markup Tailwind cũ). Không hardcode --radius. */
.qt-wrap { max-width: 1000px; margin: 0 auto; }
.qt-title { margin-bottom: var(--space-2); }
.qt-intro { color: var(--text); line-height: 1.6; margin: 0 0 var(--space-5); }
.qt-regions { margin-bottom: var(--space-5); }
.qt-tool { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow); }
.qt-controls { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.qt-controls fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.qt-label { display: block; font-weight: 700; font-size: .9rem; color: var(--color-primary-d); margin-bottom: 6px; }
.qt-muted { font-weight: 400; color: var(--text-muted); }
.qt-select { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 12px; font: inherit; background: #fff; color: var(--text); }
.qt-select-sm { padding: 6px 8px; }
.qt-radios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: .92rem; color: var(--text); }
.qt-radios label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.qt-bd:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* tôn trọng [hidden] (ẩn tới khi chọn "theo ngày sinh") */
.qt-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.qt-btn { min-width: 132px; }
.qt-hint { border: 1px dashed var(--border-strong); background: var(--bg-alt); border-radius: var(--radius); padding: var(--space-5); text-align: center; color: var(--text-muted); margin: 0; }
.qt-note { margin: var(--space-3) 0 0; font-size: .8rem; color: var(--text-muted); line-height: 1.55; }
.qt-noscript { margin-top: var(--space-3); border: 1px solid #f2df9f; background: #fff8e1; border-radius: var(--radius); padding: var(--space-3); font-size: .85rem; color: #7a5b00; }

/* ADR-035 — Bảng quay thử (JS dựng): khung "..." sẵn, số nhảy khi quay. */
.qt-board { margin-top: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); }
.qt-board-head { background: #ffcf33; color: #4a3b00; font-weight: 800; text-align: center; letter-spacing: .02em; text-transform: uppercase; padding: 10px var(--space-3); font-size: .95rem; }
.qt-scroll { overflow-x: auto; }
.qt-prize { width: 100%; border-collapse: collapse; }
.qt-prize th, .qt-prize td { border: 1px solid var(--border); padding: 8px 10px; vertical-align: middle; }
.qt-prize > tbody > tr > th, .qt-prize .qt-gcol { width: 1%; white-space: nowrap; background: var(--bg-alt); color: var(--color-primary-d); font-weight: 700; text-align: left; font-size: .9rem; }
.qt-prize thead th { background: var(--color-primary); color: var(--text-invert); text-align: center; font-size: .9rem; }
.qt-prize-multi td { text-align: center; }
/* KHÔNG dùng display:flex trên <td> (mất table-cell → cột dồn dọc). Số là inline-block, căn giữa. */
.qt-nums { line-height: 2; text-align: center; }
.qt-num { display: inline-block; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; color: var(--text); min-width: 2.2ch; margin: 0 7px; text-align: center; transition: color .12s ease; }
.qt-num.is-rolling { color: var(--text-muted); opacity: .75; }
.qt-db th { color: var(--color-db) !important; }
.qt-db .qt-num { color: var(--color-db); font-size: 1.3rem; }
/* Lô tô quay thử = .loto-table (giống KQXS thật), full-width bằng bảng giải phía trên.
   MB: 4 cột Đầu|Lô|Lô|Đuôi. MT/MN: 1 bảng gộp cột Đầu + mỗi đài 1 cột. */
.qt-loto-title { padding: 10px var(--space-3) 6px; font-weight: 700; font-size: .92rem; color: var(--color-primary-d); border-top: 1px solid var(--border); }
.qt-loto-box { padding: 0; }

.dv-count { font-variant-numeric: tabular-nums; }
.dv-table { width: 100%; border-collapse: collapse; background: var(--bg-card); font-size: .92rem; }
.dv-table th, .dv-table td { border: 1px solid var(--border); padding: 9px var(--space-3); text-align: left; vertical-align: middle; }
.dv-table thead th { background: var(--color-primary); color: #fff; font-weight: 700; font-size: .82rem; }
.dv-time { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-nums { color: var(--color-db); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.dv-mask, .dv-pending { color: var(--border-strong); letter-spacing: 2px; font-weight: 700; }
.dv-row-today { background: #fff8e1; }
.dv-an { color: var(--color-db); font-weight: 700; }
.dv-hit { font-weight: 800; }
.dv-badge { display: inline-block; background: var(--color-db); color: #fff; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill); vertical-align: middle; }
.dv-truot { color: var(--text-muted); }
.dv-empty { text-align: center; color: var(--text-muted); }
@media (max-width: 560px) { .dv-n { min-width: 46px; font-size: 1.5rem; } }

/* ============================================================
   ADR-037 — Bộ template chuẩn: single/page/404/search/archive/category.
   Toàn bộ màu/link/bo góc theo token (ADR-033/036). Tái dùng .kq-layout,
   .kq-main, .dd-list/.dd-item, .kq-titlebox/.kq-h1, .crumb.
   ============================================================ */
/* Bài viết */
/* ADR-039: gói [tiêu đề → meta → nội dung] trong 1 KHUNG (bài viết .post-single +
   trang tĩnh .page-static). Related/Bình luận GIỮ NGUYÊN (ngoài khung). */
.post-single, .page-static, .dd-article { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); }
.post-single > :first-child, .page-static > :first-child, .dd-article > :first-child { margin-top: 0; }
@media (max-width: 480px) { .post-single, .page-static, .dd-article { padding: var(--space-4); } }
.post-title { font-size: 1.5rem; margin: 0 0 var(--space-3); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-muted); font-size: .85rem; margin: 0 0 var(--space-4); }
.post-meta .sep { color: var(--border-strong); }
.post-thumb { margin: 0 0 var(--space-4); }
.post-thumb img { width: 100%; border-radius: var(--radius); display: block; }

/* Nội dung bài/trang (typography) */
.entry-content { line-height: 1.7; color: var(--text); }
/* ADR-039: căn đều (justify) văn bản đọc — bài viết, trang tĩnh, dàn lô/đề + dự đoán
   (.dd-content dùng chung cho lo_de/du_doan). Heading giữ căn TRÁI. */
.entry-content, .dd-content, .dd-seo, .lode-catseo { text-align: justify; }
.entry-content :is(h1, h2, h3, h4, h5, h6),
.dd-content :is(h1, h2, h3, h4, h5, h6),
.dd-seo :is(h2, h3, h4), .lode-catseo :is(h2, h3, h4) { text-align: left; }
.entry-content p { margin: 0 0 var(--space-4); }
.entry-content h2 { font-size: 1.2rem; margin: var(--space-6) 0 var(--space-3); color: var(--color-primary-d); }
.entry-content h3 { font-size: 1.05rem; margin: var(--space-5) 0 var(--space-2); color: var(--color-primary-d); }
.entry-content ul, .entry-content ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.entry-content li { margin: var(--space-1) 0; }
.entry-content img { height: auto; border-radius: var(--radius); }
.entry-content a { text-decoration: underline; }
/* Blockquote dạng dấu ngoặc kép “ (bỏ thanh gạch cao; chữ giữ nguyên size) */
/* ADR-039: blockquote dạng dấu “ — ĐỒNG BỘ mọi vùng nội dung (bài viết, trang,
   Dàn lô/đề + Dự đoán .dd-content, khối SEO). */
.entry-content blockquote, .dd-content blockquote, .dd-seo blockquote, .lode-catseo blockquote { position: relative; margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-4) var(--space-2) 48px; background: var(--bg-alt); color: var(--text); }
.entry-content blockquote::before, .dd-content blockquote::before, .dd-seo blockquote::before, .lode-catseo blockquote::before { content: "\201C"; position: absolute; left: 10px; top: 2px; font: 700 2.6rem/1 Georgia, "Times New Roman", serif; color: var(--color-primary-l); opacity: .4; }
.entry-content blockquote p, .dd-content blockquote p, .dd-seo blockquote p, .lode-catseo blockquote p { margin: 0 0 var(--space-2); }
.entry-content blockquote p:last-child, .dd-content blockquote p:last-child, .dd-seo blockquote p:last-child, .lode-catseo blockquote p:last-child { margin-bottom: 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); }
/* ADR-039: bảng KQXS/lô tô trong module trang chủ (.kqxs-card) KHÔNG lấy margin của .entry-content table.
   .table-scroll (overflow→BFC) bao margin đó lại thành dải trắng thừa dưới Giải 7 & dưới Đầu 9. */
.entry-content .kqxs-card table { margin: 0; }
.entry-content th, .entry-content td { border: 1px solid var(--border); padding: 8px var(--space-3); }
.entry-content th { background: var(--bg-alt); color: var(--color-primary-d); }
/* Canh ảnh WP (align + caption) — ảnh/caption trong nội dung canh đúng */
.entry-content .aligncenter, .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignleft { float: left; margin: 4px var(--space-4) var(--space-3) 0; }
.entry-content .alignright { float: right; margin: 4px 0 var(--space-3) var(--space-4); }
.entry-content .alignnone { margin: 0 0 var(--space-3); }
.entry-content figure { margin: 0 0 var(--space-4); }
.wp-caption { max-width: 100%; margin: 0 0 var(--space-4); }
.wp-caption img { max-width: 100%; height: auto; display: block; }
.wp-caption-text, .entry-content figcaption { text-align: center; font-size: .85rem; color: var(--text-muted); margin: 6px 0 0; font-style: italic; }

/* ADR-038: Mục lục tự động — toggle checkbox+label thuần (0 JS): mobile thu gọn, desktop mở.
   H2 đánh số "1. 2. 3…", H3 chấm tròn "•" thụt vào (phân cấp ý to / ý nhỏ). */
.toc { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-5); font-size: .92rem; text-align: left; } /* text-align:left: không justify (kế thừa từ .entry-content) */
.toc__cb { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } /* ẩn nhìn nhưng vẫn focus được (bàn phím) */
.toc__title { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: .82rem; color: var(--color-primary-d); cursor: pointer; padding: 0; margin: 0; text-transform: uppercase; letter-spacing: .03em; user-select: none; line-height: 1.2; }
/* Mobile: icon DANH SÁCH (SVG mask → ăn màu token), căn giữa theo trục (flex align-items:center). */
.toc__title::before { content: ""; flex: none; width: 18px; height: 18px; background-color: var(--color-primary-l);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='2'%20y='4'%20width='4'%20height='4'%20rx='1'/%3E%3Crect%20x='9'%20y='4.5'%20width='13'%20height='3'%20rx='1.5'/%3E%3Crect%20x='2'%20y='10'%20width='4'%20height='4'%20rx='1'/%3E%3Crect%20x='9'%20y='10.5'%20width='13'%20height='3'%20rx='1.5'/%3E%3Crect%20x='2'%20y='16'%20width='4'%20height='4'%20rx='1'/%3E%3Crect%20x='9'%20y='16.5'%20width='13'%20height='3'%20rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='2'%20y='4'%20width='4'%20height='4'%20rx='1'/%3E%3Crect%20x='9'%20y='4.5'%20width='13'%20height='3'%20rx='1.5'/%3E%3Crect%20x='2'%20y='10'%20width='4'%20height='4'%20rx='1'/%3E%3Crect%20x='9'%20y='10.5'%20width='13'%20height='3'%20rx='1.5'/%3E%3Crect%20x='2'%20y='16'%20width='4'%20height='4'%20rx='1'/%3E%3Crect%20x='9'%20y='16.5'%20width='13'%20height='3'%20rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.toc__cb:focus-visible ~ .toc__title { outline: 2px solid var(--color-primary-l); outline-offset: 2px; }
.toc__list { list-style: none; margin: var(--space-2) 0 var(--space-1); padding: 0; display: none; counter-reset: toc-h2; } /* mobile: thu gọn mặc định */
.toc .toc__list { padding-left: 0; } /* thắng .entry-content ul/.dd-content ul (0,1,1) → không thụt cả list */
.toc__cb:checked ~ .toc__list { display: block; }
/* flex + align-items:baseline: marker & chữ CÙNG 1 hàng, liền mạch (hết lệch) */
.toc .toc__list li { display: flex; align-items: baseline; gap: 6px; margin: 6px 0; line-height: 1.5; padding-left: 0; }
/* H2: đánh số 1. 2. 3… (chỉ H2 tăng đếm) */
.toc .toc__list li.toc__h2 { counter-increment: toc-h2; }
.toc .toc__list li.toc__h2::before { content: counter(toc-h2) "."; flex: none; min-width: 1.1em; color: var(--link); }
/* H3: chấm tròn • (xanh, to hơn 20%), thụt VỪA ĐỦ */
.toc .toc__list li.toc__h3 { padding-left: var(--space-4); }
.toc .toc__list li.toc__h3::before { content: "•"; flex: none; font-size: 1.2em; line-height: 1; color: var(--link); }
/* Desktop: LUÔN mở (ép hiện list) + ẩn mũi tên/con trỏ toggle. */
@media (min-width: 768px) {
  .toc__list { display: block; }
  .toc__title { cursor: default; }
  .toc__title::before { display: none; }
}
/* Anchor nhảy có khoảng thở (không dính sát mép). */
.entry-content :where(h2, h3), .dd-content :where(h2, h3) { scroll-margin-top: var(--space-4); }

/* Bài liên quan — lưới 3 cột × 2 dòng, thumbnail trên (ADR-038) */
.post-related { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border); }
/* Biến thể có KHUNG (nền trắng, bao trọn) — dùng cho related trang Dự đoán (ADR-039). */
.post-related--box { margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.post-related__h { font-size: 1.2rem; margin: 0 0 var(--space-4); color: var(--color-primary-d); }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5) var(--space-4); }
/* Mobile: 2 cột (3 dòng × 2 cột cho 6 bài) — GIỮ 2 cột tới màn nhỏ nhất, không xuống 1 cột. */
@media (max-width: 768px) { .rel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rel-grid { gap: var(--space-4) var(--space-3); } }
.rel-card { min-width: 0; }
.rel-card__media { display: block; aspect-ratio: 16 / 9; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rel-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel-card__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 8px; text-align: center; font-weight: 700; font-size: .8rem; color: var(--text-invert); background: linear-gradient(135deg, var(--color-primary), var(--color-db)); }
.rel-card__title { font-size: .98rem; line-height: 1.35; margin: var(--space-2) 0 4px; }
.rel-card__date { color: var(--text-muted); font-size: .8rem; margin: 0; }

/* Bình luận (ADR-038) */
.post-comments { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.post-comments__h { font-size: 1.2rem; margin: 0 0 var(--space-4); color: var(--color-primary-d); }
.cmt-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.cmt-list .comment { border-bottom: 1px solid var(--border); padding: var(--space-3) 0; }
.cmt-list .comment:last-child { border-bottom: 0; }
.cmt-list .comment-author { font-size: .9rem; }
.cmt-list .fn { font-weight: 700; color: var(--color-primary-d); font-style: normal; }
.cmt-list .comment-meta { font-size: .78rem; color: var(--text-muted); margin: 2px 0 var(--space-2); }
.cmt-list .comment-meta a { color: var(--text-muted); }
.cmt-list .comment-content { font-size: .92rem; line-height: 1.6; }
.cmt-list .avatar { border-radius: var(--radius); float: left; margin: 0 var(--space-3) var(--space-2) 0; }
.cmt-closed { color: var(--text-muted); }
/* Form 3 ô: Họ tên | Email (2 cột) · Nội dung (full) · nút (full) */
.comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); align-items: start; }
.comment-form > * { grid-column: 1 / -1; margin: 0; }
.comment-form .cmt-field:not(.cmt-field--full) { grid-column: auto; }
.comment-form label { display: block; font-weight: 600; font-size: .85rem; color: var(--color-primary-d); margin-bottom: 4px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 12px; font: inherit; background: var(--bg-card); color: var(--text); }
.comment-form textarea { resize: vertical; min-height: 110px; }
.comment-form .form-submit { margin: 0; }
@media (max-width: 480px) { .comment-form { grid-template-columns: 1fr; } .comment-form .cmt-field:not(.cmt-field--full) { grid-column: 1 / -1; } }

/* Mô tả danh mục (SEO admin) */
.archive-desc { margin: 0 0 var(--space-5); color: var(--text); line-height: 1.6; }

/* 404 */
.err404 { text-align: center; padding: var(--space-6) 0; }
.err404__code { font-size: 3.5rem; line-height: 1; color: var(--color-primary); margin: 0; }
.err404__lead { color: var(--text); margin: var(--space-3) auto var(--space-5); max-width: 520px; }
.err404__search { max-width: 420px; margin: 0 auto var(--space-6); }
.err404__sub { color: var(--text-muted); margin: 0 0 var(--space-2); }
.err404__links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: center; }

/* Tìm kiếm */
.search-again { max-width: 480px; margin: 0 0 var(--space-5); }
.search-empty { color: var(--text-muted); padding: var(--space-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.search-form { display: flex; gap: var(--space-2); }
.search-field { flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 12px; font: inherit; background: var(--bg-card); color: var(--text); }
.search-submit { border: 0; background: var(--color-primary); color: var(--text-invert); border-radius: var(--radius); padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.search-submit:hover { background: var(--color-primary-d); }

/* ADR-039 — Dòng lưu ý + Hộp tác giả (E-E-A-T). Chỉ token (--radius/--radius-pill/--link). */
.author-note { margin: var(--space-5) 0 var(--space-3); color: var(--text-muted); font-size: .95em; line-height: 1.6; }
.author-note em { font-style: italic; }
.author-box { display: flex; align-items: flex-start; gap: var(--space-4); margin: var(--space-4) 0 0; padding: var(--space-4); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); }
.author-box__ava { flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-pill); background: var(--bg-card); }
.author-box__body { min-width: 0; }
.author-box__name { font-weight: 700; color: var(--text); font-size: 1.05em; }
.author-box__role { color: var(--text-muted); font-size: .92em; line-height: 1.6; margin-top: 2px; }
.author-box__link { display: inline-block; margin-top: var(--space-2); }
@media ( max-width: 420px ) {
	.author-box { gap: var(--space-3); padding: var(--space-3); }
	.author-box__ava { width: 48px; height: 48px; }
}

/* Phân trang (the_posts_pagination) — nút điều hướng (ngoại lệ ADR-036, dùng token) */
.pagination { margin: var(--space-6) 0 0; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--color-primary); font-weight: 600; text-decoration: none; }
.pagination .page-numbers.current { background: var(--color-primary); color: var(--text-invert); border-color: var(--color-primary); }
.pagination .page-numbers.dots { border: 0; color: var(--text-muted); }
.pagination a.page-numbers:hover { background: var(--bg-alt); text-decoration: none; }