/*
 * HKWKK Custom: ระบบดีไซน์เว็บโรงเรียนฮั่วเคี้ยววิทยาลัย
 *
 * โครงไฟล์
 *   1. ตัวแปรสี/ฟอนต์ (ทับค่าของธีม)
 *   2. พื้นฐาน (ตัวอักษร ลิงก์ ปุ่ม)
 *   3. Header + เมนู
 *   4. หน้าแรก (hero, แถบวิ่ง, ทางลัด, ระดับชั้น ฯลฯ)
 *   5. Footer
 *   6. แอนิเมชัน
 */

/* ===================================================================
 * 1. ตัวแปร
 * ================================================================ */
:root,
body {
	/* สีโรงเรียน (ดึงจากโลโก้ #090EF9) โทนฟ้า-ขาว ไม่มีสีทอง */
	--hk-logo: #090ef9;
	--hk-blue: #1d3fd8;
	--hk-blue-hover: #1733b0;
	--hk-navy: #0b1b4d;
	--hk-navy-2: #12286b;
	--hk-sky: #4fa3f7;
	--hk-sky-soft: #eef3ff;
	--hk-line: #dce4f7;
	--hk-accent: #6cb8ff;
	--hk-accent-hover: #4aa3f5;
	--hk-accent-ink: #0b1b4d;
	--hk-ink: #0f1a3a;
	--hk-text: #3a4766;
	--hk-muted: #6b7799;
	--hk-white: #ffffff;

	--hk-radius: 14px;
	--hk-radius-lg: 22px;
	--hk-shadow: 0 10px 30px -12px rgba(11, 27, 77, 0.25);
	--hk-shadow-lg: 0 24px 60px -20px rgba(11, 27, 77, 0.35);
	--hk-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--hk-wrap: 1280px;
	--hk-gutter: clamp(16px, 4vw, 40px);
	--hk-section: clamp(56px, 7vw, 96px);
	--hk-header-h: 84px;
	--hk-adminbar: var(--wp-admin--admin-bar--height, 0px);

	/* ฟอนต์: เนื้อหาใช้ Sarabun (ทั้งไทยและอังกฤษ) / หัวข้อใช้ Prompt */
	--wp--preset--font-family--fontprimary: "Sarabun", sans-serif; /* เดิม Nunito: ไฟล์ฟอนต์ธีม 269KB ไม่ต้องโหลดแล้ว */
	--wp--preset--font-family--fontsecondary: "Prompt", "Sarabun", sans-serif;

	/* ทับชุดสีของธีม (เดิมเป็นเขียว/ส้มพีชของร้านเสริมสวย) ให้หน้าอื่นเป็นโทนฟ้าด้วย */
	--wp--preset--color--primary: var(--hk-blue);
	--wp--preset--color--primary-hover: var(--hk-blue-hover);
	--wp--preset--color--featured: var(--hk-accent);
	--wp--preset--color--mono-1: #24345e;
	--wp--preset--color--mono-2: var(--hk-text);
	--wp--preset--color--mono-3: var(--hk-sky-soft);
	--wp--preset--color--mono-4: #e4ebfb;
	--wp--preset--color--base: #ffffff;
}

/* ===================================================================
 * 2. พื้นฐาน
 * ================================================================ */
html {
	scroll-behavior: smooth;
}

body {
	/* เดิม Site Editor ตั้งพื้นหลังเป็นไล่สีน้ำเงิน ทำให้ section สีขาวกลายเป็นน้ำเงิน */
	background: #fff !important;
	color: var(--hk-text);
	line-height: 1.75; /* ภาษาไทยมีสระบน-ล่าง ต้องการระยะบรรทัดมากกว่าอังกฤษ */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-site-title {
	font-family: var(--wp--preset--font-family--fontsecondary);
	color: var(--hk-ink);
	line-height: 1.35;
	font-weight: 600;
}

.wp-block-navigation,
.wp-block-button__link {
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
}

a {
	transition: color 0.25s var(--hk-ease), opacity 0.25s var(--hk-ease);
}

::selection {
	background: var(--hk-accent);
	color: var(--hk-accent-ink);
}

:focus-visible {
	outline: 3px solid var(--hk-sky);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ปุ่ม: ใช้ class hk-btn-gold / hk-btn-blue / hk-btn-ghost บน block ปุ่ม */
.wp-block-button .wp-block-button__link {
	border-radius: 999px;
	padding: 0.8em 1.7em;
	font-size: 1rem;
	line-height: 1.2;
	transition: transform 0.35s var(--hk-ease), box-shadow 0.35s var(--hk-ease),
		background-color 0.25s var(--hk-ease), color 0.25s var(--hk-ease);
}

.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.hk-btn-gold .wp-block-button__link {
	background: var(--hk-accent);
	color: var(--hk-accent-ink);
	box-shadow: 0 10px 24px -10px rgba(108, 184, 255, 0.7);
}

.hk-btn-gold .wp-block-button__link:hover {
	background: var(--hk-accent-hover);
	color: var(--hk-accent-ink);
}

.hk-btn-blue .wp-block-button__link {
	background: var(--hk-blue);
	color: #fff;
	box-shadow: 0 10px 24px -12px rgba(29, 63, 216, 0.8);
}

.hk-btn-blue .wp-block-button__link:hover {
	background: var(--hk-blue-hover);
	color: #fff;
}

.hk-btn-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}

.hk-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.hk-btn-line .wp-block-button__link {
	background: transparent;
	color: var(--hk-blue);
	box-shadow: inset 0 0 0 1.5px var(--hk-blue);
}

.hk-btn-line .wp-block-button__link:hover {
	background: var(--hk-blue);
	color: #fff;
}

/* ปุ่มกระจกใสโทนทอง (สมัครเรียน) มีแสงวิ่งผ่านตอน hover
   ใช้กับ class hk-btn-glass และปุ่มทองที่อยู่บนพื้นน้ำเงินของหน้าย่อย */
.hk-btn-glass .wp-block-button__link,
.hk-page-hero .hk-btn-gold .wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(135deg, rgba(160, 214, 255, 0.42), rgba(108, 184, 255, 0.16));
	color: #fff;
	border: 1px solid rgba(180, 222, 255, 0.75);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 30px -10px rgba(108, 184, 255, 0.65);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.hk-btn-glass .wp-block-button__link::before,
.hk-page-hero .hk-btn-gold .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-20deg);
	transition: left 0.75s var(--hk-ease);
	z-index: -1;
}

.hk-btn-glass .wp-block-button__link:hover,
.hk-page-hero .hk-btn-gold .wp-block-button__link:hover {
	background: linear-gradient(135deg, rgba(160, 214, 255, 0.62), rgba(108, 184, 255, 0.32));
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 36px -10px rgba(108, 184, 255, 0.85);
}

.hk-btn-glass .wp-block-button__link:hover::before,
.hk-page-hero .hk-btn-gold .wp-block-button__link:hover::before {
	left: 120%;
}

/* ปุ่มกระจกบนพื้นสีอ่อน (เช่น การ์ดข้อมูล) ให้เป็นน้ำเงินแทน */
.hk-bg-soft .hk-btn-glass .wp-block-button__link,
.hk-info-card .hk-btn-glass .wp-block-button__link {
	background: var(--hk-blue);
	border-color: transparent;
	text-shadow: none;
}

/* ===================================================================
 * 3. Header + เมนู
 * ================================================================ */
.hk-site-header {
	position: sticky;
	top: var(--hk-adminbar);
	z-index: 100;
	margin: 0 !important;
}

/* ตัดช่องว่างสีขาวที่ธีมเว้นไว้ด้านบนหน้า (ทำให้ header ดูซ้อน/เหลื่อมในหน้าอื่น) */
.wp-site-blocks {
	padding-top: 0 !important;
}

.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

.hk-header {
	background: var(--hk-navy);
	color: #fff;
	transition: background-color 0.45s var(--hk-ease), box-shadow 0.45s var(--hk-ease),
		backdrop-filter 0.45s var(--hk-ease);
}

/* แถบบนสุด: เบอร์โทร / สามภาษา / Facebook */
.hk-topbar {
	background: rgba(0, 0, 0, 0.18);
	font-size: 0.82rem;
	color: #c9d6ff;
	overflow: hidden;
	max-height: 48px;
	transition: max-height 0.45s var(--hk-ease), opacity 0.35s var(--hk-ease);
}

.hk-topbar > .hk-inner {
	padding-top: 8px;
	padding-bottom: 8px;
	gap: 8px 24px;
}

.hk-topbar p {
	margin: 0;
}

.hk-topbar a {
	color: #fff;
	text-decoration: none;
}

.hk-topbar a:hover {
	color: var(--hk-accent);
}

.hk-topbar .hk-topbar-tag {
	letter-spacing: 0.04em;
}

.hk-topbar .hk-topbar-tag strong {
	color: var(--hk-accent);
	font-weight: 600;
}

.hk-inner {
	max-width: var(--hk-wrap);
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--hk-gutter);
	padding-right: var(--hk-gutter);
	box-sizing: content-box;
}

.hk-mainbar > .hk-inner {
	min-height: var(--hk-header-h);
	gap: 16px 28px;
	transition: min-height 0.45s var(--hk-ease);
}

/* โลโก้ + ชื่อโรงเรียน */
.hk-brand {
	gap: 14px;
	flex-wrap: nowrap !important;
	min-width: 0;
}

.hk-brand .hk-logo {
	margin: 0;
	flex: 0 0 auto;
}

.hk-brand .hk-logo img {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #fff;
	padding: 3px;
	box-shadow: 0 0 0 2px rgba(108, 184, 255, 0.85);
	transition: width 0.45s var(--hk-ease), height 0.45s var(--hk-ease);
}

.hk-brand-text {
	gap: 0 !important;
	min-width: 0;
}

.hk-brand-name {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 600;
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.3;
	white-space: nowrap;
}

.hk-brand-name a {
	color: #fff;
	text-decoration: none;
}

.hk-brand-sub {
	margin: 0 !important;
	font-size: 0.78rem;
	color: #9fb4f0;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* เมนูหลัก */
.hk-nav {
	font-size: 0.98rem;
	gap: 6px 26px;
}

.hk-nav .wp-block-navigation-item__content {
	color: #fff;
	padding: 10px 0;
	position: relative;
	text-decoration: none;
}

/* เส้นทองใต้เมนูตอน hover */
.hk-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 2px;
	background: var(--hk-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--hk-ease);
}

.hk-nav > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.hk-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* เมนูย่อย (dropdown) */
.hk-nav .wp-block-navigation__submenu-container {
	background: #fff !important;
	color: var(--hk-ink) !important;
	border: 0 !important;
	border-radius: var(--hk-radius);
	box-shadow: var(--hk-shadow-lg);
	padding: 10px !important;
	min-width: 240px !important;
	top: calc(100% + 8px) !important;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s var(--hk-ease), transform 0.35s var(--hk-ease), visibility 0.3s;
}

/* เมนูย่อยเปิดด้วยการ "คลิก" (ตั้งค่า openSubmenusOnClick ใน block เมนู)
   เปิดได้ทีละอัน คลิกที่อื่นแล้วปิดเอง จึงไม่ซ้อนกัน */
.hk-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	visibility: visible !important;
	opacity: 1 !important;
	transform: translateY(0);
	width: auto !important;
	height: auto !important;
}

.hk-nav .wp-block-navigation-submenu__toggle {
	cursor: pointer;
	background: none;
	border: 0;
	font: inherit;
}

.hk-nav .wp-block-navigation-submenu__toggle ~ .wp-block-navigation__submenu-icon,
.hk-nav .wp-block-navigation__submenu-icon {
	color: #fff;
	transition: transform 0.3s var(--hk-ease);
}

.hk-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon,
.hk-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

/* เมนูที่เปิดอยู่: ขีดเส้นทองค้างไว้ */
.hk-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
	transform: scaleX(1);
}

.hk-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--hk-ink) !important;
	padding: 10px 14px !important;
	border-radius: 10px;
	font-size: 0.95rem;
	transition: background-color 0.25s var(--hk-ease), color 0.25s var(--hk-ease), padding 0.3s var(--hk-ease);
}

.hk-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--hk-sky-soft);
	color: var(--hk-blue) !important;
	padding-left: 20px !important;
}

/* ปุ่มสมัครเรียนบน header */
.hk-header-cta {
	margin: 0;
	gap: 10px;
}

.hk-header-cta .wp-block-button__link {
	padding: 0.65em 1.4em;
	font-size: 0.95rem;
}

/* เมนูมือถือ (overlay) */
.hk-nav .wp-block-navigation__responsive-container-open {
	color: #fff;
}

.hk-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--hk-navy) !important;
	color: #fff !important;
	padding: 24px !important;
	animation: hk-fade-in 0.35s var(--hk-ease);
}

.hk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #fff !important;
	font-size: 1.1rem;
}

.hk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	box-shadow: none;
	opacity: 1;
	transform: none;
	padding: 0 0 0 14px !important;
}

.hk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #c9d6ff !important;
	font-size: 1rem;
}

.hk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: transparent;
	color: var(--hk-accent) !important;
}

/* หน้าแรก: header ใส ลอยอยู่บนภาพ hero แล้วเปลี่ยนเป็นน้ำเงินเมื่อเลื่อน */
.home .hk-site-header {
	position: fixed;
	left: 0;
	right: 0;
}

.home .hk-header {
	background: transparent;
}

.home .hk-topbar {
	background: rgba(0, 0, 0, 0.25);
}

body.hk-scrolled .hk-header {
	background: rgba(11, 27, 77, 0.92);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.5);
}

body.hk-scrolled .hk-topbar {
	max-height: 0;
	opacity: 0;
}

body.hk-scrolled .hk-mainbar > .hk-inner {
	min-height: 68px;
}

body.hk-scrolled .hk-brand .hk-logo img {
	width: 44px;
	height: 44px;
}

/* ริบบิ้นไว้ทุกข์ (ปลั๊กอิน Black Ribbon) ไม่ให้บังปุ่มบน header */
img.blackribbon {
	pointer-events: none;
	width: 96px !important;
	height: auto !important;
	z-index: 99999 !important;
}

@media (max-width: 782px) {
	/* มือถือ: ย้ายไปมุมซ้ายล่าง เพราะมุมขวาบนเป็นปุ่มเมนู */
	img.blackribbon {
		width: 64px !important;
		top: auto !important;
		right: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		transform: rotate(180deg);
	}
}

@media (max-width: 1080px) {
	.hk-header-cta {
		display: none !important;
	}
}

@media (max-width: 782px) {
	.hk-topbar .hk-topbar-tag {
		display: none;
	}

	.hk-brand-sub {
		display: none;
	}

	.hk-brand .hk-logo img {
		width: 44px;
		height: 44px;
	}

	.hk-brand-name {
		white-space: normal;
		font-size: 1rem;
	}

	:root,
	body {
		--hk-header-h: 70px;
	}
}

/* ===================================================================
 * 4. หน้าแรก
 * ================================================================ */
.hk-home {
	margin-top: 0 !important;
	overflow-x: clip;
}

.hk-home > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.hk-section {
	padding-top: var(--hk-section) !important;
	padding-bottom: var(--hk-section) !important;
	padding-left: var(--hk-gutter) !important;
	padding-right: var(--hk-gutter) !important;
}

.hk-section > * {
	max-width: var(--hk-wrap);
	margin-left: auto !important;
	margin-right: auto !important;
}

.hk-bg-soft {
	background: var(--hk-sky-soft);
}

.hk-bg-navy {
	background: var(--hk-navy);
	color: #c9d6ff;
}

.hk-bg-navy h2,
.hk-bg-navy h3 {
	color: #fff;
}

/* หัวข้อ section: ป้ายเล็ก + หัวข้อใหญ่ + คำอธิบาย */
.hk-head {
	margin-bottom: clamp(36px, 5vw, 60px) !important;
	gap: 12px;
}

.hk-head.is-center {
	text-align: center;
	max-width: 760px !important;
}

.hk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hk-blue);
}

.hk-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--hk-accent);
}

.hk-head.is-center .hk-eyebrow::after {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--hk-accent);
}

.hk-bg-navy .hk-eyebrow {
	color: var(--hk-accent);
}

.hk-title {
	margin: 0 !important;
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	letter-spacing: -0.01em;
}

.hk-title em,
.hk-hero-title em {
	font-style: normal;
	color: var(--hk-blue);
}

.hk-bg-navy .hk-title em {
	color: var(--hk-accent);
}

.hk-lead {
	margin: 0 !important;
	font-size: 1.08rem;
	color: var(--hk-muted);
}

.hk-bg-navy .hk-lead {
	color: #b3c3f2;
}

/* --- Hero: สั้นลง ข้อความชิดซ้ายและใหญ่ขึ้น มีรูปตกแต่งด้านขวา --- */
.hk-hero {
	min-height: clamp(600px, 82vh, 780px) !important;
	padding: calc(var(--hk-header-h) + 70px) var(--hk-gutter) 110px !important;
	align-items: center !important;
	overflow: hidden;
}

.hk-hero .wp-block-cover__image-background {
	animation: hk-hero-zoom 18s var(--hk-ease) both;
}

.hk-hero .wp-block-cover__background {
	background:
		radial-gradient(circle at 78% 40%, rgba(79, 163, 247, 0.35), transparent 45%),
		linear-gradient(100deg, rgba(8, 20, 60, 0.95) 0%, rgba(11, 27, 77, 0.82) 42%, rgba(23, 51, 176, 0.55) 100%) !important;
	opacity: 1 !important;
}

/* ลายจุดจางๆ ทับภาพ */
.hk-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
	background-size: 22px 22px;
	pointer-events: none;
	z-index: 1;
}

.hk-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	max-width: var(--hk-wrap);
	width: 100%;
	margin: 0 auto;
}

.hk-hero-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px) !important;
}

.hk-hero-content {
	gap: 22px;
	align-items: flex-start;
}

.hk-hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	padding: 8px 18px 8px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #e6edff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.95rem;
	letter-spacing: 0.03em;
}

.hk-hero-kicker::before {
	content: "";
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hk-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1b4d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M7 9.5V15c0 1.5 2.2 3 5 3s5-1.5 5-3V9.5'/%3E%3C/svg%3E") no-repeat center / 15px;
}

.hk-hero-title {
	margin: 0 !important;
	color: #fff !important;
	font-size: clamp(2.8rem, 6.4vw, 5.4rem);
	line-height: 1.08 !important;
	letter-spacing: -0.02em;
	font-weight: 700 !important;
	text-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.hk-hero-title em {
	font-style: normal;
	background: linear-gradient(90deg, #a8d8ff, #6cb8ff 60%, #d6ecff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hk-hero-text {
	margin: 0 !important;
	max-width: 600px;
	font-size: clamp(1.05rem, 1.35vw, 1.22rem);
	color: #d5dffb;
}

.hk-hero .wp-block-buttons {
	margin-top: 6px !important;
	gap: 14px;
}

.hk-hero .wp-block-button__link {
	font-size: 1.05rem;
	padding: 0.95em 2.1em;
}

/* ตัวเลขเด่น 3 ช่อง ใต้ปุ่ม */
.hk-hero-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 14px 0 0 !important;
	padding: 6px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hk-hero-facts span {
	display: flex;
	flex-direction: column;
	padding: 12px 26px 0 0;
	margin-right: 26px;
	border-right: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 0.85rem;
	color: #a9bbef;
	line-height: 1.5;
}

.hk-hero-facts span:last-child {
	border-right: 0;
	margin-right: 0;
}

.hk-hero-facts strong {
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 1.25rem;
	font-weight: 600;
	color: #fff;
}

/* รูปตกแต่งด้านขวา: 3 รูปซ้อนกัน ลอยเบาๆ */
.hk-hero-visual {
	position: relative;
	height: clamp(380px, 38vw, 500px);
}

.hk-hero-visual::before {
	content: "";
	position: absolute;
	right: 4%;
	top: 6%;
	width: 78%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1.5px dashed rgba(108, 184, 255, 0.55);
	animation: hk-spin 60s linear infinite;
}

.hk-hero-photo {
	position: absolute !important;
	margin: 0 !important;
	border-radius: 22px;
	overflow: hidden;
	border: 6px solid rgba(255, 255, 255, 0.92);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}

.hk-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-hero-photo.is-main {
	left: 12%;
	top: 14%;
	width: 62%;
	aspect-ratio: 4 / 4.4;
	animation: hk-bob 7s ease-in-out infinite;
}

.hk-hero-photo.is-top {
	right: 0;
	top: 0;
	width: 38%;
	aspect-ratio: 1;
	animation: hk-bob 8s ease-in-out infinite -2s;
}

.hk-hero-photo.is-bottom {
	right: 6%;
	bottom: 0;
	width: 42%;
	aspect-ratio: 4 / 3;
	animation: hk-bob 9s ease-in-out infinite -4s;
}

/* ป้ายกระจก "เปิดรับสมัคร" */
.hk-hero-tag {
	position: absolute;
	left: 0;
	bottom: 12%;
	margin: 0 !important;
	padding: 14px 20px 14px 56px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: #dfe7ff;
	font-size: 0.85rem;
	line-height: 1.4;
	box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
	animation: hk-bob 6s ease-in-out infinite -1s;
	z-index: 3;
}

.hk-hero-tag strong {
	display: block;
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 1rem;
}

.hk-hero-tag::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	border-radius: 50%;
	background: var(--hk-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1b4d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 14px;
}

@media (max-width: 960px) {
	.hk-hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hk-hero-visual {
		display: none;
	}
}

@media (max-width: 600px) {
	.hk-hero {
		min-height: 0 !important;
		padding-top: calc(var(--hk-header-h) + 56px) !important;
		padding-bottom: 96px !important;
	}

	.hk-hero-facts span {
		padding-right: 14px;
		margin-right: 14px;
	}

	.hk-hero-facts strong {
		font-size: 1.05rem;
	}
}

/* --- แถบข้อความวิ่ง --- */
.hk-marquee {
	background: var(--hk-blue);
	color: #fff;
	overflow: hidden;
	padding: 18px 0 !important;
	white-space: nowrap;
}

.hk-marquee-track {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	width: max-content;
	animation: hk-marquee 38s linear infinite;
}

.hk-marquee:hover .hk-marquee-track {
	animation-play-state: paused;
}

.hk-marquee-track p {
	margin: 0 !important;
	padding: 0 28px;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	display: inline-flex;
	align-items: center;
	gap: 28px;
}

.hk-marquee-track p::after {
	content: "✦";
	color: var(--hk-accent);
	font-size: 0.9rem;
}

/* --- ทางลัด 4 ช่อง --- */
.hk-quick {
	position: relative;
	z-index: 2;
	margin-top: -64px !important;
	padding: 0 var(--hk-gutter) !important;
}

.hk-quick-grid {
	max-width: var(--hk-wrap);
	margin: 0 auto !important;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px !important;
}

.hk-quick-card {
	position: relative;
	margin: 0 !important;
	padding: 26px 24px 24px !important;
	background: #fff;
	border-radius: var(--hk-radius-lg);
	box-shadow: var(--hk-shadow);
	gap: 6px;
	transition: transform 0.45s var(--hk-ease), box-shadow 0.45s var(--hk-ease);
}

.hk-quick-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--hk-shadow-lg);
}

.hk-quick-card::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	margin-bottom: 12px;
	border-radius: 16px;
	background-color: var(--hk-sky-soft);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px;
	transition: background-color 0.35s var(--hk-ease), transform 0.45s var(--hk-ease);
}

.hk-quick-card:hover::before {
	background-color: var(--hk-accent);
	transform: rotate(-6deg) scale(1.05);
}

.hk-quick-card h3 {
	margin: 0 !important;
	font-size: 1.15rem;
}

.hk-quick-card p {
	margin: 0 !important;
	font-size: 0.92rem;
	color: var(--hk-muted);
}

/* ทำให้ทั้งการ์ดกดได้ (ลิงก์อยู่ที่หัวข้อ) */
.hk-quick-card h3 a {
	color: inherit;
	text-decoration: none;
}

.hk-quick-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.hk-ico-apply::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M9 15l2 2 4-4'/%3E%3C/svg%3E"); }
.hk-ico-calendar::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16M8 15h2v2H8z'/%3E%3C/svg%3E"); }
.hk-ico-docs::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M7 11l5 5 5-5M12 4v12'/%3E%3C/svg%3E"); }
.hk-ico-contact::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }

/* --- ระดับชั้น --- */
.hk-levels {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px !important;
}

.hk-level-card {
	position: relative;
	margin: 0 !important;
	background: #fff;
	border-radius: var(--hk-radius-lg);
	overflow: hidden;
	box-shadow: 0 1px 0 var(--hk-line), var(--hk-shadow);
	gap: 0 !important;
	transition: transform 0.5s var(--hk-ease), box-shadow 0.5s var(--hk-ease);
}

.hk-level-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--hk-shadow-lg);
}

.hk-level-card .hk-level-img {
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.hk-level-card .hk-level-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--hk-ease);
}

.hk-level-card:hover .hk-level-img img {
	transform: scale(1.07);
}

.hk-level-body {
	padding: 26px 26px 28px !important;
	gap: 10px;
}

.hk-level-num {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--hk-accent-hover);
}

.hk-level-body h3 {
	margin: 0 !important;
	font-size: 1.45rem;
}

.hk-level-body h3 a {
	color: inherit;
	text-decoration: none;
}

.hk-level-body h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hk-level-body > p {
	margin: 0 !important;
	color: var(--hk-muted);
	font-size: 0.97rem;
}

.hk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 0 !important;
}

.hk-chip {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.8rem;
	font-weight: 500;
	background: var(--hk-sky-soft);
	color: var(--hk-blue);
}

.hk-chip.is-gold {
	background: #e3f2ff;
	color: #1d4fa8;
}

.hk-level-more {
	margin: 10px 0 0 !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
	color: var(--hk-blue) !important;
	font-size: 0.95rem;
}

.hk-level-more::after {
	content: " →";
	display: inline-block;
	transition: transform 0.35s var(--hk-ease);
}

.hk-level-card:hover .hk-level-more::after {
	transform: translateX(6px);
}

/* --- หลักสูตร ICEP / NSC --- */
.hk-programs {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px !important;
	margin-top: 40px !important;
}

.hk-program {
	position: relative;
	margin: 0 !important;
	padding: 34px 32px !important;
	border-radius: var(--hk-radius-lg);
	background: #fff;
	border: 1px solid var(--hk-line);
	overflow: hidden;
	gap: 10px;
	transition: transform 0.5s var(--hk-ease), box-shadow 0.5s var(--hk-ease), border-color 0.4s;
}

.hk-program:hover {
	transform: translateY(-6px);
	box-shadow: var(--hk-shadow-lg);
	border-color: transparent;
}

.hk-program::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: var(--hk-sky-soft);
	transition: transform 0.7s var(--hk-ease);
	z-index: 0;
}

.hk-program:hover::after {
	transform: scale(1.25);
}

.hk-program > * {
	position: relative;
	z-index: 1;
}

.hk-program.is-featured {
	background: var(--hk-navy);
	border-color: var(--hk-navy);
	color: #c9d6ff;
}

.hk-program.is-featured::after {
	background: rgba(108, 184, 255, 0.14);
}

.hk-program.is-featured h3 {
	color: #fff;
}

.hk-program-tag {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--hk-blue);
}

.hk-program.is-featured .hk-program-tag {
	color: var(--hk-accent);
}

.hk-program h3 {
	margin: 0 !important;
	font-size: 1.25rem;
}

.hk-program p {
	margin: 0 !important;
}

/* --- จุดเด่น 3 ข้อ --- */
.hk-pillars {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hk-pillar {
	margin: 0 !important;
	padding: 34px 30px 10px !important;
	gap: 10px;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.hk-pillar:last-child {
	border-right: 0;
}

.hk-pillar-num {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--hk-accent);
}

.hk-pillar h3 {
	margin: 0 !important;
	font-size: 1.3rem;
}

.hk-pillar p {
	margin: 0 !important;
	color: #b3c3f2;
}

/* --- เกี่ยวกับ / สถานศึกษาพระราชทาน --- */
.hk-about {
	display: grid !important;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 80px) !important;
	align-items: center;
}

.hk-collage {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 14px !important;
	margin: 0 !important;
}

.hk-collage figure {
	margin: 0 !important;
	border-radius: var(--hk-radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.hk-collage figure:nth-child(2) {
	transform: translateY(28px);
}

.hk-collage figure:nth-child(4) {
	transform: translateY(28px);
}

.hk-collage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--hk-ease);
}

.hk-collage figure:hover img {
	transform: scale(1.08);
}

.hk-about-text {
	gap: 18px;
}

.hk-about-text .hk-title {
	margin-bottom: 4px !important;
}

.hk-about-text p {
	margin: 0 !important;
}

.hk-quote {
	margin: 4px 0 !important;
	padding: 4px 0 4px 20px !important;
	border-left: 3px solid var(--hk-accent);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 1.15rem;
	color: var(--hk-ink) !important;
	line-height: 1.6;
}

/* --- การ์ดข่าว/จดหมายข่าว --- */
.hk-news {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px !important;
}

.hk-news-card {
	margin: 0 !important;
	background: #fff;
	border-radius: var(--hk-radius-lg);
	overflow: hidden;
	box-shadow: 0 1px 0 var(--hk-line), var(--hk-shadow);
	gap: 0 !important;
	transition: transform 0.5s var(--hk-ease), box-shadow 0.5s var(--hk-ease);
}

.hk-news-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--hk-shadow-lg);
}

.hk-news-card figure {
	margin: 0 !important;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--hk-sky-soft);
}

.hk-news-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transition: transform 0.9s var(--hk-ease);
}

.hk-news-card:hover img {
	transform: scale(1.05);
}

.hk-news-card p {
	margin: 0 !important;
	padding: 20px 22px 24px !important;
	font-size: 0.95rem;
	color: var(--hk-text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- ภาพกิจกรรม (กริดแบบนิตยสาร) --- */
.hk-gallery {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 220px;
	gap: 16px !important;
}

.hk-gallery figure {
	position: relative;
	margin: 0 !important;
	border-radius: var(--hk-radius);
	overflow: hidden;
}

.hk-gallery figure:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.hk-gallery figure:nth-child(2) {
	grid-column: span 2;
}

.hk-gallery figure > a {
	display: block;
	height: 100%;
}

.hk-gallery img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.9s var(--hk-ease);
}

.hk-gallery figure:hover img {
	transform: scale(1.07);
}

.hk-gallery figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	padding: 40px 18px 16px;
	background: linear-gradient(to top, rgba(11, 27, 77, 0.92), transparent);
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.95rem;
	text-align: left;
	transform: translateY(6px);
	opacity: 0.92;
	transition: transform 0.4s var(--hk-ease), opacity 0.4s;
}

.hk-gallery figure:hover figcaption {
	transform: translateY(0);
	opacity: 1;
}

.hk-gallery figcaption a {
	color: #fff;
	text-decoration: none;
}

/* --- คนเก่งของเรา --- */
.hk-stars {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px !important;
}

.hk-stars figure {
	margin: 0 !important;
	border-radius: var(--hk-radius-lg);
	overflow: hidden;
	box-shadow: var(--hk-shadow);
	aspect-ratio: 1 / 1;
	transition: transform 0.5s var(--hk-ease), box-shadow 0.5s var(--hk-ease);
}

.hk-stars figure:hover {
	transform: translateY(-6px) rotate(-0.6deg);
	box-shadow: var(--hk-shadow-lg);
}

.hk-stars img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- คณะผู้บริหาร --- */
.hk-team-section {
	position: relative;
	background: linear-gradient(180deg, #ffffff 0%, var(--hk-sky-soft) 55%, #ffffff 100%);
	overflow: hidden;
}

/* วงกลมฟุ้งๆ ด้านหลัง */
.hk-team-section::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 46%;
	width: min(900px, 120vw);
	height: 420px;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse, rgba(79, 163, 247, 0.22), transparent 65%);
	pointer-events: none;
}

.hk-team {
	position: relative;
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	gap: 28px !important;
	max-width: 1040px !important;
}

.hk-person {
	position: relative;
	margin: 0 !important;
	border-radius: 26px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 0 var(--hk-line), 0 24px 50px -28px rgba(11, 27, 77, 0.35);
	gap: 0 !important;
	transition: transform 0.55s var(--hk-ease), box-shadow 0.55s var(--hk-ease);
}

.hk-person:hover {
	transform: translateY(-10px);
	box-shadow: 0 1px 0 var(--hk-line), 0 36px 70px -30px rgba(11, 27, 77, 0.45);
}

.hk-person figure {
	position: relative;
	margin: 0 !important;
	aspect-ratio: 4 / 4.6;
	overflow: hidden;
	background: linear-gradient(160deg, #dfe8ff 0%, #f4f7ff 100%);
}

/* เงาไล่สีด้านล่างรูป ให้ชื่ออ่านง่ายและดูมีมิติ */
.hk-person figure::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 40%;
	background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.hk-person img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.9s var(--hk-ease);
}

.hk-person:hover img {
	transform: scale(1.05);
}

.hk-person-body {
	position: relative;
	margin-top: -36px !important;
	padding: 0 22px 26px !important;
	text-align: center;
	z-index: 1;
}

.hk-person-role {
	display: inline-block;
	margin: 0 0 10px !important;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--hk-navy);
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.85rem;
	font-weight: 500;
	box-shadow: 0 8px 18px -8px rgba(11, 27, 77, 0.6);
}

.hk-person h3 {
	margin: 0 !important;
	font-size: 1.15rem;
}

/* ผู้อำนวยการอยู่ตรงกลาง ใหญ่กว่าเล็กน้อย กรอบทอง */
.hk-person.is-lead {
	transform: translateY(-18px);
	box-shadow: 0 0 0 2px var(--hk-accent), 0 30px 60px -28px rgba(11, 27, 77, 0.45);
}

.hk-person.is-lead:hover {
	transform: translateY(-28px);
}

.hk-person.is-lead .hk-person-role {
	background: var(--hk-accent);
	color: var(--hk-accent-ink);
}

.hk-person.is-lead h3 {
	font-size: 1.28rem;
}

@media (max-width: 860px) {
	.hk-team {
		grid-template-columns: minmax(0, 1fr);
		max-width: 380px !important;
	}

	.hk-person.is-lead {
		transform: none;
		order: -1;
	}
}

.hk-center-link {
	margin-top: 40px !important;
	justify-content: center;
}

/* --- เอกสาร/บริการสำหรับนักเรียน --- */
.hk-resources {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px !important;
}

.hk-resource {
	position: relative;
	margin: 0 !important;
	padding: 22px 22px 22px 84px !important;
	min-height: 96px;
	border-radius: var(--hk-radius);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	gap: 4px;
	transition: background-color 0.35s var(--hk-ease), transform 0.45s var(--hk-ease), border-color 0.35s;
}

.hk-resource:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(108, 184, 255, 0.6);
	transform: translateY(-4px);
}

.hk-resource::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 22px;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--hk-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1b4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2zM9 13h6M9 17h6'/%3E%3C/svg%3E") no-repeat center / 22px;
}

.hk-resource h3 {
	margin: 0 !important;
	font-size: 1.02rem;
	line-height: 1.45;
}

.hk-resource h3 a {
	color: #fff;
	text-decoration: none;
}

.hk-resource h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hk-resource p {
	margin: 0 !important;
	font-size: 0.88rem;
	color: var(--hk-accent);
}

/* --- แถบชวนสมัครเรียน: การ์ดไล่สีน้ำเงิน→ขาว กระชับ ไม่ลากยาว --- */
.hk-cta {
	background: #fff !important;
	padding-top: clamp(40px, 5vw, 64px) !important;
	padding-bottom: clamp(48px, 6vw, 80px) !important;
}

.hk-cta-inner {
	position: relative;
	overflow: hidden;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 40px !important;
	max-width: var(--hk-wrap) !important;
	padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 56px) !important;
	border-radius: 28px;
	text-align: left;
	background:
		radial-gradient(circle at 92% 20%, rgba(255, 255, 255, 0.85) 0, rgba(255, 255, 255, 0) 38%),
		linear-gradient(105deg, #0b1b4d 0%, #1733b0 38%, #4f86f0 66%, #cfe0ff 88%, #f4f8ff 100%);
	box-shadow: 0 30px 60px -30px rgba(11, 27, 77, 0.55);
}

/* ลวดลายวงกลมและจุด ให้มีลูกเล่น */
.hk-cta-inner::before {
	content: "";
	position: absolute;
	left: -80px;
	bottom: -120px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.04), 0 0 0 80px rgba(255, 255, 255, 0.03);
	animation: hk-float 16s ease-in-out infinite;
	pointer-events: none;
}

.hk-cta-inner::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 18px;
	width: 140px;
	height: 90px;
	background-image: radial-gradient(rgba(11, 27, 77, 0.22) 1.5px, transparent 1.6px);
	background-size: 14px 14px;
	pointer-events: none;
}

.hk-cta-inner > * {
	position: relative;
	z-index: 1;
}

.hk-cta h2 {
	grid-column: 1;
	margin: 0 !important;
	color: #fff;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.hk-cta p {
	grid-column: 1;
	margin: 0 !important;
	color: #d5dffb;
	font-size: 1rem;
	max-width: 560px;
}

.hk-cta .wp-block-buttons {
	grid-column: 2;
	grid-row: 1 / span 2;
	justify-content: flex-end;
	gap: 12px;
	margin: 0 !important;
}

/* ปุ่มในการ์ดอยู่บนพื้นสีอ่อน จึงใช้สีน้ำเงินเข้ม */
.hk-cta .wp-block-button .wp-block-button__link {
	background: var(--hk-navy);
	color: #fff;
	box-shadow: 0 12px 24px -12px rgba(11, 27, 77, 0.7);
}

.hk-cta .wp-block-button .wp-block-button__link:hover {
	background: var(--hk-blue);
	color: #fff;
}

.hk-cta .hk-btn-ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.55);
	color: var(--hk-navy);
	box-shadow: inset 0 0 0 1.5px rgba(11, 27, 77, 0.35);
	backdrop-filter: blur(8px);
}

.hk-cta .hk-btn-ghost .wp-block-button__link:hover {
	background: #fff;
	color: var(--hk-navy);
}

@media (max-width: 860px) {
	.hk-cta-inner {
		grid-template-columns: minmax(0, 1fr);
		background:
			radial-gradient(circle at 90% 100%, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0) 45%),
			linear-gradient(160deg, #0b1b4d 0%, #1733b0 45%, #6a9cf5 80%, #dce8ff 100%);
	}

	.hk-cta .wp-block-buttons {
		grid-column: 1;
		grid-row: auto;
		justify-content: flex-start;
		margin-top: 14px !important;
	}
}

/* --- Responsive หน้าแรก --- */
@media (max-width: 1024px) {
	.hk-quick-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hk-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hk-resources {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.hk-levels,
	.hk-news,
	.hk-programs,
	.hk-pillars,
	.hk-about,
	.hk-team {
		grid-template-columns: 1fr;
	}

	.hk-pillar {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		padding: 26px 4px !important;
	}

	.hk-news {
		max-width: 440px !important;
	}

	.hk-stars {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px !important;
	}
}

@media (max-width: 600px) {
	.hk-quick {
		margin-top: -40px !important;
	}

	.hk-quick-grid {
		gap: 12px !important;
	}

	.hk-quick-card {
		padding: 18px 16px !important;
	}

	.hk-quick-card p {
		display: none;
	}

	.hk-gallery {
		grid-template-columns: 1fr;
		grid-auto-rows: 240px;
	}

	.hk-gallery figure:first-child,
	.hk-gallery figure:nth-child(2) {
		grid-column: auto;
		grid-row: auto;
	}

	.hk-hero {
		padding-top: calc(var(--hk-header-h) + 70px) !important;
	}

	.hk-scroll-cue {
		display: none;
	}
}

/* ===================================================================
 * 4b. หน้าระดับชั้น / หลักสูตร (template "HKWKK หน้าเต็มจอ")
 * ================================================================ */
.hk-landing .wp-block-post-content {
	margin: 0 !important;
}

.hk-landing .wp-block-post-content > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* hero ของหน้าย่อย */
.hk-page-hero {
	position: relative;
	overflow: hidden;
	background: var(--hk-navy);
	color: #c9d6ff;
	padding: clamp(56px, 7vw, 96px) var(--hk-gutter) clamp(64px, 8vw, 110px) !important;
}

.hk-page-hero::before {
	content: "";
	position: absolute;
	width: 620px;
	height: 620px;
	right: -200px;
	top: -260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(29, 63, 216, 0.55), transparent 70%);
	pointer-events: none;
}

.hk-page-hero-grid {
	position: relative;
	z-index: 1;
	max-width: var(--hk-wrap);
	margin: 0 auto !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px) !important;
	align-items: center;
}

.hk-page-hero-grid.is-text-only {
	grid-template-columns: minmax(0, 1fr);
	max-width: 860px;
	text-align: center;
}

.hk-page-hero-text {
	gap: 16px;
}

.hk-page-hero-grid.is-text-only .hk-page-hero-text {
	align-items: center;
}

.hk-page-hero h1 {
	margin: 0 !important;
	color: #fff;
	font-size: clamp(2.1rem, 4.6vw, 3.6rem);
	line-height: 1.2;
}

.hk-page-hero h1 em {
	font-style: normal;
	color: var(--hk-accent);
}

.hk-page-hero .hk-lead {
	color: #b3c3f2;
	font-size: 1.1rem;
}

.hk-page-hero .hk-eyebrow {
	color: var(--hk-accent);
}

.hk-breadcrumb {
	margin: 0 !important;
	font-size: 0.88rem;
	color: #8fa3e0;
}

.hk-breadcrumb a {
	color: #c9d6ff;
	text-decoration: none;
}

.hk-breadcrumb a:hover {
	color: var(--hk-accent);
}

.hk-page-hero-img {
	margin: 0 !important;
	border-radius: var(--hk-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.6);
	transform: rotate(1.2deg);
	transition: transform 0.8s var(--hk-ease);
}

.hk-page-hero-img:hover {
	transform: rotate(0deg) scale(1.01);
}

.hk-page-hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-page-hero .hk-chips .hk-chip {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 0.85rem;
	padding: 6px 14px;
}

.hk-page-hero .hk-chips .hk-chip.is-gold {
	background: var(--hk-accent);
	color: var(--hk-accent-ink);
}

.hk-page-hero .wp-block-buttons {
	gap: 12px;
	margin-top: 6px !important;
}

/* การ์ดเลือกหลักสูตร */
.hk-program-cards {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px !important;
}

.hk-program-card {
	position: relative;
	margin: 0 !important;
	border-radius: var(--hk-radius-lg);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--hk-line);
	gap: 0 !important;
	transition: transform 0.5s var(--hk-ease), box-shadow 0.5s var(--hk-ease), border-color 0.4s;
}

.hk-program-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--hk-shadow-lg);
	border-color: transparent;
}

.hk-program-card figure {
	margin: 0 !important;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.hk-program-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--hk-ease);
}

.hk-program-card:hover img {
	transform: scale(1.06);
}

.hk-program-card-body {
	padding: 28px 30px 32px !important;
	gap: 12px;
}

.hk-program-card .hk-program-tag {
	font-size: 2.1rem;
}

.hk-program-card h3 {
	margin: 0 !important;
	font-size: 1.35rem;
}

.hk-program-card h3 a {
	color: inherit;
	text-decoration: none;
}

.hk-program-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hk-program-card p {
	margin: 0 !important;
}

.hk-program-card.is-featured {
	background: var(--hk-navy);
	border-color: var(--hk-navy);
	color: #c9d6ff;
}

.hk-program-card.is-featured h3 {
	color: #fff;
}

.hk-program-card.is-featured .hk-program-tag {
	color: var(--hk-accent);
}

.hk-program-card.is-featured .hk-level-more {
	color: var(--hk-accent) !important;
}

.hk-program-card:hover .hk-level-more::after {
	transform: translateX(6px);
}

.hk-ticks {
	list-style: none;
	margin: 4px 0 0 !important;
	padding: 0 !important;
}

.hk-ticks li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 8px;
}

.hk-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--hk-sky-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 11px;
}

.hk-program-card.is-featured .hk-ticks li::before,
.hk-bg-navy .hk-ticks li::before {
	background-color: rgba(108, 184, 255, 0.18);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236cb8ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}

/* เนื้อหา 2 คอลัมน์ + การ์ดข้อมูลด้านข้าง */
.hk-split {
	display: grid !important;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px) !important;
	align-items: start;
}

.hk-split.is-media {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}

.hk-split-text {
	gap: 16px;
}

.hk-split-text p {
	margin: 0 !important;
}

.hk-split-img {
	margin: 0 !important;
	border-radius: var(--hk-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--hk-shadow);
}

.hk-split-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hk-info-card {
	position: sticky;
	top: calc(var(--hk-adminbar) + 100px);
	margin: 0 !important;
	padding: 28px !important;
	border-radius: var(--hk-radius-lg);
	background: var(--hk-sky-soft);
	gap: 0 !important;
}

.hk-info-card h3 {
	margin: 0 0 12px !important;
	font-size: 1.15rem;
}

.hk-info-row {
	display: flex !important;
	justify-content: space-between;
	gap: 16px;
	margin: 0 !important;
	padding: 12px 0 !important;
	border-bottom: 1px solid var(--hk-line);
	font-size: 0.95rem;
}

.hk-info-row:last-of-type {
	border-bottom: 0;
}

.hk-info-row strong {
	color: var(--hk-ink);
	font-weight: 600;
	text-align: right;
}

.hk-info-card .wp-block-buttons {
	margin-top: 18px !important;
}

.hk-info-card .wp-block-button,
.hk-info-card .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* ตารางวิชาเรียน */
.hk-table {
	display: block;
	width: 100%;
	max-width: 980px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	border-radius: var(--hk-radius-lg);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 0 var(--hk-line), var(--hk-shadow);
}

.hk-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.98rem;
}

.hk-table thead th {
	background: var(--hk-navy);
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
	text-align: left;
	padding: 16px 20px;
	border: 0;
}

.hk-table td {
	padding: 14px 20px;
	border: 0;
	border-bottom: 1px solid var(--hk-line);
	color: var(--hk-text);
}

.hk-table tbody tr {
	transition: background-color 0.25s var(--hk-ease);
}

.hk-table tbody tr:hover {
	background: var(--hk-sky-soft);
}

.hk-table tbody tr:last-child td {
	border-bottom: 0;
}

.hk-table td:last-child,
.hk-table th:last-child {
	text-align: center;
	width: 140px;
}

.hk-table td:first-child {
	color: var(--hk-ink);
	font-weight: 600;
}

/* กล่อง "รอข้อมูล" ให้ครู/ผู้ดูแลเห็นชัดว่าต้องเติม */
.hk-todo {
	margin: 0 !important;
	padding: 14px 18px 14px 46px !important;
	position: relative;
	border: 1.5px dashed #6cb8ff;
	border-radius: 12px;
	background: #f0f8ff;
	color: #1d4fa8 !important;
	font-size: 0.92rem;
}

.hk-todo::before {
	content: "!";
	position: absolute;
	left: 14px;
	top: 14px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--hk-accent);
	color: var(--hk-accent-ink);
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 22px;
	text-align: center;
}

.hk-table + .hk-todo,
.hk-photo-grid + .hk-todo,
.hk-activities + .hk-todo,
.hk-video + .hk-todo {
	margin-top: 18px !important;
}

.hk-section > .hk-todo {
	margin-left: auto !important;
	margin-right: auto !important;
}

.hk-table + .hk-todo {
	max-width: 980px !important;
}

/* กิจกรรมของหลักสูตร */
.hk-activities {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px !important;
}

.hk-activity {
	margin: 0 !important;
	border-radius: var(--hk-radius-lg);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 0 var(--hk-line), var(--hk-shadow);
	gap: 0 !important;
	transition: transform 0.5s var(--hk-ease), box-shadow 0.5s var(--hk-ease);
}

.hk-activity:hover {
	transform: translateY(-6px);
	box-shadow: var(--hk-shadow-lg);
}

.hk-activity figure {
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.hk-activity img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--hk-ease);
}

.hk-activity:hover img {
	transform: scale(1.06);
}

.hk-activity-body {
	padding: 20px 22px 24px !important;
	gap: 6px;
}

.hk-activity h3 {
	margin: 0 !important;
	font-size: 1.1rem;
}

.hk-activity p {
	margin: 0 !important;
	font-size: 0.93rem;
	color: var(--hk-muted);
}

/* กริดรูปบรรยากาศ */
.hk-photo-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px !important;
}

.hk-photo-grid figure {
	position: relative;
	margin: 0 !important;
	border-radius: var(--hk-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.hk-photo-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--hk-ease);
}

.hk-photo-grid figure:hover img {
	transform: scale(1.07);
}

.hk-photo-grid figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	padding: 36px 16px 14px;
	background: linear-gradient(to top, rgba(11, 27, 77, 0.88), transparent);
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.92rem;
	text-align: left;
}

/* วิดีโอ */
.hk-video {
	position: relative;
	margin: 0 auto !important;
	max-width: 960px !important;
	aspect-ratio: 16 / 9;
	border-radius: var(--hk-radius-lg);
	overflow: hidden;
	background: var(--hk-navy-2);
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	color: #c9d6ff;
	box-shadow: var(--hk-shadow-lg);
}

.hk-video::before {
	content: "";
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--hk-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230b1b4d'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 54% center / 34px;
	box-shadow: 0 0 0 0 rgba(108, 184, 255, 0.6);
	animation: hk-pulse 2.4s infinite;
}

.hk-video p {
	margin: 0 !important;
}

.hk-video .wp-block-embed__wrapper,
.hk-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ลิงก์ไปยังระดับชั้นอื่น */
.hk-level-nav {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px !important;
}

.hk-level-nav p {
	margin: 0 !important;
}

.hk-level-nav a {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--hk-line);
	color: var(--hk-ink);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.3s var(--hk-ease), color 0.3s, transform 0.35s var(--hk-ease), border-color 0.3s;
}

.hk-level-nav a:hover {
	background: var(--hk-blue);
	border-color: var(--hk-blue);
	color: #fff;
	transform: translateY(-3px);
}

.hk-level-nav .is-current a {
	background: var(--hk-navy);
	border-color: var(--hk-navy);
	color: var(--hk-accent);
}

/* การ์ดระดับชั้นบนหน้าภาพรวม (5 ระดับ) */
.hk-levels.is-five {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hk-levels.is-five > * {
	grid-column: span 2;
}

.hk-levels.is-five > *:nth-child(4) {
	grid-column: 2 / span 2;
}

@media (max-width: 960px) {
	.hk-page-hero-grid,
	.hk-split,
	.hk-split.is-media,
	.hk-program-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.hk-page-hero-img {
		transform: none;
	}

	.hk-info-card {
		position: static;
	}

	.hk-activities,
	.hk-photo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hk-levels.is-five {
		grid-template-columns: minmax(0, 1fr);
	}

	.hk-levels.is-five > *,
	.hk-levels.is-five > *:nth-child(4) {
		grid-column: auto;
	}
}

@media (max-width: 600px) {
	.hk-activities,
	.hk-photo-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hk-table td,
	.hk-table thead th {
		padding: 12px 14px;
	}

	.hk-table td:last-child,
	.hk-table th:last-child {
		width: 90px;
	}
}

/* ===================================================================
 * 5. Footer
 * ================================================================ */
.hk-footer {
	position: relative;
	background: var(--hk-navy);
	color: #b3c3f2;
	padding: clamp(64px, 8vw, 96px) var(--hk-gutter) 0 !important;
	margin-top: 0 !important;
	overflow: hidden;
}

/* เส้นทองบางๆ ด้านบน */
.hk-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--hk-blue), var(--hk-accent), var(--hk-blue));
}

.hk-footer > * {
	max-width: var(--hk-wrap);
	margin-left: auto !important;
	margin-right: auto !important;
}

.hk-footer-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 40px !important;
	padding-bottom: 56px !important;
}

.hk-footer h3,
.hk-footer h4 {
	color: #fff;
}

.hk-footer h4 {
	margin: 0 0 18px !important;
	font-size: 1.02rem;
	position: relative;
	padding-bottom: 12px;
}

.hk-footer h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background: var(--hk-accent);
}

.hk-footer-brand {
	gap: 16px;
}

.hk-footer-brand .hk-logo {
	margin: 0 !important;
}

.hk-footer-brand .hk-logo img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #fff;
	padding: 4px;
}

.hk-footer-brand h3 {
	margin: 0 !important;
	font-size: 1.3rem;
}

.hk-footer-brand p {
	margin: 0 !important;
	font-size: 0.95rem;
	line-height: 1.8;
}

.hk-footer a {
	color: #b3c3f2;
	text-decoration: none;
}

.hk-footer a:hover {
	color: var(--hk-accent);
}

.hk-footer ul.wp-block-list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.hk-footer ul.wp-block-list li {
	margin: 0 0 10px;
	font-size: 0.95rem;
}

.hk-footer ul.wp-block-list li a {
	display: inline-block;
	transition: color 0.25s var(--hk-ease), transform 0.3s var(--hk-ease);
}

.hk-footer ul.wp-block-list li a:hover {
	transform: translateX(4px);
}

/* Facebook ปุ่มเดียว */
.hk-footer .hk-social {
	margin: 4px 0 0 !important;
}

.hk-footer .hk-social .wp-social-link {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
	transition: background-color 0.3s var(--hk-ease), transform 0.35s var(--hk-ease);
}

.hk-footer .hk-social .wp-social-link:hover {
	background: #1877f2 !important;
	transform: translateY(-3px);
}

.hk-footer .hk-social .wp-block-social-link-anchor {
	padding: 10px !important;
}

.hk-footer .hk-social.has-visible-labels .wp-block-social-link-anchor {
	padding: 9px 18px 9px 14px !important;
	gap: 8px;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.92rem;
}

/* QR code */
.hk-qr {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 12px !important;
}

.hk-qr figure {
	margin: 0 !important;
	padding: 8px;
	background: #fff;
	border-radius: 12px;
	transition: transform 0.4s var(--hk-ease);
}

.hk-qr figure:hover {
	transform: translateY(-4px) scale(1.03);
}

.hk-qr img {
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.hk-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 22px 0 !important;
	gap: 10px 24px;
	font-size: 0.85rem;
	color: #8798cc;
}

.hk-footer-bottom p {
	margin: 0 !important;
}

/* ปุ่มกลับขึ้นด้านบน (สร้างด้วย JS) */
.hk-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 90;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--hk-blue);
	color: #fff;
	box-shadow: var(--hk-shadow);
	cursor: pointer;
	opacity: 0;
	transform: translateY(16px) scale(0.9);
	pointer-events: none;
	transition: opacity 0.4s var(--hk-ease), transform 0.45s var(--hk-ease), background-color 0.25s;
}

.hk-to-top svg {
	width: 22px;
	height: 22px;
}

.hk-to-top.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.hk-to-top:hover {
	background: var(--hk-accent);
	color: var(--hk-accent-ink);
}

@media (max-width: 1024px) {
	.hk-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.hk-footer-grid {
		grid-template-columns: 1fr;
		gap: 32px !important;
	}

	.hk-qr {
		max-width: 300px;
	}
}

/* ===================================================================
 * 6. แอนิเมชัน
 *    ใช้ class hk-reveal (ค่อยๆ ลอยขึ้น) และ hk-stagger (ลูกๆ ทยอยขึ้นทีละอัน)
 *    ทำงานเฉพาะเมื่อมี JS (html.hk-js) เพื่อไม่ให้เนื้อหาหายถ้า JS ไม่โหลด
 * ================================================================ */
.hk-js .hk-reveal,
.hk-js .hk-stagger > * {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s var(--hk-ease), transform 1s var(--hk-ease);
	transition-delay: var(--hk-delay, 0s);
	will-change: opacity, transform;
}

.hk-js .hk-reveal.is-in,
.hk-js .hk-stagger.is-in > * {
	opacity: 1;
	transform: none;
}

/* รูปค่อยๆ เผยจากซ้ายไปขวา (ตัดขอบที่ตัวรูป ไม่ใช่ที่กรอบ เพื่อให้ตัวตรวจจับการเลื่อนยังมองเห็นกรอบ) */
.hk-js .hk-reveal-img img {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.2s var(--hk-ease), transform 0.9s var(--hk-ease);
	transition-delay: var(--hk-delay, 0s), 0s;
}

.hk-js .hk-reveal-img.is-in img {
	clip-path: inset(0 0 0 0);
}

/* hero: ทยอยแสดงตอนโหลดหน้า */
.hk-hero-content > * {
	animation: hk-rise 1.1s var(--hk-ease) both;
}

.hk-hero-content > *:nth-child(1) { animation-delay: 0.15s; }
.hk-hero-content > *:nth-child(2) { animation-delay: 0.3s; }
.hk-hero-content > *:nth-child(3) { animation-delay: 0.45s; }
.hk-hero-content > *:nth-child(4) { animation-delay: 0.6s; }
.hk-hero-content > *:nth-child(5) { animation-delay: 0.75s; }

.hk-header {
	animation: hk-drop 0.9s var(--hk-ease) both;
}

@keyframes hk-rise {
	from { opacity: 0; transform: translateY(32px); }
	to { opacity: 1; transform: none; }
}

@keyframes hk-drop {
	from { opacity: 0; transform: translateY(-100%); }
	to { opacity: 1; transform: none; }
}

@keyframes hk-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes hk-hero-zoom {
	from { transform: scale(1.12); }
	to { transform: scale(1); }
}

@keyframes hk-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes hk-pulse {
	0% { box-shadow: 0 0 0 0 rgba(108, 184, 255, 0.7); }
	70% { box-shadow: 0 0 0 12px rgba(108, 184, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(108, 184, 255, 0); }
}

@keyframes hk-scroll-dot {
	0% { opacity: 0; transform: translateY(0); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translateY(14px); }
}

@keyframes hk-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

@keyframes hk-spin {
	to { transform: rotate(360deg); }
}

@keyframes hk-float {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-30px, 24px); }
}

/* คนที่ตั้งค่าให้ลดการเคลื่อนไหว: ปิดแอนิเมชันทั้งหมด */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.hk-js .hk-reveal,
	.hk-js .hk-stagger > *,
	.hk-js .hk-reveal-img img {
		opacity: 1;
		transform: none;
		clip-path: none;
	}
}

/* ===================================================================
 * 7. ธีมฟ้า-ขาว มินิมอล (ทับส่วนบน)
 *    - พื้นหลังไล่สีฟ้า-ขาวที่เคลื่อนไหวตลอดเวลา
 *    - ส่วนที่เคยเป็นน้ำเงินเข้ม เปลี่ยนเป็นพื้นสว่าง ตัวหนังสือน้ำเงินเข้ม
 *    - สีเน้นใช้ฟ้าอ่อน (--hk-accent) แทนสีทอง
 * ================================================================ */
:root,
body {
	--hk-accent: #6cb8ff;
	--hk-accent-hover: #4aa3f5;
	--hk-accent-ink: #0b1b4d;
	--hk-glass: rgba(255, 255, 255, 0.62);
	--hk-glass-line: rgba(255, 255, 255, 0.85);
	--hk-shadow: 0 12px 34px -16px rgba(29, 63, 216, 0.28);
	--hk-shadow-lg: 0 26px 60px -24px rgba(29, 63, 216, 0.38);
}

html {
	background: #f5faff;
}

body {
	background: transparent !important;
	position: relative;
}

/* --- พื้นหลังเคลื่อนไหว: ก้อนสีฟ้าฟุ้งๆ ลอยช้าๆ 2 ชั้น + ไล่สีที่เปลี่ยนตลอด --- */
body::before,
body::after {
	content: "";
	position: fixed;
	z-index: -1;
	pointer-events: none;
	will-change: transform;
}

body::before {
	inset: -25vmax;
	background:
		radial-gradient(28vmax 24vmax at 18% 22%, rgba(124, 196, 255, 0.55), transparent 70%),
		radial-gradient(24vmax 20vmax at 82% 18%, rgba(29, 63, 216, 0.16), transparent 70%),
		radial-gradient(30vmax 26vmax at 70% 78%, rgba(160, 215, 255, 0.5), transparent 70%),
		radial-gradient(22vmax 20vmax at 22% 82%, rgba(79, 163, 247, 0.22), transparent 70%),
		linear-gradient(135deg, #f7fbff 0%, #eaf4ff 40%, #ffffff 60%, #e4f0ff 100%);
	animation: hk-bg-drift 38s ease-in-out infinite alternate;
}

body::after {
	inset: -20vmax;
	background:
		radial-gradient(18vmax 16vmax at 60% 40%, rgba(255, 255, 255, 0.9), transparent 70%),
		radial-gradient(20vmax 18vmax at 35% 60%, rgba(124, 196, 255, 0.28), transparent 70%);
	animation: hk-bg-drift-2 26s ease-in-out infinite alternate;
	mix-blend-mode: soft-light;
}

@keyframes hk-bg-drift {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
	50% { transform: translate3d(4vmax, -3vmax, 0) rotate(8deg) scale(1.06); }
	100% { transform: translate3d(-3vmax, 3vmax, 0) rotate(-6deg) scale(1.02); }
}

@keyframes hk-bg-drift-2 {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	100% { transform: translate3d(-6vmax, 4vmax, 0) scale(1.15); }
}

@keyframes hk-gradient-flow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* ส่วนต่างๆ โปร่งใส ให้เห็นพื้นหลังที่เคลื่อนไหว */
.hk-section,
.hk-team-section,
.hk-cta {
	background: transparent !important;
}

.hk-bg-soft {
	background: linear-gradient(180deg, rgba(234, 244, 255, 0.55), rgba(255, 255, 255, 0.35)) !important;
}

/* --- ส่วนที่เคยเป็นน้ำเงินเข้ม → กระจกฟ้าอ่อน --- */
.hk-bg-navy {
	background: linear-gradient(135deg, rgba(214, 233, 255, 0.75), rgba(255, 255, 255, 0.5) 60%, rgba(200, 226, 255, 0.6)) !important;
	color: var(--hk-text) !important;
}

.hk-bg-navy h2,
.hk-bg-navy h3 {
	color: var(--hk-ink) !important;
}

.hk-bg-navy .hk-eyebrow {
	color: var(--hk-blue) !important;
}

.hk-bg-navy .hk-title em {
	color: var(--hk-blue) !important;
}

.hk-bg-navy .hk-lead,
.hk-pillar p {
	color: var(--hk-muted) !important;
}

.hk-pillars {
	border-top-color: rgba(29, 63, 216, 0.12) !important;
	gap: 18px !important;
	border-top: 0 !important;
}

.hk-pillar {
	border: 1px solid var(--hk-glass-line) !important;
	border-radius: var(--hk-radius-lg);
	background: var(--hk-glass);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 30px 28px !important;
	box-shadow: var(--hk-shadow);
	transition: transform 0.5s var(--hk-ease), box-shadow 0.5s var(--hk-ease);
}

.hk-pillar:hover {
	transform: translateY(-6px);
	box-shadow: var(--hk-shadow-lg);
}

.hk-pillar-num {
	-webkit-text-stroke: 1.5px var(--hk-blue) !important;
}

.hk-resource {
	background: var(--hk-glass) !important;
	border: 1px solid var(--hk-glass-line) !important;
	box-shadow: var(--hk-shadow);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.hk-resource:hover {
	background: #fff !important;
	border-color: rgba(108, 184, 255, 0.8) !important;
}

.hk-resource h3 a {
	color: var(--hk-ink) !important;
}

.hk-resource p {
	color: var(--hk-blue) !important;
}

.hk-resource::before {
	background-color: var(--hk-sky-soft) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2zM9 13h6M9 17h6'/%3E%3C/svg%3E") !important;
}

/* --- Header: กระจกขาว ตัวหนังสือน้ำเงินเข้ม --- */
.hk-header {
	background: rgba(255, 255, 255, 0.72) !important;
	backdrop-filter: saturate(160%) blur(16px);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	color: var(--hk-ink);
	box-shadow: 0 1px 0 rgba(29, 63, 216, 0.08);
}

.home .hk-header {
	background: transparent !important;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}

body.hk-scrolled .hk-header {
	background: rgba(255, 255, 255, 0.78) !important;
	backdrop-filter: saturate(160%) blur(16px);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	box-shadow: 0 10px 30px -18px rgba(29, 63, 216, 0.35);
}

.hk-topbar,
.home .hk-topbar {
	background: linear-gradient(90deg, rgba(29, 63, 216, 0.08), rgba(108, 184, 255, 0.14), rgba(29, 63, 216, 0.08)) !important;
	background-size: 200% 100% !important;
	animation: hk-gradient-flow 12s ease infinite;
	color: var(--hk-text);
}

.hk-topbar a {
	color: var(--hk-blue);
}

.hk-topbar a:hover,
.hk-topbar .hk-topbar-tag strong {
	color: var(--hk-blue-hover);
}

.hk-brand-name a {
	color: var(--hk-ink);
}

.hk-brand-sub {
	color: var(--hk-muted);
}

.hk-brand .hk-logo img {
	box-shadow: 0 0 0 2px rgba(108, 184, 255, 0.9), 0 6px 16px -6px rgba(29, 63, 216, 0.5);
}

.hk-nav .wp-block-navigation-item__content,
.hk-nav .wp-block-navigation__submenu-icon,
.hk-nav .wp-block-navigation__responsive-container-open {
	color: var(--hk-ink) !important;
}

.hk-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	background: linear-gradient(90deg, var(--hk-blue), var(--hk-accent));
	height: 3px;
	border-radius: 3px;
}

.hk-nav .wp-block-navigation__submenu-container {
	background: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(29, 63, 216, 0.08) !important;
}

.hk-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: linear-gradient(160deg, #ffffff, #e8f3ff) !important;
	color: var(--hk-ink) !important;
}

.hk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--hk-ink) !important;
}

.hk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--hk-muted) !important;
}

.hk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--hk-blue) !important;
}

/* --- ปุ่ม --- */
/* ปุ่มสมัครเรียน: กระจกฟ้า ไล่สีเคลื่อนไหว */
.hk-btn-glass .wp-block-button__link,
.hk-page-hero .hk-btn-gold .wp-block-button__link,
.hk-btn-gold .wp-block-button__link {
	background: linear-gradient(120deg, rgba(29, 63, 216, 0.92), rgba(79, 163, 247, 0.88), rgba(29, 63, 216, 0.92)) !important;
	background-size: 220% 100% !important;
	animation: hk-gradient-flow 6s ease infinite;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 30px -12px rgba(29, 63, 216, 0.75) !important;
	text-shadow: none !important;
}

.hk-btn-glass .wp-block-button__link:hover,
.hk-page-hero .hk-btn-gold .wp-block-button__link:hover,
.hk-btn-gold .wp-block-button__link:hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 16px 36px -12px rgba(29, 63, 216, 0.9) !important;
}

.hk-btn-gold .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	transform: skewX(-20deg);
	transition: left 0.75s var(--hk-ease);
}

.hk-btn-gold .wp-block-button__link {
	position: relative;
	overflow: hidden;
}

.hk-btn-gold .wp-block-button__link:hover::before {
	left: 120%;
}

/* ปุ่มรอง: กระจกขาว ขอบน้ำเงิน */
.hk-btn-ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.55) !important;
	color: var(--hk-blue) !important;
	box-shadow: inset 0 0 0 1.5px rgba(29, 63, 216, 0.35) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.hk-btn-ghost .wp-block-button__link:hover {
	background: #fff !important;
	color: var(--hk-blue) !important;
}

.hk-btn-line .wp-block-button__link {
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* --- Hero: สว่าง มินิมอล --- */
.hk-hero .wp-block-cover__background {
	background:
		linear-gradient(100deg, rgba(247, 251, 255, 0.97) 0%, rgba(240, 247, 255, 0.9) 38%, rgba(225, 239, 255, 0.55) 62%, rgba(214, 233, 255, 0.25) 100%) !important;
}

.hk-hero .wp-block-cover__image-background {
	filter: saturate(0.85);
}

.hk-hero::after {
	background-image: radial-gradient(rgba(29, 63, 216, 0.08) 1px, transparent 1.2px) !important;
}

/* แสงฟุ้งตามเมาส์ (ตำแหน่งตั้งด้วย JS) */
.hk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(420px circle at var(--hk-mx, 70%) var(--hk-my, 40%), rgba(124, 196, 255, 0.35), transparent 60%);
	transition: background 0.2s linear;
}

.hk-hero-title {
	color: var(--hk-ink) !important;
	text-shadow: none !important;
}

.hk-hero-title em {
	background: linear-gradient(90deg, #1d3fd8, #4fa3f7, #7cc4ff, #1d3fd8) !important;
	background-size: 300% 100% !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	animation: hk-gradient-flow 8s ease infinite;
}

.hk-hero-text {
	color: var(--hk-text) !important;
}

.hk-hero-kicker {
	background: rgba(255, 255, 255, 0.7) !important;
	border-color: rgba(29, 63, 216, 0.12) !important;
	color: var(--hk-ink) !important;
	box-shadow: var(--hk-shadow);
}

.hk-hero-kicker::before {
	background-color: var(--hk-sky-soft) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M7 9.5V15c0 1.5 2.2 3 5 3s5-1.5 5-3V9.5'/%3E%3C/svg%3E") !important;
}

.hk-hero-facts {
	border-top-color: rgba(29, 63, 216, 0.12) !important;
}

.hk-hero-facts span {
	color: var(--hk-muted) !important;
	border-right-color: rgba(29, 63, 216, 0.12) !important;
}

.hk-hero-facts strong {
	color: var(--hk-ink) !important;
}

.hk-hero-visual::before {
	border-color: rgba(29, 63, 216, 0.25) !important;
}

.hk-hero-photo {
	border-color: #fff !important;
	box-shadow: 0 30px 60px -24px rgba(29, 63, 216, 0.45) !important;
}

.hk-hero-tag {
	background: rgba(255, 255, 255, 0.72) !important;
	border-color: rgba(255, 255, 255, 0.95) !important;
	color: var(--hk-muted) !important;
	box-shadow: var(--hk-shadow-lg) !important;
}

.hk-hero-tag strong {
	color: var(--hk-ink) !important;
}

.hk-hero-tag::before {
	background-color: var(--hk-blue) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") !important;
}

/* --- การ์ดทางลัด/การ์ดทั่วไป: กระจกขาว --- */
.hk-quick-card,
.hk-level-card,
.hk-news-card,
.hk-activity,
.hk-program-card,
.hk-program,
.hk-person {
	background: rgba(255, 255, 255, 0.78) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--hk-glass-line) !important;
}

/* ป้าย ICEP / NSC */
.hk-chip.is-gold {
	background: linear-gradient(120deg, #1d3fd8, #4fa3f7) !important;
	color: #fff !important;
}

/* หลักสูตรเด่น (ICEP): ไล่สีน้ำเงิน→ฟ้า เคลื่อนไหว แทนน้ำเงินเข้ม */
.hk-program.is-featured,
.hk-program-card.is-featured {
	background: linear-gradient(135deg, #1d3fd8, #3f7ff0, #6cb8ff, #1d3fd8) !important;
	background-size: 300% 300% !important;
	animation: hk-gradient-flow 14s ease infinite;
	border-color: transparent !important;
	color: #eaf3ff !important;
}

.hk-program.is-featured .hk-program-tag,
.hk-program-card.is-featured .hk-program-tag,
.hk-program-card.is-featured .hk-level-more {
	color: #fff !important;
}

.hk-program.is-featured::after {
	background: rgba(255, 255, 255, 0.16) !important;
}

/* --- แถบข้อความวิ่ง: ฟ้าไล่สีเคลื่อนไหว ตัวหนังสือน้ำเงินเข้ม --- */
.hk-marquee {
	background: linear-gradient(90deg, #dcecff, #ffffff, #cfe5ff, #ffffff, #dcecff) !important;
	background-size: 300% 100% !important;
	animation: hk-gradient-flow 16s ease infinite;
	color: var(--hk-ink) !important;
	border-top: 1px solid rgba(29, 63, 216, 0.08);
	border-bottom: 1px solid rgba(29, 63, 216, 0.08);
}

.hk-marquee-track p::after {
	color: var(--hk-blue) !important;
}

/* --- คณะผู้บริหาร --- */
.hk-person-role {
	background: var(--hk-sky-soft) !important;
	color: var(--hk-blue) !important;
	box-shadow: none !important;
}

.hk-person.is-lead {
	box-shadow: 0 0 0 2px var(--hk-accent), var(--hk-shadow-lg) !important;
}

.hk-person.is-lead .hk-person-role {
	background: linear-gradient(120deg, #1d3fd8, #4fa3f7) !important;
	color: #fff !important;
}

.hk-person figure::after {
	background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)) !important;
}

/* --- แถบชวนสมัคร: น้ำเงิน→ขาว ไล่สีเคลื่อนไหว --- */
.hk-cta-inner {
	background: linear-gradient(110deg, #1d3fd8 0%, #3f7ff0 30%, #8cc6ff 62%, #eef6ff 85%, #ffffff 100%) !important;
	background-size: 200% 100% !important;
	animation: hk-gradient-flow 14s ease infinite;
	box-shadow: var(--hk-shadow-lg) !important;
}

.hk-cta .wp-block-button .wp-block-button__link {
	background: var(--hk-blue) !important;
	animation: none;
}

.hk-cta .hk-btn-ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.75) !important;
	color: var(--hk-blue) !important;
}

/* --- หน้าย่อย: hero สว่าง --- */
.hk-page-hero {
	background: linear-gradient(135deg, rgba(232, 243, 255, 0.85), rgba(255, 255, 255, 0.6) 55%, rgba(210, 231, 255, 0.8)) !important;
	color: var(--hk-text) !important;
}

.hk-page-hero::before {
	background: radial-gradient(circle, rgba(108, 184, 255, 0.45), transparent 70%) !important;
	animation: hk-bg-drift-2 18s ease-in-out infinite alternate;
}

.hk-page-hero h1 {
	color: var(--hk-ink) !important;
}

.hk-page-hero h1 em {
	color: var(--hk-blue) !important;
}

.hk-page-hero .hk-lead {
	color: var(--hk-text) !important;
}

.hk-page-hero .hk-eyebrow {
	color: var(--hk-blue) !important;
}

.hk-breadcrumb {
	color: var(--hk-muted) !important;
}

.hk-breadcrumb a {
	color: var(--hk-blue) !important;
}

.hk-page-hero .hk-chips .hk-chip {
	background: rgba(255, 255, 255, 0.8) !important;
	color: var(--hk-blue) !important;
	box-shadow: inset 0 0 0 1px rgba(29, 63, 216, 0.15);
}

.hk-page-hero .hk-chips .hk-chip.is-gold {
	background: linear-gradient(120deg, #1d3fd8, #4fa3f7) !important;
	color: #fff !important;
	box-shadow: none;
}

.hk-page-hero-img {
	box-shadow: var(--hk-shadow-lg) !important;
	border: 6px solid #fff;
}

.hk-table thead th {
	background: linear-gradient(90deg, #1d3fd8, #4fa3f7) !important;
}

.hk-table {
	background: rgba(255, 255, 255, 0.85) !important;
}

.hk-info-card {
	background: rgba(255, 255, 255, 0.72) !important;
	border: 1px solid var(--hk-glass-line);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: var(--hk-shadow);
}

.hk-video {
	background: linear-gradient(135deg, #dcecff, #ffffff, #cfe5ff) !important;
	background-size: 300% 300% !important;
	animation: hk-gradient-flow 12s ease infinite;
	color: var(--hk-text) !important;
}

.hk-video::before {
	background-color: var(--hk-blue) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") !important;
}

.hk-todo {
	background: rgba(240, 248, 255, 0.9) !important;
	color: #1d4fa8 !important;
}

.hk-todo::before {
	background: var(--hk-blue) !important;
	color: #fff !important;
}

.hk-level-nav .is-current a {
	background: linear-gradient(120deg, #1d3fd8, #4fa3f7) !important;
	color: #fff !important;
	border-color: transparent !important;
}

/* --- Footer: ฟ้าอ่อน มินิมอล --- */
.hk-footer {
	background: linear-gradient(180deg, rgba(234, 244, 255, 0.85), rgba(214, 233, 255, 0.95)) !important;
	color: var(--hk-text) !important;
}

.hk-footer::before {
	background: linear-gradient(90deg, #1d3fd8, #6cb8ff, #ffffff, #6cb8ff, #1d3fd8) !important;
	background-size: 300% 100% !important;
	animation: hk-gradient-flow 10s linear infinite;
}

.hk-footer h3,
.hk-footer h4 {
	color: var(--hk-ink) !important;
}

.hk-footer h4::after {
	background: linear-gradient(90deg, var(--hk-blue), var(--hk-accent)) !important;
}

.hk-footer a {
	color: var(--hk-text) !important;
}

.hk-footer a:hover {
	color: var(--hk-blue) !important;
}

.hk-footer .hk-social .wp-social-link {
	background: #fff !important;
	color: var(--hk-blue) !important;
	box-shadow: var(--hk-shadow);
}

.hk-footer .hk-social .wp-social-link:hover {
	background: #1877f2 !important;
	color: #fff !important;
}

.hk-footer .hk-social .wp-social-link a {
	color: inherit !important;
}

.hk-footer-bottom {
	border-top-color: rgba(29, 63, 216, 0.12) !important;
	color: var(--hk-muted) !important;
}

.hk-qr figure {
	box-shadow: var(--hk-shadow);
}

.hk-to-top {
	background: linear-gradient(135deg, #1d3fd8, #4fa3f7) !important;
}

.hk-to-top:hover {
	background: var(--hk-ink) !important;
	color: #fff !important;
}

::selection {
	background: #cfe5ff;
	color: var(--hk-ink);
}

/* ฟองอากาศลอยขึ้นเบาๆ (สร้างด้วย JS ใน hero และแถบชวนสมัคร) */
.hk-bubble {
	position: absolute;
	bottom: -40px;
	z-index: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(124, 196, 255, 0.35) 60%, rgba(124, 196, 255, 0.1));
	box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.8);
	pointer-events: none;
	animation: hk-bubble-rise linear infinite;
}

@keyframes hk-bubble-rise {
	0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
	12% { opacity: 0.9; }
	100% { transform: translate3d(var(--hk-sway, 30px), -110vh, 0) scale(1.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after,
	.hk-bubble {
		animation: none !important;
	}

	.hk-bubble {
		display: none;
	}
}

/* ===================================================================
 * 8. Hero แนวนอน: ชื่อโรงเรียนบรรทัดเดียวตรงกลาง รูปกระจายสองข้าง
 *    + ฟอนต์บางลง (ไม่หนาเกินไป)
 * ================================================================ */
.hk-hero {
	min-height: clamp(560px, 76vh, 720px) !important;
	padding-bottom: 120px !important;
}

/* ไล่สีจากกลางจอ (ข้อความอยู่ตรงกลาง) ออกไปขอบ ให้เห็นภาพอาคารจางๆ ด้านข้าง */
.hk-hero .wp-block-cover__background {
	background:
		radial-gradient(ellipse 58% 70% at 50% 46%, rgba(248, 252, 255, 0.97) 0%, rgba(240, 247, 255, 0.9) 45%, rgba(224, 238, 255, 0.62) 75%, rgba(214, 233, 255, 0.45) 100%) !important;
}

.hk-hero-stage {
	position: relative;
	display: flex !important;
	justify-content: center;
	align-items: center;
	min-height: 440px;
}

.hk-hero-content {
	position: relative;
	z-index: 2;
	max-width: 900px;
	margin: 0 auto !important;
	align-items: center !important;
	text-align: center;
	gap: 20px !important;
}

.hk-hero-title {
	white-space: nowrap;
	font-size: clamp(2.3rem, 4.9vw, 4.4rem) !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.15 !important;
}

.hk-hero-text {
	max-width: 680px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.hk-hero .wp-block-buttons {
	justify-content: center !important;
}

.hk-hero-facts {
	justify-content: center;
	margin-top: 10px !important;
}

.hk-hero-facts span {
	align-items: center;
	text-align: center;
	padding: 12px 24px 0 !important;
	margin: 0 !important;
}

.hk-hero-facts span:last-child {
	border-right: 0 !important;
}

/* รูปสองข้าง */
.hk-hero-side {
	position: absolute !important;
	top: 0;
	bottom: 0;
	width: clamp(150px, 16vw, 240px);
	z-index: 1;
	margin: 0 !important;
}

.hk-hero-side.is-left {
	left: 0;
}

.hk-hero-side.is-right {
	right: 0;
}

.hk-hero-side .hk-hero-photo {
	width: 100%;
	border-width: 5px !important;
	border-radius: 20px;
}

.hk-hero-side .hk-hero-photo.is-a {
	top: 0;
	left: 0;
	aspect-ratio: 4 / 5;
	transform: rotate(-5deg);
	animation: hk-bob-tilt-l 8s ease-in-out infinite;
}

.hk-hero-side .hk-hero-photo.is-b {
	bottom: 0;
	right: -10%;
	width: 82%;
	aspect-ratio: 1;
	transform: rotate(4deg);
	animation: hk-bob-tilt-r 9s ease-in-out infinite -3s;
}

.hk-hero-side .hk-hero-photo.is-c {
	top: 6%;
	right: 0;
	width: 88%;
	aspect-ratio: 1;
	transform: rotate(5deg);
	animation: hk-bob-tilt-r 8.5s ease-in-out infinite -1.5s;
}

.hk-hero-side .hk-hero-photo.is-d {
	bottom: 0;
	left: -8%;
	aspect-ratio: 4 / 5;
	transform: rotate(-4deg);
	animation: hk-bob-tilt-l 9.5s ease-in-out infinite -4s;
}

/* วงกลมเส้นประตกแต่งด้านหลังรูป */
.hk-hero-side::before {
	content: "";
	position: absolute;
	top: 18%;
	left: 50%;
	width: 160%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	border: 1.5px dashed rgba(29, 63, 216, 0.18);
	animation: hk-spin 70s linear infinite;
	pointer-events: none;
}

@keyframes hk-bob-tilt-l {
	0%, 100% { transform: rotate(-5deg) translateY(0); }
	50% { transform: rotate(-3deg) translateY(-14px); }
}

@keyframes hk-bob-tilt-r {
	0%, 100% { transform: rotate(4deg) translateY(0); }
	50% { transform: rotate(2deg) translateY(-12px); }
}

@media (max-width: 1100px) {
	.hk-hero-side {
		display: none !important;
	}
}

@media (max-width: 760px) {
	.hk-hero-title {
		white-space: normal;
		font-size: 2.3rem !important;
	}

	.hk-hero-stage {
		min-height: 0;
	}

	.hk-hero-facts span {
		padding: 12px 12px 0 !important;
	}
}

/* --- ฟอนต์บางลง --- */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-site-title,
.hk-title,
.hk-brand-name {
	font-weight: 500 !important;
}

.hk-hero-facts strong,
.hk-level-num,
.hk-table td:first-child,
.hk-info-row strong,
.hk-topbar .hk-topbar-tag strong {
	font-weight: 500 !important;
}

.hk-program-tag,
.hk-pillar-num {
	font-weight: 600 !important;
}

.wp-block-navigation,
.wp-block-button__link,
.hk-eyebrow,
.hk-chip,
.hk-person-role {
	font-weight: 400 !important;
}

/* ===================================================================
 * 9. ปรับรอบ 3: hero เห็นรูปโรงเรียนชัดขึ้น พื้นหลังฟ้าขึ้น ไม่ขาวแสบตา
 *    รูปบรรยากาศโรงเรียนกระจายออกไปชิดขอบจอ
 * ================================================================ */

/* --- พื้นหลังทั้งเว็บ: เติมฟ้า ลดความขาว --- */
html {
	background: #e8f2ff;
}

body::before {
	background:
		radial-gradient(28vmax 24vmax at 18% 22%, rgba(108, 184, 255, 0.55), transparent 70%),
		radial-gradient(24vmax 20vmax at 82% 18%, rgba(29, 63, 216, 0.22), transparent 70%),
		radial-gradient(30vmax 26vmax at 70% 78%, rgba(124, 196, 255, 0.55), transparent 70%),
		radial-gradient(22vmax 20vmax at 22% 82%, rgba(79, 140, 247, 0.3), transparent 70%),
		linear-gradient(135deg, #e6f1ff 0%, #d7e8ff 35%, #eef6ff 60%, #d3e5ff 100%) !important;
}

body::after {
	background:
		radial-gradient(18vmax 16vmax at 60% 40%, rgba(255, 255, 255, 0.55), transparent 70%),
		radial-gradient(20vmax 18vmax at 35% 60%, rgba(108, 184, 255, 0.35), transparent 70%) !important;
}

.hk-bg-soft {
	background: linear-gradient(180deg, rgba(214, 232, 255, 0.55), rgba(235, 244, 255, 0.3)) !important;
}

/* การ์ดขาวไม่จ้าเกินไป */
.hk-quick-card,
.hk-level-card,
.hk-news-card,
.hk-activity,
.hk-program-card,
.hk-program,
.hk-person,
.hk-pillar,
.hk-resource,
.hk-info-card {
	background: rgba(250, 252, 255, 0.82) !important;
}

/* --- Hero: เห็นอาคารเรียนชัดขึ้น + โทนฟ้า --- */
.hk-hero .wp-block-cover__image-background {
	filter: saturate(1.05) contrast(1.02) !important;
}

.hk-hero .wp-block-cover__background {
	background:
		radial-gradient(ellipse 40% 55% at 50% 46%, rgba(232, 242, 255, 0.86) 0%, rgba(220, 235, 255, 0.72) 45%, rgba(190, 216, 255, 0.35) 80%, rgba(150, 190, 250, 0.15) 100%),
		linear-gradient(180deg, rgba(29, 63, 216, 0.18) 0%, rgba(108, 184, 255, 0.12) 60%, rgba(232, 242, 255, 0.85) 100%) !important;
}

/* ข้อความยังอ่านชัดบนภาพ */
.hk-hero-text {
	color: #24345e !important;
}

.hk-hero-facts span {
	color: #3a4f80 !important;
}

/* --- รูปสองข้าง: ออกไปชิดขอบจอ ห่างจากข้อความ --- */
.hk-hero-stage {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.hk-hero-content {
	max-width: 820px;
}

.hk-hero-title {
	font-size: clamp(2.3rem, 4.3vw, 4.1rem) !important;
}

.hk-hero-side {
	width: clamp(150px, 14vw, 230px);
}

.hk-hero-side.is-left {
	left: clamp(16px, 2.6vw, 52px);
}

.hk-hero-side.is-right {
	right: clamp(16px, 2.6vw, 52px);
}

.hk-hero-side .hk-hero-photo.is-a {
	top: 0;
	left: 0;
	right: auto;
	width: 100%;
	aspect-ratio: 4 / 3.4;
}

.hk-hero-side .hk-hero-photo.is-b {
	bottom: 2%;
	left: 22%;
	right: auto;
	width: 80%;
	aspect-ratio: 4 / 3;
}

.hk-hero-side .hk-hero-photo.is-c {
	top: 4%;
	right: 0;
	left: auto;
	width: 100%;
	aspect-ratio: 4 / 3.2;
}

.hk-hero-side .hk-hero-photo.is-d {
	bottom: 0;
	right: 20%;
	left: auto;
	width: 82%;
	aspect-ratio: 4 / 3;
}

.hk-hero-side::before {
	width: 140%;
	top: 22%;
}

@media (max-width: 1200px) {
	.hk-hero-side {
		display: none !important;
	}

	.hk-hero-stage {
		width: auto;
		max-width: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ===================================================================
 * 10. ปรับรอบ 4: ลื่นไหลขึ้น
 *     - header เลื่อนขึ้นซ่อนแถบบนสุดแบบนุ่ม (แทนการยุบแถบที่กระตุก)
 *     - ปุ่มใน hero ขนาดเท่ากัน
 *     - แอนิเมชันใช้ transform/opacity เท่านั้น ลดเอฟเฟกต์เบลอที่หนักเครื่อง
 * ================================================================ */
:root,
body {
	--hk-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
	--hk-topbar-h: 34px;
}

/* Lenis จัดการการเลื่อนเอง จึงปิด smooth ของเบราว์เซอร์ไม่ให้ซ้อนกัน */
html.lenis,
html.lenis body {
	scroll-behavior: auto !important;
}

/* --- Header: ทั้งก้อนเลื่อนขึ้นเท่าความสูงแถบบนสุด แล้วพื้นค่อยๆ เป็นกระจกขาว --- */
.hk-site-header {
	transition: transform 0.7s var(--hk-ease-smooth);
	will-change: transform;
}

body.hk-scrolled .hk-site-header {
	transform: translate3d(0, calc(-1 * var(--hk-topbar-h)), 0);
}

body.hk-scrolled .hk-topbar,
.hk-topbar {
	max-height: none !important;
	transition: opacity 0.5s var(--hk-ease-smooth) !important;
}

body.hk-scrolled .hk-topbar {
	opacity: 0 !important;
}

.hk-header,
.home .hk-header {
	transition: background-color 0.7s var(--hk-ease-smooth), box-shadow 0.7s var(--hk-ease-smooth), -webkit-backdrop-filter 0.7s var(--hk-ease-smooth), backdrop-filter 0.7s var(--hk-ease-smooth) !important;
}

.home .hk-header {
	backdrop-filter: blur(0px) saturate(100%) !important;
	-webkit-backdrop-filter: blur(0px) saturate(100%) !important;
}

body.hk-scrolled .hk-header {
	backdrop-filter: blur(16px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

.hk-mainbar > .hk-inner {
	transition: min-height 0.7s var(--hk-ease-smooth) !important;
}

.hk-brand .hk-logo img {
	transition: width 0.7s var(--hk-ease-smooth), height 0.7s var(--hk-ease-smooth) !important;
}

/* --- ปุ่มใน hero / หัวหน้าย่อย / แถบชวนสมัคร: ขนาดเท่ากัน --- */
.hk-hero .wp-block-button__link,
.hk-page-hero .wp-block-button__link,
.hk-cta .wp-block-button__link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 250px;
	min-height: 58px;
	padding: 0 2em !important;
	border: 1.5px solid transparent !important;
	font-size: 1.05rem !important;
	line-height: 1.2;
}

.hk-hero .hk-btn-ghost .wp-block-button__link,
.hk-page-hero .hk-btn-ghost .wp-block-button__link,
.hk-cta .hk-btn-ghost .wp-block-button__link {
	border-color: rgba(29, 63, 216, 0.35) !important;
	box-shadow: none !important;
}

.hk-hero .hk-btn-glass .wp-block-button__link,
.hk-page-hero .hk-btn-gold .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.7) !important;
}

.hk-cta .wp-block-button__link {
	min-width: 190px;
	min-height: 52px;
}

@media (max-width: 600px) {
	.hk-hero .wp-block-buttons,
	.hk-page-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch !important;
		width: 100%;
	}

	.hk-hero .wp-block-button,
	.hk-page-hero .wp-block-button,
	.hk-hero .wp-block-button__link,
	.hk-page-hero .wp-block-button__link {
		width: 100%;
		min-width: 0;
	}
}

/* --- แอนิเมชันลื่นขึ้น --- */
.hk-js .hk-reveal,
.hk-js .hk-stagger > * {
	transform: translate3d(0, 26px, 0);
	transition: opacity 1.1s var(--hk-ease-smooth), transform 1.2s var(--hk-ease-smooth) !important;
	transition-delay: var(--hk-delay, 0s) !important;
}

.hk-js .hk-reveal.is-in,
.hk-js .hk-stagger.is-in > * {
	transform: translate3d(0, 0, 0);
}

/* หลังแสดงครบแล้ว ให้ hover ของการ์ดกลับมาตอบสนองเร็ว */
.hk-js .hk-stagger.is-in > *:hover {
	transition-delay: 0s !important;
	transition-duration: 0.5s !important;
}

.hk-quick-card,
.hk-level-card,
.hk-news-card,
.hk-activity,
.hk-program-card,
.hk-program,
.hk-person,
.hk-pillar,
.hk-resource,
.hk-gallery figure,
.hk-photo-grid figure,
.hk-stars figure {
	/* เบลอหลังการ์ดหลายสิบใบทำให้เลื่อนกระตุก จึงปิด ใช้พื้นขาวโปร่งแทน */
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transition: transform 0.6s var(--hk-ease-smooth), box-shadow 0.6s var(--hk-ease-smooth), border-color 0.4s ease, background-color 0.4s ease !important;
}

.hk-level-card img,
.hk-news-card img,
.hk-activity img,
.hk-program-card img,
.hk-person img,
.hk-gallery img,
.hk-photo-grid img,
.hk-collage img {
	transition: transform 1.1s var(--hk-ease-smooth) !important;
}

/* พื้นหลังเคลื่อนไหว: ตัดการผสมสีที่หนักเครื่องออก */
body::after {
	mix-blend-mode: normal !important;
	opacity: 0.8;
}

.hk-btn-line .wp-block-button__link,
.hk-btn-ghost .wp-block-button__link {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.wp-block-button .wp-block-button__link {
	transition: transform 0.5s var(--hk-ease-smooth), box-shadow 0.5s var(--hk-ease-smooth), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* hero ไม่มีรูปด้านข้างแล้ว: เนื้อหากว้างขึ้นเล็กน้อย */
.hk-hero-content {
	max-width: 900px !important;
}

.hk-hero-title {
	font-size: clamp(2.3rem, 4.8vw, 4.4rem) !important;
}

/* header บนหน้าแรก: ไล่ขาวจางๆ ด้านหลัง ให้ชื่อโรงเรียน/เมนูอ่านชัดบนภาพอาคาร */
.home .hk-header {
	background: linear-gradient(180deg, rgba(240, 247, 255, 0.92) 0%, rgba(240, 247, 255, 0.7) 60%, rgba(240, 247, 255, 0) 100%) !important;
}

body.hk-scrolled.home .hk-header {
	background: rgba(255, 255, 255, 0.82) !important;
}

.home .hk-topbar {
	background: transparent !important;
	animation: none;
}

.home .hk-header {
	background: linear-gradient(180deg, rgba(236, 245, 255, 0.97) 0%, rgba(236, 245, 255, 0.88) 55%, rgba(236, 245, 255, 0) 100%) !important;
}

.hk-brand-sub,
.hk-topbar {
	color: #34497a !important;
}

/* แถบเมนูหน้าแรก: แสดงเป็นแถบกระจกขาวตั้งแต่แรก ไม่ต้องรอเลื่อน (ผู้ใช้ขอ) */
.home .hk-header,
body.hk-scrolled.home .hk-header {
	background: rgba(255, 255, 255, 0.84) !important;
	backdrop-filter: blur(16px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(16px) saturate(160%) !important;
	box-shadow: 0 10px 30px -20px rgba(29, 63, 216, 0.35) !important;
}

.home .hk-topbar {
	background: linear-gradient(90deg, rgba(29, 63, 216, 0.08), rgba(108, 184, 255, 0.14), rgba(29, 63, 216, 0.08)) !important;
	background-size: 200% 100% !important;
	animation: hk-gradient-flow 12s ease infinite !important;
}

/* ===================================================================
 * 11. ปรับรอบ 5
 *     - ไม่มีแถบเบอร์โทรแล้ว header เตี้ยลง ติดขอบบนสุด
 *     - hero สูงขึ้น เห็นรูปโรงเรียนมากขึ้น
 *     - แต่ละส่วนของหน้ามีขอบเขต/ชั้นชัดเจน ไม่กลืนกันจนเกินไป
 * ================================================================ */
:root,
body {
	--hk-header-h: 64px;
	--hk-topbar-h: 0px;
}

/* --- Header เตี้ย ติดขอบบน --- */
.hk-site-header,
body.hk-scrolled .hk-site-header {
	top: var(--hk-adminbar) !important;
	transform: none !important;
}

.hk-mainbar > .hk-inner {
	min-height: var(--hk-header-h) !important;
	gap: 12px 24px !important;
}

body.hk-scrolled .hk-mainbar > .hk-inner {
	min-height: 58px !important;
}

.hk-brand .hk-logo img {
	width: 42px !important;
	height: 42px !important;
	padding: 2px !important;
}

body.hk-scrolled .hk-brand .hk-logo img {
	width: 38px !important;
	height: 38px !important;
}

.hk-brand {
	gap: 10px !important;
}

.hk-brand-name {
	font-size: clamp(0.98rem, 1.2vw, 1.08rem) !important;
}

.hk-brand-sub {
	font-size: 0.7rem !important;
}

.hk-nav .wp-block-navigation-item__content {
	padding: 6px 0 !important;
}

.hk-header-cta .wp-block-button__link {
	padding: 0.5em 1.3em !important;
	font-size: 0.92rem !important;
}

/* --- Hero สูงขึ้น --- */
.hk-hero {
	min-height: clamp(640px, 90vh, 860px) !important;
	padding-top: calc(var(--hk-header-h) + 72px) !important;
	padding-bottom: 150px !important;
}

@media (max-width: 600px) {
	.hk-hero {
		min-height: 560px !important;
		padding-top: calc(var(--hk-header-h) + 48px) !important;
		padding-bottom: 110px !important;
	}
}

/* --- แบ่งชั้นแต่ละส่วนให้ชัด ---
 * ส่วนปกติ   = แผ่นขาวโปร่ง + ลายจุดจางๆ
 * ส่วนสีฟ้า  = ฟ้าอ่อนทึบขึ้น + ลายเส้นทแยง
 * ทุกส่วนมีเส้นแสงขาวด้านบน และเงาบางๆ ใต้เส้น เหมือนแผ่นกระดาษวางซ้อนกัน */
.hk-section,
.hk-team-section {
	position: relative;
	isolation: isolate;
}

.hk-home > .hk-section:not(.hk-cta):not(.hk-bg-soft):not(.hk-bg-navy),
.hk-landing .wp-block-post-content > .hk-section:not(.hk-cta):not(.hk-bg-soft):not(.hk-bg-navy),
.hk-team-section {
	background:
		radial-gradient(rgba(29, 63, 216, 0.07) 1px, transparent 1.3px) 0 0 / 22px 22px,
		linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 250, 255, 0.6)) !important;
}

.hk-bg-soft {
	background:
		repeating-linear-gradient(135deg, rgba(29, 63, 216, 0.035) 0 1px, transparent 1px 14px),
		linear-gradient(180deg, rgba(196, 221, 255, 0.72), rgba(214, 232, 255, 0.6)) !important;
}

.hk-bg-navy {
	background:
		radial-gradient(60% 80% at 15% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
		linear-gradient(135deg, rgba(160, 200, 255, 0.75), rgba(205, 228, 255, 0.7) 55%, rgba(170, 208, 255, 0.75)) !important;
}

/* เส้นแสง + เงาที่ขอบบนของแต่ละส่วน */
.hk-section::before,
.hk-team-section::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 18px;
	background: linear-gradient(180deg, rgba(29, 63, 216, 0.08), rgba(29, 63, 216, 0));
	border-top: 1px solid rgba(255, 255, 255, 0.95);
	pointer-events: none;
	z-index: -1;
}

/* แถบชวนสมัคร/hero ไม่ต้องมีเส้น */
.hk-cta::before,
.hk-hero::before {
	border-top: 0;
}

.hk-cta::before {
	display: none;
}

/* แถบข้อความวิ่ง: ยกเป็นแถบลอยมีเงา แยกจากส่วนอื่นชัดเจน */
.hk-marquee {
	position: relative;
	z-index: 2;
	box-shadow: 0 10px 30px -18px rgba(29, 63, 216, 0.45), 0 -10px 30px -18px rgba(29, 63, 216, 0.3);
}

/* การ์ดลอยเด่นขึ้นจากพื้น */
.hk-quick-card,
.hk-level-card,
.hk-news-card,
.hk-activity,
.hk-program-card,
.hk-program,
.hk-person,
.hk-pillar,
.hk-resource,
.hk-info-card,
.hk-table {
	border: 1px solid rgba(255, 255, 255, 0.95) !important;
	box-shadow: 0 1px 0 rgba(29, 63, 216, 0.06), 0 18px 40px -22px rgba(29, 63, 216, 0.42) !important;
}

/* footer แยกชั้นด้วยขอบโค้งด้านบน */
.hk-footer {
	border-radius: 36px 36px 0 0;
	margin-top: 24px !important;
	box-shadow: 0 -20px 50px -30px rgba(29, 63, 216, 0.4);
}

/* หน้าย่อย: hero แยกจากเนื้อหาด้วยขอบโค้งด้านล่าง */
.hk-page-hero {
	border-radius: 0 0 36px 36px;
	box-shadow: 0 20px 50px -30px rgba(29, 63, 216, 0.4);
	z-index: 1;
}

/* เว้นที่ด้านขวาของเมนูที่มีเมนูย่อยให้ลูกศร ˅ (ไม่ให้ซ้อนทับตัวอักษรสุดท้าย) */
.hk-nav .wp-block-navigation-submenu__toggle {
	padding-right: 1em !important;
}

.hk-nav .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
	margin-left: -0.55em !important;
}

/* ===================================================================
 * 12. Hero: ไม่มีชั้นสีขาว ไม่มีแสงตามเมาส์ ข้อความขาวเด่นบนรูปโรงเรียน
 *     ใช้ฟิล์มน้ำเงินบางๆ ทับรูป (เข้มขึ้นเล็กน้อยตรงกลางที่มีข้อความ)
 * ================================================================ */
.hk-hero::before {
	display: none !important;
}

.hk-hero .wp-block-cover__image-background {
	filter: saturate(1.08) contrast(1.04) !important;
}

.hk-hero .wp-block-cover__background {
	background:
		radial-gradient(ellipse 46% 52% at 50% 44%, rgba(6, 20, 66, 0.5) 0%, rgba(8, 24, 80, 0.32) 55%, rgba(8, 24, 80, 0) 100%),
		linear-gradient(180deg, rgba(8, 24, 80, 0.42) 0%, rgba(18, 48, 150, 0.28) 55%, rgba(18, 48, 150, 0.42) 100%) !important;
}

.hk-hero::after {
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.2px) !important;
}

.hk-hero-title {
	color: #fff !important;
	text-shadow: 0 2px 4px rgba(4, 14, 50, 0.35), 0 12px 40px rgba(4, 14, 50, 0.45) !important;
}

.hk-hero-title em {
	background: linear-gradient(90deg, #cfe9ff, #8fd0ff, #ffffff, #8fd0ff) !important;
	background-size: 300% 100% !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	filter: drop-shadow(0 6px 18px rgba(4, 14, 50, 0.45));
}

.hk-hero-text {
	color: #eef5ff !important;
	text-shadow: 0 2px 12px rgba(4, 14, 50, 0.55);
	font-size: clamp(1.08rem, 1.4vw, 1.25rem) !important;
}

.hk-hero-kicker {
	background: rgba(255, 255, 255, 0.16) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	color: #fff !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	box-shadow: 0 8px 24px -12px rgba(4, 14, 50, 0.5) !important;
}

.hk-hero-kicker::before {
	background-color: rgba(255, 255, 255, 0.92) !important;
}

.hk-hero-facts {
	border-top-color: rgba(255, 255, 255, 0.28) !important;
}

.hk-hero-facts span {
	color: #d6e6ff !important;
	border-right-color: rgba(255, 255, 255, 0.28) !important;
	text-shadow: 0 2px 10px rgba(4, 14, 50, 0.5);
}

.hk-hero-facts strong {
	color: #fff !important;
}

/* ปุ่มรองบนรูป: กระจกขาวโปร่ง ตัวหนังสือขาว */
.hk-hero .hk-btn-ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.14) !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.75) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
}

.hk-hero .hk-btn-ghost .wp-block-button__link:hover {
	background: #fff !important;
	color: var(--hk-blue) !important;
}

.hk-hero .hk-btn-glass .wp-block-button__link {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 34px -12px rgba(4, 14, 50, 0.7) !important;
}

/* "วิทยาลัย" ใช้สีฟ้าสว่างทึบ (ตัวอักษรไล่สีโปร่งจะกลืนกับรูป) */
.hk-hero-title em {
	background: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	color: #9fd8ff !important;
	-webkit-text-fill-color: #9fd8ff;
	animation: none !important;
	filter: none !important;
	text-shadow: 0 2px 4px rgba(4, 14, 50, 0.4), 0 12px 40px rgba(4, 14, 50, 0.5) !important;
}

.hk-hero .wp-block-cover__background {
	background:
		radial-gradient(ellipse 46% 52% at 50% 44%, rgba(6, 20, 66, 0.58) 0%, rgba(8, 24, 80, 0.36) 55%, rgba(8, 24, 80, 0) 100%),
		linear-gradient(180deg, rgba(8, 24, 80, 0.42) 0%, rgba(18, 48, 150, 0.28) 55%, rgba(18, 48, 150, 0.42) 100%) !important;
}

/* ===================================================================
 * 13. ทางลัด 4 ช่อง: วางบนแผงฐานเดียวกัน ไม่ลอยแยกกัน
 * ================================================================ */
.hk-quick {
	margin-top: -78px !important;
	padding: 0 var(--hk-gutter) 8px !important;
}

.hk-quick-grid {
	position: relative;
	gap: 0 !important;
	padding: 12px !important;
	border-radius: 30px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 249, 255, 0.95));
	border: 1px solid rgba(255, 255, 255, 1);
	box-shadow:
		0 1px 0 rgba(29, 63, 216, 0.06),
		0 30px 60px -28px rgba(11, 27, 77, 0.45),
		0 12px 24px -16px rgba(29, 63, 216, 0.25);
}

/* ขอบฟ้าบางๆ ด้านบนแผง */
.hk-quick-grid::before {
	content: "";
	position: absolute;
	left: 28px;
	right: 28px;
	top: 0;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, rgba(29, 63, 216, 0), #4fa3f7, #1d3fd8, #4fa3f7, rgba(29, 63, 216, 0));
}

/* การ์ดในแผง: แบนราบ มีเส้นคั่น ไม่มีเงาของตัวเอง */
.hk-quick-card {
	background: transparent !important;
	border: 0 !important;
	border-radius: 20px;
	box-shadow: none !important;
	padding: 22px 24px !important;
}

.hk-quick-card + .hk-quick-card::after {
	content: "";
	position: absolute;
	left: 0;
	top: 22%;
	bottom: 22%;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(29, 63, 216, 0.15), transparent);
}

.hk-quick-card:hover {
	transform: translateY(-3px) !important;
	background: var(--hk-sky-soft) !important;
	box-shadow: none !important;
}

.hk-quick-card:hover + .hk-quick-card::after,
.hk-quick-card:hover::after {
	opacity: 0;
}

@media (max-width: 1024px) {
	.hk-quick-card:nth-child(3)::after {
		display: none;
	}

	.hk-quick-card:nth-child(n+3) {
		border-top: 1px solid rgba(29, 63, 216, 0.1) !important;
		border-radius: 0 0 20px 20px;
	}
}

@media (max-width: 600px) {
	.hk-quick {
		margin-top: -56px !important;
	}

	.hk-quick-grid {
		padding: 8px !important;
		border-radius: 24px;
	}

	.hk-quick-card {
		padding: 16px 14px !important;
	}
}

/* ===================================================================
 * 14. หน้าย่อยทั่วไป (template เดิมของธีม): หน้าเพจ, ข่าวแต่ละข่าว, หน้ารวมข่าว
 *     - แถบหัวเรื่องเต็มจอ ไล่สีฟ้า
 *     - เนื้อหาอยู่ในแผ่นกระดาษขาว อ่านง่าย
 *     - หน้ารวมข่าวเป็นกริดการ์ด
 * ================================================================ */

/* --- แถบหัวเรื่อง (กลุ่มแรกใน main ที่มีชื่อหน้า) --- */
body.page-template-default main > .wp-block-group:first-child,
body.single-post main > .wp-block-group:has(> .wp-block-post-title) {
	position: relative;
	overflow: hidden;
	width: 100vw;
	max-width: 100vw !important;
	margin: 0 calc(50% - 50vw) !important;
	padding: clamp(48px, 6vw, 80px) var(--hk-gutter) clamp(56px, 7vw, 92px) !important;
	text-align: center;
	background:
		radial-gradient(50% 120% at 85% 0%, rgba(255, 255, 255, 0.6), transparent 60%),
		radial-gradient(40% 90% at 10% 100%, rgba(108, 184, 255, 0.45), transparent 65%),
		linear-gradient(135deg, #cfe3ff 0%, #e6f1ff 50%, #c7ddff 100%);
	border-radius: 0 0 36px 36px;
	box-shadow: 0 20px 50px -30px rgba(29, 63, 216, 0.4);
	isolation: isolate;
}

/* ลายจุด + วงกลมตกแต่งในแถบหัวเรื่อง */
body.page-template-default main > .wp-block-group:first-child::before,
body.single-post main > .wp-block-group:has(> .wp-block-post-title)::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(29, 63, 216, 0.1) 1px, transparent 1.3px);
	background-size: 22px 22px;
	z-index: -1;
	pointer-events: none;
}

body.page-template-default main > .wp-block-group:first-child::after {
	content: "";
	position: absolute;
	right: -80px;
	top: -120px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 1.5px dashed rgba(29, 63, 216, 0.18);
	animation: hk-spin 80s linear infinite;
	z-index: -1;
	pointer-events: none;
}

/* ป้ายชื่อโรงเรียนเหนือชื่อหน้า */
body.page-template-default main > .wp-block-group:first-child > .wp-block-post-title::before {
	content: "โรงเรียนฮั่วเคี้ยววิทยาลัย";
	display: block;
	width: max-content;
	margin: 0 auto 14px;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.75);
	box-shadow: inset 0 0 0 1px rgba(29, 63, 216, 0.12);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--hk-blue);
}

body.page-template-default main > .wp-block-group:first-child > .wp-block-post-title,
body.single-post main .wp-block-group > .wp-block-post-title {
	margin: 0 auto !important;
	max-width: 900px;
	color: var(--hk-ink);
	font-size: clamp(2rem, 4vw, 3.2rem) !important;
	line-height: 1.25;
}

/* --- แผ่นเนื้อหา --- */
body.page-template-default .wp-block-post-content,
body.single-post .wp-block-post-content {
	position: relative;
	max-width: 1080px !important;
	margin: clamp(-40px, -3vw, -24px) auto clamp(48px, 6vw, 80px) !important;
	padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 60px) !important;
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #fff;
	box-shadow: 0 1px 0 rgba(29, 63, 216, 0.06), 0 30px 60px -32px rgba(29, 63, 216, 0.45);
	color: var(--hk-text) !important;
	font-size: 1.05rem !important;
	z-index: 2;
}

body.page-template-default .wp-block-post-content > *,
body.single-post .wp-block-post-content > * {
	max-width: 100% !important;
}

/* กลุ่มที่มีพื้นสีในเนื้อหาเดิม ให้เข้าชุดกับธีม */
body.page-template-default .wp-block-post-content .wp-block-group.has-background,
body.single-post .wp-block-post-content .wp-block-group.has-background {
	background: var(--hk-sky-soft) !important;
	border-radius: 22px;
}

.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4 {
	color: var(--hk-ink) !important;
}

.wp-block-post-content a:not(.wp-block-button__link) {
	color: var(--hk-blue);
	text-decoration-color: rgba(29, 63, 216, 0.3);
	text-underline-offset: 3px;
}

.wp-block-post-content a:not(.wp-block-button__link):hover {
	text-decoration-color: var(--hk-blue);
}

.wp-block-post-content img {
	border-radius: 16px;
	height: auto;
	max-width: 100%;
}

.wp-block-post-content figure.wp-block-image,
.wp-block-post-content .wp-block-gallery figure {
	transition: transform 0.6s var(--hk-ease-smooth);
}

.wp-block-post-content figure.wp-block-image:hover {
	transform: translateY(-4px);
}

.wp-block-post-content figcaption {
	color: var(--hk-muted);
	font-size: 0.9rem;
	text-align: center;
}

/* ตารางในเนื้อหา */
.wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--hk-line);
}

.wp-block-post-content table th {
	background: linear-gradient(90deg, #1d3fd8, #4fa3f7);
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
	padding: 12px 16px;
	border: 0;
}

.wp-block-post-content table td {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--hk-line);
}

.wp-block-post-content table tr:nth-child(even) td {
	background: rgba(238, 243, 255, 0.6);
}

/* แผนที่/วิดีโอที่ฝังไว้ */
.wp-block-post-content iframe {
	max-width: 100%;
	border-radius: 18px;
	box-shadow: 0 18px 40px -24px rgba(29, 63, 216, 0.45);
}

/* ปุ่มเดิมในเนื้อหา (เฉพาะหน้าทั่วไป/ข่าว ไม่รวมหน้าระดับชั้นที่มีปุ่มของตัวเอง) */
body.page-template-default .wp-block-post-content .wp-block-button__link,
body.single-post .wp-block-post-content .wp-block-button__link {
	background: linear-gradient(120deg, #1d3fd8, #4fa3f7) !important;
	color: #fff !important;
	border-radius: 999px !important;
}

/* --- ข่าวแต่ละข่าว --- */
body.single-post main > .wp-block-post-featured-image {
	max-width: 1080px !important;
	margin: 28px auto -12px !important;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 30px 60px -30px rgba(29, 63, 216, 0.5);
	position: relative;
	z-index: 3;
}

body.single-post main > .wp-block-post-featured-image {
	background:
		radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.9), transparent 55%),
		linear-gradient(135deg, #dce9ff, #eef4ff);
}

/* รูปปกแสดงเต็มรูป ไม่ตัดหัวท้าย (โปสเตอร์แนวตั้งจะอยู่กลาง มีพื้นฟ้าอ่อนด้านข้าง) */
body.single-post main > .wp-block-post-featured-image img {
	display: block;
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: min(82vh, 900px);
	margin: 0 auto;
	object-fit: contain;
	aspect-ratio: auto !important;
	cursor: zoom-in;
}

body.single-post .wp-block-post-date,
body.single-post .wp-block-post-author-name {
	display: inline-flex;
	padding: 4px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.75);
	color: var(--hk-blue);
	font-size: 0.88rem !important;
}

body.single-post main > .wp-block-group:has(> .wp-block-post-title) .is-nowrap {
	justify-content: center;
	gap: 8px;
	margin-top: 14px !important;
}

/* --- หน้ารวมข่าว: กริดการ์ด --- */
body.blog main,
body.archive main {
	padding-top: clamp(36px, 5vw, 64px) !important;
}

body.blog main::before,
body.archive main::before {
	content: "ข่าวประชาสัมพันธ์";
	display: block;
	text-align: center;
	margin: 0 auto clamp(28px, 4vw, 48px);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 500;
	color: var(--hk-ink);
}

body.archive main::before {
	content: none;
}

body.blog .wp-block-post-template,
body.archive .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px !important;
	max-width: var(--hk-wrap) !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

body.blog .wp-block-post-template > li,
body.archive .wp-block-post-template > li {
	margin: 0 !important;
	border-radius: 24px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid #fff;
	box-shadow: 0 1px 0 rgba(29, 63, 216, 0.06), 0 18px 40px -24px rgba(29, 63, 216, 0.42);
	transition: transform 0.6s var(--hk-ease-smooth), box-shadow 0.6s var(--hk-ease-smooth);
}

body.blog .wp-block-post-template > li:hover,
body.archive .wp-block-post-template > li:hover {
	transform: translateY(-8px);
	box-shadow: 0 1px 0 rgba(29, 63, 216, 0.06), 0 30px 60px -26px rgba(29, 63, 216, 0.5);
}

/* ในการ์ด: รูปอยู่บน ข้อความอยู่ล่าง */
body.blog .wp-block-post-template > li > .wp-block-group,
body.archive .wp-block-post-template > li > .wp-block-group {
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0 !important;
	height: 100%;
}

body.blog .wp-block-post-featured-image,
body.archive .wp-block-post-featured-image {
	margin: 0 !important;
	width: 100% !important;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	flex: 0 0 auto;
}

body.blog .wp-block-post-featured-image img,
body.archive .wp-block-post-featured-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0 !important;
	transition: transform 1s var(--hk-ease-smooth);
}

body.blog .wp-block-post-template > li:hover .wp-block-post-featured-image img,
body.archive .wp-block-post-template > li:hover .wp-block-post-featured-image img {
	transform: scale(1.06);
}

body.blog .wp-block-post-template > li > .wp-block-group > .wp-block-group,
body.archive .wp-block-post-template > li > .wp-block-group > .wp-block-group {
	padding: 20px 22px 24px !important;
	flex: 1 1 auto;
}

body.blog .wp-block-post-title,
body.archive .wp-block-post-title {
	font-size: 1.12rem !important;
	line-height: 1.45 !important;
	margin: 0 0 8px !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.blog .wp-block-post-title a,
body.archive .wp-block-post-title a {
	color: var(--hk-ink);
	text-decoration: none;
}

body.blog .wp-block-post-title a::after,
body.archive .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

body.blog .wp-block-post-template > li,
body.archive .wp-block-post-template > li {
	position: relative;
}

body.blog .wp-block-post-date,
body.archive .wp-block-post-date,
body.blog .wp-block-post-author-name,
body.archive .wp-block-post-author-name {
	font-size: 0.85rem !important;
	color: var(--hk-blue) !important;
}

body.blog .wp-block-post-excerpt,
body.archive .wp-block-post-excerpt {
	font-size: 0.93rem;
	color: var(--hk-muted);
	margin-top: 8px !important;
}

body.blog .wp-block-post-excerpt__excerpt,
body.archive .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* เลขหน้า */
.wp-block-query-pagination {
	margin-top: 40px !important;
	gap: 8px !important;
	justify-content: center !important;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--hk-ink);
	text-decoration: none;
	box-shadow: 0 0 0 1px var(--hk-line);
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--hk-ease-smooth);
}

.wp-block-query-pagination a:hover {
	background: var(--hk-blue);
	color: #fff;
	transform: translateY(-2px);
}

.wp-block-query-pagination .page-numbers.current {
	background: linear-gradient(120deg, #1d3fd8, #4fa3f7);
	color: #fff;
	box-shadow: none;
}

@media (max-width: 960px) {
	body.blog .wp-block-post-template,
	body.archive .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	body.blog .wp-block-post-template,
	body.archive .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}

	body.page-template-default .wp-block-post-content,
	body.single-post .wp-block-post-content {
		border-radius: 22px;
	}
}

/* แก้: ชื่อหน้ากับเนื้อหาอยู่ในกลุ่มเดียวกัน จึงให้พื้นไล่สีอยู่แค่ช่วงบน แล้วเนื้อหาวางต่อลงมา (ไม่ทับชื่อหน้า) */
body.page-template-default main > .wp-block-group:first-child {
	background-repeat: no-repeat !important;
	background-size: 100% clamp(300px, 30vw, 380px) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding-bottom: 0 !important;
}

body.page-template-default main > .wp-block-group:first-child::before {
	height: clamp(300px, 30vw, 380px);
	bottom: auto;
}

body.page-template-default .wp-block-post-content {
	margin-top: clamp(36px, 5vw, 64px) !important;
}

/* แก้: หน้ารวมข่าวใช้ความกว้างเต็ม 1280px */
body.blog main > *,
body.archive main > *,
body.blog main .wp-block-query,
body.archive main .wp-block-query {
	max-width: var(--hk-wrap) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* แก้: ข่าวแต่ละข่าว แผ่นเนื้อหาไม่ทับวันที่/ผู้โพสต์ */
body.single-post .wp-block-post-content {
	margin-top: clamp(28px, 4vw, 48px) !important;
}

/* ===================================================================
 * 15. หน้า "ข่าวและภาพกิจกรรม" (/ภาพกิจกรรม/)
 *     กริดรูปจากข่าว: ข่าวล่าสุดใหญ่ 2×2 ที่เหลือเป็นการ์ดรูป ชื่อข่าววางบนรูป
 * ================================================================ */
.hk-filters {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 8px 0 0 !important;
}

.hk-filter {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.75);
	box-shadow: inset 0 0 0 1px rgba(29, 63, 216, 0.15);
	color: var(--hk-ink) !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.92rem;
	text-decoration: none !important;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.45s var(--hk-ease-smooth);
}

.hk-filter:hover {
	background: #fff;
	color: var(--hk-blue) !important;
	transform: translateY(-2px);
}

.hk-filter.is-active {
	background: linear-gradient(120deg, #1d3fd8, #4fa3f7);
	color: #fff !important;
	box-shadow: 0 10px 24px -12px rgba(29, 63, 216, 0.7);
}

.hk-activity-query {
	max-width: var(--hk-wrap) !important;
	margin: 0 auto !important;
}

.hk-act-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 230px;
	gap: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.hk-act-grid > li {
	margin: 0 !important;
	min-width: 0;
}

/* ข่าวล่าสุดใหญ่ 2×2 */
.hk-act-grid > li:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.hk-act-card {
	position: relative;
	height: 100%;
	margin: 0 !important;
	border-radius: 22px;
	overflow: hidden;
	background: #dfe9fb;
	border: 1px solid #fff;
	box-shadow: 0 1px 0 rgba(29, 63, 216, 0.06), 0 18px 40px -24px rgba(29, 63, 216, 0.45);
	transition: transform 0.6s var(--hk-ease-smooth), box-shadow 0.6s var(--hk-ease-smooth);
}

.hk-act-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 1px 0 rgba(29, 63, 216, 0.06), 0 30px 60px -26px rgba(29, 63, 216, 0.55);
}

.hk-act-card .wp-block-post-featured-image {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	height: 100% !important;
}

.hk-act-card .wp-block-post-featured-image a,
.hk-act-card .wp-block-post-featured-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.hk-act-card .wp-block-post-featured-image img {
	transition: transform 1.1s var(--hk-ease-smooth);
}

.hk-act-card:hover .wp-block-post-featured-image img {
	transform: scale(1.07);
}

/* ชื่อข่าว + วันที่ วางบนรูป มีไล่สีน้ำเงินด้านล่างให้อ่านชัด */
.hk-act-meta {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	padding: 48px 18px 16px !important;
	background: linear-gradient(to top, rgba(8, 22, 70, 0.92) 0%, rgba(8, 22, 70, 0.6) 55%, rgba(8, 22, 70, 0) 100%);
	pointer-events: none;
}

.hk-act-meta .wp-block-post-date {
	display: inline-block;
	margin: 0 0 6px !important;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	color: #e6efff !important;
	font-size: 0.78rem !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.hk-act-meta .wp-block-post-title {
	margin: 0 !important;
	color: #fff !important;
	font-size: 1rem !important;
	line-height: 1.45 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hk-act-grid > li:first-child .hk-act-meta {
	padding: 80px 26px 24px !important;
}

.hk-act-grid > li:first-child .wp-block-post-title {
	font-size: 1.45rem !important;
	-webkit-line-clamp: 3;
}

.hk-act-meta .wp-block-post-title a {
	color: #fff !important;
	text-decoration: none;
	pointer-events: auto;
}

/* ทั้งการ์ดกดได้ */
.hk-act-meta .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: -400px -40px -40px;
}

.hk-activity-query .wp-block-query-pagination {
	margin-top: 44px !important;
}

@media (max-width: 1024px) {
	.hk-act-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: 210px;
	}
}

@media (max-width: 760px) {
	.hk-act-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 180px;
		gap: 12px !important;
	}

	.hk-act-grid > li:first-child .wp-block-post-title {
		font-size: 1.1rem !important;
	}

	.hk-act-meta {
		padding: 36px 12px 12px !important;
	}

	.hk-act-meta .wp-block-post-title {
		font-size: 0.88rem !important;
	}
}

/* ===================================================================
 * 16. ความเร็ว: ลดงานวาดหน้าจอ (ยังคงลูกเล่น แต่เบาเครื่อง)
 *   - ไม่มีแอนิเมชันไล่สีแบบเลื่อน background (ต้องวาดใหม่ทุกเฟรม)
 *   - พื้นหลังเคลื่อนไหวเหลือชั้นเดียว ขนาดเท่าจอ ขยับด้วย transform
 *   - ไม่มีเอฟเฟกต์เบลอกระจก (ต้องคำนวณใหม่ทุกเฟรมเมื่อพื้นหลังขยับ)
 * ================================================================ */
body::before {
	inset: -8vmax !important;
	background:
		radial-gradient(30vmax 26vmax at 18% 20%, rgba(108, 184, 255, 0.5), transparent 70%),
		radial-gradient(28vmax 24vmax at 82% 75%, rgba(79, 140, 247, 0.32), transparent 70%),
		linear-gradient(135deg, #e6f1ff 0%, #d7e8ff 40%, #eef6ff 70%, #d3e5ff 100%) !important;
	animation: hk-bg-drift-lite 30s ease-in-out infinite alternate !important;
}

body::after {
	display: none !important;
	animation: none !important;
}

@keyframes hk-bg-drift-lite {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(3vmax, -2vmax, 0); }
}

.hk-btn-glass .wp-block-button__link,
.hk-btn-gold .wp-block-button__link,
.hk-page-hero .hk-btn-gold .wp-block-button__link,
.hk-cta-inner,
.hk-program.is-featured,
.hk-program-card.is-featured,
.hk-footer::before,
.hk-video,
.hk-topbar,
.hk-hero-title em {
	animation: none !important;
	background-size: 100% 100% !important;
}

.hk-page-hero::before {
	animation: none !important;
}

*,
*::before,
*::after {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* header ทึบขึ้นแทนการเบลอ */
.hk-header,
.home .hk-header,
body.hk-scrolled .hk-header,
body.hk-scrolled.home .hk-header {
	background: rgba(255, 255, 255, 0.96) !important;
}

.hk-hero-kicker,
.hk-hero .hk-btn-ghost .wp-block-button__link {
	background: rgba(8, 24, 80, 0.35) !important;
}

/* ===================================================================
 * 17. แก้ dropdown ซ้อน/กดไม่ได้ในหน้าที่ใช้ template เดิมของธีม
 *     header ของหน้าเหล่านั้นไม่มี class hk-site-header จึงไม่ได้ลอยชั้นบน
 *     ทำให้เมนูย่อยไปอยู่ใต้แถบหัวเรื่อง/แผ่นเนื้อหา → ให้ header ทุกแบบลอยชั้นบนสุด
 * ================================================================ */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:has(> .hk-header) {
	position: sticky;
	top: var(--hk-adminbar);
	z-index: 1000 !important;
	margin: 0 !important;
}

.hk-site-header {
	z-index: 1000 !important;
}

.hk-nav .wp-block-navigation__submenu-container {
	z-index: 1001 !important;
}

/* เนื้อหาหน้าย่อยไม่สร้างชั้นที่สูงกว่า header */
body.page-template-default .wp-block-post-content,
body.single-post .wp-block-post-content,
.hk-page-hero {
	z-index: auto !important;
}

/* ===================================================================
 * 18. ปุ่มย้อนกลับ + อัลบั้มรูปในหน้าข่าว + หน้าต่างดูรูป
 * ================================================================ */
.hk-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	width: max-content;
	margin: 0 0 18px !important;
	padding: 8px 16px 8px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: inset 0 0 0 1px rgba(29, 63, 216, 0.15), 0 6px 16px -10px rgba(29, 63, 216, 0.5);
	color: var(--hk-blue) !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.92rem;
	text-decoration: none !important;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.45s var(--hk-ease-smooth);
}

.hk-back svg {
	width: 18px;
	height: 18px;
	transition: transform 0.45s var(--hk-ease-smooth);
}

.hk-back:hover {
	background: var(--hk-blue);
	color: #fff !important;
}

.hk-back:hover svg {
	transform: translateX(-3px);
}

/* หน้าที่หัวเรื่องจัดกลาง: ปุ่มวางมุมซ้ายบนของแถบหัวเรื่อง ตรงแนวขอบเนื้อหา */
body.page-template-default main > .wp-block-group:first-child > .hk-back,
body.single-post main .wp-block-group:has(> .wp-block-post-title) > .hk-back {
	position: absolute;
	top: clamp(16px, 2.4vw, 28px);
	left: max(var(--hk-gutter), calc(50% - 540px));
	margin: 0 !important;
	z-index: 2;
}

.hk-page-hero-grid.is-text-only .hk-back {
	align-self: center;
}

/* มือถือ: ที่แคบ ให้ปุ่มย้อนกลับอยู่บรรทัดของตัวเอง ไม่ทับหัวข้อข่าว */
@media (max-width: 760px) {
	body.page-template-default main > .wp-block-group:first-child > .hk-back,
	body.single-post main .wp-block-group:has(> .wp-block-post-title) > .hk-back {
		position: static;
		align-self: flex-start;
		margin: 0 0 14px !important;
	}
}

/* --- อัลบั้มรูปในหน้าข่าว --- */
.hk-post-gallery {
	max-width: 1080px;
	margin: 0 auto clamp(48px, 6vw, 80px) !important;
	padding: clamp(22px, 3vw, 36px) !important;
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #fff;
	box-shadow: 0 1px 0 rgba(29, 63, 216, 0.06), 0 30px 60px -32px rgba(29, 63, 216, 0.45);
}

/* เนื้อหาข่าวที่เหลือแต่ข้อความ: อ่านง่าย ไม่กว้างเกิน */
body.single-post .wp-block-post-content {
	margin-bottom: 24px !important;
}

body.single-post .wp-block-post-content > p {
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.hk-pg-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.hk-pg-head h2 {
	margin: 0 !important;
	font-size: 1.35rem;
	display: flex;
	align-items: center;
	gap: 10px;
}

.hk-pg-head h2::before {
	content: "";
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--hk-sky-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E") no-repeat center / 20px;
}

.hk-pg-count {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--hk-sky-soft);
	color: var(--hk-blue);
	font-size: 0.88rem;
}

.hk-pg-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 150px;
	gap: 10px;
}

.hk-pg-grid > .hk-pg-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.hk-pg-grid.is-single {
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
}

.hk-pg-grid.is-single > .hk-pg-item:first-child {
	grid-column: auto;
	grid-row: auto;
	aspect-ratio: 16 / 9;
}

.hk-pg-item {
	position: relative;
	padding: 0;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	cursor: zoom-in;
	background: var(--hk-sky-soft);
}

.hk-pg-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
	display: block;
	transition: transform 0.9s var(--hk-ease-smooth);
}

.hk-pg-item:hover img {
	transform: scale(1.07);
}

.hk-pg-item:focus-visible {
	outline: 3px solid var(--hk-sky);
	outline-offset: 2px;
}

.hk-pg-more-count {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8, 22, 70, 0.62);
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 1.8rem;
	font-weight: 500;
}

.hk-pg-all {
	display: block;
	margin: 18px auto 0;
	padding: 12px 26px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(120deg, #1d3fd8, #4fa3f7);
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.98rem;
	cursor: pointer;
	box-shadow: 0 12px 26px -14px rgba(29, 63, 216, 0.8);
	transition: transform 0.45s var(--hk-ease-smooth);
}

.hk-pg-all:hover {
	transform: translateY(-2px);
}

@media (max-width: 760px) {
	.hk-pg-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 120px;
	}
}

/* --- หน้าต่างดูรูป --- */
html.hk-lb-open {
	overflow: hidden;
}

.hk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: rgba(6, 14, 40, 0.94);
	animation: hk-fade-in 0.25s ease;
}

.hk-lightbox.is-closing {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.hk-lb-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 18px;
	color: #dbe6ff;
	font-size: 0.95rem;
}

.hk-lb-close {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
}

.hk-lb-close:hover {
	background: rgba(255, 255, 255, 0.25);
}

.hk-lb-stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 0 70px;
}

.hk-lb-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 12px;
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 0.3s ease, transform 0.35s var(--hk-ease-smooth);
}

.hk-lb-img.is-in {
	opacity: 1;
	transform: none;
}

.hk-lb-nav {
	position: absolute;
	top: 50%;
	width: 52px;
	height: 52px;
	margin-top: -26px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.hk-lb-nav:hover {
	background: rgba(255, 255, 255, 0.3);
}

.hk-lb-nav.is-prev {
	left: 12px;
}

.hk-lb-nav.is-next {
	right: 12px;
}

.hk-lb-strip {
	display: flex;
	gap: 8px;
	padding: 14px 18px 18px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.hk-lb-thumb {
	flex: 0 0 auto;
	width: 74px;
	height: 54px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.25s ease, border-color 0.25s ease;
}

.hk-lb-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hk-lb-thumb.is-active,
.hk-lb-thumb:hover {
	opacity: 1;
	border-color: #6cb8ff;
}

@media (max-width: 600px) {
	.hk-lb-stage {
		padding: 0 8px;
	}

	.hk-lb-nav {
		width: 40px;
		height: 40px;
		margin-top: -20px;
		font-size: 1.5rem;
		background: rgba(0, 0, 0, 0.35);
	}
}

.hk-post-gallery {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--hk-gutter));
}

body.single-post .wp-block-post-content {
	box-sizing: border-box;
}

/* หน้าแรก: ภาพกิจกรรมล่าสุด 5 ข่าว (ใหญ่ 1 + เล็ก 4) */
.hk-home-activity .hk-act-grid {
	grid-auto-rows: 210px;
}

@media (max-width: 760px) {
	.hk-home-activity .hk-act-grid > li:nth-child(n+4) {
		display: none;
	}
}

/* ===================================================================
 * 19. "ประกาศสำคัญ" — สไลด์ใหญ่ทีละประกาศ (รูปใหญ่ + เนื้อหา) เลื่อน/ปัดดูได้
 *     ตอนนี้เป็นสไลด์ตัวอย่าง
 * ================================================================ */
.hk-ann-section {
	position: relative;
	overflow: hidden;
}

.hk-ann-head {
	max-width: var(--hk-wrap);
	margin: 0 auto 28px !important;
	gap: 16px;
}

.hk-ann-head .hk-head {
	margin: 0 !important;
	gap: 6px;
}

.hk-ann-head .hk-title {
	margin: 0 !important;
}

.hk-ann-all {
	margin: 0 0 6px !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.95rem;
	white-space: nowrap;
}

.hk-ann-all a {
	color: var(--hk-blue);
	text-decoration: none;
	padding-bottom: 2px;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px;
	transition: background-size 0.4s var(--hk-ease-smooth);
}

.hk-ann-all a:hover {
	background-size: 100% 1.5px;
}

/* กรอบสไลด์ */
.hk-ann {
	position: relative;
	max-width: var(--hk-wrap);
	margin: 0 auto !important;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(29, 63, 216, 0.08), 0 40px 70px -40px rgba(11, 27, 77, 0.45);
	overflow: hidden;
}

.hk-ann-track {
	display: flex !important;
	gap: 0 !important;
	overflow-x: auto;
	overflow-y: hidden; /* ล็อกไม่ให้เลื่อนขึ้นลงในกรอบสไลด์ */
	touch-action: pan-x pan-y;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hk-ann-track::-webkit-scrollbar {
	display: none;
}

.hk-ann-track.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.hk-ann-track > * {
	margin: 0 !important;
}

.hk-ann-slide {
	position: relative;
	overflow: hidden;
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: grid !important;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	height: clamp(380px, 34vw, 460px);
}

.hk-ann-img {
	position: relative;
	margin: 0 !important;
	overflow: hidden;
	background: var(--hk-sky-soft);
}

.hk-ann-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 1.4s var(--hk-ease-smooth);
}

.hk-ann-slide.is-active .hk-ann-img img {
	transform: scale(1);
}

/* ยังไม่มีรูป: พื้นไล่สีฟ้า + ไอคอนประกาศ */
.hk-ann-img.is-empty {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-opacity='.4' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") no-repeat center / 72px,
		radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.95), transparent 45%),
		radial-gradient(circle at 15% 85%, rgba(108, 184, 255, 0.35), transparent 50%),
		linear-gradient(135deg, #d6e7ff, #eef5ff 55%, #c9dcff);
}

.hk-ann-img.is-empty::after {
	content: "พื้นที่รูปประกาศ";
	position: absolute;
	left: 50%;
	top: calc(50% + 56px);
	transform: translateX(-50%);
	color: rgba(29, 63, 216, 0.55);
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* ฝั่งเนื้อหา */
.hk-ann-body {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: clamp(24px, 3vw, 40px) clamp(26px, 4vw, 56px) 88px !important;
	min-width: 0;
}

.hk-ann-body > * {
	margin: 0 !important;
}

.hk-ann-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	font-size: 0.88rem;
}

.hk-ann-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--hk-sky-soft);
	color: var(--hk-blue);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
}

.hk-ann-date {
	color: #6b7799;
}

.hk-ann-name {
	font-size: clamp(1.35rem, 2.1vw, 1.85rem) !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hk-ann-name a {
	color: var(--hk-navy);
	text-decoration: none;
	transition: color 0.25s ease;
}

.hk-ann-name a:hover {
	color: var(--hk-blue);
}

.hk-ann-excerpt {
	color: #3a4766;
	line-height: 1.75;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hk-ann-more a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--hk-blue);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
	text-decoration: none;
}

.hk-ann-more a::after {
	content: "→";
	transition: transform 0.35s var(--hk-ease-smooth);
}

.hk-ann-more a:hover::after {
	transform: translateX(5px);
}

/* เนื้อหาค่อยๆ ขึ้นมาเมื่อสไลด์นั้นแสดง */
.hk-ann.is-ready .hk-ann-slide .hk-ann-body > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.8s var(--hk-ease-smooth);
}

.hk-ann.is-ready .hk-ann-slide.is-active .hk-ann-body > * {
	opacity: 1;
	transform: none;
}

.hk-ann-slide.is-active .hk-ann-body > :nth-child(2) { transition-delay: 0.08s; }
.hk-ann-slide.is-active .hk-ann-body > :nth-child(3) { transition-delay: 0.16s; }
.hk-ann-slide.is-active .hk-ann-body > :nth-child(4) { transition-delay: 0.24s; }

/* ปุ่มควบคุม (สร้างด้วย JS) อยู่มุมล่างฝั่งเนื้อหา */
.hk-ann-nav {
	position: absolute;
	right: clamp(26px, 4vw, 56px);
	bottom: 26px;
	left: calc(55.5% + clamp(26px, 4vw, 56px));
	display: flex;
	align-items: center;
	gap: 14px;
	z-index: 2;
}

.hk-ann-count {
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.9rem;
	color: #6b7799;
	font-variant-numeric: tabular-nums;
	min-width: 52px;
}

.hk-ann-count strong {
	color: var(--hk-navy);
	font-weight: 500;
}

.hk-ann-dots {
	flex: 1;
	display: flex;
	gap: 6px;
}

.hk-ann-dot {
	position: relative;
	flex: 1;
	max-width: 46px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #dfe7fb;
	cursor: pointer;
}

.hk-ann-dot::before {
	content: "";
	position: absolute;
	inset: -10px 0;
}

.hk-ann-dot span {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--hk-blue);
	transform: scaleX(0);
	transform-origin: left;
}

.hk-ann-dot.is-done span {
	transform: scaleX(1);
	background: #9cbcf5;
}

.hk-ann-dot.is-active span {
	background: var(--hk-blue);
	animation: hk-ann-progress var(--hk-ann-time, 7s) linear forwards;
}

.hk-ann.is-paused .hk-ann-dot.is-active span {
	animation-play-state: paused;
}

.hk-ann.is-static .hk-ann-dot.is-active span {
	animation: none;
	transform: scaleX(1);
}

@keyframes hk-ann-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.hk-ann-btns {
	display: flex;
	gap: 8px;
}

.hk-ann-btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid #dbe4fa;
	border-radius: 50%;
	background: #fff;
	color: var(--hk-blue);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.4s var(--hk-ease-smooth);
}

.hk-ann-btn svg {
	width: 18px;
	height: 18px;
}

.hk-ann-btn:hover {
	background: var(--hk-blue);
	border-color: var(--hk-blue);
	color: #fff;
}

.hk-ann-btn:active {
	transform: scale(0.94);
}

@media (max-width: 1024px) {
	.hk-ann-slide {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		height: 400px;
	}

	.hk-ann-nav {
		left: calc(52.4% + 26px);
	}
}

/* มือถือ/แท็บเล็ตแนวตั้ง: รูปอยู่บน เนื้อหาอยู่ล่าง */
@media (max-width: 760px) {
	.hk-ann-head {
		margin-bottom: 20px !important;
		align-items: flex-end;
	}

	.hk-ann {
		border-radius: 22px;
	}

	.hk-ann-slide {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		height: auto;
	}

	.hk-ann-img {
		aspect-ratio: 16 / 10;
	}

	.hk-ann-img.is-empty {
		background-size: 54px, auto, auto, auto;
	}

	.hk-ann-img.is-empty::after {
		top: calc(50% + 42px);
	}

	.hk-ann-body {
		justify-content: flex-start;
		gap: 10px;
		padding: 20px 20px 84px !important;
	}

	.hk-ann-name {
		font-size: 1.2rem !important;
		-webkit-line-clamp: 2;
	}

	.hk-ann-excerpt {
		font-size: 0.95rem;
		-webkit-line-clamp: 2;
	}

	.hk-ann-nav {
		left: 20px;
		right: 20px;
		bottom: 20px;
		gap: 10px;
	}

	.hk-ann-btn {
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hk-ann-img img,
	.hk-ann.is-ready .hk-ann-slide .hk-ann-body > * {
		transition: none;
	}
}

/* สไลด์ประกาศที่ดึงจากข่าวจริง (shortcode) — จัดหัวข้อเองแทน layout ของ block */
.hk-ann-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
}

.hk-ann-head .hk-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

a.hk-ann-img {
	display: block;
}

.hk-ann-img img {
	display: block;
}

/* 19b. ป้าย "New" ของปลั๊กอิน Mark New Posts (ข่าวที่ผู้ชมยังไม่ได้อ่าน) ให้เข้ากับเว็บ */
.mnp-unread {
	display: inline !important;
	background: none !important;
	white-space: normal;
}

.mnp-text {
	display: inline-flex !important;
	align-items: center;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	background: #e8f0ff;
	color: var(--hk-blue) !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.7rem !important;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.03em;
	vertical-align: middle !important;
	text-transform: uppercase;
}

/* หัวข้อข่าวในหน้าข่าวเอง ไม่ต้องมีป้าย */
body.single-post h1 .mnp-text {
	display: none !important;
}

/* เนื้อหาข่าวสั้นๆ (บรรทัดเดียว) ไม่ต้องเป็นกล่องสูงโล่ง */
body.single-post main .wp-block-post-content:not(:has(> :nth-child(2))) {
	min-height: 0 !important;
}

/* 19c. รูปผู้บริหาร: กรอบสัดส่วนเดียวกันทุกคน (รูปต้นฉบับขนาดไม่เท่ากัน) */
.team-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 18%;
}

/* 20. ไอคอนกุญแจท้ายเว็บ (เข้าหน้าควบคุมข่าว) — เล็ก ไม่เด่น */
.hk-panel-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-left: 12px;
	border-radius: 50%;
	vertical-align: middle;
	color: currentColor;
	opacity: 0.35;
	transition: opacity 0.2s, background-color 0.2s;
}

.hk-panel-key:hover,
.hk-panel-key:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.12);
}

/* ===================================================================
 * 21. หน้าอ่านข่าว (ฉบับปรับปรุง): หัวข่าวเป็นการ์ดขาวซ้อนบนรูปปก,
 *     เนื้อหาตัวเข้ม ชิดซ้าย อ่านสบายตา, ข่าวอื่นๆ ท้ายข่าว
 * ================================================================ */
body.single-post main > .wp-block-post-featured-image {
	margin-bottom: 0 !important;
	z-index: 1;
}

/* การ์ดบทความ */
body.single-post main > .wp-block-group:has(> .wp-block-post-title) {
	position: relative;
	z-index: 4;
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	max-width: 960px !important;
	margin: -76px auto clamp(48px, 6vw, 80px) !important;
	padding: clamp(28px, 4vw, 52px) clamp(22px, 5vw, 68px) clamp(32px, 4vw, 56px) !important;
	border-radius: 32px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(29, 63, 216, 0.06), 0 40px 80px -44px rgba(11, 27, 77, 0.45);
	text-align: left;
}

/* ข่าวที่ไม่มีรูปปก */
body.single-post main:not(:has(> .wp-block-post-featured-image)) > .wp-block-group:has(> .wp-block-post-title) {
	margin-top: clamp(28px, 4vw, 48px) !important;
}

body.single-post main > .wp-block-group:has(> .wp-block-post-title) > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ปุ่มย้อนกลับ: อยู่บนสุดของการ์ด */
body.single-post main .wp-block-group:has(> .wp-block-post-title) > .hk-back {
	position: static !important;
	order: -2;
	align-self: flex-start;
	margin: 0 0 20px !important;
}

/* หมวดหมู่: เป็นป้ายเหนือหัวข้อ */
body.single-post .superb-single-post-tags-categories {
	order: -1;
	margin: 0 0 14px !important;
	padding: 0 !important;
}

body.single-post .superb-single-post-tags-categories .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 !important;
	font-size: 0.85rem !important;
}

body.single-post .superb-single-post-tags-categories .wp-block-post-terms a {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border: 0 !important;
	border-radius: 999px;
	background: var(--hk-sky-soft);
	color: var(--hk-blue) !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

body.single-post .superb-single-post-tags-categories .wp-block-post-terms a:hover {
	background: var(--hk-blue);
	color: #fff !important;
}

body.single-post .superb-single-post-tags-categories .wp-block-post-terms__separator,
body.single-post .superb-single-post-tags-categories .wp-block-post-terms__suffix {
	display: none;
}

/* หัวข้อข่าว */
body.single-post main .wp-block-group > .wp-block-post-title {
	order: 0;
	margin: 0 !important;
	max-width: none;
	color: var(--hk-navy) !important;
	font-size: clamp(1.6rem, 3.2vw, 2.45rem) !important;
	font-weight: 600 !important;
	line-height: 1.38 !important;
	letter-spacing: -0.005em;
	text-align: left !important;
}

/* แถววันที่ + ข้อมูลข่าว */
body.single-post main .wp-block-group:has(> .wp-block-post-title) > .is-nowrap {
	order: 1;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	margin-top: 18px !important;
	padding-bottom: 24px;
	border-bottom: 1px solid #e6ecfa;
}

body.single-post main .wp-block-group:has(> .wp-block-post-title) > .is-nowrap > p,
body.single-post .wp-block-post-author-name {
	display: none !important;
}

body.single-post .wp-block-post-date,
.hk-meta-chip {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 5px 14px !important;
	border-radius: 999px;
	background: #f3f6fd !important;
	color: #4a5679 !important;
	font-size: 0.88rem !important;
	line-height: 1.4;
}

body.single-post .wp-block-post-date::before {
	content: "";
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") no-repeat center / contain;
}

body.single-post .wp-block-post-date time {
	color: inherit;
}

.hk-meta-chip svg {
	width: 15px;
	height: 15px;
	color: var(--hk-blue);
}

/* เนื้อหาข่าว: ตัวเข้ม ใหญ่ขึ้น ชิดซ้าย ระยะบรรทัดอ่านสบาย */
body.single-post main .wp-block-group:has(> .wp-block-post-title) > .wp-block-post-content {
	order: 2;
	margin: 28px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: #1f2a44 !important;
	font-size: clamp(1.05rem, 1.2vw, 1.14rem) !important;
	line-height: 1.95 !important;
}

body.single-post .wp-block-post-content p,
body.single-post .wp-block-post-content li,
body.single-post .wp-block-post-content div[dir] {
	text-align: left;
	color: #1f2a44;
}

body.single-post .wp-block-post-content > p,
body.single-post .wp-block-post-content > div {
	margin: 0 0 1.05em !important;
}

/* ย่อหน้าแรก = บทนำ ตัวใหญ่กว่าเล็กน้อย */
body.single-post .wp-block-post-content > p:first-child {
	font-size: 1.12em;
	color: var(--hk-navy);
	font-weight: 500;
	line-height: 1.85;
}

body.single-post .wp-block-post-content > p:last-child {
	margin-bottom: 0 !important;
}

body.single-post .wp-block-post-content strong,
body.single-post .wp-block-post-content b {
	color: var(--hk-navy);
	font-weight: 600;
}

body.single-post .wp-block-post-content h2,
body.single-post .wp-block-post-content h3 {
	margin: 1.6em 0 0.6em !important;
	padding-left: 14px;
	border-left: 4px solid var(--hk-blue);
	font-size: 1.3em;
	line-height: 1.45;
}

body.single-post .wp-block-post-content ul,
body.single-post .wp-block-post-content ol {
	padding-left: 1.4em;
}

body.single-post .wp-block-post-content li::marker {
	color: var(--hk-blue);
}

body.single-post .wp-block-post-content blockquote {
	margin: 1.4em 0 !important;
	padding: 16px 22px !important;
	border-left: 4px solid var(--hk-accent);
	border-radius: 0 16px 16px 0;
	background: var(--hk-sky-soft);
	font-style: normal;
}

/* อัลบั้มรูป: อยู่ในการ์ดเดียวกัน ไม่ต้องมีกรอบซ้อน */
body.single-post main .wp-block-group:has(> .wp-block-post-title) > .hk-post-gallery {
	order: 3;
	margin: 36px 0 0 !important;
	padding: 28px 0 0 !important;
	border: 0 !important;
	border-top: 1px solid #e6ecfa !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* ช่อง "+N รูป": โทนฟ้าแทนเงาดำ */
.hk-pg-more-count {
	background: linear-gradient(135deg, rgba(29, 63, 216, 0.78), rgba(79, 163, 247, 0.7)) !important;
	text-shadow: 0 2px 10px rgba(11, 27, 77, 0.35);
}

/* หน้าต่างดูรูป: น้ำเงินเข้มของโรงเรียนแทนดำ */
.hk-lightbox {
	background:
		radial-gradient(80vmax 60vmax at 20% 0%, rgba(79, 163, 247, 0.28), transparent 60%),
		linear-gradient(160deg, rgba(16, 40, 120, 0.97), rgba(10, 26, 82, 0.98)) !important;
}

/* ข่าวอื่นๆ */
.hk-related {
	order: 4;
	margin: 40px 0 0 !important;
	padding-top: 30px;
	border-top: 1px solid #e6ecfa;
}

.hk-related-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.hk-related-head h2 {
	margin: 0 !important;
	font-size: 1.25rem !important;
	font-weight: 500;
	color: var(--hk-navy) !important;
}

.hk-related-head a {
	color: var(--hk-blue);
	font-size: 0.92rem;
	text-decoration: none;
	white-space: nowrap;
}

.hk-related-head a:hover {
	text-decoration: underline;
}

.hk-related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.hk-related-card {
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	overflow: hidden;
	background: #f7f9fe;
	color: inherit;
	text-decoration: none;
	transition: transform 0.45s var(--hk-ease-smooth), box-shadow 0.45s var(--hk-ease-smooth), background-color 0.3s;
}

.hk-related-card:hover {
	transform: translateY(-4px);
	background: #fff;
	box-shadow: 0 0 0 1px #e1e9fb, 0 20px 36px -24px rgba(29, 63, 216, 0.55);
}

.hk-related-img {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--hk-sky-soft);
}

.hk-related-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--hk-ease-smooth);
}

.hk-related-card:hover .hk-related-img img {
	transform: scale(1.06);
}

.hk-related-img.is-empty {
	background: linear-gradient(135deg, #dce9ff, #eef4ff);
}

.hk-related-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px 16px;
}

.hk-related-body small {
	color: var(--hk-blue);
	font-size: 0.8rem;
}

.hk-related-body b {
	color: var(--hk-navy);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 760px) {
	body.single-post main > .wp-block-group:has(> .wp-block-post-title) {
		margin: -36px 12px 48px !important;
		padding: 22px 20px 28px !important;
		border-radius: 24px;
	}

	body.single-post main .wp-block-group > .wp-block-post-title {
		font-size: 1.5rem !important;
	}

	body.single-post main .wp-block-group:has(> .wp-block-post-title) > .wp-block-post-content {
		font-size: 1.05rem !important;
		line-height: 1.9 !important;
	}

	.hk-related-grid {
		grid-template-columns: 1fr;
	}

	.hk-related-card {
		flex-direction: row;
	}

	.hk-related-img {
		flex: 0 0 120px;
		aspect-ratio: 4 / 3;
	}

	.hk-related-body {
		justify-content: center;
		padding: 10px 14px;
	}
}

/* การ์ดบทความ: ไม่เอาลายจุดพื้นหลังเข้ามาในการ์ด, อัลบั้มกว้างเต็มการ์ด */
body.single-post main > .wp-block-group:has(> .wp-block-post-title)::before,
body.single-post main > .wp-block-group:has(> .wp-block-post-title)::after {
	content: none !important;
	display: none !important;
}

body.single-post main .wp-block-group:has(> .wp-block-post-title) > .hk-post-gallery,
body.single-post main .wp-block-group:has(> .wp-block-post-title) > .hk-related {
	width: 100% !important;
	max-width: none !important;
	align-self: stretch;
}

body.single-post main > .wp-block-group:has(> .wp-block-post-title) {
	width: auto !important;
}

@media (max-width: 760px) {
	body.single-post main > .wp-block-group:has(> .wp-block-post-title) {
		margin: -36px 0 48px !important;
	}
}

/* ===================================================================
 * 21b. รูปปก + การ์ดบทความ = ชิ้นเดียวกัน (ไม่ซ้อนทับกัน รูปแสดงครบทั้งใบ)
 * ================================================================ */
body.single-post main > .wp-block-post-featured-image {
	width: auto !important;
	max-width: 960px !important;
	margin: clamp(24px, 3vw, 40px) auto 0 !important;
	border-radius: 32px 32px 0 0 !important;
	overflow: hidden;
	background:
		radial-gradient(70% 90% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
		linear-gradient(160deg, #dbe8ff, #eef4ff) !important;
	box-shadow: none !important;
}

body.single-post main > .wp-block-post-featured-image img {
	display: block;
	width: auto !important;
	max-width: 100%;
	max-height: min(78vh, 760px);
	margin: 0 auto;
	border-radius: 0 !important;
	object-fit: contain;
}

/* การ์ดต่อใต้รูปพอดี */
body.single-post main > .wp-block-post-featured-image + .wp-block-group:has(> .wp-block-post-title) {
	margin-top: 0 !important;
	border-radius: 0 0 32px 32px;
}

/* เงาของทั้งชิ้น: ใส่ที่รูปและการ์ดให้ต่อกันเนียน */
body.single-post main > .wp-block-post-featured-image {
	box-shadow: 0 -1px 0 rgba(29, 63, 216, 0.04), 0 30px 60px -50px rgba(11, 27, 77, 0.45) !important;
}

@media (max-width: 760px) {
	body.single-post main > .wp-block-post-featured-image {
		margin: 16px 0 0 !important;
		border-radius: 24px 24px 0 0 !important;
	}

	body.single-post main > .wp-block-post-featured-image img {
		max-height: 70vh;
	}

	body.single-post main > .wp-block-post-featured-image + .wp-block-group:has(> .wp-block-post-title) {
		margin: 0 0 48px !important;
		border-radius: 0 0 24px 24px;
	}
}

/* รูปปกแนวนอน: เต็มความกว้างการ์ด / แนวตั้ง: จำกัดความสูง วางกลาง */
body.single-post main > .wp-block-post-featured-image img {
	width: 100% !important;
	max-height: none;
}

body.single-post main > .wp-block-post-featured-image.is-tall img {
	width: auto !important;
	max-height: min(80vh, 820px);
	padding: 18px 0;
	box-sizing: content-box;
}

/* ===================================================================
 * 22. หน้าแรกพื้นขาวทั้งหน้า (ทดลอง) — เปิด/ปิดที่ HKWKK_HOME_WHITE ใน hkwkk-custom.php
 * ================================================================ */
html:has(body.hk-home-white) {
	background: #fff;
}

body.hk-home-white {
	background: #fff !important;
}

/* ปิดพื้นหลังฟ้าไล่สีที่ขยับ */
body.hk-home-white::before,
body.hk-home-white::after {
	display: none !important;
}

/* ทุกส่วนพื้นขาว ไม่มีลายจุด/ลายทแยง/เส้นเงาคั่น */
body.hk-home-white .hk-home > .hk-section,
body.hk-home-white .hk-home > .hk-section.hk-bg-soft,
body.hk-home-white .hk-home > .hk-section.hk-bg-navy,
body.hk-home-white .hk-team-section,
body.hk-home-white .hk-cta {
	background: #fff !important;
}

body.hk-home-white .hk-section::before,
body.hk-home-white .hk-section::after,
body.hk-home-white .hk-team-section::before,
body.hk-home-white .hk-team-section::after {
	display: none !important;
}

/* การ์ดกระจกเดิม (โปร่งใส) → พื้นฟ้าอ่อนมาก + ขอบบาง ให้ยังเห็นเป็นชิ้นบนพื้นขาว */
body.hk-home-white .hk-pillar,
body.hk-home-white .hk-resource {
	background: #f6f9ff !important;
	border: 1px solid #e3ebfb !important;
	box-shadow: none !important;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.hk-home-white .hk-pillar:hover,
body.hk-home-white .hk-resource:hover {
	background: #fff !important;
	border-color: #c9dafb !important;
	box-shadow: 0 20px 40px -26px rgba(29, 63, 216, 0.45) !important;
}

/* การ์ดอื่นๆ: เส้นขอบบางแทนการพึ่งพื้นหลังสี */
body.hk-home-white .hk-level-card,
body.hk-home-white .hk-person,
body.hk-home-white .hk-ann,
body.hk-home-white .hk-act-card {
	box-shadow: 0 0 0 1px #e6edfb, 0 24px 48px -34px rgba(11, 27, 77, 0.35) !important;
}

body.hk-home-white .hk-collage img {
	box-shadow: 0 18px 36px -24px rgba(11, 27, 77, 0.4);
}


/* ให้ชนะกฎพื้นลายจุดเดิม (กฎเดิมใช้ :not หลายชั้น น้ำหนักสูง) */
body.hk-home-white main.hk-home > .hk-section:not(#hk-none),
body.hk-home-white main .hk-team-section:not(#hk-none) {
	background: #fff !important;
}

/* ===================================================================
 * 22b. พื้นขาว + กิมมิกจางๆ: ตารางจุดที่จางหายตรงกลางจอ (ดึงสายตาเข้าหาเนื้อหา)
 *      + แสงฟ้านุ่มที่มุมจอ — อยู่นิ่ง ไม่ขยับ ไม่กินเครื่อง
 * ================================================================ */
body.hk-home-white::before,
body.hk-home-white::after {
	display: block !important;
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	animation: none !important;
	transform: none !important;
	mix-blend-mode: normal;
	will-change: auto;
}

/* ตารางจุด: ชัดที่ขอบจอ จางหายตรงกลาง */
body.hk-home-white::before {
	background: radial-gradient(rgba(29, 63, 216, 0.22) 1.1px, transparent 1.6px) 0 0 / 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, transparent 30%, rgba(0, 0, 0, 0.55) 70%, #000 100%);
	mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, transparent 30%, rgba(0, 0, 0, 0.55) 70%, #000 100%);
	opacity: 0.55;
}

/* แสงฟ้านุ่มที่มุมบนซ้ายและล่างขวา */
body.hk-home-white::after {
	background:
		radial-gradient(38vmax 30vmax at 0% 0%, rgba(108, 184, 255, 0.16), transparent 70%),
		radial-gradient(40vmax 32vmax at 100% 100%, rgba(29, 63, 216, 0.08), transparent 70%);
}

/* ส่วนต่างๆ โปร่งใส ให้เห็นตารางจุดด้านหลัง (การ์ดยังเป็นสีขาวทึบ จึงเด่นขึ้นมา) */
body.hk-home-white main.hk-home > .hk-section:not(#hk-none),
body.hk-home-white main .hk-team-section:not(#hk-none) {
	background: transparent !important;
}

body.hk-home-white .hk-pillar,
body.hk-home-white .hk-resource {
	background: rgba(255, 255, 255, 0.92) !important;
}

@media (max-width: 760px) {
	body.hk-home-white::before {
		background-size: 22px 22px;
		-webkit-mask-image: linear-gradient(90deg, #000, transparent 22%, transparent 78%, #000);
		mask-image: linear-gradient(90deg, #000, transparent 22%, transparent 78%, #000);
	}
}

/* สีขาวอยู่ที่ <html> ส่วน body โปร่งใส เพื่อให้ตารางจุด (z-index -1) แสดงได้ */
body.hk-home-white {
	background: transparent !important;
}

/* ชนะกฎ body::before ส่วนประสิทธิภาพ (ที่ใช้ !important) */
html body.hk-home-white::before {
	inset: 0 !important;
	background: radial-gradient(rgba(29, 63, 216, 0.22) 1.1px, transparent 1.6px) 0 0 / 26px 26px !important;
}

html body.hk-home-white::after {
	inset: 0 !important;
	background:
		radial-gradient(38vmax 30vmax at 0% 0%, rgba(108, 184, 255, 0.16), transparent 70%),
		radial-gradient(40vmax 32vmax at 100% 100%, rgba(29, 63, 216, 0.08), transparent 70%) !important;
}

@media (max-width: 760px) {
	html body.hk-home-white::before {
		background-size: 22px 22px !important;
	}
}

/* ===================================================================
 * 23. หน้าเกี่ยวกับเรา ชุดใหม่: ประวัติ (ไทม์ไลน์), เยี่ยมชมโรงเรียน, ทำเนียบบุคลากร,
 *     วิสัยทัศน์, ติดต่อเรา, ปฏิทินโรงเรียน
 * ================================================================ */

/* ---------- ประวัติ: ส่วนแนะนำ ---------- */
.hk-hist-intro {
	display: grid !important;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	max-width: var(--hk-wrap);
	margin: 0 auto clamp(48px, 6vw, 88px) !important;
}

.hk-hist-intro-text > * {
	margin: 0 0 14px !important;
}

.hk-hist-intro-text p {
	color: #33405f;
	font-size: 1.05rem;
	line-height: 1.85;
}

.hk-hist-note {
	padding: 16px 20px;
	border-left: 4px solid var(--hk-accent);
	border-radius: 0 16px 16px 0;
	background: var(--hk-sky-soft);
}

.hk-hist-stats {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.hk-hist-stats p {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 !important;
	padding: 22px 20px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb, 0 20px 40px -32px rgba(11, 27, 77, 0.45);
}

.hk-hist-stats strong {
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-weight: 600;
	line-height: 1.1;
	background: linear-gradient(120deg, var(--hk-blue), #4fa3f7);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hk-hist-stats span {
	color: var(--hk-muted, #6b7799);
	font-size: 0.9rem;
}

/* ---------- ไทม์ไลน์ ---------- */
.hk-timeline {
	position: relative;
	max-width: 880px;
	margin: 0 auto !important;
	padding-left: 44px !important;
}

.hk-timeline::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(180deg, #4fa3f7, var(--hk-blue) 60%, rgba(29, 63, 216, 0.15));
}

.hk-tl-item {
	position: relative;
	margin: 0 0 22px !important;
	padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px) !important;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb, 0 24px 48px -36px rgba(11, 27, 77, 0.45);
}

.hk-tl-item::before {
	content: "";
	position: absolute;
	left: -38px;
	top: 30px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--hk-blue);
	box-shadow: 0 0 0 5px rgba(29, 63, 216, 0.12);
}

.hk-tl-item > * {
	margin: 0 0 10px !important;
}

.hk-tl-item > :last-child {
	margin-bottom: 0 !important;
}

.hk-tl-badge {
	margin-bottom: 8px !important;
}

.hk-tl-year {
	display: inline-flex;
	padding: 4px 14px;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--hk-blue), #4fa3f7);
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.hk-tl-item h3 {
	color: var(--hk-navy) !important;
	font-size: clamp(1.2rem, 2vw, 1.45rem) !important;
	font-weight: 500 !important;
}

.hk-tl-item p {
	color: #33405f;
	font-size: 1.02rem;
	line-height: 1.85;
}

.hk-tl-photo {
	margin-top: 16px !important;
}

.hk-tl-photo img {
	width: 100%;
	max-height: 440px;
	object-fit: cover;
	border-radius: 16px;
}

.hk-hist-cta {
	max-width: 880px;
	margin: clamp(40px, 5vw, 64px) auto 0 !important;
	padding: clamp(26px, 4vw, 40px) !important;
	border-radius: 28px;
	background: linear-gradient(135deg, #eef4ff, #f8fbff);
	box-shadow: inset 0 0 0 1px #e1e9fb;
	text-align: center;
}

.hk-hist-cta h3 {
	margin: 0 0 6px !important;
	color: var(--hk-navy) !important;
}

.hk-hist-cta p {
	margin: 0 0 18px !important;
	color: var(--hk-muted, #6b7799);
}

/* ---------- เยี่ยมชมโรงเรียน ---------- */
.hk-pillars.is-four {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.hk-programs {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	max-width: var(--hk-wrap);
	margin: clamp(28px, 4vw, 44px) auto 0 !important;
}

.hk-program {
	position: relative;
	padding: 28px 30px !important;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb, 0 24px 48px -36px rgba(11, 27, 77, 0.45);
	overflow: hidden;
}

.hk-program::after {
	content: "";
	position: absolute;
	right: -40px;
	top: -40px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(79, 163, 247, 0.18), transparent 70%);
}

.hk-program > * {
	margin: 0 0 8px !important;
}

.hk-program-tag {
	display: inline-flex;
	padding: 3px 12px;
	border-radius: 8px;
	background: var(--hk-blue);
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.hk-program.is-nsc .hk-program-tag {
	background: #0f8a5f;
}

.hk-program h3 {
	color: var(--hk-navy) !important;
	font-size: 1.3rem !important;
}

.hk-program p {
	color: #33405f;
}

.hk-program a {
	color: var(--hk-blue);
	text-decoration: none;
	font-weight: 500;
}

.hk-campus {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 180px;
	gap: 12px;
	max-width: var(--hk-wrap);
	margin: 0 auto !important;
}

.hk-campus > figure {
	margin: 0 !important;
	border-radius: 18px;
	overflow: hidden;
}

.hk-campus > figure:nth-child(1),
.hk-campus > figure:nth-child(6) {
	grid-column: span 2;
	grid-row: span 2;
}

.hk-campus img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--hk-ease-smooth);
}

.hk-campus > figure:hover img {
	transform: scale(1.05);
}

.hk-visit {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: stretch;
	max-width: var(--hk-wrap);
	margin: 0 auto !important;
	padding: clamp(24px, 4vw, 44px) !important;
	border-radius: 32px;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb, 0 40px 80px -50px rgba(11, 27, 77, 0.5);
}

.hk-visit-text > * {
	margin: 0 0 14px !important;
}

.hk-visit-text p {
	color: #33405f;
	line-height: 1.85;
}

.hk-visit-addr {
	padding: 12px 16px 12px 44px;
	border-radius: 14px;
	background: var(--hk-sky-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") no-repeat 16px center / 18px;
}

.hk-visit-map,
.hk-contact-map {
	min-height: 320px;
	border-radius: 22px;
	overflow: hidden;
	background: var(--hk-sky-soft);
}

.hk-visit-map iframe,
.hk-contact-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
}

/* ---------- ทำเนียบบุคลากร ---------- */
.hk-staff-lead {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--hk-wrap);
	margin: 0 auto clamp(48px, 6vw, 80px) !important;
	padding: clamp(24px, 3vw, 34px) clamp(24px, 4vw, 44px) !important;
	border-radius: 28px;
	background: linear-gradient(120deg, #eef4ff, #ffffff 70%);
	box-shadow: inset 0 0 0 1px #e1e9fb;
}

.hk-staff-lead-text > * {
	margin: 0 0 6px !important;
}

.hk-staff-lead-text p:last-child {
	color: var(--hk-muted, #6b7799);
}

.hk-staff-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: var(--hk-wrap);
	margin: 0 auto !important;
}

.hk-staff-card {
	margin: 0 !important;
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb, 0 24px 48px -36px rgba(11, 27, 77, 0.45);
	cursor: zoom-in;
	transition: transform 0.5s var(--hk-ease-smooth), box-shadow 0.5s var(--hk-ease-smooth);
}

.hk-staff-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 0 0 1px #c9dafb, 0 30px 56px -34px rgba(29, 63, 216, 0.5);
}

.hk-staff-img {
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f6f4ec;
}

.hk-staff-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.9s var(--hk-ease-smooth);
}

.hk-staff-card:hover .hk-staff-img img {
	transform: scale(1.04);
}

.hk-staff-body {
	padding: 16px 20px 20px !important;
}

.hk-staff-body > * {
	margin: 0 !important;
}

.hk-staff-kicker {
	color: var(--hk-blue);
	font-size: 0.82rem;
}

.hk-staff-body h3 {
	margin: 2px 0 8px !important;
	color: var(--hk-navy) !important;
	font-size: 1.12rem !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
}

.hk-staff-more {
	color: var(--hk-blue);
	font-size: 0.9rem;
	font-weight: 500;
}

.hk-staff-more::after {
	content: " →";
}

/* ---------- วิสัยทัศน์ ---------- */
.hk-vision-card {
	position: relative;
	max-width: 980px;
	margin: 0 auto clamp(48px, 6vw, 80px) !important;
	padding: clamp(30px, 5vw, 56px) !important;
	border-radius: 32px;
	background:
		radial-gradient(60% 90% at 100% 0%, rgba(255, 255, 255, 0.25), transparent 60%),
		linear-gradient(130deg, #1d3fd8, #3a7bf0 60%, #4fa3f7);
	color: #fff;
	text-align: center;
	box-shadow: 0 40px 80px -46px rgba(29, 63, 216, 0.9);
	overflow: hidden;
}

.hk-vision-card::before {
	content: "“";
	position: absolute;
	left: 24px;
	top: -30px;
	font-family: Georgia, serif;
	font-size: 12rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.14);
}

.hk-vision-card .hk-eyebrow {
	color: #dbe8ff !important;
	justify-content: center;
}

.hk-vision-card .hk-eyebrow::before,
.hk-vision-card .hk-eyebrow::after {
	background: rgba(255, 255, 255, 0.5) !important;
}

.hk-vision-text {
	position: relative;
	margin: 12px auto 0 !important;
	max-width: 780px;
	color: #fff !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	font-weight: 400;
	line-height: 1.7;
}

.hk-goals {
	display: grid !important;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
	max-width: var(--hk-wrap);
	margin: 0 auto !important;
}

.hk-goal-list {
	counter-reset: g;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.hk-goal-list li {
	counter-increment: g;
	position: relative;
	padding: 16px 20px 16px 66px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb;
	color: #26324f;
	line-height: 1.7;
}

.hk-goal-list li::before {
	content: counter(g);
	position: absolute;
	left: 18px;
	top: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(120deg, var(--hk-blue), #4fa3f7);
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
	line-height: 32px;
	text-align: center;
}

.hk-secto {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	max-width: var(--hk-wrap);
	margin: 0 auto !important;
}

.hk-secto-item {
	margin: 0 !important;
	padding: 26px 18px !important;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb, 0 24px 48px -38px rgba(11, 27, 77, 0.5);
	text-align: center;
	transition: transform 0.5s var(--hk-ease-smooth);
}

.hk-secto-item:hover {
	transform: translateY(-6px);
}

.hk-secto-item > * {
	margin: 0 !important;
}

.hk-secto-letter {
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 3rem;
	font-weight: 600;
	line-height: 1.1;
	background: linear-gradient(140deg, var(--hk-blue), #4fa3f7);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hk-secto-en {
	margin-top: 4px !important;
	color: var(--hk-navy);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
}

.hk-secto-th {
	color: var(--hk-muted, #6b7799);
	font-size: 0.92rem;
}

/* ---------- ติดต่อเรา ---------- */
.hk-contact {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 22px;
	max-width: var(--hk-wrap);
	margin: clamp(28px, 4vw, 48px) auto clamp(60px, 7vw, 96px);
	padding: 0 var(--hk-gutter, 20px);
}

.hk-contact-list {
	display: grid;
	gap: 10px;
	align-content: start;
}

.hk-contact-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb, 0 18px 36px -30px rgba(11, 27, 77, 0.45);
	color: inherit;
	text-decoration: none;
	transition: transform 0.4s var(--hk-ease-smooth), box-shadow 0.4s;
}

a.hk-contact-item:hover {
	transform: translateX(4px);
	box-shadow: 0 0 0 1px #c9dafb, 0 22px 40px -28px rgba(29, 63, 216, 0.5);
}

.hk-contact-item > span:last-child {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hk-contact-item small {
	color: var(--hk-muted, #6b7799);
	font-size: 0.82rem;
}

.hk-contact-item strong {
	color: var(--hk-navy);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
	font-size: 1.05rem;
	overflow-wrap: anywhere;
}

.hk-contact-item a {
	margin-top: 2px;
	color: var(--hk-blue);
	font-size: 0.88rem;
	text-decoration: none;
}

.hk-ci-icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--hk-sky-soft) no-repeat center / 22px;
}

.is-phone .hk-ci-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.is-mail .hk-ci-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.is-fb .hk-ci-icon { background-color: #e8f0ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231877f2'%3E%3Cpath d='M14 8h3V4h-3a4 4 0 0 0-4 4v2H8v4h2v8h4v-8h3l1-4h-4V8z'/%3E%3C/svg%3E"); }
.is-line .hk-ci-icon { background-color: #e6f7ec; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2306c755'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 3.9 3.5 7.2 8.3 7.9.3.1.8.2.9.5.1.3.1.7 0 1l-.1.9c0 .3-.2 1 .9.5s5.9-3.5 8-6C21.3 14.3 22 12.7 22 11c0-4.4-4.5-8-10-8z'/%3E%3C/svg%3E"); }
.is-addr .hk-ci-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }

.hk-contact-map {
	min-height: 420px;
	box-shadow: 0 0 0 1px #e6edfb, 0 30px 60px -40px rgba(11, 27, 77, 0.5);
}

.hk-contact-qr {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
}

.hk-contact-qr figure {
	margin: 0;
	padding: 16px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb;
	text-align: center;
}

.hk-contact-qr img {
	display: block;
	width: 130px;
	height: 130px;
	margin: 0 auto 8px;
	object-fit: contain;
}

.hk-contact-qr figcaption {
	color: var(--hk-muted, #6b7799);
	font-size: 0.85rem;
}

.hk-contact-apply {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 24px 28px;
	border-radius: 20px;
	background: linear-gradient(130deg, #1d3fd8, #4fa3f7);
	color: #dbe8ff;
}

.hk-contact-apply strong {
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 1.3rem;
	font-weight: 500;
}

.hk-contact-btn {
	align-self: flex-start;
	margin-top: 8px;
	padding: 10px 22px;
	border-radius: 999px;
	background: #fff;
	color: var(--hk-blue) !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
	text-decoration: none;
}

/* ---------- ปฏิทินโรงเรียน ---------- */
.hk-calendar {
	max-width: var(--hk-wrap);
	margin: 0 auto;
}

.hk-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 22px !important;
	font-size: 0.9rem;
	color: #4a5679;
}

.hk-cal-legend span::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 6px;
	border-radius: 4px;
	vertical-align: -1px;
}

.hk-cal-legend .is-holiday::before { background: #fde2e4; box-shadow: inset 0 0 0 1px #f3b5bb; }
.hk-cal-legend .is-closed::before { background: #fff1d6; box-shadow: inset 0 0 0 1px #f0d08a; }
.hk-cal-legend .is-today::before { background: var(--hk-blue); }

.hk-cal-months {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.hk-cal-month {
	padding: 20px;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb, 0 24px 48px -38px rgba(11, 27, 77, 0.5);
}

.hk-cal-month h3 {
	margin: 0 0 12px !important;
	color: var(--hk-navy) !important;
	font-size: 1.15rem !important;
	font-weight: 500 !important;
}

.hk-cal-month h3 small {
	color: var(--hk-muted, #6b7799);
	font-weight: 400;
}

.hk-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 3px;
	text-align: center;
}

.hk-cal-dow {
	padding: 2px 0 6px;
	color: var(--hk-muted, #6b7799);
	font-size: 0.75rem;
}

.hk-cal-dow.is-we,
.hk-cal-d.is-we {
	color: #a6b0c9;
}

.hk-cal-d {
	padding: 6px 0;
	border-radius: 9px;
	color: #26324f;
	font-size: 0.85rem;
}

.hk-cal-d.is-past {
	opacity: 0.45;
}

.hk-cal-d.is-holiday {
	background: #fde2e4;
	color: #b3262f;
	font-weight: 600;
	cursor: help;
}

.hk-cal-d.is-closed {
	background: #fff1d6;
	color: #8a5a00;
	font-weight: 600;
	cursor: help;
}

.hk-cal-d.is-today {
	background: var(--hk-blue);
	color: #fff;
	font-weight: 600;
	opacity: 1;
}

.hk-cal-list {
	list-style: none;
	margin: 14px 0 0;
	padding: 12px 0 0;
	border-top: 1px dashed #e1e8f8;
	display: grid;
	gap: 6px;
	font-size: 0.88rem;
}

.hk-cal-list li {
	display: flex;
	gap: 10px;
}

.hk-cal-list li.is-past {
	opacity: 0.5;
}

.hk-cal-list time {
	flex: 0 0 88px;
	color: #b3262f;
	font-weight: 500;
}

.hk-cal-list li.is-closed time {
	color: #8a5a00;
}

.hk-cal-list span {
	color: #33405f;
}

.hk-cal-none {
	margin: 14px 0 0 !important;
	padding-top: 12px;
	border-top: 1px dashed #e1e8f8;
	color: var(--hk-muted, #6b7799);
	font-size: 0.86rem;
}

.hk-cal-note {
	margin: 22px 0 0 !important;
	color: var(--hk-muted, #6b7799);
	font-size: 0.88rem;
	text-align: center;
}

/* ---------- ปุ่มรูปภาพแบบเก่าในเนื้อหา (CLICK HERE / Download) → ปุ่มทันสมัย ---------- */
.hk-old-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border-radius: 999px;
	background: linear-gradient(120deg, #1d3fd8, #4fa3f7);
	color: #fff !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.88rem;
	font-weight: 500;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: 0 10px 20px -12px rgba(29, 63, 216, 0.8);
	transition: transform 0.3s var(--hk-ease-smooth);
}

.hk-old-btn:hover {
	transform: translateY(-1px);
}

/* ตารางในเนื้อหาแบบเก่า: เต็มความกว้าง อ่านง่าย */
body.page-template-default .wp-block-post-content table {
	width: 100% !important;
	height: auto !important;
}

body.page-template-default .wp-block-post-content td {
	vertical-align: middle;
}

/* ข้อความสีขาวในเนื้อหาเดิม (ลอกมาจากธีมพื้นดำ) → สีเข้ม อ่านได้บนพื้นสว่าง */
body.page-template-default .wp-block-post-content .has-white-color,
body.page-template-default .wp-block-post-content .has-white-color a,
.hk-landing .wp-block-post-content .wp-block-group[style*="#1a1a1a"] .has-white-color {
	color: var(--hk-navy) !important;
}

body.page-template-default .wp-block-post-content .has-background[style*="#1a1a1a"] {
	background: transparent !important;
}

/* ---------- มือถือ ---------- */
@media (max-width: 1024px) {
	.hk-pillars.is-four {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.hk-cal-months {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hk-secto {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.hk-hist-intro,
	.hk-programs,
	.hk-visit,
	.hk-goals,
	.hk-contact {
		grid-template-columns: 1fr;
	}

	.hk-timeline {
		padding-left: 30px !important;
	}

	.hk-timeline::before {
		left: 6px;
	}

	.hk-tl-item::before {
		left: -31px;
	}

	.hk-pillars.is-four,
	.hk-staff-grid,
	.hk-cal-months {
		grid-template-columns: 1fr !important;
	}

	.hk-campus {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 130px;
	}

	.hk-staff-lead {
		flex-direction: column;
		align-items: flex-start;
	}

	.hk-secto {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hk-contact-qr {
		grid-template-columns: 1fr 1fr;
	}

	.hk-contact-apply {
		grid-column: 1 / -1;
	}

	.hk-contact-map,
	.hk-contact-map iframe {
		min-height: 300px;
	}
}

/* แก้หลังตรวจ: ป้ายหลักสูตรมองไม่เห็น, แกลเลอรีแถวสุดท้ายโหว่, หน้าติดต่อชิดส่วนหัว */
.hk-program .hk-program-tag {
	color: #fff !important;
}

.hk-campus {
	grid-auto-flow: dense;
}

.hk-campus > figure:nth-child(1),
.hk-campus > figure:nth-child(6),
.hk-campus > figure:nth-child(11) {
	grid-column: span 2;
	grid-row: span 2;
}

.hk-contact {
	position: relative;
	z-index: 2;
	margin-top: clamp(36px, 5vw, 56px) !important;
}

@media (max-width: 760px) {
	.hk-campus > figure:nth-child(6),
	.hk-campus > figure:nth-child(11) {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* แผนผังคณะผู้บริหาร (หน้าคณะผู้บริหาร) */
.hk-board-chart {
	max-width: 560px;
	margin: 0 auto 56px !important;
	text-align: center;
}

.hk-board-chart figure {
	margin: 0 !important;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 0 0 1px #e1e9fb, 0 40px 80px -46px rgba(11, 27, 77, 0.55);
}

.hk-board-chart img {
	display: block;
	width: 100%;
	height: auto;
	cursor: zoom-in;
	transition: transform 0.8s var(--hk-ease-smooth);
}

.hk-board-chart figure:hover img {
	transform: scale(1.02);
}

.hk-board-hint {
	margin: 12px 0 0 !important;
	color: var(--hk-muted, #6b7799);
	font-size: 0.88rem;
}

/* แผนผังคณะผู้บริหาร: ใต้การ์ดรายบุคคล จัด 2 คอลัมน์ (ข้อความซ้าย / รูปแนวตั้งขวา) */
.hk-board-chart {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
	max-width: 1080px !important;
	margin: clamp(48px, 6vw, 88px) auto clamp(48px, 6vw, 80px) !important;
	padding: clamp(28px, 4vw, 52px) !important;
	border-radius: 32px;
	background:
		radial-gradient(60% 80% at 0% 0%, rgba(108, 184, 255, 0.18), transparent 60%),
		linear-gradient(135deg, #f3f7ff, #ffffff 65%);
	box-shadow: inset 0 0 0 1px #e1e9fb, 0 40px 80px -56px rgba(11, 27, 77, 0.5);
	text-align: left;
}

.hk-board-text > * {
	margin: 0 0 14px !important;
}

.hk-board-text p {
	color: #33405f;
	line-height: 1.85;
}

.hk-board-groups {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hk-board-groups span {
	padding: 6px 14px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 0 1px #dfe8fb;
	color: var(--hk-blue);
	font-size: 0.88rem;
}

.hk-board-open a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	background: linear-gradient(120deg, #1d3fd8, #4fa3f7);
	color: #fff !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
	text-decoration: none !important;
	box-shadow: 0 12px 26px -14px rgba(29, 63, 216, 0.85);
}

.hk-board-open a::after {
	content: "⤢";
}

.hk-board-img {
	position: relative;
	margin: 0 !important;
	max-height: 640px;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 0 0 6px #fff, 0 30px 60px -36px rgba(11, 27, 77, 0.6);
	cursor: zoom-in;
}

.hk-board-img img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.9s var(--hk-ease-smooth);
}

/* รูปแนวตั้งยาว: แสดงส่วนบนพอดีกรอบ แล้วค่อยๆ จางด้านล่าง ชวนกดดูเต็ม */
.hk-board-img::after {
	content: "กดเพื่อดูแผนผังเต็ม";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 70px 16px 18px;
	background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 30%, rgba(255, 255, 255, 0));
	color: var(--hk-blue);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.92rem;
	font-weight: 500;
	text-align: center;
	pointer-events: none;
}

.hk-board-img:hover img {
	transform: scale(1.02);
}

@media (max-width: 860px) {
	.hk-board-chart {
		grid-template-columns: 1fr;
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	.hk-board-img {
		max-width: 420px;
		max-height: 520px;
		margin: 0 auto !important;
	}
}

/* ===================================================================
 * 25. มือถือ: เมนูแฮมเบอร์เกอร์เต็มจอ + เมนูย่อยแบบกดเปิด/ปิด (accordion)
 *     ต้นเหตุเดิม: header มี transform/backdrop-filter/will-change ทำให้หน้าเมนู
 *     (position: fixed) ถูกขังอยู่ในแถบ header สูง 58px จึงเหมือนเปิดไม่ได้
 * ================================================================ */
@media (max-width: 781px) {
	header.hk-site-header,
	.wp-site-blocks > header.wp-block-template-part {
		will-change: auto !important;
	}

	.hk-header,
	body.hk-scrolled .hk-header,
	.home .hk-header {
		transform: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: #fff !important;
	}
}

@media (max-width: 1099px) {
	/* ปุ่มแฮมเบอร์เกอร์: พื้นที่กดใหญ่ขึ้น */
	.hk-nav .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		margin-right: -8px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
		color: var(--hk-navy) !important;
	}

	.hk-nav .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
	}

	.hk-nav .wp-block-navigation__responsive-container-open:active {
		background: var(--hk-sky-soft);
	}

	/* หน้าเมนูเต็มจอ */
	.hk-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		height: 100dvh !important;
		padding: 0 !important;
		background: #fff !important;
		overflow-y: auto;
		animation: hk-menu-in 0.28s ease;
	}

	@keyframes hk-menu-in {
		from { opacity: 0; transform: translateY(-8px); }
		to { opacity: 1; transform: none; }
	}

	.hk-nav .is-menu-open .wp-block-navigation__responsive-close {
		max-width: none !important;
		width: 100%;
	}

	.hk-nav .is-menu-open .wp-block-navigation__responsive-dialog {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* แถบบนของหน้าเมนู: ชื่อโรงเรียน + ปุ่มปิด */
	.hk-nav .is-menu-open .wp-block-navigation__responsive-dialog::before {
		content: "โรงเรียนฮั่วเคี้ยววิทยาลัย";
		display: flex;
		align-items: center;
		height: 64px;
		padding: 0 72px 0 20px;
		border-bottom: 1px solid #e8eefb;
		color: var(--hk-navy);
		font-family: var(--wp--preset--font-family--fontsecondary);
		font-size: 1.05rem;
		font-weight: 500;
	}

	.hk-nav .wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: 10px !important;
		right: 12px !important;
		width: 44px;
		height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
		background: var(--hk-sky-soft) !important;
		color: var(--hk-navy) !important;
		z-index: 2;
	}

	.hk-nav .wp-block-navigation__responsive-container-close svg {
		width: 24px;
		height: 24px;
	}

	.hk-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		display: block !important;
		padding: 12px 16px 40px !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 4px !important;
		width: 100%;
	}

	/* รายการหลัก */
	.hk-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		position: relative;
		display: block !important;
		width: 100%;
		border-radius: 14px;
	}

	.hk-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: flex !important;
		align-items: center;
		min-height: 52px;
		padding: 12px 56px 12px 16px !important;
		border-radius: 14px;
		color: var(--hk-navy) !important;
		font-family: var(--wp--preset--font-family--fontsecondary);
		font-size: 1.08rem !important;
		font-weight: 500 !important;
		text-align: left;
	}

	.hk-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:active,
	.hk-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.is-open-row {
		background: #f3f7ff;
	}

	/* หัวข้อที่มีเมนูย่อย (ทั้งแถวเป็นปุ่ม) + ลูกศรด้านขวา */
	.hk-nav .is-menu-open .wp-block-navigation-submenu__toggle {
		position: relative;
		width: 100%;
		background: transparent !important;
		border: 0 !important;
		cursor: pointer;
	}

	.hk-nav .is-menu-open .wp-block-navigation-submenu__toggle::after {
		content: "";
		position: absolute;
		right: 8px;
		top: 50%;
		width: 36px;
		height: 36px;
		margin-top: -18px;
		border-radius: 10px;
		background: var(--hk-sky-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3fd8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 16px;
		transition: transform 0.25s ease;
	}

	.hk-nav .is-menu-open .hk-sub-open > .wp-block-navigation-submenu__toggle::after {
		transform: rotate(180deg);
	}

	.hk-nav .is-menu-open .hk-sub-open > .wp-block-navigation-submenu__toggle {
		background: #f3f7ff !important;
		color: var(--hk-blue) !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__submenu-icon {
		display: none !important;
	}

	/* เมนูย่อย: ปิดไว้ก่อน กดหัวข้อถึงเปิด */
	.hk-nav .is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		display: none !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 2px 0 8px !important;
		padding: 6px !important;
		border: 0 !important;
		border-radius: 14px !important;
		background: #f6f9ff !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		height: auto !important;
	}

	.hk-nav .is-menu-open .hk-sub-open > .wp-block-navigation__submenu-container {
		display: block !important;
		animation: hk-menu-in 0.22s ease;
	}

	.hk-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		display: block !important;
		width: 100%;
	}

	.hk-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex !important;
		align-items: center;
		min-height: 46px;
		padding: 10px 14px !important;
		border-radius: 10px;
		color: #33405f !important;
		font-size: 0.98rem !important;
		font-weight: 400 !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active {
		background: #fff;
		color: var(--hk-blue) !important;
	}

	/* ปุ่มสมัครเรียนท้ายเมนู */
	.hk-nav .is-menu-open .wp-block-navigation__responsive-container-content::after {
		content: "";
		display: block;
		height: 1px;
		margin: 16px 0;
		background: #e8eefb;
	}

	html.has-modal-open,
	html.has-modal-open body {
		overflow: hidden;
	}
}

@media (max-width: 1099px) {
	.hk-nav .is-menu-open .wp-block-navigation__responsive-close,
	.hk-nav .is-menu-open .wp-block-navigation__responsive-dialog {
		display: block !important;
		width: 100% !important;
		position: static !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100% !important;
		align-items: stretch !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.hk-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		width: 100% !important;
		white-space: nowrap;
		justify-content: flex-start !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		white-space: normal;
	}
}

/* แท็บเล็ต/มือถือแนวนอน (ต่ำกว่า 1100px): ใช้เมนูแฮมเบอร์เกอร์แทนเมนูยาวที่ตกสองบรรทัด */
@media (max-width: 1099px) {
	.hk-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex !important;
	}

	.hk-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		max-width: 640px;
		margin: 0 auto !important;
	}
}

/* ===================================================================
 * 26. มือถือ: จัดสัดส่วนหน้าแรกให้กระชับ ไม่ใหญ่เกินจอ
 * ================================================================ */
@media (max-width: 760px) {
	/* ระยะห่างแต่ละส่วนสั้นลง */
	.hk-home > .hk-section,
	.hk-landing .wp-block-post-content > .hk-section {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}

	.hk-head {
		margin-bottom: 22px !important;
	}

	.hk-title {
		font-size: clamp(1.5rem, 6.4vw, 1.9rem) !important;
		line-height: 1.3 !important;
	}

	.hk-lead {
		font-size: 0.95rem !important;
	}

	/* Hero: ไม่สูงเกินจอ ตัวหนังสือพอดี */
	.hk-hero {
		min-height: 560px !important;
	}

	.hk-hero-title {
		font-size: clamp(1.9rem, 8.6vw, 2.4rem) !important;
	}

	.hk-hero-text {
		font-size: 0.92rem !important;
	}

	.hk-hero .wp-block-buttons {
		gap: 10px !important;
	}

	.hk-hero .wp-block-button__link {
		min-height: 48px;
		padding: 12px 20px !important;
		font-size: 0.98rem !important;
	}

	/* ประวัติ: รูป 4 รูปเป็นตาราง 2×2 สั้นๆ */
	.hk-collage {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px !important;
		height: auto !important;
	}

	.hk-collage > figure {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		aspect-ratio: 4 / 3;
		transform: none !important;
		border-radius: 14px;
		overflow: hidden;
	}

	.hk-collage > figure img {
		width: 100%;
		height: 100% !important;
		object-fit: cover;
	}

	.hk-about-text .wp-block-buttons {
		gap: 10px !important;
	}

	/* ข่าวและกิจกรรม: ข่าวแรกใหญ่ ที่เหลือเป็นรายการแนวนอน (รูปเล็กซ้าย ชื่อขวา) */
	.hk-act-grid {
		grid-template-columns: 1fr !important;
		grid-auto-rows: auto !important;
		gap: 10px !important;
	}

	.hk-act-grid > li:first-child {
		grid-column: auto;
		grid-row: auto;
		height: 240px;
	}

	.hk-act-grid > li:not(:first-child) {
		height: 92px;
	}

	.hk-act-grid > li:not(:first-child) .hk-act-card {
		display: flex !important;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 0 0 1px #e6edfb !important;
	}

	.hk-act-grid > li:not(:first-child) .wp-block-post-featured-image {
		position: relative !important;
		inset: auto;
		flex: 0 0 120px;
		height: 100% !important;
	}

	.hk-act-grid > li:not(:first-child) .hk-act-meta {
		position: relative !important;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 8px 12px !important;
		background: none !important;
		min-width: 0;
	}

	.hk-act-grid > li:not(:first-child) .hk-act-meta .wp-block-post-date {
		align-self: flex-start;
		margin-bottom: 4px !important;
		padding: 0 !important;
		background: none !important;
		color: var(--hk-blue) !important;
		backdrop-filter: none;
	}

	.hk-act-grid > li:not(:first-child) .hk-act-meta .wp-block-post-title,
	.hk-act-grid > li:not(:first-child) .hk-act-meta .wp-block-post-title a {
		margin: 0 !important;
		color: var(--hk-navy) !important;
		font-size: 0.92rem !important;
		line-height: 1.4 !important;
		text-shadow: none !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.hk-home-activity .hk-act-grid > li:nth-child(n+4) {
		display: block !important;
	}

	/* อัตลักษณ์ 01–03: การ์ดแนวนอน เลขซ้าย ข้อความขวา */
	.hk-pillars {
		gap: 10px !important;
	}

	.hk-pillar {
		display: grid !important;
		grid-template-columns: 52px 1fr;
		column-gap: 14px;
		align-items: start;
		padding: 18px 18px !important;
	}

	.hk-pillar > * {
		margin: 0 !important;
	}

	.hk-pillar-num {
		grid-row: span 2;
		font-size: 2.1rem !important;
		line-height: 1 !important;
	}

	.hk-pillar h3 {
		font-size: 1.05rem !important;
		margin-bottom: 4px !important;
	}

	.hk-pillar p:not(.hk-pillar-num) {
		font-size: 0.9rem !important;
	}

	/* คณะผู้บริหาร: 3 คนในแถวเดียว เลื่อนดูด้านข้างได้ รูปไม่ใหญ่เต็มจอ */
	.hk-team {
		display: flex !important;
		max-width: none !important;
		gap: 12px !important;
		margin: 0 -16px !important;
		padding: 4px 16px 12px !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.hk-team::-webkit-scrollbar {
		display: none;
	}

	.hk-team > .hk-person {
		flex: 0 0 62%;
		scroll-snap-align: center;
		transform: none !important;
	}

	.hk-person figure {
		aspect-ratio: 4 / 4.3 !important;
	}

	.hk-person h3 {
		font-size: 0.98rem !important;
	}

	/* ระดับชั้น: การ์ดแนวนอน รูปซ้าย ข้อความขวา */
	.hk-levels {
		gap: 12px !important;
	}

	.hk-level-card {
		display: grid !important;
		grid-template-columns: 110px minmax(0, 1fr);
		border-radius: 18px !important;
	}

	.hk-level-img {
		height: 100% !important;
		aspect-ratio: auto !important;
		margin: 0 !important;
	}

	.hk-level-img img {
		height: 100% !important;
		min-height: 140px;
		object-fit: cover;
	}

	.hk-level-body {
		padding: 14px 14px 14px !important;
	}

	.hk-level-body > * {
		margin-bottom: 4px !important;
	}

	.hk-level-body h3 {
		font-size: 1.08rem !important;
	}

	.hk-level-body p {
		font-size: 0.86rem !important;
	}

	.hk-level-num {
		font-size: 0.7rem !important;
	}

	/* ระเบียบวินัย / เอกสาร: การ์ดกระชับ */
	.hk-resource {
		padding: 14px 16px 14px 72px !important;
	}

	.hk-resource::before {
		left: 16px !important;
	}

	/* แถบสมัครเรียนท้ายหน้า */
	.hk-cta-inner {
		padding: 26px 20px !important;
		text-align: left;
	}

	/* footer: ลิงก์ 2 คอลัมน์ ไม่ยาวลงไป */
	.hk-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 24px 16px !important;
	}

	.hk-footer-grid > :first-child,
	.hk-footer-grid > :last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 760px) {
	/* แถบสมัครเรียน: พื้นน้ำเงินทั้งแผ่น ตัวหนังสืออ่านชัด ไม่มีลายจุดทับ */
	.hk-cta-inner {
		background: linear-gradient(150deg, #1d3fd8, #3b7bf0) !important;
	}

	.hk-cta-inner::before,
	.hk-cta-inner::after {
		display: none !important;
	}

}

/* คณะผู้บริหาร (มือถือ): 3 คนเรียงแถวเดียว เห็นครบไม่ต้องเลื่อน */
@media (max-width: 760px) {
	.hk-team {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible;
	}

	.hk-team > .hk-person {
		flex: none;
		order: 0 !important;
		border-radius: 14px;
	}

	/* ผอ. อยู่ตรงกลางเหมือนบนคอม */
	.hk-team > .hk-person.is-lead {
		order: 0 !important;
	}

	.hk-person figure {
		aspect-ratio: 3 / 4 !important;
	}

	.hk-person figure::after {
		height: 28%;
	}

	.hk-person-body {
		padding: 6px 4px 10px !important;
	}

	.hk-person .hk-person-role {
		position: static !important;
		display: block;
		width: auto !important;
		margin: 0 0 4px !important;
		padding: 2px 6px !important;
		font-size: 0.6rem !important;
		line-height: 1.35 !important;
		white-space: normal !important;
		transform: none !important;
	}

	.hk-person h3 {
		font-size: 0.72rem !important;
		line-height: 1.35 !important;
		margin: 0 !important;
	}
}

@media (max-width: 760px) {
	.hk-team .hk-person h3 .hk-ln {
		display: block;
	}
}

@media (max-width: 760px) {
	.hk-team {
		align-items: stretch !important;
	}

	.hk-team > .hk-person,
	.hk-team > .hk-person.is-lead {
		transform: none !important;
		margin-top: 0 !important;
	}
}

@media (max-width: 380px) {
	.hk-person .hk-person-role {
		font-size: 0.54rem !important;
		padding: 2px 4px !important;
		letter-spacing: -0.01em;
	}

	.hk-person h3 {
		font-size: 0.68rem !important;
	}
}

/* ===================================================================
 * 27. มือถือ: ปุ่มขนาดพอดีเนื้อหา ไม่ยืดเต็มจอ (เรียงคู่กันได้ถ้าพอ)
 * ================================================================ */
@media (max-width: 760px) {
	.wp-block-buttons {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
	}

	.wp-block-buttons > .wp-block-button {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: 100%;
	}

	.wp-block-buttons > .wp-block-button > .wp-block-button__link {
		width: auto !important;
		min-width: 0 !important;
		min-height: 44px !important;
		padding: 11px 20px !important;
		font-size: 0.95rem !important;
		line-height: 1.3 !important;
		white-space: nowrap;
	}

	/* ส่วนที่จัดกลาง (hero / หัวข้อกลาง) ให้ปุ่มอยู่กลาง */
	.hk-hero .wp-block-buttons,
	.wp-block-buttons.is-content-justification-center,
	.hk-center-link,
	.hk-head.is-center + .wp-block-buttons,
	.hk-hist-cta .wp-block-buttons {
		justify-content: center !important;
	}

	.hk-hero .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		padding: 12px 22px !important;
	}
}

@media (max-width: 360px) {
	.wp-block-buttons > .wp-block-button > .wp-block-button__link {
		padding: 10px 16px !important;
		font-size: 0.9rem !important;
	}
}


/* ===================================================================
 * 24. Hero สไลด์ (Swiper) — แบบเดียวกับเว็บขอนแก่นวิทยายน
 *     fade 0.3 วินาที · 7 วินาที/รูป · ซูมช้า 1 → 1.15 ใน 20 วินาที ไป-กลับ ต่อเนื่อง
 * ================================================================ */
.hk-hero .hk-hero-swiper {
	position: absolute !important;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
}

.hk-hero .hk-hero-swiper .swiper-slide {
	overflow: hidden;
	background: #0b1b4d;
}

.hk-hero .hk-hero-zoom {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	filter: saturate(0.9) !important;
	opacity: 1 !important;
	animation: hk-slow-zoom 20s ease infinite alternate !important;
	transform-origin: center;
}

@keyframes hk-slow-zoom {
	0% { transform: scale(1); }
	100% { transform: scale(1.15); }
}

/* สไลด์วันต่อต้านยาเสพติด: คนอยู่ครึ่งล่างของรูป */
.hk-hero .hk-hero-zoom[src*=hero-anti-drug-day] {
	object-position: center 88%;
}

/* ชั้นสีน้ำเงินและข้อความ ปล่อยการสัมผัสผ่านลงไปที่สไลด์ (ลากได้ทั้ง hero) ยกเว้นปุ่ม/ลิงก์ */
.hk-hero.has-swiper .wp-block-cover__background,
.hk-hero.has-swiper::before,
.hk-hero.has-swiper::after,
.hk-hero.has-swiper .hk-bubbles {
	pointer-events: none !important;
}

.hk-hero.has-swiper .wp-block-cover__inner-container {
	pointer-events: none;
}

.hk-hero.has-swiper .wp-block-cover__inner-container a,
.hk-hero.has-swiper .wp-block-cover__inner-container button {
	pointer-events: auto;
}

.hk-hero.has-swiper .wp-block-cover__inner-container {
	-webkit-user-select: none;
	user-select: none;
}

/* จุดเลือกรูป: ขาวโปร่ง / อันที่แสดงอยู่ยืดเป็นแถบ (สีฟ้าโรงเรียนแทนชมพู) */
.hk-hero .hk-hero-pagination {
	position: absolute !important;
	left: 0 !important;
	right: 0;
	bottom: 26px !important;
	z-index: 5;
	width: 100% !important;
	text-align: center;
}

.hk-hero .hk-hero-pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 4px !important;
	opacity: 0.5;
	background: #fff !important;
	transition: width 0.3s, background-color 0.3s, opacity 0.3s;
}

.hk-hero .hk-hero-pagination .swiper-pagination-bullet-active {
	width: 25px;
	border-radius: 10px;
	opacity: 1;
	background: #6cb8ff !important;
	box-shadow: 0 0 12px rgba(108, 184, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
	.hk-hero .hk-hero-zoom {
		animation: none !important;
	}
}

.hk-hero .hk-hero-zoom {
	-webkit-user-drag: none;
	user-select: none;
}

/* จุดเลือกรูป hero: กลับเป็นแบบเดิม — ขีดบางสีขาวโปร่ง ขีดที่แสดงอยู่ค่อยๆ เติมเต็มตามเวลา */
.hk-hero .hk-hero-pagination {
	bottom: 34px !important;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.hk-hero .hk-hero-pagination .swiper-pagination-bullet {
	position: relative;
	width: 34px !important;
	height: 4px !important;
	margin: 0 !important;
	border-radius: 4px !important;
	opacity: 1 !important;
	background: rgba(255, 255, 255, 0.35) !important;
	box-shadow: none !important;
	overflow: hidden;
	transition: none;
}

.hk-hero .hk-hero-pagination .swiper-pagination-bullet::before {
	content: "";
	position: absolute;
	inset: -12px 0;
}

.hk-hero .hk-hero-pagination .swiper-pagination-bullet::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
}

.hk-hero .hk-hero-pagination .swiper-pagination-bullet-active::after {
	animation: hk-hero-prog 7s linear forwards;
}

@keyframes hk-hero-prog {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@media (max-width: 760px) {
	.hk-hero .hk-hero-pagination {
		bottom: 22px !important;
	}

	.hk-hero .hk-hero-pagination .swiper-pagination-bullet {
		width: 24px !important;
	}
}

/* ===================================================================
 * 28. กลุ่มสาระการเรียนรู้: หน้าภาพรวม + หน้าครูแต่ละกลุ่มสาระ
 * ================================================================ */
.hk-la-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	max-width: var(--hk-wrap);
	margin: 0 auto clamp(48px, 6vw, 80px) !important;
}

.hk-la-grid.is-two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 760px;
}

.hk-la-grid.is-one {
	grid-template-columns: minmax(0, 1fr);
	max-width: 372px;
}

.hk-la-card {
	position: relative;
	display: flex !important;
	flex-direction: column;
	margin: 0 !important;
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb, 0 24px 48px -36px rgba(11, 27, 77, 0.45);
	transition: transform 0.5s var(--hk-ease-smooth), box-shadow 0.5s var(--hk-ease-smooth);
}

.hk-la-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 0 0 1px #c9dafb, 0 30px 56px -34px rgba(29, 63, 216, 0.5);
}

.hk-la-badge {
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f7f9fe;
}

.hk-la-badge img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--hk-ease-smooth);
}

.hk-la-card:hover .hk-la-badge img {
	transform: scale(1.05);
}

.hk-la-body {
	padding: 14px 18px 18px !important;
}

.hk-la-body > * {
	margin: 0 !important;
}

.hk-la-kicker {
	color: var(--hk-blue);
	font-size: 0.8rem;
}

.hk-la-body h3 {
	margin: 2px 0 6px !important;
	font-size: 1.08rem !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
}

.hk-la-body h3 a {
	color: var(--hk-navy) !important;
	text-decoration: none;
}

/* ทั้งการ์ดกดได้ */
.hk-la-body h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hk-la-meta {
	color: var(--hk-muted, #6b7799);
	font-size: 0.86rem;
}

.hk-la-meta::after {
	content: " →";
	color: var(--hk-blue);
}

/* --- หน้าครูกลุ่มสาระ --- */
.hk-subject-intro {
	display: grid !important;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: clamp(20px, 4vw, 44px);
	align-items: center;
	max-width: 980px;
	margin: 0 auto clamp(48px, 6vw, 80px) !important;
	padding: clamp(20px, 3vw, 32px) !important;
	border-radius: 32px;
	background: linear-gradient(135deg, #f3f7ff, #ffffff 65%);
	box-shadow: inset 0 0 0 1px #e1e9fb;
}

.hk-subject-badge {
	margin: 0 !important;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 0 0 6px #fff, 0 24px 48px -30px rgba(11, 27, 77, 0.5);
}

.hk-subject-badge img {
	display: block;
	width: 100%;
	height: auto;
}

.hk-subject-head {
	display: grid !important;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 22px;
	align-items: center;
	margin: 0 !important;
}

.hk-subject-head .hk-subject-photo {
	margin: 0 !important;
	aspect-ratio: 4 / 5;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px -26px rgba(11, 27, 77, 0.55);
}

.hk-subject-head-text > * {
	margin: 0 0 6px !important;
}

.hk-subject-head-name {
	color: var(--hk-navy);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: 500;
	line-height: 1.35;
}

.hk-subject-count {
	display: inline-flex;
	padding: 4px 14px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 0 1px #dfe8fb;
	color: var(--hk-blue);
	font-size: 0.88rem;
}

.hk-subject-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	max-width: 1080px;
	margin: 0 auto !important;
}

.hk-subject-person {
	margin: 0 !important;
	padding: 10px 10px 16px !important;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb, 0 20px 40px -34px rgba(11, 27, 77, 0.45);
	text-align: center;
	transition: transform 0.5s var(--hk-ease-smooth);
}

.hk-subject-person:hover {
	transform: translateY(-5px);
}

.hk-subject-photo {
	margin: 0 0 12px !important;
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	overflow: hidden;
	background: var(--hk-sky-soft);
}

.hk-subject-photo img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center 20%;
}

.hk-subject-name {
	margin: 0 !important;
	color: var(--hk-navy);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.45;
}

.hk-subject-role {
	margin: 2px 0 0 !important;
	color: var(--hk-blue);
	font-size: 0.82rem;
}

.hk-subject-more {
	max-width: 980px;
	margin: clamp(48px, 6vw, 80px) auto 0 !important;
	padding-top: 32px !important;
	border-top: 1px solid #e6ecfa;
	text-align: center;
}

.hk-subject-more-title {
	margin: 0 0 14px !important;
	color: var(--hk-navy);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-weight: 500;
}

.hk-subject-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 24px;
}

.hk-subject-chip {
	padding: 8px 16px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 0 1px #dfe8fb;
	color: var(--hk-text, #33405f) !important;
	font-size: 0.9rem;
	text-decoration: none !important;
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.hk-subject-chip:hover {
	box-shadow: 0 0 0 1px var(--hk-blue);
	color: var(--hk-blue) !important;
}

.hk-subject-chip.is-current {
	background: var(--hk-blue);
	box-shadow: none;
	color: #fff !important;
}

@media (max-width: 1024px) {
	.hk-la-grid,
	.hk-subject-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.hk-la-grid,
	.hk-la-grid.is-two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.hk-la-body {
		padding: 10px 12px 14px !important;
	}

	.hk-la-body h3 {
		font-size: 0.92rem !important;
	}

	.hk-la-kicker,
	.hk-la-meta {
		font-size: 0.74rem;
	}

	.hk-subject-intro {
		grid-template-columns: 1fr;
		padding: 16px !important;
		border-radius: 24px;
	}

	.hk-subject-badge {
		max-width: 220px;
		margin: 0 auto !important;
	}

	.hk-subject-head {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 14px;
	}

	.hk-subject-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.hk-subject-name {
		font-size: 0.86rem;
	}

	.hk-subject-chip {
		padding: 6px 12px;
		font-size: 0.82rem;
	}
}

@media (max-width: 760px) {
	.hk-la-grid.is-one {
		grid-template-columns: minmax(0, 1fr);
		max-width: calc(50% - 5px);
	}
}

/* ===================================================================
 * 29. หน้าจดหมายข่าว: โปสเตอร์แนวตั้งเรียงเป็นตาราง
 * ================================================================ */
.hk-nl {
	max-width: var(--hk-wrap);
	margin: 0 auto;
}

.hk-nl-total {
	margin: 0 0 18px !important;
	color: var(--hk-muted, #6b7799);
	font-size: 0.92rem;
}

.hk-nl-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.hk-nl-card {
	display: flex;
	flex-direction: column;
	border-radius: 22px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 0 1px #e6edfb, 0 24px 48px -36px rgba(11, 27, 77, 0.45);
	color: inherit;
	text-decoration: none !important;
	transition: transform 0.5s var(--hk-ease-smooth), box-shadow 0.5s var(--hk-ease-smooth);
}

.hk-nl-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 0 0 1px #c9dafb, 0 30px 56px -34px rgba(29, 63, 216, 0.5);
}

.hk-nl-poster {
	position: relative;
	display: block;
	aspect-ratio: 724 / 1024;
	overflow: hidden;
	background: #eef3ff;
}

.hk-nl-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.9s var(--hk-ease-smooth);
}

.hk-nl-card:hover .hk-nl-poster img {
	transform: scale(1.04);
}

.hk-nl-poster.is-empty {
	background: linear-gradient(135deg, #dce9ff, #eef4ff);
}

.hk-nl-new {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--hk-blue);
	color: #fff;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.78rem;
	font-style: normal;
	box-shadow: 0 8px 16px -8px rgba(29, 63, 216, 0.8);
}

.hk-nl-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px 18px;
}

.hk-nl-body time {
	color: var(--hk-blue);
	font-size: 0.82rem;
}

.hk-nl-body b {
	color: var(--hk-navy);
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hk-nl-pages {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 32px;
	color: var(--hk-muted, #6b7799);
	font-size: 0.92rem;
}

.hk-nl-pages a {
	padding: 10px 20px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 0 1px #dfe8fb;
	color: var(--hk-blue) !important;
	text-decoration: none !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
}

.hk-nl-pages a:hover {
	box-shadow: 0 0 0 1px var(--hk-blue);
}

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

@media (max-width: 760px) {
	.hk-nl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.hk-nl-body {
		padding: 10px 12px 14px;
	}

	.hk-nl-body b {
		font-size: 0.86rem;
	}

	.hk-nl-pages a {
		padding: 8px 14px;
	}
}

/* ===================================================================
 * 30. เมนูมือถือแบบแผ่นเลื่อนลงจากด้านบน (แทนหน้าเมนูเต็มจอ)
 *     พื้นหลังมืดลงเล็กน้อย แตะพื้นที่มืดเพื่อปิด · รายการใหญ่ แยกกลุ่มชัด
 * ================================================================ */
@media (max-width: 1099px) {
	.hk-nav .wp-block-navigation__responsive-container.is-menu-open {
		background: rgba(8, 20, 60, 0.42) !important;
		overflow: hidden !important;
		animation: hk-dim-in 0.3s ease !important;
	}

	@keyframes hk-dim-in {
		from { background-color: rgba(8, 20, 60, 0); }
	}

	/* แผ่นเมนู */
	.hk-nav .is-menu-open .wp-block-navigation__responsive-close {
		position: absolute !important;
		top: 0;
		left: 0;
		right: 0;
		max-height: 88vh;
		max-height: 88dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff;
		border-radius: 0 0 26px 26px;
		box-shadow: 0 24px 60px -20px rgba(8, 20, 60, 0.55);
		animation: hk-sheet-down 0.42s cubic-bezier(0.16, 1, 0.3, 1);
	}

	@keyframes hk-sheet-down {
		from { transform: translateY(-104%); }
		to { transform: translateY(0); }
	}

	/* แถบหัวแผ่น: โลโก้ + ชื่อโรงเรียน (ใส่ด้วย JS) + ปุ่มปิด */
	.hk-nav .is-menu-open .wp-block-navigation__responsive-dialog::before {
		content: none !important;
	}

	.hk-sheet-head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 10px;
		height: 64px;
		padding: 0 70px 0 16px;
		background: rgba(255, 255, 255, 0.97);
		border-bottom: 1px solid #edf1fb;
	}

	.hk-sheet-head img {
		width: 38px;
		height: 38px;
		border-radius: 50%;
	}

	.hk-sheet-head span {
		display: flex;
		flex-direction: column;
		line-height: 1.25;
	}

	.hk-sheet-head strong {
		color: var(--hk-navy);
		font-family: var(--wp--preset--font-family--fontsecondary);
		font-size: 1rem;
		font-weight: 500;
	}

	.hk-sheet-head small {
		color: var(--hk-muted, #6b7799);
		font-size: 0.72rem;
		letter-spacing: 0.04em;
	}

	.hk-nav .wp-block-navigation__responsive-container-close {
		position: fixed !important;
		top: 10px !important;
		right: 12px !important;
		z-index: 3;
	}

	.hk-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		max-width: none !important;
		padding: 10px 14px 18px !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__responsive-container-content::after {
		content: none !important;
	}

	/* รายการหลัก: แถวสูง 54px มีเส้นคั่นบาง */
	.hk-nav .is-menu-open .wp-block-navigation__container {
		gap: 0 !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		border-bottom: 1px solid #f0f3fa;
		border-radius: 0 !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child {
		border-bottom: 0;
	}

	.hk-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		min-height: 54px !important;
		padding: 12px 52px 12px 8px !important;
		border-radius: 12px !important;
		font-size: 1.05rem !important;
	}

	/* เมนูย่อย: การ์ดสองคอลัมน์ กดง่าย */
	.hk-nav .is-menu-open .hk-sub-open > .wp-block-navigation__submenu-container {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin: 0 0 12px !important;
		padding: 0 !important;
		background: transparent !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		min-height: 52px !important;
		height: 100%;
		padding: 10px 12px !important;
		border-radius: 14px !important;
		background: #f4f7ff;
		color: var(--hk-navy) !important;
		font-size: 0.92rem !important;
		line-height: 1.35 !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active {
		background: var(--hk-blue) !important;
		color: #fff !important;
	}

	/* ปุ่มท้ายแผ่น (ใส่ด้วย JS) */
	.hk-sheet-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		padding: 4px 14px 18px;
	}

	.hk-sheet-actions a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 50px;
		border-radius: 999px;
		font-family: var(--wp--preset--font-family--fontsecondary);
		font-size: 1rem;
		font-weight: 500;
		text-decoration: none !important;
	}

	.hk-sheet-actions .is-apply {
		background: linear-gradient(120deg, #1d3fd8, #4fa3f7);
		color: #fff !important;
		box-shadow: 0 12px 24px -14px rgba(29, 63, 216, 0.9);
	}

	.hk-sheet-actions .is-call {
		background: #f4f7ff;
		color: var(--hk-blue) !important;
	}

	/* แถบล่างแผ่นให้รู้ว่าดึงได้/ปิดได้ */
	.hk-sheet-grip {
		display: block;
		width: 44px;
		height: 5px;
		margin: 0 auto 10px;
		border-radius: 5px;
		background: #dfe5f2;
	}
}

@media (max-width: 1099px) {
	.hk-nav .is-menu-open .hk-sub-open > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		min-width: 0;
	}

	.hk-nav .is-menu-open .hk-sub-open > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		box-sizing: border-box !important;
		width: 100% !important;
		min-height: 54px !important;
		height: auto;
		padding: 10px 12px !important;
		border: 1px solid #e3eafa;
		background: #f7f9ff !important;
		color: var(--hk-navy) !important;
		font-weight: 500 !important;
	}

	/* ปุ่มสมัครเรียน/โทร ติดล่างแผ่นเสมอ แม้เมนูยาวต้องเลื่อน */
	.hk-sheet-actions {
		position: sticky;
		bottom: 0;
		z-index: 2;
		padding: 12px 14px 10px;
		background: linear-gradient(to top, #fff 75%, rgba(255, 255, 255, 0));
	}

	.hk-sheet-grip {
		margin-bottom: 8px;
	}
}

/* เมนูมือถือ: กระชับ มินิมอล (ไม่มีปุ่มท้ายแผ่น) */
@media (max-width: 1099px) {
	.hk-sheet-actions,
	.hk-sheet-grip {
		display: none !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__responsive-close {
		border-radius: 0 0 20px 20px;
		max-height: 80vh;
		max-height: 80dvh;
	}

	.hk-sheet-head {
		height: 56px;
		padding: 0 60px 0 16px;
		gap: 8px;
	}

	.hk-sheet-head img {
		width: 30px;
		height: 30px;
	}

	.hk-sheet-head strong {
		font-size: 0.92rem;
	}

	.hk-sheet-head small {
		display: none;
	}

	.hk-nav .wp-block-navigation__responsive-container-close {
		top: 8px !important;
		right: 10px !important;
		width: 40px !important;
		height: 40px !important;
		border-radius: 50% !important;
		background: #f3f6fc !important;
	}

	.hk-nav .wp-block-navigation__responsive-container-close svg {
		width: 20px !important;
		height: 20px !important;
	}

	.hk-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 6px 12px 12px !important;
	}

	/* รายการหลัก: แถวสูง 46px ตัวหนังสือพอดี */
	.hk-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		border-bottom-color: #f3f5fa;
	}

	.hk-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		min-height: 46px !important;
		padding: 8px 44px 8px 6px !important;
		font-size: 0.98rem !important;
		font-weight: 500 !important;
	}

	/* ลูกศร: เล็ก เรียบ ไม่มีพื้น */
	.hk-nav .is-menu-open .wp-block-navigation-submenu__toggle::after {
		right: 4px;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		background-color: transparent !important;
		background-size: 14px;
	}

	.hk-nav .is-menu-open .hk-sub-open > .wp-block-navigation-submenu__toggle {
		background: transparent !important;
	}

	/* เมนูย่อย: รายการเรียบๆ เยื้องเข้า มีเส้นนำด้านซ้าย */
	.hk-nav .is-menu-open .hk-sub-open > .wp-block-navigation__submenu-container {
		display: block !important;
		margin: 0 0 8px 6px !important;
		padding: 0 0 0 10px !important;
		border-left: 2px solid #e3eafa !important;
		border-radius: 0 !important;
	}

	.hk-nav .is-menu-open .hk-sub-open > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		min-height: 44px !important;
		padding: 8px 10px !important;
		border: 0 !important;
		border-radius: 10px !important;
		background: transparent !important;
		color: #4a5679 !important;
		font-size: 0.92rem !important;
		font-weight: 400 !important;
	}

	.hk-nav .is-menu-open .hk-sub-open > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active {
		background: #f1f5ff !important;
		color: var(--hk-blue) !important;
	}
}

/* ปุ่มย้อนกลับ: มุมซ้ายบน ตรงแนวขอบเนื้อหาเดียวกันทุกหน้า */
.hk-back-bar {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--hk-wrap);
	margin: 0 auto 4px !important;
	padding: 0 !important;
	text-align: left;
}

.hk-back-bar .hk-back {
	margin: 0 !important;
}

.hk-back {
	gap: 6px;
	padding: 7px 14px 7px 10px !important;
	font-size: 0.9rem !important;
}

/* หน้าทั่วไป (template ธีมเดิม): มุมซ้ายบนแนวเดียวกับขอบเนื้อหา */
body.page-template-default main > .wp-block-group:first-child > .hk-back {
	left: max(var(--hk-gutter, 20px), calc(50% - var(--hk-wrap) / 2)) !important;
}

@media (max-width: 760px) {
	.hk-back-bar {
		margin-bottom: 0 !important;
	}

	.hk-back {
		padding: 6px 12px 6px 8px !important;
		font-size: 0.85rem !important;
	}
}

/* หัวแผ่นเมนู (โลโก้+ชื่อ) แสดงเฉพาะตอนเปิดเมนูบนมือถือ/แท็บเล็ต — ห้ามโผล่ในแถบเมนูคอม */
.hk-sheet-head {
	display: none !important;
}

@media (max-width: 1099px) {
	.hk-nav .is-menu-open .hk-sheet-head {
		display: flex !important;
	}
}

/* หน้าข่าว: ปุ่มย้อนกลับอยู่มุมซ้ายบนของหน้า เหนือรูปปก */
body.single-post main > .hk-back-bar {
	max-width: var(--hk-wrap) !important;
	margin: clamp(18px, 2.5vw, 28px) auto 0 !important;
}

body.single-post main > .hk-back-bar + .wp-block-post-featured-image {
	margin-top: 14px !important;
}

/* ===================================================================
 * 31. หน้ารวมข่าวตามหมวดหมู่: ส่วนหัวแบบมินิมอล (includes/archive.php)
 * ================================================================ */
body.archive main.blog-two-columns {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
	background: none !important;
}

.hkar-head {
	box-sizing: border-box;
	max-width: var(--hk-wrap);
	margin: clamp(8px, 2vw, 24px) auto clamp(28px, 4vw, 44px);
	position: relative;
	padding: clamp(20px, 2.8vw, 30px) clamp(20px, 3vw, 34px);
	border-radius: 26px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5));
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 24px 50px -30px rgba(29, 63, 216, 0.4);
	backdrop-filter: blur(14px) saturate(1.3);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	animation: hkar-in 0.7s var(--hk-ease-smooth) both;
}

.hkar-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: clamp(14px, 2vw, 20px);
	font-size: 0.82rem;
	color: var(--hk-muted);
}

.hkar-crumb a {
	color: var(--hk-muted) !important;
	text-decoration: none !important;
	transition: color 0.25s ease;
}

.hkar-crumb a:hover {
	color: var(--hk-blue) !important;
}

.hkar-crumb span {
	opacity: 0.6;
}

.hkar-crumb span[aria-current] {
	opacity: 1;
	color: var(--hk-ink);
}

.hkar-main {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 18px);
}

.hkar-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: #fff;
	color: var(--hk-blue);
	box-shadow: 0 0 0 1px var(--hk-line), 0 10px 24px -16px rgba(29, 63, 216, 0.45);
}

.hkar-icon svg {
	width: 24px;
	height: 24px;
}

.hkar-text {
	flex: 1 1 auto;
	min-width: 0;
}

.hkar-title {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--hk-ink) !important;
}

.hkar-desc {
	margin: 4px 0 0 !important;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--hk-muted);
}

.hkar-meta {
	flex: 0 0 auto;
	display: flex;
	gap: 6px;
}

.hkar-stat {
	font-size: 0.86rem;
	color: var(--hk-muted);
	white-space: nowrap;
}

.hkar-stat + .hkar-stat::before {
	content: "·";
	margin-right: 6px;
}

.hkar-stat strong {
	color: var(--hk-ink);
	font-weight: 600;
}

/* แถบหมวดหมู่: ปุ่มเส้นบาง ปุ่มที่เลือกเป็นสีน้ำเงิน */
.hkar-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: clamp(18px, 2.4vw, 24px);
}

.hkar-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--hk-line);
	color: var(--hk-ink) !important;
	font-family: var(--wp--preset--font-family--fontsecondary);
	font-size: 0.88rem;
	text-decoration: none !important;
	transition: color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.hkar-chip svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--hk-blue);
}

.hkar-chip em {
	font-style: normal;
	font-size: 0.76rem;
	color: var(--hk-muted);
}

.hkar-chip:hover {
	color: var(--hk-blue) !important;
	box-shadow: inset 0 0 0 1px rgba(29, 63, 216, 0.4);
}

.hkar-chip.is-active {
	background: var(--hk-blue);
	box-shadow: none;
	color: #fff !important;
}

.hkar-chip.is-active svg,
.hkar-chip.is-active em {
	color: rgba(255, 255, 255, 0.85);
}

@keyframes hkar-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hkar-head {
		animation: none;
	}
}

@media (max-width: 1340px) {
	body.archive main > .hkar-head {
		margin-left: 24px !important;
		margin-right: 24px !important;
	}
}

@media (max-width: 700px) {
	body.archive main > .hkar-head {
		margin: 4px 16px 22px !important;
		padding: 16px;
		border-radius: 20px;
	}

	.hkar-crumb {
		font-size: 0.76rem;
		margin-bottom: 12px;
	}

	.hkar-main {
		align-items: flex-start;
		gap: 12px;
	}

	.hkar-icon {
		width: 42px;
		height: 42px;
		border-radius: 13px;
	}

	.hkar-icon svg {
		width: 20px;
		height: 20px;
	}

	.hkar-title {
		font-size: 1.4rem !important;
	}

	.hkar-desc {
		font-size: 0.86rem;
	}

	.hkar-meta {
		display: none;
	}

	/* แถบหมวดหมู่เลื่อนแนวนอนได้ ไม่ตกบรรทัด */
	.hkar-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 14px -16px 0;
		padding: 0 16px 2px;
		mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
	}

	.hkar-chips::-webkit-scrollbar {
		display: none;
	}

	.hkar-chip {
		flex: 0 0 auto;
		padding: 7px 12px;
		font-size: 0.82rem;
	}
}

/* ===================================================================
 * 32. มือถือ: หน้าที่ข้อความเยอะ ให้กระชับ อ่านง่าย ไม่ล้น
 * ================================================================ */
/* คำยาวๆ (ลิงก์ ชื่อไฟล์) ตัดบรรทัดได้ ไม่ดันจอ */
main p,
main li,
main h1,
main h2,
main h3,
main td,
.hk-page-hero p {
	overflow-wrap: anywhere;
}

main table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

@media (max-width: 600px) {
	/* หัวหน้าเพจ */
	.hk-back-bar {
		margin-bottom: 14px !important;
	}

	.hk-page-hero h1,
	.hk-page-hero .wp-block-heading:first-of-type {
		font-size: clamp(1.6rem, 7.2vw, 1.95rem) !important;
		line-height: 1.25 !important;
	}

	.hk-page-hero .hk-lead,
	.hk-page-hero p:not(.hk-eyebrow):not(.hk-breadcrumb) {
		font-size: 0.92rem !important;
		line-height: 1.65 !important;
	}

	.hk-breadcrumb {
		font-size: 0.78rem !important;
	}

	.hk-title {
		font-size: clamp(1.35rem, 6vw, 1.6rem) !important;
		line-height: 1.3 !important;
	}

	main p,
	main li {
		font-size: min(1em, 0.96rem);
	}

	/* วิสัยทัศน์: ตัวอักษรเล็กลง อ่านสบาย */
	.hk-vision-card {
		padding: 28px 20px !important;
		border-radius: 22px !important;
	}

	.hk-vision-text {
		font-size: 1.02rem !important;
		line-height: 1.75 !important;
	}

	/* SECTO: การ์ดเล็กลง ตัวสุดท้ายเต็มแถว */
	.hk-secto {
		gap: 10px !important;
	}

	.hk-secto-item {
		padding: 16px 12px !important;
	}

	.hk-secto-item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.hk-secto-letter {
		font-size: 2.1rem !important;
	}

	.hk-secto-en {
		font-size: 0.85rem !important;
	}

	.hk-secto-th {
		font-size: 0.78rem !important;
	}

	/* หัวหน้ากลุ่มสาระ: รูปเล็กลง ชื่อไม่ถูกตัดกลางคำ */
	.hk-subject-head {
		grid-template-columns: 92px minmax(0, 1fr) !important;
		gap: 14px !important;
	}

	.hk-subject-head .hk-subject-photo {
		border-radius: 14px !important;
	}

	.hk-subject-head-text .hk-eyebrow {
		font-size: 0.72rem !important;
		letter-spacing: 0.06em !important;
	}

	.hk-subject-head-text .hk-eyebrow::before {
		display: none !important;
	}

	.hk-subject-head-name {
		font-size: 1.05rem !important;
		line-height: 1.4 !important;
	}

	.hk-subject-count {
		font-size: 0.78rem !important;
		padding: 3px 10px !important;
	}

	/* โลโก้กลุ่มสาระ: ไม่ใหญ่เต็มจอ */
	.hk-subject-badge {
		max-width: 150px;
		margin: 0 auto !important;
		border-radius: 18px !important;
	}

	/* ครูในกลุ่มสาระ: ชื่อขนาดพอดีการ์ด */
	.hk-subject-grid {
		gap: 10px !important;
	}

	.hk-subject-person {
		padding: 8px 8px 12px !important;
		border-radius: 18px !important;
	}

	.hk-subject-name {
		font-size: 0.86rem !important;
		line-height: 1.4 !important;
	}

	.hk-subject-role {
		font-size: 0.74rem !important;
	}
}