/* ==========================================================================
   XS Thống Kê
   ========================================================================== */

:root {
	/* Màu chủ đạo — được ghi đè từ Giao diện → Tùy biến → Màu sắc (inc/customizer.php). */
	--xs-primary: #c00;
	--xs-primary-dark: #9b1c13;   /* thanh tiêu đề */
	--xs-primary-darker: #900;    /* hover, chữ tiêu đề, link */
	--xs-primary-light: #fdf2f2;  /* nền nhạt */
	--xs-on-primary: #fff;        /* chữ trên nền màu chủ đạo */
	/* --xs-primary-text: chỉ được set khi màu chủ đạo quá sáng để làm chữ trên nền trắng. */
	--xs-special: #f40819;        /* số giải đặc biệt / nổi bật */
	--xs-footer-bg: #333;
	--xs-blue: #1f10e2;
	--xs-text: #222;
	--xs-muted: #666;
	--xs-border: #ddd;
	--xs-stripe: #f6f6f6;
	--xs-head-bg: #e8e8e8;
	--xs-bg: #f2f2f2;
	--xs-radius: 4px;
	--xs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--xs-bg);
	color: var(--xs-text);
	font: 15px/1.55 var(--xs-font);
}

a { color: var(--xs-primary-text, var(--xs-primary-darker)); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto;
	z-index: 1000; top: 8px; left: 8px;
	padding: 8px 12px; background: #fff;
}

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 12px; }

/* --------------------------------------------------------------------------
   Header & menu
   -------------------------------------------------------------------------- */
.site-header { background: #fff; border-bottom: 3px solid var(--xs-primary); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.site-title { font-size: 24px; font-weight: 800; color: var(--xs-primary-text, var(--xs-primary)); text-transform: uppercase; }
.site-title:hover { text-decoration: none; }
.site-description { margin: 0; color: var(--xs-muted); font-size: 13px; }

.main-nav { background: var(--xs-primary); }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > .container > ul { display: flex; flex-wrap: wrap; }
.main-nav li { position: relative; }
.main-nav a { display: block; padding: 11px 16px; color: var(--xs-on-primary); font-weight: 700; font-size: 14px; white-space: nowrap; }
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current-menu-parent > a { background: var(--xs-primary-darker); text-decoration: none; }
.main-nav .menu-item-has-children > a::after { content: ""; display: inline-block; margin-left: 6px; vertical-align: 2px; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; }

/* Dropdown */
.main-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; padding: 4px 0; background: #fff; border: 1px solid var(--xs-border); border-top: 3px solid var(--xs-primary-darker); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); z-index: 50; }
.main-nav .sub-menu a { color: var(--xs-text); font-weight: 500; padding: 8px 16px; }
.main-nav .sub-menu a:hover,
.main-nav .sub-menu .current-menu-item > a { background: var(--xs-primary-light); color: var(--xs-primary-text, var(--xs-primary)); }
@media (min-width: 769px) {
	.main-nav li:hover > .sub-menu,
	.main-nav li:focus-within > .sub-menu { display: block; }
}
.sub-toggle { display: none; }

.menu-toggle { display: none; width: 42px; height: 38px; border: 1px solid var(--xs-border); background: #fff; border-radius: var(--xs-radius); cursor: pointer; }
.menu-toggle__bar,
.menu-toggle__bar::before,
.menu-toggle__bar::after { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--xs-primary); position: relative; content: ""; }
.menu-toggle__bar::before { position: absolute; top: -6px; }
.menu-toggle__bar::after { position: absolute; top: 6px; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.site-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding-top: 16px; padding-bottom: 24px; }
.site-main { min-width: 0; }

.xs-page,
.xs-list-item { background: #fff; border: 1px solid var(--xs-border); padding: 14px; margin-bottom: 16px; }
.xs-page__title { padding: 10px 14px; margin: -14px -14px 14px; background: var(--xs-primary-dark); color: var(--xs-on-primary); font-size: 20px; line-height: 1.35; }
.xs-page__meta { color: var(--xs-muted); font-size: 13px; margin: 0 0 8px; }
.xs-list-item__title { margin: 0 0 4px; font-size: 18px; }

.entry-content > * { max-width: 100%; }
.entry-content h2 { font-size: 19px; color: var(--xs-primary-text, var(--xs-primary-darker)); }
.entry-content h3 { font-size: 17px; }
.entry-content table:not(.xs-prediction):not([class*="table"]) { border-collapse: collapse; width: 100%; }
.entry-content table:not(.xs-prediction):not([class*="table"]) td,
.entry-content table:not(.xs-prediction):not([class*="table"]) th { border: 1px solid var(--xs-border); padding: 6px 8px; }

/* Sidebar */
.site-sidebar .widget { background: #fff; border: 1px solid var(--xs-border); margin-bottom: 16px; }
.site-sidebar .xs-side-nav { padding: 0; }

/* Widget của WordPress (block widgets mặc định khi cài WP / chuyển từ block theme, và widget cổ điển):
   đồng bộ kiểu với hộp menu — thanh tiêu đề màu chủ đạo, danh sách có », ô tìm kiếm gọn. */
.site-sidebar .widget:not(.xs-side-nav) { padding: 12px; }
.site-sidebar .widget:not(.xs-side-nav) > :last-child { margin-bottom: 0; }
.site-sidebar .widget:not(.xs-side-nav) > .xs-box__title,
.site-sidebar .widget:not(.xs-side-nav) > :is(h2, h3, h4):first-child,
.site-sidebar .widget:not(.xs-side-nav) .wp-block-group > :is(h2, h3, h4):first-child,
.site-sidebar .widget:not(.xs-side-nav) .wp-block-group__inner-container > :is(h2, h3, h4):first-child,
.site-sidebar .wp-block-search__label {
	display: block;
	width: auto;
	margin: -12px -12px 12px;
	padding: 12px 16px;
	background: var(--xs-primary-dark);
	color: var(--xs-on-primary);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}
.site-sidebar .widget:not(.xs-side-nav) :is(ul, ol) { list-style: none; margin: 0 -12px -12px; padding: 0; }
.site-sidebar .widget:not(.xs-side-nav) li { padding: 8px 12px; border-bottom: 1px solid #eee; margin: 0; }
.site-sidebar .widget:not(.xs-side-nav) li:last-child { border-bottom: 0; }
.site-sidebar .widget:not(.xs-side-nav) li a { color: var(--xs-text); }
.site-sidebar .widget:not(.xs-side-nav) li a:hover { color: var(--xs-primary-text, var(--xs-primary)); }
.site-sidebar .widget:not(.xs-side-nav) li > a:first-child::before { content: "» "; color: var(--xs-primary-text, var(--xs-primary)); font-weight: 700; }
.site-sidebar .widget:not(.xs-side-nav) li :is(ul, ol) { margin: 6px 0 -8px 12px; }
.site-sidebar .widget:not(.xs-side-nav) li li { border: 0; padding: 4px 0; }
.site-sidebar .wp-block-latest-comments__comment { line-height: 1.5; }
.site-sidebar .wp-block-latest-comments__comment article,
.site-sidebar .wp-block-latest-comments__comment-meta { margin: 0; }
.site-sidebar .wp-block-latest-comments__comment-author { font-weight: 700; }
.site-sidebar .wp-block-latest-comments__comment-link { color: var(--xs-primary-text, var(--xs-primary)) !important; }

/* Ô tìm kiếm (block + cổ điển) */
.site-sidebar .wp-block-search__inside-wrapper,
.site-sidebar .search-form { display: flex; gap: 6px; border: 0; padding: 0; }
.site-sidebar .search-form label { flex: 1; min-width: 0; }
.site-sidebar :is(.wp-block-search__input, .search-field) {
	flex: 1; min-width: 0; width: 100%; height: 38px; margin: 0; padding: 0 10px;
	border: 1px solid var(--xs-border); border-radius: var(--xs-radius); font: inherit; background: #fff;
}
.site-sidebar :is(.wp-block-search__input, .search-field):focus { outline: 2px solid var(--xs-primary); outline-offset: -1px; }
.site-sidebar :is(.wp-block-search__button, .search-submit) {
	height: 38px; margin: 0; padding: 0 14px; border: 0; border-radius: var(--xs-radius);
	background: var(--xs-primary); color: var(--xs-on-primary); font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.site-sidebar :is(.wp-block-search__button, .search-submit):hover { background: var(--xs-primary-darker); }
/* --- Hộp menu "Thống kê & Kết quả" ---------------------------------------- */
.side-menu { list-style: none; margin: 0; padding: 4px 0 14px !important; }
.side-menu li { margin: 0; }
.side-menu a:hover { text-decoration: none; }

/* Mục cấp 1 không có nhóm (Trang chủ...): một dòng có icon + mũi tên › */
.side-menu > li:not(.menu-item-has-children) > a {
	display: flex; align-items: center; gap: 10px;
	margin: 8px 12px 2px; padding: 9px 12px;
	border: 1px solid var(--xs-border); border-radius: 8px;
	color: var(--xs-text); font-weight: 600; background: #fafafa;
	transition: background .15s, border-color .15s, color .15s;
}
.side-menu > li:not(.menu-item-has-children) > a::after { content: "›"; margin-left: auto; font-size: 20px; line-height: 1; color: var(--xs-muted); }
.side-menu > li:not(.menu-item-has-children) > a:hover { background: var(--xs-primary-light); border-color: var(--xs-primary); color: var(--xs-primary-text, var(--xs-primary)); }
.side-menu > li:not(.menu-item-has-children).current-menu-item > a { background: var(--xs-primary); border-color: var(--xs-primary); color: var(--xs-on-primary); }
.side-menu > li:not(.menu-item-has-children).current-menu-item > a::after { color: inherit; }
/* Icon ngôi nhà cho Trang chủ (mask => tự ăn theo màu chữ) */
.side-menu > .menu-item-home > a::before {
	content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5h3V21h5.5v-6h3v6H19v-9.5h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.side-menu > .menu-item-home:not(.current-menu-item) > a::before { background: var(--xs-primary-text, var(--xs-primary)); }

/* Nhóm: tên nhóm dạng nhãn nhỏ + đường kẻ, các trang con xếp lưới 3 cột bằng nhau */
.side-menu > .menu-item-has-children { padding: 14px 12px 0; }
.side-menu > .menu-item-has-children > a {
	display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
	font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: var(--xs-primary-text, var(--xs-primary-darker)); pointer-events: none;
}
.side-menu > .menu-item-has-children > a::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--xs-primary); flex: none; }
.side-menu > .menu-item-has-children > a::after { content: ""; flex: 1; height: 1px; background: var(--xs-border); }
.side-menu .sub-menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.side-menu .sub-menu li { display: flex; } /* ô cùng hàng cao bằng nhau kể cả khi nhãn xuống dòng */
.side-menu .sub-menu a {
	flex: 1; display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 4px 6px;
	border: 1px solid var(--xs-border); border-radius: 6px; background: #fafafa;
	color: var(--xs-text); font-size: 13px; line-height: 1.25; text-align: center;
	transition: background .15s, border-color .15s, color .15s;
}
.side-menu .sub-menu a:hover { background: var(--xs-primary-light); border-color: var(--xs-primary); color: var(--xs-primary-text, var(--xs-primary)); }
.side-menu .sub-menu .current-menu-item > a { background: var(--xs-primary); border-color: var(--xs-primary); color: var(--xs-on-primary); font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }

/* Footer */
.site-footer { background: var(--xs-footer-bg); color: #ccc; padding: 18px 0; font-size: 13px; }
.site-footer a { color: #fff; }
.site-footer ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-footer__copy { margin: 0; }
.site-footer__copy p { margin: 0 0 4px; }
.site-footer__copy p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Hộp tiêu đề đỏ (dùng cho bảng soi cầu & widget)
   -------------------------------------------------------------------------- */
.xs-box { background: #fff; border: 1px solid var(--xs-primary-dark); margin-bottom: 16px; }
.xs-box .xs-box__title,
.entry-content .xs-box__title { margin: 0; padding: 12px 16px; background: var(--xs-primary-dark); color: var(--xs-on-primary); font-size: 18px; font-weight: 700; }

/* Bảng soi cầu trang chủ */
.xs-prediction { width: 100%; border-collapse: collapse; }
.xs-prediction td { padding: 12px 14px; border-bottom: 1px solid #eee; font-size: 17px; vertical-align: middle; }
.xs-prediction tr:nth-child(even) td { background: #f7f7f7; }
.xs-prediction__name { width: 52%; color: #444; border-right: 1px solid #eee; }
.xs-prediction__value { color: var(--xs-special); font-weight: 700; font-size: 19px !important; }
.xs-flower { color: var(--xs-primary-text, var(--xs-primary)); }
.xs-box__note { margin: 0; padding: 12px 16px; color: #033; font-size: 13px; font-style: italic; }

/* --------------------------------------------------------------------------
   Dữ liệu crawl (.xs-data) — tái hiện kiểu bảng gốc
   -------------------------------------------------------------------------- */
.xs-data { margin: 0 0 16px; font-size: 14px; }
.xs-data > * + * { margin-top: 0; }
.xs-data h2 { font-size: 16px; margin: 14px 0 6px; color: var(--xs-primary-text, var(--xs-primary-darker)); }
.xs-data h3 { font-size: 15px; margin: 12px 0 6px; }
.xs-data p { margin: 8px 0; }
.xs-data ul { list-style: none; padding: 0; }
.xs-data .block { margin-bottom: 14px; }
.xs-data .block-main-content { margin-bottom: 10px; }
.xs-data .xs-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; }
.xs-data__updated,
.xs-data__credit { color: var(--xs-muted); font-size: 12px; font-style: italic; margin: 4px 0 0; text-align: right; }

/* Bảng chung */
.xs-data .table { width: 100%; border-collapse: collapse; background: #fff; margin: 0; }
.xs-data .table td,
.xs-data .table th { border: 1px solid var(--xs-border); padding: 6px 8px; vertical-align: middle; }
.xs-data .table-striped tr:nth-child(even) td { background: var(--xs-stripe); }
.xs-data .text-center,
.xs-data .text-center td,
.xs-data .text-center th { text-align: center; }
.xs-data .text-left { text-align: left; }
.xs-data th,
.xs-data .bgth th { background: var(--xs-head-bg); color: var(--xs-primary-text, var(--xs-primary-darker)); text-align: center; font-weight: 700; }

/* Tiêu đề từng ngày ("XSMB » XSMB Thứ 7 » ...") */
.xs-data .list-link { background: var(--xs-primary-light); border-left: 4px solid var(--xs-primary); padding: 6px 10px; margin: 16px 0 6px; }
.xs-data .list-link h2,
.xs-data .class-title-list-link { margin: 0; font-size: 15px; color: var(--xs-primary-text, var(--xs-primary-darker)); }
.xs-data .list-link span { margin: 0 4px; }
.xs-data .border { border-bottom: 1px solid var(--xs-border); margin-bottom: 6px; }
.xs-data .border h2 { display: inline; }
.xs-data .title-h2,
.xs-data .title-h2-not-border,
.xs-data .text-thongke h2 { font-size: 16px; color: #00f; margin: 6px 0 8px; font-weight: 400; }

/* Kết quả XSMB */
.xs-data .table-xsmb td:first-child { width: 64px; text-align: center; font-weight: 700; color: var(--xs-muted); white-space: nowrap; }
.xs-data .table-xsmb td + td { text-align: center; }
.xs-data .div-horizontal { display: inline-block; padding: 0 8px; text-align: center; }
.xs-data .number-black-bold { color: #000; font-size: 22px; font-weight: 700; line-height: 34px; }
.xs-data .special-prize-lg { color: var(--xs-special); font-size: 30px; font-weight: 700; line-height: 38px; }
.xs-data .special-prize-sm { color: var(--xs-special); font-size: 24px; font-weight: 700; line-height: 34px; }
.xs-data .special-prize-lg-25 { color: var(--xs-special); font-size: 24px; font-weight: 700; }
.xs-data .madb { display: flex; flex-wrap: wrap; justify-content: space-around; width: 100%; }
.xs-data .special-code { color: var(--xs-blue); font-size: 15px; font-weight: 700; }

/* Kết quả XSMN / XSMT (nhiều đài) */
.xs-data .table-xsmn { table-layout: fixed; min-width: 420px; }
.xs-data .table-xsmn th:first-child,
.xs-data .table-xsmn td:first-child { width: 56px; }
.xs-data .table-xsmn td { text-align: center; }
.xs-data .table-xsmn .div-horizontal,
.xs-data .table-xsmn .number-black-bold,
.xs-data .table-xsmn .special-prize-lg,
.xs-data .table-xsmn .special-prize-sm { display: block; font-size: 19px; line-height: 28px; }
.xs-data .table-xsmn .special-prize-lg { font-size: 22px; }
.xs-data .tn_prize { font-weight: 700; color: var(--xs-muted); }
.xs-data .color_prize,
.xs-data .color_prize_tr,
.xs-data .fontDB,
.xs-data .fontDB2 { color: var(--xs-special); font-weight: 700; }

/* Bảng loto (Đầu | Loto) */
.xs-data .table-loto { margin-top: 4px; }
.xs-data .table-loto td:first-child,
.xs-data .table-loto th:first-child { width: 60px; text-align: center; font-weight: 700; color: var(--xs-primary-text, var(--xs-primary-darker)); }
.xs-data .table-loto b,
.xs-data .table-loto strong { color: var(--xs-special); }
.xs-data .view-loto p,
.xs-data .padding10 { font-weight: 700; color: var(--xs-primary-text, var(--xs-primary-darker)); margin: 10px 0 4px; }
.xs-data .text-blue,
.xs-data .link-pad-left { color: var(--xs-blue); }

/* Bảng thống kê */
.xs-data .table-lanxh td:first-child { font-weight: 700; white-space: nowrap; }
.xs-data .table-lanxh td { line-height: 1.6; }
.xs-data .text-blue-bold { color: var(--xs-blue); font-weight: 700; }
.xs-data .b-blue { color: #00f; font-weight: 700; }
.xs-data .b-red,
.xs-data .text-red,
.xs-data .color-reb { color: var(--xs-primary-text, var(--xs-primary)); font-weight: 700; }
.xs-data .text-bold { font-weight: 700; }
.xs-data .td-highlight td { min-width: 48px; }
.xs-data .tr-highlight td,
.xs-data td.highlight { background: #fff6d6 !important; }
.xs-data .div-heading { font-weight: 700; padding: 6px; background: var(--xs-head-bg); }
.xs-data .thongkedau tr:last-child td,
.xs-data .thongkedau tbody tr:last-child td { font-weight: 700; background: var(--xs-primary-light); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.site-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
	.menu-toggle { display: block; }
	.main-nav { display: none; }
	.main-nav.is-open { display: block; }
	.main-nav > .container { padding: 0; }
	.main-nav > .container > ul { flex-direction: column; }
	.main-nav a { border-top: 1px solid rgba(255, 255, 255, .15); }
	.main-nav .menu-item-has-children > a { padding-right: 56px; }
	.main-nav .menu-item-has-children > a::after { display: none; }
	.main-nav .sub-menu { position: static; box-shadow: none; border: 0; padding: 0; background: var(--xs-primary-dark); }
	.main-nav .sub-menu a { color: var(--xs-on-primary); padding-left: 32px; }
	.main-nav .sub-menu a:hover,
	.main-nav .sub-menu .current-menu-item > a { background: var(--xs-primary-darker); color: var(--xs-on-primary); }
	.main-nav .sub-open > .sub-menu { display: block; }
	.sub-toggle { display: block; position: absolute; top: 0; right: 0; width: 48px; height: 43px; border: 0; border-left: 1px solid rgba(255, 255, 255, .15); background: transparent; color: var(--xs-on-primary); cursor: pointer; }
	.sub-toggle::before { content: ""; display: inline-block; border: 5px solid transparent; border-top-color: currentColor; border-bottom: 0; transition: transform .15s; }
	.sub-open > .sub-toggle::before { transform: rotate(180deg); }

	.xs-page { padding: 10px; }
	.xs-page__title { margin: -10px -10px 12px; font-size: 18px; }
	.xs-prediction td { padding: 10px; font-size: 15px; }
	.xs-prediction__value { font-size: 17px !important; }

	.xs-data .number-black-bold { font-size: 18px; line-height: 30px; }
	.xs-data .special-prize-lg { font-size: 24px; }
	.xs-data .special-prize-sm { font-size: 20px; }
	.xs-data .table-xsmn .div-horizontal,
	.xs-data .table-xsmn .number-black-bold { font-size: 16px; line-height: 24px; }
	.xs-data .table td,
	.xs-data .table th { padding: 5px; }
}