/*
 * FALCON PRO EA · Site chrome (header · ลิ้นชักเมนู · แถบติดต่อท้ายหน้าย่อย · footer · บาร์ล่างมือถือ)
 * โหลดหลัง style.css + components.css · ใช้ token ใน :root ของ style.css
 * หน้าตา FALCON: มุมโค้ง ปุ่มสี่เหลี่ยมมุมมน (--btn-radius) เส้นบาง เงานุ่ม เขียวทึบ · ห้าม gradient / glow
 */

:root {
	--header-bg: var(--black);
	--header-bg-scrolled: var(--black-deep);
	--header-text: var(--on-black);
	--header-muted: var(--on-black-2);
	--header-panel: var(--black-2);
	--header-chip: rgba(255, 255, 255, 0.06);
	--header-accent: var(--mint);
	--dock-h: 68px;
}

/* ==========================================================
   1) Header โทนเข้ม · พื้นทึบ (ไม่ใช้ backdrop-filter / transform บน .site-header
      เพราะจะทำให้ header เป็น containing block ของลิ้นชัก position:fixed)
   ========================================================== */
.theme-dark .site-header,
.theme-dark .site-header.scrolled {
	background: var(--header-bg);
	border-bottom-color: var(--border-dark);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.theme-dark .site-header.scrolled {
	background: var(--header-bg-scrolled);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.theme-dark .nav-list a {
	color: var(--header-text);
}

.theme-dark .nav-list a:hover {
	color: #FFFFFF;
}

.theme-dark .nav-list .current-menu-item > a,
.theme-dark .nav-list .current-menu-ancestor > a,
.theme-dark .nav-list .current-menu-parent > a {
	color: var(--header-accent);
}

.theme-dark .nav-list .sub-menu {
	border-color: var(--border-dark);
	background: var(--header-panel);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.theme-dark .nav-list .sub-menu a {
	color: var(--header-muted);
}

/* แถวที่ชี้อยู่: ขีดซ้ายเขียวทึบ 2px (พื้นโปร่งอย่างเดียวบนแผงเข้มมองแทบไม่ออก) */
.theme-dark .nav-list .sub-menu a:hover,
.theme-dark .nav-list .sub-menu a:focus-visible {
	background: rgba(72, 247, 144, 0.10);
	box-shadow: inset 2px 0 0 var(--header-accent);
	color: #FFFFFF;
}

.theme-dark .nav-list .sub-menu .current-menu-item > a {
	color: var(--header-accent);
}

/* ปุ่มเปิดเมนูมือถือ · ไม่มีกรอบ ขีดขาว 3 เส้น 24×3 (ห่าง 5px → ไขว้กันที่ 8px) */
.theme-dark .nav-toggle {
	border-color: transparent;
	background: transparent;
}

.theme-dark .nav-toggle span {
	width: 24px;
	height: 3px;
	background: var(--header-text);
}

.theme-dark.nav-open .nav-toggle span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.theme-dark.nav-open .nav-toggle span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
	.theme-dark .nav-toggle:hover span {
		background: var(--header-accent);
	}
}

.theme-dark .language-switcher summary {
	border-color: var(--border-dark);
	background: var(--header-chip);
	color: var(--header-text);
}

.theme-dark .language-switcher-menu {
	border-color: var(--border-dark);
	background: var(--header-panel);
}

/* วงแหวนโฟกัสบนพื้นเข้ม: เขียวสว่าง (เขียวหลักบนพื้นเข้มจางเกิน) */
.theme-dark .site-header :focus-visible,
.site-footer--console :focus-visible,
.cta-console :focus-visible,
.mobile-app-nav.dock :focus-visible {
	outline: 2px solid var(--mint);
	outline-offset: 3px;
}

/* ไม่มี JS ลิ้นชักเปิดไม่ได้ · ซ่อนปุ่มที่กดแล้วไม่เกิดอะไร (บาร์ล่าง + ดัชนีท้ายเว็บยังพาไปทุกหน้า) */
.no-js .nav-toggle {
	display: none !important;
}

/* ปุ่ม LINE + OpenChat และแถวโซเชียลในลิ้นชัก (แสดงเฉพาะโหมดมือถือ) */
.nav-contact,
.nav-social {
	display: none;
}

/* ปุ่มติดต่อบนแถบหัว · ปุ่มเขียว FALCON ตัวอักษรเข้ม (ใช้ .btn .btn-fire .btn-sm) อยู่ต่อจากเมนู
   จอ ≤760px ที่มีบาร์ล่าง → ซ่อน (ปุ่มติดต่ออยู่กลางบาร์ล่างแล้ว) · ไม่มีบาร์ล่าง → ยังอยู่ข้างปุ่มเมนู */
.header-cta {
	flex: 0 0 auto;
	gap: 8px;
	font-weight: 600;
}

.header-cta .icon {
	width: 18px;
	height: 18px;
}

@media (max-width: 760px) {
	.header-cta {
		padding: 0.5rem 0.9rem;
		font-size: 0.86rem;
	}

	body.has-dock .header-cta {
		display: none;
	}
}

/* ปุ่มสมาชิกแดชบอร์ดบนแถบหัว (fenix_chrome_header_member) · อยู่ระหว่างเมนูกับปุ่มติดต่อ
   เข้าสู่ระบบแสดงทุกจอ (บนมือถืออยู่ข้างปุ่มเมนู) · สมัครสมาชิกเฉพาะจอ ≥1200px เพราะแถบหัวที่แคบกว่านั้นวางไม่พอ
   ปุ่มเส้นขอบ ไม่แย่งปุ่มติดต่อสีเขียว · กฎ margin บนจอ ≤960px อยู่ในหัวข้อ 2 */
.header-member {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-member-btn {
	gap: 7px;
	padding: 0.5rem 0.85rem;
	border-radius: var(--btn-radius-sm);
	font-size: 0.88rem;
	font-weight: 600;
	white-space: nowrap;
}

.header-member-btn .icon {
	width: 16px;
	height: 16px;
}

.theme-dark .header-member-btn {
	background: transparent;
	color: var(--header-text);
	border-color: rgba(255, 255, 255, 0.28);
}

.theme-dark .header-member-btn .icon {
	color: var(--header-accent);
}

.theme-dark .header-member-btn:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
	border-color: #FFFFFF;
}

/* ปุ่มสมาชิกกับปุ่มติดต่อเป็นกลุ่มเดียวกัน: ห่างกัน 12px แทนระยะ 28px ของแถบหัว */
.header-inner > .header-member + .header-cta {
	margin-left: -16px;
}

@media (max-width: 1199px) {
	.header-signup {
		display: none;
	}
}

/* ≥1200px มีครบสามปุ่ม: ระยะเมนู 22px (เดิม 26px) เผื่อที่ให้ชื่อเมนูไม่ตัดบรรทัดเมื่อแบบอักษรของเบราว์เซอร์กว้างกว่าเล็กน้อย */
@media (min-width: 1200px) {
	.nav-list {
		gap: 22px;
	}
}

/* จอ ≤420px ที่ปิดบาร์ล่าง: แถบหัวมีทั้งปุ่มเข้าสู่ระบบและปุ่มติดต่อ วางเต็มคำไม่พอ (โลโก้ถูกบีบ)
   → ทั้งสองปุ่มเหลือไอคอน ข้อความยังอยู่ให้โปรแกรมอ่านหน้าจอ · ค่าเริ่มต้นเปิดบาร์ล่าง จึงไม่เข้ากรณีนี้ */
@media (max-width: 420px) {
	body:not(.has-dock) .header-member-btn,
	body:not(.has-dock) .header-member + .header-cta {
		padding: 0.5rem 0.65rem;
	}

	body:not(.has-dock) .header-member-btn > span:not(.sr-only),
	body:not(.has-dock) .header-member + .header-cta > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* 961–1199px เมนูยังเป็นแถว: บีบระยะระหว่างรายการเมนูให้ปุ่มเข้าสู่ระบบมีที่ */
@media (min-width: 961px) and (max-width: 1199px) {
	.nav-list {
		gap: 18px;
	}
}

/* 961–1023px ยังแคบไป (ชื่อเมนูตัดเป็นสองบรรทัด): ระยะเมนู 12px ตัวอักษรเมนูเล็กลงเล็กน้อย และปุ่มเข้าสู่ระบบไม่มีไอคอนกุญแจ */
@media (min-width: 961px) and (max-width: 1023px) {
	.nav-list {
		gap: 12px;
	}

	.nav-list > li > a {
		font-size: 0.92rem;
	}

	.header-member-btn {
		padding-right: 0.7rem;
		padding-left: 0.7rem;
	}

	.header-member-btn .icon {
		display: none;
	}
}

/* ปุ่มถูกซ่อน (≤760px + มีบาร์ล่าง): คืนหน้าที่ดันชิดขวาให้ตัวถัดไป (กฎ margin ของปุ่มอยู่ในหัวข้อ 2) */
@media (max-width: 760px) {
	body.has-dock .header-inner > .header-cta ~ .nav-toggle,
	body.has-dock .header-inner > .header-cta ~ .language-switcher {
		margin-left: auto;
	}

	body.has-dock .header-inner > .header-cta ~ .language-switcher ~ .nav-toggle {
		margin-left: 0;
	}
}

/* ==========================================================
   2) ลิ้นชักเมนูมือถือ (≤960px)
   - แก้ ghost-tap: ลิ้นชักที่ปิดอยู่ไม่รับการแตะ (pointer-events) และเมนูย่อยใช้ visibility: inherit
     (เดิม visible → ลิงก์ล่องหนทับครึ่งบนของจอแม้ลิ้นชักปิด)
   - หัวข้อที่มีเมนูย่อย = ปุ่มเปิด/ปิดเมนูย่อย (ลูกศรขวา) ไม่ปิดลิ้นชัก
   - selector `.nav-list li.is-open > .sub-menu` ต้องซ้ำกับกฎเดสก์ท็อปเป๊ะ เพื่อชนะ translate(-50%) ด้วยลำดับไฟล์
   ========================================================== */
@media (max-width: 960px) {
	/* ปุ่มเมนูชิดขวาเสมอ (style.css ตั้ง margin-left:0 เผื่อตัวสลับภาษา ซึ่งปิดอยู่เป็นค่าเริ่มต้น) */
	.header-inner > .nav-toggle {
		margin-left: auto;
	}

	.header-inner > .language-switcher ~ .nav-toggle {
		margin-left: 0;
	}

	/* มีปุ่มติดต่อ: ปุ่มติดต่อเป็นตัวดันชิดขวา แล้วตามด้วยตัวสลับภาษา (ถ้าเปิด) และปุ่มเมนู */
	.header-inner > .header-cta {
		margin-left: auto;
	}

	.header-inner > .header-cta ~ .language-switcher {
		margin-left: 0;
	}

	.header-inner > .header-cta ~ .nav-toggle {
		margin-left: -12px;
	}

	.header-inner > .header-cta ~ .language-switcher ~ .nav-toggle {
		margin-left: 0;
	}

	/* มีปุ่มสมาชิก: ปุ่มสมาชิกเป็นตัวดันชิดขวาแทน แล้วปุ่มติดต่อ (ถ้าแสดง) ตัวสลับภาษา และปุ่มเมนูต่อท้ายติดกัน
	   selector ยาวกว่ากฎ body.has-dock ในหัวข้อ 1 เพื่อชนะกรณีปุ่มติดต่อถูกซ่อน */
	.header-inner > .header-member {
		margin-left: auto;
	}

	.header-inner > .header-member ~ .nav-toggle,
	body.has-dock .header-inner > .header-member ~ .header-cta ~ .nav-toggle {
		margin-left: -12px;
	}

	.header-inner > .header-member ~ .language-switcher,
	.header-inner > .header-member ~ .language-switcher ~ .nav-toggle,
	body.has-dock .header-inner > .header-member ~ .header-cta ~ .language-switcher,
	body.has-dock .header-inner > .header-member ~ .header-cta ~ .language-switcher ~ .nav-toggle {
		margin-left: 0;
	}

	.site-nav {
		pointer-events: none;
	}

	.nav-open .site-nav {
		pointer-events: auto;
	}

	/* เมนูย่อยในลิ้นชัก: เส้นเขียวด้านซ้ายเริ่มห่างจากกล่องหัวข้อ 10px (เดิม 2px ดูติดกล่อง · เจ้าของทัก 15 ต.ค. 2026) */
	.nav-list .sub-menu {
		display: none;
		margin: 10px 0 10px 10px;
		visibility: inherit;
		opacity: 1;
		transform: none;
	}

	.nav-list li.is-open > .sub-menu {
		display: grid;
		left: auto;
		visibility: inherit;
		opacity: 1;
		transform: none;
	}

	.nav-list .menu-item-has-children > a {
		padding-right: 48px;
	}

	.nav-list .menu-item-has-children > a::before {
		display: block;
		right: 20px;
	}

	.nav-social {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 18px;
		padding: 18px 14px 0;
		border-top: 1px solid var(--border);
	}

	/* ปุ่ม LINE + OpenChat: เต็มความกว้างของลิ้นชัก เรียงลงมา · มีปุ่มชุดนี้ = เส้นคั่นอยู่เหนือปุ่ม แถวโซเชียลต่อท้ายโดยไม่มีเส้นซ้ำ */
	.nav-contact {
		display: grid;
		gap: 10px;
		margin-top: 18px;
		padding: 18px 14px 0;
		border-top: 1px solid var(--border);
	}

	.nav-contact-btn {
		justify-content: center;
		width: 100%;
		gap: 10px;
		padding: 0.8rem 1rem;
		font-size: 0.98rem;
		font-weight: 600;
	}

	.nav-contact-btn .icon {
		width: 20px;
		height: 20px;
	}

	.nav-contact + .nav-social {
		margin-top: 0;
		padding-top: 14px;
		border-top: 0;
	}

	/* ไอคอนโซเชียลจัดกลางลิ้นชัก ให้สมดุลกับปุ่มเต็มความกว้างด้านบน (เจ้าของสั่ง 15 ต.ค. 2026) */
	.nav-social {
		justify-content: center;
	}

	.nav-social .social-link {
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border-radius: var(--btn-radius-sm);
		border: 1px solid var(--border);
		color: var(--ink);
		transition: border-color 0.16s ease, color 0.16s ease;
	}

	.nav-social .social-link .icon {
		width: 20px;
		height: 20px;
	}

	.nav-social .social-link:hover {
		border-color: var(--ember);
		color: var(--flare);
	}

	/* ลิ้นชักโทนเข้ม · ตั้งที่ breakpoint เดียวกับลิ้นชัก (960) */
	.theme-dark .site-nav {
		background: var(--header-bg);
		border-top: 0;
	}

	.theme-dark .nav-list a {
		color: var(--header-text);
	}

	.theme-dark .nav-list a:hover,
	.theme-dark .nav-list a:focus-visible {
		background: rgba(72, 247, 144, 0.10);
		box-shadow: inset 2px 0 0 var(--header-accent);
		color: #FFFFFF;
	}

	.theme-dark .nav-list .sub-menu {
		border-left: 2px solid rgba(72, 247, 144, 0.45);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.theme-dark .nav-social,
	.theme-dark .nav-contact {
		border-top-color: var(--border-dark);
	}

	.theme-dark .nav-contact .btn-ghost {
		background: transparent;
		color: var(--header-text);
		border-color: rgba(255, 255, 255, 0.28);
	}

	.theme-dark .nav-contact .btn-ghost .icon {
		color: var(--header-accent);
	}

	.theme-dark .nav-contact .btn-ghost:hover {
		color: #FFFFFF;
		border-color: #FFFFFF;
	}

	.theme-dark .nav-social .social-link {
		border-color: var(--border-dark);
		background: var(--header-chip);
		color: var(--header-text);
	}

	.theme-dark .nav-social .social-link:hover {
		border-color: var(--header-accent);
		color: var(--header-accent);
	}
}

/* 961–1024px เมนูยังเป็นแถวในแถบหัว · ไม่ต้องมีพื้นของลิ้นชัก */
@media (min-width: 961px) and (max-width: 1024px) {
	.theme-dark .site-nav {
		background: transparent;
	}
}

/* ==========================================================
   3) ป้ายเล็กร่วม (แถบติดต่อ + footer) · pill ขอบเขียวบาง + จุดสถานะ
   ========================================================== */
.chrome-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 6px 14px 6px 10px;
	border: 1px solid rgba(72, 247, 144, 0.28);
	border-radius: var(--btn-radius-xs, 6px); /* ป้ายสถานะ: มุมมนเล็กน้อยแบบเดียวกับปุ่ม ไม่ใช้ทรงแคปซูล */
	background: rgba(72, 247, 144, 0.08);
	color: var(--mint);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.04em;
}

.chrome-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mint);
}

/* ==========================================================
   4) บล็อกติดต่อท้ายหน้าย่อย (.cta-console) · แถบเข้มเต็มความกว้าง ห่อการ์ด .ft-launch ใบเดียวกับ footer
   พื้นเดียวกับ footer (--black-deep) แล้ว footer ต่อชิดด้านล่าง (.site-footer--joined) → เห็นเป็นส่วนท้ายผืนเดียว
   ตัวการ์ด (หัวข้อ ปุ่ม QR รายการเตรียมข้อความ) อยู่ในหัวข้อ 5 · มุมทแยงเป็นของการ์ด แถบนี้จึงไม่มีของตัวเอง
   ========================================================== */
.cta-console {
	padding: 56px 0 0;
	border-top: 1px solid var(--border-dark);
	background: var(--black-deep);
	color: var(--on-black-2);
}

/* ==========================================================
   5) Footer "Console"
   ========================================================== */
.site-footer--console {
	padding: 0;
	border-top: 1px solid var(--border-dark);
	background: var(--black-deep);
	color: var(--on-black-2);
}

.site-footer--console::before {
	display: none;
}

.ft-inner {
	padding-top: 56px;
}

/* หน้าที่มีบล็อกติดต่อท้ายเนื้อหาแล้ว: footer เริ่มที่ดัชนีลิงก์ ต่อชิดกับบล็อกนั้น (ไม่มีเส้นคั่น ไม่เว้นช่องซ้ำ) */
.site-footer--joined {
	border-top: 0;
}

.site-footer--joined .ft-inner {
	padding-top: 0;
}

/* ---------- แถว 1 · ช่องทางติดต่อ ---------- */
.ft-launch {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	border: 1px solid var(--border-dark);
	border-radius: 20px;
	background: var(--black);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.ft-launch::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--black-2);
	clip-path: polygon(64% 0, 100% 0, 100% 100%, 52% 100%);
}

/* ไม่มีกล่องเตรียมข้อความ/เวลาตอบแชท → แถวเดียวเต็มความกว้าง */
.ft-launch--solo {
	grid-template-columns: minmax(0, 1fr);
}

.ft-launch--solo::before {
	clip-path: polygon(78% 0, 100% 0, 100% 100%, 70% 100%);
}

.ft-launch-main,
.ft-launch-side {
	min-width: 0;
	padding: 40px;
}

.ft-launch-side {
	display: grid;
	gap: 22px;
	align-content: start;
	padding-left: 24px;
}

.ft-launch-title {
	margin: 0 0 12px;
	color: #FFFFFF;
	font-size: clamp(1.55rem, 2.8vw, 2.2rem);
	line-height: 1.28;
	text-wrap: balance;
}

.ft-launch-sub {
	margin: 0;
	max-width: 34em;
	color: var(--on-black-2);
}

/* ปุ่มที่อยู่คู่กันกว้างเท่ากัน (เจ้าของสั่ง 15 ต.ค. 2026 · ตรวจด้วย dev/check-buttons.mjs): ปุ่ม LINE กับ OpenChat ซ้อนกัน กว้างเท่าปุ่มที่ยาวที่สุด · จอ ≤640px เต็มความกว้าง */
.ft-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	width: fit-content;
	max-width: 100%;
	margin-top: 26px;
}

.ft-actions .btn {
	white-space: normal;
	text-align: center;
}

.ft-openchat.btn-ghost {
	border-color: rgba(255, 255, 255, 0.24);
	background: transparent;
	color: #FFFFFF;
}

.ft-openchat.btn-ghost:hover {
	border-color: var(--mint);
	background: rgba(72, 247, 144, 0.08);
	color: #FFFFFF;
}

.ft-launch .admin-hint {
	margin: 16px 0 0;
}

/* อีเมล · ลิงก์ข้อความใต้ปุ่ม (ที่อยู่อีเมลอยู่ใน href ไม่พิมพ์บนหน้า) */
.ft-mail {
	margin: 16px 0 0;
}

.ft-mail a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--on-black);
	font-size: 0.92rem;
	line-height: 1.5;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.28);
	text-underline-offset: 4px;
	transition: color 0.16s ease, text-decoration-color 0.16s ease;
}

.ft-mail a .icon {
	flex: 0 0 auto;
	color: var(--mint);
}

.ft-mail a:hover {
	color: var(--mint);
	text-decoration-color: currentColor;
}

/* QR · จอกว้าง (≥761px) เปิดไว้เป็นบล็อก: แผ่นขาวมุมโค้ง + ข้อความบรรทัดเดียว (ยกมือถือสแกนจากจอ)
   จอแคบพับใน <details> เพราะกดปุ่ม LINE ได้ตรง ๆ · มาร์กอัปมีทั้งสองแบบ CSS แสดงทีละแบบ */
.ft-qr {
	display: none;
}

.ft-qr-mobile {
	margin-top: 16px;
}

.ft-qr-mobile summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--btn-radius-sm);
	color: var(--on-black);
	font-size: 0.88rem;
	cursor: pointer;
	list-style: none;
}

.ft-qr-mobile summary::-webkit-details-marker {
	display: none;
}

.ft-qr-mobile[open] summary {
	border-color: var(--mint);
	color: var(--mint);
}

.ft-qr-mobile img {
	width: 180px;
	height: 180px;
	margin-top: 12px;
	padding: 10px;
	border-radius: 16px;
	background: #FFFFFF;
}

@media (min-width: 761px) {
	.ft-qr {
		display: flex;
		align-items: center;
		gap: 20px;
		max-width: 34em;
		margin-top: 26px;
		padding-top: 24px;
		border-top: 1px dashed rgba(255, 255, 255, 0.14);
	}

	.ft-qr img {
		flex: 0 0 auto;
		width: 132px;
		height: 132px;
		padding: 6px;
		border-radius: 14px;
		background: #FFFFFF;
	}

	.ft-qr-text {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin: 0;
		color: var(--on-black);
		font-size: 0.92rem;
		line-height: 1.7;
	}

	.ft-qr-text .icon {
		flex: 0 0 auto;
		margin-top: 5px;
		color: var(--mint);
	}

	.ft-qr-mobile {
		display: none;
	}
}

/* ด้านข้าง · กล่องเตรียมข้อความแรก + เวลาตอบแชท */
.ft-side-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: #FFFFFF;
	font-size: 1rem;
	font-weight: 600;
}

.ft-side-title .icon {
	color: var(--mint);
}

.ft-side-text {
	margin: 0 0 14px;
	color: var(--on-black-2);
	font-size: 0.9rem;
	line-height: 1.65;
}

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

/* balance: ข้อที่ยาวเกินหนึ่งบรรทัดบนมือถือแบ่งสองบรรทัดให้ยาวใกล้กัน (เดิม "...เปิดบัญชี MT5 แบบ" / "ใดไว้") */
.ft-prep-list li {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	color: var(--on-black);
	font-size: 0.92rem;
	line-height: 1.55;
	text-wrap: balance;
}

.ft-prep-list li > span:last-child {
	padding-top: 4px;
}

.ft-prep-num {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--black-3);
	color: var(--mint);
	font-size: 0.74rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ft-hours {
	padding-top: 18px;
	border-top: 1px dashed rgba(255, 255, 255, 0.14);
}

.ft-hours .ft-side-text {
	margin: 0;
}

/* ---------- แถว 2 · ดัชนี ---------- */
/* คอลัมน์ที่ว่าง (เช่น ยังไม่มีช่องทางใดกรอก) ถูกซ่อน → auto-fit ให้คอลัมน์ที่เหลือขยายเต็มแถว
   สูงสุด 5 คอลัมน์ (หน้าในเว็บ · คู่มือ · ช่องทาง · เอกสาร · ข้อมูลระบบ): 5 × 160 + 4 × 32 = 928px พอดีใน container 1140px
   (ขั้นต่ำ 200px เดิมรับได้แค่ 4 คอลัมน์ คอลัมน์ที่ 5 จะตกไปอยู่แถวใหม่ลำพัง) */
.ft-index {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 32px;
	padding: 52px 0 40px;
}

.ft-col {
	min-width: 0;
}

.ft-col-title {
	margin: 0 0 16px;
	color: #FFFFFF;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

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

.ft-list a {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--on-black-2);
	font-size: 0.92rem;
	line-height: 1.5;
	transition: color 0.16s ease;
}

.ft-list a:hover {
	color: var(--mint);
}

.ft-list a[aria-current="page"] {
	color: var(--on-black);
}

.ft-idx {
	flex: 0 0 auto;
	min-width: 22px;
	color: var(--mint);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.95;
	font-variant-numeric: tabular-nums;
}

.ft-list--chan a {
	align-items: center;
}

.ft-chan-ic {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: 1px solid var(--border-dark);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	color: var(--on-black);
	transition: border-color 0.16s ease, color 0.16s ease;
}

.ft-chan:hover .ft-chan-ic {
	border-color: var(--mint);
	color: var(--mint);
}

.ft-chan.is-line .ft-chan-ic,
.ft-chan.is-line:hover .ft-chan-ic {
	border-color: var(--line-green);
	background: var(--line-green);
	color: #03240F;
}

.ft-spec {
	display: grid;
	margin: 0;
	border-top: 1px solid var(--border-dark);
}

.ft-spec-row {
	display: grid;
	gap: 2px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border-dark);
}

.ft-spec dt {
	color: var(--on-black-2);
	font-size: 0.76rem;
	letter-spacing: 0.04em;
}

.ft-spec dd {
	margin: 0;
	color: var(--on-black);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* ---------- แถว 3 · คำเตือนความเสี่ยงฉบับเต็ม ---------- */
.ft-risk {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 44px; /* กล่องสุดท้ายของ .ft-inner: เว้นจากเส้นบนของแถบสถานะ (เดิมขอบกล่องชนเส้นพอดี) */
	padding: 18px 20px;
	border: 1px solid rgba(242, 166, 90, 0.28);
	border-radius: 14px;
	background: rgba(242, 166, 90, 0.06);
}

.ft-risk-ic {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(242, 166, 90, 0.14);
	color: #F2A65A;
}

.ft-risk-body {
	min-width: 0;
}

.ft-risk p {
	margin: 0;
	color: rgba(238, 243, 244, 0.8);
	font-size: 0.84rem;
	line-height: 1.75;
}

/* ลิงก์ไปหน้าประกาศความเสี่ยง · ต่อท้ายข้อความเตือน (ข้อความเตือนด้านบนยังอยู่ครบ) */
.ft-risk-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	color: #F2A65A;
	font-size: 0.84rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: underline;
	text-decoration-color: rgba(242, 166, 90, 0.45);
	text-underline-offset: 4px;
	transition: color 0.16s ease, text-decoration-color 0.16s ease;
}

.ft-risk-more:hover {
	color: #FFFFFF;
	text-decoration-color: currentColor;
}

.ft-risk-more .icon {
	flex: 0 0 auto;
}

/* ---------- แถวสมาชิกแดชบอร์ด · ลิงก์เข้าสู่ระบบ (ใต้ดัชนี เหนือคำเตือนความเสี่ยง · fenix_chrome_member_link) ---------- */
.ft-member {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: -14px 0 26px;
	padding-top: 16px;
	border-top: 1px solid var(--border-dark);
	color: rgba(238, 243, 244, 0.72);
	font-size: 0.86rem;
	line-height: 1.6;
}

.ft-member > .icon {
	flex: 0 0 auto;
	color: var(--mint);
}

.ft-member-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(72, 247, 144, 0.5);
	text-underline-offset: 4px;
	transition: color 0.16s ease, text-decoration-color 0.16s ease;
}

.ft-member-link:hover {
	color: var(--mint);
	text-decoration-color: currentColor;
}

.ft-member-link .icon {
	flex: 0 0 auto;
	opacity: 0.8;
}

/* ---------- แถว 4 · ชื่อแบรนด์ตัวใหญ่แบบเส้นขอบ (จางเข้าเมื่อเลื่อนมาถึง) ---------- */
.ft-wm {
	margin: 40px 0 6px;
	padding: 0 12px;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.07);
	font-size: clamp(3.2rem, 13vw, 11.5rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

@supports (-webkit-text-stroke: 1px #000) {
	.ft-wm {
		color: transparent;
		-webkit-text-stroke: 1.5px rgba(238, 243, 244, 0.2);
	}

	.ft-wm-b {
		-webkit-text-stroke-color: var(--ember);
	}
}

.js .ft-wm.watch {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}

.js .ft-wm.watch.in {
	opacity: 1;
	transform: none;
}

/* ---------- แถว 5 · แถบสถานะ ---------- */
.ft-status {
	border-top: 1px solid var(--border-dark);
	background: rgba(0, 0, 0, 0.18);
}

.ft-status-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	padding: 16px 0;
	color: rgba(238, 243, 244, 0.62);
	font-size: 0.8rem;
	line-height: 1.5;
}

.ft-status-inner p {
	margin: 0;
}

.ft-copy {
	margin-right: auto !important;
}

.ft-clock {
	display: none;
	align-items: center;
	gap: 8px;
	font-variant-numeric: tabular-nums;
}

.js .ft-clock {
	display: inline-flex;
}

.ft-clock time {
	color: var(--on-black);
	font-weight: 600;
}

.ft-top {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid var(--border-dark);
	border-radius: var(--btn-radius-sm);
	color: var(--on-black);
	font-size: 0.8rem;
	transition: border-color 0.16s ease, color 0.16s ease;
}

.ft-top .icon {
	transform: rotate(-90deg);
}

.ft-top:hover {
	border-color: var(--mint);
	color: var(--mint);
}

/* ==========================================================
   6) บาร์ล่างมือถือ (Dock) · แผงเข้ม มุมโค้ง · ช่องกลางคือปุ่มติดต่อ
   ช่อง active มาจาก PHP (aria-current) · ไฟแถบเล็กด้านบนจอดที่ --dock-x · เว้นที่ท้ายหน้าด้วย .dock-spacer (ไม่ใช้ padding ของ body)
   ========================================================== */
.dock-spacer {
	display: none;
}

/* บาร์ล่างมือถือ: ซ่อนบนจอกว้าง แสดงเฉพาะ ≤760px */
.mobile-app-nav.dock {
	display: none;
}

@media (max-width: 760px) {
	.mobile-app-nav.dock {
		position: fixed;
		left: 50%;
		right: auto;
		bottom: calc(10px + env(safe-area-inset-bottom));
		z-index: 120;
		display: block;
		width: min(calc(100vw - 16px), 480px);
		padding: 6px;
		border: 1px solid var(--border-dark);
		border-radius: calc(var(--btn-radius) + 6px);
		background: var(--black-deep);
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
		transform: translateX(-50%);
		animation: none;
	}

	.dock-keys {
		display: grid;
		grid-template-columns: repeat(var(--dock-n, 5), minmax(0, 1fr));
		gap: 2px;
	}

	.dock-key {
		position: relative;
		display: grid;
		justify-items: center;
		align-content: center;
		gap: 2px;
		min-width: 0;
		min-height: 56px;
		padding: 4px 2px;
		border-radius: var(--btn-radius);
		color: var(--on-black-2);
		font-size: 0.68rem;
		font-weight: 600;
		line-height: 1.1;
		text-align: center;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.18s ease, transform 0.18s ease, min-height 0.2s ease, gap 0.2s ease;
	}

	.dock-cap {
		display: grid;
		place-items: center;
		width: 42px;
		height: 30px;
		border-radius: var(--btn-radius-sm);
		transition: background-color 0.18s ease, color 0.18s ease;
	}

	.dock-cap .icon {
		width: 20px;
		height: 20px;
	}

	/* ป้ายมีกล่องบรรทัดของตัวเอง (1.5) เพราะ overflow:hidden ตัดตามกล่องนี้: line-height 1.1 ของ .dock-key เคยตัดวรรณยุกต์ที่ซ้อนบนสระบน
	   เช่น "ตั้" ใน "วิธีติดตั้ง" · บรรทัดสูงขึ้นราว 4px จึงลดช่องไฟของ .dock-key จาก 4px เหลือ 2px ให้บาร์สูงใกล้เคียงเดิม */
	.dock-label {
		max-width: 100%;
		max-height: 1.6em;
		line-height: 1.5;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		transition: opacity 0.18s ease, max-height 0.2s ease;
	}

	.dock-key.is-active {
		color: var(--mint);
	}

	.dock-key.is-active .dock-cap {
		background: rgba(72, 247, 144, 0.14);
		color: var(--mint);
	}

	.dock-key.is-press {
		transform: scale(0.94);
	}

	.dock.is-going .dock-key.is-going .dock-cap {
		background: rgba(72, 247, 144, 0.22);
		color: var(--mint);
	}

	/* ช่องกลาง · แดชบอร์ด (ปุ่มเขียว FALCON เด่น) · ช่องติดต่อ (.is-action) อยู่ขวาสุดหน้าตาเหมือนช่องอื่น (เจ้าของสั่ง 15 ต.ค. 2026) */
	.dock-key.is-feature {
		color: var(--on-black);
	}

	.dock-key.is-feature .dock-cap,
	.dock-key.is-feature.is-active .dock-cap {
		width: 50px;
		height: 34px;
		background: var(--ember);
		color: var(--on-ember);
	}

	@media (hover: hover) {
		.dock-key:hover {
			color: var(--on-black);
		}

		.dock-key:hover .dock-cap {
			background: rgba(255, 255, 255, 0.06);
		}

		.dock-key.is-active:hover .dock-cap {
			background: rgba(72, 247, 144, 0.18);
		}

		.dock-key.is-feature:hover .dock-cap {
			background: var(--ember-hover);
		}
	}

	.dock-lamp {
		position: absolute;
		top: -1px;
		left: var(--dock-x, 50%);
		width: 22px;
		height: 3px;
		border-radius: 0 0 3px 3px;
		background: var(--mint);
		opacity: 0;
		transform: translateX(-50%);
		transition: left 0.3s ease, opacity 0.2s ease;
	}

	.dock.is-lit .dock-lamp {
		opacity: 1;
	}

	.dock-spacer {
		display: block;
		height: calc(var(--dock-h) + 20px + env(safe-area-inset-bottom));
		background: var(--black-deep);
	}

	.float-line--dock {
		bottom: calc(var(--dock-h) + 26px + env(safe-area-inset-bottom));
	}

	/* ปิดบาร์ล่างไว้ → ปุ่ม LINE ลอยกลับมาบนมือถือ (style.css ซ่อนไว้เพราะปกติบาร์ล่างมีปุ่ม LINE อยู่แล้ว) */
	body:not(.has-dock) .line-fab {
		display: inline-grid;
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom));
		width: 54px;
		height: 54px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dock-key,
	.dock-cap,
	.dock-label,
	.dock-lamp,
	.ft-mail a {
		transition: none;
	}

	.js .ft-wm.watch {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================
   7) Responsive
   ========================================================== */
@media (max-width: 1024px) {
	.ft-launch {
		grid-template-columns: minmax(0, 1fr);
	}

	.ft-launch::before {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		opacity: 0;
	}

	.ft-launch-side {
		padding: 28px 40px 36px;
		border-top: 1px solid var(--border-dark);
		border-radius: 0 0 20px 20px;
		background: var(--black-2);
	}

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

	/* จำนวนคอลัมน์เป็นคี่ (เช่น ครบ 5 คอลัมน์): ข้อมูลระบบกินเต็มแถวสุดท้าย ไม่ค้างเป็นคอลัมน์เดี่ยว */
	.ft-index--odd .ft-col--spec {
		grid-column: 1 / -1;
	}

	/* ข้อมูลระบบกินเต็มแถวสุดท้าย: เส้นปิดท้ายรายการกับเส้นบนของแถวสมาชิกยาวเท่ากันและห่างกันไม่ถึง 30px โดยไม่มีอะไรคั่น ดูเป็นแถวเปล่าระหว่างสองเส้น
	   → เหลือเส้นเดียว: ใช้เส้นปิดท้ายรายการเป็นเส้นคั่น แถวสมาชิกไม่วาดเส้นของตัวเองและขยับขึ้นมาอยู่ใต้เส้นนั้น 16px (เท่าระยะเดิมจากเส้นของตัวเอง)
	   ระยะติดลบ = ขอบล่างของ .ft-index (40px) ลบ 16px · คลาส ft-index--spec มาจาก footer.php (มีคอลัมน์ข้อมูลระบบ) */
	.ft-index--odd.ft-index--spec + .ft-member {
		margin-top: -24px;
		padding-top: 0;
		border-top: 0;
	}
}

/* แท็บเล็ต (2 คอลัมน์) และจำนวนคอลัมน์เป็นคู่: ข้อมูลระบบอยู่คอลัมน์ขวาของแถวสุดท้าย เส้นปิดท้ายรายการจึงอยู่เหนือเส้นของแถวสมาชิกราว 26px
   เห็นเป็นเส้นซ้อนสองเส้นในครึ่งขวา → ไม่วาดเส้นปิดท้ายรายการ เหลือเส้นเต็มความกว้างของแถวสมาชิกเส้นเดียว
   ต้องรู้ว่ามีแถวสมาชิกตามมาจึงใช้ :has() (เบราว์เซอร์ที่ไม่มี :has() เห็นแบบเดิม) · จอ 640px ลงไปใช้กฎเส้นเดียวของจอแคบด้านล่างแทน */
@media (min-width: 641px) and (max-width: 1024px) {
	.ft-index--spec:not(.ft-index--odd):has(+ .ft-member) .ft-spec-row:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 760px) {
	.cta-console {
		padding-top: 40px;
	}

	.ft-inner {
		padding-top: 40px;
	}

	.ft-status-inner {
		justify-content: center;
		text-align: center;
	}

	.ft-copy {
		margin-right: 0 !important;
		flex-basis: 100%;
	}
}

@media (max-width: 640px) {
	.ft-launch-main {
		padding: 28px 22px;
	}

	.ft-launch-side {
		padding: 24px 22px 28px;
	}

	.ft-actions {
		width: 100%;
	}

	.ft-actions .btn {
		width: 100%;
	}

	.ft-index {
		gap: 28px 20px;
		padding: 40px 0 32px;
	}

	.ft-col--spec {
		grid-column: 1 / -1;
	}

	/* จอแคบ: ข้อมูลระบบกินเต็มแถวสุดท้ายเสมอ → เส้นเดียวแบบเดียวกับกฎที่ 1024px ด้านบน (ขอบล่างของ .ft-index ที่นี่ 32px ลบ 16px) */
	.ft-index--spec + .ft-member,
	.ft-index--odd.ft-index--spec + .ft-member {
		margin-top: -16px;
		padding-top: 0;
		border-top: 0;
	}

	.ft-risk {
		margin-bottom: 32px;
		padding: 16px;
	}
}

@media (max-width: 400px) {
	.ft-index {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================
   8) หน้า 404 · ลิงก์ลัดเป็นรายการ (ul.error-links) · หน้าตาปุ่มอยู่ใน style.css + pages.css
   ที่นี่แค่ล้างสไตล์รายการ (จุดนำหน้า ระยะเยื้อง) หลังย้ายคลาสจาก <nav> มาอยู่ที่ <ul>
   ========================================================== */
ul.error-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.error-links > li {
	display: flex;
}

/* ==========================================================
   9) LEGACY · ลบทั้งบล็อกนี้ได้ในรุ่นถัดไป (REMOVE IN THE NEXT RELEASE)
   แถบติดต่อรุ่นก่อน: section.cta-console > .container.cta-console-inner > .cta-console-copy (h2.cta-console-title + p.cta-console-sub) + .cta-console-action
   HTML รุ่นนั้นยังค้างอยู่ใน page cache ของโฮสต์ได้ราว 30 นาทีหลัง deploy รุ่นนี้ ขณะที่ไฟล์ CSS นี้ถูกแทนทันที
   ถ้าไม่มีกฎชุดนี้ หัวข้อของแถบจะเป็นตัวอักษรเข้มบนพื้นเข้ม (อ่านไม่ออก) และปุ่มตกลงมาชิดขอบล่าง
   มาร์กอัปปัจจุบัน (inc/modules/chrome.php · div.cta-console > .container > .ft-launch) ไม่ใช้คลาสทั้งสี่นี้
   ("cta-console-title" เหลือเป็น id เท่านั้น) กฎชุดนี้จึงไม่แตะหน้าที่สร้างใหม่
   ========================================================== */
.cta-console-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 28px 48px;
	align-items: center;
	padding-bottom: 56px;
}

.cta-console-title {
	margin: 0 0 12px;
	color: #FFFFFF;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.28;
	text-wrap: balance;
}

.cta-console-sub {
	margin: 0;
	max-width: 40em;
	color: var(--on-black-2);
}

.cta-console-action .btn {
	white-space: normal;
	text-align: center;
}

@media (max-width: 760px) {
	.cta-console-inner {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: 48px;
	}

	.cta-console-action .btn {
		width: 100%;
	}
}
/* ---------- จบบล็อก LEGACY ---------- */