/* ============================================================
   DIM Motion — ระบบเคลื่อนไหวของธีม (CSS ล้วน ไม่ใช้ JavaScript)
   ค่าทั้งหมดคุมจากหน้า ลักษณะ → การเคลื่อนไหว (Motion) ในแอดมิน
   ============================================================ */

:root {
	--dim-dur:      700ms; /* ความเร็วหลัก */
	--dim-dur-fast: 260ms; /* ความเร็วตอน hover */
	--dim-dist:     32px;  /* ระยะที่เลื่อนเข้ามา */
	--dim-scale:    0.94;  /* ขนาดเริ่มต้นของ zoom */
	--dim-lift:     6px;   /* ระยะยกตอน hover */
	--dim-blur:     6px;   /* ความเบลอตอนเริ่ม */
	--dim-ease:     cubic-bezier(.16,.84,.28,1);
	--dim-ease-out: cubic-bezier(.33,1,.68,1);
}

/* ปิดการเคลื่อนไหวให้ผู้ใช้ที่ตั้งค่า "ลดการเคลื่อนไหว" ไว้ในเครื่อง
   เป็นมาตรฐาน accessibility — บางคนเวียนหัวกับภาพเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}

/* กันหน้าขาว: ถ้าปิด motion ต้องไม่มีอะไรค้างอยู่ในสถานะซ่อน */
body:not(.dim-motion-on) [class*="dim-reveal"] {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}

/* ============================================================
   1. ปรากฏตอนเลื่อนหน้าจอมาถึง (scroll-driven ไม่ใช้ JS)
   เบราว์เซอร์ที่ไม่รองรับจะแสดงเนื้อหาปกติทันที ไม่มีทางหน้าขาว
   ============================================================ */
@keyframes dim-in-up    { from { opacity:0; transform: translateY(var(--dim-dist)); } to { opacity:1; transform:none; } }
@keyframes dim-in-left  { from { opacity:0; transform: translateX(calc(var(--dim-dist) * -1.6)); } to { opacity:1; transform:none; } }
@keyframes dim-in-right { from { opacity:0; transform: translateX(calc(var(--dim-dist) * 1.6)); } to { opacity:1; transform:none; } }
@keyframes dim-in-zoom  { from { opacity:0; transform: scale(var(--dim-scale)); } to { opacity:1; transform:none; } }
@keyframes dim-in-blur  { from { opacity:0; filter: blur(var(--dim-blur)); transform: translateY(calc(var(--dim-dist) * .6)); } to { opacity:1; filter: blur(0); transform:none; } }

@supports (animation-timeline: view()) {
	.dim-motion-on .dim-reveal,
	.dim-motion-on .dim-reveal-left,
	.dim-motion-on .dim-reveal-right,
	.dim-motion-on .dim-reveal-zoom,
	.dim-motion-on .dim-reveal-blur {
		animation: linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 32%;
	}
	.dim-motion-on .dim-reveal       { animation-name: dim-in-up; }
	.dim-motion-on .dim-reveal-left  { animation-name: dim-in-left; }
	.dim-motion-on .dim-reveal-right { animation-name: dim-in-right; }
	.dim-motion-on .dim-reveal-zoom  { animation-name: dim-in-zoom; }
	.dim-motion-on .dim-reveal-blur  { animation-name: dim-in-blur; }

	/* ทยอยขึ้นทีละชิ้น — ใส่คลาสนี้ที่ตัวแม่ ลูกจะไล่กันขึ้น */
	.dim-motion-on .dim-stagger > * {
		animation: dim-in-up linear both;
		animation-timeline: view();
	}
	.dim-motion-on .dim-stagger > *:nth-child(1)   { animation-range: entry 0%  cover 26%; }
	.dim-motion-on .dim-stagger > *:nth-child(2)   { animation-range: entry 4%  cover 30%; }
	.dim-motion-on .dim-stagger > *:nth-child(3)   { animation-range: entry 8%  cover 34%; }
	.dim-motion-on .dim-stagger > *:nth-child(4)   { animation-range: entry 12% cover 38%; }
	.dim-motion-on .dim-stagger > *:nth-child(5)   { animation-range: entry 16% cover 42%; }
	.dim-motion-on .dim-stagger > *:nth-child(n+6) { animation-range: entry 20% cover 46%; }

	/* โหมดอัตโนมัติ: ทุก section ปรากฏเองโดยไม่ต้องใส่คลาส */
	.dim-motion-on.dim-auto-reveal main :is(.entry-content,.wp-block-post-content,main) > .wp-block-group:not(:first-child),
	.dim-motion-on.dim-auto-reveal main :is(.entry-content,.wp-block-post-content,main) > .wp-block-columns,
	.dim-motion-on.dim-auto-reveal main :is(.entry-content,.wp-block-post-content,main) > .wp-block-heading {
		animation: dim-in-up linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 30%;
	}
	.dim-motion-on.dim-auto-reveal main .wp-block-columns > .wp-block-column {
		animation: dim-in-up linear both;
		animation-timeline: view();
	}
	.dim-motion-on.dim-auto-reveal main .wp-block-columns > .wp-block-column:nth-child(1) { animation-range: entry 0%  cover 26%; }
	.dim-motion-on.dim-auto-reveal main .wp-block-columns > .wp-block-column:nth-child(2) { animation-range: entry 5%  cover 31%; }
	.dim-motion-on.dim-auto-reveal main .wp-block-columns > .wp-block-column:nth-child(3) { animation-range: entry 10% cover 36%; }
}

/* ============================================================
   2. ฮีโร่ — ไล่ขึ้นทีละบรรทัดตอนเปิดหน้า (ทำงานทุกเบราว์เซอร์)
   ============================================================ */
@keyframes dim-hero-in {
	from { opacity: 0; transform: translateY(calc(var(--dim-dist) * .8)); filter: blur(calc(var(--dim-blur) * .5)); }
	to   { opacity: 1; transform: none; filter: blur(0); }
}
.dim-motion-on.dim-hero-anim main :is(.entry-content,.wp-block-post-content,main) > .wp-block-group:first-child:not(.dim-slider) .wp-block-column > * {
	animation: dim-hero-in var(--dim-dur) var(--dim-ease) both;
}
.dim-motion-on.dim-hero-anim main :is(.entry-content,.wp-block-post-content,main) > .wp-block-group:first-child:not(.dim-slider) .wp-block-column > *:nth-child(1) { animation-delay: 60ms; }
.dim-motion-on.dim-hero-anim main :is(.entry-content,.wp-block-post-content,main) > .wp-block-group:first-child:not(.dim-slider) .wp-block-column > *:nth-child(2) { animation-delay: 160ms; }
.dim-motion-on.dim-hero-anim main :is(.entry-content,.wp-block-post-content,main) > .wp-block-group:first-child:not(.dim-slider) .wp-block-column > *:nth-child(3) { animation-delay: 260ms; }
.dim-motion-on.dim-hero-anim main :is(.entry-content,.wp-block-post-content,main) > .wp-block-group:first-child:not(.dim-slider) .wp-block-column > *:nth-child(4) { animation-delay: 360ms; }

/* พื้นหลังไล่สีขยับช้า ๆ ให้ฮีโร่ไม่นิ่งสนิท */
@keyframes dim-gradient-drift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.dim-motion-on.dim-gradient-move main :is(.entry-content,.wp-block-post-content,main) > .wp-block-group:first-child.has-background:not(.dim-slider) {
	/* !important จำเป็น เพราะ WordPress ตั้งพื้นหลังด้วย shorthand `background`
	   ซึ่งรีเซ็ต background-size กลับเป็น auto ทำให้ไม่มีพื้นที่ให้ไล่สีเลื่อน */
	background-size: 200% 200% !important;
	animation: dim-gradient-drift 18s ease-in-out infinite;
}

/* พารัลแลกซ์ — เนื้อหาในแบนเนอร์เลื่อนช้ากว่าหน้าจอ ทำให้รู้สึกมีความลึก */
@supports (animation-timeline: view()) {
	@keyframes dim-parallax {
		from { transform: translateY(0); opacity: 1; }
		to   { transform: translateY(calc(var(--dim-dist) * 1.8)); opacity: .25; }
	}
	.dim-motion-on.dim-parallax main :is(.entry-content,.wp-block-post-content,main) > .wp-block-group:first-child:not(.dim-slider) .wp-block-columns {
		animation: dim-parallax linear both;
		animation-timeline: view();
		animation-range: exit 0% exit 100%;
	}
}

/* หัวข้อ section — มีเส้นสีแบรนด์วาดออกมาตอนเลื่อนถึง */
@supports (animation-timeline: view()) {
	@keyframes dim-underline { from { width: 0; } to { width: 64px; } }
	.dim-motion-on.dim-heading-line main h2.wp-block-heading::after {
		content: "";
		display: block;
		height: 4px;
		margin-top: 14px;
		border-radius: 99px;
		background: var(--wp--preset--color--accent);
		animation: dim-underline linear both;
		animation-timeline: view();
		animation-range: entry 10% cover 34%;
	}
	/* หัวข้อบนพื้นเข้มใช้สีอ่อนแทน จะได้เห็นเส้น */
	.dim-motion-on.dim-heading-line main .has-navy-background-color h2.wp-block-heading::after,
	.dim-motion-on.dim-heading-line main .has-brand-gradient-background h2.wp-block-heading::after {
		background: #ffffff;
	}
}

/* ============================================================
   3. Hover — ปุ่ม เมนู การ์ด รูปภาพ
   ============================================================ */
.dim-motion-on .wp-element-button {
	transition: transform var(--dim-dur-fast) var(--dim-ease-out),
	            box-shadow var(--dim-dur-fast) var(--dim-ease-out),
	            background-color var(--dim-dur-fast) ease,
	            color var(--dim-dur-fast) ease;
}
.dim-motion-on .wp-element-button:hover {
	/* --dim-btn-lift ตั้งได้จากหน้า ลักษณะ → การเคลื่อนไหว ถ้าไม่ได้ตั้งจะใช้ค่ารวมของธีม */
	transform: translateY(calc(var(--dim-btn-lift, var(--dim-lift)) * -1));
	box-shadow: 0 calc(var(--dim-btn-lift, var(--dim-lift)) * 2) calc(var(--dim-btn-lift, var(--dim-lift)) * 4) rgba(4,25,120,.28);
}
.dim-motion-on .wp-element-button:active { transform: translateY(0); }

/* การ์ด (กลุ่มที่มีเส้นขอบ) ยกขึ้นพร้อมเงา */
.dim-motion-on.dim-hover-cards .wp-block-column > .wp-block-group.has-border-color {
	transition: transform var(--dim-dur-fast) var(--dim-ease-out),
	            box-shadow var(--dim-dur-fast) var(--dim-ease-out),
	            border-color var(--dim-dur-fast) ease;
}
.dim-motion-on.dim-hover-cards .wp-block-column > .wp-block-group.has-border-color:hover {
	transform: translateY(calc(var(--dim-lift) * -1));
	box-shadow: 0 calc(var(--dim-lift) * 3) calc(var(--dim-lift) * 6) rgba(4,25,120,.16);
	border-color: var(--wp--preset--color--accent) !important;
}

/* เมนู — ขีดเส้นใต้วิ่งออกจากกลาง */
.dim-motion-on .wp-block-navigation-item__content {
	position: relative;
	transition: color var(--dim-dur-fast) ease;
}
.dim-motion-on .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%; right: 50%; bottom: -6px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transition: left var(--dim-dur-fast) var(--dim-ease-out), right var(--dim-dur-fast) var(--dim-ease-out);
}
.dim-motion-on .wp-block-navigation-item__content:hover::after { left: 0; right: 0; }

/* รูปภาพ — ค่อย ๆ ซูมเข้าในกรอบ */
.dim-motion-on.dim-hover-cards figure.wp-block-post-featured-image,
.dim-motion-on.dim-hover-cards .wp-block-image { overflow: hidden; }
.dim-motion-on.dim-hover-cards figure.wp-block-post-featured-image img,
.dim-motion-on.dim-hover-cards .wp-block-image img { transition: transform 700ms var(--dim-ease-out); }
.dim-motion-on.dim-hover-cards figure.wp-block-post-featured-image:hover img,
.dim-motion-on.dim-hover-cards .wp-block-image:hover img { transform: scale(1.06); }

.dim-motion-on a:not(.wp-element-button) { transition: color var(--dim-dur-fast) ease, opacity var(--dim-dur-fast) ease; }

/* ============================================================
   4. หัวเว็บติดบนจอ + เงาบางตอนเลื่อนลง
   ============================================================ */
/* ไม่กำหนดสีพื้นหลังตรงนี้ เพื่อให้สีที่เลือกไว้ใน ลักษณะ → แก้ไข มีผลจริง
   ถ้าอยากได้หัวเว็บแบบกระจกฝ้า ให้เลือกสีพื้นหลังแบบกึ่งโปร่งใส (ปรับ Alpha)
   ในตัวเลือกสีของบล็อก แล้ว backdrop-filter ด้านล่างจะเบลอฉากหลังให้เอง */
.dim-motion-on.dim-sticky-header header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(180%) blur(10px);
	transition: box-shadow var(--dim-dur-fast) ease;
}
/* ── เผื่อที่ให้แถบเครื่องมือของ WordPress ตอนล็อกอินอยู่ ──
   แถบนั้นเป็น position:fixed ที่ขอบบน ถ้าหัวเว็บ top:0 เหมือนกันจะซ้อนทับกัน
   ผู้เข้าชมทั่วไปไม่มีแถบนี้ จึงไม่ได้รับผลกระทบ */
.admin-bar .dim-motion-on.dim-sticky-header header.wp-block-template-part,
body.admin-bar.dim-motion-on.dim-sticky-header header.wp-block-template-part {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar.dim-motion-on.dim-sticky-header header.wp-block-template-part {
		top: 46px;
	}
}
@media screen and (max-width: 600px) {
	/* จอเล็ก แถบแอดมินเลื่อนหายไปกับหน้า ไม่ต้องเผื่อที่ */
	body.admin-bar.dim-motion-on.dim-sticky-header header.wp-block-template-part {
		top: 0;
	}
}

@supports (animation-timeline: scroll()) {
	@keyframes dim-header-shadow {
		from { box-shadow: 0 0 0 rgba(4,25,120,0); }
		to   { box-shadow: 0 6px 24px rgba(4,25,120,.12); }
	}
	.dim-motion-on.dim-sticky-header header.wp-block-template-part {
		animation: dim-header-shadow linear both;
		animation-timeline: scroll();
		animation-range: 0 120px;
	}
}

/* ============================================================
   4b. เลย์เอาต์หัวเว็บ — โลโก้ซ้าย เมนูกลาง สวิตช์ขวา
   ============================================================ */

/* เมนูตรงกลาง: ยืดเต็มพื้นที่ที่เหลือแล้วจัดกึ่งกลาง
   ทำให้เมนูอยู่กลางจริงไม่ว่าโลโก้กับสวิตช์จะกว้างไม่เท่ากัน */
header .dim-nav-center {
	flex: 1 1 auto;
	justify-content: center;
}

/* สวิตช์สลับภาษา — แคปซูลมีขอบ แบ่งเป็น 2 ช่อง */
header .dim-lang-toggle {
	flex: 0 0 auto;
	gap: 0 !important;
	padding: 3px;
	border: 1px solid rgba(255,255,255,.45);
	border-radius: 999px;
}
header .dim-lang-toggle .wp-element-button {
	padding: 0.35rem 0.85rem !important;
	line-height: 1.2;
	min-width: 42px;
	text-align: center;
}

/* จอแคบ: เมนูตกลงมาอยู่บรรทัดล่างและยังอยู่กึ่งกลาง */
@media (max-width: 900px) {
	header .dim-nav-center {
		flex-basis: 100%;
		order: 3;
	}
}

/* ============================================================
   5. เปลี่ยนหน้าแบบต่อเนื่อง (View Transitions)
   ============================================================ */
@keyframes dim-vt-out { to   { opacity: 0; transform: translateY(-8px); } }
@keyframes dim-vt-in  { from { opacity: 0; transform: translateY(12px); } }
::view-transition-old(root) { animation: dim-vt-out 220ms var(--dim-ease) both; }
::view-transition-new(root) { animation: dim-vt-in  320ms var(--dim-ease) both; }

/* ============================================================
   6. คลาสเสริม — พิมพ์ในช่อง "คลาส CSS เพิ่มเติม" ของบล็อกได้เลย
   ============================================================ */

/* แถบโลโก้เลื่อนวนไม่รู้จบ (หยุดเมื่อเอาเมาส์ชี้) */
@keyframes dim-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dim-motion-on .dim-marquee { overflow: hidden; }
.dim-motion-on .dim-marquee > * {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: max-content;
	animation: dim-marquee 32s linear infinite;
}
.dim-motion-on .dim-marquee:hover > * { animation-play-state: paused; }

/* เต้นเบา ๆ เรียกสายตา — ใช้กับปุ่มหลักปุ่มเดียวพอ */
@keyframes dim-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.dim-motion-on .dim-pulse { animation: dim-pulse 2.4s var(--dim-ease) infinite; }

/* ลอยขึ้นลงช้า ๆ */
@keyframes dim-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.dim-motion-on .dim-float { animation: dim-float 5s ease-in-out infinite; }

/* ขอบเรืองแสงวิ่งรอบกล่อง — ใช้กับกล่องไฮไลต์ */
@property --dim-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes dim-spin { to { --dim-angle: 360deg; } }
.dim-motion-on .dim-glow { position: relative; isolation: isolate; }
.dim-motion-on .dim-glow::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: conic-gradient(from var(--dim-angle), transparent 62%, var(--wp--preset--color--accent), transparent);
	animation: dim-spin 6s linear infinite;
	z-index: -1;
}

/* ปิดการเคลื่อนไหวเฉพาะบล็อกนี้ */
.dim-no-motion, .dim-no-motion * { animation: none !important; transition: none !important; }

/* ============================================================
   7. สไลด์ (Carousel) — CSS ล้วน ไม่ใช้ JavaScript
   ใส่คลาส dim-slider ที่บล็อกกลุ่มที่มีคอลัมน์เป็นสไลด์ข้างใน
   • เลื่อน/ปัดได้ทุกเบราว์เซอร์ (scroll-snap)
   • ลูกศรและจุดบอกตำแหน่ง ใช้ ::scroll-button / ::scroll-marker
     (Chrome 135+ / Edge) เบราว์เซอร์อื่นยังปัดเลื่อนได้ตามปกติ
   ============================================================ */
.dim-slider {
	position: relative;
}

.dim-slider > .wp-block-columns,
.dim-slider .dim-slider-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* ไม่ใส่ scroll-behavior: smooth ตรงนี้ — ทำให้เลื่อนด้วยลูกศรไปได้แค่สไลด์เดียวแล้วค้าง
	   ปุ่ม ::scroll-button ของเบราว์เซอร์เลื่อนแบบนุ่มนวลให้เองอยู่แล้ว */
	scrollbar-width: none;
	anchor-name: --dim-slider-track;
}
.dim-slider > .wp-block-columns::-webkit-scrollbar,
.dim-slider .dim-slider-track::-webkit-scrollbar { display: none; }

/* แต่ละสไลด์กว้างเต็มกรอบและหยุดพอดีตำแหน่ง */
.dim-slider > .wp-block-columns > .wp-block-column,
.dim-slider .dim-slider-track > * {
	flex: 0 0 100% !important;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* ── กดเมาส์ค้างแล้วลาก (assets/js/slider-drag.js) ── */
@media (hover: hover) and (pointer: fine) {
	.dim-slider > .wp-block-columns,
	.dim-slider .dim-slider-track { cursor: grab; }
}
.dim-slider .dim-dragging,
.dim-slider .dim-dragging * {
	cursor: grabbing !important;
	user-select: none;
}

/* ── ลูกศรซ้าย-ขวา ── */
@supports selector(::scroll-button(right)) {
	.dim-slider > .wp-block-columns::scroll-button(*),
	.dim-slider .dim-slider-track::scroll-button(*) {
		position: fixed;
		position-anchor: --dim-slider-track;
		position-area: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 999px;
		background: rgba(255,255,255,.92);
		color: var(--wp--preset--color--navy);
		font-size: 18px;
		cursor: pointer;
		box-shadow: 0 4px 16px rgba(4,25,120,.14);
		transition: background-color var(--dim-dur-fast) ease, transform var(--dim-dur-fast) ease;
	}
	.dim-slider > .wp-block-columns::scroll-button(*):hover,
	.dim-slider .dim-slider-track::scroll-button(*):hover {
		background: var(--wp--preset--color--accent);
		color: #fff;
		transform: scale(1.08);
	}
	/* ปุ่มจะจางลงเองเมื่อเลื่อนสุดทางแล้ว */
	.dim-slider > .wp-block-columns::scroll-button(*):disabled,
	.dim-slider .dim-slider-track::scroll-button(*):disabled {
		opacity: .35;
		cursor: default;
	}
	.dim-slider > .wp-block-columns::scroll-button(left),
	.dim-slider .dim-slider-track::scroll-button(left) {
		content: "‹";
		position-area: center left;
		margin-left: 8px;
	}
	.dim-slider > .wp-block-columns::scroll-button(right),
	.dim-slider .dim-slider-track::scroll-button(right) {
		content: "›";
		position-area: center right;
		margin-right: 8px;
	}
}

/* ── จุดบอกตำแหน่งด้านล่าง ── */
@supports selector(::scroll-marker) {
	.dim-slider > .wp-block-columns,
	.dim-slider .dim-slider-track {
		scroll-marker-group: after;
	}
	.dim-slider > .wp-block-columns::scroll-marker-group,
	.dim-slider .dim-slider-track::scroll-marker-group {
		display: flex;
		justify-content: center;
		gap: 10px;
		padding-top: 22px;
	}
	.dim-slider > .wp-block-columns > .wp-block-column::scroll-marker,
	.dim-slider .dim-slider-track > *::scroll-marker {
		content: "";
		width: 9px;
		height: 9px;
		border-radius: 999px;
		background: var(--wp--preset--color--ink);
		cursor: pointer;
		transition: background-color var(--dim-dur-fast) ease, width var(--dim-dur-fast) ease;
	}
	.dim-slider > .wp-block-columns > .wp-block-column::scroll-marker:target-current,
	.dim-slider .dim-slider-track > *::scroll-marker:target-current {
		background: var(--wp--preset--color--accent);
		width: 26px;
	}
}

/* รูปในสไลด์ — บังคับสัดส่วนเท่ากันทุกใบ ไม่งั้นรูปแนวตั้งจะดันสไลด์สูงผิดปกติ */
.dim-slider figure.wp-block-image { margin: 0; }
.dim-slider figure.wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
/* รูปกราฟ/โลโก้ที่มีพื้นหลังขาว ไม่ควรถูกครอบตัด */
.dim-slider figure.wp-block-image img.dim-fit-contain {
	object-fit: contain;
	background: var(--wp--preset--color--surface);
}

/* ============================================================
   8. เว็บหน้าเดียว — เมนูวิ่งไปหาแต่ละส่วน
   ============================================================ */

/* เลื่อนแบบนุ่มนวล (ระบบจะข้ามให้เองถ้าผู้ใช้ตั้งค่าลดการเคลื่อนไหว) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* เผื่อที่ให้แถบเมนูที่ติดอยู่บนจอ ไม่งั้นหัวข้อของแต่ละส่วนจะถูกบัง
   ค่า 118px = ความสูงแถบเมนู 96px + ระยะหายใจ 22px */
main :is(section, .wp-block-group)[id] {
	scroll-margin-top: 108px;
}
.admin-bar main :is(section, .wp-block-group)[id] {
	scroll-margin-top: 140px; /* บวกแถบเครื่องมือ WordPress อีก 32px */
}
@media screen and (max-width: 782px) {
	.admin-bar main :is(section, .wp-block-group)[id] { scroll-margin-top: 154px; }
}
@media screen and (max-width: 600px) {
	.admin-bar main :is(section, .wp-block-group)[id] { scroll-margin-top: 108px; }
}

/* ============================================================
   9. หน้าบทความ/กรณีศึกษา (dim-article)
   ============================================================ */
.dim-article p {
	text-align: justify;
	text-indent: 32px;
	text-justify: inter-word;
}
/* ย่อหน้านำ ไม่ต้องเยื้อง และตัวใหญ่กว่าเล็กน้อย */
.dim-article .dim-lead p,
.dim-article p.dim-lead {
	text-indent: 0;
	font-size: 1.15rem;
	line-height: 1.85;
}
/* กล่องคำพูดเน้น */
.dim-article .dim-callout p { text-indent: 0; }

.dim-article figure.wp-block-image { margin-block: 0; }
.dim-article figure.wp-block-image img {
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(4,25,120,.14);
	width: 100%;
	height: auto;
}
.dim-article figure.wp-block-image figcaption {
	text-align: center;
	font-size: .875rem;
	color: var(--wp--preset--color--muted);
	margin-top: 12px;
	text-indent: 0;
}

/* ป้ายคำสำคัญ */
.dim-chips .wp-block-button__link {
	pointer-events: none;
	font-size: .85rem;
	padding: .45rem 1rem;
}

/* ปุ่มลูกศรย้อนกลับ สำหรับหน้าที่ไม่มีแถบเมนู */
.dim-back a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--navy);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(4,25,120,.08);
	transition: background-color var(--dim-dur-fast) ease, color var(--dim-dur-fast) ease, transform var(--dim-dur-fast) ease;
}
.dim-back a:hover {
	background: var(--wp--preset--color--navy);
	color: #fff;
	transform: translateX(-3px);
	text-decoration: none;
}

/* แถวหัวบทความ: ปุ่มย้อนกลับกับโลโก้อยู่บรรทัดเดียวกัน */
.dim-head-row { align-items: center; }
.dim-head-row .dim-back { margin: 0; }
.dim-head-row figure { margin: 0; }

/* ============================================================
   10. แกลเลอรีแบบก่ออิฐ (masonry) — คอลัมน์ CSS ล้วน
   ============================================================ */
.dim-masonry {
	/* จำกัดความกว้างเอง เพราะกล่องแม่เป็นแบบเต็มจอ ถ้าไม่จำกัดคอลัมน์จะกว้างเกินไป */
	max-width: 1200px;
	margin-inline: auto;
	columns: 3;
	column-gap: 18px;
}
.dim-masonry > * {
	break-inside: avoid;
	margin: 0 0 18px !important;
}
.dim-masonry figure.wp-block-image { margin: 0 0 18px !important; }
.dim-masonry img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(4,25,120,.10);
	transition: transform var(--dim-dur-fast) var(--dim-ease-out), box-shadow var(--dim-dur-fast) ease;
}
.dim-masonry figure.wp-block-image:hover img {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(4,25,120,.18);
}
@media (max-width: 900px) { .dim-masonry { columns: 2; } }
@media (max-width: 600px) { .dim-masonry { columns: 1; } }

/* ============================================================
   11. แกลเลอรีงานอีเวนต์ (แบบเว็บเดิม)
   ซ้าย: รูปแนวตั้งสูง · กลาง: รูปเตี้ยเรียงถี่ · ขวา: โลโก้จัดกึ่งกลาง
   ============================================================ */
.dim-aibox {
	max-width: 1200px;
	margin-inline: auto;
}
.dim-aibox .wp-block-column { display: flex; flex-direction: column; gap: 6px; }
.dim-aibox figure.wp-block-image { margin: 0 !important; }
.dim-aibox figure.wp-block-image img {
	display: block;
	width: 100%;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}
.dim-aibox .dim-col-tall  img { height: 400px; }
.dim-aibox .dim-col-short img { height: 240px; }

/* คอลัมน์โลโก้ */
.dim-aibox .dim-col-logo {
	justify-content: center;
	align-items: center;
	background: var(--wp--preset--color--surface);
}
.dim-aibox .dim-col-logo figure.wp-block-image img {
	height: auto;
	object-fit: contain;
	max-width: 78%;
	margin-inline: auto;
}

@media (max-width: 900px) {
	.dim-aibox .wp-block-columns { flex-wrap: wrap !important; }
	.dim-aibox .wp-block-column { flex-basis: 50% !important; }
	.dim-aibox .dim-col-logo { flex-basis: 100% !important; padding: 32px 0; }
	.dim-aibox .dim-col-tall img { height: 320px; }
	.dim-aibox .dim-col-short img { height: 200px; }
}
@media (max-width: 600px) {
	.dim-aibox .wp-block-column { flex-basis: 100% !important; }
}

/* แถวหัวข้อส่วน: โลโก้พาร์ตเนอร์อยู่บรรทัดเดียวกับป้ายหมวด */
.dim-eyebrow-row { align-items: center; }
.dim-eyebrow-row > * { margin: 0 !important; }
.dim-eyebrow-row figure.wp-block-image { margin: 0 !important; line-height: 0; }

/* โลโก้พาร์ตเนอร์ในหัวข้อส่วน — จัดกึ่งกลางคอลัมน์ */
.dim-service-head > .wp-block-column:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
}
.dim-service-head > .wp-block-column:first-child figure.wp-block-image {
	margin-inline: auto !important;
}

/* หัวข้อส่วนบริการ — ให้กลุ่มโลโก้+ข้อความอยู่กึ่งกลางจอ ไม่กางเต็มความกว้าง
   ต้องใช้ !important เพราะคลาส alignwide ของ WordPress ตั้ง max-width ไว้ด้วย specificity สูงกว่า */
.wp-block-columns.dim-service-head {
	max-width: 940px !important;
	margin-inline: auto !important;
}

/* ============================================================
   12. ตารางโลโก้แบรนด์ในการ์ดผลิตภัณฑ์
   ============================================================ */
.dim-brand-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 10px;
	align-items: center;
	margin-top: 4px;
}
.dim-brand-grid figure.wp-block-image { margin: 0 !important; }
.dim-brand-grid img {
	display: block;
	width: 100%;
	height: 38px;
	object-fit: contain;
	filter: saturate(1);
	transition: transform var(--dim-dur-fast) var(--dim-ease-out);
}
.dim-brand-grid figure.wp-block-image:hover img { transform: scale(1.08); }

@media (max-width: 600px) {
	.dim-brand-grid { grid-template-columns: repeat(4, 1fr); }
	.dim-brand-grid img { height: 32px; }
}

/* ============================================================
   13. พาเนลแบรนด์ผลิตภัณฑ์ — เต็มความกว้าง เรียงลงมาเป็นแถว
   ============================================================ */
.dim-brand-panel {
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 2px 12px rgba(4,25,120,.06);
	border: 1px solid var(--wp--preset--color--line);
}
.dim-brand-panel > h3 {
	text-align: center;
	color: var(--wp--preset--color--blue);
	margin-bottom: 1.7rem !important;
}
/* ปิดเส้นใต้หัวข้ออัตโนมัติเฉพาะในพาเนลนี้ ไม่ให้ตีกับแถวโลโก้ */
.dim-brand-panel > h3::after { display: none !important; }

.dim-brand-row {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 26px 44px;
}
.dim-brand-row figure.wp-block-image { margin: 0 !important; }
.dim-brand-row img {
	display: block;
	width: auto;
	height: 55px;
	max-width: 180px;
	object-fit: contain;
	transition: transform var(--dim-dur-fast) var(--dim-ease-out);
}
.dim-brand-row figure.wp-block-image:hover img { transform: scale(1.1); }

@media (max-width: 782px) {
	.dim-brand-row { gap: 20px 28px; }
	.dim-brand-row img { height: 43px; max-width: 132px; }
}
@media (max-width: 480px) {
	.dim-brand-row img { height: 36px; max-width: 110px; }
}

/* แกลเลอรีรูปอาคาร/โครงการในพาเนลลูกค้า */
.dim-photo-grid {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}
.dim-photo-grid figure.wp-block-image { margin: 0 !important; }
.dim-photo-grid img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	transition: transform var(--dim-dur-fast) var(--dim-ease-out);
}
.dim-photo-grid figure.wp-block-image:hover img { transform: scale(1.05); }

@media (max-width: 900px) { .dim-photo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .dim-photo-grid { grid-template-columns: repeat(3, 1fr); } }

/* ภาพเปิดของพาเนล Data Group — เด่นตรงกลาง */
.dim-photo-lead figure.wp-block-image,
figure.wp-block-image.dim-photo-lead {
	margin: 0 auto 22px !important;
	max-width: 620px;
}
figure.wp-block-image.dim-photo-lead img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(4,25,120,.14);
}

/* ============================================================
   14. สไลด์รูปอาคาร/โครงการ — ใบใหญ่ซ้าย ใบเล็กซ้อนขวา
   ============================================================ */
.dim-prop-slider .wp-block-columns { gap: 0; }
.dim-prop-slider .dim-prop-inner { gap: 16px !important; padding-inline: 4px; }
.dim-prop-slider figure.wp-block-image { margin: 0 !important; }
.dim-prop-slider .dim-prop-small { gap: 16px !important; display: flex; flex-direction: column; }

.dim-prop-slider img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 12px;
}
.dim-prop-slider .dim-prop-big img   { height: 400px; }
.dim-prop-slider .dim-prop-small img { height: 192px; }

/* โลโก้ไม่ควรถูกครอบตัด */
.dim-prop-slider img.dim-fit-contain {
	object-fit: contain;
	background: var(--wp--preset--color--base);
}

@media (max-width: 782px) {
	.dim-prop-slider .dim-prop-big img   { height: 240px; }
	.dim-prop-slider .dim-prop-small img { height: 112px; }
}

/* สไลด์ในพาเนลต้องกว้างเต็มพาเนล ไม่ถูกบีบด้วย contentSize ของ layout แบบ constrained */
.dim-brand-panel .dim-prop-slider,
.dim-brand-panel .dim-prop-slider > .wp-block-columns {
	max-width: 100% !important;
	width: 100%;
}

/* ============================================================
   15. ส่วนเกี่ยวกับเรา — โลโก้พื้นน้ำเงินซ้าย เนื้อหาขวา
   ============================================================ */
.dim-about-panel {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	box-shadow: 0 2px 14px rgba(4,25,120,.06);
}
.dim-about-logo {
	background: var(--wp--preset--color--navy);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 480px;
	padding: 32px;
}
.dim-about-logo figure.wp-block-image { margin: 0 !important; width: 100%; }
.dim-about-logo img { width: 100%; max-width: 300px; height: auto; margin-inline: auto; display: block; }

.dim-about-head { text-align: center; }
.dim-about-head h3 {
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: .9rem !important;
}
.dim-about-head h3::after { display: none !important; }
.dim-about-head p {
	color: var(--wp--preset--color--muted);
	font-size: .95rem;
	line-height: 1.9;
}

.dim-about-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 38px 40px;
	margin-top: 34px;
}
.dim-about-item .dim-icon {
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--wp--preset--color--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.dim-about-item .dim-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.7; }
.dim-about-item p {
	color: var(--wp--preset--color--muted);
	font-size: .9rem;
	line-height: 1.95;
	margin: 0;
}

@media (max-width: 900px) {
	.dim-about-logo { min-height: 260px; }
	.dim-about-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* คอลัมน์ในพาเนลเกี่ยวกับเราต้องกว้างเต็มพาเนล ไม่ถูก contentSize บีบ */
.dim-about-panel > .wp-block-columns {
	max-width: 100% !important;
	width: 100%;
}

/* ============================================================
   ยกเว้นสไลด์ออกจากเอฟเฟกต์ "ปรากฏตอนเลื่อนถึง" ทั้งหมด
   สไลด์เลื่อนแนวนอน ไม่ได้เลื่อนตามหน้าจอ ถ้าโดนกฎนี้จับจะจางค้าง
   ============================================================ */
.dim-motion-on .dim-slider,
.dim-motion-on .dim-slider *,
.dim-motion-on .dim-slider *::before,
.dim-motion-on .dim-slider *::after {
	animation-name: none !important;
}
/* ยกเว้นแอนิเมชันของตัวสไลด์เองที่ยังต้องใช้ (marquee/pulse ที่ผู้ใช้ใส่เอง) */
.dim-motion-on .dim-slider .dim-marquee > *,
.dim-motion-on .dim-slider .dim-pulse,
.dim-motion-on .dim-slider .dim-float {
	animation-name: revert-layer !important;
}

/* ============================================================
   หัวข้อพับเก็บ (บล็อก Details + คลาส dim-acc)
   ปิดอยู่จะเห็นแค่ชื่อหัวข้อ กดแล้วกางเนื้อหาออก
   ปุ่ม "ซ่อน" ด้านล่าง = ปุ่มในบล็อกปุ่มที่ใส่คลาส dim-acc-close
   ============================================================ */
details.dim-acc {
	max-width: 100% !important;
	width: 100%;
	margin-top: 0;
	margin-bottom: 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	overflow: hidden;
}
details.dim-acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 22px;
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	transition: background-color .2s ease;
}
details.dim-acc > summary::-webkit-details-marker { display: none; }
details.dim-acc > summary::marker { content: ""; }
details.dim-acc > summary:hover { background: var(--wp--preset--color--surface); }
details.dim-acc > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}
/* ลูกศรชี้ลง หมุนขึ้นเมื่อกางออก */
details.dim-acc > summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .25s ease;
}
details.dim-acc[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
details.dim-acc[open] > summary { border-bottom: 1px solid var(--wp--preset--color--line); }

/* width:auto — สไลด์บางแบบตั้ง width:100% ไว้ ถ้าบวกระยะขอบข้างจะล้นกรอบ */
details.dim-acc > :not(summary) {
	width: auto !important;
	max-width: none !important;
	margin-left: 22px !important;
	margin-right: 22px !important;
}
details.dim-acc > :not(summary):nth-child(2) { margin-top: 20px; }
details.dim-acc > :last-child { margin-bottom: 20px; }
details.dim-acc[open] > :not(summary) { animation: dim-acc-in .3s ease both; }
@keyframes dim-acc-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	details.dim-acc[open] > :not(summary) { animation: none; }
}
.dim-acc .dim-acc-close { justify-content: center; }

@media (max-width: 600px) {
	details.dim-acc > summary { padding: 14px 16px; }
	details.dim-acc > :not(summary) { margin-left: 14px !important; margin-right: 14px !important; }
}

/* ============================================================
   สไลด์ผลงานแบบโมเสก (dim-work-slider) — เหมาะกับรูปแนวตั้ง
   ต่อสไลด์: รูปสูง 1 รูปซ้าย (dim-work-big) + ตาราง 2×2 ขวา (dim-work-grid)
   ============================================================ */
.dim-brand-panel .dim-work-slider,
.dim-brand-panel .dim-work-slider > .wp-block-columns {
	max-width: 100% !important;
	width: 100%;
}
.dim-work-slider .wp-block-columns { gap: 0; }
.dim-work-slider .dim-work-inner { gap: 14px !important; padding-inline: 4px; margin: 0; }
.dim-work-slider figure.wp-block-image { margin: 0 !important; overflow: hidden; border-radius: 12px; }
.dim-work-slider .dim-work-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 14px;
}
.dim-work-slider img {
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: center 30%;
	transition: transform .5s ease;
}
.dim-work-slider .dim-work-big img  { height: 440px; }
.dim-work-slider .dim-work-grid img { height: 213px; }
/* สไลด์สุดท้ายที่รูปไม่ครบ 4 — มี 2 รูปให้เรียงเต็มกว้างบน-ล่าง, มีรูปเดียวให้สูงเต็ม */
.dim-work-slider .dim-work-grid:has(> :last-child:nth-child(2)) { grid-template-columns: 1fr; }
.dim-work-slider .dim-work-grid:has(> :only-child) { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.dim-work-slider .dim-work-grid > :only-child img { height: 440px; }
.dim-work-slider figure:hover img { transform: scale(1.04); }

@media (max-width: 782px) {
	/* จอแคบ: รูปใหญ่ไว้บน ตาราง 2×2 ไว้ล่าง */
	.dim-work-slider .dim-work-inner { flex-direction: column; gap: 8px !important; }
	.dim-work-slider .dim-work-big,
	.dim-work-slider .dim-work-grid { flex-basis: auto !important; width: 100%; }
	.dim-work-slider .dim-work-big img  { height: 220px; }
	.dim-work-slider .dim-work-grid { gap: 8px; }
	.dim-work-slider .dim-work-grid img { height: 120px; }
	.dim-work-slider .dim-work-grid:has(> :last-child:nth-child(2)) { grid-template-columns: 1fr 1fr; }
	.dim-work-slider .dim-work-grid > :only-child img { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
	.dim-work-slider figure:hover img { transform: none; }
}

/* ============================================================
   ตัวอักษรในหัวข้อพับเก็บ dim-acc
   • ย่อหน้า: จำกัดความยาวบรรทัดให้อ่านสบาย
   • หัวเรื่องย่อย: h4 คลาส dim-acc-label
   • รายการแบบการ์ด: list แบบมีลำดับ คลาส dim-acc-cards
     (<strong> ต้นข้อ = หัวการ์ด ข้อความที่เหลือ = คำอธิบาย)
   ============================================================ */
details.dim-acc > p {
	max-width: 860px !important;
	color: #3d4558;
	line-height: 1.85;
	margin-bottom: 0;
}
details.dim-acc > p + p { margin-top: .9em; }

details.dim-acc > .dim-acc-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 26px !important;
	margin-bottom: 12px;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--wp--preset--color--blue);
}
details.dim-acc > .dim-acc-label::before {
	content: "";
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
}
/* ปิดเส้นใต้หัวข้ออัตโนมัติของธีม (ถ้ามี) */
details.dim-acc > .dim-acc-label::after { display: none !important; }

details.dim-acc > ol.dim-acc-cards {
	list-style: none;
	counter-reset: dim-card;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	padding: 0;
	margin-top: 4px;
	margin-bottom: 8px;
}
ol.dim-acc-cards > li {
	counter-increment: dim-card;
	position: relative;
	margin: 0;
	padding: 18px 18px 18px 64px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	font-size: .94rem;
	line-height: 1.75;
	color: #4a5263;
}
ol.dim-acc-cards > li::before {
	content: counter(dim-card);
	position: absolute;
	left: 18px;
	top: 18px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;
}
ol.dim-acc-cards > li > strong:first-child {
	display: block;
	margin-bottom: 6px;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--navy);
}

/* ระยะระหว่างเนื้อหาข้อความกับสไลด์ */
details.dim-acc > .dim-slider { margin-top: 22px !important; }

@media (max-width: 600px) {
	details.dim-acc > p { line-height: 1.8; }
	ol.dim-acc-cards > li { padding: 16px 16px 16px 58px; }
	ol.dim-acc-cards > li::before { left: 14px; top: 16px; width: 30px; height: 30px; }
}

/* บรรทัดวันที่/สถานที่ ใต้หัวข้อ — คลาส dim-acc-meta */
details.dim-acc > p.dim-acc-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--blue);
	font-size: .85rem;
	line-height: 1.6;
	margin-bottom: 4px !important;
}
details.dim-acc > p.dim-acc-meta + p { margin-top: 14px; }

/* การ์ด 3 คอลัมน์คงที่ (สำหรับรายการสั้น ๆ หลายข้อ) — เพิ่มคลาส dim-acc-cards-3 */
details.dim-acc > ol.dim-acc-cards-3 { grid-template-columns: repeat(3, 1fr); }
ol.dim-acc-cards-3 > li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 14px;
	padding-bottom: 14px;
	min-height: 72px;
}
ol.dim-acc-cards-3 > li::before { top: 50%; transform: translateY(-50%); }
ol.dim-acc-cards-3 > li > strong:first-child { margin-bottom: 2px; }
@media (max-width: 900px) { details.dim-acc > ol.dim-acc-cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { details.dim-acc > ol.dim-acc-cards-3 { grid-template-columns: 1fr; } }

/* การ์ดที่ต้องการเน้น — ใส่คลาส is-highlight ที่รายการนั้น */
ol.dim-acc-cards > li.is-highlight {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--base);
	box-shadow: 0 6px 18px rgba(4,25,120,.08);
}
ol.dim-acc-cards > li.is-highlight::before { background: var(--wp--preset--color--accent); }

/* คอลัมน์ข้อความกึ่งกลางกล่อง (กว้างสุด 860px) + ย่อหน้าบรรทัดแรก
   สไลด์และปุ่มยังเต็มความกว้างเหมือนเดิม */
details.dim-acc > p,
details.dim-acc > .dim-acc-label,
details.dim-acc > ol.dim-acc-cards {
	max-width: none !important;
	margin-left: max(22px, calc((100% - 860px) / 2)) !important;
	margin-right: max(22px, calc((100% - 860px) / 2)) !important;
}
details.dim-acc > p.dim-acc-meta { margin-right: 0 !important; }
details.dim-acc > p:not(.dim-acc-meta) { text-indent: 2.5em; }
@media (max-width: 600px) {
	details.dim-acc > p,
	details.dim-acc > .dim-acc-label,
	details.dim-acc > ol.dim-acc-cards {
		margin-left: 14px !important;
		margin-right: 14px !important;
	}
	details.dim-acc > p:not(.dim-acc-meta) { text-indent: 1.5em; }
}