/**
 * Section Liên hệ (Contact CTA) — component dùng chung.
 * Node Figma: 1740:12095 — 1600×506.
 * BEM scoped. rem = figma_px / 16. NO gap / NO aspect-ratio / NO px / NO background-image.
 */

.section-contact {
	/* ── Design tokens (scoped) ── */
	--sc-bg: #003253;
	--sc-brand: #079de2;
	--sc-brand-600: #0084c0;
	--sc-input-bg: #ffffff;
	--sc-input-text: #131313;
	--sc-placeholder: rgba(19, 19, 19, 0.4);
	--sc-caret: #003253;
	--sc-radius: 0.25rem;

	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var(--sc-bg);
	font-family: "Nunito Sans", sans-serif;
}

/* Ảnh nền nhà máy (Figma root "Header Image" fill) — render bằng <img>, KHÔNG background-image.
   Desktop: ảnh máy ngang tối màu hiện rõ sau form (như design). Mobile: bản dọc full-bleed (xem @media). */
.section-contact__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.55;
	pointer-events: none;
}

/* Scrim tối phía trái (desktop) — đảm bảo chữ trắng + form đọc rõ trên ảnh máy.
   Fade hết (alpha 0) trước vùng công nhân (~55%) nên KHÔNG làm tối ảnh công nhân bên phải. */
.section-contact::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(0, 50, 83, 0.88) 0%,
		rgba(0, 50, 83, 0.5) 34%,
		rgba(0, 50, 83, 0) 55%
	);
	pointer-events: none;
}

/* Băng ảnh công nhân "Consulting image" — chỉ hiện ở mobile (xem @media). */
.section-contact__consulting {
	display: none;
}

.section-contact__inner {
	position: relative;
	z-index: 2;
	padding: 5rem 0 5rem 6.25rem;
}

.section-contact__content {
	position: relative;
	width: 39.3125rem;
	max-width: 100%;
}

/* ── Header ── */
.section-contact__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: #ffffff;
	opacity: 0.5; /* Figma: nhãn "LIÊN HỆ" 50% trắng (cả desktop & mobile) */
}

.section-contact__subtitle {
	margin: 0.5rem 0 0;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 3.125rem;
	letter-spacing: -0.0938rem;
	color: #ffffff;
}

/* ── Form ── */
.section-contact__form {
	margin-top: 1.5rem;
	max-width: 39.3125rem;
}

/* NO gap → margin-top trên các con kế tiếp. */
.section-contact__form > * + * {
	margin-top: 0.9375rem;
}

.section-contact__row {
	display: flex;
	align-items: stretch;
}

.section-contact__row > .section-contact__field {
	flex: 1 1 0;
	min-width: 0;
}

.section-contact__row > .section-contact__field + .section-contact__field {
	margin-left: 0.9375rem;
}

.section-contact__field {
	position: relative;
	display: flex;
}

.section-contact__field--full {
	width: 100%;
}

.section-contact__input {
	box-sizing: border-box;
	width: 100%;
	height: 3.25rem;
	padding: 1.0625rem 0.875rem;
	border: 0;
	border-radius: var(--sc-radius);
	background-color: var(--sc-input-bg);
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.05rem;
	letter-spacing: -0.0088rem;
	color: var(--sc-input-text);
}

.section-contact__input::placeholder {
	color: var(--sc-placeholder);
	opacity: 1;
}

.section-contact__input:focus-visible {
	outline: 0.125rem solid var(--sc-brand);
	outline-offset: 0.0625rem;
}

/* ── Select (Khu vực / Sản phẩm) ── */
.section-contact__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2rem;
	cursor: pointer;
}

/* Giữ màu placeholder khi chưa chọn, đậm khi đã chọn giá trị hợp lệ. */
.section-contact__select:invalid {
	color: var(--sc-placeholder);
}

.section-contact__field--select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.875rem;
	width: 0;
	height: 0;
	margin-top: -0.1563rem;
	border-left: 0.3125rem solid transparent;
	border-right: 0.3125rem solid transparent;
	border-top: 0.3125rem solid var(--sc-caret);
	pointer-events: none;
}

/* ── Nút gửi ── */
.section-contact__submit {
	display: inline-flex;
	align-items: center;
	height: 2.9375rem;
	padding: 0 1.4375rem;
	border: 0;
	border-radius: var(--sc-radius);
	background-color: var(--sc-brand);
	color: #ffffff;
	font-family: "Nunito Sans", sans-serif;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.5rem;
	letter-spacing: -0.0156rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.section-contact__submit:hover,
.section-contact__submit:focus-visible {
	background-color: var(--sc-brand-600);
}

.section-contact__submit-icon {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.5rem;
}

/* ── Visual công nhân (phải) ── */
.section-contact__visual {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.section-contact__worker {
	position: absolute;
	object-fit: cover;
}

/* Panel cuộn nhôm (Figma "Mask group") — bo cạnh trên-trái chéo (swoosh mask của Vector 22)
   để lộ ảnh máy tối phía sau, thay vì cạnh vuông. */
.section-contact__worker--back {
	top: 0;
	right: -6rem;
	z-index: 1;
	width: 50.5625rem;
	height: 33.625rem;
	object-position: left center;
	clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%, 0 55%);
}

.section-contact__worker--front {
	right: 0;
	bottom: -5.29rem;
	z-index: 2;
	width: 28.5625rem;
	height: 36.625rem;
	object-position: top center;
}

/* ── Mobile (Figma 2672:30176 "Liên hệ tư vấn MB") — form trên, ảnh công nhân băng đáy ── */
@media screen and (max-width: 639.98px) {
	.section-contact__inner {
		/* chừa chỗ băng ảnh công nhân (~22.25rem) + khoảng thở ở đáy */
		padding: 3.125rem 0.75rem 24rem;
	}

	.section-contact__content {
		width: 100%;
	}

	/* Ảnh nền nhà máy full-bleed, full opacity (Figma root image fill) */
	.section-contact__bg {
		opacity: 1;
		object-position: center top;
	}

	/* Scrim tối phần trên để chữ trắng dễ đọc trên ảnh; fade hết trước băng ảnh công nhân */
	.section-contact::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(
			180deg,
			rgba(0, 50, 83, 0.7) 0%,
			rgba(0, 50, 83, 0.4) 38%,
			rgba(0, 50, 83, 0) 58%
		);
		pointer-events: none;
	}

	/* Nhãn "Liên hệ" 12/600 / lh16 */
	.section-contact__label {
		font-size: 0.75rem;
		line-height: 1rem;
	}

	/* "Liên hệ tư vấn ngay hôm nay" 28/800 / lh36 (I2672:30176;2672:29716) */
	.section-contact__subtitle {
		font-size: 1.75rem;
		line-height: 2.25rem;
		letter-spacing: -0.0625rem;
	}

	.section-contact__row {
		flex-direction: column;
	}

	.section-contact__row > .section-contact__field + .section-contact__field {
		margin-top: 0.9375rem;
		margin-left: 0;
	}

	/* Input mobile: cao 2.5rem, padding 0.625rem, Nunito Sans 0.75rem (Figma "Input" MB) */
	.section-contact__input {
		height: 2.5rem;
		padding: 0.625rem;
		font-family: "Nunito Sans", sans-serif;
		font-size: 0.75rem;
		line-height: 1.25rem;
		letter-spacing: -0.0156rem;
	}

	/* Nút gửi full-width, cao 2.625rem, chữ 0.75rem/800 (Figma "Button/btn-main" FILL) */
	.section-contact__submit {
		width: 100%;
		justify-content: center;
		height: 2.625rem;
		font-size: 0.75rem;
		line-height: 1.3404rem;
		letter-spacing: -0.014rem;
	}

	/* Desktop scrim ngang không dùng cho mobile (mobile có ::before dọc riêng). */
	.section-contact::after {
		display: none;
	}

	/* Bỏ cutout desktop; dùng băng ảnh Figma "Consulting image" */
	.section-contact__worker--back,
	.section-contact__worker--front {
		display: none;
	}

	.section-contact__consulting {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		width: 100%;
		height: 22.2526rem;
		object-fit: cover;
		object-position: center top;
	}
}