/* ==========================================================================
   pages-2026.css — các khối riêng của bốn trang marketing 2026
   (Lĩnh vực · Công nghệ · Mô hình triển khai · Mạng lưới đối tác)

   Chỉ chứa phần corporate-2026.css chưa có. Màu, khoảng cách, bo góc và
   đổ bóng đều lấy từ biến của corporate-2026.css để bốn trang này không
   trôi khỏi hệ thiết kế chung.
   ========================================================================== */

/* Bản dải gradient cần đệm riêng; bản có ảnh giữ nhịp của corp-hero--photo. */
.hc-wp .mp-page .mp-hero.corp-hero--band {
	padding: 96px 0 88px;
}

.hc-wp .mp-page .mp-hero.corp-hero--photo {
	min-height: 560px;
	padding: 108px 0 92px;
}

.hc-wp .mp-page .mp-hero.corp-hero--photo .corp-hero__content {
	width: min(720px, 62%);
}

.hc-wp .mp-page .mp-hero h1 {
	max-width: 15ch;
}

.hc-wp .mp-page .mp-hero .corp-hero__content > p {
	max-width: 62ch;
}

.hc-wp .mp-page .mp-facts {
	border-top: 0;
}

/* --- Thẻ có ảnh ------------------------------------------------------- */

.hc-wp .mp-page .mp-media-grid {
	display: grid;
	gap: 26px;
}

.hc-wp .mp-page .mp-media-grid--square {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Nhóm dọc có trang 4 thẻ, có trang 5 thẻ. Để auto-fit thì cả hai đều nằm gọn
   một hàng thay vì bỏ lại một thẻ lẻ ở hàng dưới. */
.hc-wp .mp-page .mp-media-grid--portrait {
	grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
}

.hc-wp .mp-page .mp-media-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--corp-line);
	border-radius: var(--corp-radius);
	background: #fff;
	box-shadow: var(--corp-shadow);
}

.hc-wp .mp-page .mp-media-card__figure {
	line-height: 0;
	background: #eef3f9;
}

.hc-wp .mp-page .mp-media-card__figure img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Ảnh gốc chỉ 300×300 và 298×400, phóng to hơn mức này là vỡ hạt. */
.hc-wp .mp-page .mp-media-grid--square .mp-media-card__figure img {
	aspect-ratio: 1 / 1;
}

.hc-wp .mp-page .mp-media-grid--portrait .mp-media-card__figure img {
	aspect-ratio: 3 / 4;
}

.hc-wp .mp-page .mp-media-card__body {
	flex: 1;
	padding: 22px 22px 26px;
}

.hc-wp .mp-page .mp-media-card__body h3 {
	margin: 0 0 10px;
	color: var(--corp-navy);
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

.hc-wp .mp-page .mp-media-card__body p {
	margin: 0;
	color: var(--corp-text);
	font-size: 15px !important;
	line-height: 1.72 !important;
}

/* --- Khối mô hình triển khai ------------------------------------------ */

.hc-wp .mp-page .mp-blocks {
	display: grid;
	gap: 24px;
}

.hc-wp .mp-page .mp-block {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	padding: 34px 36px;
	border: 1px solid var(--corp-line);
	border-left: 3px solid var(--corp-blue);
	border-radius: var(--corp-radius);
	background: #fff;
	box-shadow: var(--corp-shadow);
}

.hc-wp .mp-page .mp-block h3 {
	margin: 0 0 12px;
	color: var(--corp-navy);
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

.hc-wp .mp-page .mp-block__desc {
	margin: 0 0 18px;
	color: var(--corp-text);
	font-size: 16px !important;
	line-height: 1.75 !important;
}

/* Sơ đồ phối hợp — ba nút nối bằng gạch, nút "từ xa" viền đứt. */
.hc-wp .mp-page .mp-flow {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 24px;
	border-radius: var(--corp-radius);
	background: #f4f8fd;
	list-style: none;
}

.hc-wp .mp-page .mp-flow__node {
	position: relative;
	padding: 14px 18px;
	border: 1px solid var(--corp-blue);
	border-radius: 10px;
	background: #fff;
	text-align: center;
}

.hc-wp .mp-page .mp-flow__node.is-remote {
	border-style: dashed;
}

.hc-wp .mp-page .mp-flow__node + .mp-flow__node {
	margin-top: 30px;
}

.hc-wp .mp-page .mp-flow__node + .mp-flow__node::before {
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
	width: 2px;
	height: 30px;
	background: var(--corp-blue);
	opacity: .45;
}

.hc-wp .mp-page .mp-flow__role {
	display: block;
	color: var(--corp-navy);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hc-wp .mp-page .mp-flow__where {
	display: block;
	margin-top: 4px;
	color: var(--corp-text);
	font-size: 14px;
}

/* --- So sánh loại hợp đồng -------------------------------------------- */

.hc-wp .mp-page .mp-compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
}

.hc-wp .mp-page .mp-compare__col {
	padding: 32px 34px 34px;
	border: 1px solid var(--corp-line);
	border-top: 3px solid var(--corp-blue);
	border-radius: var(--corp-radius);
	background: #fff;
	box-shadow: var(--corp-shadow);
}

.hc-wp .mp-page .mp-compare__col h3 {
	margin: 0 0 10px;
	color: var(--corp-navy);
	font-size: 21px !important;
	font-weight: 600 !important;
}

.hc-wp .mp-page .mp-compare__lead {
	margin: 0 0 18px;
	color: var(--corp-text);
	font-size: 16px !important;
	line-height: 1.75 !important;
}

.hc-wp .mp-page .mp-compare__fit-label {
	margin: 24px 0 10px;
	color: var(--corp-navy);
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hc-wp .mp-page .mp-compare__fit {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hc-wp .mp-page .mp-compare__fit li {
	padding: 7px 14px;
	border: 1px solid var(--corp-line);
	border-radius: 999px;
	background: #f4f8fd;
	color: var(--corp-navy);
	font-size: 14px;
}

/* --- Tường logo đối tác ------------------------------------------------ */

.hc-wp .mp-page .mp-logo-group + .mp-logo-group {
	margin-top: 44px;
}

.hc-wp .mp-page .mp-logo-group__title {
	margin: 0 0 18px;
	color: var(--corp-navy);
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hc-wp .mp-page .mp-logo-wall {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hc-wp .mp-page .mp-logo {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	justify-content: center;
	min-height: 132px;
	padding: 18px 14px;
	border: 1px solid var(--corp-line);
	border-radius: var(--corp-radius);
	background: #fff;
	text-align: center;
}

/* Sáu logo kết nối quốc tế là SVG vuông có nền trắng rộng, dấu hiệu thật nằm
   nhỏ ở giữa. Giới hạn chiều cao 38px làm chúng gần như không đọc được, nên
   nới chiều cao và để object-fit lo phần còn lại. */
.hc-wp .mp-page .mp-logo img {
	max-width: 132px;
	max-height: 56px;
	object-fit: contain;
}

.hc-wp .mp-page .mp-logo span {
	color: var(--corp-text);
	font-size: 13px;
	line-height: 1.4;
}

/* --- Thẻ có icon ------------------------------------------------------- */

.hc-wp .mp-page .mp-icon-card__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--corp-blue) 0%, #6aa9ff 100%);
	color: #fff;
}

.hc-wp .mp-page .mp-icon-card__mark svg {
	width: 22px;
	height: 22px;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1200px) {
	.hc-wp .mp-page .mp-logo-wall {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.hc-wp .mp-page .mp-media-grid--square,
	.hc-wp .mp-page .mp-media-grid--portrait {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hc-wp .mp-page .mp-block {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
}

@media (max-width: 900px) {
	.hc-wp .mp-page .mp-hero {
		padding: 76px 0 68px;
	}

	.hc-wp .mp-page .mp-compare {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.hc-wp .mp-page .mp-media-grid--square,
	.hc-wp .mp-page .mp-media-grid--portrait {
		grid-template-columns: minmax(0, 1fr);
	}

	.hc-wp .mp-page .mp-logo-wall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hc-wp .mp-page .mp-block {
		padding: 26px 22px;
	}
}

/* ------------------------------------------------------------------ */
/*  Trang Cong nghe — danh muc mo dan roi bien mat khi cuon qua        */
/* ------------------------------------------------------------------ */

/*
 * Hieu ung nay dung animation dieu khien boi thanh cuon cua trinh duyet
 * (animation-timeline: view()), khong dung JavaScript. Ly do: mot trinh nghe
 * scroll trong JS chay tren luong chinh va phai tu tinh vi tri tung khoi o moi
 * khung hinh — dung 6 khoi thi con chiu duoc, nhung no giat ngay khi may yeu.
 * Trinh duyet chay animation nay tren luong hop thanh (compositor), nen muot ma
 * khong ton gi cua luong chinh.
 *
 * `animation-range: exit` la khoang tu luc canh tren cua khoi cham dinh khung
 * nhin cho toi luc canh duoi cua no vuot qua dinh — dung nghia "khi cuon qua".
 * Ket thuc o 88% de khoi bien mat han truoc khi ra khoi man hinh, thay vi tat
 * dan dung luc no da khuat.
 *
 * Hieu ung DAO NGUOC duoc: cuon len thi khoi hien lai, vi day la animation gan
 * vao vi tri cuon chu khong phai mot lan chay roi thoi. Noi dung da doc khong
 * bao gio mat.
 *
 * Gioi han vao dung trang Cong nghe bang page-id: template-parts/marketing-page.php
 * dung chung cho khoang muoi trang marketing khac, va hieu ung nay chi duoc yeu
 * cau cho trang nay.
 *
 * Trinh duyet chua ho tro view() thi khong co gi xay ra — noi dung hien binh
 * thuong, khong hong.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		div.hc-wp.page-id-31384 .mp-page .mp-block {
			animation: hc-block-scroll-out linear both;
			animation-timeline: view();
			animation-range: exit 12% exit 88%;
			will-change: opacity, transform;
		}

		@keyframes hc-block-scroll-out {
			to {
				opacity: 0;
				transform: translateY(-28px) scale(0.985);
			}
		}
	}
}