/*
Theme Name: E19
Theme URI: https://e19.tech
Author: e19.tech
Description: Theme riêng, nhẹ cho e19.tech: chỉ dùng Page, không jQuery, không JS riêng. Font Kanit (tiêu đề) + Noto Sans Thai (chữ đọc) đặt sẵn trong assets/fonts. Màu chính: xanh tím #3423A6 và vàng #FFD000, nền ảnh assets/bg-e19.webp, khung nội dung tối dịu mắt.
Version: 1.8.5
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: e19
*/

/* ===== 0. Font =====
 * File .woff2 trong assets/fonts (giấy phép OFL, xem assets/fonts/OFL.txt).
 * Mỗi font tách 2 file: chữ Thái và chữ Latin/số. Trình duyệt chỉ tải file có ký tự dùng trên trang.
 * 2 file chữ Thái được tải trước (preload) trong functions.php.
 */
@font-face {
	font-family: "E19 Kanit";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/kanit-600-thai.woff2") format("woff2");
	unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
	font-family: "E19 Kanit";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/kanit-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "E19 Noto Sans Thai";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/noto-sans-thai-400-thai.woff2") format("woff2");
	unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
	font-family: "E19 Noto Sans Thai";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/noto-sans-thai-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "E19 Noto Sans Thai";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/noto-sans-thai-600-thai.woff2") format("woff2");
	unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
	font-family: "E19 Noto Sans Thai";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/noto-sans-thai-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Font dự phòng trong lúc chờ tải font: Leelawadee UI có sẵn trên Windows, chỉnh cỡ cho
 * chiều rộng chữ bằng font thật để dòng chữ không xê dịch khi đổi font.
 * Số đo trên các trang của site. Máy không có Leelawadee UI thì bỏ qua, dùng font hệ thống. */
@font-face {
	font-family: "E19 Body Fallback";
	font-weight: 400;
	src: local("Leelawadee UI"), local("LeelawadeeUI");
	size-adjust: 104.6%;
	ascent-override: 101.43%;
	descent-override: 43.02%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "E19 Body Fallback";
	font-weight: 600;
	src: local("Leelawadee UI Bold"), local("LeelawadeeUI-Bold");
	size-adjust: 95.5%;
	ascent-override: 111.1%;
	descent-override: 47.12%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "E19 Head Fallback";
	font-weight: 600;
	src: local("Leelawadee UI Bold"), local("LeelawadeeUI-Bold");
	size-adjust: 94.6%;
	ascent-override: 116.28%;
	descent-override: 41.75%;
	line-gap-override: 0%;
}

/* ===== 1. Màu, chữ, khoảng cách ===== */
:root {
	color-scheme: dark;

	--blue: #3423a6;
	--blue-900: #1d1366;
	--blue-50: #f1effd;
	--violet: #6d28d9;
	--violet-2: #7c3aed;
	--bg-deep: #1d1366;
	--gold: #ffd000;
	--gold-600: #e6bb00;
	--gold-50: #fff8d6;

	--ink: #dcd8f0;
	--muted: #a8a2cc;
	--heading: #f2cc5b;
	--link: #b9a6ff;
	--line: rgba(255, 255, 255, 0.1);
	--bg: rgba(255, 255, 255, 0.04);
	--card: #1c1653;

	--radius: 12px;
	--shadow: 0 1px 2px rgba(29, 19, 102, 0.06), 0 8px 24px rgba(29, 19, 102, 0.08);
	--shadow-card: 0 18px 48px rgba(8, 4, 40, 0.45), 0 2px 6px rgba(8, 4, 40, 0.25);
	--font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", "Leelawadee UI", Tahoma, "Helvetica Neue", Arial, sans-serif;
	--font: "E19 Noto Sans Thai", "E19 Body Fallback", var(--font-system);
	--font-head: "E19 Kanit", "E19 Head Fallback", var(--font-system);
}

/* ===== 2. Nền tảng ===== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

html {
	background: var(--bg-deep);
}

body {
	margin: 0;
	background: transparent;
	color: var(--ink);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.75;
	overflow-wrap: break-word;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--bg-deep) url("assets/bg-e19.webp") center / cover no-repeat;
}

/* Bấm link neo (hộp game trang chủ) thì cuộn mượt; máy đặt giảm chuyển động thì nhảy thẳng */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Tiêu đề, nút, menu, số liệu dùng Kanit. Chỉ có độ đậm 600 nên đặt đúng 600 để trình duyệt không tự làm đậm giả. */
h1,
h2,
h3,
h4,
.btn,
.site-title,
.main-navigation .menu a,
.stat-num,
.cat-name,
.entry-content .wp-block-table th,
.age-badge {
	font-family: var(--font-head);
	font-weight: 600;
}

strong,
b {
	font-weight: 600;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: #d6ccff;
}

:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}

.site-header :focus-visible,
.home-hero :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--gold);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	left: 8px;
	top: 8px;
	z-index: 100000;
	background: #fff;
	color: var(--blue-900);
	padding: 12px 16px;
	border-radius: 8px;
	box-shadow: var(--shadow);
	font-weight: 700;
}

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

.container-narrow {
	max-width: 880px;
}

.container-home {
	max-width: 1000px;
}

/* ===== 3. Nút ===== */
.cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: 0.9375rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-gold {
	background: var(--gold);
	color: var(--blue-900);
}

.btn-gold:hover {
	background: var(--gold-600);
	color: var(--blue-900);
}

.btn-outline {
	border-color: rgba(255, 255, 255, 0.75);
	color: #fff;
}

.btn-outline:hover {
	border-color: var(--gold);
	color: var(--gold);
}

/* ===== 4. Header ===== */
.header-bar {
	background: rgba(20, 12, 74, 0.94);
}

.header-bar-inner {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 60px;
}

.site-branding {
	flex: 0 0 auto;
	margin-right: auto;
}

/* Nút ☰ (chỉ hiện dưới 1024px) */
.menu-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
	border-color: var(--gold);
	color: var(--gold);
}

.menu-toggle .icon-close,
.menu-toggle[aria-expanded="true"] .icon-open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .icon-close {
	display: block;
}

.custom-logo-link {
	display: block;
}

.custom-logo {
	display: block;
	width: auto;
	height: 32px;
}

.site-title {
	color: var(--gold);
	font-size: 1.5rem;
	text-decoration: none;
}

.header-cta {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: 6px;
}

.header-cta .btn {
	min-height: 36px;
	padding: 0 12px;
	font-size: 0.875rem;
}

.main-navigation {
	background: linear-gradient(90deg, var(--blue) 0%, var(--violet) 100%);
	border-bottom: 3px solid var(--gold);
}

.main-navigation .container {
	padding: 0;
}

.main-navigation .menu {
	display: flex;
	margin: 0;
	padding: 0 8px;
	list-style: none;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	-webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
	mask-image: linear-gradient(to right, #000 88%, transparent);
}

.main-navigation .menu::-webkit-scrollbar {
	display: none;
}

.main-navigation .menu a {
	display: block;
	padding: 11px 10px;
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.4;
	text-decoration: none;
}

.main-navigation .menu a:hover {
	color: var(--gold);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--gold);
	box-shadow: inset 0 -3px 0 var(--gold);
}

/* Điện thoại / tablet: menu ẩn, bấm ☰ thì thả xuống ngay dưới thanh trên, chia 2 cột.
 * Class "js" do theme gắn sớm trong <head>; trình duyệt tắt JS thì menu luôn hiện. */
@media (max-width: 1023px) {
	.js .main-navigation {
		display: none;
	}

	.js .main-navigation.is-open {
		display: block;
		animation: e19-drop 0.18s ease-out;
	}

	.main-navigation .menu {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
		padding: 10px 12px 14px;
		overflow: visible;
		white-space: normal;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.main-navigation .menu a {
		padding: 11px 12px;
		border-radius: 10px;
		font-size: 1rem;
	}

	.main-navigation .menu a:hover {
		background: rgba(255, 255, 255, 0.08);
	}

	.main-navigation .current-menu-item > a,
	.main-navigation .current_page_item > a {
		background: rgba(255, 208, 0, 0.14);
		box-shadow: inset 3px 0 0 var(--gold);
	}
}

@keyframes e19-drop {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ===== 5. Trang con ===== */
.page-main {
	padding: 20px 0 48px;
}

.page-main .container {
	padding: 0 12px;
}

.entry-card {
	background: var(--card);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-top: 3px solid var(--gold);
	border-radius: 16px;
	box-shadow: var(--shadow-card);
	padding: 20px 16px 28px;
}

.entry-header {
	margin-bottom: 20px;
}

.entry-title {
	margin: 0;
	color: var(--heading);
	background: linear-gradient(90deg, #ffe27a 0%, #f5b83d 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
	line-height: 1.35;
}

.entry-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 14px;
	border-radius: 2px;
	background: var(--gold);
}

/* ===== 6. Nội dung bài (dùng chung trang con và trang chủ) ===== */
.entry-content {
	line-height: 1.65;
}

.entry-content > :first-child {
	margin-top: 0;
}

/* Khoảng cách giữa 2 đoạn văn: 0.7em (khoảng 12px) */
.entry-content p {
	margin: 0 0 0.7em;
}

.entry-content h2 {
	margin: 2.2em 0 0.9em;
	padding: 10px 16px;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--blue) 0%, var(--violet) 100%);
	box-shadow: inset 5px 0 0 var(--gold);
	color: #fff;
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem);
	line-height: 1.4;
}

.entry-content h3 {
	margin: 1.8em 0 0.5em;
	color: var(--heading);
	font-size: 1.15rem;
	line-height: 1.45;
}

.entry-content h2 + h3 {
	margin-top: 1em;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.entry-content li {
	margin: 0.25em 0;
}

.entry-content ul li::marker {
	color: var(--link);
}

.entry-content ol li::marker {
	color: var(--heading);
	font-weight: 700;
}

.entry-content strong {
	color: #fff;
}

/* Tiêu đề có id (neo): khi cuộn tới thì chừa khoảng phía trên, rồi sáng viền vàng thoáng qua */
.entry-content [id] {
	scroll-margin-top: 24px;
}

.admin-bar .entry-content [id] {
	scroll-margin-top: 56px;
}

.entry-content h3:target {
	animation: e19-target 2.2s ease-out;
}

@keyframes e19-target {
	0%,
	35% {
		box-shadow: 0 0 0 2px rgba(255, 208, 0, 0.7), 0 0 26px rgba(255, 208, 0, 0.35);
	}

	100% {
		box-shadow: 0 0 0 2px rgba(255, 208, 0, 0), 0 0 26px rgba(255, 208, 0, 0);
	}
}

/* Dòng "xem tiếp" cuối mỗi mục (đoạn có class e19-more, gắn trong bài): link sang trang chi tiết */
.entry-content .e19-more {
	margin-top: -0.25em;
	color: var(--muted);
	font-size: 0.9375rem;
}

.entry-content .e19-more a {
	margin-left: 4px;
	color: var(--gold);
	font-weight: 600;
	text-decoration: none;
}

.entry-content .e19-more a::after {
	content: "→";
	display: inline-block;
	margin-left: 6px;
	transition: transform 0.2s ease;
}

.entry-content .e19-more a:hover {
	color: #ffe066;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.entry-content .e19-more a:hover::after {
	transform: translateX(4px);
}

/* Hỏi đáp dạng thả xuống (khối Details của WordPress): câu hỏi là dòng bấm được, không phải heading.
 * Đóng: ô viền tím mờ, mũi tên chỉ xuống bên phải. Mở: viền vàng, mũi tên quay lên, câu trả lời hiện bên dưới. Không cần JS. */
.entry-content .wp-block-details {
	margin: 0 0 10px;
	border: 1px solid rgba(185, 166, 255, 0.22);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.entry-content .wp-block-details:hover {
	border-color: rgba(185, 166, 255, 0.45);
}

.entry-content .wp-block-details[open] {
	border-color: rgba(255, 208, 0, 0.6);
	background: rgba(124, 58, 237, 0.14);
}

.entry-content .wp-block-details > summary {
	position: relative;
	display: block;
	padding: 14px 56px 14px 18px;
	color: #fff;
	font-family: var(--font-head);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
	list-style: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.entry-content .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.entry-content .wp-block-details > summary:hover,
.entry-content .wp-block-details[open] > summary {
	color: var(--gold);
}

.entry-content .wp-block-details > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	border: 1.5px solid var(--gold);
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	transition: transform 0.25s ease, background-color 0.2s ease;
}

/* Mở: mũi tên quay lên, nền vàng, mũi tên tím đậm */
.entry-content .wp-block-details[open] > summary::after {
	background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1366' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	transform: rotate(180deg);
}

.entry-content .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 18px 16px;
}

/* Khoảng cách sau cụm hỏi đáp */
.entry-content .wp-block-details + :not(.wp-block-details) {
	margin-top: 1.75em;
}

/* Bảng: khung riêng sáng hơn nền khung bài, viền rõ, hàng tiêu đề màu, cuộn ngang trên điện thoại */
.entry-content .wp-block-table {
	margin: 1.5em 0 1.75em;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid rgba(185, 166, 255, 0.35);
	border-radius: 12px;
	background: #262070;
	box-shadow: 0 10px 28px rgba(5, 2, 30, 0.45);
}

.entry-content .wp-block-table table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.entry-content .wp-block-table table:has(tr > :nth-child(4)) {
	min-width: 560px;
}

.entry-content .wp-block-table table:has(tr > :nth-child(5)) {
	min-width: 680px;
}

.entry-content .wp-block-table thead {
	border: 0;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	padding: 11px 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	text-align: left;
	vertical-align: top;
}

/* Bỏ viền ngoài cùng của ô (khung ngoài đã có viền) */
.entry-content .wp-block-table tr > :first-child {
	border-left: 0;
}

.entry-content .wp-block-table tr > :last-child {
	border-right: 0;
}

.entry-content .wp-block-table tr:first-child > * {
	border-top: 0;
}

.entry-content .wp-block-table tbody tr:last-child > * {
	border-bottom: 0;
}

.entry-content .wp-block-table th {
	background: linear-gradient(180deg, #4a36c9 0%, #3423a6 100%);
	border-bottom: 2px solid var(--gold);
	color: #fff;
	letter-spacing: 0.01em;
}

.entry-content .wp-block-table td {
	color: #ece9fb;
}

/* Cột đầu là nhãn của hàng: chữ đậm, sáng hơn */
.entry-content .wp-block-table tbody td:first-child {
	color: #fff;
	font-weight: 600;
}

.entry-content .wp-block-table tbody tr:nth-child(even) td {
	background: rgba(255, 255, 255, 0.05);
}

.entry-content .wp-block-table tbody tr:hover td {
	background: rgba(255, 208, 0, 0.08);
}

/* Ảnh poster */
.entry-content .wp-block-image {
	margin: 1.5em 0;
	text-align: center;
}

.entry-content .wp-block-image img {
	border-radius: 12px;
	box-shadow: var(--shadow);
}

/* Dòng cảnh báo cuối bài (đoạn có số 1323) */
.entry-content .e19-warning {
	margin-top: 2em;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--gold);
	border-radius: 8px;
	background: var(--bg);
	color: var(--muted);
	font-size: 0.875rem;
	line-height: 1.7;
}

/* ===== 7. Trang chủ ===== */

/* Banner tràn hết bề ngang màn hình, giữ tỉ lệ ảnh 1920x660. Không có JS vẫn vuốt ngang được;
 * mũi tên và chấm chỉ hiện khi JS đã chạy (class is-ready). */
.home-banner {
	position: relative;
	background: #0d0838;
}

.banner-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.banner-track::-webkit-scrollbar {
	display: none;
}

.banner-slide {
	flex: 0 0 100%;
	aspect-ratio: 1920 / 660;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.banner-slide a {
	display: block;
	height: 100%;
}

.banner-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Trình duyệt tắt JS: ẩn ảnh giữ chỗ, dùng ảnh trong <noscript> */
html:not(.js) .banner-img[data-src] {
	display: none;
}

.banner-arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(13, 8, 56, 0.55);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.banner-arrow:hover {
	background: rgba(13, 8, 56, 0.85);
	color: var(--gold);
}

.banner-prev {
	left: 16px;
}

.banner-next {
	right: 16px;
}

.banner-dots {
	position: absolute;
	right: 0;
	bottom: 4px;
	left: 0;
	z-index: 1;
	display: none;
	justify-content: center;
}

/* Nút chấm 24px cho dễ bấm (chuẩn tối thiểu 24px), chấm thật vẽ bằng ::before */
.banner-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.banner-dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0 0 0 1px rgba(13, 8, 56, 0.35);
	transition: width 0.2s ease, background-color 0.2s ease;
}

.banner-dot[aria-current="true"] {
	width: 36px;
}

.banner-dot[aria-current="true"]::before {
	width: 22px;
	background: var(--gold);
}

.home-banner.is-ready .banner-dots {
	display: flex;
}

.home-hero {
	padding: 28px 0 36px;
	background: radial-gradient(900px 360px at 90% -10%, rgba(255, 208, 0, 0.14), transparent 60%);
	color: #fff;
}

/* H1 trang chủ: chữ vàng ánh kim, viền tối mảnh và quầng sáng.
 * Màu nằm ở thẻ span bên trong, box-decoration-break để mỗi dòng có đủ dải màu;
 * padding trên/dưới để dấu thanh tiếng Thái không bị cắt. */
.home-title {
	max-width: 900px;
	margin: 0 0 12px;
	color: var(--gold);
	font-size: clamp(1.6rem, 1rem + 3vw, 2.75rem);
	line-height: 1.3;
	filter: drop-shadow(0 2px 0 rgba(70, 25, 0, 0.6)) drop-shadow(0 0 22px rgba(255, 190, 0, 0.35));
}

.home-title span {
	padding: 0.12em 0 0.06em;
	background: linear-gradient(180deg, #fff7cf 0%, #ffe066 38%, #ffc21a 62%, #f59e0b 100%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.home-lead {
	max-width: 680px;
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 1.0625rem;
}

.home-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin: 28px 0;
	padding: 0;
	list-style: none;
}

.home-stats li {
	display: flex;
	flex-direction: column;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	background: rgba(20, 12, 74, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.stat-num {
	color: var(--gold);
	font-size: 1.75rem;
	line-height: 1.15;
}

.stat-label {
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.875rem;
}

.home-cats ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 16px 14px;
	border: 2px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	background: rgba(28, 22, 83, 0.88);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.cat-card:hover {
	border-color: var(--gold);
	color: var(--ink);
	transform: translateY(-2px);
}

/* Icon hộp game: khối bạc ánh kim (ảnh trong assets/icons).
 * Rê chuột: icon nảy lên, nghiêng, đổi sang bản vàng (ảnh vàng chỉ tải khi rê chuột, lấy từ biến --icon-hover). */
.cat-icon {
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	transform-origin: 50% 85%;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cat-icon::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, rgba(185, 166, 255, 0.22), rgba(124, 58, 237, 0.14) 55%, transparent 72%);
	transition: transform 0.35s ease, background 0.35s ease;
}

.cat-icon img {
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	filter: drop-shadow(0 6px 8px rgba(8, 4, 40, 0.65));
}

.cat-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	background: center / contain no-repeat;
	opacity: 0;
	filter: drop-shadow(0 8px 14px rgba(255, 190, 0, 0.45));
	transition: opacity 0.3s ease;
}

.cat-card:hover .cat-icon,
.cat-card:focus-visible .cat-icon {
	transform: translateY(-6px) scale(1.14) rotate(-8deg);
}

.cat-card:hover .cat-icon::before,
.cat-card:focus-visible .cat-icon::before {
	transform: scale(1.3);
	background: radial-gradient(circle at 50% 45%, rgba(255, 208, 0, 0.35), rgba(124, 58, 237, 0.18) 55%, transparent 72%);
}

.cat-card:hover .cat-icon::after,
.cat-card:focus-visible .cat-icon::after {
	background-image: var(--icon-hover);
	opacity: 1;
}

.cat-name {
	color: #f3f0ff;
	line-height: 1.35;
}

.cat-desc {
	color: var(--muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.home-content {
	padding: 8px 0 56px;
}

.home-entry {
	padding: 20px 16px 28px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-top: 3px solid var(--gold);
	border-radius: 16px;
	background: var(--card);
	box-shadow: var(--shadow-card);
}

.home-entry h2 {
	margin: 2.4em 0 1em;
	padding: 12px 16px;
	border-radius: 12px;
	background: rgba(255, 208, 0, 0.1);
	box-shadow: inset 5px 0 0 var(--gold);
	color: var(--gold);
}

/* H3 trang chủ: nhãn mục rõ ràng, vạch vàng bên trái, nền tím nhạt dần, chữ trắng. Nhẹ hơn H2 (nền vàng). */
.home-entry h3 {
	margin: 2em 0 0.7em;
	padding: 8px 14px 8px 16px;
	border-left: 4px solid var(--gold);
	border-radius: 0 10px 10px 0;
	background: linear-gradient(90deg, rgba(124, 58, 237, 0.38) 0%, rgba(124, 58, 237, 0.12) 60%, transparent 100%);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1.4;
}

.home-entry h2 + h3 {
	margin-top: 1.2em;
}

.home-entry .wp-block-table th {
	background: linear-gradient(180deg, #ffe066 0%, var(--gold) 100%);
	border-bottom-color: #c99a00;
	color: var(--blue-900);
}

/* ===== 8. Footer ===== */
.site-footer {
	padding: 28px 0 32px;
	border-top: 3px solid var(--gold);
	background: rgba(20, 12, 74, 0.96);
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9375rem;
}

.footer-navigation .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.footer-navigation a {
	color: #fff;
	text-decoration: none;
}

.footer-navigation a:hover {
	color: var(--gold);
}

.footer-age {
	margin: 0;
}

.age-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 24px;
	margin-right: 6px;
	padding: 0 6px;
	border-radius: 6px;
	background: var(--gold);
	color: var(--blue-900);
	font-size: 0.8125rem;
}

.site-info {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.875rem;
}

/* ===== 8b. Hiện khi đã cuộn qua header (class is-scrolled trên thẻ html, do JS gắn) =====
 * Thanh 2 nút dính đáy: chỉ điện thoại (dưới 768px). Nút lên đầu trang: mọi thiết bị. */
.sticky-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
	border-top: 2px solid var(--gold);
	background: rgba(20, 12, 74, 0.96);
	box-shadow: 0 -8px 24px rgba(5, 2, 30, 0.45);
	transform: translateY(110%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.is-scrolled .sticky-cta {
	transform: none;
	visibility: visible;
	transition: transform 0.25s ease, visibility 0s;
}

.sticky-cta-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.sticky-cta-buttons .btn {
	min-height: 44px;
	font-size: 1rem;
}

.to-top {
	position: fixed;
	right: 14px;
	bottom: calc(76px + env(safe-area-inset-bottom));
	z-index: 91;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--gold);
	border-radius: 50%;
	background: rgba(20, 12, 74, 0.9);
	box-shadow: 0 6px 18px rgba(5, 2, 30, 0.45);
	color: var(--gold);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, background-color 0.2s ease, color 0.2s ease;
}

.is-scrolled .to-top {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s, background-color 0.2s ease, color 0.2s ease;
}

.to-top:hover {
	background: var(--gold);
	color: var(--blue-900);
}

/* Chừa chỗ cho thanh 2 nút để không che chữ cuối trang */
@media (max-width: 767px) {
	.site-footer {
		padding-bottom: calc(32px + 62px + env(safe-area-inset-bottom));
	}
}

@media (min-width: 768px) {
	.sticky-cta {
		display: none;
	}

	.to-top {
		right: 24px;
		bottom: 24px;
	}
}

@media (min-width: 1024px) {
	.menu-toggle {
		display: none;
	}
}

/* Màn hẹp: thu nhỏ nút ☰, logo, 2 nút để vừa 1 hàng */
@media (max-width: 399px) {
	.header-bar-inner {
		gap: 6px;
	}

	.menu-toggle {
		width: 36px;
		height: 36px;
	}

	.custom-logo {
		height: 26px;
	}

	.header-cta {
		gap: 4px;
	}

	.header-cta .btn {
		min-height: 34px;
		padding: 0 9px;
		font-size: 0.8125rem;
	}
}

/* Dưới 360px không đủ chỗ cho 2 nút: header chỉ giữ nút สมัครสมาชิก,
 * nút เข้าสู่ระบบ vẫn có ở thanh 2 nút dưới đáy khi cuộn xuống */
@media (max-width: 359px) {
	.header-cta .btn-outline {
		display: none;
	}
}

/* ===== 9. Trang 404 ===== */
.notfound {
	text-align: center;
}

.notfound .entry-title::after {
	margin-left: auto;
	margin-right: auto;
}

/* ===== 10. Màn hình lớn hơn ===== */
@media (min-width: 400px) {
	.custom-logo {
		height: 36px;
	}
}

@media (min-width: 600px) {
	.header-bar-inner {
		min-height: 68px;
	}

	.custom-logo {
		height: 44px;
	}

	.header-cta {
		gap: 8px;
	}

	.header-cta .btn {
		min-height: 40px;
		padding: 0 18px;
		font-size: 0.9375rem;
	}

	.page-main .container {
		padding: 0 16px;
	}

	.entry-card {
		padding: 32px 36px 40px;
	}
}

@media (min-width: 768px) {
	body {
		font-size: 1.0625rem;
	}

	.home-banner.is-ready .banner-arrow {
		display: inline-flex;
	}

	.banner-dots {
		bottom: 10px;
	}

	.banner-dot {
		width: 24px;
		height: 24px;
	}

	.banner-dot::before {
		width: 10px;
		height: 10px;
	}

	.banner-dot[aria-current="true"] {
		width: 40px;
	}

	.banner-dot[aria-current="true"]::before {
		width: 28px;
	}

	.home-hero {
		padding: 48px 0 56px;
	}

	.home-stats {
		grid-template-columns: repeat(4, 1fr);
		gap: 14px;
		margin: 36px 0;
	}

	.stat-num {
		font-size: 2.25rem;
	}

	.home-cats ul {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}

	.cat-card {
		padding: 20px 18px;
	}

	.home-content {
		padding: 16px 0 72px;
	}

	.home-entry {
		padding: 36px 44px 44px;
	}
}

@media (min-width: 1024px) {
	.page-main {
		padding: 36px 0 64px;
	}

	.entry-card {
		padding: 44px 56px 52px;
	}

	.main-navigation .menu {
		justify-content: center;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.main-navigation .menu a {
		padding: 12px 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.btn,
	.cat-card,
	.cat-icon,
	.cat-icon::before,
	.cat-icon::after,
	.banner-arrow,
	.banner-dot::before,
	.entry-content .e19-more a::after,
	.entry-content .wp-block-details,
	.entry-content .wp-block-details > summary,
	.entry-content .wp-block-details > summary::after,
	.sticky-cta,
	.is-scrolled .sticky-cta,
	.to-top,
	.is-scrolled .to-top {
		transition: none;
	}

	.js .main-navigation.is-open {
		animation: none;
	}

	.cat-card:hover,
	.cat-card:hover .cat-icon,
	.cat-card:focus-visible .cat-icon {
		transform: none;
	}

	.entry-content h3:target {
		animation: none;
	}
}