/*
Theme Name: 8Xbet Home
Theme URI: https://example.com/8xbet-home
Author: 8Xbet
Description: Theme trang chủ tĩnh cho website 8Xbet. Toàn bộ nội dung trang chủ (menu, banner, trò chơi nổi bật kèm link bài viết, khuyến mãi, bài viết SEO, tin tức, FAQ, footer) chỉnh sửa tập trung trong file assets/js/config.js - không cần đụng vào PHP. Responsive chuẩn mobile / tablet / desktop.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eightxbet-home
Tags: one-column, custom-menu, featured-images, translation-ready
*/

/*
 * Tailwind CSS dùng bản build tĩnh (assets/css/tailwind.min.css — build bằng CLI, xem tailwind.config.js).
 * File này chứa thông tin theme (bắt buộc với WordPress) + vài class bổ trợ bên dưới.
 */

/* Các class bổ trợ cho nội dung bài viết (prose tối giản) */
.xb-prose p { margin-bottom: 1.25rem; }
.xb-prose p:last-child { margin-bottom: 0; }
.xb-prose strong { color: #0f172a; font-weight: 700; }

/* Khôi phục list (Tailwind Preflight đã reset list-style + padding, khiến ul/ol mất dấu chấm/số) */
.xb-prose ul { list-style: disc; padding-left: 1.5rem; margin: 1rem 0; }
.xb-prose ol { list-style: decimal; padding-left: 1.5rem; margin: 1rem 0; }
.xb-prose li { margin: 0.5rem 0; }
.xb-prose li::marker { color: #0ea5e9; }

/* Khôi phục kiểu heading cho bài SEO (Tailwind Preflight reset mất kiểu mặc định) */
.xb-prose h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #0f172a;
	margin: 2.5rem 0 1.5rem;
	position: relative;
	padding-bottom: 0.5rem;
}
.xb-prose h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50%;
	height: 4px;
	background: #0ea5e9;
	border-radius: 9999px;
	opacity: 0.7;
}
.xb-prose h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1e293b;
	margin: 2rem 0 1rem;
	padding: 0.5rem 1rem;
	border-left: 4px solid #0ea5e9;
	background: #f8fafc;
	border-radius: 0 0.5rem 0.5rem 0;
}

/* Ẩn thanh cuộn cho slider game */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Bảng trong bài SEO: responsive + dễ đọc (4 cột khuyến mãi dễ tràn trên mobile) */
.xb-prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; line-height: 1.6; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.xb-prose table tbody { display: table; width: 100%; }
.xb-prose th, .xb-prose td { border: 1px solid #e2e8f0; padding: 0.65rem 0.75rem; text-align: left; vertical-align: top; }
.xb-prose thead th, .xb-prose tr:first-child td { background: #f8fafc; font-weight: 700; color: #0f172a; white-space: nowrap; }
.xb-prose tr:nth-child(even) td { background: #f8fafc; }
.xb-prose td p { margin: 0.35rem 0; }
.xb-prose td p:first-child { margin-top: 0; }
.xb-prose td p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
	.xb-prose table { font-size: 0.82rem; }
	.xb-prose th, .xb-prose td { padding: 0.5rem 0.6rem; }
}

/* Menu WordPress trong header/footer: bỏ list-style mặc định */
.xb-menu, .xb-menu ul { list-style: none; margin: 0; padding: 0; }

/* ── Khối văn bản soạn thảo trong footer (mô tả + khối phụ cột chứng nhận) ──
   Nền footer tối nên link phải tự tô màu; Tailwind bản lược không có prose. */
.xb-footer-rich a { color: #38bdf8; text-decoration: underline; text-underline-offset: 2px; }
.xb-footer-rich a:hover { color: #7dd3fc; }
.xb-footer-rich p { margin: 0 0 0.75rem; }
.xb-footer-rich p:last-child { margin-bottom: 0; }
.xb-footer-rich strong, .xb-footer-rich b { color: #e2e8f0; }
.xb-footer-rich ul, .xb-footer-rich ol { margin: 0 0 0.75rem 1.15rem; padding: 0; }
.xb-footer-rich ul { list-style: disc; }
.xb-footer-rich ol { list-style: decimal; }
.xb-footer-rich li { margin-bottom: 0.25rem; }

/* ── Bố cục footer 4 cột: chia lại chiều rộng theo loại nội dung ──
   Cột chữ (giới thiệu, liên hệ) cần rộng hơn cột danh sách link. */
@media (min-width: 1024px) {
	.xb-footer-grid { grid-template-columns: 1.1fr 0.78fr 0.78fr 1.34fr; align-items: start; }
}
.xb-footer-block { margin-bottom: 2rem; }

/* Chip chứng nhận: tự co theo chữ, xuống dòng gọn thay vì lưới 3 cột lệch ô */
.xb-cert-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.xb-chip {
	display: inline-block; padding: 0.35rem 0.7rem;
	background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem;
	font-size: 0.75rem; line-height: 1.25; color: #cbd5e1; white-space: nowrap;
}

/* Nhãn độ tuổi nằm cùng hàng với vòng 18+ thay vì xếp dọc */
.xb-age { display: flex; align-items: center; gap: 0.65rem; margin-top: 1.5rem; }
.xb-age__label { font-size: 0.75rem; color: #64748b; }
.xb-age__badge {
	flex: 0 0 auto; width: 2.5rem; height: 2.5rem;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid #475569; border-radius: 9999px;
	font-weight: 700; font-size: 0.8rem; color: #94a3b8;
}

/* Khối liên hệ: giãn dòng + tăng tương phản cho dễ đọc */
.xb-footer-contact { color: #cbd5e1; line-height: 1.85; }
.xb-footer-contact a { word-break: break-word; }

/* ── Dọn style dán từ Google Docs/Word trong khối soạn thảo footer ──
   Giữ đậm/nghiêng/gạch chân, bỏ màu chữ · màu nền · font · cỡ chữ của file gốc
   để nội dung luôn ăn theo theme. */
.xb-footer-rich [style] {
	color: inherit !important;
	background-color: transparent !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	white-space: normal !important;
}
.xb-footer-rich p { margin: 0 0 0.75rem !important; }
.xb-footer-rich p:last-child { margin-bottom: 0 !important; }

/* Khối liên hệ là danh sách dòng ngắn nên khoảng cách nhỏ hơn đoạn văn */
.xb-footer-contact p { margin: 0 0 0.15rem !important; }
.xb-footer-contact p:last-child { margin-bottom: 0 !important; }

/* Link có <strong>/<b> bên trong vẫn phải mang màu link, không bị rule strong đè */
.xb-footer-rich a strong, .xb-footer-rich a b { color: inherit; }

/* ── H1 trong nội dung bài (Classic Editor) ──
   Mang chính gradient navy→brand của tiêu đề cũ nhưng KHÔNG gạch chân.
   Tiêu đề trang do theme in ra đã bỏ trong inc/home-seo.php để trang chỉ còn 1 thẻ H1. */
.xb-prose h1,
.xb-page-title {
	margin: 0 0 2.5rem;
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-align: center;
	background-image: linear-gradient(to right, #0f172a, #0ea5e9);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	border: 0;
}
/* Chữ đậm/nghiêng bên trong H1 không được cắt mạch gradient */
.xb-prose h1 b, .xb-prose h1 strong, .xb-prose h1 span,
.xb-page-title b, .xb-page-title strong, .xb-page-title span {
	color: inherit;
	-webkit-text-fill-color: inherit;
	background: none;
	font-weight: inherit;
}

/* ── Menu ngang desktop: cho phép xuống dòng để thêm mục không làm tràn ──
   Thay space-x-8 (margin) bằng gap để wrap không để lại margin lẻ. */
#site-header .xb-nav { flex-wrap: wrap; column-gap: 0.9rem; row-gap: 0; }
@media (min-width: 1280px) { #site-header .xb-nav { column-gap: 1.4rem; } }

/* ── Icon đầu gà trống cho mục menu "Đá gà" ──
   Font Awesome free không có icon con gà, nên dùng SVG tự vẽ đặt qua CSS mask:
   hình được tô bằng currentColor nên vẫn đổi màu và hover y hệt icon FA khác.
   Cách dùng: ô Icon của mục menu điền "xb-icon-rooster" thay cho "fa-...". */
.xb-icon-rooster {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M0.8%2012.6L7.6%2010C7.8%208.4%208.4%207.2%209.4%206.4L9%202L10.9%205.2L11.8%201L13.6%204.6L14.8%201.4L16%205.4L16.9%203.6L17.6%208.2C18.6%209.8%2019.2%2011.6%2019.2%2013.4C19.2%2016.8%2018%2019.8%2015.8%2021.8C13.8%2021.4%2012.2%2020.5%2011.6%2019C11.2%2020.6%209.8%2021.2%208.8%2020.2C8%2019.4%208%2018.2%208.2%2017.2C7.6%2018.2%206.2%2018.2%205.8%2017C5.4%2015.8%206%2014.8%206.8%2014.2L3.6%2014Z%20M9.1%2010.8a0.8%200.8%200%201%200%201.6%200a0.8%200.8%200%201%200%20-1.6%200Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M0.8%2012.6L7.6%2010C7.8%208.4%208.4%207.2%209.4%206.4L9%202L10.9%205.2L11.8%201L13.6%204.6L14.8%201.4L16%205.4L16.9%203.6L17.6%208.2C18.6%209.8%2019.2%2011.6%2019.2%2013.4C19.2%2016.8%2018%2019.8%2015.8%2021.8C13.8%2021.4%2012.2%2020.5%2011.6%2019C11.2%2020.6%209.8%2021.2%208.8%2020.2C8%2019.4%208%2018.2%208.2%2017.2C7.6%2018.2%206.2%2018.2%205.8%2017C5.4%2015.8%206%2014.8%206.8%2014.2L3.6%2014Z%20M9.1%2010.8a0.8%200.8%200%201%200%201.6%200a0.8%200.8%200%201%200%20-1.6%200Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	vertical-align: -0.18em;
}
.xb-icon-rooster::before { content: none; }
/* Trong drawer mobile các icon nằm trong cột w-5 nên giữ đúng bề rộng đó */
#mobile-menu .xb-icon-rooster { width: 1.25rem; height: 1.25rem; }