/**
 * DS Elements — Câu hỏi thường gặp
 *
 * Không có JS: <details> lo phần đóng mở, CSS chỉ vẽ dấu +/− theo [open].
 */

.elementor-widget-ds-faq {
	width: 100%;
	min-width: 0;
}

.ds-faq {
	width: 100%;
	min-width: 0;
	--ds-faq-icon: 14px;
}

.ds-faq *,
.ds-faq *::before,
.ds-faq *::after {
	box-sizing: border-box;
}

.ds-faq__heading {
	margin: 0 0 var(--ds-faq-head-gap, var(--ds-space-6));
	color: var(--ds-faq-heading-color, var(--ds-color-brand));
	font-size: var(--ds-fs-h3);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-h3);
	text-transform: uppercase;
}

.ds-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--ds-faq-item-gap, var(--ds-space-3));
}

.ds-faq__item {
	background: var(--ds-faq-item-bg, var(--ds-color-white));
	border: 1px solid var(--ds-faq-item-border, var(--ds-color-border));
	border-radius: var(--ds-faq-item-radius, var(--ds-radius-md));
}

/* --- Dòng câu hỏi ------------------------------------------------------- */

.ds-faq__question {
	display: flex;
	align-items: center;
	gap: var(--ds-space-2);
	padding: var(--ds-space-4);
	cursor: pointer;

	color: var(--ds-faq-question-color, var(--ds-color-brand));
	font-size: var(--ds-fs-body);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-tight);

	/* Bỏ tam giác mặc định — Chrome/Safari dùng ::-webkit-details-marker,
	   phần còn lại dùng list-style của chính summary. */
	list-style: none;
}

.ds-faq__question::-webkit-details-marker {
	display: none;
}

.ds-faq__question:focus-visible {
	outline: 2px solid var(--ds-color-brand-light);
	outline-offset: -2px;
	border-radius: var(--ds-faq-item-radius, var(--ds-radius-md));
}

.ds-faq__number {
	flex: 0 0 auto;
	color: var(--ds-faq-question-color, var(--ds-color-brand));
}

.ds-faq__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Dấu cộng vẽ bằng hai vạch; mở ra thì vạch dọc biến mất thành dấu trừ. */
.ds-faq__icon {
	position: relative;
	flex: 0 0 var(--ds-faq-icon);
	width: var(--ds-faq-icon);
	height: var(--ds-faq-icon);
}

.ds-faq__icon::before,
.ds-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background: var(--ds-faq-icon-color, var(--ds-color-brand-light));
	transition: transform var(--ds-transition), opacity var(--ds-transition);
}

.ds-faq__icon::after {
	transform: rotate(90deg);
}

.ds-faq__item[open] .ds-faq__icon::after {
	transform: rotate(0deg);
	opacity: 0;
}

/* --- Câu trả lời -------------------------------------------------------- */

.ds-faq__answer {
	padding: 0 var(--ds-space-4) var(--ds-space-4);
	color: var(--ds-faq-answer-color, var(--ds-color-body));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-body);
}

@media (max-width: 767px) {
	.ds-faq__question {
		padding: var(--ds-space-3);
		font-size: var(--ds-fs-small);
	}

	.ds-faq__answer {
		padding: 0 var(--ds-space-3) var(--ds-space-3);
	}
}

/* Link phụ cuối khối, dạt phải như trong thiết kế. */
.ds-faq__more {
	display: block;
	margin-top: var(--ds-space-4);
	color: var(--ds-faq-more-color, var(--ds-color-brand-light));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
	text-align: right;
	text-decoration: none;
}

.ds-faq__more:hover {
	text-decoration: underline;
}