/* =========================
   พื้นฐานของหน้า Home
   ========================= */

/* ตัวแปรสีหลักและพื้นหลังรวมของหน้า Home */
body.page-id-14 {
	--systems-accent: #e50012;
	--systems-accent-dark: #9e0813;
	--systems-ink: #111111;
	--systems-ink-soft: #5b616b;
	--systems-surface: rgba(255, 255, 255, 0.88);
	--systems-stroke: rgba(255, 255, 255, 0.14);
	--systems-shadow: 0 30px 80px rgba(17, 17, 17, 0.14);
	background:
		radial-gradient(circle at top left, rgba(229, 0, 18, 0.07), transparent 24%),
		linear-gradient(180deg, #f4f4f4 0%, #f8f8f8 36%, #ffffff 100%);
	color: var(--systems-ink);
}

body.page-id-14 .elementor.elementor-14 {
	overflow: clip;
}

/* =========================
   Hero Section
   elementor-element-b1c5c6b = container หลักของภาพ Hero
   elementor-element-6bbd131 = กล่องข้อความด้านซ้ายใน Hero
   ========================= */

/* กรอบหลักของ Hero section ใช้คุมระยะห่างและตำแหน่งยึดซ้าย */
body.page-id-14 .elementor-element-b1c5c6b {
	position: relative;
	isolation: isolate;
	padding: clamp(36px, 7vw, 92px) clamp(20px, 5vw, 72px) clamp(36px, 7vw, 92px) clamp(84px, 6vw, 138px);
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* ชั้นมืดทับภาพพื้นหลังเพื่อให้ข้อความบน Hero อ่านง่ายขึ้น */
body.page-id-14 .elementor-element-b1c5c6b::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.62) 48%, rgba(0, 0, 0, 0.2) 100%),
		radial-gradient(circle at 18% 50%, rgba(229, 0, 18, 0.28), transparent 28%);
	z-index: -2;
}

/* แสงเรืองสีแดงสำหรับเสริมอารมณ์งานภาพแนวยานยนต์ */
body.page-id-14 .elementor-element-b1c5c6b::after {
	content: "";
	position: absolute;
	right: -8vw;
	bottom: -16vh;
	width: 36vw;
	height: 36vw;
	min-width: 260px;
	min-height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(229, 0, 18, 0.38) 0%, rgba(229, 0, 18, 0) 68%);
	filter: blur(12px);
	z-index: -1;
}

/* กล่องข้อความด้านในของ Hero ขยับซ้ายเพื่อให้ตรงแนวกับแผงสีขาวด้านล่าง */
body.page-id-14 .elementor-element-6bbd131 {
	width: min(100%, 760px);
	padding: clamp(12px, 2vw, 18px) 0;
	margin-left: 0;
	transform: translateX(clamp(-340px, -17vw, -260px));
}

/* ล้าง margin แนวนอนของข้อความใน Hero */
body.page-id-14 .elementor-element-6bbd131 > :is(h1, h2, h3, p, hr) {
	margin-inline: 0;
}

/* =========================
   Systems Panel
   elementor-element-999cf91 = แผงสีขาวของส่วน "ระบบออนไลน์ทั้งหมด"
   systems-panel = class กลางสำหรับ section ใหม่ใน Elementor
   ========================= */

/* แผงสีขาวหลักของส่วน "ระบบออนไลน์ทั้งหมด" ที่ซ้อนขึ้นมาจาก Hero */
body.page-id-14 .elementor-element-999cf91,
body.page-id-14 .systems-panel {
	position: relative;
	margin-top: clamp(-58px, -6vw, -92px);
	padding:
		clamp(28px, 4vw, 44px)
		clamp(18px, 3vw, 30px)
		clamp(32px, 5vw, 60px);
	max-width: min(1380px, calc(100vw - 24px));
	margin-inline: auto;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.82) 100%);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 34px;
	box-shadow: var(--systems-shadow);
}

/* สไตล์หัวข้อหลักของแผงระบบออนไลน์ */
body.page-id-14 .elementor-element-999cf91 > h2,
body.page-id-14 .systems-panel > h2 {
	font-size: clamp(2rem, 4vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -0.04em;
	margin-bottom: 10px;
	margin-inline: auto;
	color: var(--systems-accent);
	max-width: 12ch;
	text-wrap: balance;
}

/* สไตล์คำอธิบายใต้หัวข้อในแผงระบบออนไลน์ */
body.page-id-14 .elementor-element-999cf91 > p,
body.page-id-14 .systems-panel > p {
	font-size: clamp(1rem, 1.25vw, 1.18rem);
	line-height: 1.7;
	color: var(--systems-ink-soft);
	margin-bottom: clamp(14px, 2vw, 24px);
	margin-inline: auto;
	max-width: 38ch;
}

/* =========================
   Systems Card Grid
   elementor-element-0372a02 = container การ์ดระบบเดิม
   systems-card-grid = class กลางสำหรับชุดการ์ดใหม่
   e-con-full.e-child > .e-con = การ์ดแต่ละใบ
   ========================= */

/* ตัวครอบ grid การ์ด 4 ใบของชุดระบบเดิมและชุดที่สร้างเพิ่ม */
body.page-id-14 .elementor-element-0372a02,
body.page-id-14 .systems-card-grid {
	--content-width: 100%;
}

/* เปลี่ยน layout ด้านในของ Elementor ให้เป็น grid 4 คอลัมน์ */
body.page-id-14 .elementor-element-0372a02 > .e-con-inner,
body.page-id-14 .systems-card-grid > .e-con-inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px);
	max-width: none;
}

/* ทำให้แต่ละคอลัมน์ยืดเต็มความสูงเพื่อให้การ์ดสูงเท่ากัน */
body.page-id-14 .elementor-element-0372a02 .e-con-full.e-child,
body.page-id-14 .systems-card-grid .e-con-full.e-child {
	height: 100%;
}

/* หน้าตาหลักของการ์ด: เรียงแนวตั้ง มุมโค้ง ขอบบาง และเงานุ่ม */
body.page-id-14 .elementor-element-0372a02 .e-con-full.e-child > .e-con,
body.page-id-14 .systems-card-grid .e-con-full.e-child > .e-con {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: clamp(26px, 2.2vw, 32px);
	border-radius: 28px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 249, 249, 0.92) 100%);
	border: 1px solid rgba(16, 18, 22, 0.08);
	box-shadow:
		0 18px 40px rgba(17, 17, 17, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	transition:
		transform 220ms ease,
		box-shadow 220ms ease,
		border-color 220ms ease;
	overflow: hidden;
}

/* เส้นแดงด้านบนของการ์ดแต่ละใบ */
body.page-id-14 .elementor-element-0372a02 .e-con-full.e-child > .e-con::before,
body.page-id-14 .systems-card-grid .e-con-full.e-child > .e-con::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	background: linear-gradient(90deg, var(--systems-accent), #ff606d);
	opacity: 0.92;
}

/* เอฟเฟกต์ลอยขึ้นเล็กน้อยเวลา hover บนเดสก์ท็อป */
body.page-id-14 .elementor-element-0372a02 .e-con-full.e-child > .e-con:hover,
body.page-id-14 .systems-card-grid .e-con-full.e-child > .e-con:hover {
	transform: translateY(-8px);
	box-shadow:
		0 26px 56px rgba(17, 17, 17, 0.14),
		0 0 0 1px rgba(229, 0, 18, 0.08);
	border-color: rgba(229, 0, 18, 0.16);
}

/* ระยะห่างใต้ widget ไอคอนในการ์ด */
body.page-id-14 .elementor-element-0372a02 .elementor-widget-icon,
body.page-id-14 .systems-card-grid .elementor-widget-icon {
	margin-bottom: 14px;
}

/* สไตล์กรอบไอคอนของการ์ดแต่ละระบบ */
body.page-id-14 .elementor-element-0372a02 .elementor-icon,
body.page-id-14 .systems-card-grid .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(74px, 6vw, 92px);
	height: clamp(74px, 6vw, 92px);
	padding: 16px;
	border-radius: 24px;
	background: linear-gradient(180deg, rgba(229, 0, 18, 0.1), rgba(229, 0, 18, 0.03));
	box-shadow: inset 0 0 0 1px rgba(229, 0, 18, 0.08);
}

/* ย่อขนาด glyph ของไอคอนลงเล็กน้อยให้อยู่ในกรอบพอดี */
body.page-id-14 .elementor-element-0372a02 .elementor-icon i,
body.page-id-14 .elementor-element-0372a02 .elementor-icon svg,
body.page-id-14 .systems-card-grid .elementor-icon i,
body.page-id-14 .systems-card-grid .elementor-icon svg {
	transform: scale(0.82);
}

/* หัวข้อการ์ด พร้อมกำหนดความสูงขั้นต่ำเพื่อช่วยจัดแนวปุ่มให้ตรงกัน */
body.page-id-14 .elementor-element-0372a02 h2,
body.page-id-14 .systems-card-grid h2 {
	font-size: clamp(1.45rem, 1.8vw, 1.9rem);
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: #161616;
	text-wrap: balance;
	min-height: 2.5em;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* คำอธิบายการ์ด พร้อมความสูงขั้นต่ำเพื่อให้ทุกใบดูสมดุล */
body.page-id-14 .elementor-element-0372a02 p,
body.page-id-14 .systems-card-grid p {
	color: var(--systems-ink-soft);
	line-height: 1.75;
	font-size: 1rem;
	max-width: 30ch;
	min-height: 5.4em;
}

/* ดัน widget ปุ่ม CTA ลงไปชิดด้านล่างของการ์ด */
body.page-id-14 .elementor-element-0372a02 .elementor-widget-premium-addon-button,
body.page-id-14 .systems-card-grid .elementor-widget-premium-addon-button {
	margin-top: auto;
	padding-top: 12px;
	width: 100%;
}

/* สไตล์ปุ่ม CTA กลางที่ใช้ร่วมกันทุกการ์ด */
body.page-id-14 .elementor-element-0372a02 .premium-button,
body.page-id-14 .systems-card-grid .premium-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: min(100%, 220px);
	width: 100%;
	padding: 14px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: linear-gradient(135deg, #101214 0%, #262b31 100%);
	box-shadow: 0 14px 28px rgba(17, 17, 17, 0.18);
	transition:
		transform 180ms ease,
		box-shadow 180ms ease,
		background 180ms ease;
}

/* สถานะของปุ่ม CTA เมื่อ hover */
body.page-id-14 .elementor-element-0372a02 .premium-button:hover,
body.page-id-14 .systems-card-grid .premium-button:hover {
	transform: translateY(-2px);
	background: linear-gradient(135deg, var(--systems-accent) 0%, var(--systems-accent-dark) 100%);
	box-shadow: 0 18px 32px rgba(229, 0, 18, 0.28);
}

/* บังคับให้ข้อความและไอคอนใน Premium button เป็นสีขาวทั้งหมด */
body.page-id-14 .elementor-element-0372a02 .premium-button .premium-button-text-icon-wrapper span,
body.page-id-14 .elementor-element-0372a02 .premium-button .premium-button-text-icon-wrapper i,
body.page-id-14 .elementor-element-0372a02 .premium-button .premium-button-text-icon-wrapper svg,
body.page-id-14 .systems-card-grid .premium-button .premium-button-text-icon-wrapper span,
body.page-id-14 .systems-card-grid .premium-button .premium-button-text-icon-wrapper i,
body.page-id-14 .systems-card-grid .premium-button .premium-button-text-icon-wrapper svg {
	color: #ffffff;
	fill: #ffffff;
}

/* น้ำหนักและระยะตัวอักษรของข้อความบนปุ่ม */
body.page-id-14 .elementor-element-0372a02 .premium-button .premium-button-text-icon-wrapper span,
body.page-id-14 .systems-card-grid .premium-button .premium-button-text-icon-wrapper span {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* =========================
   Responsive
   tablet = ไม่เกิน 1180px
   mobile = ไม่เกิน 767px
   ========================= */

/* Responsive สำหรับ tablet: เปลี่ยน grid เป็น 2 คอลัมน์ */
@media (max-width: 1180px) {
	body.page-id-14 .elementor-element-0372a02 > .e-con-inner,
	body.page-id-14 .systems-card-grid > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Responsive สำหรับ mobile: ลดระยะ Hero และเรียงการ์ดเป็น 1 คอลัมน์ */
@media (max-width: 767px) {
	body.page-id-14 .elementor-element-b1c5c6b {
		min-height: auto;
		padding: 88px 18px 64px;
		align-items: flex-end;
	}

	body.page-id-14 .elementor-element-b1c5c6b::before {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.66) 48%, rgba(0, 0, 0, 0.72) 100%),
			radial-gradient(circle at 50% 82%, rgba(229, 0, 18, 0.28), transparent 28%);
	}

	body.page-id-14 .elementor-element-b1c5c6b::after {
		right: -80px;
		bottom: -90px;
		width: 260px;
		height: 260px;
	}

	body.page-id-14 .elementor-element-6bbd131 {
		width: 100%;
		margin-left: 0;
		transform: none;
	}

	body.page-id-14 .elementor-element-999cf91,
	body.page-id-14 .systems-panel {
		margin-top: -26px;
		max-width: calc(100vw - 16px);
		padding: 24px 16px 22px;
		border-radius: 24px;
	}

	body.page-id-14 .elementor-element-999cf91 > h2,
	body.page-id-14 .systems-panel > h2 {
		max-width: 8ch;
	}

	body.page-id-14 .elementor-element-0372a02 > .e-con-inner,
	body.page-id-14 .systems-card-grid > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	body.page-id-14 .elementor-element-0372a02 .e-con-full.e-child > .e-con,
	body.page-id-14 .systems-card-grid .e-con-full.e-child > .e-con {
		padding: 22px 18px;
		border-radius: 22px;
	}

	body.page-id-14 .elementor-element-0372a02 h2,
	body.page-id-14 .systems-card-grid h2 {
		font-size: 1.32rem;
		min-height: 0;
	}

	body.page-id-14 .elementor-element-0372a02 p,
	body.page-id-14 .systems-card-grid p {
		min-height: 0;
	}

	body.page-id-14 .elementor-element-0372a02 .elementor-widget-premium-addon-button,
	body.page-id-14 .systems-card-grid .elementor-widget-premium-addon-button {
		display: block;
		width: 100%;
	}

	body.page-id-14 .elementor-element-0372a02 .premium-button,
	body.page-id-14 .systems-card-grid .premium-button {
		display: flex !important;
		width: 100% !important;
		min-width: 0 !important;
	}
}