/* ============================================================
   Section 3 — layout-items
   desktop: #4005:8612 | tablet: #4005:8699
   ============================================================ */

.r14-track .layout-items {
	/* padding-top 0: section phía trên đã có padding-bottom, không cộng thêm khoảng trên */
	padding: 0 var(--section-horizontal-padding) var(--var-140);
	display: flex;
	justify-content: space-between;
	background: var(--color-2nd-bg);
}

.r14-track .layout-items__content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--section-gap);
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

.r14-track .layout-items__heading {
	display: flex;
	flex-direction: column;
	gap: var(--var-28);
	width: 100%;
}

.r14-track .layout-items__heading-block {
	display: flex;
	flex-direction: column;
	gap: var(--var-12);
	width: 100%;
}

.r14-track .layout-items__heading-row {
	display: flex;
	align-items: center;
	gap: var(--var-16);
	width: 100%;
}

.r14-track .layout-items__heading-instance {
	display: flex;
	align-items: center;
	flex: 1 1 0%;
}

.r14-track .layout-items__title {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.15em;
	color: var(--color-heading);
	max-width: 450px;
}

.r14-track .layout-items__desc-instance {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1 1 0%;
}

.r14-track .layout-items__description {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4em;
	color: var(--color-body);
	max-width: 600px;
}

.r14-track .layout-items__layout {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--section-gap);
	max-width: var(--container-max);
	margin-inline: auto;
	width: 100%;
}

.r14-track .layout-items__hero {
	width: 100%;
}

.r14-track .layout-items__hero-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1400 / 680;
	object-fit: cover;
}

.r14-track .layout-items__cards-row {
	display: flex;
	justify-content: center;
	gap: var(--var-40);
	width: 100%;
}

.r14-track .layout-items__card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--var-40);
	width: 100%;
}

.r14-track .layout-items__card-media {
	width: 100%;
}

.r14-track .layout-items__card-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 440 / 295.31;
	object-fit: cover;
}

.r14-track .layout-items__card-heading {
	width: 100%;
}

.r14-track .layout-items__card-heading-block {
	display: flex;
	flex-direction: column;
	gap: var(--var-12);
	width: 100%;
}

.r14-track .layout-items__card-text {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--var-16);
	width: 100%;
}

.r14-track .layout-items__card-heading-instance {
	display: flex;
	align-items: center;
	width: 100%;
}

.r14-track .layout-items__card-title {
	font-size: var(--fs-h6);
	font-weight: 600;
	line-height: 1.15em;
	color: var(--color-heading);
}

.r14-track .layout-items__card-desc-instance {
	display: flex;
	align-items: center;
	width: 100%;
}

.r14-track .layout-items__card-description {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4em;
	color: var(--color-body);
}

/* ============================================================
   Tablet (max-width: 1024px)
   tabletDiffs traced from #4005:8699:
   - content-wrapper gap 80->40 handled automatically via --section-gap token cascade (no override needed)
   - top-level section-headings switches from row (heading+desc side by side) to stacked column
   - layout container: fixed width 1400 removed -> fills tablet width (single column of cards)
   - cards-row becomes a single column stack (row -> column), gap auto-scales via --section-gap? no, uses var(--var-40) unchanged
   - hero dashboard image (#10457:54777) is hidden/removed on tablet — cards stack full width instead
   - card image aspect ratio changes (794/532.9) because cards now render full-width instead of 1/3 width
   ============================================================ */
@media (max-width: 1024px) {
	.r14-track .layout-items {
		padding-block: 0 var(--var-72);
	}

	.r14-track .layout-items__heading-row {
		flex-direction: column;
		align-items: stretch;
	}

	.r14-track .layout-items__desc-instance,
	.r14-track .layout-items__card-desc-instance {
		max-width: 600px;
	}

	.r14-track .layout-items__layout {
		max-width: none;
	}

	.r14-track .layout-items__hero {
		display: none;
	}

	.r14-track .layout-items__cards-row {
		flex-direction: column;
	}

	.r14-track .layout-items__card-image {
		aspect-ratio: 794 / 532.9;
	}
}