/**
 * Khối accordion Câu hỏi thường gặp.
 *
 * Dựa trên <details>/<summary> gốc của trình duyệt nên tắt JS vẫn mở đóng được.
 * JS chỉ thêm hiệu ứng trượt và tự đóng câu đang mở khác.
 */

.bch-faq {
	--bchf-accent:  var(--theme-palette-color-1, #e8363c);
	--bchf-ink:     var(--theme-text-color, #16202c);
	--bchf-soft:    color-mix(in srgb, var(--theme-text-color, #16202c) 70%, transparent);
	--bchf-line:    color-mix(in srgb, var(--theme-text-color, #16202c) 12%, transparent);
	--bchf-tint:    var(--theme-palette-color-7, #f6f8fb);
	--bchf-ease:    cubic-bezier(.16, 1, .3, 1);

	margin-block-start: clamp(2rem, 4vw, 3rem);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.bch-faq {
		--bchf-soft: rgb(75 88 105);
		--bchf-line: rgb(16 24 40 / 12%);
	}
}

.bch-faq__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--bchf-ink);
}

.bch-faq__list {
	border-block-start: 1px solid var(--bchf-line);
}

.bch-faq__item {
	border-block-end: 1px solid var(--bchf-line);
}

/* --------------------------------------------------------------------------
   CÂU HỎI
   -------------------------------------------------------------------------- */
.bch-faq__q {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: 1rem 1.125rem;
	cursor: pointer;
	list-style: none; /* bỏ tam giác mặc định (Firefox) */
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--bchf-ink);
	transition: background-color .2s var(--bchf-ease), color .2s var(--bchf-ease);
}

/* Bỏ tam giác mặc định của Safari/Chrome. */
.bch-faq__q::-webkit-details-marker { display: none; }
.bch-faq__q::marker { content: ""; }

.bch-faq__q:hover { color: var(--bchf-accent); }

.bch-faq__q:focus-visible {
	outline: 3px solid var(--bchf-accent);
	outline-offset: -3px;
	border-radius: 4px;
}

/* Trạng thái đang mở */
.bch-faq__item[open] > .bch-faq__q {
	background: var(--bchf-tint);
	color: var(--bchf-accent);
	font-weight: 700;
}

.bch-faq__icon {
	flex: 0 0 auto;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin-block-start: .1875rem;
	color: var(--bchf-soft);
	transition: rotate .3s var(--bchf-ease), color .2s var(--bchf-ease);
}

.bch-faq__item[open] > .bch-faq__q .bch-faq__icon {
	rotate: 180deg;
	color: var(--bchf-accent);
}

.bch-faq__q-text { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   CÂU TRẢ LỜI
   -------------------------------------------------------------------------- */
.bch-faq__a { overflow: hidden; }

.bch-faq__a-inner {
	padding: .25rem 1.125rem 1.5rem;
	color: var(--bchf-soft);
	line-height: 1.75;
}

.bch-faq__a-inner > :first-child { margin-block-start: 0; }
.bch-faq__a-inner > :last-child  { margin-block-end: 0; }
.bch-faq__a-inner p { margin-block: 0 1rem; }
.bch-faq__a-inner :where(h2, h3, h4) { color: var(--bchf-ink); line-height: 1.35; }

.bch-faq__a-inner :where(ul, ol) {
	margin-block: 0 1rem;
	padding-inline-start: 1.25rem;
}

.bch-faq__a-inner li { margin-block-end: .5rem; }

.bch-faq__a-inner a {
	color: var(--bchf-accent);
	text-underline-offset: 3px;
}

.bch-faq__a-inner img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 10px;
}

/* Bảng trong câu trả lời cuộn ngang được, không làm vỡ trang trên điện thoại. */
.bch-faq__a-inner table {
	display: block;
	max-inline-size: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

@media (max-width: 30rem) {
	.bch-faq__q { padding-inline: .75rem; }
	.bch-faq__a-inner { padding-inline: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.bch-faq__q,
	.bch-faq__icon { transition: none; }
}