/**
 * Tom Luxury — Section: Cam nhan khach hang
 * -----------------------------------------------------------------------------
 * The nen trang bo goc --radius-md, bong mem, dau nhay kep vang o goc tren trai,
 * duong ke manh truoc hang tac gia (avatar tron + ten dam + dong du an mau vang).
 *
 * So cot tu thu theo so item; khi vuot so cot thi danh sach chuyen sang dang
 * truot ngang (.tl-slider) — dots do assets/js/tomluxury.js tu sinh.
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * 1. KHUNG SECTION + DANH SACH
 * ========================================================================== */
.tl-testimonials--bg-none {
	background-color: transparent;
}

.tl-testimonials__viewport {
	position: relative;
}

.tl-testimonials__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Danh sach dang luoi: it item thi bo hep lai cho khoi keo dai xau. */
.tl-testimonials__list--cols-1 {
	max-width: 680px;
	margin-inline: auto;
}

.tl-testimonials__list--cols-2 {
	max-width: 1020px;
	margin-inline: auto;
}

.tl-testimonials__item {
	display: flex;
	min-width: 0;
}

/* Dang truot: giu khoang dem duoi de bong the khong bi cat khi cuon ngang. */
.tl-testimonials--slider .tl-testimonials__list {
	padding-bottom: var(--space-sm);
}

/* =============================================================================
 * 2. THE CAM NHAN
 * ========================================================================== */
.tl-testimonial {
	flex: 1 1 auto;
	gap: var(--space-md);
	padding: clamp(24px, 2.4vw, 40px);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	/* .tl-card dat overflow:hidden — o day khong co anh tran vien nen mo lai
	   de outline khi focus khong bi cat. */
	overflow: visible;
}

.tl-testimonial:hover,
.tl-testimonial:focus-within {
	box-shadow: var(--shadow-lift);
}

.tl-testimonial__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-sm);
}

/* --- 2.1 Dau nhay kep lon mau vang --------------------------------------- */
.tl-testimonial__mark {
	display: block;
	flex: none;
	width: clamp(32px, 3vw, 40px);
	height: clamp(32px, 3vw, 40px);
	color: var(--color-luxury-gold);
	stroke-width: 1.2;
}

/* --- 2.2 Sao danh gia ----------------------------------------------------- */
.tl-testimonial__rating {
	display: flex;
	align-items: center;
	gap: 3px;
	margin: 0;
	color: var(--color-luxury-gold);
}

.tl-testimonial__star {
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.tl-testimonial__star--off {
	color: var(--color-shade-strong);
}

/* --- 2.3 Noi dung cam nhan ------------------------------------------------
 * base.css tao kieu cho <blockquote> (vien trai vang, nen vang nhat, serif).
 * The cam nhan dung kieu rieng nen phai tra ve trung tinh o day.
 * -------------------------------------------------------------------------- */
.tl-testimonial__quote {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-style: normal;
	line-height: var(--leading-base);
	color: var(--color-text);
}

.tl-testimonial__quote p {
	margin: 0 0 var(--space-sm);
	font-size: inherit;
	line-height: inherit;
}

.tl-testimonial__quote p:last-child {
	margin-bottom: 0;
}

/* --- 2.4 Hang tac gia ----------------------------------------------------- */
.tl-testimonial__author {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: auto;
	padding-top: var(--space-md);
	border-top: var(--rule-w) solid var(--color-border);
}

.tl-testimonial__avatar {
	/* span la inline: bat buoc dat flex, neu khong anh ben trong se phinh. */
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background-color: var(--color-gold-soft);
	border-radius: var(--radius-pill);
	color: var(--color-luxury-gold);
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--weight-semibold);
	line-height: 1;
	text-transform: uppercase;
}

.tl-testimonial__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tl-testimonial__who {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.tl-testimonial__name {
	display: block;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	color: var(--color-primary);
	overflow-wrap: break-word;
}

.tl-testimonial__role {
	display: block;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	line-height: var(--leading-snug);
	color: var(--color-luxury-gold);
	overflow-wrap: break-word;
}

/* Panel toi: ten va vien phai doi mau theo token cua .tl-section--dark. */
.tl-section--dark .tl-testimonial {
	box-shadow: none;
}

.tl-section--dark .tl-testimonial__name {
	color: var(--color-on-dark);
}

.tl-section--dark .tl-testimonial__role {
	color: var(--color-gold-light);
}

.tl-section--dark .tl-testimonial__star--off {
	color: var(--color-border-dark);
}

/* =============================================================================
 * 3. RESPONSIVE
 * ========================================================================== */

/* 1920 — the thoang hon mot chut. */
@media (min-width: 1600px) {

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

/* 1024 / 820 / 768 — luoi da tu ha xuong 2 cot qua --tl-cols-md trong
   components.css; o day chi chinh lai kich thuoc ben trong the. */
@media (max-width: 1024px) {

	.tl-testimonial__mark {
		width: 32px;
		height: 32px;
	}
}

@media (max-width: 768px) {

	.tl-testimonials__list--cols-2 {
		max-width: 680px;
	}
}

@media (max-width: 640px) {

	.tl-testimonial {
		padding: var(--space-lg) var(--space-md);
	}

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

	.tl-testimonial__avatar {
		width: 48px;
		height: 48px;
		font-size: var(--font-size-lg);
	}
}

@media (max-width: 430px) {

	.tl-testimonial__body {
		gap: var(--space-xs);
	}

	.tl-testimonial__mark {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 360px) {

	.tl-testimonial__author {
		gap: var(--space-2xs);
	}

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