/*
 * Tầng 4 — Các khối của trang đích.
 */

/* ---------- 1. Mở đầu ---------- */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	/*
	 * svh thay cho vh: trên điện thoại, thanh địa chỉ co giãn khi cuộn làm
	 * 100vh nhảy chiều cao và giật hình. Đơn vị svh lấy khung nhìn nhỏ nhất
	 * nên chiều cao đứng yên.
	 */
	min-height: 92svh;
	color: #fff;
	overflow: hidden;
}

.hero__media {
	position: absolute;
	inset: 0;
}

.hero__media img,
.hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s var(--ease);
}

.hero__slide.is-active {
	opacity: 1;
}

.hero__slide picture,
.hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Chú thích nằm góc dưới bên phải, tránh hẳn vùng chữ chính ở góc dưới bên
 * trái. Chỉ hiện từ màn hình tablet trở lên — trên điện thoại, khoảng trống
 * quý hơn một dòng chú thích.
 */
.hero__caption {
	display: none;
}

@media (min-width: 768px) {
	.hero__caption {
		display: block;
		position: absolute;
		right: var(--gutter);
		bottom: var(--space-s);
		margin: 0;
		padding-right: 2.25rem;
		font-size: 0.72rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.62);
	}

	.hero__caption::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		width: 1.5rem;
		height: 1px;
		background: var(--lxe-accent, #7E6130);
	}
}

/*
 * Lớp phủ chuyển sắc thay vì phủ đen phẳng: giữ được màu ảnh ở nửa trên mà
 * vẫn đủ tương phản cho chữ ở nửa dưới. Tương phản đo được trên nền tối nhất
 * đạt trên 7:1.
 */
.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(10, 14, 18, 0.88) 0%, rgba(10, 14, 18, 0.45) 42%, rgba(10, 14, 18, 0.12) 78%);
}

.hero__inner {
	position: relative;
	padding-block: var(--space-2xl) var(--space-l);
	max-width: var(--wrap);
}

.hero__eyebrow {
	margin-bottom: var(--space-s);
	font-size: 0.8rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.hero__title {
	max-width: 18ch;
	margin: 0;
	color: #fff;
	font-size: var(--step-5);
	letter-spacing: -0.02em;
}

.hero__sub {
	max-width: 46ch;
	margin-top: var(--space-s);
	font-size: var(--step-1);
	color: rgba(255, 255, 255, 0.88);
}

.hero__usp {
	max-width: 52ch;
	margin-top: var(--space-xs);
	font-size: var(--step-0);
	color: rgba(255, 255, 255, 0.7);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-m);
}

.hero__bar {
	position: relative;
	padding-block: var(--space-s);
	background: rgba(10, 14, 18, 0.55);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
}

.hero__facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-s);
	margin: 0;
}

@media (min-width: 768px) {
	.hero__facts {
		grid-template-columns: repeat(4, 1fr);
	}
}

.hero__fact dt {
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.hero__fact dd {
	margin: 0.15rem 0 0;
	font-family: var(--lxe-font-display, Georgia, serif);
	font-size: var(--step-1);
	color: #fff;
}

.hero__embed {
	margin-block: var(--space-m);
}

.hero__embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* ---------- 2. Giới thiệu ---------- */

.intro {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}

@media (min-width: 900px) {
	.intro {
		grid-template-columns: 1.15fr 0.85fr;
	}

	.intro__figure {
		position: sticky;
		top: 110px;
	}
}

.intro__lead {
	font-family: var(--lxe-font-display, Georgia, serif);
	font-size: var(--step-2);
	line-height: 1.35;
	color: var(--lxe-heading, #101820);
	max-width: 30ch;
}

.intro__figure img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* ---------- 3. Hồ sơ dự án ---------- */

.direct-answer {
	max-width: 74ch;
	margin-bottom: var(--space-l);
	padding-left: var(--space-m);
	border-left: 2px solid var(--lxe-accent, #7E6130);
	font-size: var(--step-1);
	line-height: 1.55;
	color: var(--lxe-heading, #101820);
}

/*
 * Bảng thông số kiểu vựng tập đấu giá: nhãn bên trái, giá trị bên phải, nối
 * bằng đường chấm. Đây là chi tiết nhận diện chính của bộ giao diện — và cũng
 * là định dạng mà trợ lý AI trích xuất chính xác nhất.
 */
.ledger {
	max-width: 900px;
}

.ledger__table th,
.ledger__table td {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--lxe-line);
	vertical-align: baseline;
	text-align: left;
}

.ledger__table th {
	width: 40%;
	font-weight: 400;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lxe-muted, #6B7075);
	position: relative;
}

.ledger__table th span {
	background: var(--lxe-surface, #fff);
	padding-right: 0.5rem;
}

.ledger__table th::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.45em;
	border-bottom: 1px dotted var(--lxe-line);
	z-index: -1;
}

.ledger__table td {
	font-family: var(--lxe-font-display, Georgia, serif);
	font-size: var(--step-1);
	color: var(--lxe-heading, #101820);
}

@media (max-width: 599px) {
	.ledger__table th,
	.ledger__table td {
		display: block;
		width: 100%;
	}

	.ledger__table th {
		padding-bottom: 0.15rem;
		border-bottom: 0;
	}

	.ledger__table th::after {
		display: none;
	}
}

/* ---------- Phần mở đầu dùng chung cho bảy khối ---------- */

/*
 * Bảy khối lớn dùng chung khuôn tiêu đề — mô tả — ảnh, nên khoảng cách khai báo
 * một lần ở đây. Trước kia mỗi khối tự đặt lấy, và chỉ cần lệch 8px là mắt đã
 * nhận ra nhịp bị vỡ khi cuộn qua.
 */
.block-intro__desc {
	max-width: 72ch;
	margin-top: calc(var(--space-l) * -0.5);
	margin-bottom: var(--space-l);
	font-size: var(--step-0);
}

.section--dark .block-intro__desc {
	color: rgba(255, 255, 255, 0.72);
}

.block-intro__media {
	margin: 0 0 var(--space-l);
	cursor: zoom-in;
}

.block-intro__img {
	width: 100%;
	height: auto;
}

/* Ảnh thường: cắt theo khung ngang cho đều nhịp giữa các khối. */
.block-intro__media--wide .block-intro__img {
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--lxe-radius, 2px);
}

/*
 * Ảnh sơ đồ và bản đồ: hiện trọn vẹn, không cắt. Cắt xén một bản đồ liên kết
 * vùng là mất đúng các điểm mốc mà khách muốn xem.
 */
.block-intro__media--contain {
	padding: var(--space-xs);
	background: var(--lxe-surface, #fff);
	border: 1px solid var(--lxe-line);
	border-radius: var(--lxe-radius, 2px);
}

.block-intro__media--contain .block-intro__img {
	object-fit: contain;
}

/* ---------- 4. Vị trí ---------- */

.location__embed {
	margin-top: var(--space-m);
}

.location__embed iframe {
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 0;
}

.location__embed-btn {
	width: 100%;
	min-height: 48px;
	border: 1px dashed var(--lxe-line);
	background: transparent;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--lxe-muted, #6B7075);
}

.nearby {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--lxe-line);
}

@media (min-width: 768px) {
	/* Danh sách dài xếp hai cột cho đỡ phải cuộn. */
	.nearby {
		columns: 2;
		column-gap: var(--space-xl);
	}

	.nearby__item {
		break-inside: avoid;
	}
}

.nearby__item {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 0.25rem 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--lxe-line);
}

.nearby__time {
	font-family: var(--lxe-font-display, Georgia, serif);
	font-size: 0.95rem;
	color: var(--lxe-accent, #7E6130);
}

.nearby__place {
	font-weight: 500;
	color: var(--lxe-heading, #101820);
}

.nearby__note {
	grid-column: 2;
	font-size: 0.82rem;
	color: var(--lxe-muted, #6B7075);
}

/* ---------- 5. Lợi thế ---------- */

.usp-grid {
	display: grid;
	gap: var(--space-m);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.usp {
	padding: var(--space-m);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--lxe-radius, 2px);
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.usp:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--lxe-accent, #7E6130);
}

.usp__media {
	margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) var(--space-m);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.usp__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.usp__num {
	margin: 0 0 0.4rem;
	font-family: var(--lxe-font-display, Georgia, serif);
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	color: var(--lxe-accent, #7E6130);
}

.usp__title {
	margin: 0 0 0.5rem;
	font-size: var(--step-1);
}

.usp__desc {
	margin: 0;
	font-size: var(--step--1);
	color: rgba(255, 255, 255, 0.68);
}

/* ---------- 6. Tiện ích ---------- */

.masonry {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	grid-auto-rows: 1fr;
}

.masonry__item {
	display: flex;
	flex-direction: column;
	background: var(--lxe-surface, #fff);
	border: 1px solid var(--lxe-line);
	border-radius: var(--lxe-radius, 2px);
	overflow: hidden;
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.masonry__item.is-hidden {
	display: none;
}

@media (min-width: 900px) {
	.masonry__item--tall {
		grid-row: span 2;
	}

	.masonry__item--tall .masonry__media {
		flex: 1;
	}
}

.masonry__media {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--lxe-background, #F6F3ED);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.masonry__item--tall .masonry__media {
	aspect-ratio: auto;
	min-height: 240px;
}

.masonry__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease);
}

.masonry__media:hover img {
	transform: scale(1.05);
}

.masonry__body {
	padding: var(--space-s) var(--space-m) var(--space-m);
}

.masonry__title {
	margin: 0 0 0.35rem;
	font-size: var(--step-0);
}

.masonry__desc {
	margin: 0;
	font-size: var(--step--1);
	color: var(--lxe-muted, #6B7075);
}

/* ---------- 7. Kiến trúc ---------- */

.credits {
	display: grid;
	gap: var(--space-s);
	margin: var(--space-l) 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.credits__row dt {
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lxe-muted, #6B7075);
}

.credits__row dd {
	margin: 0.25rem 0 0;
	font-family: var(--lxe-font-display, Georgia, serif);
	font-size: var(--step-0);
	color: var(--lxe-heading, #101820);
}

.gallery-strip {
	display: grid;
	gap: var(--space-2xs);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	margin-top: var(--space-m);
}

.gallery-strip__item {
	padding: 0;
	border: 0;
	background: none;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.gallery-strip__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease), opacity var(--dur) var(--ease);
}

.gallery-strip__item:hover img {
	transform: scale(1.06);
	opacity: 0.9;
}

/* ---------- 8. Mặt bằng ---------- */

.plan-grid {
	display: grid;
	gap: var(--space-m);
}

.plan-grid--wide {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.plan-grid--units {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

.plan-card {
	background: var(--lxe-surface, #fff);
	border: 1px solid var(--lxe-line);
	border-radius: var(--lxe-radius, 2px);
	overflow: hidden;
}

.plan-card__media {
	position: relative;
	display: block;
	width: 100%;
	padding: var(--space-s);
	border: 0;
	background: #fff;
}

/*
 * Bản vẽ mặt bằng phải hiện trọn vẹn — cắt xén là làm hỏng thông tin. Dùng
 * contain thay vì cover, kèm nền trắng để nét vẽ nổi rõ.
 */
.plan-card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.plan-card__zoom {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: var(--lxe-primary, #101820);
	color: #fff;
	border-radius: 50%;
	font-size: 1.2rem;
	line-height: 1;
	opacity: 0.85;
}

.plan-card__body {
	padding: 0 var(--space-m) var(--space-m);
}

.plan-card__title {
	margin: 0 0 0.6rem;
	font-size: var(--step-1);
}

.plan-card__title a {
	text-decoration: none;
}

.plan-card__specs {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.3rem;
	font-size: 0.82rem;
}

.plan-card__specs li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px dotted var(--lxe-line);
}

.plan-card__specs span {
	color: var(--lxe-muted, #6B7075);
}

.plan-card__specs strong {
	font-weight: 500;
	color: var(--lxe-heading, #101820);
}

.plan-detail {
	display: grid;
	gap: var(--space-xl);
	padding-block: var(--space-xl);
}

@media (min-width: 900px) {
	.plan-detail {
		grid-template-columns: 1.4fr 1fr;
		align-items: start;
	}
}

.plan-detail__figure {
	padding: var(--space-m);
	background: #fff;
	border: 1px solid var(--lxe-line);
	cursor: zoom-in;
}

.plan-detail__figure figcaption {
	margin-top: var(--space-xs);
	font-size: 0.78rem;
	text-align: center;
	color: var(--lxe-muted, #6B7075);
}

.plan-detail__thumbs {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	margin-top: var(--space-s);
}

.plan-detail__thumb {
	padding: 0;
	border: 1px solid var(--lxe-line);
	background: #fff;
}

.spec-table th,
.spec-table td {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--lxe-line);
	text-align: left;
}

.spec-table th {
	font-weight: 400;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lxe-muted, #6B7075);
}

.spec-table td {
	font-family: var(--lxe-font-display, Georgia, serif);
	font-size: var(--step-0);
	text-align: right;
	color: var(--lxe-heading, #101820);
}

.plan-detail__desc {
	margin-block: var(--space-m);
}

/* ---------- 9. Bảng giá ---------- */

.pricing {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}

@media (min-width: 900px) {
	.pricing {
		grid-template-columns: 1.2fr 0.8fr;
	}

	.pricing__form {
		position: sticky;
		top: 110px;
	}
}

.pricing__range {
	margin-bottom: var(--space-m);
	padding-bottom: var(--space-m);
	border-bottom: 1px solid var(--lxe-line);
}

.pricing__range-label {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lxe-muted, #6B7075);
}

.pricing__range-value {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--lxe-font-display, Georgia, serif);
	font-size: var(--step-3);
	font-weight: 500;
	color: var(--lxe-heading, #101820);
}

.price-table {
	margin-bottom: var(--space-m);
}

.price-table th,
.price-table td {
	padding: 0.7rem 0.5rem;
	border-bottom: 1px solid var(--lxe-line);
	text-align: left;
	font-size: 0.88rem;
}

.price-table thead th {
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lxe-muted, #6B7075);
	border-bottom-width: 2px;
}

.price-table tbody th {
	font-weight: 500;
}

.price-table tbody th a {
	text-decoration: none;
}

.pricing__note {
	margin-top: var(--space-s);
	padding: var(--space-s);
	background: rgba(var(--lxe-accent-rgb, 126, 97, 48), 0.07);
	border-left: 2px solid var(--lxe-accent, #7E6130);
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--lxe-muted, #6B7075);
}

/* ---------- 10. Tiến độ ---------- */

.timeline {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

.timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--lxe-line);
}

@media (min-width: 768px) {
	.timeline::before {
		left: 50%;
	}
}

.timeline__item {
	position: relative;
	display: grid;
	gap: var(--space-s);
	padding: 0 0 var(--space-l) 2.25rem;
}

@media (min-width: 768px) {
	.timeline__item {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xl);
		padding-left: 0;
		align-items: start;
	}

	.timeline__item:nth-child(odd) .timeline__body {
		grid-column: 1;
		text-align: right;
	}

	.timeline__item:nth-child(odd) .timeline__media {
		grid-column: 2;
		grid-row: 1;
	}

	.timeline__item:nth-child(even) .timeline__body {
		grid-column: 2;
	}

	.timeline__item:nth-child(even) .timeline__media {
		grid-column: 1;
		grid-row: 1;
	}
}

.timeline__marker {
	position: absolute;
	left: 0;
	top: 6px;
	width: 15px;
	height: 15px;
	border: 1px solid var(--lxe-line);
	border-radius: 50%;
	background: var(--lxe-background, #F6F3ED);
}

@media (min-width: 768px) {
	.timeline__marker {
		left: 50%;
		transform: translateX(-50%);
	}
}

.timeline__item--done .timeline__marker {
	background: var(--lxe-secondary, #1F5E52);
	border-color: var(--lxe-secondary, #1F5E52);
}

.timeline__item--current .timeline__marker {
	background: var(--lxe-accent, #7E6130);
	border-color: var(--lxe-accent, #7E6130);
	box-shadow: 0 0 0 4px rgba(var(--lxe-accent-rgb, 126, 97, 48), 0.2);
}

.timeline__date {
	margin: 0 0 0.2rem;
	font-family: var(--lxe-font-display, Georgia, serif);
	font-size: var(--step-1);
	color: var(--lxe-accent, #7E6130);
}

.timeline__title {
	margin: 0 0 0.35rem;
	font-size: var(--step-1);
}

.timeline__status {
	margin: 0 0 0.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lxe-muted, #6B7075);
}

.timeline__text {
	font-size: var(--step--1);
	max-width: none;
}

.timeline__source {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	font-style: italic;
	color: var(--lxe-muted, #6B7075);
}

.timeline__media {
	padding: 0;
	border: 0;
	background: none;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.timeline__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- 11. Pháp lý ---------- */

.doc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--lxe-line);
}

.doc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding: var(--space-m) 0;
	border-bottom: 1px solid var(--lxe-line);
}

.doc__kind {
	margin: 0 0 0.25rem;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lxe-accent, #7E6130);
}

.doc__title {
	margin: 0;
	font-size: var(--step-1);
}

.doc__issued,
.doc__desc {
	margin: 0.3rem 0 0;
	font-size: 0.82rem;
	color: var(--lxe-muted, #6B7075);
}

/* ---------- 12. Đối tác ---------- */

.partners + .partners {
	margin-top: var(--space-l);
}

.partners__role {
	margin-bottom: var(--space-s);
	font-family: var(--lxe-font-body, sans-serif);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	color: var(--lxe-muted, #6B7075);
}

.partners__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.partners__logo {
	max-height: 56px;
	width: auto;
	object-fit: contain;

	/*
	 * Logo đối tác đến từ nhiều nguồn với đủ loại màu. Lọc xám khi nghỉ giúp
	 * dải logo trông thống nhất; hiện màu thật khi rê chuột.
	 */
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.partners__item:hover .partners__logo {
	filter: none;
	opacity: 1;
}

.partners__name {
	font-family: var(--lxe-font-display, Georgia, serif);
	font-size: var(--step-1);
	color: var(--lxe-heading, #101820);
}

/* ---------- 14. Hỏi đáp ---------- */

.faq {
	border-top: 1px solid var(--lxe-line);
}

.faq__item {
	border-bottom: 1px solid var(--lxe-line);
}

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding: var(--space-s) 0;
	min-height: 56px;
	cursor: pointer;
	list-style: none;
	font-family: var(--lxe-font-display, Georgia, serif);
	font-size: var(--step-1);
	color: var(--lxe-heading, #101820);
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__sign {
	flex: 0 0 auto;
	position: relative;
	width: 16px;
	height: 16px;
}

.faq__sign::before,
.faq__sign::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	background: var(--lxe-accent, #7E6130);
	transition: transform var(--dur) var(--ease);
}

.faq__sign::after {
	transform: rotate(90deg);
}

.faq__item[open] .faq__sign::after {
	transform: rotate(0deg);
}

.faq__a {
	padding-bottom: var(--space-m);
	max-width: none;
	font-size: var(--step-0);
}

.faq__source {
	margin-top: var(--space-xs);
	font-size: 0.78rem;
	font-style: italic;
	color: var(--lxe-muted, #6B7075);
}

.faq__more {
	margin-top: var(--space-m);
	font-size: var(--step--1);
	color: var(--lxe-muted, #6B7075);
}

/* ---------- 15. Đăng ký ---------- */

.section--cta {
	scroll-margin-top: 88px;
}

.cta {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
}

@media (min-width: 900px) {
	.cta {
		grid-template-columns: 1fr 1fr;
	}
}

.cta__promise {
	margin: var(--space-m) 0 0;
	padding: 0;
	list-style: none;
}

.cta__promise li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.6rem;
	font-size: var(--step--1);
	color: rgba(255, 255, 255, 0.78);
}

.cta__promise li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 8px;
	height: 1px;
	background: var(--lxe-accent, #7E6130);
}

.cta__direct {
	margin-top: var(--space-m);
	font-size: var(--step--1);
	color: rgba(255, 255, 255, 0.7);
}

.cta__direct a {
	color: #fff;
}

/* ---------- Bài viết ---------- */

.article__head {
	padding-block: var(--space-xl) var(--space-m);
}

.article__cat {
	margin: var(--space-s) 0 0.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lxe-accent, #7E6130);
}

.article__cat a {
	text-decoration: none;
}

.article__title {
	margin: 0;
	font-size: var(--step-4);
}

.article__lead {
	margin-top: var(--space-s);
	font-size: var(--step-1);
	color: var(--lxe-muted, #6B7075);
}

.article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	margin-top: var(--space-s);
	font-size: 0.78rem;
	color: var(--lxe-muted, #6B7075);
}

.article__figure {
	margin-block: var(--space-m);
}

.article__figure img {
	width: 100%;
	max-height: 68vh;
	object-fit: cover;
}

.article__figure figcaption {
	max-width: var(--wrap-narrow);
	margin: var(--space-xs) auto 0;
	padding-inline: var(--gutter);
	font-size: 0.78rem;
	color: var(--lxe-muted, #6B7075);
}

.article__body {
	padding-block: var(--space-m) var(--space-l);
	font-size: var(--step-1);
	line-height: 1.75;
}

.article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--space-l);
	padding: 0;
	list-style: none;
	font-size: 0.8rem;
}

.article__tags a {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--lxe-line);
	text-decoration: none;
}

.article__cta {
	margin-bottom: var(--space-2xl);
}

/* ---------- Bài ghim ở cuối bài viết ---------- */

.article__pinned {
	margin-bottom: var(--space-l);
	padding: var(--space-m);
	background: var(--lxe-surface, #fff);
	border: 1px solid var(--lxe-line);
	border-radius: var(--lxe-radius, 2px);
}

.article__pinned-title {
	margin: 0 0 var(--space-s);
	font-family: var(--lxe-font-body, sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lxe-accent, #7E6130);
}

.pinned-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pinned-list__item + .pinned-list__item {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--lxe-line);
}

.pinned-list__link {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	text-decoration: none;
	color: inherit;
}

.pinned-list__media {
	flex: 0 0 96px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--lxe-radius, 2px);
	background: var(--lxe-background, #F6F3ED);
}

.pinned-list__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pinned-list__heading {
	display: block;
	font-family: var(--lxe-font-display, Georgia, serif);
	font-size: var(--step-0);
	line-height: 1.3;
	color: var(--lxe-heading, #101820);
}

.pinned-list__link:hover .pinned-list__heading {
	color: var(--lxe-secondary, #1F5E52);
}

.pinned-list__date {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.75rem;
	color: var(--lxe-muted, #6B7075);
}