/**
 * Tom Luxury — Section: Dai cam ket (trust bar)
 * -----------------------------------------------------------------------------
 * The ngang nen nau den, mac dinh noi de len day hero tren man hinh may tinh.
 * Chi dung design token, khong hex truc tiep, khong !important.
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * 1. KHUNG SECTION
 * ========================================================================== */
.tl-trust {
	--tl-trust-overlap: 0px;
	padding-top: var(--space-section);
	/* Dai cam ket la mot thanh mong: giam khoang cach voi section ke tiep. */
	padding-bottom: calc(var(--space-section) * .55);
	background-color: transparent;
}

.tl-trust__inner {
	position: relative;
	z-index: 2;
	margin-top: calc(var(--tl-trust-overlap) * -1);
	padding: var(--space-lg) var(--space-sm);
	background-color: var(--color-primary);
	border: var(--rule-w) solid var(--color-border-dark);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lift);
}

/* =============================================================================
 * 2. DANH SACH — tu chia cot theo so muc (lop bo tro do PHP gan)
 * ========================================================================== */
.tl-trust__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	row-gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-trust__list--1 {
	grid-template-columns: minmax(0, 1fr);
}

.tl-trust__list--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tl-trust__list--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tl-trust__list--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* =============================================================================
 * 3. MOT MUC
 * ========================================================================== */
.tl-trust__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	min-width: 0;
	padding: var(--space-2xs) var(--space-lg);
	line-height: var(--leading-snug);
}

/* Duong ke doc giua cac muc */
.tl-trust__item::before {
	content: "";
	position: absolute;
	top: 10%;
	bottom: 10%;
	left: 0;
	width: var(--rule-w);
	background-color: var(--color-border-dark);
}

/* Duong ke ngang cho cac hang sau hang dau (chi bat khi can) */
.tl-trust__item::after {
	content: "";
	position: absolute;
	top: calc(var(--space-2xs) * -1);
	right: 6%;
	left: 6%;
	display: none;
	height: var(--rule-w);
	background-color: var(--color-border-dark);
}

.tl-trust__list--1 .tl-trust__item::before,
.tl-trust__list--2 .tl-trust__item:nth-child(2n+1)::before,
.tl-trust__list--3 .tl-trust__item:nth-child(3n+1)::before,
.tl-trust__list--4 .tl-trust__item:nth-child(4n+1)::before {
	display: none;
}

.tl-trust__list--2 .tl-trust__item:nth-child(n+3)::after,
.tl-trust__list--3 .tl-trust__item:nth-child(n+4)::after,
.tl-trust__list--4 .tl-trust__item:nth-child(n+5)::after {
	display: block;
}

/* --- 3.1 O bieu tuong ---------------------------------------------------- */
/* span la the inline: bat buoc dat flex, neu khong SVG ben trong se phinh. */
.tl-trust__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: var(--rule-w) solid var(--color-gold-line);
	border-radius: var(--radius-sm);
	color: var(--color-luxury-gold);
	transition: border-color var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

.tl-trust__icon > svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* --- 3.2 Chu ------------------------------------------------------------- */
.tl-trust__body {
	min-width: 0;
}

.tl-trust__title {
	margin: 0 0 var(--space-3xs);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-on-dark);
	overflow-wrap: break-word;
}

.tl-trust__text {
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: var(--leading-base);
	color: var(--color-on-dark-muted);
	overflow-wrap: break-word;
}

/* --- 3.3 Muc co lien ket ------------------------------------------------- */
.tl-trust__link {
	color: inherit;
}

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

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

.tl-trust__item:hover .tl-trust__icon,
.tl-trust__item:focus-within .tl-trust__icon {
	background-color: var(--color-gold-soft);
	border-color: var(--color-luxury-gold);
	color: var(--color-gold-light);
}

/* =============================================================================
 * 4. RESPONSIVE
 * ========================================================================== */

/* --- Man hinh rong: 1920 / 1440 ------------------------------------------ */
@media (min-width: 1600px) {

	.tl-trust__inner {
		padding: var(--space-xl) var(--space-md);
	}

	.tl-trust__item {
		padding-inline: var(--space-xl);
	}

	.tl-trust__icon {
		width: 56px;
		height: 56px;
	}
}

/* --- Chi noi de len hero tren man hinh may tinh -------------------------- */
@media (min-width: 1025px) {

	.tl-trust--overlap {
		--tl-trust-overlap: 60px;
		padding-top: 0;
	}
}

/* --- 1366 ----------------------------------------------------------------- */
@media (max-width: 1366px) {

	.tl-trust__item {
		padding-inline: var(--space-md);
	}
}

/* --- May tinh bang: 1024 / 820 / 768 ------------------------------------- */
@media (max-width: 1024px) {

	.tl-trust__list,
	.tl-trust__list--1,
	.tl-trust__list--2,
	.tl-trust__list--3,
	.tl-trust__list--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--space-md);
	}

	.tl-trust__list--1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.tl-trust__item::before {
		display: block;
	}

	.tl-trust__item::after {
		display: none;
	}

	.tl-trust__list--1 .tl-trust__item::before,
	.tl-trust__item:nth-child(2n+1)::before {
		display: none;
	}

	.tl-trust__item:nth-child(n+3)::after {
		top: calc(var(--space-2xs) * -1);
		display: block;
	}

	.tl-trust__icon {
		width: 48px;
		height: 48px;
	}
}

@media (max-width: 820px) {

	.tl-trust__inner {
		padding: var(--space-md) var(--space-2xs);
	}

	.tl-trust__item {
		padding-inline: var(--space-sm);
	}
}

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

	.tl-trust {
		padding-bottom: calc(var(--space-section) * .75);
	}

	.tl-trust__inner {
		padding: var(--space-sm) var(--space-2xs);
	}

	.tl-trust__list,
	.tl-trust__list--1,
	.tl-trust__list--2,
	.tl-trust__list--3,
	.tl-trust__list--4 {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.tl-trust__item {
		padding: var(--space-sm) var(--space-sm);
	}

	.tl-trust__item::before,
	.tl-trust__item:nth-child(n+3)::after {
		display: none;
	}

	.tl-trust__item + .tl-trust__item::after {
		top: 0;
		right: var(--space-sm);
		left: var(--space-sm);
		display: block;
	}

	.tl-trust__icon {
		width: 44px;
		height: 44px;
	}

	.tl-trust__icon > svg {
		width: 22px;
		height: 22px;
	}
}

@media (max-width: 380px) {

	.tl-trust__item {
		gap: var(--space-xs);
		padding-inline: var(--space-xs);
	}

	.tl-trust__icon {
		width: 40px;
		height: 40px;
	}
}