/* Dịch vụ 2027 – template-services-2027.php, loaded after site-2027.css, blocks-2027.css and about-2027.css
   (the hero and the editor article reuse Giới thiệu's styles). */

/* ---------- Hero (Giới thiệu hero + a lead line) ---------- */
.vmt-h27 .vmt-svc-title {
	margin-bottom: 18px;
}
.vmt-svc-lead {
	max-width: 30em;
	margin-bottom: 30px;
	color: var(--ink-2);
	font-size: 18px;
	line-height: 1.6;
	text-wrap: pretty;
}

/* ---------- Shared: service text, notes, carets ---------- */
.vmt-svc-head {
	max-width: 40em;
	margin-bottom: clamp(28px, 4vw, 44px);
}
.vmt-svc-head p,
.vmt-svc-us-intro > p {
	margin-top: 14px;
	color: var(--ink-2);
	font-size: 17px;
	line-height: 1.65;
	text-wrap: pretty;
}
.vmt-svc-item-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.vmt-svc-item-text strong {
	color: var(--ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}
.vmt-svc-item-text small {
	color: var(--ink-2);
	font-size: 14.5px;
	line-height: 1.5;
}
/* Services without a page yet open Zalo: said in words, not only by the icon. */
.vmt-svc-note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	color: var(--accent-strong);
	font-size: 13.5px;
	font-weight: 600;
}
.vmt-svc-note .vmt-h27-icon {
	width: 16px;
	height: 16px;
}
.vmt-svc-caret {
	width: 18px;
	height: 18px;
	color: var(--ink-3);
	transition:
		color 0.25s,
		transform 0.35s var(--ease);
}
a:hover > .vmt-svc-caret {
	color: var(--accent-strong);
	transform: translateX(3px);
}

/* ---------- Tại Việt Nam: photo tiles ---------- */
.vmt-svc-features {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-bottom: 20px;
}
/* Two photos: a wide one and a narrower one, so the row is not two equal halves. */
@media (min-width: 768px) {
	.vmt-svc-features--2 {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
	.vmt-svc-features--3 {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) minmax(0, 5fr);
	}
}
.vmt-svc-feature {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(260px, 30vw, 380px);
	padding: clamp(22px, 2.6vw, 32px);
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.45s var(--ease),
		box-shadow 0.45s var(--ease);
}
.vmt-h27 .vmt-svc-feature,
.vmt-h27 .vmt-svc-feature:hover {
	color: #fff;
}
.vmt-svc-feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}
.vmt-svc-feature-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}
.vmt-svc-feature:hover .vmt-svc-feature-bg {
	transform: scale(1.04);
}
/* The photos are busy (crowds, hangars): a warm dark fade under the text keeps it at AA contrast. */
.vmt-svc-feature::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(23, 18, 14, 0) 30%,
		rgba(23, 18, 14, 0.55) 62%,
		rgba(23, 18, 14, 0.86) 100%
	);
}
.vmt-svc-feature-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 30em;
}
.vmt-svc-feature-body strong {
	font-family: var(--serif);
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 600;
	line-height: 1.15;
}
.vmt-svc-feature-body small {
	color: rgba(255, 255, 255, 0.88);
	font-size: 15.5px;
	line-height: 1.5;
}
.vmt-svc-feature .vmt-h27-tile-go {
	position: absolute;
	top: 20px;
	right: 20px;
	background: rgba(255, 255, 255, 0.92);
}
.vmt-svc-feature:hover .vmt-h27-tile-go {
	background: var(--accent);
	color: #fff;
	transform: rotate(-45deg);
}
/* The chat icon (service answered on Zalo) stays upright; only the arrow tilts. */
.vmt-svc-feature:hover .vmt-h27-tile-go.is-chat {
	transform: none;
}

/* tile-go is styled in home-2027.css, which this page does not load: same round button here. */
.vmt-h27-tile-go {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--accent-strong);
	transition:
		background 0.25s,
		color 0.25s,
		transform 0.35s var(--ease);
}
.vmt-h27-tile-go .vmt-h27-icon {
	width: 18px;
	height: 18px;
}

/* ---------- Tại Việt Nam: the other services ---------- */
.vmt-svc-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 20px;
}
.vmt-svc-item {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	transition:
		border-color 0.3s,
		box-shadow 0.45s var(--ease),
		transform 0.45s var(--ease);
}
.vmt-svc-item:hover {
	border-color: transparent;
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
}
.vmt-svc-item:active {
	transform: translateY(0) scale(0.99);
}
/* Icon tile: same as the homepage (home-2027.css is not loaded here). */
.vmt-h27-icon-tile {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--accent-soft);
	color: var(--accent);
	transition:
		background 0.3s,
		color 0.3s;
}
.vmt-h27-icon-tile .vmt-h27-icon {
	width: 26px;
	height: 26px;
}
.vmt-svc-item:hover .vmt-h27-icon-tile {
	background: var(--accent);
	color: #fff;
}

/* ---------- Tại Hoa Kỳ: introduction + list ---------- */
.vmt-svc-us-inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: clamp(32px, 6vw, 88px);
}
.vmt-svc-us-intro {
	position: sticky;
	top: calc(var(--header-h) + 32px);
}
.admin-bar .vmt-svc-us-intro {
	top: calc(var(--header-h) + 64px);
}
.vmt-svc-us-photo {
	margin-top: clamp(24px, 3vw, 36px);
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
.vmt-svc-us-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.vmt-svc-rows {
	display: grid;
	gap: 12px;
}
.vmt-svc-row {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 20px 14px 14px;
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow 0.45s var(--ease),
		transform 0.45s var(--ease);
}
.vmt-svc-row:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}
.vmt-svc-row:active {
	transform: translateY(0) scale(0.99);
}
.vmt-svc-row-thumb {
	flex: none;
	width: 104px;
	height: 80px;
	border-radius: var(--radius-sm);
	object-fit: cover;
}
.vmt-svc-row-thumb--icon {
	display: grid;
	place-items: center;
	background: var(--accent-soft);
	color: var(--accent);
	transition:
		background 0.3s,
		color 0.3s;
}
.vmt-svc-row-thumb--icon .vmt-h27-icon {
	width: 30px;
	height: 30px;
}
.vmt-svc-row:hover .vmt-svc-row-thumb--icon {
	background: var(--accent);
	color: #fff;
}

/* ---------- Làm việc với Việt Mỹ ---------- */
/* White like the article and the CTA after it: a short bottom so the two white gaps do not add up. */
.vmt-h27-section.vmt-svc-steps-section {
	padding-bottom: clamp(16px, 3vw, 32px);
}
.vmt-svc-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin-top: clamp(28px, 4vw, 44px);
	counter-reset: none;
}
/* One hairline joins the step icons, from the first icon's centre to the last one's
   (a column is (100% - 3 gaps) / 4 wide; the icon centre sits 28px into it). */
.vmt-svc-steps::before {
	content: "";
	position: absolute;
	top: 28px;
	right: calc(25% - 52px);
	left: 28px;
	height: 1px;
	background: var(--line);
}
.vmt-svc-step {
	position: relative;
}
.vmt-svc-step-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff;
	box-shadow:
		0 0 0 1px var(--line),
		0 0 0 8px #fff;
	color: var(--accent);
}
.vmt-svc-step-icon .vmt-h27-icon {
	width: 26px;
	height: 26px;
}
.vmt-svc-step h3 {
	margin-top: 22px;
	font-size: 22px;
	line-height: 1.25;
}
.vmt-svc-step p {
	max-width: 22em;
	margin-top: 8px;
	color: var(--ink-2);
	font-size: 15.5px;
	line-height: 1.6;
}

/* ---------- Editor article (optional) ---------- */
/* Between the white steps section and the CTA, which carries its own top spacing. */
.vmt-svc-article {
	padding-top: clamp(48px, 6vw, 80px);
}
.vmt-svc-article .vmt-about-content {
	margin-inline: auto;
}

/* ---------- Tablets ---------- */
@media (max-width: 1023px) {
	.vmt-svc-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.vmt-svc-us-inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.vmt-svc-us-intro {
		position: static;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		column-gap: 32px;
	}
	/* The photo spans both rows; heading and text meet at the middle line so they read as one block. */
	.vmt-svc-us-intro .vmt-h27-heading {
		grid-column: 1;
		align-self: end;
	}
	.vmt-svc-us-intro > p {
		grid-column: 1;
		align-self: start;
	}
	.vmt-svc-us-photo {
		grid-column: 2;
		grid-row: 1 / 3;
		margin-top: 0;
	}
	.vmt-svc-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 40px;
	}
	.vmt-svc-steps::before {
		display: none;
	}
}

/* ---------- Phones: one column; the steps become a vertical timeline ---------- */
@media (max-width: 767px) {
	.vmt-svc-lead {
		font-size: 17px;
	}
	.vmt-svc-feature {
		min-height: 240px;
	}
	.vmt-svc-items {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
	.vmt-svc-item {
		padding: 16px;
	}
	.vmt-svc-us-intro {
		display: block;
	}
	.vmt-svc-us-photo {
		margin-top: 24px;
	}
	.vmt-svc-us-photo img {
		aspect-ratio: 16 / 10;
	}
	.vmt-svc-row {
		gap: 14px;
		padding: 12px 16px 12px 12px;
	}
	.vmt-svc-row-thumb {
		width: 76px;
		height: 64px;
	}
	.vmt-svc-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.vmt-svc-steps::before {
		display: block;
		top: 28px;
		bottom: 28px;
		left: 28px;
		right: auto;
		width: 1px;
		height: auto;
	}
	.vmt-svc-step {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: 18px;
	}
	.vmt-svc-step-icon {
		grid-row: 1 / 3;
	}
	.vmt-svc-step h3 {
		margin-top: 4px;
		font-size: 20px;
	}
	.vmt-svc-step p {
		margin-top: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vmt-svc-feature,
	.vmt-svc-feature-bg,
	.vmt-svc-item,
	.vmt-svc-row,
	.vmt-svc-caret,
	.vmt-h27-tile-go {
		transition: none;
	}
}