/* =====================================================================
 * [featured_reviews] – "Khách hàng nói gì" (khung slider + chấm tròn lấy từ destination-slider & featured-tours)
 * Màu: chỉ dùng biến :root (--hg-primary, --hg-text, --hg-button, --green-natural) + sao --hg-star
 * ===================================================================== */
.fr-slider.ds-slider { --ds-cols: 3; --ds-gap: 24px; }

.fr-card {
	display: flex;
	width: 100%;
	min-height: 210px;
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--hg-primary) 12%, transparent);
	transition: transform .2s, box-shadow .2s;
}
.fr-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px color-mix(in srgb, var(--hg-primary) 16%, transparent); }

/* Ảnh bên trái */
.fr-media { position: relative; display: block; flex: 0 0 38%; overflow: hidden; background: color-mix(in srgb, var(--hg-text) 10%, #fff); }
.fr-media .fr-img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none; margin: 0; object-fit: cover; transition: transform .5s; }
.fr-noimg { background: linear-gradient(150deg, var(--hg-primary), var(--hg-text)); }
.fr-card:hover .fr-img { transform: scale(1.05); }

/* Nội dung */
.fr-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 16px 16px 14px; }

.fr-stars { position: relative; display: inline-block; align-self: flex-start; margin-bottom: 10px; color: color-mix(in srgb, var(--hg-text) 18%, #fff); font-size: 22px; line-height: 1; letter-spacing: 2px; white-space: nowrap; }
.fr-stars::before { content: "★★★★★"; }
.fr-stars::after { content: "★★★★★"; position: absolute; top: 0; left: 0; width: calc(var(--fr-v, 5) / 5 * 100%); overflow: hidden; color: var(--hg-star, #FBC421); }

.fr-slider .fr-quote {
	display: -webkit-box;
	margin: 0 0 14px;
	padding: 0;
	overflow: hidden;
	border: 0;
	color: var(--hg-text);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

.fr-author { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.fr-avatar { flex: none; width: 40px !important; height: 40px !important; margin: 0; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--hg-text) 8%, #fff); }
.fr-who { display: flex; flex-direction: column; min-width: 0; }
.fr-name { overflow: hidden; color: var(--hg-primary); font-size: 14px; font-weight: 700; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.fr-city { 
    overflow: hidden; 
    color: #B3B3B3; 
    font-size: 14px; 
    line-height: 1.35; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

/* ---------- Màn hình nhỏ hơn ---------- */
@media (max-width: 1099px) { .fr-slider.ds-slider { --ds-cols: 2; --ds-gap: 20px; } }
@media (max-width: 849px)  { .fr-slider.ds-slider { --ds-cols: 1.3; --ds-gap: 16px; } }
@media (max-width: 549px) {
	.fr-slider.ds-slider { --ds-cols: 1.08; --ds-gap: 12px; }
	.fr-card { min-height: 0; flex-direction: column; }
	.fr-media { flex: none; aspect-ratio: 16 / 9; }
	.fr-body { padding: 14px; }
	.fr-slider .fr-quote { font-size: 14px; }
}


/* =====================================================================
 * layout="stack" – thẻ dọc: ảnh trên, chữ dưới, 4 cột
 * ===================================================================== */
.fr-slider.is-stack.ds-slider { --ds-cols: 4; --ds-gap: 20px; }
.fr-slider.is-stack .fr-card { flex-direction: column; min-height: 0; border-radius: 8px; box-shadow: 0 2px 10px color-mix(in srgb, var(--hg-text) 12%, transparent); }
.fr-slider.is-stack .fr-media { flex: none; aspect-ratio: 16 / 8.3; }
.fr-slider.is-stack .fr-body { padding: 16px 14px 14px; }
.fr-slider.is-stack .fr-stars { 
    margin-bottom: 10px; 
    font-size: 20px; 
    letter-spacing: 1px; 
}
.fr-slider.is-stack .fr-quote { 
    margin-bottom: 16px; 
    font-size: 16px; 
    line-height: 1.55; 
    -webkit-line-clamp: 5; 
}
.fr-slider.is-stack .fr-avatar { width: 38px !important; height: 38px !important; }
.fr-slider.is-stack .fr-name { color: var(--hg-text); font-size: 14px; }
.fr-slider.is-stack .fr-city { color: var(--hg-text); font-size: 14px; }

/* Chấm tròn nhỏ (thay thanh dài) */
.fr-slider.is-stack .fts-dots { gap: 6px; margin-top: 18px; }
.fr-slider.is-stack .fts-dots button,
.fr-slider.is-stack .fts-dots button.is-active { width: 7px; height: 7px; }

@media (min-width: 850px) and (max-width: 1099px) { .fr-slider.is-stack.ds-slider { --ds-cols: 3; --ds-gap: 16px; } }
@media (min-width: 550px) and (max-width: 849px)  { .fr-slider.is-stack.ds-slider { --ds-cols: 2.15; --ds-gap: 14px; } }
@media (max-width: 549px) {
	.fr-slider.is-stack.ds-slider { --ds-cols: 1.2; --ds-gap: 12px; }
	.fr-slider.is-stack .fr-body { padding: 14px 12px 12px; }
}