/* ==========================================================================
   Thống Kê XS — giao diện kiểu truyền thống
   Bảng kẻ ô, tiêu đề khối nền đỏ, chữ đen trên nền trắng.
   ========================================================================== */

:root {
  --red: #C4161C;
  --red-d: #9A0F14;
  --cream: #FFF5D9;
  --cream-line: #EAD9A6;
  --line: #D4D4D4;
  --gray: #F2F2F2;
  --zebra: #FAFAFA;
  --ink: #111111;
  --ink-2: #444444;
  --ink-3: #666666;
  --link: #0A4B9C;
  --hl: #FFE45C;
  --hot: #FFD9D6;
  --hot-2: #F5A39C;
  --cold: #E9E9E9;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ECECEC; color: var(--ink); font: 14px/1.5 Arial, Helvetica, sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
[hidden] { display: none !important; }

/* ---------- Đầu trang ---------- */
.hd { background: #fff; }
.hd-in { max-width: 1000px; margin: 0 auto; padding: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.logo { display: block; line-height: 0; }
.logo img { display: block; height: 40px; width: auto; }
.tagline { font-size: 12px; color: var(--ink-3); }
.nav { background: var(--red); }
.nav-in { max-width: 1000px; margin: 0 auto; display: flex; overflow-x: auto; scrollbar-width: none; }
.nav-in::-webkit-scrollbar { display: none; }
.nav a { flex: none; color: #fff; font-weight: bold; padding: 10px 13px; white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, .22); }
.nav a:first-child { border-left: 1px solid rgba(255, 255, 255, .22); }
.nav a:hover, .nav a.on { background: var(--red-d); text-decoration: none; }

/* ---------- Bố cục: cột chính + cột phụ ---------- */
.layout { max-width: 1000px; margin: 0 auto; padding: 10px 8px 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; align-items: start; }
@media (min-width: 960px) { .layout { grid-template-columns: minmax(0, 1fr) 270px; } }
.crumb { font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }

/* ---------- Khối nội dung ---------- */
.box { background: #fff; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 11px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); overflow: hidden; }
.box-t { background: var(--red); color: #fff; font-size: 15px; font-weight: bold; line-height: 1.3; padding: 7px 10px; }
h1.box-t { font-size: 17px; }
.box-sub { background: var(--cream); color: var(--red-d); font-weight: bold; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.box-b { padding: 10px; }
.box-b > * + * { margin-top: 10px; }
.tt { font-size: 14px; font-weight: bold; color: var(--red-d); margin-bottom: 6px; }
.upd { font-size: 12px; color: var(--ink-2); }
.hint { font-size: 12px; color: var(--ink-2); }
.note { background: var(--cream); border: 1px solid var(--cream-line); border-radius: 3px; padding: 8px 10px; }
.note b { color: var(--red-d); }
.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
@media (min-width: 620px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.more { font-weight: bold; }

/* ---------- Bộ lọc ---------- */
.ctl { display: grid; gap: 6px; }
.ctl-r { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.ctl-l { font-weight: bold; min-width: 77px; }
.btns { display: flex; flex-wrap: wrap; gap: 5px; }
.btns button, .btns a { border: 1px solid #B9B9B9; background: #F7F7F7; border-radius: 3px; padding: 6px 10px; font-weight: bold; min-height: 32px; }
.btns button:hover, .btns a:hover { background: #ECECEC; }
.btns button.on, .btns a.on { background: var(--red); border-color: var(--red); color: #fff; }
.ctl input[type="text"] { width: 56px; height: 32px; border: 1px solid #999; border-radius: 3px; padding: 0 8px; font-weight: bold; font-size: 17px; text-align: center; }
/* Ô chọn: dùng cho bộ lọc có nhiều lựa chọn (tháng, năm, tuần, số ngày) */
.sel, .sel-f { height: 32px; max-width: 100%; border: 1px solid #999; border-radius: 3px; background-color: #fff; color: var(--ink); padding: 0 6px; font: bold 16px/1 Arial, Helvetica, sans-serif; cursor: pointer; }
.sel:hover, .sel-f:hover { border-color: #666; }
.btns.wrap { flex-wrap: wrap; overflow: visible; }
.link-btn { border: 0; background: none; color: var(--link); padding: 0; text-decoration: underline; }

/* ---------- Bảng chung ---------- */
table { border-collapse: collapse; width: 100%; }
.sx { overflow-x: auto; }
.t th, .t td { border: 1px solid var(--line); padding: 6px 6px; text-align: center; }
.t thead th { background: var(--gray); color: var(--red-d); font-weight: bold; }
.t tbody tr:nth-child(even) td { background: var(--zebra); }
.t .l { text-align: left; }
.t .num { font-weight: bold; font-size: 15px; }
.r { color: var(--red); font-weight: bold; }

/* ---------- Bảng kết quả ---------- */
.kq-wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .kq-wrap { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } .kq-wrap > div + div { border-left: 1px solid var(--line); } }
@media (max-width: 619px) { .kq-wrap > div + div { border-top: 1px solid var(--line); } }
.kq th { width: 48px; background: var(--gray); border: 1px solid var(--line); border-left: 0; font-weight: normal; font-size: 13px; padding: 5px 3px; }
.kq td { border: 1px solid var(--line); border-right: 0; padding: 3px 2px; }
.kq tr:first-child th, .kq tr:first-child td { border-top: 0; }
.kq tr:last-child th, .kq tr:last-child td { border-bottom: 0; }
.kq tr:nth-child(even) td { background: var(--zebra); }
.kq-n { display: grid; grid-template-columns: repeat(var(--c, 1), minmax(0, 1fr)); text-align: center; }
.kq-n span { font-size: 20px; font-weight: bold; line-height: 1.45; letter-spacing: .01em; }
.kq .db .kq-n span { font-size: 27px; color: var(--red); }
.kq .gl .kq-n span { color: var(--red); }
.kq-n span.hl { background: var(--hl); }
.dd th, .dd td { border: 1px solid var(--line); padding: 5px 6px; }
.dd thead th { background: var(--gray); color: var(--red-d); }
.dd th:first-child, .dd td:first-child { width: 45px; text-align: center; border-left: 0; }
.dd th:last-child, .dd td:last-child { border-right: 0; text-align: left; font-weight: bold; font-size: 15px; }
.dd thead tr:first-child th { border-top: 0; }
.dd tbody tr:last-child td { border-bottom: 0; }

/* ---------- Bảng đặc biệt tuần ---------- */
.wk th, .wk td { border: 1px solid var(--line); text-align: center; padding: 0; }
.wk thead th { background: var(--gray); color: var(--red-d); padding: 6px 3px; white-space: nowrap; }
.wk tbody th { background: var(--gray); font-weight: normal; font-size: 12px; padding: 3px 6px; white-space: nowrap; }
.wk tbody tr:nth-child(even) td { background: var(--zebra); }
.wk td button { display: block; width: 100%; border: 0; background: none; padding: 6px 3px; font-size: 16px; font-weight: bold; letter-spacing: .01em; min-height: 34px; }
.wk td button:hover { background: #F1F1F1; }
.wk td button.new { background: var(--cream); }
.wk td button.hl { background: var(--hl); }
.wk td button i { font-style: normal; }
.wk.tail2 td button i { display: none; }
.wk .na { color: var(--ink-3); padding: 6px 3px; }

/* ---------- Bảng 00–99 ---------- */
.g100 td, .g100 th { border: 1px solid var(--line); text-align: center; padding: 4px 2px; }
.g100 th { background: var(--gray); color: var(--red-d); font-size: 12px; }
.g100 td b { display: block; font-size: 15px; }
.g100 td small { display: block; font-size: 12px; color: var(--ink-2); }
.g100 td small i { font-style: normal; }
.g100 td.hot { background: var(--hot); }
.g100 td.cold { background: var(--cold); }
.key { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 12px; }
.key i { display: inline-block; width: 14px; height: 11px; border: 1px solid var(--line); vertical-align: -2px; margin-right: 6px; }
.key .hot { background: var(--hot); } .key .hot2 { background: var(--hot-2); } .key .cold { background: var(--cold); } .key .hlk { background: var(--hl); } .key .newk { background: var(--cream); }

/* Bảng chi tiết theo ngày */
.mx-wrap { max-height: 448px; overflow: auto; border: 1px solid var(--line); }
.mx { width: auto; font-size: 12px; border-collapse: separate; border-spacing: 0; }
.mx th, .mx td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; padding: 3px 0; min-width: 24px; background: #fff; }
.mx thead th { position: sticky; top: 0; z-index: 2; background: var(--gray); color: var(--ink-2); font-weight: normal; font-size: 12px; line-height: 1.2; padding: 3px 0; }
.mx thead th b { display: block; font-size: 12px; color: var(--ink); }
.mx .c0 { position: sticky; left: 0; background: var(--gray); font-weight: bold; font-size: 14px; min-width: 32px; z-index: 1; }
.mx .c1 { position: sticky; left: 33px; background: var(--cream); font-weight: bold; color: var(--red-d); min-width: 42px; z-index: 1; }
.mx thead .c1 { white-space: normal; padding: 3px 2px; }
.mx thead .c0, .mx thead .c1 { z-index: 3; font-size: 12px; font-weight: bold; }
/* Gan cực đại 00-99: mỗi số một ô ghép "số | gan cực đại", các ô tách rời nhau */
.gmax { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.gmax li { display: flex; border: 1px solid #C4C4C4; border-radius: 3px; overflow: hidden; }
.gmax b { flex: none; width: 38px; background: var(--gray); border-right: 1px solid #C4C4C4; color: var(--red-d); font-size: 16px; line-height: 1.4; padding: 5px 0; text-align: center; }
.gmax span { flex: 1; min-width: 0; font-size: 15px; line-height: 1.5; padding: 5px 2px; text-align: center; white-space: nowrap; }
.gmax i { font-style: normal; font-size: 13px; color: var(--ink-2); }
.gmax .top span { background: var(--hot); color: var(--red); font-weight: bold; }
.gmax .top i { color: inherit; }
@media (max-width: 560px) {
  .gmax { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .gmax b { width: 27px; font-size: 14px; line-height: 1.5; }
  .gmax span { font-size: 14px; padding: 5px 0; }
  .gmax i { font-size: 12px; }
}
/* Bảng chi tiết của cặp số: cột đầu rộng hơn để vừa nhãn "12 - 21" */
.mx.pair .c0 { min-width: 56px; white-space: nowrap; }
.mx.pair .c1 { left: 57px; }
.mx td.v1 { background: var(--hot); font-weight: bold; }
.mx td.v2 { background: var(--hot-2); font-weight: bold; }

/* Gan cực đại 00–99 */

/* ---------- Cột phụ ---------- */
.side .box-t { background: var(--gray); color: var(--red-d); text-align: center; border-bottom: 1px solid var(--line); font-size: 14px; }
.links { list-style: none; margin: 0; padding: 5px 10px 6px; }
.links li { border-bottom: 1px dotted #CCC; }
.links li:last-child { border-bottom: 0; }
.links a { display: block; padding: 6px 0 6px 13px; position: relative; color: var(--ink); }
.links a::before { content: ""; position: absolute; left: 2px; top: 14px; width: 5px; height: 5px; background: var(--red); }
.links a.on { color: var(--red); font-weight: bold; }
.links.c2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.links.c2 li { border-bottom: 0; }
.links.c3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; }
.links.c3 li { border-bottom: 0; }
@media (max-width: 560px) { .links.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.side-sub { font-weight: bold; padding: 6px 10px 0; }

/* ---------- Bài viết, hỏi đáp ---------- */
.prose p + p, .prose ol { margin-top: 8px; }
.prose ol { padding-left: 18px; margin-bottom: 0; }
.prose li + li { margin-top: 5px; }
.prose h3 { font-size: 15px; color: var(--red-d); margin: 13px 0 5px; }
.prose ul { margin: 0; padding-left: 18px; }
.faq h3 { font-size: 14px; margin-bottom: 3px; }
.faq div + div { margin-top: 11px; padding-top: 11px; border-top: 1px dotted #CCC; }
.btn-more { display: block; width: 100%; border: 1px solid #B9B9B9; background: #F7F7F7; border-radius: 3px; padding: 10px; font-weight: bold; margin-bottom: 11px; }
.btn-more:hover { background: #ECECEC; }

/* ---------- Chân trang ---------- */
.ft { background: #fff; border-top: 3px solid var(--red); }
.ft-in { max-width: 1000px; margin: 0 auto; padding: 13px 8px 22px; font-size: 12px; color: var(--ink-2); display: grid; gap: 6px; }
.ft-links { display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 13px; padding-bottom: 7px; margin-bottom: 2px; border-bottom: 1px dotted #CCC; }
.ft-links a { padding: 3px 0; font-weight: bold; }
.ft-links a[aria-current] { color: var(--red); }

@media (max-width: 560px) {
  .layout { padding: 6px 5px 19px; }
  .box-b { padding: 8px 6px; }
  .kq-n span { font-size: 18px; }
  .kq .db .kq-n span { font-size: 23px; }
  .kq th { width: 37px; font-size: 12px; }
  .ctl-l { min-width: 100%; }
  .btns button, .btns a { padding: 6px 9px; }
  .wk td button { font-size: 15px; }
  .wk tbody th { font-size: 12px; padding: 3px 3px; }
  .wk tbody th span { display: block; }
  .wk thead th { font-size: 12px; padding: 6px 1px; }
  .wk td button { padding: 6px 1px; }
  .g100 td small i { display: none; }
  .g100 td, .g100 th { padding: 4px 0; }
  .g100 td b { font-size: 14px; }
  .g100 td small { font-size: 12px; }
  .t th, .t td { padding: 6px 4px; }
  .hide-sm { display: none; }
  .logo img { height: 32px; }
  /* Bảng tuần đủ 5 số: thu chữ để 7 cột vừa màn hình điện thoại */
  .wk:not(.tail2) td button { font-size: 14px; letter-spacing: 0; padding: 8px 0; }
}

/* ---------- Bổ sung cho theme ---------- */
.btns a { display: inline-flex; align-items: center; color: var(--ink); }
.btns a:hover { text-decoration: none; }
.btns a.on { color: #fff; }

/* Mục chưa có trang: hiện chữ, không phải đường link */
.nav span { flex: none; color: rgba(255, 255, 255, .6); font-weight: bold; padding: 10px 13px; white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, .22); }
.links span { display: block; padding: 6px 0 6px 13px; position: relative; color: var(--ink-3); }
.links span::before { content: ""; position: absolute; left: 2px; top: 14px; width: 5px; height: 5px; background: #BBB; }

/* Nội dung bài viết và trang thường */
.entry > * + * { margin-top: 10px; }
.entry h2, .entry h3 { color: var(--red-d); margin-top: 16px; }
.entry h2 { font-size: 17px; }
.entry h3 { font-size: 15px; }
.entry ul, .entry ol { padding-left: 22px; margin-bottom: 0; }
.entry img { max-width: 100%; height: auto; }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li + li { margin-top: 10px; padding-top: 10px; border-top: 1px dotted #CCC; }
.post-list h2 { font-size: 15px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Thanh chuyển trang trong cụm ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.tabs a { border: 1px solid var(--line); background: var(--gray); border-radius: 3px; padding: 5px 10px; font-weight: bold; color: var(--ink); white-space: nowrap; }
.tabs a:hover { background: #E8E8E8; text-decoration: none; }
.tabs a.on { background: var(--cream); border-color: var(--cream-line); color: var(--red-d); }

/* ---------- Lưới ngày x tháng hoặc ngày x năm ---------- */
.yg { min-width: 100%; }
.yg thead th { padding: 6px 2px; }
.yg thead th a { color: var(--red-d); text-decoration: underline; }
.yg tbody th { position: sticky; left: 0; z-index: 1; width: 34px; text-align: center; font-weight: bold; font-size: 13px; padding: 4px 2px; }
.yg td button { font-size: 14px; padding: 5px 1px; min-height: 28px; letter-spacing: 0; }
.yg td.x { background: var(--gray); }
.yg .na { padding: 5px 1px; }
.wk td button small { display: block; font-size: 12px; font-weight: normal; color: var(--ink-2); line-height: 1.2; }
.years a { min-width: 52px; justify-content: center; }
@media (max-width: 560px) {
  .yg td button, .wk.yg:not(.tail2) td button { font-size: 13px; padding: 5px 2px; }
  .yg:not(.tail2) td { min-width: 46px; }
  .yg tbody th { width: 26px; }
  .tabs a { padding: 5px 8px; }
}

/* ---------- Bảng kết quả nhiều đài (miền Nam, miền Trung) ---------- */
.kqm th, .kqm td { border: 1px solid var(--line); text-align: center; padding: 4px 3px; }
.kqm thead th { background: var(--gray); color: var(--red-d); }
.kqm thead th a { color: var(--red-d); text-decoration: underline; }
.kqm tbody th { background: var(--gray); font-weight: normal; font-size: 13px; width: 40px; }
.kqm tbody tr:nth-child(even) td { background: var(--zebra); }
.kqm td span { display: block; font-size: 18px; font-weight: bold; line-height: 1.4; }
.kqm .db td span { font-size: 21px; color: var(--red); }
.kqm .gl td span { color: var(--red); }
.kqm td span.hl { background: var(--hl); }

/* ---------- Sổ kết quả ---------- */
/* Trình duyệt chỉ dựng các khối kết quả khi cuộn tới, để trang dài vẫn nhẹ. */
.days .box { content-visibility: auto; contain-intrinsic-size: auto 290px; }
/* Sổ kết quả kiểu lưới: mỗi ngày một thẻ gọn, nhiều thẻ một hàng */
.days.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 11px; }
.days.grid.m-3, .days.grid.m-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.days.grid .box { margin: 0; contain-intrinsic-size: auto 250px; }
.days.grid .box-t { font-size: 14px; padding: 5px 4px; text-align: center; white-space: nowrap; }
.days.grid .kq th { width: 28px; font-size: 12px; padding: 3px 1px; }
.days.grid .kq td { padding: 2px 1px; }
.days.grid .kq-n span { font-size: 15px; line-height: 1.4; letter-spacing: 0; }
.days.grid .kq .db .kq-n span { font-size: 19px; }
@media (max-width: 760px) {
  .days.grid, .days.grid.m-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .days.grid.m-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .days.grid .box-t { font-size: 13px; }
  .days.grid .kq th { width: 24px; }
  .days.grid .kq-n span { font-size: 14px; }
  .days.grid .kq .db .kq-n span { font-size: 17px; }
  .days.grid.m-2 .box-t { padding: 5px 1px; }
}
@media (max-width: 380px) {
  /* Lưới 2 cột trên điện thoại hẹp: giữ chữ số 13px để 4 số của giải tư không dính nhau */
  .days.grid .kq-n span { font-size: 13px; }
}
@media (max-width: 345px) {
  /* Điện thoại rất hẹp: chữ số nhỏ lại một nấc để các số trong cùng một giải không dính nhau */
  .days.grid .kq-n span { font-size: 12px; }
  .days.grid .kq .db .kq-n span { font-size: 16px; }
  .days.grid .kq th { width: 22px; font-size: 11px; }
}
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 11px; }
.pager a, .pager span { border: 1px solid #B9B9B9; background: #F7F7F7; border-radius: 3px; padding: 6px 11px; font-weight: bold; color: var(--ink); }
.pager a:hover { background: #ECECEC; text-decoration: none; }
.pager .on { background: var(--red); border-color: var(--red); color: #fff; }
.pager .lbl { border: 0; background: none; padding-left: 0; font-weight: normal; }
@media (max-width: 560px) {
  .kqm td span { font-size: 16px; }
  .kqm .db td span { font-size: 18px; }
  .kqm tbody th { width: 30px; font-size: 12px; }
}

/* Bảng lịch quay: cột thứ hẹp, cột đài căn trái */
.sched td:first-child { width: 90px; white-space: nowrap; }
.sched td:last-child { text-align: left; }

/* Lưới 100 đường link tới trang của từng số */
.ng td { padding: 0; }
.ng td a, .ng td b { display: block; padding: 7px 0; font-size: 16px; font-weight: bold; }
.ng td a { color: var(--link); }
.ng td a:hover { background: var(--cream); text-decoration: none; }

/* ==========================================================================
   Thu gọn khối điều khiển ở đầu trang
   ========================================================================== */

/* Các nhóm lọc ngắn đứng chung một dòng; nhãn nằm cùng hàng với nút. */
.ctl { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ctl-r { flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.ctl-l { flex: none; min-width: 0; white-space: nowrap; }
.btns { min-width: 0; }
.tabs { gap: 3px; }
.tabs a { padding: 5px 7px; font-size: 13px; }

@media (max-width: 760px) {
  /* Đầu trang gọn hơn */
  .tagline { display: none; }
  .logo img { height: 28px; }
  .hd-in { padding: 6px 8px; }
  .nav a, .nav span { padding: 8px 11px; }
  .crumb { margin-bottom: 6px; }

  /* Thanh chuyển trang và hàng nút lọc: một dòng, vuốt ngang */
  .tabs, .btns { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar, .btns::-webkit-scrollbar { display: none; }
  .tabs a, .btns a, .btns button { flex: none; }
  .tabs a { font-size: 14px; padding: 5px 9px; }
  .tabs { padding-bottom: 0; border-bottom: 0; }
  .btns a, .btns button { padding: 5px 8px; min-height: 30px; }
  .ctl { gap: 6px 10px; }
  .ctl-r { gap: 5px; }
  .ctl-l { min-width: 0; font-size: 13px; }
  .ctl input[type="text"] { width: 46px; height: 30px; padding: 0 2px; }
  .sel, .sel-f { height: 30px; padding: 0 3px; font-size: 17px; } /* 16px để iPhone không tự phóng to khi chạm */

  /* Sắp xếp lại: tiêu đề, thanh chuyển trang, bộ lọc, rồi tới bảng chính;
     đoạn mô tả và tóm tắt chuyển xuống dưới bảng chính.
     Khối đầu trang được "mở hộp" để từng phần của nó xếp chung hàng với các khối khác. */
  main { display: flex; flex-direction: column; }
  main > .crumb { order: -11; }
  .box.head, .box.head > .box-b { display: contents; }
  .box.head > .box-t { order: -10; font-size: 16px; padding: 6px 8px; border-radius: 4px 4px 0 0; }
  .box.head > .box-b > * { margin: 0; }
  .box.head > .box-b > .tabs, .box.head > .box-b > .ctl { background: #fff; border: 1px solid var(--line); border-top: 0; padding: 6px 8px; }
  .box.head > .box-b > .tabs { order: -9; }
  .box.head > .box-b > .ctl { order: -8; }
  .box.head + *, .box.head ~ .pager, .box.head ~ .days { order: -7; }
  .box.head + *, .box.head + [hidden] + * { margin-top: 8px; }
  /* Trang miền, trang tỉnh: bảng tóm tắt nhanh rồi tới kết quả mới nhất, cả hai đứng trước đoạn mô tả */
  .box.head + .quick + * { order: -7; }
  .box.head > .box-b > p { order: -6; background: #fff; border: 1px solid var(--line); border-width: 0 1px; padding: 6px 8px; }
  .box.head > .box-b > p:first-of-type { border-top-width: 1px; border-radius: 4px 4px 0 0; }
  .box.head > .box-b > p:last-of-type { border-bottom-width: 1px; border-radius: 0 0 4px 4px; margin-bottom: 11px; }
  .box.head > .box-b > p.note { background: var(--cream); border: 1px solid var(--cream-line); padding: 8px; }
}

/* Dòng ghi chú đứng riêng giữa các khối (ví dụ thông báo tô màu ở sổ kết quả) */
main > p.hint { margin: 0 2px 8px; }

/* ==========================================================================
   Bảng đặc biệt theo tuần: 7 cột thứ 2 - CN, mỗi ô gồm kết quả, giá trị hiện thêm và ngày tháng năm
   ========================================================================== */
.wk7 { table-layout: fixed; }
.wk7 td button { padding: 6px 1px 5px; line-height: 1.3; }
.wk7 small { display: block; font-weight: normal; line-height: 1.3; }
.wk7 small.x { font-size: 13px; color: var(--ink-2); }
.wk7 small.x:empty { display: none; }
.wk7 small.x span { display: block; }
.wk7 small.x b { color: var(--link); font-size: 14px; }
.wk7 small.d { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
/* Ngày dưới mỗi ô là link tới kết quả của ngày đó. Link nằm đè lên phần đáy của nút, để nền tô màu của nút vẫn phủ hết ô. */
.wk7 td.has-d { position: relative; }
.wk7 td.has-d button { padding-bottom: 22px; }
.wk7 a.d { position: absolute; left: 0; right: 0; bottom: 4px; display: block; font-size: 12px; line-height: 1.3; color: var(--ink-3); text-decoration: underline; text-decoration-color: #BDBDBD; text-underline-offset: 2px; }
.wk7 a.d:hover { color: var(--link); text-decoration-color: currentColor; }
.wk7 .na { padding: 6px 1px 5px; line-height: 1.3; vertical-align: top; }
.wk7 .na > span { display: block; font-size: 16px; }
@media (max-width: 560px) {
  .wk7 td button, .wk7:not(.tail2) td button { font-size: 15px; letter-spacing: 0; padding: 6px 0 5px; }
  .wk7 small.x { font-size: 12px; }
  .wk7 small.x b { font-size: 13px; }
  .wk7 small.d, .wk7 a.d { font-size: 11px; }
  .wk7 small.d span, .wk7 a.d span { display: none; } /* 09/11/2026 gọn thành 09/11/26 */
  .wk7 td.has-d button, .wk7:not(.tail2) td.has-d button { padding-bottom: 20px; }
  .wk7 .na > span { font-size: 15px; }
}
@media (max-width: 345px) {
  /* Điện thoại rất hẹp: chữ nhỏ lại một nấc để 5 chữ số và ngày tháng không chạm viền ô */
  .wk7 td button, .wk7:not(.tail2) td button { font-size: 13px; }
  .wk7 small.x { font-size: 11px; }
  .wk7 small.x b { font-size: 12px; }
  .wk7 small.d, .wk7 a.d { font-size: 9px; }
  .wk7 td.has-d button, .wk7:not(.tail2) td.has-d button { padding-bottom: 17px; }
  .ctl { gap: 6px 8px; }
  /* Ô gan cực đại: 3 ô một hàng để "100 ngày" không bị cắt */
  .gmax { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sel { padding: 0; }
}

/* ==========================================================================
   Trang ngày hôm sau và "đề về XX": ô nhập số, dòng kỳ quay mới nhất, bảng thống kê nhanh
   ========================================================================== */
.ctl .go input[type="text"] { width: 78px; }
.go button { height: 32px; border: 1px solid var(--red); border-radius: 3px; background: var(--red); color: #fff; font-weight: bold; font-size: 14px; padding: 0 14px; cursor: pointer; }
.go button:hover { background: var(--red-d); border-color: var(--red-d); }
.now { font-size: 17px; font-weight: bold; line-height: 1.4; }
.now b { color: var(--red); font-size: 23px; letter-spacing: .02em; white-space: nowrap; }
.kv th, .kv td { text-align: left; padding: 7px 9px; font-size: 15px; }
.kv th { width: 52%; background: var(--gray); font-weight: normal; }
.kv tbody tr:nth-child(even) td { background: #fff; }
.kv td b { color: var(--red); font-size: 16px; }
/* Bảng tóm tắt nhanh của trang miền, trang tỉnh: nhãn ngắn nên cột nhãn chỉ rộng vừa chữ, phần còn lại cho cột số */
.quick .kv th { width: 1%; white-space: nowrap; padding-right: 18px; }
.nb { white-space: nowrap; }
.t a.num { color: var(--link); text-decoration: underline; }
@media (max-width: 760px) {
  .ctl .go input[type="text"] { width: 70px; height: 30px; }
  .go button { height: 30px; }
  .now { font-size: 16px; }
  .now b { font-size: 21px; }
  .kv th, .kv td { padding: 6px 7px; font-size: 14px; }
  .kv th { width: 50%; }
  .quick .kv th { width: 31%; white-space: normal; padding-right: 7px; }
  /* Dòng kỳ quay mới nhất đứng ngay dưới ô nhập số, trước bảng chính, như trên máy tính. */
  .box.head > .box-b > p.now { order: -8; border-top-width: 0; border-radius: 0; margin-bottom: 0; padding: 2px 8px 8px; }
}

/* Danh sách các lần về kèm lô tô kỳ sau; bảng lô rơi */
.nx tbody tr:nth-child(even) td { background: #fff; }
.nx tbody:nth-child(odd) tr td { background: var(--zebra); }
.nx .lo td { text-align: left; font-size: 13px; line-height: 1.6; color: var(--ink-2); word-spacing: 3px; padding: 4px 8px 6px; }
.nx .lo td span { font-weight: bold; color: var(--ink); word-spacing: 0; }
.nx .lo td b.r { font-size: 14px; }
.roi td { vertical-align: middle; }
.roi tbody tr.hit td { background: var(--cream); }
.roi .none { color: var(--ink-3); }
.roi small { display: block; font-size: 12px; color: var(--ink-2); }

/* Nhóm nút bật tắt liền nhau (Đầu / Đuôi / Tổng) */
.btns.seg { gap: 0; flex-wrap: nowrap; }
.btns.seg button { border-radius: 0; margin-left: -1px; cursor: pointer; padding-left: 9px; padding-right: 9px; }
.btns.seg button:first-child { border-radius: 3px 0 0 3px; margin-left: 0; }
.btns.seg button:last-child { border-radius: 0 3px 3px 0; }
.btns.seg button.on { position: relative; }

/* ==========================================================================
   Menu điện thoại (nút bật tắt), đầu trang bám theo khi cuộn, nút lên đầu trang
   ========================================================================== */
.menu-btn, .nav-all { display: none; }

/* Nút lên đầu trang: hiện khi đã cuộn xuống một đoạn */
/* Cụm nút nổi ở góc dưới bên phải: nút "Tra cứu nhanh" và nút lên đầu trang, xếp cạnh nhau */
.fab { position: fixed; right: 10px; bottom: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; gap: 8px; align-items: center; }
.totop { width: 44px; height: 44px; border: 1px solid #fff; border-radius: 4px; background: var(--red); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); padding: 0; opacity: .92; }
.totop:hover { background: var(--red-d); opacity: 1; }
.totop span { display: block; width: 13px; height: 13px; margin: 6px auto 0; border: solid #fff; border-width: 3px 0 0 3px; transform: rotate(45deg); }

@media (max-width: 760px) {
  /* Đầu trang đứng yên ở mép trên khi cuộn */
  .js .hd { position: sticky; top: 0; z-index: 50; border-bottom: 2px solid var(--red); box-shadow: 0 1px 4px rgba(0, 0, 0, .22); }
  html.js { scroll-padding-top: 52px; }
  .js .hd-in { flex-wrap: nowrap; }

  .js .menu-btn { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; height: 32px; padding: 0 10px; border: 1px solid var(--red); border-radius: 3px; background: var(--red); color: #fff; font-weight: bold; font-size: 14px; }
  .bars { display: block; position: relative; width: 18px; height: 14px; }
  .bars i { position: absolute; left: 0; width: 18px; height: 2px; background: #fff; border-radius: 1px; }
  .bars i:nth-child(1) { top: 0; }
  .bars i:nth-child(2) { top: 6px; }
  .bars i:nth-child(3) { top: 12px; }
  /* Đang mở: ba gạch thành dấu X */
  .open .bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .open .bars i:nth-child(2) { opacity: 0; }
  .open .bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
  .open .menu-btn { background: var(--red-d); border-color: var(--red-d); }

  /* Bảng menu thả xuống ngay dưới đầu trang, cuộn riêng khi dài hơn màn hình */
  .js .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px; background: #fff; border-bottom: 3px solid var(--red); box-shadow: 0 6px 10px rgba(0, 0, 0, .3); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; }
  .js .open .nav { display: block; }
  .js .nav-in { display: none; }
  .js .nav-all { display: block; }
  .nav-all ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-all ul.one { grid-template-columns: minmax(0, 1fr); }
  .nav-all li { border-bottom: 1px solid #E4E4E4; }
  .nav-all li:nth-child(odd) { border-right: 1px solid #E4E4E4; }
  .nav-all .nav-g { background: var(--red); color: #fff; font-weight: bold; font-size: 14px; padding: 6px 10px; }
  .nav .nav-all a, .nav .nav-all span { display: flex; align-items: center; min-height: 40px; height: 100%; padding: 5px 10px; border: 0; color: var(--ink); font-weight: bold; font-size: 14px; line-height: 1.3; white-space: normal; }
  .nav .nav-all span { color: var(--ink-3); font-weight: normal; }
  .nav .nav-all a:hover { background: var(--gray); }
  .nav .nav-all a.on { background: var(--cream); color: var(--red-d); }
  /* Nút lên đầu trang nhỏ hơn và trong hơn một chút để ít che bảng */
  .fab { right: 8px; gap: 7px; }
  .totop { width: 40px; height: 40px; opacity: .85; }
  .totop span { width: 12px; height: 12px; }
}
/* Thanh quản trị của WordPress chiếm 46px ở mép trên trong khoảng rộng này */
@media (min-width: 601px) and (max-width: 760px) { .js .admin-bar .hd { top: 46px; } }

/* ==========================================================================
   Kết quả theo ngày và dò vé số
   ========================================================================== */
.ctl input[type="date"] { height: 32px; border: 1px solid #999; border-radius: 3px; padding: 0 6px; font: bold 16px/1 Arial, Helvetica, sans-serif; background: #fff; color: var(--ink); max-width: 100%; }
form.ctl.go { margin: 8px 0; }
.ctl input.ve { width: 132px; letter-spacing: .08em; font-size: 20px; height: 38px; }
.ve-kq { margin-top: 8px; }
.ve-kq p { margin-top: 6px; }
.ve-kq ul { margin: 6px 0 0; padding-left: 22px; }
.ve-kq li { font-weight: bold; margin-top: 3px; }
.ve-ok { background: var(--cream); border: 1px solid var(--cream-line); border-radius: 3px; padding: 8px 10px; font-weight: bold; font-size: 16px; color: var(--red-d); }
.ve-no { background: var(--gray); border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; font-weight: bold; font-size: 16px; }
@media (max-width: 760px) {
  .ctl input[type="date"] { height: 30px; }
  .box.head > .box-b > form.ctl.go { order: -8; background: #fff; border: 1px solid var(--line); border-top: 0; padding: 6px 8px; margin: 0; }
}
/* Form có nhiều ô (chọn ngày tháng, số vé): cho phép xuống dòng trên màn hình hẹp */
.ctl-r.go, #tkxs-dove .ctl-r { flex-wrap: wrap; }
.ctl input.dan { width: 150px; text-align: left; }
.read-more { margin-top: 11px; padding-top: 9px; border-top: 1px dotted #CCC; font-weight: bold; }
.entry table.t { margin-top: 10px; }
/* Kết quả dò vé: bảng các giải trùng, bảng tổng tiền, bảng cơ cấu giải */
.ctl input.ve.kh { width: 96px; letter-spacing: .04em; text-transform: uppercase; }
.ve-kq .t { margin-top: 8px; }
.ve-t td, .ve-t th { text-align: left; padding: 7px 8px; }
.ve-t .ve-g { font-weight: bold; }
.ve-t .ve-m { font-weight: bold; color: var(--red); white-space: nowrap; }
.ve-s th { width: 54%; }
.ve-kq .note { margin-top: 8px; }
.prz td, .prz th { text-align: left; padding: 6px 8px; }
.prz td:last-child { font-weight: bold; white-space: nowrap; }
@media (max-width: 560px) {
  .ve-t td, .ve-t th, .prz td, .prz th { padding: 6px 5px; font-size: 13px; }
  .ve-t .ve-m, .prz td:last-child { white-space: normal; }
}

/* ==========================================================================
   Tra cứu nhanh một con số: khối trên trang chủ, nút kính lúp nổi và popup
   ========================================================================== */
.lk-open { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 13px; border: 1px solid #fff; border-radius: 4px; background: var(--link); color: #fff; font-weight: bold; font-size: 14px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); opacity: .92; }
.lk-open:hover { background: #083A7A; opacity: 1; text-decoration: none; }
.lk .box-b > p { margin-bottom: 8px; }
form.lk-f { margin: 0; }
.lk-f input[type="text"] { width: 72px; }
.lk-kq:empty { display: none; }
.lk-kq { margin-top: 10px; padding-top: 9px; border-top: 1px dotted #CCC; }
.lk-kq .tt { margin: 10px 0 5px; }
.lk-kq .kv th { width: 38%; }
.lk-h { font-size: 15px; font-weight: bold; }
.lk-h .r { font-size: 20px; }
.lk-d { margin-top: 3px; }
.lk-l { margin-top: 6px; line-height: 1.7; }
.lk-l a { font-weight: bold; }
.lk-m { font-weight: bold; }
.lk-kq .hint { margin-top: 9px; }

.lk-modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; background: rgba(0, 0, 0, .55); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 46px 10px 20px; }
.lk-panel { position: relative; max-width: 620px; margin: 0 auto; }
.lk-panel .box { margin: 0; box-shadow: 0 4px 18px rgba(0, 0, 0, .45); overflow: visible; }
.lk-panel .box-t { padding-right: 86px; border-radius: 4px 4px 0 0; }
.lk-x { position: absolute; right: 6px; top: 5px; height: 28px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 3px; background: var(--red-d); color: #fff; font-weight: bold; font-size: 13px; }
.lk-x:hover { background: #7A0A0E; }
/* Khi popup mở: trang phía sau đứng yên */
html.lk-on, html.lk-on body { overflow: hidden; }
@media (max-width: 760px) {
  .lk-modal { padding: 8px 6px 16px; }
  .lk-kq .kv th { width: 40%; }
  .lk-f input[type="text"] { width: 62px; }
}
/* Thanh quản trị của WordPress (chỉ người quản trị thấy) không được che tiêu đề popup */
.admin-bar .lk-modal { top: 32px; }
@media (max-width: 782px) { .admin-bar .lk-modal { top: 46px; } }
/* Nút "Tra cứu nhanh" trên điện thoại: cao bằng nút lên đầu trang */
@media (max-width: 760px) { .lk-open { height: 40px; padding: 0 11px; font-size: 13px; opacity: .9; } }
/* Biểu tượng mạng xã hội ở chân trang */
.ft-social { display: flex; flex-wrap: wrap; gap: 8px; }
.soc { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 4px; color: #fff; background: #555; }
.soc:hover { opacity: .85; text-decoration: none; }
.soc svg { display: block; }
.soc-facebook { background: #1877F2; }
.soc-x { background: #000; }
.soc-youtube { background: #E60000; }
.soc-pinterest { background: #BD081C; }