/**
 * Tom Luxury — Section "process" (Quy trinh lam viec)
 * -----------------------------------------------------------------------------
 * Cac buoc xep ngang: huy hieu TRON nen toi chua bieu tuong vang, giua cac huy
 * hieu la mui ten ngang manh mau mo (chi GIUA cac buoc). Duoi huy hieu: so "01"
 * vang nho, ten buoc in hoa dam, mo ta ngan.
 *
 * Khong gia dinh dung 5 buoc: so cot do template tinh tu so buoc thuc te va dat
 * qua inline custom property --tl-cols / --tl-cols-md / --tl-cols-sm.
 * Mui ten chi bat khi TAT CA buoc nam tren mot hang (class --flow).
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * 1. VO SECTION
 * ========================================================================== */
.tl-process--bg-none {
	background-color: transparent;
}

/* =============================================================================
 * 2. DANH SACH BUOC
 * ========================================================================== */
.tl-process__list {
	--tl-badge: clamp(76px, 6.6vw, 104px);
	--tl-gap: clamp(var(--space-md), 2.4vw, var(--space-xl));
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-process__step {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* =============================================================================
 * 3. HUY HIEU TRON
 *    span la inline: wrapper phai la flex, neu khong SVG ben trong se phinh.
 * ========================================================================== */
.tl-process__badge {
	position: relative;
	z-index: 1;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--tl-badge);
	height: var(--tl-badge);
	margin-bottom: var(--space-md);
	border-radius: var(--radius-pill);
	color: var(--color-gold-light);
	transition: background-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

/* Vong vien vang manh bao quanh huy hieu */
.tl-process__badge::before {
	content: "";
	position: absolute;
	inset: -7px;
	border: var(--rule-w) solid var(--color-gold-line);
	border-radius: inherit;
}

.tl-process__badge > svg {
	display: block;
	width: calc(var(--tl-badge) * .36);
	height: calc(var(--tl-badge) * .36);
}

/* Chua chon bieu tuong -> huy hieu hien so thu tu */
.tl-process__badgenum {
	display: block;
	font-family: var(--font-heading);
	font-size: calc(var(--tl-badge) * .3);
	font-weight: var(--weight-medium);
	line-height: 1;
	letter-spacing: .04em;
	color: var(--color-gold-light);
}

/* Panel toi: huy hieu phai sang hon nen section moi noi khoi */
.tl-section--dark .tl-process__badge {
	background-color: var(--color-surface);
}

.tl-process__step:hover .tl-process__badge,
.tl-process__step:focus-within .tl-process__badge {
	background-color: var(--color-luxury-gold);
	color: var(--color-primary);
	transform: translateY(-4px);
}

.tl-process__step:hover .tl-process__badgenum,
.tl-process__step:focus-within .tl-process__badgenum {
	color: var(--color-primary);
}

/* =============================================================================
 * 4. SO THU TU / TEN BUOC / MO TA
 * ========================================================================== */
.tl-process__num {
	margin: 0 0 var(--space-3xs);
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-semibold);
	line-height: 1.2;
	letter-spacing: var(--tracking-widest);
	color: var(--color-luxury-gold);
}

.tl-process__title {
	margin: 0 0 var(--space-2xs);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-primary);
}

.tl-process__link {
	color: inherit;
}

/* Vung bam phu kin buoc nhung van giu mot the <a> that su cho ban phim */
.tl-process__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.tl-process__link:hover,
.tl-process__link:focus-visible {
	color: var(--color-luxury-gold);
}

.tl-process__desc {
	max-width: 30ch;
	margin: 0 auto;
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: var(--color-muted);
}

/* =============================================================================
 * 5. MUI TEN NOI GIUA CAC BUOC (chi khi tat ca nam tren mot hang)
 *    Duong ke manh + dau nhon ve bang mot pseudo-element qua clip-path.
 *    Be ngang = khoang cach giua hai huy hieu:
 *      (be rong cot + khoang cach luoi) - duong kinh huy hieu - 2 x dem.
 * ========================================================================== */
.tl-process__list--flow .tl-process__step::after {
	content: "";
	position: absolute;
	top: calc(var(--tl-badge) / 2);
	left: calc(50% + (var(--tl-badge) / 2) + var(--space-sm));
	width: calc(100% + var(--tl-gap) - var(--tl-badge) - (var(--space-sm) * 2));
	height: 9px;
	translate: 0 -50%;
	background-color: var(--color-gold-line);
	clip-path: polygon(
		0 calc(50% - (var(--rule-w) / 2)),
		calc(100% - 7px) calc(50% - (var(--rule-w) / 2)),
		calc(100% - 7px) 0,
		100% 50%,
		calc(100% - 7px) 100%,
		calc(100% - 7px) calc(50% + (var(--rule-w) / 2)),
		0 calc(50% + (var(--rule-w) / 2))
	);
	pointer-events: none;
}

.tl-process__list--flow .tl-process__step:last-child::after {
	content: none;
}

/* =============================================================================
 * 6. RESPONSIVE
 *    1920 / 1440 / 1366 dung chung thang clamp o tren.
 * ========================================================================== */

/* Tablet: 1024 / 820 / 768 — 2..3 cot, AN mui ten */
@media (max-width: 1024px) {

	.tl-process__list {
		--tl-badge: clamp(68px, 9vw, 88px);
		--tl-gap: clamp(var(--space-md), 3.4vw, var(--space-lg));
	}

	.tl-process .tl-process__step::after {
		content: none;
	}

	.tl-process__desc {
		max-width: 34ch;
	}
}

/* Dien thoai: 640 / 430 / 390 / 360 — mot cot doc, huy hieu ben trai */
@media (max-width: 640px) {

	.tl-process__list {
		--tl-badge: 60px;
		--tl-gap: var(--space-lg);
	}

	.tl-process__step {
		display: grid;
		grid-template-columns: var(--tl-badge) minmax(0, 1fr);
		column-gap: var(--space-md);
		align-items: start;
		text-align: left;
	}

	.tl-process__badge {
		grid-column: 1;
		grid-row: 1 / -1;
		margin-bottom: 0;
	}

	.tl-process__badge::before {
		inset: -5px;
	}

	.tl-process__num,
	.tl-process__title,
	.tl-process__desc {
		grid-column: 2;
	}

	.tl-process__desc {
		max-width: none;
		margin: 0;
	}

	/* Mui ten ngang doi thanh duong noi doc giua cac huy hieu */
	.tl-process .tl-process__step::after {
		content: "";
		position: absolute;
		top: calc(var(--tl-badge) + var(--space-xs));
		bottom: calc(var(--space-xs) - var(--tl-gap));
		left: calc((var(--tl-badge) / 2) - (var(--rule-w) / 2));
		width: var(--rule-w);
		height: auto;
		translate: none;
		clip-path: none;
		background-color: var(--color-border);
	}

	.tl-process .tl-process__step:last-child::after {
		content: none;
	}
}

/* Dien thoai nho: 430 / 390 / 360 */
@media (max-width: 430px) {

	.tl-process__list {
		--tl-badge: 54px;
		--tl-gap: var(--space-md);
	}

	.tl-process__step {
		column-gap: var(--space-sm);
	}

	.tl-process__desc {
		font-size: var(--font-size-xs);
	}
}

/* =============================================================================
 * 7. GIAM CHUYEN DONG
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	.tl-process__step:hover .tl-process__badge,
	.tl-process__step:focus-within .tl-process__badge {
		transform: none;
	}
}