/*
 * YD-Header Footer — หน้าเว็บจริง (ภาพจำลองในหลังบ้านโหลดไฟล์เดียวกัน)
 *
 * หัวเว็บแบบ YouTube · แถบล่างแบบ TikTok · เมนูข้าง · ช่องค้นหาเต็มจอ · ท้ายเว็บใหม่
 * ทุก selector ขึ้นต้น html body และค่าหลักมี !important — CSS ของธีม (button / input / a / nav)
 * ชอบใส่สไตล์กับแท็กตรง ๆ ต้องทับให้ได้ทุกกรณี
 *
 * ตัวแปรสีมาจาก inline :root (inc/registry.php → yd_hf_root_css) — ค่าข้างล่างเป็นค่าสำรอง
 * จอแคบ = 760px ลงไป (ช่องค้นหากลายเป็นไอคอน แถบล่างโผล่)
 */

:root {
	--hf-bg: #0f0f0f;
	--hf-surface: #272727;
	--hf-text: #f1f1f1;
	--hf-muted: #aaaaaa;
	--hf-accent: #ff0033;
	--hf-neon1: #25f4ee;
	--hf-neon2: #fe2c55;
	--hf-bg-rgb: 15 15 15;
	--hf-text-rgb: 241 241 241;
	--hf-line: rgb(var(--hf-text-rgb) / 12%);
	--hf-hover: rgb(var(--hf-text-rgb) / 10%);
	--hf-header-h: 56px;
	--hf-bottom-h: 56px;
	--hf-logo-h: 30px;
	--hf-ease: cubic-bezier(.2, .7, .2, 1);
	--hf-font: Roboto, "Noto Sans Thai", "Leelawadee UI", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ธีมบางตัวใส่ overflow:hidden ที่ #page ทำให้หัวเว็บติดบนไม่ได้ — clip ตัดส่วนเกินได้โดยไม่พัง sticky */
html body.yd-hf-on:not(.yd-hf-not-sticky) #page {
	overflow: visible !important;
	overflow-x: clip !important;
}

html body.yd-hf-on .yd-hf-svg {
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	flex: none !important;
}

html body.yd-hf-on :is(.yd-hf-header, .yd-hf-drawer, .yd-hf-sheet, .yd-hf-bottom, .yd-hf-footer) {
	font-family: var(--hf-font) !important;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box !important;
}

html body.yd-hf-on :is(.yd-hf-header, .yd-hf-drawer, .yd-hf-sheet, .yd-hf-bottom, .yd-hf-footer) :is(a, button, input, span, div, nav, p, form) {
	box-sizing: border-box !important;
}

/* ปุ่มไอคอนกลม */
html body.yd-hf-on .yd-hf-iconbtn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--hf-text) !important;
	box-shadow: none !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s !important;
}

html body.yd-hf-on .yd-hf-iconbtn:hover,
html body.yd-hf-on .yd-hf-iconbtn:focus-visible {
	background: var(--hf-hover) !important;
	outline: none !important;
}

/* =========================================================================
 * หัวเว็บ
 * ====================================================================== */

html body.yd-hf-on .yd-hf-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 9990 !important;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--hf-bg) !important;
	color: var(--hf-text) !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: none;
	transition: transform .25s var(--hf-ease) !important;
}

html body.yd-hf-on.admin-bar .yd-hf-header {
	top: 32px !important;
}

@media (max-width: 782px) {
	html body.yd-hf-on.admin-bar .yd-hf-header {
		top: 46px !important;
	}
}

@media (max-width: 600px) {
	html body.yd-hf-on.admin-bar .yd-hf-header {
		top: 0 !important;
	}
}

html body.yd-hf-on.yd-hf-not-sticky .yd-hf-header {
	position: relative !important;
	top: 0 !important;
}

html body.yd-hf-on.yd-hf-no-header .yd-hf-header {
	display: none !important;
}

html body.yd-hf-on .yd-hf-bar {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	height: var(--hf-header-h) !important;
	margin: 0 !important;
	padding: 0 16px !important;
}

html body.yd-hf-on .yd-hf-start {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex: none !important;
	min-width: 0 !important;
}

html body.yd-hf-on .yd-hf-logo {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	min-width: 0 !important;
	color: var(--hf-text) !important;
	text-decoration: none !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	letter-spacing: -.4px !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body.yd-hf-on .yd-hf-logo-img {
	display: block !important;
	width: auto !important;
	height: var(--hf-logo-h) !important;
	max-width: 180px !important;
	margin: 0 !important;
	object-fit: contain !important;
}

html body.yd-hf-on .yd-hf-logo-mark {
	display: none !important;
	color: var(--hf-accent) !important;
}

html body.yd-hf-on .yd-hf-logo-mark .yd-hf-svg {
	width: 28px !important;
	height: 28px !important;
	fill: var(--hf-accent) !important;
	stroke: var(--hf-accent) !important;
}

html body.yd-hf-on .yd-hf-logo-mark .yd-hf-svg path {
	fill: #fff !important;
	stroke: #fff !important;
}

html body.yd-hf-on .yd-hf-logo-text {
	display: none !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* ไม่มีรูปโลโก้ = ไอคอนเล่นสีเด่น + ชื่อเว็บ */
html body.yd-hf-on.yd-hf-logo-text .yd-hf-logo-img {
	display: none !important;
}

html body.yd-hf-on.yd-hf-logo-text :is(.yd-hf-logo-mark, .yd-hf-logo-text) {
	display: inline-block !important;
}

/* ช่องค้นหาแคปซูล */
html body.yd-hf-on .yd-hf-search {
	display: flex !important;
	flex: 1 1 auto !important;
	align-items: stretch !important;
	max-width: 640px !important;
	height: 40px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

html body.yd-hf-on .yd-hf-search input[type="search"] {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 4px 0 18px !important;
	border: 1px solid var(--hf-line) !important;
	border-right: 0 !important;
	border-radius: 40px 0 0 40px !important;
	background: rgb(var(--hf-bg-rgb) / 100%) !important;
	color: var(--hf-text) !important;
	font-size: 16px !important;
	line-height: 38px !important;
	box-shadow: inset 0 1px 2px rgb(0 0 0 / 15%) !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

html body.yd-hf-on .yd-hf-search input[type="search"]::placeholder {
	color: var(--hf-muted) !important;
	opacity: 1 !important;
}

html body.yd-hf-on .yd-hf-search input[type="search"]:focus {
	border-color: #1c62b9 !important;
	box-shadow: inset 0 1px 2px rgb(0 0 0 / 25%) !important;
}

html body.yd-hf-on .yd-hf-search-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 64px !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--hf-line) !important;
	border-radius: 0 40px 40px 0 !important;
	background: var(--hf-surface) !important;
	color: var(--hf-text) !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

html body.yd-hf-on .yd-hf-search-btn .yd-hf-svg {
	width: 22px !important;
	height: 22px !important;
}

html body.yd-hf-on .yd-hf-end {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex: none !important;
	margin-left: auto !important;
}

html body.yd-hf-on .yd-hf-search-open {
	display: none !important;
}

html body.yd-hf-on .yd-hf-cta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	height: 36px !important;
	margin: 0 !important;
	padding: 0 14px 0 10px !important;
	border: 1px solid var(--hf-line) !important;
	border-radius: 18px !important;
	background: transparent !important;
	color: var(--hf-text) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: background-color .15s !important;
}

html body.yd-hf-on .yd-hf-cta:hover {
	background: var(--hf-hover) !important;
}

html body.yd-hf-on .yd-hf-cta .yd-hf-svg {
	width: 22px !important;
	height: 22px !important;
}

html body.yd-hf-on .yd-hf-cta-ico {
	display: inline-flex !important;
}

html body.yd-hf-on.yd-hf-no-menu-btn .yd-hf-menu-btn,
html body.yd-hf-on.yd-hf-no-search :is(.yd-hf-search, .yd-hf-search-open),
html body.yd-hf-on.yd-hf-no-cta .yd-hf-cta,
html body.yd-hf-on.yd-hf-no-chips .yd-hf-chips {
	display: none !important;
}

/* แถบชิป */
html body.yd-hf-on .yd-hf-chips {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--hf-bg) !important;
}

html body.yd-hf-on .yd-hf-chips-track {
	display: flex !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 4px 16px 12px !important;
	overflow-x: auto !important;
	scrollbar-width: none !important;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

html body.yd-hf-on .yd-hf-chips-track::-webkit-scrollbar {
	display: none !important;
}

html body.yd-hf-on .yd-hf-chip {
	display: inline-flex !important;
	flex: none !important;
	align-items: center !important;
	height: 32px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--hf-surface) !important;
	color: var(--hf-text) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: background-color .15s !important;
}

html body.yd-hf-on .yd-hf-chip:hover {
	background: rgb(var(--hf-text-rgb) / 20%) !important;
}

html body.yd-hf-on .yd-hf-chip.is-active {
	background: var(--hf-text) !important;
	color: var(--hf-bg) !important;
}

/* โฆษณาหัวเว็บ/ท้ายเว็บของธีมที่ยกมา */
html body.yd-hf-on .yd-hf-ads {
	margin: 0 !important;
	padding: 8px 0 !important;
	text-align: center !important;
	background: transparent !important;
}

html body.yd-hf-on .yd-hf-ads img {
	max-width: 100% !important;
	height: auto !important;
}

@media (max-width: 760px) {
	html body.yd-hf-on .yd-hf-bar {
		gap: 4px !important;
		padding: 0 6px 0 4px !important;
		height: 48px !important;
	}

	html body.yd-hf-on .yd-hf-search {
		display: none !important;
	}

	html body.yd-hf-on .yd-hf-search-open {
		display: inline-flex !important;
	}

	html body.yd-hf-on .yd-hf-end {
		gap: 2px !important;
	}

	/* มือถือ: ปุ่มเสริมเหลือไอคอน */
	html body.yd-hf-on .yd-hf-cta {
		width: 40px !important;
		height: 40px !important;
		padding: 0 !important;
		justify-content: center !important;
		border: 0 !important;
		border-radius: 50% !important;
	}

	html body.yd-hf-on .yd-hf-cta-text {
		display: none !important;
	}

	html body.yd-hf-on .yd-hf-logo {
		font-size: 17px !important;
	}

	html body.yd-hf-on .yd-hf-logo-img {
		max-width: 132px !important;
		height: min(var(--hf-logo-h), 34px) !important;
	}

	html body.yd-hf-on .yd-hf-chips-track {
		gap: 8px !important;
		padding: 2px 12px 10px !important;
	}

	/* เลื่อนลงซ่อน เลื่อนขึ้นโชว์ — front.js ใส่ class ที่ <html> */
	html.yd-hf-header-hidden body.yd-hf-on.yd-hf-hide-scroll:not(.yd-hf-not-sticky) .yd-hf-header {
		transform: translateY(-110%) !important;
	}
}

/* =========================================================================
 * เมนูข้าง
 * ====================================================================== */

html body.yd-hf-on .yd-hf-scrim {
	position: fixed !important;
	inset: 0 !important;
	z-index: 99998 !important;
	background: rgb(0 0 0 / 50%) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity .25s, visibility .25s !important;
}

html.yd-hf-drawer-open body.yd-hf-on .yd-hf-scrim {
	opacity: 1 !important;
	visibility: visible !important;
}

html.yd-hf-drawer-open body.yd-hf-on,
html.yd-hf-search-open body.yd-hf-on {
	overflow: hidden !important;
}

html body.yd-hf-on .yd-hf-drawer {
	position: fixed !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: 99999 !important;
	display: block !important;
	width: min(300px, 86vw) !important;
	margin: 0 !important;
	padding: 0 0 calc(16px + env(safe-area-inset-bottom)) !important;
	background: var(--hf-bg) !important;
	color: var(--hf-text) !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	transform: translateX(-102%) !important;
	visibility: hidden !important;
	transition: transform .28s var(--hf-ease), visibility .28s !important;
	box-shadow: 8px 0 30px rgb(0 0 0 / 35%) !important;
}

html.yd-hf-drawer-open body.yd-hf-on .yd-hf-drawer {
	transform: none !important;
	visibility: visible !important;
}

html body.yd-hf-on.admin-bar .yd-hf-drawer {
	top: 32px !important;
}

@media (max-width: 782px) {
	html body.yd-hf-on.admin-bar .yd-hf-drawer {
		top: 0 !important;
	}
}

html body.yd-hf-on .yd-hf-drawer-head {
	position: sticky !important;
	top: 0 !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	height: var(--hf-header-h) !important;
	padding: 0 16px 0 16px !important;
	background: var(--hf-bg) !important;
}

html body.yd-hf-on .yd-hf-drawer-sec {
	display: block !important;
	margin: 0 !important;
	padding: 12px !important;
	border-top: 1px solid var(--hf-line) !important;
}

html body.yd-hf-on .yd-hf-drawer-quick {
	border-top: 0 !important;
	padding-top: 4px !important;
}

html body.yd-hf-on .yd-hf-drawer-title {
	margin: 4px 12px 8px !important;
	padding: 0 !important;
	color: var(--hf-text) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

html body.yd-hf-on .yd-hf-drawer-link {
	display: flex !important;
	align-items: center !important;
	gap: 22px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border-radius: 10px !important;
	background: transparent !important;
	color: var(--hf-text) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	text-decoration: none !important;
	transition: background-color .15s !important;
}

html body.yd-hf-on .yd-hf-drawer-link:hover,
html body.yd-hf-on .yd-hf-drawer-link:focus-visible {
	background: var(--hf-hover) !important;
	outline: none !important;
}

html body.yd-hf-on .yd-hf-drawer-link.is-active {
	background: var(--hf-surface) !important;
	font-weight: 600 !important;
}

html body.yd-hf-on .yd-hf-drawer-link > span:not(.yd-hf-count):not(.yd-hf-dot) {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html body.yd-hf-on .yd-hf-dot {
	width: 24px !important;
	height: 24px !important;
	flex: none !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, var(--hf-neon1), var(--hf-neon2)) !important;
	opacity: .85 !important;
}

html body.yd-hf-on .yd-hf-count {
	flex: none !important;
	color: var(--hf-muted) !important;
	font-size: 12px !important;
}

html body.yd-hf-on .yd-hf-drawer-foot {
	margin: 0 !important;
	padding: 16px 24px 8px !important;
	border-top: 1px solid var(--hf-line) !important;
	color: var(--hf-muted) !important;
	font-size: 12px !important;
	line-height: 1.6 !important;
}

html body.yd-hf-on.yd-hf-no-drawer-menu .yd-hf-drawer-menu,
html body.yd-hf-on.yd-hf-no-drawer-cats .yd-hf-drawer-cats {
	display: none !important;
}

/* =========================================================================
 * ช่องค้นหาเต็มจอ
 * ====================================================================== */

html body.yd-hf-on .yd-hf-sheet {
	position: fixed !important;
	inset: 0 !important;
	z-index: 99999 !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--hf-bg) !important;
	color: var(--hf-text) !important;
	overflow-y: auto !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(-12px) !important;
	transition: opacity .2s, transform .25s var(--hf-ease), visibility .25s !important;
}

html.yd-hf-search-open body.yd-hf-on .yd-hf-sheet {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

html body.yd-hf-on .yd-hf-sheet-form {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	height: var(--hf-header-h) !important;
	margin: 0 !important;
	padding: 0 6px !important;
}

html body.yd-hf-on .yd-hf-sheet-form input[type="search"] {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 20px !important;
	background: var(--hf-surface) !important;
	color: var(--hf-text) !important;
	font-size: 16px !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

html body.yd-hf-on .yd-hf-sheet-title {
	margin: 16px 16px 10px !important;
	padding: 0 !important;
	color: var(--hf-muted) !important;
	font-size: 13px !important;
}

html body.yd-hf-on .yd-hf-sheet-chips {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 16px 24px !important;
}

/* =========================================================================
 * แถบล่าง (TikTok)
 * ====================================================================== */

html body.yd-hf-on .yd-hf-bottom {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 9991 !important;
	display: flex !important;
	align-items: stretch !important;
	justify-content: space-around !important;
	height: calc(var(--hf-bottom-h) + env(safe-area-inset-bottom)) !important;
	margin: 0 !important;
	padding: 0 4px env(safe-area-inset-bottom) !important;
	background: rgb(var(--hf-bg-rgb) / 94%) !important;
	border-top: 1px solid var(--hf-line) !important;
	-webkit-backdrop-filter: saturate(160%) blur(16px) !important;
	backdrop-filter: saturate(160%) blur(16px) !important;
}

html body.yd-hf-on:not(.yd-hf-bottom-on) .yd-hf-bottom {
	display: none !important;
}

html body.yd-hf-on .yd-hf-btab {
	display: flex !important;
	flex: 1 1 0 !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 3px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--hf-muted) !important;
	font-size: 10.5px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: color .15s !important;
}

html body.yd-hf-on .yd-hf-btab .yd-hf-svg {
	width: 25px !important;
	height: 25px !important;
	transition: transform .15s var(--hf-ease) !important;
}

html body.yd-hf-on .yd-hf-btab:active .yd-hf-ico .yd-hf-svg {
	transform: scale(.88) !important;
}

html body.yd-hf-on .yd-hf-btab.is-active {
	color: var(--hf-text) !important;
	font-weight: 600 !important;
}

html body.yd-hf-on .yd-hf-btab.is-active .yd-hf-svg {
	stroke-width: 2.5 !important;
}

html body.yd-hf-on .yd-hf-ico {
	display: inline-flex !important;
}

html body.yd-hf-on .yd-hf-lbl {
	display: block !important;
	max-width: 100% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

/* ปุ่มกลางแบบ TikTok: แคปซูลขาว + ขอบเหลื่อมฟ้า/ชมพู */
html body.yd-hf-on .yd-hf-plus {
	position: relative !important;
	isolation: isolate !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 46px !important;
	height: 30px !important;
	border-radius: 9px !important;
	background: var(--hf-text) !important;
	color: var(--hf-bg) !important;
}

html body.yd-hf-on .yd-hf-plus::before,
html body.yd-hf-on .yd-hf-plus::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -1 !important;
	border-radius: inherit !important;
}

html body.yd-hf-on .yd-hf-plus::before {
	background: var(--hf-neon1) !important;
	transform: translateX(-4px) !important;
}

html body.yd-hf-on .yd-hf-plus::after {
	background: var(--hf-neon2) !important;
	transform: translateX(4px) !important;
}

html body.yd-hf-on .yd-hf-plus .yd-hf-svg {
	width: 22px !important;
	height: 22px !important;
	stroke-width: 2.8 !important;
}

html body.yd-hf-on .yd-hf-btab-center .yd-hf-lbl {
	display: none !important;
}

html body.yd-hf-on.yd-hf-center-plain .yd-hf-plus {
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	color: inherit !important;
}

html body.yd-hf-on.yd-hf-center-plain .yd-hf-plus::before,
html body.yd-hf-on.yd-hf-center-plain .yd-hf-plus::after {
	display: none !important;
}

html body.yd-hf-on.yd-hf-center-plain .yd-hf-plus .yd-hf-svg {
	width: 25px !important;
	height: 25px !important;
	stroke-width: 2 !important;
}

html body.yd-hf-on.yd-hf-center-plain .yd-hf-btab-center .yd-hf-lbl {
	display: block !important;
}

html body.yd-hf-on.yd-hf-no-labels .yd-hf-lbl {
	display: none !important;
}

html body.yd-hf-on.yd-hf-no-labels .yd-hf-btab .yd-hf-svg {
	width: 27px !important;
	height: 27px !important;
}

/* เว้นที่ท้ายหน้าให้แถบล่าง + ย้ายปุ่มกลับขึ้นบนของธีมไม่ให้ทับ */
html body.yd-hf-on.yd-hf-bottom-on {
	padding-bottom: calc(var(--hf-bottom-h) + env(safe-area-inset-bottom)) !important;
}

html body.yd-hf-on.yd-hf-bottom-on #back-to-top {
	bottom: calc(var(--hf-bottom-h) + 14px + env(safe-area-inset-bottom)) !important;
}

@media (min-width: 761px) {
	html body.yd-hf-on.yd-hf-bottom-on:not(.yd-hf-bottom-all) .yd-hf-bottom {
		display: none !important;
	}

	html body.yd-hf-on.yd-hf-bottom-on:not(.yd-hf-bottom-all) {
		padding-bottom: 0 !important;
	}

	html body.yd-hf-on.yd-hf-bottom-on:not(.yd-hf-bottom-all) #back-to-top {
		bottom: 20px !important;
	}

	/* ทุกจอ: บนคอมแถบล่างเป็นแคปซูลลอยกลางจอ */
	html body.yd-hf-on.yd-hf-bottom-all .yd-hf-bottom {
		left: 50% !important;
		right: auto !important;
		bottom: 16px !important;
		width: 420px !important;
		height: 60px !important;
		padding: 0 8px !important;
		border: 1px solid var(--hf-line) !important;
		border-radius: 20px !important;
		transform: translateX(-50%) !important;
		box-shadow: 0 12px 30px rgb(0 0 0 / 35%) !important;
	}

	html body.yd-hf-on.yd-hf-bottom-all {
		padding-bottom: 92px !important;
	}
}

/* =========================================================================
 * ท้ายเว็บ
 * ====================================================================== */

html body.yd-hf-on .yd-hf-footer {
	display: block !important;
	clear: both !important;
	width: 100% !important;
	margin: 32px 0 0 !important;
	padding: 32px 16px 28px !important;
	background: var(--hf-bg) !important;
	color: var(--hf-muted) !important;
	border: 0 !important;
	border-top: 1px solid var(--hf-line) !important;
	text-align: center !important;
}

html body.yd-hf-on.yd-hf-footer-theme .yd-hf-footer {
	display: none !important;
}

html body.yd-hf-on .yd-hf-footer-in {
	display: grid !important;
	justify-items: center !important;
	gap: 18px !important;
	max-width: 1100px !important;
	margin: 0 auto !important;
}

html body.yd-hf-on .yd-hf-footer-logo .yd-hf-logo-img {
	height: 34px !important;
	opacity: .92 !important;
}

html body.yd-hf-on .yd-hf-footer-widgets {
	max-width: 860px !important;
	color: var(--hf-muted) !important;
	font-size: 13.5px !important;
	line-height: 1.75 !important;
}

html body.yd-hf-on .yd-hf-footer-widgets :is(h1, h2, h3, h4) {
	margin: 14px 0 4px !important;
	color: var(--hf-text) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
}

html body.yd-hf-on .yd-hf-footer-widgets p {
	margin: 0 0 6px !important;
	color: var(--hf-muted) !important;
}

html body.yd-hf-on .yd-hf-footer-widgets a {
	color: var(--hf-text) !important;
}

html body.yd-hf-on .yd-hf-footer-widgets .widget {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

html body.yd-hf-on :is(.yd-hf-footer-menu, .yd-hf-footer-links) {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body.yd-hf-on :is(.yd-hf-footer-menu, .yd-hf-footer-links) a {
	display: inline-flex !important;
	align-items: center !important;
	height: 32px !important;
	padding: 0 14px !important;
	border-radius: 16px !important;
	background: var(--hf-surface) !important;
	color: var(--hf-text) !important;
	font-size: 13px !important;
	text-decoration: none !important;
}

html body.yd-hf-on :is(.yd-hf-footer-menu, .yd-hf-footer-links) a:hover {
	background: rgb(var(--hf-text-rgb) / 20%) !important;
}

html body.yd-hf-on .yd-hf-copy {
	color: var(--hf-muted) !important;
	font-size: 12px !important;
	line-height: 1.6 !important;
}

html body.yd-hf-on .yd-hf-copy a {
	color: var(--hf-text) !important;
}

html body.yd-hf-on.yd-hf-no-footer-logo .yd-hf-footer-logo,
html body.yd-hf-on.yd-hf-no-footer-widgets .yd-hf-footer-widgets,
html body.yd-hf-on.yd-hf-no-footer-menu .yd-hf-footer-menu {
	display: none !important;
}

/* เมนูเสริม: ปิดสวิตช์ หรือยังไม่มีลิงก์ = ไม่แสดง */
html body.yd-hf-on.yd-hf-no-drawer-links .yd-hf-drawer-links,
html body.yd-hf-on.yd-hf-no-chip-links .yd-hf-chip-link,
html body.yd-hf-on.yd-hf-no-footer-links .yd-hf-footer-links,
html body.yd-hf-on :is(.yd-hf-drawer-links, .yd-hf-footer-links).is-empty {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	html body.yd-hf-on :is(.yd-hf-header, .yd-hf-drawer, .yd-hf-sheet, .yd-hf-scrim) {
		transition: none !important;
	}
}