.r14-track .credit-graphic {
	/* 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 .credit-graphic__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--section-gap);
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

.r14-track .credit-graphic__headings {
	display: flex;
	flex-direction: column;
	gap: var(--var-28);
	align-self: stretch;
	width: 100%;
}

.r14-track .credit-graphic__headings-group {
	display: flex;
	flex-direction: column;
	gap: var(--var-12);
	align-self: stretch;
	width: 100%;
}

.r14-track .credit-graphic__headings-row {
	display: flex;
	gap: var(--var-16);
	align-self: stretch;
	width: 100%;
}

.r14-track .credit-graphic__heading-wrap {
	display: flex;
	align-items: center;
	width: 100%;
}

.r14-track .credit-graphic__heading {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: 1.15em;
	color: var(--color-1st-fg);
	text-align: left;
	max-width: 800px;
}

.r14-track .credit-graphic__media {
	max-width: 1400px;
	width: 100%;
	margin-inline: auto;
}

.r14-track .credit-graphic__media-img {
	display: block;
	width: 100%;
	height: auto;
}

.r14-track .credit-graphic__media-img--tablet {
	display: none;
}

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

.r14-track .credit-graphic__row {
	display: flex;
	gap: var(--var-40);
	align-self: stretch;
	width: 100%;
}

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

.r14-track .credit-graphic__item-top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--var-12);
}

.r14-track .credit-graphic__item-index {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.r14-track .credit-graphic__item-index-label {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-label-lg);
	line-height: 1em;
	text-transform: uppercase;
	text-align: center;
	background: linear-gradient(180deg, var(--color-2nd-brd) 0%, var(--color-1st-brd) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.r14-track .credit-graphic__item-copy {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--var-16);
	align-self: stretch;
	width: 100%;
}

.r14-track .credit-graphic__item-heading-wrap {
	display: flex;
	align-items: center;
	width: 100%;
}

.r14-track .credit-graphic__item-heading {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-h6);
	line-height: 1.15em;
	color: var(--color-1st-fg);
	text-align: left;
}

.r14-track .credit-graphic__item-desc-wrap {
	display: flex;
	align-items: center;
	width: 100%;
}

.r14-track .credit-graphic__item-description {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4em;
	color: var(--color-1st-fg);
	text-align: left;
	max-width: 600px;
}

.r14-track .credit-graphic__actions {
	display: flex;
	align-items: center;
	gap: var(--var-12);
}

.r14-track .credit-graphic__cta {
	padding: var(--var-14) var(--var-28);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: var(--var-6);
	border-radius: 100px;
	border: var(--var-1) solid var(--color-stroke);
	background: var(--color-2nd-btn-bg);
	text-decoration: none;
}

.r14-track .credit-graphic__cta-label {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-label-md);
	line-height: 1em;
	text-transform: uppercase;
	color: var(--color-2nd-btn-fg);
}

/* TABLET @media (max-width: 1024px)
   tabletDiffs: section padding 140px/32px -> 140px/20px (horizontal only);
   credit/graphic media swaps to a distinct portrait asset (fill-width, fixed tall aspect)
   instead of the desktop landscape asset — desktop img hidden, tablet img shown */
@media (max-width: 1024px) {
	.r14-track .credit-graphic {
		padding: 0 var(--var-20) var(--var-72);
	}

	.r14-track .credit-graphic__inner {
		/* hard_code: Figma tablet frame (#4005:8712) keeps the content-wrapper gap at 80px
		   (same as desktop) — it does NOT follow --section-gap's global auto-scale to 40px
		   at this breakpoint, so we pin it to --var-80 instead of letting the token cascade */
		gap: var(--var-80);
	}

	.r14-track .credit-graphic__media {
		max-width: 794px;
	}

	.r14-track .credit-graphic__media-img--desktop {
		display: none;
	}

	.r14-track .credit-graphic__media-img--tablet {
		display: block;
	}
}

/* MOBILE @media (max-width: 768px)
   tabletDiffs vs #4005:8787: items 2x2 grid (2 rows of 2) collapses into a single
   flat column of all 4 items — each row stacks instead of staying side-by-side */
@media (max-width: 768px) {
	.r14-track .credit-graphic__row {
		flex-direction: column;
	}
}