/*
Theme Name: XSubTH
Theme URI: https://www.xsubth.com/
Author: XSubTH
Author URI: https://www.xsubth.com/
Description: ธีม WordPress แบบ Static (Classic Theme) เขียนขึ้นใหม่ทั้งหมด ไม่ได้ดัดแปลงจากธีมสำเร็จรูป ออกแบบสำหรับเว็บวิดีโอที่ต้องการให้ "รหัสหนัง" ติดหน้าแรก Google — มี Schema VideoObject, Breadcrumb, FAQ, สารบัญอัตโนมัติ, โหลดเร็ว และแก้ไขได้ทั้งหมดผ่านเมนู Appearance
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.9
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: xsubth
Tags: video, dark, blue, custom-colors, custom-logo, custom-menu, featured-images, right-sidebar, translation-ready, threaded-comments
*/

/* =========================================================================
   XSubTH — สารบัญสไตล์ชีต
   01. Design tokens        07. การ์ดวิดีโอ + กริด
   02. Reset & base         08. หน้าเรื่อง (Single)
   03. Layout               09. แถบข้าง + วิดเจ็ต
   04. หัวเว็บ + เมนู         10. แบ่งหน้า + breadcrumb
   05. ช่องค้นหา + ปุ่ม       11. ท้ายเว็บ
   06. Hero / section head  12. Age gate + เบ็ดเตล็ด
   ========================================================================= */

/* 01. Design tokens ------------------------------------------------------ */
:root {
	--xs-accent: #0a84ff;
	--xs-accent-2: #4dd2ff;
	--xs-accent-deep: #0033a0;
	--xs-bg: #05070d;
	--xs-surface: #101724;
	--xs-text: #e8eef7;
	--xs-title-main: #5ac8ff;
	--xs-title-sub: #bbd9ff;
	--xs-container: 1280px;
	--xs-radius: 14px;

	--xs-muted: #8a9ab4;
	--xs-line: rgba(122, 176, 255, .16);
	--xs-line-soft: rgba(122, 176, 255, .08);
	--xs-glow: 0 0 0 1px rgba(10, 132, 255, .45), 0 10px 34px -12px rgba(10, 132, 255, .65);
	--xs-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
	--xs-chrome: linear-gradient(180deg, #ffffff 0%, #cfe0f5 46%, #8fb4dd 54%, #f2f8ff 100%);
	--xs-font: "Noto Sans Thai", "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--xs-gap: 18px;
}

/* โหมดสว่าง — ปุ่มสลับอยู่บนหัวเว็บ */
[data-xs-scheme="light"] {
	--xs-bg: #f3f6fb;
	--xs-surface: #ffffff;
	--xs-text: #12202f;
	--xs-muted: #5a6e88;
	--xs-line: rgba(10, 60, 120, .16);
	--xs-line-soft: rgba(10, 60, 120, .08);
	--xs-title-main: #0b64c8;
	--xs-title-sub: #12406e;
	--xs-shadow: 0 16px 34px -24px rgba(10, 40, 80, .45);
}

/* 02. Reset & base ------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--xs-bg);
	color: var(--xs-text);
	font-family: var(--xs-font);
	font-size: 16px;
	line-height: 1.75;
	overflow-x: hidden;
}

/* แสงน้ำเงินจาง ๆ ด้านบน ให้เข้ากับโลโก้เรืองแสง */
body::before {
	content: "";
	position: fixed;
	inset: -30vh 0 auto 0;
	height: 70vh;
	background: radial-gradient(60% 60% at 50% 0%, rgba(10, 132, 255, .22), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

[data-xs-scheme="light"] body::before { opacity: .35; }

img,
video,
iframe,
svg { max-width: 100%; height: auto; display: block; }

a { color: var(--xs-accent-2); text-decoration: none; transition: color .18s ease; }
a:hover,
a:focus-visible { color: #ffffff; }

:focus-visible { outline: 2px solid var(--xs-accent-2); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
	font-weight: 800;
	line-height: 1.35;
	margin: 0 0 .6em;
	letter-spacing: -.01em;
}

h1 { font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.15rem); color: var(--xs-title-main); }
h2 { font-size: clamp(1.2rem, .98rem + 1vw, 1.6rem); color: var(--xs-title-sub); }
h3 { font-size: 1.12rem; color: var(--xs-title-sub); }

p { margin: 0 0 1.05em; }
ul, ol { padding-left: 1.3em; }
table { width: 100%; border-collapse: collapse; }

code, kbd, pre {
	font-family: Consolas, Monaco, "Courier New", monospace;
	background: rgba(10, 132, 255, .12);
	border-radius: 6px;
	padding: .1em .4em;
	font-size: .92em;
}

::selection { background: var(--xs-accent); color: #fff; }

/* 03. Layout ------------------------------------------------------------- */
.xs-container {
	width: 100%;
	max-width: var(--xs-container);
	margin-inline: auto;
	padding-inline: 16px;
}

.xs-site-main { position: relative; z-index: 1; padding-bottom: 48px; }

.xs-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
}

.xs-no-sidebar .xs-layout,
.xs-layout--full { grid-template-columns: minmax(0, 1fr); }

.xs-card-surface {
	background: var(--xs-surface);
	border: 1px solid var(--xs-line);
	border-radius: var(--xs-radius);
	box-shadow: var(--xs-shadow);
	padding: 22px;
}

.xs-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--xs-accent);
	color: #fff;
	padding: 10px 16px;
	z-index: 999;
	border-radius: 0 0 10px 0;
}

.xs-skip-link:focus { left: 0; }

/* 04. หัวเว็บ + เมนู ------------------------------------------------------ */
.xs-topbar {
	position: relative;
	z-index: 3;
	text-align: center;
	font-size: .82rem;
	letter-spacing: .02em;
	padding: 7px 14px;
	color: #d6e8ff;
	background: linear-gradient(90deg, var(--xs-accent-deep), var(--xs-accent) 50%, var(--xs-accent-deep));
}

.xs-header {
	position: relative;
	z-index: 50;
	border-bottom: 1px solid var(--xs-line);
	box-shadow: 0 10px 30px -24px rgba(10, 132, 255, .9);
}

/* เปิดการตรึงได้ที่ Customize > หัวเว็บ */
.xs-header--sticky { position: sticky; top: 0; }

/* ชั้นที่ 1 — แถบโลโก้ */
.xs-masthead { background: #0b0f1a; }
[data-xs-scheme="light"] .xs-masthead { background: #ffffff; }

/*
 * แถบโลโก้ — จัดโลโก้ไว้กึ่งกลางจริง ๆ
 * ปุ่มเครื่องมือลอยชิดขวาแบบ absolute เพื่อไม่ให้ไปดึงโลโก้ให้เยื้องออกจากกลาง
 */
.xs-masthead__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 150px;
	padding-block: 12px;
}

.xs-masthead__inner > .xs-brand { flex: 0 0 auto; }

.xs-brand { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }

.xs-brand img,
.xs-brand .custom-logo {
	max-height: 110px;
	max-width: 100%;
	width: auto;
	filter: drop-shadow(0 0 18px rgba(10, 132, 255, .5));
}

.xs-brand__text { display: flex; flex-direction: column; line-height: 1.2; }

.xs-brand__name {
	font-size: 2.2rem;
	font-weight: 900;
	letter-spacing: .01em;
	background: var(--xs-chrome);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 22px rgba(10, 132, 255, .5);
}

.xs-brand__tag { font-size: .74rem; color: var(--xs-muted); font-weight: 600; }

/* ชั้นที่ 2 — แถวเมนูหมวดหมู่ (ตัวอักษรล้วน ชิดขวาบนจอคอม) */
.xs-navbar {
	background: rgba(10, 132, 255, .07);
	border-top: 1px solid var(--xs-line);
}

.xs-nav { min-width: 0; }

.xs-nav__list,
.xs-mobile-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: 56px;
}

.xs-nav__list li { position: relative; }

.xs-nav__list a {
	display: block;
	padding: 8px 16px;
	font-weight: 700;
	font-size: 1rem;
	color: var(--xs-accent-2);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color .18s ease, border-color .18s ease, text-shadow .18s ease;
}

.xs-nav__list a:hover,
.xs-nav__list a:focus-visible {
	color: #fff;
	text-shadow: 0 0 16px rgba(77, 210, 255, .9);
}

.xs-nav__list .xs-is-current > a,
.xs-nav__list .current-menu-item > a,
.xs-nav__list .current-menu-parent > a,
.xs-nav__list .current-cat > a {
	color: #fff;
	border-bottom-color: var(--xs-accent);
	text-shadow: 0 0 16px rgba(10, 132, 255, .9);
}

/* ชั้นที่ 3 — ลิงก์ลัดกึ่งกลางใต้หัวเว็บ */
.xs-quicklinks {
	position: relative;
	z-index: 1;
	border-bottom: 1px solid var(--xs-line-soft);
	background: rgba(10, 132, 255, .03);
}

.xs-quicklinks ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 10px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
}

.xs-quicklinks a {
	display: block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 700;
	color: var(--xs-muted);
	border: 1px solid transparent;
}

.xs-quicklinks a:hover {
	color: #fff;
	border-color: var(--xs-line);
	background: rgba(10, 132, 255, .16);
}

.xs-quicklinks a.is-current {
	color: #fff;
	background: linear-gradient(180deg, var(--xs-accent), var(--xs-accent-deep));
	box-shadow: var(--xs-glow);
}

/* เมนูย่อยชั้นที่ 2 */
.xs-nav__list ul.sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 190px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--xs-surface);
	border: 1px solid var(--xs-line);
	border-radius: 12px;
	box-shadow: var(--xs-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: all .18s ease;
	z-index: 20;
}

.xs-nav__list li:hover > ul.sub-menu,
.xs-nav__list li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.xs-masthead__tools {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
}

/* หัวเว็บแบบบางยังใช้แถวเดียว ปุ่มจึงวางตามปกติ ไม่ต้องลอย */
.xs-header--compact .xs-masthead__inner { justify-content: space-between; }
.xs-header--compact .xs-masthead__tools { position: static; transform: none; }

.xs-masthead__search { width: 240px; }

/* ช่องค้นหาในแถวเมนู — ลอยชิดขวา เมนูจึงยังอยู่กึ่งกลางเป๊ะ */
.xs-navbar > .xs-container { position: relative; }

.xs-navbar__search {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 260px;
}

.xs-icon-btn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 1px solid var(--xs-line);
	background: rgba(10, 132, 255, .1);
	color: var(--xs-text);
	cursor: pointer;
	transition: background .18s ease, box-shadow .18s ease;
}

.xs-icon-btn:hover { background: rgba(10, 132, 255, .24); box-shadow: var(--xs-glow); }
.xs-icon-btn svg { width: 20px; height: 20px; fill: currentColor; }

#xs-mode-toggle { display: inline-flex; }

.xs-mobile-nav,
.xs-search-drawer { display: none; }

.xs-mobile-nav.is-open,
.xs-search-drawer.is-open { display: block; padding-bottom: 14px; }

.xs-mobile-nav__list {
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
	min-height: 0;
}

.xs-mobile-nav__list a {
	display: block;
	padding: 9px 14px;
	border-radius: 10px;
	background: rgba(10, 132, 255, .12);
	border: 1px solid var(--xs-line);
	font-weight: 700;
	color: var(--xs-text);
}

.xs-mobile-nav__list .sub-menu { display: none; }

/* 05. ช่องค้นหา + ปุ่ม ---------------------------------------------------- */
.xs-search { display: flex; gap: 8px; }

.xs-search__field,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea {
	width: 100%;
	padding: 11px 14px;
	border-radius: 10px;
	border: 1px solid var(--xs-line);
	background: rgba(255, 255, 255, .04);
	color: var(--xs-text);
	font-family: inherit;
	font-size: .95rem;
}

[data-xs-scheme="light"] .xs-search__field,
[data-xs-scheme="light"] input,
[data-xs-scheme="light"] textarea { background: #fff; }

.xs-search__field::placeholder { color: var(--xs-muted); }

.xs-search__field:focus {
	border-color: var(--xs-accent);
	box-shadow: 0 0 0 3px rgba(10, 132, 255, .2);
	outline: none;
}

.xs-btn,
.xs-search__submit,
button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 10px;
	border: 0;
	font-family: inherit;
	font-weight: 800;
	font-size: .95rem;
	color: #fff;
	background: linear-gradient(180deg, var(--xs-accent-2), var(--xs-accent) 55%, var(--xs-accent-deep));
	cursor: pointer;
	white-space: nowrap;
	transition: transform .16s ease, box-shadow .16s ease;
}

.xs-btn:hover,
.xs-search__submit:hover,
button:hover,
input[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px -10px rgba(77, 210, 255, .85);
	color: #fff;
}

.xs-btn--ghost {
	background: transparent;
	border: 1px solid var(--xs-line);
	color: var(--xs-text);
}

/* 06. Hero / section head ------------------------------------------------ */
.xs-hero {
	position: relative;
	margin: 22px 0 26px;
	padding: 34px 26px;
	border-radius: calc(var(--xs-radius) + 6px);
	border: 1px solid var(--xs-line);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(10, 132, 255, .28), transparent 55%),
		radial-gradient(100% 140% at 100% 0%, rgba(77, 210, 255, .18), transparent 60%),
		var(--xs-surface);
	overflow: hidden;
}

.xs-hero h1 { margin-bottom: .35em; }
.xs-hero p { color: var(--xs-muted); max-width: 68ch; margin-bottom: 1em; }
.xs-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.xs-chip {
	display: inline-block;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: .86rem;
	font-weight: 700;
	color: var(--xs-text);
	background: rgba(10, 132, 255, .14);
	border: 1px solid var(--xs-line);
}

.xs-chip:hover { background: var(--xs-accent); color: #fff; }

.xs-eyebrow {
	display: inline-block;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--xs-accent-2);
}

.xs-section { margin: 30px 0; }

.xs-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	padding-left: 14px;
	border-left: 4px solid var(--xs-accent);
	box-shadow: -1px 0 18px -6px var(--xs-accent);
}

.xs-section-head h1,
.xs-section-head h2 { margin: 0; }

.xs-more {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: .9rem;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--xs-line);
	background: rgba(10, 132, 255, .1);
}

.xs-more:hover { background: var(--xs-accent); color: #fff; }

.xs-viewtabs { display: flex; gap: 6px; }

.xs-viewtabs button {
	padding: 7px 13px;
	font-size: .85rem;
	background: rgba(10, 132, 255, .12);
	color: var(--xs-text);
	border: 1px solid var(--xs-line);
}

.xs-viewtabs button.is-active { background: var(--xs-accent); color: #fff; }

/* แถบหัวหน้าแรก — บรรทัดเดียว ไม่มีกรอบ ไม่ดันกริดลงไปครึ่งจอ */
.xs-band {
	margin: 12px 0 14px;
	text-align: center;
}

.xs-band h1 {
	margin: 0;
	font-size: clamp(1rem, .88rem + .55vw, 1.28rem);
	font-weight: 700;
	color: var(--xs-title-sub);
	line-height: 1.5;
}

/* 07. การ์ดวิดีโอ + กริด -------------------------------------------------- */
/* จอคอม 6 ใบต่อแถว · แท็บเล็ต 4 · มือถือ 2 */
.xs-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--xs-gap);
}

@media (max-width: 1180px) {
	.xs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.xs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.xs-card {
	display: flex;
	flex-direction: column;
	background: var(--xs-surface);
	border: 1px solid var(--xs-line);
	border-radius: var(--xs-radius);
	overflow: hidden;
	box-shadow: var(--xs-shadow);
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.xs-card:hover {
	transform: translateY(-4px);
	border-color: rgba(77, 210, 255, .5);
	box-shadow: 0 18px 40px -18px rgba(10, 132, 255, .75);
}

.xs-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: #0a1020;
	overflow: hidden;
}

.xs-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.xs-card:hover .xs-card__thumb img { transform: scale(1.06); }

.xs-card__thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--xs-muted);
	font-weight: 800;
	letter-spacing: .1em;
}

.xs-badge {
	position: absolute;
	z-index: 2;
	font-size: .72rem;
	font-weight: 800;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 7px;
	letter-spacing: .02em;
	backdrop-filter: blur(4px);
}

.xs-badge--code {
	top: 8px;
	left: 8px;
	color: #fff;
	background: linear-gradient(180deg, var(--xs-accent-2), var(--xs-accent-deep));
	box-shadow: 0 0 16px -4px var(--xs-accent-2);
}

.xs-badge--cat {
	top: 8px;
	right: 8px;
	color: #dbeaff;
	background: rgba(5, 7, 13, .72);
	border: 1px solid var(--xs-line);
}

.xs-badge--hd { bottom: 8px; left: 8px; color: #05070d; background: #4dd2ff; }
.xs-badge--time { bottom: 8px; right: 8px; color: #e8eef7; background: rgba(5, 7, 13, .78); }

.xs-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .2s ease;
}

.xs-card__play span {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	font-size: 1.1rem;
	color: #fff;
	background: rgba(10, 132, 255, .9);
	box-shadow: 0 0 30px rgba(77, 210, 255, .85);
	padding-left: 4px;
}

.xs-card:hover .xs-card__play { opacity: 1; }

.xs-card__body {
	padding: 12px 13px 14px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1 1 auto;
}

.xs-card__title {
	margin: 0;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--xs-text);
}

.xs-card__title a {
	color: inherit;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.xs-card__title a:hover { color: var(--xs-accent-2); }

.xs-card__meta {
	margin: 0;
	display: flex;
	gap: 12px;
	font-size: .78rem;
	color: var(--xs-muted);
	margin-top: auto;
}

/* มุมมองรายการ */
.xs-grid.xs-grid--list { grid-template-columns: minmax(0, 1fr); }
.xs-grid.xs-grid--list .xs-card { flex-direction: row; }
.xs-grid.xs-grid--list .xs-card__thumb { flex: 0 0 230px; }
.xs-grid.xs-grid--list .xs-card__title { -webkit-line-clamp: 3; line-clamp: 3; font-size: 1rem; }

/* หัวเว็บแบบบาง — ใช้เฉพาะหน้าโพสต์ โลโก้กับเมนูอยู่แถวเดียวกัน */
.xs-header--compact .xs-masthead__inner {
	min-height: 64px;
	gap: 22px;
	padding-block: 6px;
}

.xs-header--compact .xs-brand img,
.xs-header--compact .xs-brand .custom-logo { max-height: 44px; }
.xs-header--compact .xs-brand__name { font-size: 1.35rem; }
.xs-header--compact .xs-nav { flex: 1 1 auto; }

.xs-header--compact .xs-nav__list {
	justify-content: center;
	min-height: 0;
	gap: 0 2px;
}

.xs-header--compact .xs-nav__list a {
	font-size: .95rem;
	padding: 6px 12px;
	border-bottom-width: 2px;
}

/* 08. หน้าเรื่อง (Single) ------------------------------------------------- */

/* แถบบนสุดของหน้าโพสต์ — เครื่องเล่น ชื่อเรื่อง แท็บ อยู่นอกกริดจึงกว้างเต็มคอนเทนเนอร์ */
.xs-stage { padding: 18px 0 6px; }
.xs-stage .xs-player { margin-bottom: 16px; }

.xs-stage .xs-single__title {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 .45em;
}

[data-xs-scheme="light"] .xs-stage .xs-single__title { color: var(--xs-title-main); }

/* แถบแท็บใต้ชื่อเรื่อง — เป็นลิงก์ข้ามไปแต่ละส่วนของหน้า */
.xs-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0 4px;
	border-bottom: 1px solid var(--xs-line);
	padding-bottom: 0;
}

.xs-tab {
	display: block;
	padding: 10px 18px;
	font-weight: 700;
	font-size: .93rem;
	color: var(--xs-muted);
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	margin-bottom: -1px;
	transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.xs-tab:hover,
.xs-tab:focus-visible {
	color: #fff;
	background: rgba(10, 132, 255, .14);
	border-color: var(--xs-line);
}

.xs-tab:target,
.xs-tab.is-active {
	color: #fff;
	background: var(--xs-surface);
	border-color: var(--xs-line);
}

/* เผื่อที่ให้หัวเว็บแบบตรึง ตอนกดแท็บแล้วเลื่อนลงไปหาหัวข้อ */
#xs-specs,
#xs-entry,
#xs-tags,
#xs-spoiler-title { scroll-margin-top: 90px; }

.xs-single__header { margin-bottom: 18px; }
.xs-single__title { margin-bottom: .3em; }

.xs-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	list-style: none;
	font-size: .86rem;
	color: var(--xs-muted);
	margin: 0 0 14px;
	padding: 0;
}

.xs-single__meta li { display: inline-flex; gap: 5px; align-items: center; }
.xs-single__meta strong { color: var(--xs-text); }

/* แถวปุ่มใต้เครื่องเล่น */
.xs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.xs-btn--primary { background: linear-gradient(180deg, var(--xs-accent-2), var(--xs-accent) 55%, var(--xs-accent-deep)); }

/* ภาพปกเต็ม (เมื่อไม่ได้ถูกใช้เป็น poster ของเครื่องเล่น) */
.xs-cover { margin: 18px 0; }
.xs-cover img { width: 100%; border-radius: var(--xs-radius); border: 1px solid var(--xs-line); }

.xs-cover figcaption {
	margin-top: 8px;
	font-size: .82rem;
	color: var(--xs-muted);
	text-align: center;
}

.xs-player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border: 1px solid var(--xs-line);
	border-radius: var(--xs-radius);
	overflow: hidden;
	box-shadow: 0 20px 50px -24px rgba(10, 132, 255, .8);
}

.xs-player video,
.xs-player iframe { width: 100%; height: 100%; border: 0; }

.xs-player__trigger {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

.xs-player__trigger img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }

.xs-player__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .7;
}

.xs-player__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	color: var(--xs-muted);
}

.xs-player__placeholder strong { color: var(--xs-text); font-size: 1.05rem; }

.xs-player__trigger::after {
	content: "\25B6";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 1.6rem;
	color: #fff;
	text-shadow: 0 0 30px rgba(77, 210, 255, .9);
}

.xs-player__note { font-size: .82rem; color: var(--xs-muted); margin-top: 8px; }

/* ตารางข้อมูลเรื่อง — โครงเป็น <dl> ไม่ใช่ <table> */
.xs-specs {
	margin: 22px 0;
	padding: 6px 20px;
	font-size: .93rem;
	background: var(--xs-surface);
	border: 1px solid var(--xs-line);
	border-radius: var(--xs-radius);
}

.xs-specs__row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 4px 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--xs-line-soft);
}

.xs-specs__row:last-child { border-bottom: 0; }
.xs-specs dt { color: var(--xs-accent-2); font-weight: 700; margin: 0; }
.xs-specs dd { margin: 0; color: var(--xs-text); }

@media (max-width: 600px) {
	.xs-specs__row { grid-template-columns: minmax(0, 1fr); }
	.xs-specs dt { font-size: .82rem; }
}

.xs-toc {
	margin: 22px 0;
	padding: 18px 22px;
	background: rgba(10, 132, 255, .07);
	border: 1px solid var(--xs-line);
	border-left: 4px solid var(--xs-accent);
	border-radius: var(--xs-radius);
}

.xs-toc__title { font-size: 1.02rem; margin-bottom: .5em; }
.xs-toc ol { margin: 0; padding-left: 1.2em; }
.xs-toc li { margin-bottom: 4px; }

/* คีย์เวิร์ดที่ธีมทาสีให้อัตโนมัติ — หลัก=แดง รอง=ชมพู */
.xs-kw-main {
	color: #ff4d4d;
	font-weight: 800;
}

.xs-kw-sub {
	color: #ff7ac0;
	font-weight: 800;
}

/* โหมดสว่างต้องใช้เฉดเข้มขึ้น ไม่งั้นอ่านไม่ออกบนพื้นขาว */
[data-xs-scheme="light"] .xs-kw-main { color: #cc0000; }
[data-xs-scheme="light"] .xs-kw-sub { color: #c2185b; }

/* กล่องเรื่องย่อ */
.xs-spoiler {
	margin: 24px 0;
	padding: 20px 24px;
	border-radius: var(--xs-radius);
	border: 1px solid var(--xs-line);
	border-left: 4px solid var(--xs-accent);
	background: var(--xs-surface);
}

.xs-spoiler > h2 { margin-top: 0; }
.xs-spoiler .xs-entry p:last-child { margin-bottom: 0; }

.xs-entry { font-size: 1.02rem; }
.xs-entry h2 { margin-top: 1.5em; color: var(--xs-title-sub); }
.xs-entry h3 { margin-top: 1.2em; }
.xs-entry img { border-radius: var(--xs-radius); margin-block: 1em; }

.xs-entry blockquote {
	margin: 1.2em 0;
	padding: 2px 20px;
	border-left: 4px solid var(--xs-accent);
	background: rgba(10, 132, 255, .07);
	border-radius: 0 10px 10px 0;
}

.xs-entry ul,
.xs-entry ol { margin-bottom: 1.1em; }
.xs-entry li { margin-bottom: .35em; }

.xs-faq { margin: 26px 0; }

.xs-faq details {
	border: 1px solid var(--xs-line);
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 10px;
	background: var(--xs-surface);
}

.xs-faq summary { cursor: pointer; font-weight: 700; color: var(--xs-title-sub); }
.xs-faq details[open] summary { color: var(--xs-accent-2); margin-bottom: .6em; }

.xs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }

.xs-postnav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin: 26px 0;
}

.xs-postnav a {
	display: block;
	padding: 14px 18px;
	border-radius: var(--xs-radius);
	border: 1px solid var(--xs-line);
	background: var(--xs-surface);
	color: var(--xs-text);
	font-weight: 700;
}

.xs-postnav a:hover { border-color: var(--xs-accent); color: var(--xs-accent-2); }
.xs-postnav span { display: block; font-size: .76rem; color: var(--xs-muted); font-weight: 600; }

.xs-ad { margin: 18px 0; text-align: center; }

/* 09. แถบข้าง + วิดเจ็ต --------------------------------------------------- */
.xs-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; }

.xs-widget {
	background: var(--xs-surface);
	border: 1px solid var(--xs-line);
	border-radius: var(--xs-radius);
	padding: 18px;
	box-shadow: var(--xs-shadow);
}

.xs-widget__title,
.xs-widget .widget-title {
	font-size: 1rem;
	margin: 0 0 12px;
	padding-left: 11px;
	border-left: 3px solid var(--xs-accent);
	color: var(--xs-title-sub);
}

.xs-widget ul { list-style: none; margin: 0; padding: 0; }
.xs-widget li { padding: 7px 0; border-bottom: 1px solid var(--xs-line-soft); font-size: .93rem; }
.xs-widget li:last-child { border-bottom: 0; }
.xs-widget a { color: var(--xs-text); }
.xs-widget a:hover { color: var(--xs-accent-2); }

.xs-mini { display: flex; gap: 11px; align-items: flex-start; }
.xs-mini img { width: 104px; border-radius: 8px; flex: 0 0 auto; }
.xs-mini__title { font-size: .88rem; font-weight: 700; line-height: 1.45; }

.xs-rank {
	flex: 0 0 24px;
	font-size: 1rem;
	font-weight: 900;
	color: var(--xs-accent-2);
	text-shadow: 0 0 12px rgba(77, 210, 255, .8);
}

/* 10. แบ่งหน้า + breadcrumb ----------------------------------------------- */
.xs-breadcrumb { padding: 14px 0 2px; font-size: .84rem; color: var(--xs-muted); }
.xs-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.xs-breadcrumb li + li::before { content: "\203A"; margin-right: 8px; color: var(--xs-accent); }
.xs-breadcrumb a { color: var(--xs-muted); }
.xs-breadcrumb a:hover { color: var(--xs-accent-2); }

.xs-pagination { margin: 32px 0 8px; }
.xs-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.xs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 13px;
	border-radius: 10px;
	border: 1px solid var(--xs-line);
	background: var(--xs-surface);
	color: var(--xs-text);
	font-weight: 700;
}

.xs-pagination .page-numbers:hover { border-color: var(--xs-accent); color: var(--xs-accent-2); }

.xs-pagination .page-numbers.current {
	background: linear-gradient(180deg, var(--xs-accent), var(--xs-accent-deep));
	color: #fff;
	border-color: transparent;
	box-shadow: var(--xs-glow);
}

/* 11. ท้ายเว็บ ------------------------------------------------------------ */
.xs-footer {
	position: relative;
	z-index: 1;
	margin-top: 40px;
	padding-top: 38px;
	border-top: 1px solid var(--xs-line);
	background: linear-gradient(180deg, rgba(10, 132, 255, .07), transparent 40%);
}

.xs-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 26px;
	padding-bottom: 26px;
}

.xs-footer__col .widget-title { font-size: 1rem; color: var(--xs-title-sub); margin-bottom: 10px; }
.xs-footer__col ul { list-style: none; margin: 0; padding: 0; }
.xs-footer__col li { padding: 5px 0; font-size: .92rem; }

.xs-footer__about {
	font-size: .88rem;
	color: var(--xs-muted);
	line-height: 1.9;
	padding: 20px 0;
	border-top: 1px solid var(--xs-line-soft);
}

.xs-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	font-size: .9rem;
	font-weight: 600;
}

.xs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0 26px;
	border-top: 1px solid var(--xs-line-soft);
	font-size: .84rem;
	color: var(--xs-muted);
}

#xs-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 60;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

#xs-to-top.is-visible { opacity: 1; pointer-events: auto; }

/* 12. Age gate + เบ็ดเตล็ด ------------------------------------------------ */
.xs-agegate {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(3, 5, 10, .93);
	backdrop-filter: blur(6px);
}

.xs-agegate[hidden] { display: none; }

.xs-agegate__panel {
	max-width: 460px;
	width: 100%;
	text-align: center;
	padding: 32px 26px;
	border-radius: 18px;
	border: 1px solid var(--xs-line);
	background: var(--xs-surface);
	box-shadow: 0 0 60px -10px rgba(10, 132, 255, .6);
}

.xs-agegate__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 18px;
}

.xs-empty { text-align: center; padding: 48px 22px; }

.xs-seo-text {
	margin: 34px 0 0;
	padding: 22px;
	border-radius: var(--xs-radius);
	border: 1px solid var(--xs-line-soft);
	background: rgba(10, 132, 255, .05);
	font-size: .92rem;
	color: var(--xs-muted);
	line-height: 1.95;
}

.xs-seo-text h2 { font-size: 1.1rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.xs-comments { margin-top: 34px; }
.xs-comments .comment-list { list-style: none; padding: 0; }

.xs-comments .comment-body {
	padding: 14px 16px;
	margin-bottom: 12px;
	border: 1px solid var(--xs-line);
	border-radius: 12px;
	background: var(--xs-surface);
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
	.xs-layout { grid-template-columns: minmax(0, 1fr); }
	.xs-sidebar { position: static; }
	.xs-masthead__search { width: 190px; }

	/* จอแคบลงแล้วช่องค้นหาจะทับเมนู — ซ่อนไว้ ใช้ปุ่มแว่นขยายบนหัวเว็บแทน */
	.xs-navbar__search { display: none; }
}

@media (max-width: 860px) {
	.xs-navbar,
	.xs-header--compact .xs-nav,
	.xs-masthead__search { display: none; }

	.xs-header--compact .xs-masthead__inner { min-height: 58px; }
	.xs-tab { padding: 8px 13px; font-size: .86rem; }

	.xs-icon-btn { display: inline-flex; }
	.xs-masthead__inner { min-height: 96px; }
	.xs-brand img,
	.xs-brand .custom-logo { max-height: 62px; }
	.xs-brand__name { font-size: 1.6rem; }
	.xs-quicklinks a { font-size: .82rem; padding: 5px 11px; }
	.xs-grid { gap: 12px; }
	.xs-hero { padding: 24px 18px; }
	.xs-band { padding: 16px; }
	.xs-band__search { flex-basis: 100%; }
	.xs-grid.xs-grid--list .xs-card__thumb { flex-basis: 150px; }
	.xs-specs th { width: 130px; }
}

@media (max-width: 480px) {
	body { font-size: 15px; }
	.xs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.xs-card__title { font-size: .86rem; }
	.xs-card__meta { font-size: .72rem; gap: 8px; }
	.xs-section-head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after { animation: none !important; transition: none !important; }

	html { scroll-behavior: auto; }
}

/* พิมพ์หน้าเว็บ */
@media print {
	.xs-header,
	.xs-footer,
	.xs-sidebar,
	.xs-player,
	#xs-to-top,
	.xs-agegate { display: none !important; }

	body { background: #fff; color: #000; }
}