/* ==========================================================================
   Songkhla Marathon — Design System
   Vibe: Ethereal Glass (deep OLED + mesh glow + hairlines) x Coastal Night Run
   ========================================================================== */

/* -------------------------------------------------------------- 1. TOKENS */
:root {
	/* ink ramp */
	--ink-950: #04060a;
	--ink-900: #070a10;
	--ink-850: #0b0f16;
	--ink-800: #101620;
	--ink-700: #18202c;
	--ink-600: #222c3a;

	/* brand — ยึดตาม Elementor Kit เดิมของลูกค้า */
	--brand: #fcf305;       /* เหลืองแบรนด์ (kit 43f9dce) */
	--brand-deep: #d9cf00;
	--lime: #d0f700;        /* kit primary */
	--cyan: #04b2dc;        /* kit fe0c6ca */
	--cyan-deep: #0287a8;

	/* text */
	--text: #eaf0f7;
	--text-dim: #a7b4c4;
	--text-mute: #6d7a8a;

	/* surfaces */
	--hairline: rgba(255, 255, 255, 0.10);
	--hairline-2: rgba(255, 255, 255, 0.18);
	--glass: rgba(255, 255, 255, 0.045);
	--glass-2: rgba(255, 255, 255, 0.08);
	--veil: rgba(4, 6, 10, 0.72);

	/* geometry */
	--r-xl: 2rem;
	--r-lg: 1.5rem;
	--r-md: 1.125rem;
	--r-sm: 0.75rem;
	--r-pill: 999px;

	/* elevation — ambient, diffuse, never harsh */
	--lift-1: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px -32px rgba(0, 0, 0, 0.9);
	--lift-2: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 48px 120px -48px rgba(0, 0, 0, 0.95);

	/* motion — spring-ish, never linear */
	--ease: cubic-bezier(0.32, 0.72, 0, 1);
	--ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
	--t-fast: 260ms var(--ease);
	--t: 520ms var(--ease);
	--t-slow: 820ms var(--ease);

	/* rhythm */
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--shell: 1280px;
	/* ความสูงจริงของแถบ nav — site.js วัดแล้วอัปเดต (ค่าตั้งต้นเผื่อไว้สูงกว่านั้นเล็กน้อย
	   เพื่อไม่ให้เห็นแถบสีค้างก่อนสคริปต์ทำงาน) ใช้ดัน hero ขึ้นไปชิดขอบบน */
	--skm-header-h: 7rem;
	/* ระยะห่างบน-ล่างของแต่ละ Section (ลดลง 50% ตามที่ผู้ขอ — เดิม 4.5rem/11vw/10rem)
	   ช่องว่างระหว่าง Section = padding ล่างของอันบน + padding บนของอันล่าง จึงลดลงครึ่งหนึ่งพร้อมกัน */
	--section-y: clamp(2.25rem, 5.5vw, 5rem);

	/* type */
	/* ฟอนต์ไทย = IBM Plex Sans Thai (ไฟล์ในธีม + ผูกผ่าน unicode-range ใน skm-fonts-thai.css)
	   Anton อยู่หน้าสุดเพื่อคุมตัวอักษรละตินของคำใหญ่ — กลิฟไทยในบริบทเดียวกันจะตกมาที่ Plex */
	--font-display: "Anton", "IBM Plex Sans Thai", system-ui, sans-serif;
	--font-head: "IBM Plex Sans Thai", system-ui, sans-serif;
	--font-body: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-mega: clamp(3.25rem, 12vw, 9.5rem);
	--fs-h1: clamp(2.25rem, 6vw, 4.75rem);
	--fs-h2: clamp(1.75rem, 4.2vw, 3.25rem);
	--fs-h3: clamp(1.25rem, 2.4vw, 1.75rem);
	--fs-body: clamp(1rem, 1.05vw, 1.0625rem);
	--fs-small: 0.875rem;
	--fs-eyebrow: 0.6875rem;
}

/* ---------------------------------------------------------------- 2. RESET */
*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background: var(--ink-950);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.75;
	letter-spacing: 0.005em;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* mesh glow + grain: ยึดติดหน้าจอ ไม่ผูกกับ container ที่เลื่อน */
.skm-ambient {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(1100px 620px at 12% -8%, rgba(4, 178, 220, 0.20), transparent 62%),
		radial-gradient(900px 560px at 92% 6%, rgba(252, 243, 5, 0.10), transparent 60%),
		radial-gradient(1000px 700px at 50% 108%, rgba(208, 247, 0, 0.07), transparent 62%);
}

.skm-grain {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--brand); color: var(--ink-950); }

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.skip-link:focus {
	position: fixed; top: 1rem; left: 1rem; z-index: 200;
	width: auto; height: auto; clip: auto; margin: 0;
	padding: 0.75rem 1.25rem;
	background: var(--brand); color: var(--ink-950);
	border-radius: var(--r-pill); font-weight: 600;
}

/* --------------------------------------------------------------- 3. TYPE */
h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1.2em; text-wrap: pretty; }

.skm-mega {
	font-family: var(--font-display);
	font-size: var(--fs-mega);
	font-weight: 400;
	line-height: 0.86;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0;
	text-wrap: nowrap;
}

.skm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.85rem 0.4rem 0.7rem;
	border: 1px solid var(--hairline-2);
	border-radius: var(--r-pill);
	background: var(--glass);
	font-family: var(--font-head);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-dim);
	line-height: 1;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
}

.skm-eyebrow::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 0 12px 2px rgba(252, 243, 5, 0.55);
}

.skm-lede {
	font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
	color: var(--text-dim);
	line-height: 1.7;
	max-width: 62ch;
}

.skm-accent { color: var(--brand); }
.skm-cyan { color: var(--cyan); }

/* ------------------------------------------------------------- 4. LAYOUT */
.skm-wrap {
	position: relative;
	z-index: 2;
}

.skm-shell {
	width: min(var(--shell), 100% - (var(--gutter) * 2));
	margin-inline: auto;
}

.skm-section {
	position: relative;
	padding-block: var(--section-y);
	/* nav เป็นแถบลอย (sticky) — เว้ากดลิงก์ #sponsors / #videos ฯลฯ
	   หัวเรื่องจะไม่ถูก nav ทับ */
	scroll-margin-top: calc(var(--skm-header-h) + 0.5rem);
}

.skm-section--tight { padding-block: clamp(1.5rem, 3.5vw, 3rem); }

.skm-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	max-width: 48rem;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.skm-head--center { align-items: center; text-align: center; margin-inline: auto; }

/* --------------------------------------------------- 5. DOUBLE-BEZEL CARD */
.skm-bezel {
	padding: 0.5rem;
	border-radius: calc(var(--r-xl) + 0.5rem);
	background: var(--glass);
	border: 1px solid var(--hairline);
}

.skm-bezel__core {
	border-radius: var(--r-xl);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
	border: 1px solid var(--hairline);
	box-shadow: var(--lift-1);
	overflow: hidden;
	height: 100%;
}

/* ---------------------------------------------------------------- 6. CTA */
.skm-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.95rem 1rem 0.95rem 1.6rem;
	border-radius: var(--r-pill);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	line-height: 1;
	transition: transform var(--t-fast), background-color var(--t), border-color var(--t), color var(--t);
	will-change: transform;
}

.skm-btn__icon {
	display: grid;
	place-items: center;
	width: 2.125rem; height: 2.125rem;
	border-radius: 50%;
	transition: transform var(--t), background-color var(--t);
}

.skm-btn__icon svg { width: 1rem; height: 1rem; }

.skm-btn--primary {
	background: var(--brand);
	color: var(--ink-950);
}
.skm-btn--primary .skm-btn__icon { background: rgba(4, 6, 10, 0.14); }

.skm-btn--ghost {
	background: var(--glass);
	border: 1px solid var(--hairline-2);
	color: var(--text);
	backdrop-filter: blur(14px);
}
.skm-btn--ghost .skm-btn__icon { background: rgba(255, 255, 255, 0.10); }

.skm-btn:hover { transform: translateY(-2px); }
.skm-btn:hover .skm-btn__icon { transform: translate(3px, -2px) scale(1.06); }
.skm-btn:active { transform: scale(0.985); }
.skm-btn:focus-visible { outline-offset: 4px; }

/* ------------------------------------------------------------- 7. HEADER */
/* z-index 90 ต้องสูงกว่า .skm-overlay (80) เสมอ
   เพราะปุ่มแฮมเบอร์เกอร์ในแถบ nav ทำหน้าที่เป็น “ปุ่มปิดเมนู” ด้วย
   → เมนูเปิดอยู่ต้องเห็นและกดปุ่มนี้ได้ตลอด
   หมายเหตุ: ถ้าให้ sticky ทำงานตอนล็อกสกอลล์ (เปิดเมนู) ดูคอมเมนต์ใน site.js
   เรื่องห้ามตั้ง overflow: hidden ที่ <html> (จะทำให้ nav หลุดไปหัวเอกสาร) */
.skm-header {
	position: sticky;
	top: 0;
	z-index: 90;
	padding-block: 1.15rem;
	pointer-events: none;
}

.skm-header > * { pointer-events: auto; }

.skm-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.25rem);
	width: min(var(--shell), 100% - (var(--gutter) * 2));
	margin-inline: auto;
	padding: 0.6rem 0.6rem 0.6rem 1.35rem;
	border-radius: var(--r-pill);
	background: rgba(8, 11, 17, 0.62);
	border: 1px solid var(--hairline);
	backdrop-filter: blur(22px) saturate(150%);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	box-shadow: var(--lift-1);
	transition: background-color var(--t), border-color var(--t), transform var(--t);
}

.skm-header.is-stuck .skm-nav {
	background: rgba(6, 8, 13, 0.86);
	border-color: var(--hairline-2);
}

.skm-brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.skm-brand img { height: 40px; width: auto; }

.skm-nav__menu {
	display: flex;
	align-items: center;
	gap: clamp(0.35rem, 1.1vw, 1rem);
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}

.skm-nav__menu > li { position: relative; }

.skm-nav__menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.55rem 0.7rem;
	border-radius: var(--r-pill);
	font-family: var(--font-head);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-dim);
	white-space: nowrap;
	transition: color var(--t-fast), background-color var(--t-fast);
}

.skm-nav__menu > li > a:hover,
.skm-nav__menu > li.current-menu-item > a,
.skm-nav__menu > li.current-menu-ancestor > a {
	color: var(--text);
	background: var(--glass-2);
}

/* dropdown */
.skm-nav__menu .sub-menu {
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 0;
	min-width: 15rem;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	border-radius: var(--r-lg);
	background: rgba(8, 11, 17, 0.94);
	border: 1px solid var(--hairline-2);
	backdrop-filter: blur(24px);
	box-shadow: var(--lift-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.5rem) scale(0.98);
	transform-origin: top left;
	transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}

.skm-nav__menu > li:hover > .sub-menu,
.skm-nav__menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.skm-nav__menu .sub-menu a {
	display: block;
	padding: 0.6rem 0.85rem;
	border-radius: var(--r-sm);
	font-size: 0.875rem;
	color: var(--text-dim);
	transition: color var(--t-fast), background-color var(--t-fast);
}

.skm-nav__menu .sub-menu a:hover {
	color: var(--ink-950);
	background: var(--brand);
}

.skm-nav__tail {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

/* language switcher */
.skm-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem;
	border-radius: var(--r-pill);
	background: var(--glass);
	border: 1px solid var(--hairline);
}

.skm-lang a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	border-radius: var(--r-pill);
	font-family: var(--font-head);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--text-mute);
	text-transform: uppercase;
	transition: color var(--t-fast), background-color var(--t-fast);
}

.skm-lang a:hover { color: var(--text); }

.skm-lang a.is-active {
	background: var(--brand);
	color: var(--ink-950);
}

.skm-lang img {
	width: 16px; height: 11px;
	border-radius: 2px;
	object-fit: cover;
	opacity: 0.95;
}

/* hamburger — morph to X, ไม่ใช่หายไป */
.skm-burger {
	display: none;
	position: relative;
	flex: 0 0 auto;
	box-sizing: border-box;
	/* 2.625rem = 42px (เดิม 2.75rem = 44px → ลดลงอีก 2px ตามคำขอ) */
	width: 2.625rem;
	height: 2.625rem;
	min-width: 2.625rem;
	padding: 0;
	line-height: 0;
	border-radius: 50%;
	background: var(--glass-2);
	border: 1px solid var(--hairline);
}

.skm-burger span {
	position: absolute;
	left: 50%;
	width: 18px; height: 1.5px;
	margin-left: -9px;
	border-radius: 2px;
	background: var(--text);
	transition: transform var(--t), opacity var(--t-fast);
}

.skm-burger span:nth-child(1) { top: 50%; margin-top: -5px; }
.skm-burger span:nth-child(2) { top: 50%; margin-top: -0.75px; width: 13px; margin-left: -9px; }
.skm-burger span:nth-child(3) { top: 50%; margin-top: 3.5px; }

.skm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.skm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.skm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }

/* full-screen overlay menu */
.skm-overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	align-content: safe center;
	/* เว้นที่ให้แถบ nav ด้านบนโดยใช้ “ความสูงจริง” ของ header ที่ JS วัดไว้ (--skm-header-h)
	   เดิมใช้ค่าคงที่ clamp(5rem, 12vh, 8rem) ซึ่งบนจอเตี้ย (มือถือแนวนอน) ได้แค่ 80px
	   = น้อยกว่าความสูงจริงของ header (≈100px) → แถบ nav ทับข้อความเมนู
	   ตอนนี้รับประกันว่าข้อความเมนูเริ่มต่ำกว่าขอบล่างของแถบ nav เสมอ */
	padding: calc(var(--skm-header-h, 6.5rem) + clamp(1rem, 3vh, 2rem)) var(--gutter) var(--gutter);
	background: rgba(4, 6, 10, 0.86);
	backdrop-filter: blur(28px) saturate(140%);
	-webkit-backdrop-filter: blur(28px) saturate(140%);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t), visibility var(--t);
	overflow-y: auto;
	/* เมนูยาวเกินจอบนมือถือได้ (มีเมนูย่อย) — ยังเลื่อนได้ตามปกติ
	   แต่ไม่ให้สกรอลบาร์กินความกว้าง เพราะจะดันปุ่มปิดให้เยื้องจากขอบขวา ~17px */
	scrollbar-width: none;
}

.skm-overlay::-webkit-scrollbar { width: 0; height: 0; }

.skm-overlay.is-open { opacity: 1; visibility: visible; }

/* ไม่มีปุ่มปิดในแผงเมนูแล้ว (ตามคำขอ) — ใช้ปุ่มแฮมเบอร์เกอร์ที่ morph เป็นกากบาทแทน
   ซึ่งลอยอยู่เหนือ overlay เพราะ .skm-header z-index 90 > .skm-overlay z-index 80 */

.skm-overlay__menu,
.skm-overlay__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.skm-overlay__menu { counter-reset: nav; }

.skm-overlay__menu li {
	opacity: 0;
	transform: translateY(2.5rem);
	transition: opacity var(--t-slow), transform var(--t-slow);
}

.skm-overlay.is-open .skm-overlay__menu li {
	opacity: 1;
	transform: none;
}

.skm-overlay.is-open .skm-overlay__menu li:nth-child(1) { transition-delay: 90ms; }
.skm-overlay.is-open .skm-overlay__menu li:nth-child(2) { transition-delay: 130ms; }
.skm-overlay.is-open .skm-overlay__menu li:nth-child(3) { transition-delay: 170ms; }
.skm-overlay.is-open .skm-overlay__menu li:nth-child(4) { transition-delay: 210ms; }
.skm-overlay.is-open .skm-overlay__menu li:nth-child(5) { transition-delay: 250ms; }
.skm-overlay.is-open .skm-overlay__menu li:nth-child(6) { transition-delay: 290ms; }
.skm-overlay.is-open .skm-overlay__menu li:nth-child(7) { transition-delay: 330ms; }
.skm-overlay.is-open .skm-overlay__menu li:nth-child(8) { transition-delay: 370ms; }

.skm-overlay__menu > li > a {
	display: block;
	padding: 0.45rem 0;
	font-family: var(--font-head);
	font-size: clamp(1.6rem, 7vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text);
}

.skm-overlay__menu > li > a:hover { color: var(--brand); }

.skm-overlay__menu .sub-menu a {
	display: block;
	padding: 0.3rem 0 0.3rem 1rem;
	font-size: 1rem;
	color: var(--text-mute);
}

.skm-overlay__menu .sub-menu a:hover { color: var(--cyan); }

.skm-overlay__foot {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hairline);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	font-size: var(--fs-small);
	color: var(--text-mute);
}

/* ------------------------------------------------------------- 8. FOOTER */
.skm-footer {
	position: relative;
	z-index: 2;
	margin-top: clamp(3rem, 8vw, 6rem);
	padding-top: clamp(3rem, 7vw, 5rem);
	border-top: 1px solid var(--hairline);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%);
}

.skm-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: clamp(2rem, 4vw, 3.5rem);
}

.skm-footer__brand img { height: 46px; width: auto; margin-bottom: 1.1rem; }

.skm-footer__tagline {
	color: var(--text-dim);
	font-size: var(--fs-small);
	max-width: 30ch;
	line-height: 1.7;
}

.skm-footer h4 {
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-mute);
	font-weight: 600;
	margin-bottom: 1.1rem;
}

.skm-footer ul { list-style: none; margin: 0; padding: 0; }

.skm-footer li { margin-bottom: 0.65rem; }

.skm-footer a {
	font-size: var(--fs-small);
	color: var(--text-dim);
	transition: color var(--t-fast), transform var(--t-fast);
	display: inline-block;
}

.skm-footer a:hover { color: var(--brand); transform: translateX(3px); }

.skm-footer__contact a { display: block; }

.skm-footer__socials {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.skm-footer__socials a {
	display: grid;
	place-items: center;
	width: 2.5rem; height: 2.5rem;
	border-radius: 50%;
	background: var(--glass);
	border: 1px solid var(--hairline);
	transition: background-color var(--t), transform var(--t), border-color var(--t);
}

.skm-footer__socials a:hover {
	background: var(--brand);
	border-color: var(--brand);
	transform: translateY(-3px);
}

.skm-footer__socials svg { width: 1rem; height: 1rem; fill: var(--text); }
.skm-footer__socials a:hover svg { fill: var(--ink-950); }

.skm-footer__legal {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-block: 1.5rem;
	border-top: 1px solid var(--hairline);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8125rem;
	color: var(--text-mute);
}

.skm-footer__legal a:hover { color: var(--text); }

/* ---------------------------------------------- 9. SCROLL REVEAL PRIMITIVE */
[data-reveal] {
	opacity: 0;
	transform: translateY(2.25rem);
	filter: blur(6px);
	transition: opacity var(--t-slow), transform var(--t-slow), filter var(--t-slow);
}

[data-reveal].is-in {
	opacity: 1;
	transform: none;
	filter: blur(0);
}

[data-reveal][data-delay="1"] { transition-delay: 90ms; }
[data-reveal][data-delay="2"] { transition-delay: 180ms; }
[data-reveal][data-delay="3"] { transition-delay: 270ms; }
[data-reveal][data-delay="4"] { transition-delay: 360ms; }
[data-reveal][data-delay="5"] { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* ------------------------------------------------- 10. ELEMENTOR CONTENT */
/* หน้าภายในที่ยังใช้ Elementor (Phase 3) — รีดีไซน์ด้วย CSS ทับเท่านั้น
   ไม่แตะ _elementor_data ลูกค้าจึงยังแก้ข้อความ/รูปใน Elementor ได้ตามเดิม

   specificity: กฎ per-element ของ Elementor อยู่ราว (0,2,0)–(0,4,0)
   กฎในบล็อกนี้จึงขึ้นต้นด้วย body.skm-theme .skm-page-canvas (0,3,0) ขึ้นไป
   และมี !important เฉพาะกรณีที่ปลั๊กอิน (WPForms) ยิงสไตล์มาแบบ inline */

.skm-page-canvas main,
.skm-page-canvas > article {
	position: relative;
	z-index: 2;
}

/* ---- 10.1 ผิวและจังหวะของ section ------------------------------------- */
/* แถบเทาแบน (#202020) ของธีมเดิมขัดกับโทน OLED ของดีไซน์ใหม่ → ตัดออก
   แล้วใช้ "เส้นผม" คั่นจังหวะระหว่าง section แทน (อ่านเป็นบท ๆ มากกว่าแถบแข็ง) */
/* เลือก selector ให้ specificity สูงกว่ากฎของ Elementor ที่เขียนไว้ที่ (0,4,0) เช่น
   .elementor-390 .elementor-element.elementor-element-d84e446:not(...) { background-color: … }
   (.elementor-top-section.elementor-element ข้างล่าง = (0,4,1) → ชนะด้วยจำนวน type selector) */
body.skm-theme .skm-page-canvas .elementor-top-section.elementor-element,
body.skm-theme .skm-page-canvas .elementor-inner-section.elementor-element,
body.skm-theme .skm-page-canvas .e-con.elementor-element {
	background-color: transparent;
}

body.skm-theme .skm-page-canvas .elementor-section,
body.skm-theme .skm-page-canvas .e-con {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* ใช้ ~ ไม่ใช่ + เพราะระหว่าง section มี container (.e-con) คั่นอยู่ */
body.skm-theme .skm-page-canvas .elementor-top-section ~ .elementor-top-section {
	border-top: 1px solid var(--hairline);
}

/* section ที่ใช้รูปถ่ายเป็นพื้นหลัง (แบนเนอร์กฎ/ติดต่อ) → คุมให้รูปไม่ไทล์ซ้ำ
   และเพิ่มม่านมืดด้านบน เพื่อให้ตัวอักษรอ่านออกทุกสภาพรูป */
body.skm-theme .skm-page-canvas .elementor-background-overlay {
	background-image: linear-gradient(180deg, rgba(4, 6, 10, 0.58) 0%, rgba(4, 6, 10, 0.93) 100%) !important;
	background-color: transparent !important;
}

/* ---- 10.1.1 แบนเนอร์หน้าภายใน: ให้รูปขึ้นถึงขอบบนสุด โดยไม่ขยับข้อความ ---- */
/* Elementor ตั้ง margin-top: -30px ไว้ที่ section แบนเนอร์ (จงใจสอดใต้ header ของธีมเดิม
   ที่เตี้ยกว่า) ทำให้รูปเริ่มที่ ~75px เหลือแถบพื้นหลังค้างบนหัวรูป
   ธีมนี้ดึงขึ้นเต็มความสูง nav จริง (-var(--skm-header-h)) แล้วคืนความสูงด้วย
   border-top โปร่งใสเท่ากัน -> รูปยังคลุมพื้นที่เดิมต่อเนื่องกัน (background-clip: border-box)
   และ border ดันเนื้อหาลงให้อยู่ตำแหน่งเดิมเป๊ะ (margin/border จับคู่กันจึงไม่ขยับ)
   ไม่ลบ margin ของลูกค้าจึงยังแก้ระยะใน Elementor ได้ตามเดิม */
/* Elementor ห่อ section ไว้ใน <div class="elementor elementor-XXX"> อีกชั้น
   จึงต้องเจาะผ่านชั้นนั้นด้วย (ไม่ใช้ .elementor-* เพราะเลขเปลี่ยนตามเพจ) */
body.skm-theme .skm-page-canvas.skm-has-banner > .elementor > .elementor-top-section:first-of-type,
body.skm-theme .skm-page-canvas.skm-has-banner > .elementor > .e-con:first-of-type {
	margin-top: calc(-1 * var(--skm-header-h));
	border-top: calc(var(--skm-header-h) - 1.875rem) solid transparent;
}

/* ม่านมืดของ section ต้องคลุมพื้นที่ที่ยืมมาเพิ่มด้วย เพื่อไม่ให้เห็นรอยต่อของโทนสี */
body.skm-theme .skm-page-canvas.skm-has-banner > .elementor > .elementor-top-section > .elementor-background-overlay,
body.skm-theme .skm-page-canvas.skm-has-banner > .elementor > .e-con > .elementor-background-overlay {
	top: calc(-1 * (var(--skm-header-h) - 1.875rem));
}

/* ---- 10.2 ตัวอักษรในเนื้อหา -------------------------------------------- */
/* ของเดิม (kit ลูกค้า) เป็นสีเทาเข้ม #424242 สำหรับพื้นสว่าง — บนพื้นดำอ่านไม่ออก */
body.skm-theme .skm-page-canvas .elementor-widget-text-editor,
body.skm-theme .skm-page-canvas .elementor-widget-text-editor .elementor-widget-container,
body.skm-theme .skm-page-canvas .elementor-widget-theme-post-content {
	color: var(--text-dim);
}

body.skm-theme .skm-page-canvas .elementor-widget-text-editor p,
body.skm-theme .skm-page-canvas .elementor-widget-text-editor li,
body.skm-theme .skm-page-canvas .elementor-widget-text-editor span,
body.skm-theme .skm-page-canvas .elementor-widget-text-editor strong,
body.skm-theme .skm-page-canvas .elementor-widget-text-editor b {
	color: inherit;
}

body.skm-theme .skm-page-canvas .elementor-widget-text-editor p {
	font-size: clamp(1rem, 1.05vw, 1.0625rem);
	line-height: 1.8;
	max-width: 74ch;
}

body.skm-theme .skm-page-canvas .elementor-widget-text-editor strong,
body.skm-theme .skm-page-canvas .elementor-widget-text-editor b {
	color: var(--text);
	font-weight: 600;
}

body.skm-theme .skm-page-canvas .elementor-widget-text-editor a { color: var(--cyan); }
body.skm-theme .skm-page-canvas .elementor-widget-text-editor a:hover { color: var(--brand); }

body.skm-theme .skm-page-canvas .elementor-widget-text-editor ol,
body.skm-theme .skm-page-canvas .elementor-widget-text-editor ul {
	padding-left: 1.35rem;
}
body.skm-theme .skm-page-canvas .elementor-widget-text-editor li { margin-bottom: 0.5rem; }
body.skm-theme .skm-page-canvas .elementor-widget-text-editor li::marker { color: var(--brand); }

body.skm-theme .skm-page-canvas .elementor-heading-title { font-family: var(--font-head); }

/* ---- 10.3 เส้นคั่น: ของเดิมเกือบดำบนพื้นดำ → ใช้เส้นผมของดีไซน์ ---- */
body.skm-theme .skm-page-canvas .elementor-divider { padding-block: clamp(0.5rem, 1.6vw, 1.25rem); }
body.skm-theme .skm-page-canvas .elementor-widget-divider .elementor-divider-separator {
	border-top-width: 1px;
	border-top-color: var(--hairline-2);
}

/* ---- 10.4 กรอบกระจก (double bezel) ให้รูปเนื้อหาทุกใบ ---- */
body.skm-theme .skm-page-canvas .elementor-widget-image > .elementor-widget-container {
	background: var(--glass);
	border: 1px solid var(--hairline);
	border-radius: calc(var(--r-lg) + 0.4rem);
	padding: 0.45rem;
	box-shadow: var(--lift-1);
}

body.skm-theme .skm-page-canvas .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-lg);
}

/* ---- 10.5 ตาราง ---- */
.skm-page-canvas table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.skm-page-canvas th,
.skm-page-canvas td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--hairline);
	text-align: left;
}
.skm-page-canvas th { color: var(--text); font-family: var(--font-head); }

body.skm-theme .skm-page-canvas .eael-data-table {
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--lift-1);
}

/* เซลล์ของ EAEL ถูกตั้งสีดำ/พื้นสว่างจากกฎ per-element ที่ (0,5,3)
   จึงต้องใส่ class ให้ครบ (.eael-data-table-wrap) เพื่อให้ชนะด้วยจำนวน type selector */
body.skm-theme .skm-page-canvas .eael-data-table-wrap .eael-data-table tbody > tr:nth-child(odd) > td,
body.skm-theme .skm-page-canvas .eael-data-table-wrap .eael-data-table tbody > tr:nth-child(even) > td {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--hairline);
	color: var(--text-dim);
	vertical-align: middle;
}

body.skm-theme .skm-page-canvas .eael-data-table-wrap .eael-data-table tbody > tr:nth-child(even) > td {
	background-color: rgba(255, 255, 255, 0.028);
}

body.skm-theme .skm-page-canvas .eael-data-table-wrap .eael-data-table tbody tr:hover > td {
	background-color: var(--glass-2);
	color: var(--text);
}

/* หัวตาราง: คงสีเขียวไลม์ของ kit ลูกค้าไว้ แต่ตัดขอบขาว 2px ของ EAEL ให้เป็นเส้นผม */
body.skm-theme .skm-page-canvas .eael-data-table-wrap .eael-data-table thead > tr > th {
	border: 0;
	border-bottom: 1px solid var(--hairline);
}

/* ---- 10.6 ฟอร์ม (WPForms): ของเดิมเป็นกล่องขาว/ป้ายดำ บนเว็บโทนดำ ---- */
/* คอลัมน์ที่เคยตั้งพื้นขาวทึบ (เฉพาะคอลัมน์ที่มีฟอร์ม) → การ์ดแก้วของดีไซน์ใหม่
   หมายเหตุ: ดีไซน์เดิมวาง "การ์ด" ทับลงบนแบนเนอร์ ดังนั้นหัวข้อ (ติดต่อเรา)
   กับฟอร์มต้องอยู่ในการ์ดเดียวกัน จึงให้พื้นอยู่ที่คอลัมน์ ไม่ใช่ที่ widget ฟอร์ม */
body.skm-theme .skm-page-canvas .elementor-column:has(.wpforms-container) > .elementor-widget-wrap {
	background: var(--glass);
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	box-shadow: var(--lift-1);
}

body.skm-theme .skm-page-canvas .elementor-widget-wpforms > .elementor-widget-container {
	padding: 0;
}

body.skm-theme .skm-page-canvas .wpforms-field-label,
body.skm-theme .skm-page-canvas .wpforms-field-sublabel,
body.skm-theme .skm-page-canvas .wpforms-field-label-inline { color: var(--text); }

body.skm-theme .skm-page-canvas .wpforms-field-label .wpforms-required-label { color: var(--brand); }

/* ช่องกรอก: WPForms ยิงสไตล์พื้นขาว/ขอบเทามาจากปลั๊กอินเอง จึงต้องทับด้วย !important */
body.skm-theme .skm-page-canvas .wpforms-form input[type="text"],
body.skm-theme .skm-page-canvas .wpforms-form input[type="email"],
body.skm-theme .skm-page-canvas .wpforms-form input[type="tel"],
body.skm-theme .skm-page-canvas .wpforms-form input[type="number"],
body.skm-theme .skm-page-canvas .wpforms-form input[type="url"],
body.skm-theme .skm-page-canvas .wpforms-form textarea,
body.skm-theme .skm-page-canvas .wpforms-form select {
	background-color: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid var(--hairline) !important;
	border-radius: var(--r-sm) !important;
	color: var(--text) !important;
	font-family: var(--font-body) !important;
	padding: 0.8rem 1rem !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.skm-theme .skm-page-canvas .wpforms-form ::placeholder { color: var(--text-mute); opacity: 1; }

body.skm-theme .skm-page-canvas .wpforms-form input:focus,
body.skm-theme .skm-page-canvas .wpforms-form textarea:focus,
body.skm-theme .skm-page-canvas .wpforms-form select:focus {
	border-color: var(--brand) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(252, 243, 5, 0.18);
}

body.skm-theme .skm-page-canvas .wpforms-submit-container { padding-top: 0.5rem !important; }
body.skm-theme .skm-page-canvas .wpforms-form button.wpforms-submit {
	background-color: var(--brand) !important;
	border: 0 !important;
	border-radius: var(--r-pill) !important;
	color: var(--ink-950) !important;
	font-family: var(--font-head);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.95rem 2rem !important;
	transition: transform var(--t-fast), background-color var(--t-fast);
}
body.skm-theme .skm-page-canvas .wpforms-form button.wpforms-submit:hover {
	background-color: #fff !important;
	transform: translateY(-1px);
}

/* ---- 10.7 ปุ่ม/ลิงก์ที่ Elementor สร้าง ---- */
.skm-page-canvas a { color: var(--cyan); }
.skm-page-canvas a:hover { color: var(--brand); }

body.skm-theme .skm-page-canvas .elementor-button {
	border-radius: var(--r-pill);
	font-family: var(--font-head);
	font-weight: 600;
}

/* ------------------------------------------------------- 11. BREAKPOINTS */
@media (max-width: 1080px) {
	.skm-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	.skm-nav__menu { display: none; }
	.skm-burger { display: block; }
	/* ระยะห่างขวาของปุ่มแฮมเบอร์เกอร์: เดิม 0.6rem (≈9.6px) ทำให้ชิดขอบแคปซูลเกินไป
	   ตั้งเป็น 1.25rem (20px) ตามที่ผู้ใช้ขอ ให้ปุ่มมีที่หายใจจากขอบขวา */
	.skm-nav { padding-right: 1.25rem; }
	/* ปุ่มเปลี่ยนภาษาอยู่ “ข้างแฮมเบอร์เกอร์” ใน nav แล้ว (ไม่ซ่อนลงเมนูย่อย)
	   ย่อขนาดลงเล็กน้อย (ฟอนต์ 0.75 → 0.6875rem, padding แนวตั้ง/แนวนอนลดลง)
	   แต่คงความสูงแตะขั้นต่ำไว้ที่ ~32px และไม่ให้ล้นความกว้าง nav บนจอ 320px */
	.skm-nav__tail .skm-lang--desktop { display: inline-flex; }
	.skm-nav__tail .skm-lang { gap: 0.2rem; padding: 0.22rem; }
	.skm-nav__tail .skm-lang a {
		font-size: 0.6875rem;
		padding: 0.28rem 0.5rem;
		letter-spacing: 0.04em;
	}
	/* ไม่แสดงปุ่มภาษาในเมนูย่อย/แผงเมนูอีกแล้ว — อยู่บน nav ตลอดเวลา */
	.skm-overlay__foot .skm-lang--inline { display: none; }

	/* เมนูเดสก์ท็อปเป็นตัวดัน tail ไปขวาด้วย margin-left:auto
	   พอเมนูถูกซ่อนบนมือถือ ตัวดันหายไป → ปุ่มแฮมเบอร์เกอร์ลอยอยู่กลางแถบ
	   จึงต้องตั้ง auto margin ที่ tail เอง ให้ชิดขอบขวาของแถบ nav เสมอ */
	.skm-nav__tail { margin-inline-start: auto; }
}

@media (min-width: 901px) {
	.skm-overlay { display: none; }
	.skm-overlay__menu .skm-lang--inline { display: none; }
}

@media (max-width: 640px) {
	/* ต้องลดค่านี้ด้วย ไม่งั้นมือถือจะยังใช้ระยะเดิม (ใหญ่กว่าที่ตั้งใหม่) */
	:root { --section-y: clamp(1.75rem, 7vw, 2.5rem); }
	.skm-brand img { height: 32px; }
	.skm-footer__grid { grid-template-columns: 1fr; gap: 2.25rem; }
	.skm-btn { width: 100%; justify-content: space-between; }
}

/* จอเล็กมาก (≤340px) — หลังย้ายปุ่มภาษามาขึ้น nav แล้ว 320px ไม่พอดี
   (วัดจริง: ปุ่มแฮมเบอร์เกอร์ล้นขอบขวาของแคปซูล) จึงย่อ brand + ปุ่มภาษาและลดระยะขวา
   ต้องอยู่ “หลัง” บล็อก ≤640px เพราะที่นั่นตั้ง .skm-brand img { height: 32px } ไว้ */
@media (max-width: 340px) {
	.skm-nav { padding-right: 0.625rem; }
	.skm-brand img { height: 26px; }
	.skm-nav__tail { gap: 0.375rem; }
	.skm-nav__tail .skm-lang a { font-size: 0.625rem; padding: 0.26rem 0.4rem; }
}

/* ==========================================================================
   12. ELEMENTOR KIT OVERRIDES
   Kit ของลูกค้าเขียนกฎไว้ที่ .elementor-kit-53 (ซึ่งเป็น class ของ <body>):
     .elementor-kit-53 a        { color: #202020 }   -> specificity (0,1,1)
     .elementor-kit-53 h1..h6   { color / font-family / font-size }
     .elementor-kit-53 button   { background-color: primary }
   กฎพวกนี้ชนะ selector ระดับ element ของเรา (h1, a, body = 0,0,1)
   จึงต้องประกาศซ้ำด้วย specificity (0,1,2) ขึ้นไป
   ========================================================================== */

/* style.css ของธีมแม่ตั้ง body{background-color:white} และโหลดทีหลัง site.css
   จึงต้องยืนยันพื้นหลังเข้มด้วย specificity ที่สูงกว่า */
html { background-color: var(--ink-950); }

body.skm-theme {
	background-color: var(--ink-950);
	font-family: var(--font-body);
	color: var(--text);
}

body.skm-theme h1,
body.skm-theme h2,
body.skm-theme h3,
body.skm-theme h4,
body.skm-theme h5,
body.skm-theme h6 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--text);
}

body.skm-theme h1 { font-size: var(--fs-h1); }
body.skm-theme h2 { font-size: var(--fs-h2); }
body.skm-theme h3 { font-size: var(--fs-h3); }

/* ลิงก์ในเปลือกเว็บสืบทอดสีจากบริบท ไม่ใช้สีลิงก์ของ kit */
body.skm-theme a { color: inherit; }

/* ปุ่ม: kit ให้ background เป็นสี primary — ทับกลับเป็นของเรา */
body.skm-theme .skm-btn { color: inherit; }
body.skm-theme .skm-btn--primary { color: var(--ink-950); background-color: var(--brand); }
body.skm-theme .skm-btn--ghost { color: var(--text); background-color: var(--glass); }

body.skm-theme button.skm-burger { background-color: var(--glass-2); padding: 0; }
body.skm-theme button.skm-video__facade { background: radial-gradient(560px 320px at 50% 50%, rgba(4, 178, 220, 0.22), rgba(4, 6, 10, 0.78)); color: inherit; }
/* ปุ่มกลับขึ้นด้านบนเป็นของปลั๊กอิน Smooth Back To Top (ตามที่ลูกค้าใช้อยู่) */

/* สีของเมนู/ฟุตเตอร์ ที่ต้องชนะกฎ a:hover ของ kit (0,2,1) */
body.skm-theme .skm-nav__menu > li > a { color: var(--text-dim); }
body.skm-theme .skm-nav__menu > li > a:hover,
body.skm-theme .skm-nav__menu > li.current-menu-item > a,
body.skm-theme .skm-nav__menu > li.current-menu-ancestor > a { color: var(--text); background-color: var(--glass-2); }
body.skm-theme .skm-nav__menu .sub-menu a { color: var(--text-dim); }
body.skm-theme .skm-nav__menu .sub-menu a:hover { color: var(--ink-950); background-color: var(--brand); }

body.skm-theme .skm-lang a { color: var(--text-mute); }
body.skm-theme .skm-lang a:hover { color: var(--text); }
body.skm-theme .skm-lang a.is-active { color: var(--ink-950); background-color: var(--brand); }

body.skm-theme .skm-overlay__menu > li > a { color: var(--text); }
body.skm-theme .skm-overlay__menu > li > a:hover { color: var(--brand); }
body.skm-theme .skm-overlay__menu .sub-menu a { color: var(--text-mute); }
body.skm-theme .skm-overlay__menu .sub-menu a:hover { color: var(--cyan); }

body.skm-theme .skm-footer a { color: var(--text-dim); }
body.skm-theme .skm-footer a:hover { color: var(--brand); }
body.skm-theme .skm-footer__legal a { color: var(--text-mute); }
body.skm-theme .skm-footer__legal a:hover { color: var(--text); }

/* ============================================== 13. HERO ของหน้าภายใน */
/* หน้าภายในได้ "หัวเรื่องหน้า" ของตัวเอง (eyebrow + H1 + เส้นผม) เป็นจังหวะ
   เดียวกับหน้าแรก — หน้าที่เนื้อหายังมาจาก Elementor ก็ใช้เปลือกเดียวกัน
   หน้าที่ยังมีแบนเนอร์ของตัวเองอยู่แล้ว ธีมจะไม่ใส่ hero ซ้ำ (ดู skm_page_has_banner) */
.skm-page-hero {
	position: relative;
	z-index: 2;
	padding-block: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 3vw, 2.25rem);
}

.skm-page-hero__title {
	margin: 1.1rem 0 0;
	max-width: 24ch;
	font-size: var(--fs-h1);
}

.skm-page-hero__lede {
	margin-top: 1.1rem;
}

.skm-page-hero__rule {
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	height: 1px;
	background: linear-gradient(90deg, var(--hairline-2), transparent 78%);
}

@media (max-width: 640px) {
	.skm-page-hero { padding-block: 3rem 1rem; }
}

/* แบนเนอร์/ไทล์ ที่เป็นลิงก์ */
body.skm-theme .skm-tile:hover .skm-tile__name { color: var(--brand); }