/* ==========================================================================
   Soicau247VIP — "skin" cho bảng kết quả & thống kê của 2 plugin
   (KQXS + KQXS Stats Extension).

   Plugin xuất markup dùng các class mà chúng giao cho THEME định kiểu
   (.kqh, .kq-tbl, .gl, .gcell, .mn-tbl, .dd-tbl, .mn-dd-tbl …). File này
   cung cấp đúng các kiểu đó, lấy số liệu (cỡ chữ, màu, viền) từ chính CSS
   dự phòng của plugin (assets/live/live-table.css) và khung `.kqh` của
   shortcode cau-bach-thu, rồi đối chiếu với giao diện mẫu:

     Miền Bắc : header đỏ  #c8001e
     Miền Nam : header cam #e65000
     Miền Trung: header tím #4b1d8c

   Mọi quy tắc đặt trong .sx-plugin nên KHÔNG ảnh hưởng phần còn lại của theme.
   ========================================================================== */

/* ---- Khung kết quả ---------------------------------------------------- */
.sx-plugin .kqxs-result-section { background: #fff; border: 1px solid #e3e3e3; margin: 0 0 10px; overflow: hidden; }
.sx-plugin .kqxs-homepage-mien-block { margin-bottom: 14px; }

/* Header màu theo miền */
.sx-plugin .kqh { color: #fff; text-align: center; padding: 10px 12px 9px; margin: 0; }
.sx-plugin .kqh.red { background: #c8001e; }
.sx-plugin .kqh.orange { background: #e65000; }
.sx-plugin .kqh.purple { background: #4b1d8c; }
.sx-plugin .kqh .t1 { font-size: 15px; font-weight: 700; line-height: 1.35; color: #fff; }
.sx-plugin .kqh .t2 { font-size: 12px; margin-top: 3px; color: #fff; }
.sx-plugin .kqh a.sep { text-decoration: underline; }
.sx-plugin .kqh .sep { color: #ffd6da; }
.sx-plugin .kqh.orange .sep { color: #ffd0b0; }
.sx-plugin .kqh.purple .sep { color: #e3d4ff; }

/* Tab thứ trong tuần */
.sx-plugin .dtabs { display: flex; flex-wrap: wrap; background: #f6f6f6; border-bottom: 1px solid #e3e3e3; }
.sx-plugin .dtab { flex: 1 1 auto; text-align: center; padding: 7px 8px; font-size: 13px; color: #333; border-right: 1px solid #e3e3e3; white-space: nowrap; }
.sx-plugin .dtab:last-child { border-right: 0; }
.sx-plugin .dtab:hover { color: #c8001e; }
.sx-plugin .dtab.on { background: #fff; color: #c8001e; font-weight: 700; box-shadow: inset 0 -2px 0 #c8001e; }

/* ---- Bảng 1 đài (Miền Bắc / từng tỉnh) -------------------------------- */
.sx-plugin .kq-tbl { width: 100%; border-collapse: collapse; background: #fff; table-layout: auto; }
.sx-plugin .kq-tbl tr { border-bottom: 1px solid #ececec; }
.sx-plugin .kq-tbl tr:last-child { border-bottom: 0; }
.sx-plugin .kq-tbl td { padding: 0; vertical-align: middle; }
.sx-plugin .kq-tbl td.gl { width: 42px; color: #110000; font-size: 12px; font-weight: 700; padding: 0 4px 0 8px; text-align: left; white-space: nowrap; border-right: 1px solid #ececec; }
.sx-plugin .db-td { text-align: center; padding: 8px 0; font-size: 28px; font-weight: 700; color: #c8001e; letter-spacing: 3px; }
.sx-plugin .g1-td { text-align: center; padding: 7px 0; font-size: 20px; font-weight: 700; color: #110000; }
.sx-plugin .g2-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; }
.sx-plugin .g2-inner .cell { text-align: center; padding: 7px 4px; font-size: 16px; font-weight: 700; color: #110000; border-left: 1px solid #ececec; }
.sx-plugin .g2-inner .cell:first-child { border-left: 0; }
.sx-plugin .g2-inner .cell.empty { color: transparent; }
.sx-plugin .gcell { text-align: center; padding: 6px 4px; font-size: 20px; font-weight: 700; color: #110000; border-left: 1px solid #ececec; border-top: 1px solid #ececec; line-height: 1.4; }
.sx-plugin .g3-inner, .sx-plugin .g5-inner, .sx-plugin .g6-inner { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.sx-plugin .g4-inner, .sx-plugin .g7-inner { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.sx-plugin .g3-inner .gcell:nth-child(-n+3), .sx-plugin .g5-inner .gcell:nth-child(-n+3) { border-top: 0; }
.sx-plugin .g3-inner .gcell:nth-child(3n+1), .sx-plugin .g5-inner .gcell:nth-child(3n+1) { border-left: 0; }
.sx-plugin .g4-inner .gcell, .sx-plugin .g6-inner .gcell, .sx-plugin .g7-inner .gcell { border-top: 0; }
.sx-plugin .g4-inner .gcell:first-child, .sx-plugin .g6-inner .gcell:first-child, .sx-plugin .g7-inner .gcell:first-child { border-left: 0; }
.sx-plugin .g6-inner .gcell { font-size: 14px; }
.sx-plugin .g7-inner .gcell { font-size: 22px; color: #c8001e; padding: 6px 4px; }

/* Bộ lọc "Đầy đủ / 2 số / 3 số" + nút số (theme.js → result-tools.js) */
.sx-plugin .kq-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; background: #fffbe6; border-top: 1px solid #efe3a8; border-bottom: 1px solid #efe3a8; padding: 6px 10px; font-size: 14px; color: #222; }
.sx-plugin .kq-filter label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.sx-plugin .kq-filter input[type=radio] { margin: 0; accent-color: #c8001e; }
.sx-plugin .kq-digits { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.sx-plugin .kq-digits button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #d6d6d6; background: #ececec; color: #333; font: 700 10px/20px Arial, sans-serif; padding: 0; cursor: pointer; }
.sx-plugin .kq-digits button.on { background: #ffd700; border-color: #c8a000; }
.sx-plugin mark.kq-hit { background: #ffe14d; color: inherit; padding: 0; border-radius: 2px; }

/* ---- Bảng nhiều đài (Miền Nam / Miền Trung) --------------------------- */
.sx-plugin .mn-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; }
.sx-plugin .mn-tbl th, .sx-plugin .mn-tbl td { border: 1px solid #ececec; text-align: center; vertical-align: middle; padding: 6px 2px; }
.sx-plugin .mn-tbl thead th { font-size: 14px; font-weight: 700; padding: 8px 2px; background: #fff; }
.sx-plugin .mn-tbl thead th a { color: #0000ee; text-decoration: underline; }
.sx-plugin .mn-tbl .glh { width: 34px; }
.sx-plugin .mn-tbl td.gl2 { width: 34px; font-size: 12px; font-weight: 700; color: #110000; text-align: left; padding-left: 6px; }
.sx-plugin .mn-tbl tr.row-db td { background: #fff7f0; }
.sx-plugin .mn-tbl span { display: inline-block; line-height: 1.7; }
.sx-plugin .mn-tbl .n-db { font-size: 18px; font-weight: 700; color: #c8001e; }
.sx-plugin .mn-tbl .n-g8 { font-size: 20px; font-weight: 700; color: #c8001e; }
.sx-plugin .mn-tbl .n-g7, .sx-plugin .mn-tbl .n-g5, .sx-plugin .mn-tbl .n-g2m, .sx-plugin .mn-tbl .n-g1m { font-size: 15px; font-weight: 700; color: #110000; }
.sx-plugin .mn-tbl .n-g3, .sx-plugin .mn-tbl .n-g4, .sx-plugin .mn-tbl .n-g6 { font-size: 14px; font-weight: 400; color: #110000; }

/* ---- Bảng Đầu / Đuôi -------------------------------------------------- */
.sx-plugin .dd-wrap { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #ddd; background: #fff; }
.sx-plugin .dd-wrap .dd-tbl { width: 100%; border-collapse: collapse; }
.sx-plugin .dd-wrap .dd-tbl:first-child { border-right: 2px solid #ddd; }
.sx-plugin .dd-wrap .dd-tbl th { background: #fff; font-size: 15px; font-weight: 700; padding: 7px 10px; border-bottom: 1px solid #ddd; color: #555; }
.sx-plugin .dd-wrap .dd-tbl th.tl { text-align: left; }
.sx-plugin .dd-wrap .dd-tbl th.tr { text-align: right; }
.sx-plugin .dd-wrap .dd-tbl td { border-bottom: 1px solid #f2f2f2; padding: 5px 10px; font-size: 15px; }
.sx-plugin .dd-wrap .dd-tbl tr:last-child td { border-bottom: 0; }
.sx-plugin .dd-wrap .dd-tbl td.idx { color: #c8001e; font-weight: 700; width: 28px; }
.sx-plugin .dd-wrap .dd-tbl.left td.idx { text-align: left; }
.sx-plugin .dd-wrap .dd-tbl.right td.idx { text-align: right; }
.sx-plugin .dd-wrap .dd-tbl.left td.vals { text-align: left; color: #110000; }
.sx-plugin .dd-wrap .dd-tbl.right td.vals { text-align: right; color: #110000; }
.sx-plugin .dd-wrap .hot { color: #c8001e; font-weight: 700; }

.sx-plugin .mn-dd-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; border-top: 1px solid #ddd; }
.sx-plugin .mn-dd-tbl th, .sx-plugin .mn-dd-tbl td { border: 1px solid #ddd; padding: 6px 4px; text-align: center; font-size: 14px; }
.sx-plugin .mn-dd-tbl th { font-weight: 700; color: #555; background: #fff; }
.sx-plugin .mn-dd-tbl .didx { width: 40px; color: #c8001e; font-weight: 700; }
.sx-plugin .mn-dd-tbl td.dnums { color: #110000; }

/* ---- Khối "Xổ số ba miền hôm nay" (trang chủ) ------------------------- */
.sx-plugin .kqxs-xs3m-header { background: #c8001e; color: #fff; text-align: center; font-weight: 700; font-size: 15px; padding: 9px 10px; }
.sx-plugin .kqxs-xs3m-links { background: #fff; border: 1px solid #e3e3e3; border-top: 0; margin: 0 0 12px; }
.sx-plugin .kqxs-xs3m-links table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sx-plugin .kqxs-xs3m-links td { border: 1px solid #ececec; text-align: center; padding: 8px 4px; font-size: 14px; }
.sx-plugin .kqxs-xs3m-links a { color: #0000ee; text-decoration: underline; }

/* ---- Điện thoại hẹp --------------------------------------------------- */
@media (max-width: 580px) {
	.sx-plugin .kq-tbl td.gl { width: 30px; font-size: 15px; padding: 0 2px 0 4px; }
	.sx-plugin .db-td { font-size: 22px; }
	.sx-plugin .g2-inner .cell, .sx-plugin .gcell { font-size: 16px; padding: 5px 2px; }
	.sx-plugin .g7-inner .gcell { font-size: 16px; padding: 5px 2px; }
	.sx-plugin .kqh .t1 { font-size: 14px; }
	.sx-plugin .dtab { padding: 7px 4px; font-size: 12.5px; }
	.sx-plugin .mn-tbl thead th { font-size: 13px; }
	.sx-plugin .dd-wrap .dd-tbl td, .sx-plugin .dd-wrap .dd-tbl th { font-size: 14px; padding: 5px 6px; }
}