/*
 * FALCON PRO EA · หน้าแรก (front-page.php · inc/modules/home.php + homeplus.php · assets/js/home.js)
 *
 * โครงหน้าแบบ hero + บทมีเลข (เปิดครบ 12 บท · ส่วนต่อเติมภายหลังอยู่ที่บล็อก H15 และ H16 ท้ายไฟล์) · หน้าตาแบบ FALCON:
 * Noto Sans Thai · มุมโค้ง 14–22px · ปุ่มสี่เหลี่ยมมุมมน --btn-radius (.btn-fire / .btn-ghost / .btn-dark) · ไอคอนวงกลม .ic-badge
 * สีเขียวทึบ (--ember / --flare / --mint) บนพื้นเข้ม #172125 · เส้นบาง เงานุ่ม · ไม่มี gradient/glow สี
 *
 * โทนพื้น: ส่วนที่ได้ .is-dark (+ .is-dark-2) จาก fenix_section_tone() เป็นพื้นเข้ม · ที่เหลือเป็นพื้นสว่าง
 * ทุกคอมโพเนนต์อ่านสีจาก token --hm-* ที่เปลี่ยนตามโทนของ section จึงใช้ได้ทั้งพื้นเข้มและพื้นสว่าง
 *
 * สถานะก่อนแอนิเมชันทั้งหมดอยู่ใต้ .hm-js (home.js ใส่ให้ตอนเริ่ม) · ไม่มี JS / JS โหลดไม่ขึ้น = เห็นสถานะจบเสมอ
 * breakpoints: 1240 (รางเลขบท) · 1100 (ตารางแพ็กเกจ) · 1024 · 960 (FAQ 2 คอลัมน์) · 760 · 640
 */

/* ==========================================================
   H1) Token ของหน้าแรกตามโทนพื้น
   ========================================================== */
.home-v3 {
	--hm-pad: clamp(72px, 9vw, 108px);
	--hm-radius: 20px;
	--hm-radius-sm: 14px;
	--hm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--hm-bg: #FFFFFF;
	--hm-surface: #F5F7F8;
	--hm-cell: #FFFFFF;
	--hm-line: var(--border);
	--hm-text: var(--ink);
	--hm-muted: var(--ash);
	--hm-muted-2: var(--ash-2);
	--hm-accent: var(--flare);
	--hm-tint: rgba(72, 247, 144, 0.10);
	--hm-warn: var(--warn);
	--hm-card-shadow: var(--shadow-soft);
	display: block;
}

.home-v3 .hm-surface {
	--hm-bg: var(--coal);
	--hm-surface: #FFFFFF;
	--hm-cell: #FFFFFF;
	background: var(--coal);
}

.home-v3 .is-dark {
	--hm-bg: var(--black);
	--hm-surface: var(--black-2);
	--hm-cell: var(--black);
	--hm-line: var(--border-dark);
	--hm-text: #FFFFFF;
	--hm-muted: var(--on-black-2);
	--hm-muted-2: rgba(255, 255, 255, 0.5);
	--hm-accent: var(--mint);
	--hm-tint: rgba(72, 247, 144, 0.08);
	--hm-warn: #F2B64C;
	--hm-card-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.home-v3 .is-dark.is-dark-2 {
	--hm-bg: var(--black-deep);
	--hm-surface: var(--black-2);
	--hm-cell: var(--black-deep);
}

/* ==========================================================
   H2) บท (section) · หัวบท · anchor สำรอง
   ========================================================== */
.hm-ch {
	position: relative;
	padding: var(--hm-pad) 0;
	background: var(--hm-bg);
	color: var(--hm-text);
}

.hm-ch + .hm-ch {
	border-top: 1px solid var(--hm-line);
}

.hm-anchor {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 1px;
	height: 1px;
	scroll-margin-top: calc(var(--header-h) + 14px);
}

.home-v3 .ch-head {
	max-width: 860px;
	margin-bottom: clamp(36px, 5vw, 56px);
}

.home-v3 .ch-head h2 {
	color: var(--hm-text);
	text-wrap: balance;
}

.home-v3 .ch-sub {
	color: var(--hm-muted);
	font-size: 1.04rem;
}

.home-v3 .ch-num {
	font-size: 1.05rem;
	font-weight: 800;
}

.home-v3 .is-dark .ch-kicker {
	border-left-color: var(--mint);
}

.hm-lead {
	color: var(--hm-muted);
	font-size: 1.04rem;
}

.hm-textlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 2px;
	font-weight: 600;
	color: var(--hm-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	text-decoration-color: rgba(72, 247, 144, 0.45);
}

.hm-textlink:hover,
.hm-textlink:focus-visible {
	color: var(--hm-accent);
	text-decoration-color: currentColor;
}

.hm-textlink .icon {
	transition: transform 0.18s var(--hm-ease);
}

.hm-textlink:hover .icon {
	transform: translateX(4px);
}

.hm-actions {
	margin: 32px 0 0;
}

.hm-foot {
	margin: 18px 0 0;
	font-size: 0.86rem;
	color: var(--hm-muted-2);
}

/* แถบหมายเหตุ (คำเตือน / หมายเหตุมือถือ) */
.hm-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 32px 0 0;
	padding: 14px 18px;
	border-radius: var(--hm-radius-sm);
	border: 1px solid var(--hm-line);
	background: var(--hm-surface);
	font-size: 0.93rem;
	line-height: 1.7;
	color: var(--hm-muted);
}

.hm-notice .icon {
	flex: 0 0 auto;
	margin-top: 0.3em;
	color: var(--hm-warn);
}

.hm-notice--warn {
	border-color: rgba(178, 108, 9, 0.32);
	background: rgba(178, 108, 9, 0.06);
}

.is-dark .hm-notice--warn {
	border-color: rgba(242, 182, 76, 0.28);
	background: rgba(242, 182, 76, 0.06);
}

/* รายการเครื่องหมายถูก (สิ่งที่ต้องเตรียม / สิ่งที่ได้ในแพ็กเกจ) */
.hm-checks {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hm-checks li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--hm-text);
	font-size: 0.97rem;
	line-height: 1.6;
}

.hm-check {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--hm-tint);
	color: var(--hm-accent);
}

.hm-check .icon {
	width: 14px;
	height: 14px;
	stroke-width: 2.4;
}

/* ช่องรูปบนหน้าแรก · ลิงก์เปิดภาพเต็ม (components.css) + มุมโค้งตามธีม */
.home-v3 .media-open {
	border-radius: var(--hm-radius);
}

.home-v3 .is-dark .media-slot-empty {
	background: rgba(242, 182, 76, 0.06);
	border-color: rgba(242, 182, 76, 0.4);
	color: #F2B64C;
}

/* ==========================================================
   H3) รางเลขบท (≥1240px) + แถบความคืบหน้าใต้เมนู (<1240px)
   ========================================================== */
.hm-rail {
	display: none;
}

.hm-progress {
	position: sticky;
	top: var(--header-h);
	z-index: 60;
	height: 3px;
	margin-bottom: -3px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
}

.hm-progress-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--ember);
	transform-origin: left center;
	transform: scaleX(var(--p, 0));
}

.hm-rail-inner {
	position: absolute;
	top: 0;
	left: max(4px, calc((100vw - 1140px) / 2 - 52px));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 36px;
	padding: 12px 0;
	border-radius: 999px;
	border: 1px solid var(--border-dark);
	background: var(--black-2);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.hm-rail-counter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	margin: 0;
	line-height: 1;
}

.hm-rail-n {
	display: inline-block;
	min-width: 2ch;
	text-align: center;
	font-size: 0.92rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--mint);
}

.hm-rail-n[data-tick] {
	animation: hm-rail-tick 0.24s var(--hm-ease) 1;
}

.hm-rail-total {
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: var(--on-black-2);
}

.hm-rail-track {
	position: relative;
	display: block;
	width: 2px;
	height: 64px;
	border-radius: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.12);
}

.hm-rail-fill {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--ember);
	transform-origin: center top;
	transform: scaleY(var(--p, 0));
}

.hm-rail-list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hm-rail-list a {
	position: relative;
	display: grid;
	place-items: center;
	width: 28px;
	height: 24px;
	border-radius: 8px;
	font-size: 0.66rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--on-black-2);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hm-rail-list a:hover,
.hm-rail-list a:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
}

.hm-rail-list a[aria-current="true"] {
	background: var(--ember);
	color: var(--on-ember);
}

.hm-rail-tip {
	position: absolute;
	top: 50%;
	left: calc(100% + 14px);
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--border-dark);
	background: var(--black-2);
	color: #FFFFFF;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
	opacity: 0;
	pointer-events: none;
	transform: translate(-4px, -50%);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.hm-rail-list a:hover .hm-rail-tip,
.hm-rail-list a:focus-visible .hm-rail-tip {
	opacity: 1;
	transform: translate(0, -50%);
}

@keyframes hm-rail-tick {
	from {
		opacity: 0;
		transform: translateY(-40%);
	}
}

@keyframes hm-fill-y {
	from {
		transform: scaleY(0);
	}

	to {
		transform: scaleY(1);
	}
}

@keyframes hm-fill-x {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		.hm-rail-fill {
			animation: hm-fill-y linear both;
			animation-timeline: scroll(root);
		}

		.hm-progress-fill {
			animation: hm-fill-x linear both;
			animation-timeline: scroll(root);
		}
	}
}

@media (min-width: 1240px) {
	.hm-rail {
		position: sticky;
		top: calc(var(--header-h) + 32px);
		z-index: 60;
		display: block;
		height: 0;
		overflow: visible;
	}

	.hm-progress {
		display: none;
	}
}

body:not(.theme-dark) .hm-progress {
	background: var(--border);
}

/* ==========================================================
   H4) Hero · H1 + ปุ่มติดต่อ + ลิงก์ไปบท how + คำเตือน + แถบข้อมูลระบบ · แผง EA จำลองด้านขวา
   ========================================================== */
.hm-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #FFFFFF;
	color: var(--ink);
}

.hm-hero.is-dark {
	background: var(--black);
	color: #FFFFFF;
}

.hm-hero-main {
	position: relative;
	padding: clamp(52px, 6.5vw, 84px) 0 clamp(56px, 6vw, 80px);
}

/* แผงทแยงด้านหลังภาพ (สีทึบ 2 เฉด ตามแบนเนอร์ FALCON) */
.hm-hero-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--black);
	clip-path: polygon(63% 0, 100% 0, 100% 100%, 50% 100%);
}

.hm-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--black-2);
	clip-path: polygon(88% 0, 100% 0, 100% 100%, 77% 100%);
}

.hm-hero.is-dark .hm-hero-bg {
	background: var(--black-deep);
}

.hm-hero.is-dark .hm-hero-bg::after {
	background: #0C1316;
}

.hm-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
	align-items: center;
	gap: clamp(32px, 5vw, 64px);
}

.hm-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 22px;
	padding: 7px 15px;
	border-radius: var(--btn-radius-xs, 6px); /* ป้ายสถานะ: มุมมนเล็กน้อยแบบเดียวกับปุ่ม ไม่ใช้ทรงแคปซูล */
	border: 1px solid var(--border-fire);
	background: #EAF9F0;
	color: var(--flare);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
}

.hm-hero-badge i {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ember);
}

.hm-hero.is-dark .hm-hero-badge {
	border-color: rgba(72, 247, 144, 0.3);
	background: rgba(72, 247, 144, 0.1);
	color: var(--mint);
}

.hm-hero-title {
	margin: 0 0 20px;
	letter-spacing: 0;
}

.hm-hero-brand {
	display: block;
	margin-bottom: 12px;
	font-size: clamp(0.95rem, 1.4vw, 1.1rem);
	font-weight: 700;
	letter-spacing: 0.34em;
	color: var(--ash);
}

.hm-hero-headline {
	display: block;
	font-size: clamp(2.3rem, 5vw, 3.8rem);
	font-weight: 800;
	line-height: 1.16;
	color: var(--ink);
}

.hm-hero-headline em {
	font-style: normal;
	color: var(--ember-deep);
}

.hm-hero.is-dark .hm-hero-brand {
	color: var(--on-black-2);
}

.hm-hero.is-dark .hm-hero-headline {
	color: #FFFFFF;
}

.hm-hero.is-dark .hm-hero-headline em {
	color: var(--ember);
}

.hm-hero-desc {
	max-width: 570px;
	margin: 0 0 30px;
	font-size: 1.07rem;
	color: var(--ash);
}

.hm-hero.is-dark .hm-hero-desc {
	color: var(--on-black-2);
}

.hm-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	margin: 0 0 22px;
}

.hm-hero-actions .btn-fire:hover {
	box-shadow: none;
}

.hm-hero .hm-textlink {
	color: var(--flare);
}

.hm-hero.is-dark .hm-textlink {
	color: #FFFFFF;
	text-decoration-color: rgba(72, 247, 144, 0.6);
}

.hm-hero.is-dark .hm-textlink .icon {
	color: var(--mint);
}

.hm-hero-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	max-width: 560px;
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.65;
	color: var(--ash-2);
}

.hm-hero-note .icon {
	flex: 0 0 auto;
	margin-top: 0.28em;
	color: var(--warn);
}

.hm-hero.is-dark .hm-hero-note {
	color: rgba(255, 255, 255, 0.6);
}

.hm-hero.is-dark .hm-hero-note .icon {
	color: #F2B64C;
}

.hm-hero-visual {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	width: 100%;
	max-width: 520px;
	justify-self: end;
}

.hm-hero-frame {
	margin: 0;
	overflow: hidden;
	border-radius: 22px;
	border: 1px solid var(--border-dark);
	background: var(--black-2);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.hm-hero-frame img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* แผงจำลองบนหน้าแรก: จุดสถานะนิ่ง (ไม่กะพริบเหมือนระบบกำลังเทรดจริง) */
.hm-hero .ea-status i {
	animation: none;
	background: var(--on-black-2);
}

.hm-hero .ea-status {
	color: var(--on-black-2);
}

.hm-hero .ea-active {
	letter-spacing: 0.06em;
}

.hm-hero .ea-active .icon {
	fill: none;
	stroke-width: 2.4;
}

/* แถบข้อมูลระบบ (หัวข้อ|ค่า) · แถบทึบเต็มความกว้างใต้ hero */
.hm-hero-spec {
	position: relative;
	border-top: 1px solid var(--border);
	background: #FFFFFF;
}

.hm-hero.is-dark .hm-hero-spec {
	border-top-color: var(--border-dark);
	background: var(--black);
}

.hm-spec {
	display: grid;
	grid-template-columns: repeat(var(--spec-n, 4), minmax(0, 1fr));
	margin: 0;
}

.hm-spec-item {
	min-width: 0;
	padding: 22px 24px 24px;
	border-left: 1px solid var(--border);
}

.hm-spec-item:first-child {
	padding-left: 0;
	border-left: 0;
}

.hm-spec dt {
	margin-bottom: 6px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--flare);
}

.hm-spec dd {
	margin: 0;
	font-size: 0.97rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink);
}

.hm-hero.is-dark .hm-spec-item {
	border-left-color: var(--border-dark);
}

.hm-hero.is-dark .hm-spec dt {
	color: var(--mint);
}

.hm-hero.is-dark .hm-spec dd {
	color: #FFFFFF;
}

/* ==========================================================
   H5) 01 · ระบบคืออะไร · ตารางข้อมูล + กล่องหลักการ + ภาพ 01
   ========================================================== */
.hm-what-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: start;
	gap: clamp(32px, 5vw, 64px);
}

.hm-what-grid.is-solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 820px;
}

.hm-what-media {
	position: sticky;
	top: calc(var(--header-h) + 36px);
}

.hm-sheet {
	margin: 30px 0 0;
	border-top: 1px solid var(--hm-line);
}

.hm-sheet-row {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 20px;
	padding: 15px 0;
	border-bottom: 1px solid var(--hm-line);
}

.hm-sheet dt {
	padding-top: 2px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--hm-accent);
}

.hm-sheet dd {
	margin: 0;
	font-weight: 500;
	line-height: 1.65;
	color: var(--hm-text);
}

/* ไอคอนกับข้อความอยู่กึ่งกลางแนวตั้งด้วยกัน: กล่องนี้ไม่มีหัวข้อเล็กแล้ว (show_kickers ปิดเป็นค่าเริ่มต้น) ข้อความบรรทัดเดียวบนจอกว้าง
   ถ้าชิดบน (flex-start) จะลอยสูงกว่ากลางไอคอนราว 9px และเหลือที่ใต้ข้อความมากกว่าด้านบนเกือบเท่าตัว */
.hm-principle {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 30px;
	padding: 20px 22px;
	border-radius: 18px;
	border: 1px solid var(--hm-line);
	background: var(--hm-surface);
}

.hm-principle .ic-badge {
	width: 44px;
	height: 44px;
}

.hm-principle .ic-badge .icon {
	width: 21px;
	height: 21px;
}

.hm-principle-label {
	margin: 0 0 4px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--hm-accent);
}

.hm-principle-text {
	margin: 0;
	font-weight: 500;
	line-height: 1.65;
	color: var(--hm-text);
}

/* ==========================================================
   H6) 02 · จุดที่แผนมักหลุด · แถวปัญหา + เส้นขีดฆ่า + แถวสรุป
   ========================================================== */
.hm-pain-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: clamp(32px, 5vw, 72px);
}

.hm-pain-grid .ch-head {
	position: sticky;
	top: calc(var(--header-h) + 40px);
	margin: 0;
}

.hm-diag {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border-radius: var(--hm-radius);
	border: 1px solid var(--hm-line);
	background: var(--hm-surface);
	box-shadow: var(--hm-card-shadow);
}

.hm-diag-row {
	display: grid;
	grid-template-columns: 34px 10px minmax(0, 1fr);
	align-items: start;
	gap: 0 16px;
	padding: 22px 26px;
	border-top: 1px solid var(--hm-line);
}

.hm-diag-row:first-child {
	border-top: 0;
}

.hm-diag-idx {
	padding-top: 3px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: var(--hm-muted-2);
}

.hm-led {
	display: block;
	width: 10px;
	height: 10px;
	margin-top: 9px;
	border-radius: 50%;
	background: var(--hm-accent);
	box-shadow: 0 0 0 3px var(--hm-tint);
}

.hm-diag-body p {
	margin: 0;
	font-size: 0.97rem;
	color: var(--hm-muted);
}

.hm-diag-title {
	margin: 0 0 6px;
	font-size: 1.12rem;
	line-height: 1.5;
	color: var(--hm-muted);
}

/* เส้นขีดฆ่า: รูปสี่เหลี่ยมทึบ (SVG) ขยายความกว้าง · ตัดต่อทุกบรรทัดด้วย box-decoration-break */
.hm-strike {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%2316A34A'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 58%;
	background-size: 100% 2px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.is-dark .hm-strike {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%234AF28E'/%3E%3C/svg%3E");
}

.hm-diag-resolved {
	background: var(--hm-tint);
}

.hm-diag-resolved .hm-diag-idx {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 50%;
	background: var(--ember);
	color: var(--on-ember);
}

.hm-diag-resolved .hm-diag-idx .icon {
	width: 14px;
	height: 14px;
	stroke-width: 2.4;
}

.hm-diag-label {
	margin: 0 0 4px !important;
	font-size: 0.76rem !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--hm-accent) !important;
}

.hm-diag-resolved .hm-diag-body p:last-child {
	color: var(--hm-text);
	font-weight: 500;
}

/* สถานะก่อนเลื่อนถึง (มี JS เท่านั้น) · ไฟเตือนสีอำพัน หัวข้อยังไม่ถูกขีด */
.hm-js .hm-diag .hm-strike {
	background-size: 0 2px;
	transition: background-size 0.55s var(--hm-ease);
	transition-delay: calc(var(--i, 0) * 170ms + 120ms);
}

.hm-js .hm-diag .hm-diag-title {
	color: var(--hm-text);
	transition: color 0.4s ease;
	transition-delay: calc(var(--i, 0) * 170ms + 240ms);
}

.hm-js .hm-diag .hm-led {
	background: var(--hm-warn);
	box-shadow: 0 0 0 3px rgba(178, 108, 9, 0.16);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	transition-delay: calc(var(--i, 0) * 170ms + 300ms);
}

.hm-js .hm-diag .hm-diag-resolved {
	background: transparent;
	transition: background-color 0.5s ease;
	transition-delay: calc(var(--i, 0) * 170ms + 200ms);
}

.hm-js .hm-diag.is-on .hm-strike {
	background-size: 100% 2px;
}

.hm-js .hm-diag.is-on .hm-diag-title {
	color: var(--hm-muted);
}

.hm-js .hm-diag.is-on .hm-led {
	background: var(--hm-accent);
	box-shadow: 0 0 0 3px var(--hm-tint);
}

.hm-js .hm-diag.is-on .hm-diag-resolved {
	background: var(--hm-tint);
}

/* ==========================================================
   H7) 03 · วงจรการทำงาน · หน้าจอบันทึก EA + รายการขั้นตอน + ภาพ 02 + สิ่งที่ต้องเตรียม
   ========================================================== */
.hm-how-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: start;
	gap: clamp(28px, 4vw, 56px);
}

.hm-how-grid.is-solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 820px;
}

.hm-log {
	overflow: hidden;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: var(--black-2);
	color: var(--on-black);
	box-shadow: 0 26px 56px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hm-log-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hm-log-ic {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--mint);
}

.hm-log-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--on-black-2);
}

.hm-log-dots {
	display: inline-flex;
	gap: 6px;
}

.hm-log-dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
}

.hm-log-dots i:first-child {
	background: var(--ember);
}

.hm-log-out {
	margin: 0;
	padding: 20px 22px 24px;
	background: var(--black-deep);
	font-family: var(--font-body);
	font-size: 0.93rem;
	font-weight: 500;
	line-height: 1.9;
	font-variant-numeric: tabular-nums;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	color: var(--on-black);
}

.hm-log-line {
	display: inline;
}

.hm-log-line.cmd {
	color: var(--mint);
}

.hm-log-line.idx,
.hm-log-line.log {
	color: #FFFFFF;
}

.hm-log-line.ready {
	color: var(--ember);
	font-weight: 600;
}

.hm-log-out.is-typing .hm-log-line:last-child::after {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 1.05em;
	margin-left: 3px;
	border-radius: 2px;
	vertical-align: -0.16em;
	background: var(--mint);
	animation: hm-caret 1s steps(2, start) infinite;
}

@keyframes hm-caret {
	to {
		visibility: hidden;
	}
}

.hm-ledger {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hm-line);
}

.hm-log + .hm-ledger {
	margin-top: 30px;
}

.hm-how-main > .hm-ledger:first-child {
	margin-top: 0;
}

.hm-ledger-row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px solid var(--hm-line);
}

.hm-ledger-idx {
	padding-top: 2px;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--hm-accent);
}

.hm-ledger-body h3 {
	margin: 0 0 4px;
	font-size: 1.08rem;
	line-height: 1.5;
	color: var(--hm-text);
}

.hm-ledger-body p {
	margin: 0;
	font-size: 0.96rem;
	color: var(--hm-muted);
}

.hm-how-side {
	display: grid;
	gap: 22px;
}

.hm-req {
	padding: 24px;
	border-radius: 18px;
	border: 1px solid var(--hm-line);
	background: var(--hm-surface);
}

.hm-req-title {
	margin: 0 0 16px;
	font-size: 1.05rem;
	color: var(--hm-text);
}

/* ==========================================================
   H8) 04 · โมดูล · ตารางเส้นบาง 3×2 + ไอคอนวงกลม
   ========================================================== */
.hm-modules {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border-radius: 22px;
	border: 1px solid var(--hm-line);
	background: var(--hm-line);
}

.hm-module {
	position: relative;
	min-width: 0;
	padding: 30px 28px 32px;
	background: var(--hm-cell);
	transition: background-color 0.2s ease;
}

.hm-module::before {
	content: "";
	position: absolute;
	top: 0;
	right: 28px;
	left: 28px;
	height: 2px;
	border-radius: 0 0 2px 2px;
	background: var(--ember);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.32s var(--hm-ease);
}

.hm-module:hover {
	background: var(--hm-surface);
}

.hm-module:hover::before {
	transform: scaleX(1);
}

.hm-module-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 22px;
}

.hm-module-id {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
	color: var(--hm-accent);
}

.hm-module-title {
	margin: 0 0 8px;
	font-size: 1.14rem;
	line-height: 1.45;
	color: var(--hm-text);
}

.hm-module-desc {
	margin: 0;
	font-size: 0.96rem;
	color: var(--hm-muted);
}

.hm-module:hover .ic-badge {
	background: var(--ember);
	color: var(--on-ember);
}

.hm-module .ic-badge {
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* ==========================================================
   H9) แท็บ radio (ไม่ใช้ JS) · 05 การทดสอบ และ 07 แพ็กเกจ
   ========================================================== */
.hm-dossier,
.hm-tiers {
	position: relative;
}

.hm-tab-radio {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.hm-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: 100%;
	padding: 6px;
	border-radius: calc(var(--btn-radius-sm) + 6px);
	border: 1px solid var(--hm-line);
	background: var(--hm-surface);
}

.hm-tab {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: var(--btn-radius-sm);
	font-weight: 600;
	line-height: 1.3;
	color: var(--hm-muted);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.hm-tab:hover {
	color: var(--hm-text);
}

/* ป้ายแท็บตัดบรรทัดได้เฉพาะหลัง " · " (fenix_home_tab_label) */
.hm-tab .hm-nw {
	white-space: nowrap;
}

.hm-tab-idx {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: var(--hm-accent);
}

.hm-tab-rec {
	padding: 2px 9px;
	border-radius: var(--btn-radius-xs, 6px); /* ป้ายสถานะ: มุมมนเล็กน้อยแบบเดียวกับปุ่ม ไม่ใช้ทรงแคปซูล */
	background: var(--hm-tint);
	color: var(--hm-accent);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

#hm-tests-bt:checked ~ .hm-tabs label[for="hm-tests-bt"],
#hm-tests-fw:checked ~ .hm-tabs label[for="hm-tests-fw"],
#hm-tier-1:checked ~ .hm-tabs label[for="hm-tier-1"],
#hm-tier-2:checked ~ .hm-tabs label[for="hm-tier-2"],
#hm-tier-3:checked ~ .hm-tabs label[for="hm-tier-3"] {
	background: var(--ember);
	color: var(--on-ember);
}

#hm-tests-bt:checked ~ .hm-tabs label[for="hm-tests-bt"] .hm-tab-idx,
#hm-tests-fw:checked ~ .hm-tabs label[for="hm-tests-fw"] .hm-tab-idx,
#hm-tier-1:checked ~ .hm-tabs label[for="hm-tier-1"] .hm-tab-idx,
#hm-tier-2:checked ~ .hm-tabs label[for="hm-tier-2"] .hm-tab-idx,
#hm-tier-3:checked ~ .hm-tabs label[for="hm-tier-3"] .hm-tab-idx,
#hm-tier-1:checked ~ .hm-tabs label[for="hm-tier-1"] .hm-tab-rec,
#hm-tier-2:checked ~ .hm-tabs label[for="hm-tier-2"] .hm-tab-rec,
#hm-tier-3:checked ~ .hm-tabs label[for="hm-tier-3"] .hm-tab-rec {
	color: var(--on-ember);
}

#hm-tier-1:checked ~ .hm-tabs label[for="hm-tier-1"] .hm-tab-rec,
#hm-tier-2:checked ~ .hm-tabs label[for="hm-tier-2"] .hm-tab-rec,
#hm-tier-3:checked ~ .hm-tabs label[for="hm-tier-3"] .hm-tab-rec {
	background: rgba(6, 20, 11, 0.14);
}

#hm-tests-bt:focus-visible ~ .hm-tabs label[for="hm-tests-bt"],
#hm-tests-fw:focus-visible ~ .hm-tabs label[for="hm-tests-fw"],
#hm-tier-1:focus-visible ~ .hm-tabs label[for="hm-tier-1"],
#hm-tier-2:focus-visible ~ .hm-tabs label[for="hm-tier-2"],
#hm-tier-3:focus-visible ~ .hm-tabs label[for="hm-tier-3"] {
	outline: 2px solid var(--hm-accent);
	outline-offset: 3px;
}

.hm-tab-panels {
	margin-top: 34px;
}

.hm-tab-panel {
	display: none;
	min-width: 0;
}

#hm-tests-bt:checked ~ .hm-tab-panels .hm-panel-1,
#hm-tests-fw:checked ~ .hm-tab-panels .hm-panel-2,
#hm-tier-1:checked ~ .hm-tab-panels .hm-panel-1,
#hm-tier-2:checked ~ .hm-tab-panels .hm-panel-2,
#hm-tier-3:checked ~ .hm-tab-panels .hm-panel-3 {
	display: grid;
}

/* บทการทดสอบที่มีเรื่องเดียว (Backtest · แท็บ Forward ปิดเป็นค่าเริ่มต้น): front-page.php ไม่พิมพ์ radio และแถบแท็บ
   เนื้อหาจึงแสดงตรง ๆ ใต้หัวบท ไม่มีช่องว่างของแถบแท็บค้างอยู่ */
.hm-dossier--single .hm-tab-panels {
	margin-top: 0;
}

.hm-dossier--single .hm-tab-panel {
	display: grid;
}

/* ภาพในแท็บ/แถบเลื่อนไม่ต้องรอแอนิเมชัน reveal (แท็บที่ซ่อนอยู่ไม่เคยถูกเลื่อนถึง) */
.js .hm-tab-panel .reveal,
.js .hm-film .reveal {
	opacity: 1;
	transform: none;
}

/* 05 · การทดสอบ */
.hm-dossier .hm-tab-panel {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
}

.hm-dossier-media {
	max-width: 520px;
}

.hm-dossier .hm-tab-panel.is-solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 780px;
}

.hm-dossier-media,
.hm-dossier-body {
	min-width: 0;
}

.hm-dossier-body h3 {
	margin: 0 0 12px;
	font-size: 1.36rem;
	line-height: 1.4;
	color: var(--hm-text);
}

.hm-dossier-body p {
	color: var(--hm-muted);
}

.hm-dossier-body .btn {
	margin-top: 10px;
}

/* 07 · แพ็กเกจ (จอแคบ = แท็บเลือกทีละแพ็กเกจ) */
.hm-tier-panels {
	margin-top: 26px;
}

.hm-tier {
	grid-template-columns: minmax(0, 1fr);
	padding: 30px;
	border-radius: var(--hm-radius);
	border: 1px solid var(--hm-line);
	background: var(--hm-surface);
}

.hm-tier.is-featured {
	border-color: rgba(72, 247, 144, 0.55);
	box-shadow: inset 0 3px 0 var(--ember);
}

.hm-tier-head {
	margin: 0 0 18px;
}

.hm-tier-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0 0 6px;
	font-size: 1.4rem;
	color: var(--hm-text);
}

.hm-tier-rec {
	display: inline-flex;
	padding: 3px 11px;
	border-radius: var(--btn-radius-xs, 6px); /* ป้ายสถานะ: มุมมนเล็กน้อยแบบเดียวกับปุ่ม ไม่ใช้ทรงแคปซูล */
	background: var(--ember);
	color: var(--on-ember);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* คำโปรยสั้นหนึ่งถึงสองบรรทัดใต้ชื่อแพ็กเกจ: เกลี่ยสองบรรทัดให้ยาวใกล้กัน (เดิม "...พร้อมคนให้" / "ถาม" บนมือถือ)
   ใช้ text-wrap-style แบบเดียวกับกฎกลางท้าย style.css (ไม่แตะโหมดตัดบรรทัด) */
.hm-tier-tag {
	margin: 0;
	font-size: 0.95rem;
	color: var(--hm-muted);
	text-wrap-style: balance;
}

.hm-tier-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 22px;
	padding: 16px 0;
	border-top: 1px solid var(--hm-line);
	border-bottom: 1px solid var(--hm-line);
}

.hm-tier-amt {
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--hm-text);
}

.hm-tier-amt--contact {
	font-size: 1.28rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--hm-accent);
}

.hm-tier-period {
	font-size: 0.92rem;
	color: var(--hm-muted);
}

.hm-tier-list {
	margin-bottom: 28px;
}

.hm-tier .btn {
	justify-self: start;
	white-space: normal;
	text-align: center;
}

.hm-tier .btn-fire:hover {
	box-shadow: none;
}

/* ==========================================================
   H10) 06 · ติดตั้ง · แถบภาพเลื่อน (scroll-snap) + รายการ "> ขั้น 01"
   ========================================================== */
.hm-film {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(300px, 1fr);
	gap: 20px;
	margin: 0 0 30px;
	padding: 2px 2px 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--hm-line) transparent;
	border-radius: var(--hm-radius);
}

.hm-film:focus-visible {
	outline: 2px solid var(--hm-accent);
	outline-offset: 4px;
}

.hm-film > .hm-frame {
	min-width: 0;
	scroll-snap-align: start;
}

.hm-install-ledger {
	display: grid;
	grid-template-columns: repeat(var(--rows, 3), minmax(0, 1fr));
	gap: 20px;
	border-top: 0;
}

.hm-install-ledger .hm-ledger-row {
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	padding: 20px 0 0;
	border-top: 2px solid var(--hm-line);
	border-bottom: 0;
}

.hm-install-ledger .hm-ledger-row:first-child {
	border-top-color: var(--ember);
}

.hm-ledger-caret {
	color: var(--ember-deep);
}

.is-dark .hm-ledger-caret {
	color: var(--mint);
}

.hm-actions .btn .icon:first-child {
	color: var(--hm-accent);
}

/* ==========================================================
   H11) 08 · ถาม-ตอบ · มีเลข เปิดทีละข้อ · 2 คอลัมน์ที่ ≥960px
   ========================================================== */
.hm-qlog {
	display: grid;
	gap: 12px;
}

.hm-q {
	border-radius: 16px;
	border: 1px solid var(--hm-line);
	background: var(--hm-cell);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.hm-surface .hm-q,
.hm-faq:not(.is-dark) .hm-q {
	background: #FFFFFF;
}

.hm-q:hover {
	border-color: rgba(72, 247, 144, 0.4);
}

.hm-q[open] {
	border-color: rgba(72, 247, 144, 0.55);
	box-shadow: var(--hm-card-shadow);
}

.hm-q-sum {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 30px;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.55;
	color: var(--hm-text);
}

.hm-q-sum::-webkit-details-marker {
	display: none;
}

.hm-q-sum:focus-visible {
	outline: 2px solid var(--hm-accent);
	outline-offset: 2px;
	border-radius: 16px;
}

.hm-q-idx {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: var(--hm-accent);
}

.hm-q-mark {
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: var(--btn-radius-sm);
	border: 1px solid var(--hm-line);
	color: var(--hm-text);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hm-q-mark::before,
.hm-q-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.6px;
	border-radius: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.hm-q-mark::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 0.22s var(--hm-ease);
}

.hm-q[open] .hm-q-mark {
	border-color: var(--ember);
	background: var(--ember);
	color: var(--on-ember);
}

.hm-q[open] .hm-q-mark::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.hm-q-ans {
	padding: 0 20px 20px calc(20px + 34px + 12px);
	color: var(--hm-muted);
}

.hm-q-ans p {
	margin: 0 0 0.8em;
	color: var(--hm-muted);
}

.hm-q-ans p:last-child {
	margin-bottom: 0;
}

/* ==========================================================
   H12) 09 · แถบเตือนความเสี่ยง (พื้นสว่างโทนอำพันเสมอ · ข้อความเต็ม)
   ========================================================== */
.hm-ch.hm-risk {
	--hm-line: rgba(178, 108, 9, 0.3);
	padding: clamp(56px, 7vw, 88px) 0;
	border-top: 4px solid var(--warn);
	border-bottom: 4px solid var(--warn);
	background: #FFF8EB;
	color: #3A2805;
}

.hm-hazard-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 16px;
}

.hm-hazard-stamp {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 13px;
	border-radius: var(--btn-radius-xs, 6px); /* ป้ายสถานะ: มุมมนเล็กน้อยแบบเดียวกับปุ่ม ไม่ใช้ทรงแคปซูล */
	background: #9A5D08; /* --warn (#B26C09) กับตัวอักษรขาวได้แค่ 4.2:1 · เฉดเดียวกันที่เข้มขึ้นได้ 5.3:1 */
	color: #FFFFFF;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.hm-hazard-topic {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #8A5307;
}

.hm-hazard-num {
	font-variant-numeric: tabular-nums;
}

.hm-hazard-title {
	max-width: 860px;
	margin: 0 0 14px;
	color: #2B1D04;
}

.hm-hazard-text {
	max-width: 900px;
	margin: 0 0 28px;
	font-size: 1.125rem;
	line-height: 1.85;
	color: #4A3510;
}

.hm-risk .btn-dark {
	background: #2B1D04;
	border-color: #2B1D04;
	color: #FFFFFF;
	white-space: normal;
}

.hm-risk .btn-dark:hover {
	background: #4A3510;
	border-color: #4A3510;
	color: #FFFFFF;
}

/* ==========================================================
   H13) Responsive
   ========================================================== */
@media (min-width: 960px) {
	.hm-qlog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 14px 18px;
	}

	/* การ์ดที่ปิดอยู่ในแถวเดียวกันสูงเท่ากัน: เดิมคำถามสองบรรทัดคู่กับคำถามบรรทัดเดียว การ์ดสูง 90px กับ 68px ช่องใต้การ์ดเตี้ยจึงกว้างกว่าแถวอื่น
	   - การ์ดยืดเต็มแถว (stretch) และหัวคำถามของการ์ดที่ปิดสูงเต็มการ์ด คำถามจึงอยู่กลางการ์ดในแนวตั้ง
	   - การ์ดที่เปิด และการ์ดคู่แถวของมัน กลับไปสูงตามเนื้อหาของตัวเอง (เปิดข้อหนึ่งแล้วข้อข้าง ๆ ไม่ถูกยืดตาม)
	   การ์ดคู่แถวที่อยู่ก่อนหน้าต้องเลือกด้วย :has() จึงครอบทั้งชุดด้วย @supports: เบราว์เซอร์ที่ไม่มี :has() ใช้แบบเดิม (ชิดบน) */
	@supports selector(:has(*)) {
		.hm-qlog {
			align-items: stretch;
		}

		.hm-q:not([open]) > .hm-q-sum {
			height: 100%;
		}

		.hm-q[open],
		.hm-q[open]:nth-child(odd) + .hm-q,
		.hm-q:nth-child(odd):has(+ .hm-q[open]) {
			align-self: start;
		}
	}
}

/* ตารางเทียบแพ็กเกจ (≥1100px) · จำนวนคอลัมน์ตามแพ็กเกจจริง */
@media (min-width: 1100px) {
	.hm-tiers .hm-tab-radio,
	.hm-tier-tabs {
		display: none;
	}

	.hm-tier-panels {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 1px;
		margin-top: 0;
		overflow: hidden;
		border-radius: 22px;
		border: 1px solid var(--hm-line);
		background: var(--hm-line);
	}

	.hm-tier-panels .hm-tier {
		display: flex !important;
		flex-direction: column;
		border: 0;
		border-radius: 0;
		background: var(--hm-cell);
	}

	.hm-tier-panels .hm-tier.is-featured {
		background: var(--hm-surface);
		box-shadow: inset 0 3px 0 var(--ember);
	}

	.hm-tier .hm-tier-btn {
		align-self: flex-start;
		margin-top: auto;
	}
}

@media (max-width: 1024px) {
	.hm-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.hm-hero-visual {
		justify-self: center;
		max-width: 480px;
	}

	.hm-hero-bg {
		clip-path: polygon(0 58%, 100% 44%, 100% 100%, 0 100%);
	}

	.hm-hero-bg::after {
		clip-path: polygon(0 88%, 100% 78%, 100% 100%, 0 100%);
	}

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

	.hm-spec-item:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.hm-spec-item:nth-child(n + 3) {
		border-top: 1px solid var(--border);
	}

	.hm-hero.is-dark .hm-spec-item:nth-child(n + 3) {
		border-top-color: var(--border-dark);
	}

	.hm-what-grid,
	.hm-pain-grid,
	.hm-how-grid,
	.hm-dossier .hm-tab-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.hm-what-media,
	.hm-pain-grid .ch-head {
		position: static;
	}

	.hm-what-media {
		width: 100%;
		max-width: 560px;
	}

	.hm-pain-grid .ch-head {
		margin-bottom: 8px;
	}

	.hm-how-side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.hm-how-side > :only-child {
		grid-column: 1 / -1;
	}

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

@media (max-width: 760px) {
	.home-v3 .ch-head {
		margin-bottom: 30px;
	}

	.hm-how-side {
		grid-template-columns: minmax(0, 1fr);
	}

	.hm-sheet-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.hm-modules {
		grid-template-columns: minmax(0, 1fr);
	}

	.hm-module {
		padding: 24px 22px 26px;
	}

	.hm-film {
		grid-auto-columns: 84%;
		gap: 14px;
	}

	.hm-install-ledger {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.hm-install-ledger .hm-ledger-row {
		padding: 16px 0;
	}

	.hm-log-out {
		min-height: 9em;
		padding: 16px 16px 20px;
		font-size: 0.88rem;
	}

	.hm-tier {
		padding: 24px 22px;
	}

	.hm-tier-amt {
		font-size: 2rem;
	}
}

@media (max-width: 640px) {
	.hm-hero-headline {
		font-size: clamp(2rem, 9.6vw, 2.6rem);
	}

	.hm-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hm-hero-actions .btn {
		width: 100%;
		white-space: normal;
	}

	.hm-hero-actions .hm-textlink {
		justify-content: center;
	}

	.hm-spec {
		grid-template-columns: minmax(0, 1fr);
		padding: 8px 0; /* แถวแรกและแถวสุดท้ายไม่ชิดขอบแถบ (แถวละ 16px + 8px) */
	}

	.hm-spec-item,
	.hm-spec-item:nth-child(odd) {
		padding: 16px 0;
		border-left: 0;
	}

	.hm-spec-item + .hm-spec-item {
		border-top: 1px solid var(--border);
	}

	.hm-hero.is-dark .hm-spec-item + .hm-spec-item {
		border-top-color: var(--border-dark);
	}

	.hm-diag-row {
		grid-template-columns: 28px 10px minmax(0, 1fr);
		gap: 0 12px;
		padding: 18px 18px;
	}

	.hm-ledger-row {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 12px;
	}

	.hm-tabs {
		display: flex;
		width: 100%;
	}

	.hm-tab {
		flex: 1 1 0;
		justify-content: center;
		padding: 10px 12px;
		font-size: 0.93rem;
		text-align: center;
	}

	.hm-tier-tabs .hm-tab {
		flex-direction: column;
		gap: 2px;
	}

	.hm-tier .btn,
	.hm-dossier-body .btn,
	.hm-actions .btn {
		width: 100%;
	}

	.hm-q-sum {
		grid-template-columns: 28px minmax(0, 1fr) 28px;
		gap: 10px;
		padding: 16px;
	}

	.hm-q-mark {
		width: 28px;
		height: 28px;
	}

	.hm-q-ans {
		padding: 0 16px 18px calc(16px + 28px + 10px);
	}

	.hm-hazard-text {
		font-size: 1.0625rem;
	}

	.hm-risk .btn {
		width: 100%;
	}
}

/* แท็บบทการทดสอบบนจอแคบ: ป้าย "Backtest · ย้อนหลัง" ไม่พอดีบรรทัดเดียวในแท็บครึ่งจอ (ต้องการราว 193px · แท็บกว้าง (จอ − 68) / 2)
   → ตั้งใจให้เป็นสองบรรทัด ช่วงละบรรทัด และซ่อนจุดคั่น (เดิมจุดค้างอยู่ท้ายบรรทัดแรก "BACKTEST ·" / "ย้อนหลัง")
   จอ 481px ขึ้นไปป้ายพอดีบรรทัดเดียว จึงแสดงจุดตามเดิม · มาร์กอัปจาก fenix_home_tab_label() (inc/modules/home.php) */
@media (max-width: 480px) {
	.hm-tab-txt .hm-nw {
		display: block;
	}

	.hm-tab-sep {
		display: none;
	}
}

/* ==========================================================
   H14) ลดการเคลื่อนไหว · ทุกอย่างอยู่สถานะจบ
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
	.hm-js .hm-diag .hm-strike {
		background-size: 100% 2px;
		transition: none;
	}

	.hm-js .hm-diag .hm-diag-title {
		color: var(--hm-muted);
		transition: none;
	}

	.hm-js .hm-diag .hm-led {
		background: var(--hm-accent);
		box-shadow: 0 0 0 3px var(--hm-tint);
		transition: none;
	}

	.hm-js .hm-diag .hm-diag-resolved {
		background: var(--hm-tint);
		transition: none;
	}

	.hm-rail-n[data-tick],
	.hm-log-out.is-typing .hm-log-line:last-child::after {
		animation: none;
	}

	.hm-module::before,
	.hm-textlink .icon,
	.hm-q-mark::after,
	.hm-rail-tip {
		transition: none;
	}
}

/* โหมดขาว/ดำสลับ: ไม่วาดแผงเข้มใต้ข้อความ Hero บนจอ ≤1024px
   แผง EA จำลองจึงตกลงมาอยู่บนพื้นขาว → คำบรรยาย "ภาพจำลอง ไม่ใช่ผลการเทรดจริง" ต้องเป็นตัวอักษรเข้ม (เดิมขาวบนขาว มองไม่เห็น)
   และเงาของแผงใช้เงานุ่มสีเทาของธีม ไม่งั้นเงาดำเข้มจะทาทับพื้นใต้คำบรรยายจนอ่านยาก */
@media (max-width: 1024px) {
	.hm-hero:not(.is-dark) .hm-hero-bg {
		display: none;
	}

	.hm-hero:not(.is-dark) .ea-panel {
		box-shadow: var(--shadow-lift);
	}

	.hm-hero:not(.is-dark) .ea-panel-caption {
		color: var(--ash);
	}
}

/* ==========================================================
   H15) ส่วนต่อเติม (เพิ่มภายหลัง · ทับกฎด้านบนได้เพราะอยู่ท้ายไฟล์)
   - บทระบบคืออะไร: ภาพแถบแนวนอนเต็มความกว้าง + ลิงก์ท้ายบท
   - โมดูลที่มีลิงก์ (กดได้ทั้งการ์ด)
   - บทเทียบวิธีทำงาน (.hp-compare) · ใช้ตารางของธีม เพิ่มหัวแถวและคอลัมน์ของ EA
   - เส้นทางเริ่มต้น 6 ขั้น (.hm-install-ledger 3 คอลัมน์ 2 แถว) + กระเบื้องอุปกรณ์ (.hm-devices)
   - บทเช็กความพร้อม (.hp-ready) · ไม่มี .hm-js = รายการธรรมดา · มี .hm-js = ช่องติ๊ก + วงความคืบหน้า
   สีทั้งหมดอ่านจาก token --hm-* ของโทนพื้น · ไม่มี gradient / glow
   ========================================================== */

/* ---------- บทระบบคืออะไร ---------- */
.hm-what-grid.is-wide {
	max-width: none;
}

.hm-what-grid.is-wide .hm-what-copy > :not(.hm-what-media) {
	max-width: 820px;
}

.hm-what-media--wide {
	position: static;
	width: 100%;
	max-width: none;
	margin: 32px 0 6px;
}

.hm-what-more {
	margin-top: 22px;
}

/* ---------- โมดูลที่มีลิงก์ · ลิงก์อยู่ในหัวข้อ แล้วขยายพื้นที่กดเต็มการ์ดด้วย ::after ---------- */
.hm-module.has-link {
	display: flex;
	flex-direction: column;
}

.hm-module-link {
	color: inherit;
	text-decoration: none;
}

.hm-module-link:hover,
.hm-module-link:focus-visible {
	color: inherit;
}

.hm-module-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hm-module-link:focus-visible {
	outline: none;
}

.hm-module-link:focus-visible::after {
	outline: 2px solid var(--hm-accent);
	outline-offset: -4px;
	border-radius: 6px;
}

.home-v3 .hm-module-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: auto 0 0;
	padding-top: 18px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--hm-accent);
}

.hm-module-more .icon {
	transition: transform 0.18s var(--hm-ease);
}

.hm-module.has-link:hover .hm-module-more .icon {
	transform: translateX(4px);
}

/* ---------- บทเทียบวิธีทำงาน ---------- */
.hp-compare-wrap {
	box-shadow: var(--hm-card-shadow);
}

.hp-compare .hp-compare-table {
	table-layout: fixed;
}

.hp-compare .hp-compare-table thead th {
	white-space: normal;
	vertical-align: middle;
}

.hp-compare .hp-compare-table thead th:first-child {
	width: 24%;
}

.hp-compare .hp-compare-table thead th.is-brand {
	background: var(--ember);
	color: var(--on-ember);
}

.hp-compare .hp-compare-table tbody th {
	font-weight: 600;
	color: var(--hm-text);
}

.hp-compare .hp-compare-table tbody tr:nth-child(even) th {
	background: #F9FAFB;
}

.hp-compare.is-dark .hp-compare-table tbody tr:nth-child(even) th {
	background: rgba(255, 255, 255, 0.025);
}

.hp-compare .hp-compare-table tbody tr:last-child th {
	border-bottom: 0;
}

.hp-compare .hp-compare-table td.is-brand,
.hp-compare .hp-compare-table tbody tr:nth-child(even) td.is-brand {
	background: var(--hm-tint);
	color: var(--hm-text);
	font-weight: 500;
}

.hp-compare .hm-notice {
	margin-top: 24px;
}

/* ---------- เส้นทางเริ่มต้น 6 ขั้น ---------- */
.hm-install-ledger {
	row-gap: 34px;
}

.hm-install-ledger .hm-ledger-row {
	grid-template-rows: auto 1fr;
}

.hm-install-ledger .hm-ledger-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hm-ledger-link {
	margin-top: auto;
	padding-top: 14px;
	font-size: 0.93rem;
}

/* แถบภาพของขั้นตอน: ภาพเดียวไม่ขยายเต็มแถว */
.hm-film > .hm-frame {
	max-width: 560px;
}

/* ---------- กระเบื้องอุปกรณ์ ---------- */
.hm-devices {
	margin-top: 48px;
}

.hm-devices-title {
	margin: 0 0 16px;
	font-size: 1.08rem;
	line-height: 1.5;
	color: var(--hm-text);
}

.hm-device-list {
	display: grid;
	grid-template-columns: repeat(var(--devices, 5), minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hm-device-list > li {
	min-width: 0;
}

.hm-device {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	height: 100%;
	padding: 18px 18px 20px;
	border-radius: var(--hm-radius-sm);
	border: 1px solid var(--hm-line);
	background: var(--hm-surface);
	color: var(--hm-text);
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

a.hm-device:hover,
a.hm-device:focus-visible {
	border-color: rgba(72, 247, 144, 0.55);
	color: var(--hm-text);
}

a.hm-device:focus-visible {
	outline: 2px solid var(--hm-accent);
	outline-offset: 3px;
}

.hm-device .ic-badge {
	width: 42px;
	height: 42px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hm-device .ic-badge .icon {
	width: 20px;
	height: 20px;
}

a.hm-device:hover .ic-badge {
	background: var(--ember);
	color: var(--on-ember);
}

.hm-device-text {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.hm-device-name {
	font-weight: 700;
	line-height: 1.4;
}

.hm-device-hint {
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--hm-muted);
}

.hm-device-go {
	position: absolute;
	top: 20px;
	right: 18px;
	color: var(--hm-accent);
	transition: transform 0.18s var(--hm-ease);
}

a.hm-device:hover .hm-device-go {
	transform: translateX(3px);
}

.hm-devices + .hm-notice {
	margin-top: 20px;
}

/* ---------- บทเช็กความพร้อม ---------- */
.hp-ready-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(26px, 4vw, 52px);
	align-items: start;
	max-width: 820px;
}

.hm-js .hp-ready-grid {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	max-width: none;
}

.hp-ready-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-ready-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 18px;
	padding: 15px 18px;
	border-radius: 16px;
	border: 1px solid var(--hm-line);
	background: var(--hm-cell);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.hm-surface .hp-ready-item {
	background: #FFFFFF;
}

.hp-ready-label {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex: 1 1 280px;
	min-width: 0;
	font-weight: 500;
	line-height: 1.6;
	color: var(--hm-text);
}

/* ไม่มี JS: จุดนำหน้าแทนช่องติ๊ก (ช่องติ๊กที่กดแล้วไม่มีอะไรเกิดขึ้นจะทำให้สับสน) */
.hp-ready-label::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin: 0.6em 4px 0 2px;
	border-radius: 50%;
	background: var(--hm-accent);
}

.hp-ready-box,
.hp-ready-tick {
	display: none;
}

.hm-js .hp-ready-label {
	cursor: pointer;
}

.hm-js .hp-ready-label::before {
	content: none;
}

.hm-js .hp-ready-box {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 26px;
	height: 26px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.hm-js .hp-ready-tick {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	border: 2px solid var(--hm-muted-2);
	color: transparent;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.hp-ready-tick .icon {
	width: 15px;
	height: 15px;
	stroke-width: 2.6;
}

.hm-js .hp-ready-label:hover .hp-ready-tick {
	border-color: var(--hm-accent);
}

.hm-js .hp-ready-box:checked + .hp-ready-tick {
	border-color: var(--ember);
	background: var(--ember);
	color: var(--on-ember);
}

.hm-js .hp-ready-box:focus-visible + .hp-ready-tick {
	outline: 2px solid var(--hm-accent);
	outline-offset: 3px;
}

.hp-ready-item.is-done {
	border-color: rgba(72, 247, 144, 0.5);
	background: var(--hm-tint);
}

.hp-ready-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--hm-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	text-decoration-color: rgba(72, 247, 144, 0.45);
}

.hp-ready-link:hover,
.hp-ready-link:focus-visible {
	color: var(--hm-accent);
	text-decoration-color: currentColor;
}

/* แผงความคืบหน้า · แสดงเมื่อ JS ทำงานเท่านั้น */
.hp-ready-meter {
	display: none;
}

.hm-js .hp-ready-meter {
	position: sticky;
	top: calc(var(--header-h) + 36px);
	display: grid;
	justify-items: center;
	gap: 16px;
	padding: 30px 26px;
	border-radius: var(--hm-radius);
	border: 1px solid var(--hm-line);
	background: var(--hm-surface);
	text-align: center;
}

.hp-ready-meter [hidden] {
	display: none !important;
}

.hp-ring {
	position: relative;
	width: 136px;
	height: 136px;
}

.hp-ring svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.hp-ring-bg,
.hp-ring-fg {
	fill: none;
	stroke-width: 10;
}

.hp-ring-bg {
	stroke: var(--hm-line);
}

.hp-ring-fg {
	stroke: var(--ember);
	stroke-dasharray: 100;
	stroke-dashoffset: calc(100 - var(--p, 0));
	transition: stroke-dashoffset 0.35s var(--hm-ease);
}

.hp-ring-num {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 5px;
	padding-top: 44px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--hm-text);
}

.hp-ring-num b {
	font-size: 2.3rem;
	font-weight: 800;
}

.hp-ring-num i {
	font-size: 0.95rem;
	font-style: normal;
	font-weight: 600;
	color: var(--hm-muted);
}

.hp-ring.is-full .hp-ring-num b {
	color: var(--hm-accent);
}

.hp-ready-live {
	display: grid;
	gap: 8px;
}

.home-v3 .hp-ready-status {
	margin: 0;
	font-weight: 700;
	color: var(--hm-text);
}

.home-v3 .hp-ready-done {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.65;
	color: var(--hm-muted);
}

.hp-ready-btn {
	white-space: normal;
	text-align: center;
}

.hp-ready-btn:hover {
	box-shadow: none;
}

.home-v3 .hp-ready-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--hm-line);
	font-size: 0.82rem;
	line-height: 1.6;
	text-align: left;
	color: var(--hm-muted-2);
}

.hp-ready-note .icon {
	flex: 0 0 auto;
	margin-top: 0.25em;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.hm-what-media--wide {
		max-width: none;
	}

	.hm-install-ledger {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hm-device-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hm-js .hp-ready-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hm-js .hp-ready-meter {
		position: static;
	}
}

@media (max-width: 760px) {
	.hm-install-ledger {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.hm-ledger-link {
		padding-top: 8px;
	}

	.hm-devices {
		margin-top: 36px;
	}

	.hm-device-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.hm-device {
		flex-direction: row;
		align-items: center;
		padding: 14px 44px 14px 16px;
	}

	.hm-device-go {
		top: 50%;
		right: 16px;
		margin-top: -8px;
	}

	.hp-ring {
		width: 116px;
		height: 116px;
	}

	.hp-ring-num {
		padding-top: 37px;
	}

	.hp-ring-num b {
		font-size: 2rem;
	}

	.hm-js .hp-ready-meter {
		padding: 24px 20px;
	}
}

/* ตารางเทียบบนจอแคบ: แต่ละแถวเป็นการ์ด (กติกากลางอยู่ที่ components.css / pages.css) หัวแถวเป็นหัวการ์ด */
@media (max-width: 640px) {
	.hp-compare-wrap {
		box-shadow: none;
	}

	.hp-compare .hp-compare-table {
		table-layout: auto;
	}

	.hp-compare .hp-compare-table tbody th,
	.hp-compare .hp-compare-table tbody tr:nth-child(even) th {
		display: block;
		padding: 12px 16px;
		border-bottom: 1px solid var(--hm-line);
		background: var(--coal);
		color: var(--ink);
	}

	.hp-compare.is-dark .hp-compare-table tbody th,
	.hp-compare.is-dark .hp-compare-table tbody tr:nth-child(even) th {
		background: var(--black-3);
		color: #FFFFFF;
	}

	.hp-compare .hp-compare-table tbody tr:last-child th {
		border-bottom: 1px solid var(--hm-line);
	}

	.hp-compare .hp-compare-table tbody td:last-child {
		border-bottom: 0;
	}

	.hp-compare .hp-compare-table td.is-brand::before {
		color: var(--hm-accent);
	}

	.hp-ready-item {
		padding: 14px 16px;
	}

	.hp-ready-link {
		margin-left: 40px;
	}

	.hp-ready-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hm-module-more .icon,
	.hm-device,
	.hm-device .ic-badge,
	.hm-device-go,
	.hp-ready-item,
	.hp-ready-tick,
	.hp-ring-fg {
		transition: none;
	}
}

/* ==========================================================
   H16) แดชบอร์ดบนหน้าแรก + กล่องข้อเท็จจริงของระบบ (เพิ่มภายหลัง · ทับกฎด้านบนได้เพราะอยู่ท้ายไฟล์)
   - Hero: ลิงก์ข้อความไปโหมดเยี่ยมชมของแดชบอร์ด (.hm-hero-dash) อยู่ต่อจากปุ่มติดต่อ ไม่ดันปุ่ม LINE ลง
   - บทวงจรการทำงาน: กล่อง "ข้อที่ต้องรู้" เรื่องวิธีแก้ออเดอร์ (.hm-recovery) ในคอลัมน์ข้าง
   - บทการทดสอบ: หมายเหตุชี้ไปผล Backtest และแดชบอร์ด (.hm-tests-results) · หน้าแรกไม่แสดงตัวเลข
   - เส้นทางเริ่มต้น: บรรทัดเรื่องแดชบอร์ดใต้หัวบท (.hm-ways · FALCON ใช้ผ่านแดชบอร์ดอย่างเดียว)
   - บทแดชบอร์ด (.hm-dash): หัวบทของหน้าแรก + การ์ดจาก assets/css/dashboard.css (.dash-card)
   สีทั้งหมดอ่านจาก token --hm-* ของโทนพื้น · ไม่มี gradient / glow
   ========================================================== */

/* ---------- Hero · ลิงก์เข้าชมแดชบอร์ด ---------- */
.hm-hero .hm-hero-dash {
	gap: 7px;
}

.hm-hero-dash .icon {
	flex: 0 0 auto;
	opacity: 0.85;
}

.hm-hero-dash:hover .icon {
	transform: none;
}

/* ---------- บทวงจรการทำงาน · กล่องข้อที่ต้องรู้ ---------- */
.hm-recovery {
	border-color: rgba(178, 108, 9, 0.32);
	background: rgba(178, 108, 9, 0.06);
}

.is-dark .hm-recovery {
	border-color: rgba(242, 182, 76, 0.28);
	background: rgba(242, 182, 76, 0.06);
}

.hm-recovery-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--hm-text);
}

.hm-recovery-head .icon {
	flex: 0 0 auto;
	color: var(--hm-warn);
}

.hm-recovery-text {
	margin: 0;
	font-size: 0.96rem;
	line-height: 1.75;
	color: var(--hm-text);
}

.hm-recovery-link {
	margin-top: 12px;
	font-size: 0.93rem;
}

/* ---------- บทการทดสอบ · หมายเหตุชี้ไปผล Backtest ---------- */
.hm-notice--info .icon {
	color: var(--hm-accent);
}

.hm-tests-results-body {
	min-width: 0;
}

.hm-tests-results-body p {
	margin: 0;
}

.hm-tests-results .hm-tests-results-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 26px;
	margin-top: 8px;
}

.hm-tests-results-links .hm-textlink {
	font-size: 0.93rem;
}

/* ไอคอนในลิงก์ข้อความของหมายเหตุใช้สีของลิงก์ (ไม่ใช่สีเตือนของ .hm-notice .icon) และไม่ขยับลง */
.hm-notice .hm-textlink .icon {
	margin-top: 0;
	color: currentColor;
}

.hm-tests-results + .hm-notice {
	margin-top: 14px;
}

/* ---------- เส้นทางเริ่มต้น · บรรทัด "ใช้ได้สองทาง" ----------
   กว้างเต็มคอลัมน์เท่าตารางขั้นตอนใต้กล่องและกล่องหมายเหตุท้ายบท (เดิมจำกัด 980px ขอบขวาจึงหยุดก่อนกล่องอื่นของบทราว 160px) */
.hm-ways {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: calc(clamp(36px, 5vw, 56px) * -0.45) 0 34px;
	padding: 14px 18px;
	border-radius: var(--hm-radius-sm);
	border: 1px solid var(--hm-line);
	background: var(--hm-surface);
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--hm-text);
}

.hm-ways > .icon {
	flex: 0 0 auto;
	color: var(--hm-accent);
}

/* ข้อความที่ยาวเกินหนึ่งบรรทัดแบ่งสองบรรทัดให้ยาวใกล้กัน (กล่องกว้างเต็มคอลัมน์แล้วบรรทัดล่างจะเหลือแค่ "ทั้งสองทาง") */
.hm-ways-text {
	flex: 1 1 340px;
	min-width: 0;
	text-wrap: balance;
}

.hm-ways-link {
	flex: 0 0 auto;
	padding: 2px;
	font-size: 0.93rem;
}

/* ---------- บทแดชบอร์ด ---------- */
.hm-dash .dash-promo {
	margin: 0;
}

.hm-dash .dash-card-title {
	font-size: clamp(1.25rem, 2.1vw, 1.6rem);
}

@media (max-width: 640px) {
	.hm-ways {
		margin-top: -8px;
		padding: 14px 16px;
	}

	.hm-ways > .icon {
		align-self: flex-start;
		margin-top: 0.3em;
	}

	.hm-ways-text {
		flex-basis: calc(100% - 40px);
	}

	.hm-tests-results .hm-tests-results-links {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hm-hero-dash .icon,
	.hm-recovery-link .icon {
		transition: none;
	}
}