/*
Theme Name:  XoSo Theme
Theme URI:   https://xoso.site
Description: Theme kết quả xổ số — markup theo cấu trúc az24, dùng trực tiếp stylesheet của az24 (tự dò URL), file này chỉ là lớp override mỏng.
Author:      xoso.site
Version:     3.2.1
Text Domain: xoso-theme
*/

/* Logo dạng chữ (khi chưa upload logo ảnh trong Tùy biến) */
.logo .txtlogo {
	display: inline-block;
	font-size: 34px;
	font-weight: bold;
	color: #ef3242;
	letter-spacing: -1px;
	text-decoration: none;
	line-height: 50px;
}
.logo .txtlogo:hover { color: #c9202e; text-decoration: none; }

/* Không dùng menu mobile JS của az24 -> luôn hiện menu ngang */
.nav.nav-pc { display: block !important; }
.nav.nav-mobi, #menu-mobile-backdrop { display: none !important; }
@media (max-width: 768px) {
	.nav-pc ul { display: flex; flex-wrap: wrap; }
	.nav-pc li a { padding: 8px 10px; font-size: 13px; }
}

/* Thông báo lỗi khi không cào được dữ liệu */
.kqxs-error {
	background: #fff3f3;
	border: 1px solid #e0b4b4;
	color: #a33;
	padding: 10px 12px;
	margin: 8px 0;
	border-radius: 3px;
}

/* Dự phòng tối thiểu khi CSS az24 không tải được: bảng vẫn đọc được */
.kqxs-scraped table { width: 100%; border-collapse: collapse; }
.kqxs-scraped td, .kqxs-scraped th { border: 1px solid #e5e5e5; padding: 5px 7px; text-align: center; }

/* Bài viết WordPress (az24 không có blog nên tự style nhẹ) */
.col-l article.box { margin-bottom: 15px; }
.col-l article.box h1, .col-l article.box h2 { margin-top: 0; }

/* Bảo hiểm menu ngang: ép flex bất kể CSS ngoài, khớp nhìn az24 */
#nav-hozital {
	display: flex !important;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
#nav-hozital > li { float: left; list-style: none; }
#nav-hozital > li > a {
	display: block;
	padding: 11px 16px;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 14px;
}
#nav-hozital > li > a:hover { background: #c9202e; }
.nav.nav-pc { background: #ef3242; }

/* Menu con sổ xuống (bảo hiểm nếu CSS az24 không xử lý hover) */
#nav-hozital > li { position: relative; }
#nav-hozital .menu-c2 {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 999;
	min-width: 190px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid #e0e0e0;
	box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
#nav-hozital > li:hover > .menu-c2 { display: block; }
#nav-hozital .menu-c2 li { float: none; border-bottom: 1px solid #f2f2f2; }
#nav-hozital .menu-c2 li:last-child { border-bottom: 0; }
#nav-hozital .menu-c2 li a {
	display: block;
	padding: 9px 14px;
	color: #333;
	font-weight: normal;
	text-transform: none;
	font-size: 14px;
}
#nav-hozital .menu-c2 li a:hover { background: #fff5f5; color: #ef3242; }

/* Breadcrumb */
.breadcrumb { padding: 8px 0; font-size: 13px; }
.breadcrumb a { color: #1a4b8c; }

/* Tab 3 miền trang sổ kết quả */
.so-tabs { display: flex; border-bottom: 2px solid #ef3242; margin: 10px 0 0; }
.so-tabs a {
	flex: 1;
	text-align: center;
	padding: 9px 6px;
	background: #f4f4f4;
	color: #333;
	font-weight: bold;
	text-decoration: none;
}
.so-tabs a.active, .so-tabs a:hover { background: #ef3242; color: #fff; }

/* Dãy link N ngày */
.so-days { padding: 10px 4px; line-height: 2.1; }
.so-days a {
	display: inline-block;
	padding: 1px 8px;
	margin: 0 2px;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
	color: #1a4b8c;
	text-decoration: none;
	font-size: 13px;
}
.so-days a.active, .so-days a:hover { background: #ef3242; border-color: #ef3242; color: #fff; }

/* Nút "Xem thêm" (button az24 đã đổi thành span) */
a .az-button, span.az-button {
	display: inline-block;
	background: #ef3242;
	color: #fff;
	padding: 8px 26px;
	border-radius: 4px;
	font-weight: bold;
	font-size: 14px;
	margin: 6px 0;
}
a:hover .az-button { background: #c9202e; }
.list-html-link { padding-left: 20px; }

/* Tường thuật trực tiếp */
.xoso-live-note {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff5f5;
	border: 1px solid #f3c2c2;
	color: #c00;
	font-weight: bold;
	font-size: 13px;
	padding: 7px 12px;
	margin: 8px 0 4px;
	border-radius: 4px;
}
.xoso-live-note .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ef3242;
	animation: xoso-pulse 1s infinite;
}
@keyframes xoso-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .35; transform: scale(.75); }
}
.xoso-pending { min-width: 34px; }
.xoso-pending::after {
	content: "···";
	color: #ef3242;
	animation: xoso-blink 1s infinite;
	font-weight: bold;
}
@keyframes xoso-blink {
	0%, 100% { opacity: .25; }
	50% { opacity: 1; }
}

/* Thanh công cụ lọc số + soi đuôi (JS riêng của theme) */
.xoso-ctl {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	background: #fdf0c9;
	border: 1px solid #f0ddab;
	padding: 6px 10px;
	margin: 0 0 8px;
}
.xoso-ctl .mode b {
	display: inline-block;
	padding: 3px 12px;
	margin-right: 4px;
	border-radius: 12px;
	cursor: pointer;
	font-size: 13px;
	color: #333;
	user-select: none;
}
.xoso-ctl .mode b.active { background: #ef3242; color: #fff; }
.xoso-digits b {
	display: inline-block;
	width: 26px;
	height: 26px;
	line-height: 24px;
	text-align: center;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 50%;
	margin-left: 4px;
	cursor: pointer;
	font-size: 13px;
	user-select: none;
}
.xoso-digits b:hover, .xoso-digits b.lock {
	background: #ef3242;
	border-color: #ef3242;
	color: #fff;
}
.xoso-hl {
	background: #ffe08a !important;
	color: #c00 !important;
	border-radius: 4px;
}
@media (max-width: 700px) {
	.xoso-ctl { justify-content: center; }
	.xoso-digits b { width: 24px; height: 24px; line-height: 22px; margin-left: 2px; }
}

/* ---------- Menu mobile: hiển thị thường trực như desktop ---------- */
.xoso-burger { display: none; }
@media (max-width: 768px) {
	/* Ép hiện + ép MÀU: az24 đổi nền vùng nav thành trắng trên mobile,
	   chữ trắng của mình thành tàng hình -> khóa cứng nền đỏ chữ trắng. */
	#nav, #nav .nav-pc {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		position: static !important;
		transform: none !important;
		left: auto !important;
		right: auto !important;
		background: #ef3242 !important;
	}
	/* === Menu mobile: dropdown nhỏ gọn === */
	html body .wrapper header .xoso-burger,
	.xoso-burger {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 4px;
		flex-direction: column;
		visibility: visible !important;
		opacity: 1 !important;
		position: absolute !important;
		right: 8px !important;
		top: 8px !important;
		width: 36px !important;
		height: 36px !important;
		background: #ef3242 !important;
		border: 0 !important;
		border-radius: 6px !important;
		cursor: pointer;
		padding: 0 !important;
		z-index: 99999 !important;
		transform: none !important;
	}
	.xoso-burger span {
		display: block; width: 18px; height: 2px;
		background: #fff; border-radius: 2px;
		transition: transform .2s, opacity .15s;
	}
	.xoso-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.xoso-burger.is-open span:nth-child(2) { opacity: 0; }
	.xoso-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	/* Nav container */
	#nav, #nav .nav-pc {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		position: static !important;
		transform: none !important;
		background: transparent !important;
	}

	/* Menu ẩn mặc định, xổ xuống khi bấm */
	#nav-hozital {
		display: none !important;
		position: absolute;
		top: 100%;
		right: 8px;
		left: 8px;
		margin: 0 !important;
		padding: 6px 0 !important;
		background: #fff !important;
		border: 1px solid #ddd;
		border-radius: 8px;
		box-shadow: 0 4px 16px rgba(0,0,0,.12);
		z-index: 99998;
		list-style: none;
	}
	body.xoso-menu-open #nav-hozital {
		display: block !important;
	}
	#nav-hozital > li {
		float: none; width: 100%;
		border: 0; background: transparent !important;
	}
	#nav-hozital > li > a {
		display: block !important;
		padding: 10px 16px !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		color: #333 !important;
		text-transform: none !important;
		background: transparent !important;
		visibility: visible !important;
		opacity: 1 !important;
		border-bottom: 1px solid #f0f0f0;
	}
	#nav-hozital > li:last-child > a { border-bottom: 0; }
	#nav-hozital > li > a:hover,
	#nav-hozital > li > a:active {
		background: #fff5f5 !important;
		color: #ef3242 !important;
		text-decoration: none;
	}
	#nav-hozital .menu-c2 { display: none !important; }

	/* nav cần relative để dropdown neo đúng */
	#nav { position: relative !important; }
}

/* Mobile: az24 ghim cố định header (thanh của họ cao ~50px) -> header
   của mình cao hơn nhiều nên đè lên nội dung. Ép cả chuỗi header về
   dòng chảy bình thường + xóa padding bù của họ. */
@media (max-width: 768px) {
	header, header .header, .header.top-info, .top-info, .taskbar, header .logo {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		z-index: auto !important;
		transform: none !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
	}
	body { padding-top: 0 !important; margin-top: 0 !important; }
	.content, #content { padding-top: 0 !important; margin-top: 0 !important; }
}

/* Mobile v2: thắng cuộc chiến độ đặc hiệu — prefix html body .wrapper
   (inline style trên thẻ <header> trong header.php là chốt chặn cuối). */
@media (max-width: 768px) {
	html body .wrapper > header,
	html body .wrapper header .main,
	html body .wrapper .top-info,
	html body .wrapper .taskbar,
	html body .wrapper header .logo {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		z-index: auto !important;
	}
	html body,
	html body .wrapper,
	html body .content,
	html body #content {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}
}

/* Neo header trên mobile */
@media (max-width: 768px) {
	html body .wrapper .top-info { position: relative !important; }
}