/**
 * Section 11 — FAQ (hoi dap). CLONE ban mau Fabrica.
 * Bang so day du + tham so bon hieu ung: template-parts/home/section-faq.php.
 */

.w22-faq {
	/* Khe doc do `.w22-than` lo — section chi co le ngang. */
	padding-inline: var(--w22-le);

	/*
	 * `--bg-cong` la spring bounce .1 dai 1.2s — quy tac `[data-w22-hien9]`
	 * khai o bang-gia.css, o day chi cap lai bien cho no ke thua xuong.
	 */
	--bg-cong: linear(
		0, 0.14 8.33%, 0.386 16.67%, 0.609 25%, 0.771 33.33%, 0.876 41.67%,
		0.938 50%, 0.973 58.33%, 0.99 66.67%, 0.998 75%, 1
	);
	/* Duong cong mo/dong muc — chep tu chuoi mau do duoc (ease-in-out manh). */
	--faq-cong: linear(
		0, 0.015 8.7%, 0.075 21.9%, 0.249 34.4%, 0.529 42%, 0.841 56.9%,
		0.907 64.9%, 0.956 74.3%, 0.978 81.9%, 0.993 89.6%, 1
	);
	--faq-mo-tg: 290ms;
	--faq-dong-tg: 270ms;
	--faq-mo-tre: 30ms;
}

.w22-faq__khung {
	width: 100%;
	max-width: 1520px;
	margin-inline: auto;
	display: flex;
	align-items: flex-start;
	gap: var(--w22-khe-the);
}

/* ---------- Cot trai ---------- */
.w22-faq__dau {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

/*
 * Cao dong 0.92 o co 144px xen mu dau tieng Viet neu co overflow:hidden —
 * ban mau co, ta KHONG chep (cung cach da xu ly o Section 06 va 09).
 */
.w22-faq__tieu-de {
	width: 100%;
	font-size: var(--w22-chu-144);
	line-height: 0.92;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc);
}

.w22-faq__dan {
	max-width: 380px;
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

/* ---------- Cot phai ---------- */
.w22-faq__cot {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--w22-khe-the);
}

.w22-faq__muc {
	background: var(--w22-nen-the);
	border-radius: 14px;
	overflow: hidden;
}

/* 🔴 `<button>` mac dinh canh GIUA (bay §22) — phai tra lai canh trai. */
.w22-faq__hoi {
	width: 100%;
	padding: 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	font-size: var(--w22-chu-18);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

/*
 * Bieu tuong: hinh tron dac khoet dau "+" (ban mau dung mask tro toi SVG 91x91).
 * Mo thi XOAY TRON 360°, dong thi xoay nguoc ve 0.
 */
.w22-faq__icon {
	flex: none;
	display: block;
	width: 18px;
	height: 18px;
	margin-left: var(--w22-khe-2);
	color: var(--w22-muc);
	transform: rotate(0deg);
	transition: transform var(--faq-dong-tg) var(--faq-cong);
}

.w22-faq__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.w22-faq__muc.is-mo .w22-faq__icon {
	transform: rotate(360deg);
	transition: transform var(--faq-mo-tg) var(--faq-cong) var(--faq-mo-tre);
}

/*
 * Khung co gian: grid-template-rows 0fr -> 1fr (cung cach voi accordion
 * Section 04). 🔴 Mo va dong KHAC NHIP nen dat transition rieng o tung trang
 * thai dich, dung gop mot cho (bay §13).
 */
.w22-faq__mo {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--faq-dong-tg) var(--faq-cong);
}

.w22-faq__mo > div {
	overflow: hidden;
}

.w22-faq__muc.is-mo .w22-faq__mo {
	grid-template-rows: 1fr;
	transition: grid-template-rows var(--faq-mo-tg) var(--faq-cong) var(--faq-mo-tre);
}

.w22-faq__dap {
	padding: 0 26px 26px;
	font-size: var(--w22-chu-15);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc-mo);
}

/* ---------- Bang tablet ---------- */
@media (max-width: 1024px) {
	.w22-faq__tieu-de {
		font-size: 99px;
	}

	.w22-faq__dan {
		font-size: var(--w22-chu-14);
		line-height: 1.4;
	}
}

/* ---------- Bang dien thoai ---------- */
@media (max-width: 600px) {
	.w22-faq__khung {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.w22-faq__dau {
		gap: 18px;
	}

	.w22-faq__tieu-de {
		font-size: 62px;
	}

	.w22-faq__dan {
		font-size: 13px;
	}

	/* Rieng kho nay muc thu lai: dem 20, cau hoi 15/19.5, cau tra loi 13/18.2. */
	.w22-faq__hoi {
		padding: 20px;
		font-size: var(--w22-chu-15);
		line-height: 1.3;
	}

	.w22-faq__dap {
		padding: 0 20px 20px;
		font-size: 13px;
		line-height: 1.4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.w22-faq__mo,
	.w22-faq__muc.is-mo .w22-faq__mo,
	.w22-faq__icon,
	.w22-faq__muc.is-mo .w22-faq__icon {
		transition: none;
	}
}