/* ==========================================================================
   Homepage (chỉ nạp ở trang chủ)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
	position: relative; isolation: isolate; color: #fff;
	min-height: clamp(640px, 56vw, 967px);
	display: flex; align-items: flex-start;
	padding: clamp(220px, 19.6vw, 339px) 0 96px;
	background: var(--c-primary-900);
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(-59.19deg, rgba(4, 6, 49, 0) 5.56%, rgba(0, 35, 63, 0.87) 86.68%);
}
.hero__title {
	font-size: clamp(44px, 5.6vw, 96px); font-weight: 900; line-height: 1.2;
	text-transform: uppercase; color: #fff;
}
.hero__subtitle {
	max-width: 570px; margin-top: 8px;
	font-size: clamp(18px, 1.4vw, 24px); font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .7);
}
.hero__stats {
	display: inline-flex; gap: 32px; margin: 33px 0;
	padding: 16px 24px;
	background: rgba(255, 255, 255, .1); border: 1px solid #fff; border-radius: var(--radius-sm);
	backdrop-filter: blur(2px);
}
.hero__stat { width: 230px; }
.hero__stat dt {
	padding-bottom: 12px; margin-bottom: 12px;
	border-bottom: 1px solid var(--c-gray-40);
	font-size: 36px; font-weight: 900; line-height: 1.4; white-space: nowrap;
}
.hero__stat dd { margin: 0; font-size: 16px; line-height: 1.4; max-width: 202px; }
.hero .btn { display: flex; width: max-content; }

@media (max-width: 991px) {
	.hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; }
	.hero__stat { width: auto; }
	.hero__stat dt { font-size: 28px; padding-bottom: 8px; margin-bottom: 8px; }
}
@media (max-width: 599px) {
	.hero__stats { grid-template-columns: 1fr; gap: 16px; max-width: 420px; }
}

/* ---------- Product catalogue carousel ---------- */
/* Figma: khe giữa 2 thẻ nằm chính giữa màn hình (dời nửa thẻ + nửa khe = 163px);
   nút tròn 32px đè lên mép ngoài thẻ thứ 2 mỗi bên (cách mép 240px ở 1728px). */
.carousel--catalogue { --slide-w: 302px; --snap-shift: 163px; }
.carousel--catalogue .carousel__arrow--prev { left: max(12px, calc(50% - 624px)); }
.carousel--catalogue .carousel__arrow--next { right: max(12px, calc(50% - 624px)); }
@media (max-width: 640px) {
	.carousel--catalogue { --slide-w: 240px; --snap-shift: 0px; }
	.carousel--catalogue .carousel__track { gap: 16px; }
}

/* ---------- Certifications (logo CSS dùng chung ở main.css) ---------- */
.home-certs { padding-bottom: 96px; }

/* ---------- E-Catalogue banner ---------- */
.home-ecat { padding: 0 var(--gutter) var(--section-y); }
.ecat-banner {
	position: relative; overflow: hidden; isolation: isolate;
	max-width: 1480px; min-height: 361px; margin: 0 auto;
	display: flex; align-items: center;
	padding: 48px clamp(24px, 6.5vw, 96px);
	border-radius: 24px; background: #f4f6f9;
}
.ecat-banner__media { position: absolute; inset: 0; z-index: -1; }
.ecat-banner__media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.ecat-banner__content {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 610px;
}
.ecat-banner__content p { font-size: 16px; line-height: 26px; color: var(--c-body); }
/* Sách catalogue (Figma 243:1791): bên phải, tràn qua mép trên/dưới và bị banner cắt như thiết kế */
.ecat-banner__book {
	position: absolute; right: -2.3%; top: -81px;
	width: 41.8%; min-width: 360px; height: auto; pointer-events: none;
}
@media (max-width: 1199px) { .ecat-banner__book { top: auto; bottom: -70px; } }
@media (max-width: 991px) {
	.ecat-banner { align-items: flex-end; min-height: 560px; }
	.ecat-banner__media img { object-position: 85% center; }
	.ecat-banner__book { top: -40px; bottom: auto; right: -6%; width: min(520px, 90%); min-width: 0; }
	.ecat-banner__content { padding: 24px; background: rgba(255, 255, 255, .92); border-radius: var(--radius); }
}

/* ---------- Capabilities (machinery + solutions) ---------- */
.capabilities { position: relative; padding-bottom: 0; overflow-x: clip; }
.split--reverse .split__media { aspect-ratio: 629 / 426; }

.machine-collage { position: relative; aspect-ratio: 628 / 535; }
.machine-collage__photo {
	position: absolute; left: 0; top: 0; z-index: 1;
	width: 78.8%; height: 95.5%; object-fit: cover; border-radius: 24px;
}
.machine-collage__accent {
	position: absolute; left: 82.6%; top: 0; width: 17.4%; height: 30.5%;
	border-radius: 15px; background: var(--c-orange-2);
}
.machine-collage__block {
	position: absolute; left: 54.9%; top: 35%; width: 45.1%; height: 65%;
	border-radius: 15px; background: var(--c-primary);
}
.machine-collage__block::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	background: url("../img/pattern.webp") center / cover; opacity: .1;
}

/* Mascot đè lên góc phải dưới cột chữ, lấn ra ngoài khung như Figma */
.capabilities__mascot { display: none; }
@media (min-width: 1500px) {
	.split__body .section-title { white-space: nowrap; }
	.capabilities__mascot {
		display: block; position: absolute; z-index: 1; width: 380px; height: auto;
		right: -190px; bottom: -110px; pointer-events: none;
	}
}

@media (max-width: 991px) {
	.machine-collage { max-width: 560px; }
}

/* ---------- OEM process ---------- */
.oem__box {
	position: relative;
	max-width: 1648px; margin: 0 auto;
	padding: 97px 0 96px;
	background: var(--c-bg-soft); border-radius: 24px;
}
.oem .section-head { margin-bottom: 64px; }
.oem-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 99px 24px; }
.oem-step {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	min-height: 237px; padding: 66px 24px 70px;
	background: #fff; border-radius: var(--radius); box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
	text-align: center;
}
.oem-step__title {
	position: absolute; top: -24px; left: 24px; right: 24px;
	display: grid; place-items: center; height: 66px; padding: 0 16px;
	border: 2px solid #fff; border-radius: 24px;
	background: linear-gradient(90deg, var(--c-primary), #5eabfa);
	color: #fff; font-size: clamp(20px, 1.4vw, 24px); font-weight: 600; line-height: 1.4;
}
.oem-step__text { font-size: 16px; line-height: 24px; color: var(--c-body); }
.oem-step__icon {
	position: absolute; left: 50%; bottom: -51px; transform: translateX(-50%);
	display: grid; place-items: center; width: 102px; height: 102px;
	border-radius: 50%; background: var(--c-orange); color: #fff;
	transition: transform .25s;
}
.oem-step:hover .oem-step__icon { transform: translateX(-50%) rotate(-8deg) scale(1.05); }
.oem-step__icon svg { width: 56px; height: 56px; }
.oem .section-cta { margin-top: 75px; }
.oem__mascot { display: none; }
@media (min-width: 1500px) {
	.oem__mascot {
		display: block; position: absolute; left: 17px; bottom: -54px; z-index: 1;
		width: 248px; height: auto; pointer-events: none;
	}
}
@media (max-width: 1100px) { .oem-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
	.oem__box { border-radius: 0; padding-block: 64px; }
	.oem-steps { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* ---------- Partner network (map) ---------- */
.network__map { position: relative; aspect-ratio: 1300 / 850; }
.network__dots { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.network__pins { position: absolute; left: 14.69%; top: 30.35%; width: 71.23%; height: auto; }
.network .stat-boxes { position: relative; }
@media (max-width: 991px) {
	.network__map { aspect-ratio: auto; padding-bottom: 66%; }
	.network__dots { top: auto; bottom: 0; height: auto; }
	.network__pins { top: auto; bottom: 9%; }
}

/* ---------- International ---------- */
.intl { display: grid; grid-template-columns: 652fr 628fr; min-height: 445px; }
.intl__panel {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px;
	padding: 56px clamp(24px, 6.6vw, 85px);
	background: var(--c-primary); color: #fff; border-radius: 24px 0 0 24px;
}
.intl__panel::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: url("../img/pattern.webp") center / cover; opacity: .1;
}
.intl__panel .section-title { color: #fff; }
.intl__panel p { font-size: 16px; line-height: 24px; max-width: 543px; }
.intl__panel .btn { border-color: #fff; }
.intl__media { position: relative; }
.intl__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 24px 24px 0; }
@media (max-width: 991px) {
	.intl { grid-template-columns: 1fr; }
	.intl__panel { border-radius: 24px 24px 0 0; }
	.intl__media { aspect-ratio: 4 / 3; }
	.intl__media img { border-radius: 0 0 24px 24px; }
}