/* Block FAQ (Figma 404:62) */

.block-faq__inner {
	max-width: 1198px;
}

.block-faq__title {
	text-align: center;
	text-transform: none;
}

.block-faq__list {
	display: grid;
	margin-top: clamp(24px, 1.93vw, 37px);
}

.faq-item {
	padding-block: 12px;
	border-bottom: 1px solid var(--color-border);
	transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, border-radius 0.45s ease;
}

/* assets/js/faq.js: khung cao dần / thu lại khi mở / đóng (cắt phần câu trả lời còn dở). */
.faq-item.is-animating {
	overflow: hidden;
}

.faq-item__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(8px, 0.63vw, 12px) clamp(16px, 2.08vw, 40px);
	list-style: none;
	cursor: pointer;
}

.faq-item__summary::-webkit-details-marker {
	display: none;
}

.faq-item__question {
	font-size: clamp(17px, 1.46vw, 28px);
	font-weight: 600;
	line-height: 1.21;
	color: var(--color-text-strong);
	transition: color 0.45s ease;
}

.faq-item__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: clamp(40px, 2.92vw, 56px);
	height: clamp(40px, 2.92vw, 56px);
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	transition: transform 0.2s, background-color 0.45s ease, color 0.45s ease;
}

.faq-item__summary:hover .faq-item__icon {
	transform: scale(1.06);
}

/* Dấu + và − chồng lên nhau: mở thì + xoay 1/4 vòng rồi mờ đi, − xoay vào thay chỗ. */
.faq-item__icon .icon {
	grid-area: 1 / 1;
	width: 60%;
	height: 60%;
	transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease;
}

.faq-item__minus {
	opacity: 0;
	transform: rotate(-90deg);
}

.faq-item[open]:not(.is-closing) .faq-item__plus {
	opacity: 0;
	transform: rotate(90deg);
}

.faq-item[open]:not(.is-closing) .faq-item__minus {
	opacity: 1;
	transform: none;
}

.faq-item__answer {
	padding: 8px clamp(16px, 2.08vw, 40px) 12px;
	font-size: clamp(16px, 1.46vw, 28px);
	line-height: 1.25;
}

.faq-item__answer > * + * {
	margin-top: 0.6em;
}

/* Câu trả lời hiện mờ dần và trượt xuống khi mở; mờ đi khi đang đóng. */
@media (prefers-reduced-motion: no-preference) {
	.faq-item[open]:not(.is-closing) .faq-item__answer {
		animation: faq-answer-in 0.5s cubic-bezier(0.33, 1, 0.68, 1) 0.08s both;
	}
}

.faq-item.is-closing .faq-item__answer {
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 0.25s ease, transform 0.3s ease;
}

@keyframes faq-answer-in {
	from {
		opacity: 0;
		transform: translateY(-16px);
	}
}

/* Câu đang mở: khối đỏ bo góc như Figma (.is-closing: đang thu lại thì về kiểu đóng ngay, khung thu dần). */
.faq-item[open]:not(.is-closing) {
	margin-block: 12px;
	padding-block: 24px;
	border-bottom-color: transparent;
	border-radius: var(--radius-lg);
	background: var(--color-primary);
	color: #fff;
}

.faq-item[open]:not(.is-closing) .faq-item__question {
	color: #fff;
}

.faq-item[open]:not(.is-closing) .faq-item__icon {
	background: #fff;
	color: var(--color-primary);
}

/* Biến thể có lọc + tìm kiếm (Figma "Detail page → Insight": chữ nền "FAQs", tiêu đề 44px, Frame 99 rộng 1440, gap 37) */

.block-faq--tools {
	margin-top: clamp(16px, 1.61vw, 31px); /* section đầu trang: chữ nền cách header 31 */
	margin-bottom: clamp(56px, 6.3vw, 121px);
	text-align: center;
}

.block-faq__decor {
	font-size: clamp(64px, 8.75vw, 168px);
	line-height: 1.155; /* 194 / 168 */
	text-transform: none;
}

.block-faq--tools .block-faq__inner {
	max-width: 1440px;
}

.block-faq--tools .block-faq__title {
	margin-top: clamp(4px, 0.52vw, 10px);
	font-size: clamp(26px, 2.29vw, 44px);
	line-height: 1.2; /* hộp chữ Figma cao 53 */
	text-transform: uppercase;
	color: var(--color-text);
}

/* Hiệu ứng chữ đầu trang Insight (feedback vòng 3): chữ nền "FAQs" mờ nhoè, giãn rộng rồi thu về chỗ; tiêu đề
   "Got Questions? Ask Us" hiện từng chữ (site.js, WORDS). Không có JS: cả dòng tiêu đề trồi lên một lượt; khoảng trễ đầu
   giữ tiêu đề ẩn cho tới khi site.js (defer) kịp tách chữ, nên không nháy chữ hiện rồi mới chạy hiệu ứng. */
@media (prefers-reduced-motion: no-preference) {
	.block-faq--tools .block-faq__decor {
		animation: faq-decor-in 2s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.block-faq--tools .block-faq__title {
		animation: faq-title-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
	}
}

@keyframes faq-decor-in {
	from {
		opacity: 0;
		letter-spacing: 0.3em;
		filter: blur(12px);
	}
}

@keyframes faq-title-in {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
}

.block-faq__tools {
	display: grid;
	gap: clamp(20px, 1.93vw, 37px);
	margin-top: clamp(32px, 3.28vw, 63px);
	text-align: left;
}

/* Công cụ cần JS: không có JS thì ẩn, mọi câu hỏi vẫn hiện. */
.block-faq--tools:not(.is-enhanced) .block-faq__tools {
	display: none;
}

.faq-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(8px, 1.25vw, 24px);
}

.faq-chips__chip {
	padding: clamp(8px, 0.83vw, 16px);
	border: 0;
	border-radius: var(--radius-sm);
	background: #fff;
	font: inherit;
	font-size: clamp(15px, 1.25vw, 24px);
	line-height: 1.17;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.faq-chips__chip:hover {
	color: var(--color-primary);
}

.faq-chips__chip[aria-pressed="true"] {
	background: var(--color-primary);
	font-weight: 600;
	color: #fff;
}

.faq-search {
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(100%, 600px);
	padding: clamp(8px, 0.73vw, 14px) 12px;
	border-bottom: 1px solid var(--color-border);
}

.faq-search__icon {
	flex: none;
	width: clamp(24px, 1.67vw, 32px);
	height: clamp(24px, 1.67vw, 32px);
	color: var(--color-text);
}

.faq-search__input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: clamp(16px, 1.25vw, 24px);
	color: var(--color-text);
}

.faq-search__input::placeholder {
	color: var(--color-text-muted);
}

/* Viền focus vẽ trên cả ô (icon + input) thay cho viền mặc định của input. */
.faq-search__input:focus {
	outline: none;
}

.faq-search:focus-within {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.block-faq--tools .block-faq__list {
	text-align: left;
}

.block-faq__empty {
	margin-top: 24px;
	color: var(--color-text-muted);
}

/* "Show more" (faq.js): chỉ trên mobile, khi danh sách đang gập 3 câu đầu (Figma mobile "Insight", feedback vòng 4). */
.block-faq__more {
	display: none;
	margin: 24px auto 0;
	padding: 8px;
	border: 0;
	background: none;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text-strong);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

@media (max-width: 767px) {
	.block-faq.is-folded .faq-item:nth-child(n + 4) {
		display: none;
	}

	.block-faq.is-folded .block-faq__more {
		display: block;
	}
}