/**
 * DS Elements — Đánh giá khách hàng
 *
 * Mọi thuộc tính có thể chỉnh trong tab Style đều viết dạng
 *   var(--ds-testi-X, var(--ds-token))
 * Control để trống thì biến không được set và token quyết định. Control có
 * giá trị thì ghi đè đúng widget đó. Nhờ vậy tab Style không phá lớp token.
 *
 * Cuộn ngang bằng scroll-snap thuần CSS, không phụ thuộc Swiper: hoạt động y
 * hệt nhau ở frontend và trong editor, và vuốt trên mobile là cử chỉ native.
 * JS chỉ lo mũi tên, chấm tròn và trạng thái active.
 */

/* Wrapper do Elementor sinh ra sẽ co vừa nội dung khi widget nằm trong
   Flexbox hàng ngang, làm cả lưới bị bó theo dòng heading. Ép nó đủ rộng. */
.elementor-widget-ds-testimonials {
	width: 100%;
	min-width: 0;
}

.ds-testi {
	width: 100%;
	min-width: 0;

	--ds-testi-cols: 3;
	--ds-testi-min: 260px;
}

/* --- Cụm tiêu đề -------------------------------------------------------- */

.ds-testi__head {
	text-align: var(--ds-testi-align, center);
	margin-bottom: var(--ds-testi-head-gap, var(--ds-space-8));
}

.ds-testi__eyebrow {
	margin: 0 0 var(--ds-testi-eyebrow-gap, var(--ds-space-2));
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-small);
	letter-spacing: var(--ds-ls-eyebrow);
	text-transform: uppercase;
	color: var(--ds-testi-eyebrow-color, var(--ds-color-brand-light));
}

.ds-testi__heading {
	margin: 0;
	font-size: var(--ds-fs-h2);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-h2);
	text-transform: uppercase;
	color: var(--ds-testi-heading-color, var(--ds-color-brand));
}

/* --- Vùng cuộn ---------------------------------------------------------- */

.ds-testi__body {
	position: relative;
}

.ds-testi__track {
	display: flex;
	gap: var(--ds-testi-gap, var(--ds-space-6));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;

	/* Chừa chỗ cho box-shadow của thẻ khỏi bị overflow cắt mất, rồi kéo ngược
	   lại bằng margin âm để mép thẻ vẫn thẳng container. */
	padding: var(--ds-space-2);
	margin: calc(var(--ds-space-2) * -1);

	/* Bắt buộc đi kèm padding ở trên. Không có nó, snapport vẫn bắt đầu ở mép
	   scrollport nên trình duyệt phải cuộn sẵn 8px để căn thẻ đầu — vị trí
	   nghỉ thành 8 thay vì 0, và mũi tên "trước" không bao giờ tắt được. */
	scroll-padding-inline: var(--ds-space-2);
}

.ds-testi__track::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.ds-testi__track {
		scroll-behavior: auto;
	}
}

/* --- Thẻ ---------------------------------------------------------------- */

.ds-testi__card {
	flex: 0 0 calc(
		(100% - (var(--ds-testi-cols) - 1) * var(--ds-testi-gap, var(--ds-space-6)))
		/ var(--ds-testi-cols)
	);
	/* Sàn px vừa chặn thẻ teo lại, vừa trả chiều rộng nội tại cho track.
	   min() để màn hẹp hơn sàn thì thẻ vẫn co theo container. */
	min-width: min(var(--ds-testi-min), 100%);
	scroll-snap-align: start;

	margin: 0;
	padding: var(--ds-testi-card-padding, var(--ds-space-6));
	display: flex;
	flex-direction: column;
	gap: var(--ds-testi-card-gap, var(--ds-space-4));

	background: var(--ds-testi-card-bg, var(--ds-color-white));
	border: var(--ds-testi-border-width, 1px) solid
		var(--ds-testi-border-color, var(--ds-color-border));
	border-radius: var(--ds-testi-radius, var(--ds-radius-md));
	box-shadow: var(--ds-shadow-card);
}

.ds-testi__quote {
	display: flex;
	align-items: flex-start;
	gap: var(--ds-testi-mark-gap, var(--ds-space-4));
}

.ds-testi__mark {
	flex: 0 0 auto;
	line-height: 0;
	color: var(--ds-testi-mark-color, var(--ds-color-brand-light));
	opacity: var(--ds-testi-mark-opacity, .28);
}

.ds-testi__mark svg {
	display: block;
	width: var(--ds-testi-mark-size, 24px);
	height: auto;
}

.ds-testi__text {
	margin: 0;
	min-width: 0;
	font-size: var(--ds-fs-body);
	font-weight: var(--ds-fw-regular);
	line-height: var(--ds-lh-body);
	color: var(--ds-testi-quote-color, var(--ds-color-body));
}

/* --- Tác giả ------------------------------------------------------------ */

.ds-testi__author {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: var(--ds-testi-author-gap, var(--ds-space-3));
}

.ds-testi__avatar {
	flex: 0 0 auto;
	width: var(--ds-testi-avatar-size, 44px);
	height: var(--ds-testi-avatar-size, 44px);
	border-radius: var(--ds-radius-pill);
	object-fit: cover;
	background: var(--ds-color-surface);
}

.ds-testi__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ds-testi__name {
	font-size: var(--ds-fs-body);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-tight);
	color: var(--ds-testi-name-color, var(--ds-color-brand));
}

.ds-testi__role,
.ds-testi__company {
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-regular);
	line-height: var(--ds-lh-small);
	color: var(--ds-testi-role-color, var(--ds-color-muted));
}

/* --- Mũi tên ------------------------------------------------------------ */

.ds-testi__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;

	width: var(--ds-testi-arrow-size, 44px);
	height: var(--ds-testi-arrow-size, 44px);
	padding: 0;
	display: grid;
	place-items: center;

	background: var(--ds-testi-arrow-bg, var(--ds-color-white));
	color: var(--ds-testi-arrow-color, var(--ds-color-brand-light));
	border: 1px solid var(--ds-testi-arrow-border, var(--ds-color-brand-light));
	border-radius: var(--ds-testi-arrow-radius, var(--ds-radius-pill));
	box-shadow: var(--ds-shadow-raised);
	cursor: pointer;
	transition: background var(--ds-transition), color var(--ds-transition),
		border-color var(--ds-transition), opacity var(--ds-transition);
}

.ds-testi__nav svg {
	display: block;
	width: var(--ds-testi-arrow-icon, 20px);
	height: var(--ds-testi-arrow-icon, 20px);
}

.ds-testi__nav:hover:not(:disabled) {
	background: var(--ds-testi-arrow-bg-hover, var(--ds-color-brand-light));
	color: var(--ds-testi-arrow-color-hover, var(--ds-color-white));
	border-color: var(--ds-testi-arrow-border-hover, var(--ds-color-brand-light));
}

.ds-testi__nav:focus-visible {
	outline: 2px solid var(--ds-color-brand-light);
	outline-offset: 2px;
}

/* Hết đường cuộn: mặc định làm mờ và chặn bấm, giữ nguyên chỗ để layout khỏi
   giật. Bật control "Ẩn hẳn" thì đổi sang display: none. */
.ds-testi__nav:disabled {
	opacity: var(--ds-testi-arrow-disabled-opacity, .35);
	cursor: default;
	box-shadow: none;
}

.ds-testi--arrows-hide-ends .ds-testi__nav:disabled {
	display: none;
}

/* Ngoài mép: đẩy nửa nút ra ngoài. Đè lên thẻ: thụt vào trong. */
.ds-testi--arrows-outside .ds-testi__nav--prev {
	left: calc(var(--ds-testi-arrow-offset, 0px) * -1 - var(--ds-testi-arrow-size, 44px) / 2);
}

.ds-testi--arrows-outside .ds-testi__nav--next {
	right: calc(var(--ds-testi-arrow-offset, 0px) * -1 - var(--ds-testi-arrow-size, 44px) / 2);
}

.ds-testi--arrows-inside .ds-testi__nav--prev {
	left: var(--ds-testi-arrow-offset, var(--ds-space-3));
}

.ds-testi--arrows-inside .ds-testi__nav--next {
	right: var(--ds-testi-arrow-offset, var(--ds-space-3));
}

/* --- Chấm tròn ---------------------------------------------------------- */

.ds-testi__dots {
	display: flex;
	justify-content: var(--ds-testi-dots-align, center);
	align-items: center;
	gap: var(--ds-testi-dot-gap, 0px);
	margin-top: var(--ds-testi-dots-top-gap, var(--ds-space-6));
}

/* JS chưa dựng chấm (hoặc chỉ có 1 trang) thì container rỗng — bỏ luôn
   margin để không thừa khoảng trắng dưới thẻ. */
.ds-testi__dots:empty {
	display: none;
}

.ds-testi__dot {
	/* Chấm 8px nhưng vùng bấm 24×24 (PageSpeed target-size): padding trong
	   suốt, nền chỉ tô phần nội dung. Khoảng cách nhìn thấy = gap + 2 × padding. */
	box-sizing: content-box;
	width: var(--ds-testi-dot-size, 8px);
	height: var(--ds-testi-dot-size, 8px);
	padding: var(--ds-space-2);
	border: 0;
	border-radius: var(--ds-radius-pill);
	background: var(--ds-testi-dot-color, var(--ds-color-border));
	background-clip: content-box; /* sau shorthand background — nó reset clip */
	cursor: pointer;
	transition: background var(--ds-transition), width var(--ds-transition);
}

.ds-testi__dot:focus-visible {
	outline: 2px solid var(--ds-color-brand-light);
	outline-offset: 3px;
}

.ds-testi__dot.is-active {
	background-color: var(--ds-testi-dot-color-active, var(--ds-color-brand-light));
	width: calc(var(--ds-testi-dot-size, 8px) * var(--ds-testi-dot-active-scale, 1));
}

/* tokens.css xoá nền mọi button ds-* khi :hover/:focus (chặn reset.css tô
   hồng) — với chấm thì nền CHÍNH là chấm, nên trả lại màu. */
.ds-testi .ds-testi__dot:hover,
.ds-testi .ds-testi__dot:focus {
	background-color: var(--ds-testi-dot-color, var(--ds-color-border));
}

.ds-testi .ds-testi__dot.is-active:hover,
.ds-testi .ds-testi__dot.is-active:focus {
	background-color: var(--ds-testi-dot-color-active, var(--ds-color-brand-light));
}

/* --- Màn nhỏ ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ds-testi--arrows-outside .ds-testi__nav--prev {
		left: var(--ds-space-1);
	}

	.ds-testi--arrows-outside .ds-testi__nav--next {
		right: var(--ds-space-1);
	}
}