/*
 * YD-Style — หน้าเว็บจริง (และภาพจำลองในหลังบ้านโหลดไฟล์นี้ตัวเดียวกัน)
 *
 * 1 ฟังก์ชัน = 1 class ที่ <body> · ช่องไหนปิด class ไม่ติด กฎนั้นไม่ทำงาน
 *   yd-sty-r-*     ความโค้งมุม
 *   yd-sty-m-*     สวิตช์ (ซ่อน / สไตล์เดิม / ยุคใหม่ / เคลื่อนไหว / รายละเอียด)
 * ตัวแปร --yd-sty-* ถูกแปะต่อท้ายไฟล์นี้แบบ inline จากค่าตั้ง — ค่าข้างล่างเป็นแค่ค่าสำรอง
 *
 * ต้องชนะ CSS ทุกตัวบนหน้า — 3 ชั้น:
 *   1. ไฟล์นี้ถูกพิมพ์เป็นก้อนสุดท้ายใน <head> (wp_head PHP_INT_MAX, inc/front.php)
 *   2. ทุก selector ขึ้นต้น html body.<class> — น้ำหนักสูงกว่ากฎของธีมทั่วไป
 *   3. ทุกค่ามี !important (ยกเว้นตัวแปร :root และ @keyframes)
 * กฎความโค้งมุมอยู่ท้ายไฟล์ เพื่อทับค่ามุมสำรองของสวิตช์อื่น (แถบแท็ก ชิป การ์ด) เมื่อเปิดคู่กัน
 *
 * ⚠️ ห้ามใช้ * กับ font-family — จะทับฟอนต์ไอคอนแล้วไอคอนทั้งเว็บกลายเป็นสี่เหลี่ยม
 */

:root {
	--yd-sty-c1: #ff0066;
	--yd-sty-c2: #ff33cc;
	--yd-sty-c3: #c20532;
	--yd-sty-tag-text: #ff3565;
	--yd-sty-main-bg: #181818;
	--yd-sty-logo-w: 21%;
	--yd-sty-grad: linear-gradient(135deg, var(--yd-sty-c1), var(--yd-sty-c2));
	--yd-sty-ease: cubic-bezier(.2, .7, .2, 1);
}

/* =========================================================================
 * ตัวหนังสือ
 * ====================================================================== */

/* ไล่เฉพาะแท็กตัวหนังสือ และกันเครื่องเล่นวิดีโอ / แถบแอดมินไว้ */
html body.yd-sty-font-on,
html body.yd-sty-font-on :is(h1, h2, h3, h4, h5, h6, p, a, li, dt, dd, span, div, label, td, th, button, input, select, textarea, strong, em, b, small, figcaption, blockquote, cite, time, output):not(.video-js *):not(#wpadminbar *):not(.jw-wrapper *) {
	font-family: var(--yd-sty-font) !important;
}

/* คืนฟอนต์ไอคอน — :not(#…) สองชั้นให้น้ำหนักระดับ id สูงกว่ากฎบน (ซึ่งมี :not(#wpadminbar *) หนึ่งชั้น) */
html body.yd-sty-font-on :is(.fa, [class^="fa-"], [class*=" fa-"]):not(#yd-sty-a):not(#yd-sty-b) {
	font-family: FontAwesome !important;
}

html body.yd-sty-tw .entry-header,
html body.yd-sty-tw .entry-header :is(span, h1, h2, h3, h4) {
	font-weight: var(--yd-sty-title-w) !important;
}

/* =========================================================================
 * ซ่อน
 * ====================================================================== */

html body.yd-sty-m-hide-search .header-search {
	display: none !important;
}

html body.yd-sty-m-hide-rating .rating-bar {
	display: none !important;
}

html body.yd-sty-m-hide-list-titles :is(.categories-list, .actors-list) .thumb-block .entry-header {
	display: none !important;
}

html body.yd-sty-m-hide-filters #filters :is(.filters-select, .filters-options) {
	display: none !important;
}

/* =========================================================================
 * สไตล์จากเว็บเดิม
 * ====================================================================== */

html body.yd-sty-m-thumb-clear .thumb-block .post-thumbnail {
	background-color: transparent !important;
}

/* ---------- แถบปุ่มแท็กไล่สี ---------- */

html body.yd-sty-m-tagbar .btn-ctn-wrapper {
	position: relative !important;
}

html body.yd-sty-m-tagbar .btn-ctn {
	display: flex !important;
	gap: 10px !important;
	overflow-x: auto !important;
	padding: 20px 10px 10px !important;
	white-space: nowrap !important;
	background: var(--yd-sty-grad) !important;
	scrollbar-color: var(--yd-sty-c3) transparent !important;
	scrollbar-width: thin !important;
}

/* เงาจางด้านขวา บอกว่าเลื่อนต่อได้ */
html body.yd-sty-m-tagbar .btn-ctn::after {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 30px !important;
	pointer-events: none !important;
	background: linear-gradient(90deg, transparent, var(--yd-sty-c2)) !important;
}

html body.yd-sty-m-tagbar .btn-ctn::-webkit-scrollbar {
	height: 8px !important;
}

html body.yd-sty-m-tagbar .btn-ctn::-webkit-scrollbar-thumb {
	background-color: var(--yd-sty-c3) !important;
	border-radius: 10px !important;
}

html body.yd-sty-m-tagbar .tg-btn {
	display: inline-block !important;
	flex: none !important;
	padding: 15px !important;
	background-color: #fff !important;
	color: var(--yd-sty-tag-text) !important;
	border: 1px solid #3c1c72 !important;
	border-radius: 5px !important;
	cursor: pointer !important;
	text-align: center !important;
	text-decoration: none !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	transition: background-color .3s, color .3s, border-color .3s !important;
}

html body.yd-sty-m-tagbar .tg-btn:hover {
	background-color: var(--yd-sty-c3) !important;
	color: #fff !important;
	border-color: var(--yd-sty-c3) !important;
}

html body.yd-sty-m-tagbar .tg-btn i {
	margin-right: 5px !important;
}

/* ของเดิมเป็นตัวขาวบนพื้นขาว มองไม่เห็น — ให้พื้นเป็นสีเข้มแทน */
html body.yd-sty-m-tagbar .tg-btn.primary-tag {
	background-color: var(--yd-sty-c3) !important;
	border-color: var(--yd-sty-c3) !important;
	color: #fff !important;
}

html body.yd-sty-m-tagbar .tg-btn.primary-tag:hover {
	background-color: #fff !important;
	color: var(--yd-sty-tag-text) !important;
}

@media (max-width: 575.98px) {
	html body.yd-sty-m-tagbar .btn-ctn {
		flex-wrap: nowrap !important;
	}
}

/* ---------- โลโก้ลายน้ำ ---------- */

html body.yd-sty-m-logo-overlay img.logoimg {
	position: absolute !important;
	top: 0 !important;
	left: inherit !important;
	bottom: inherit !important;
	padding: 1px 3px !important;
	width: var(--yd-sty-logo-w) !important;
	height: auto !important;
}

/* ---------- กล่องเนื้อหาหลักเป็นการ์ด ---------- */

html body.yd-sty-m-main-card .site-main.with-sidebar-right {
	background-color: var(--yd-sty-main-bg) !important;
	border-radius: 8px !important;
	box-shadow: 0 0 14px 0 rgb(255 255 255 / 18%) !important;
	padding: 15px !important;
}

@media (max-width: 1024px) {
	html body.yd-sty-m-mobile-banner .hl-bnn {
		display: block !important;
		padding: 10px !important;
	}

	html body.yd-sty-m-slider-shadow .bx-controls {
		border-radius: 10px !important;
		box-shadow: 0 8px 17px 0 rgb(0 0 0 / 20%), 0 6px 6px 0 rgb(0 0 0 / 19%) !important;
	}
}

/* =========================================================================
 * สไตล์ยุคใหม่
 * ====================================================================== */

/* ---------- หัวเว็บกระจกฝ้า (Apple) ---------- */

html body.yd-sty-m-glass-header #masthead {
	position: sticky !important;
	top: 0 !important;
	z-index: 999 !important;
	background-color: rgb(18 18 18 / 72%) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
	backdrop-filter: saturate(180%) blur(20px) !important;
	border-bottom: 1px solid rgb(255 255 255 / 8%) !important;
}

html body.admin-bar.yd-sty-m-glass-header #masthead {
	top: 32px !important;
}

@media (max-width: 782px) {
	html body.admin-bar.yd-sty-m-glass-header #masthead {
		top: 46px !important;
	}
}

/* ---------- ชิปแท็ก (YouTube) — วางหลังแถบแท็ก ให้ชนะเมื่อเปิดคู่กัน ---------- */

html body.yd-sty-m-chip-tags .btn-ctn {
	background: transparent !important;
	padding: 12px 10px !important;
	gap: 12px !important;
}

html body.yd-sty-m-chip-tags .btn-ctn::after {
	background: linear-gradient(90deg, transparent, rgb(15 15 15 / 95%)) !important;
}

html body.yd-sty-m-chip-tags .tg-btn {
	background-color: rgb(255 255 255 / 10%) !important;
	color: #f1f1f1 !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 8px 12px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	transition: background-color .2s !important;
}

html body.yd-sty-m-chip-tags .tg-btn:hover {
	background-color: rgb(255 255 255 / 20%) !important;
}

html body.yd-sty-m-chip-tags .tg-btn.primary-tag {
	background-color: #f1f1f1 !important;
	color: #0f0f0f !important;
}

/* ---------- เงานุ่ม (Apple) ---------- */

html body.yd-sty-m-soft-shadow :is(#sidebar .widget, .site-main.with-sidebar-right) {
	box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 8px 28px rgb(0 0 0 / 28%) !important;
}

html body.yd-sty-m-soft-shadow .thumb-block .post-thumbnail {
	box-shadow: 0 2px 6px rgb(0 0 0 / 18%), 0 10px 24px rgb(0 0 0 / 22%) !important;
}

/* ---------- ป้ายกระจกฝ้า ---------- */

html body.yd-sty-m-glass-badge :is(span.views, span.duration) {
	background-color: rgb(0 0 0 / 42%) !important;
	-webkit-backdrop-filter: blur(8px) saturate(160%) !important;
	backdrop-filter: blur(8px) saturate(160%) !important;
	border: 1px solid rgb(255 255 255 / 14%) !important;
	color: #fff !important;
}

html body.yd-sty-m-glass-badge span.hd-video {
	background: var(--yd-sty-grad) !important;
	color: #fff !important;
	border: 0 !important;
}

/* ---------- ปุ่มเด่นไล่สี ---------- */

html body.yd-sty-m-btn-gradient :is(.btn-yedde, .pagination .current, .tg-btn.primary-tag) {
	background-color: var(--yd-sty-c1) !important;
	background-image: var(--yd-sty-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
}

html body.yd-sty-m-btn-gradient .btn-yedde {
	box-shadow: 0 6px 18px -6px var(--yd-sty-c1) !important;
	transition: filter .2s, transform .2s var(--yd-sty-ease) !important;
}

html body.yd-sty-m-btn-gradient .btn-yedde:hover {
	filter: brightness(1.08) !important;
	transform: translateY(-1px) !important;
}

/* ---------- ขีดสีหน้าหัวข้อ ---------- */

html body.yd-sty-m-title-bar .widget-title {
	position: relative !important;
	padding-left: 14px !important;
}

html body.yd-sty-m-title-bar .widget-title::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 18% !important;
	bottom: 18% !important;
	width: 4px !important;
	border-radius: 4px !important;
	background: linear-gradient(180deg, var(--yd-sty-c1), var(--yd-sty-c2)) !important;
}

/* =========================================================================
 * การเคลื่อนไหว
 * ====================================================================== */

html body.yd-sty-m-hover-zoom .thumb-block .post-thumbnail {
	overflow: hidden !important;
}

html body.yd-sty-m-hover-zoom .thumb-block .post-thumbnail-container img {
	transition: transform .45s var(--yd-sty-ease) !important;
}

html body.yd-sty-m-hover-zoom .thumb-block:hover .post-thumbnail-container img {
	transform: scale(1.06) !important;
}

html body.yd-sty-m-hover-lift .thumb-block {
	transition: transform .25s var(--yd-sty-ease) !important;
}

html body.yd-sty-m-hover-lift .thumb-block:hover {
	transform: translateY(-4px) !important;
}

html body.yd-sty-m-hover-lift .thumb-block .post-thumbnail {
	transition: box-shadow .25s ease !important;
}

html body.yd-sty-m-hover-lift .thumb-block:hover .post-thumbnail {
	box-shadow: 0 14px 28px -8px rgb(0 0 0 / 60%) !important;
}

/* เงานีออน (TikTok) — วางหลัง hover-lift ให้ชนะเมื่อเปิดคู่กัน */
html body.yd-sty-m-neon-hover .thumb-block .post-thumbnail {
	transition: box-shadow .25s ease !important;
}

html body.yd-sty-m-neon-hover .thumb-block:hover .post-thumbnail {
	box-shadow: -4px -4px 0 0 var(--yd-sty-c1), 4px 4px 0 0 var(--yd-sty-c2), 0 12px 30px rgb(0 0 0 / 50%) !important;
}

html body.yd-sty-m-play-icon .thumb-block .post-thumbnail {
	position: relative !important;
}

html body.yd-sty-m-play-icon .thumb-block .post-thumbnail::after {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	z-index: 5 !important;
	width: 56px !important;
	height: 56px !important;
	margin: -28px 0 0 -28px !important;
	border-radius: 50% !important;
	background: rgb(0 0 0 / 45%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 24px no-repeat !important;
	-webkit-backdrop-filter: blur(6px) !important;
	backdrop-filter: blur(6px) !important;
	opacity: 0 !important;
	transform: scale(.8) !important;
	transition: opacity .2s ease, transform .25s var(--yd-sty-ease) !important;
	pointer-events: none !important;
}

html body.yd-sty-m-play-icon .thumb-block:hover .post-thumbnail::after {
	opacity: 1 !important;
	transform: scale(1) !important;
}

/* fill-mode backwards — จบแล้วคืนค่าให้ :hover ใช้ transform ต่อได้ */
@keyframes yd-sty-fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

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

html body.yd-sty-m-fade-in .videos-list .thumb-block {
	animation: yd-sty-fade-up .5s var(--yd-sty-ease) backwards !important;
}

html body.yd-sty-m-fade-in .videos-list .thumb-block:nth-child(2) { animation-delay: .04s !important; }
html body.yd-sty-m-fade-in .videos-list .thumb-block:nth-child(3) { animation-delay: .08s !important; }
html body.yd-sty-m-fade-in .videos-list .thumb-block:nth-child(4) { animation-delay: .12s !important; }
html body.yd-sty-m-fade-in .videos-list .thumb-block:nth-child(5) { animation-delay: .16s !important; }
html body.yd-sty-m-fade-in .videos-list .thumb-block:nth-child(6) { animation-delay: .2s !important; }
html body.yd-sty-m-fade-in .videos-list .thumb-block:nth-child(7) { animation-delay: .24s !important; }
html body.yd-sty-m-fade-in .videos-list .thumb-block:nth-child(8) { animation-delay: .28s !important; }
html body.yd-sty-m-fade-in .videos-list .thumb-block:nth-child(n+9) { animation-delay: .32s !important; }

@media (prefers-reduced-motion: reduce) {
	html body.yd-sty-m-fade-in .videos-list .thumb-block {
		animation: none !important;
	}

	html body:is(.yd-sty-m-hover-zoom, .yd-sty-m-hover-lift) .thumb-block:hover,
	html body.yd-sty-m-hover-zoom .thumb-block:hover .post-thumbnail-container img {
		transform: none !important;
	}
}

/* =========================================================================
 * รายละเอียด
 * ====================================================================== */

html body.yd-sty-m-title-clamp .thumb-block .entry-header {
	height: auto !important;
	white-space: normal !important;
}

html body.yd-sty-m-title-clamp .thumb-block .entry-header :is(span, h2, h3, h4) {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
	overflow: hidden !important;
	white-space: normal !important;
	line-height: 1.4 !important;
	min-height: 2.8em !important;
}

html:has(> body.yd-sty-m-scrollbar) {
	scrollbar-color: var(--yd-sty-c3) #111 !important;
}

html:has(> body.yd-sty-m-scrollbar)::-webkit-scrollbar {
	width: 10px !important;
	background: #111 !important;
}

html:has(> body.yd-sty-m-scrollbar)::-webkit-scrollbar-thumb {
	background: var(--yd-sty-c3) !important;
	border: 2px solid #111 !important;
	border-radius: 10px !important;
}

html body.yd-sty-m-selection ::selection {
	background: var(--yd-sty-c1) !important;
	color: #fff !important;
}

/* =========================================================================
 * ความโค้งมุม — ท้ายไฟล์เสมอ ให้ทับมุมสำรองของสวิตช์ด้านบน
 * ====================================================================== */

html body.yd-sty-r-btn :is(button, .button, input[type="submit"], input[type="button"], .btn, .btn-yedde) {
	border-radius: var(--yd-sty-r-btn) !important;
}

html body.yd-sty-r-thumb :is(.post-thumbnail-container img, .thumb-block .post-thumbnail, .thumb-block .post-thumbnail-container, .thumb-block .video-overlay) {
	border-radius: var(--yd-sty-r-thumb) !important;
}

html body.yd-sty-r-badge :is(span.views, span.duration, span.hd-video) {
	border-radius: var(--yd-sty-r-badge) !important;
}

html body.yd-sty-r-tag .tg-btn {
	border-radius: var(--yd-sty-r-tag) !important;
}

html body.yd-sty-r-box :is(.site-main.with-sidebar-right, .bx-controls) {
	border-radius: var(--yd-sty-r-box) !important;
}

html body.yd-sty-r-widget :is(#sidebar .widget, .widget-area .widget) {
	border-radius: var(--yd-sty-r-widget) !important;
}

html body.yd-sty-r-input :is(input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], select, textarea) {
	border-radius: var(--yd-sty-r-input) !important;
}