/* ============================================================
   BDS Theme — landing page bất động sản
   Hệ màu lấy từ logo chính thức của chủ đầu tư: tím #602888 + cam #F09018.

   Phông tiêu đề: KENOKY (Alit Design) — đã kiểm tra có đủ dấu tiếng Việt
   (14 nguyên âm riêng + 89/90 ký tự vùng dấu thanh U+1EA0–1EF9).

   ⚠ Bản đang dùng là bản Việt hóa tải từ mạng, KHÔNG phải bản mua giấy
   phép. Trước khi đưa web lên tên miền thật, phải mua gói WEBFONT của
   Alit Design rồi thay hai file trong assets/fonts/ — giữ nguyên tên file
   thì không phải sửa dòng CSS nào.
   ============================================================ */

/* Bộ font có 13 độ đậm nhưng trang chỉ dùng đúng MỘT: Thin.
   Nạp cả bộ sẽ làm trang nặng thêm gần 700KB vô ích.

   Gán Thin vào font-weight 400 vì toàn bộ quy tắc tiêu đề đang dùng 400 —
   nhờ vậy đổi độ đậm chỉ cần sửa đúng khối này, không phải sửa 14 chỗ. */
@font-face {
	font-family: "Kenoky";
	src: url("../fonts/KENOKY-ExtraLight.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	/* swap: hiện chữ ngay bằng phông dự phòng, đổi sang Kenoky khi tải xong.
	   Nếu không có dòng này, tiêu đề sẽ TRỐNG TRƠN trong lúc chờ tải phông —
	   khách vào từ quảng cáo thấy trang trắng là thoát ngay. */
	font-display: swap;

	/* ⚠ Bỏ đúng MỘT ký tự khỏi phông này: dấu phẩy (U+002C).

	   Dấu phẩy của Kenoky được vẽ như một dấu chấm phẩy — chấm tròn ở
	   trên, móc dài xuống dưới. Hậu quả: "35,85 m²" hiện ra thành
	   "35;85 m²", "2,5%" thành "2;5%", tiêu đề có dấu phẩy cũng vậy.
	   Người đọc tưởng gõ sai, còn số thì đọc sai nghĩa.

	   Loại U+002C khỏi dải ký tự thì riêng dấu phẩy rơi xuống phông kế
	   tiếp trong danh sách (Iowan Old Style / Palatino / Georgia) — vẫn
	   là phông có chân, cùng dáng, nhưng dấu phẩy vẽ đúng. Mọi ký tự
	   khác giữ nguyên Kenoky. Không cần nạp thêm phông nào. */
	unicode-range: U+0-2B, U+2D-10FFFF;
}

:root {
	/* Bảng màu — lấy từ logo chính thức của chủ đầu tư:
	   tím #602888, cam #F09018, xám #606060 */
	--c-page: #fff;
	--c-cream: #f0e7f6;
	--c-cream-2: #faf7fc;
	--c-ink: #2b1240;
	--c-muted: #6b5c78;
	--c-line: #e6dcef;
	--c-line-2: #cdbcdb;
	--c-accent: #602888;      /* tím thương hiệu */
	--c-accent-2: #7c3aa8;
	--c-cta: #f09018;         /* cam thương hiệu — dùng cho nút bấm */
	--c-cta-dark: #d67c0c;
	--c-blossom: #f5a94a;
	--c-panel: #1a0b2b;
	--c-panel-2: #2b1240;
	/* Màu nền thanh menu — dùng lại cho mục Thông tin dự án để hai khối
	   tím trên trang khớp nhau tuyệt đối. */
	--c-nav: #2b0f3d;
	--c-on-dark: #f3edf8;
	--c-on-dark-2: #c2b3d0;

	/* Chữ */
	--f-sans: "Be Vietnam Pro", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Phông dự phòng phía sau vẫn giữ nguyên: nếu file Kenoky lỗi hoặc chưa
	   tải xong, chữ rơi về serif có sẵn trên máy chứ không vỡ giao diện. */
	--f-display: "Kenoky", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

	/* Nhịp chuyển động: nhanh lúc đầu, chậm dần về cuối. */
	--ease: cubic-bezier(0.23, 1, 0.32, 1);

	--r-soft: 4px;
	--r-2xl: 16px;
	--wrap: 1120px;
	--wrap-narrow: 1080px;
	/* Khung rộng — chỉ dùng cho mục Tổng quan. Mục này có dãy bản vẽ mặt
	   bằng, mà bản vẽ nhỏ thì khách không đọc được số phòng, số đo. Rộng
	   hơn khung thường khoảng 19% để ảnh đủ lớn. */
	--wrap-rong: 1280px;
}

/* ---------- Gỡ khung của GeneratePress trên các trang tràn viền ----------
   GeneratePress bọc nội dung trong khung hẹp và dùng flexbox để chia
   cột nội dung / cột bên. Phải gỡ cả chiều rộng LẪN flexbox — nếu quên
   display: block thì các mục sẽ xếp NGANG cạnh nhau thay vì xếp dọc. */

.bds-landing #page,
.bds-landing #content,
.bds-landing .site-content,
.bds-landing #primary,
.bds-landing .content-area,
.bds-landing .site-main {
	display: block;
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}

.bds-landing .entry-content {
	margin-top: 0;
}

/* ---------- Nền tảng ---------- */

body {
	font-family: var(--f-sans);
	color: var(--c-ink);
	background: var(--c-page);
	font-size: 15px;
	line-height: 1.7;
}

.bds-wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 22px;
}

.bds-wrap--narrow {
	max-width: var(--wrap-narrow);
}

.bds-wrap--rong {
	max-width: var(--wrap-rong);
}


.bds-section {
	padding-block: 84px;
	scroll-margin-top: 74px;
}

.bds-section--cream {
	background: var(--c-cream-2);
}

.bds-section--dark {
	background: var(--c-panel);
	color: var(--c-on-dark);
}

/* Nhãn nhỏ in hoa phía trên mỗi tiêu đề — dấu hiệu nhận dạng của
   phong cách biên tập này. */
/* Dòng chữ nhỏ trên tiêu đề mục. Màu cam thương hiệu — cùng màu với nút
   bấm và nút gọi, nên cả trang chỉ có đúng một sắc cam.

   Tăng độ đậm từ 500 lên 600: cam trên nền sáng chỉ đạt tương phản 2,4
   mà chữ lại nhỏ (11,5px) và giãn rộng, nét mảnh nữa thì khó đọc hẳn.
   Nét đậm hơn bù lại được phần nào. */
/* Cụm chữ cuối tiêu đề được giữ liền, không cho bẻ giữa chừng. Nhờ vậy
   cả cụm cùng tụt xuống dòng dưới thay vì rơi rớt mỗi một chữ xuống
   dòng cuối. Đánh dấu bằng dấu | trong ô tiêu đề. */
.bds-heading__nhom {
	white-space: nowrap;
}

/* Điện thoại thì thả ra: màn hình hẹp mà bắt giữ nguyên cả cụm thì chữ
   tràn ngang ra ngoài mép. */
@media (max-width: 720px) {
	.bds-heading__nhom {
		white-space: normal;
	}
}

.bds-kicker {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-cta);
	margin-bottom: 14px;
}

.bds-section--dark .bds-kicker {
	color: var(--c-blossom);
}

.bds-heading {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.8rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--c-ink);
	margin: 0 0 22px;
}

.bds-section--dark .bds-heading {
	color: var(--c-on-dark);
}

.bds-subheading {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.3;
	color: var(--c-ink);
	margin: 34px 0 12px;
}

/* ---------- Nới dấu cách cho phông tiêu đề ----------

   Dấu cách của Kenoky chỉ rộng 0,2em, trong khi chữ lại rất rộng và
   dấu thanh tiếng Việt thò ra hai bên. Kết quả là chữ dính vào nhau:
   "Khám phá dự án" đọc thành "Khám phá dựán", "tư & pháp lý" thành
   "tư& pháp lý". Nới thêm 0,1em cho riêng các chỗ dùng phông này —
   chữ thường (Be Vietnam Pro) không đụng tới vì dấu cách của nó đã đủ.

   Danh sách dài vì phông tiêu đề được gọi ở ~30 chỗ; chỉ liệt kê những
   chỗ có CHỮ, bỏ qua mấy chỗ chỉ hiện số (01, 02…) vì không có dấu
   cách nào để nới. Thêm chỗ mới dùng var(--f-display) thì thêm vào đây. */
.bds-heading,
.bds-subheading,
.bds-hero__title,
.bds-navbar__brand,
.bds-agenda__xem-ten,
.bds-agenda__xem-chu,
.bds-unit__title,
.bds-unit--noimg,
.bds-unit__fact b,
.bds-loaihinh__ten,
.bds-loaihinh__so-lieu dd,
.bds-miniform__lead,
.bds-miniform__title,
.bds-arch,
.bds-arch__title,
.bds-schools__name,
.bds-quote p,
.bds-privilege__title,
.bds-card__body,
.bds-card__title,
.bds-plan__ten,
.bds-tt__ten,
.bds-figures > div {
	word-spacing: 0.1em;
}

/* ---------- Chương gồm hai phần nối nhau ----------

   Hai chỗ dùng: "Vị trí & tiện ích" và "Chi tiết căn hộ & mặt bằng".
   Mỗi chương là hai <section> đi liền, phần sau mang .bds-section--noi.
   Bỏ đệm trên của phần sau để hai khối dính thành một mục; nền hai phần
   đã đặt trùng nhau trong template. */
.bds-section--noi {
	padding-top: 0;

	/* Đầu phần sau: lề trên của khối đầu tiên có thể chui ngược lên trên
	   và để lại một vạch nền trắng vắt ngang. flow-root giữ lề bên trong. */
	display: flow-root;
}

/* Phần TRƯỚC cũng bỏ đệm dưới. Nếu không thì giữa hai phần có tới 84px
   đệm dưới + 56px đệm trên của tiêu đề = một mảng trống bằng cả khoảng
   cách giữa hai mục khác nhau, đúng cái vừa gộp lại để tránh.
   Trình duyệt cũ không hiểu :has() thì chỉ là thưa hơn một chút, không
   hỏng bố cục. */
.bds-section:has(+ .bds-section--noi) {
	padding-bottom: 0;

	/* ⚠ BẮT BUỘC đi kèm padding-bottom: 0. Hết đệm dưới thì lề dưới của
	   khối chữ cuối (20px) "chui" ra ngoài mục — theo đúng luật gộp lề
	   của CSS. Chỗ 20px đó không thuộc mục nào nên lòi nền trắng của
	   trang ra, thành một vạch trắng vắt ngang giữa hai phần.
	   flow-root giữ lề nằm gọn bên trong mục. */
	display: flow-root;
}

/* Tiêu đề mở phần sau. To hơn tiêu đề phụ thường (1,3rem) vì nó mở hẳn
   nửa chương, nhưng vẫn nhỏ hơn tiêu đề chương để thứ bậc rõ ràng.
   Đường kẻ mảnh phía trên đánh dấu chỗ chuyển phần. */
.bds-subheading--muc {
	font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
	margin: 0 0 20px;
	padding-top: 56px;
	border-top: 1px solid var(--c-line);
}

.bds-prose {
	color: var(--c-muted);
	font-size: 1.0625rem;
	line-height: 1.75;
	/* Bỏ giới hạn 68 ký tự để đoạn văn kéo dài bằng bảng bên trên,
	   nếu không hai khối sẽ lệch mép phải trông rất rõ. */
	max-width: none;
}

.bds-prose p {
	margin: 0 0 18px;
}

.bds-prose strong {
	color: var(--c-ink);
}

/* ⚠ BẮT BUỘC. Quy tắc trên tô chữ đậm bằng màu mực tối — đúng cho mục
   nền sáng, nhưng trên mục nền tím đậm thì thành chữ tối trên nền tối,
   gần như mất hẳn (tên chủ đầu tư và mã cổ phiếu VC3 biến mất). Trên
   nền tối đổi sang màu vàng hoa: vừa đọc được, vừa là màu nhấn sẵn có
   của trang nên không phá bảng màu. */
.bds-section--dark .bds-prose strong,
.bds-section--dark .bds-prose b,
.bds-contact .bds-prose strong,
.bds-contact .bds-prose b {
	color: var(--c-blossom);
}

.bds-note {
	font-size: 0.8125rem;
	line-height: 1.65;
	color: var(--c-muted);
	opacity: 0.85;
	margin-top: 14px;
}

.bds-center {
	text-align: center;
}

/* ---------- Nút ---------- */

.bds-btn {
	display: inline-block;
	padding: 15px 30px;
	border-radius: var(--r-soft);
	font-family: var(--f-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	/* Chữ in hoa cần giãn rộng hơn chữ thường, nếu không các ký tự sẽ
	   dính sát nhau và khó đọc. */
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bds-btn--primary {
	background: var(--c-cta);
	color: #fff;
}

.bds-btn--primary:hover {
	background: var(--c-cta-dark);
	color: #fff;
}

/* Nút tím đậm — dùng trong thẻ loại căn, nơi nền đã là tím nhạt nên
   nút cam thương hiệu sẽ chọi màu. Nút cam vẫn giữ cho các CTA chính. */
.bds-btn--ink {
	background: var(--c-nav);
	color: #fff;
}

.bds-btn--ink:hover {
	background: var(--c-accent);
	color: #fff;
}

.bds-btn--outline {
	border-color: var(--c-line-2);
	color: var(--c-ink);
	background: transparent;
}

.bds-btn--outline:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

.bds-section--dark .bds-btn--outline {
	border-color: rgba(255, 255, 255, 0.35);
	color: var(--c-on-dark);
}

.bds-section--dark .bds-btn--outline:hover {
	border-color: var(--c-blossom);
	color: var(--c-blossom);
}

/* Nút phụ đặt thẳng trên ẢNH nền tối (đầu trang). Khác .bds-btn--outline
   ở chỗ ảnh nền chỗ sáng chỗ tối, viền suông không đủ giữ hình nút — nên
   thêm lớp tím trong suốt có làm mờ phần ảnh nằm dưới. */
.bds-btn--on-dark {
	background: rgba(77, 32, 109, 0.3);
	backdrop-filter: blur(3px) saturate(125%);
	-webkit-backdrop-filter: blur(3px) saturate(125%);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.bds-btn--on-dark:hover {
	background: rgba(77, 32, 109, 0.5);
	border-color: var(--c-blossom);
	color: #fff;
}

/* ---------- Thanh điều hướng dính ----------
   Bố cục ba khối: logo trái — menu giữa — nút hotline phải.
   Nền tím đậm cố định (không đổi màu khi cuộn) để logo gradient và
   chữ trắng luôn đọc được, giống mẫu chủ đầu tư đang dùng. */

.bds-navbar {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--c-nav);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: box-shadow 0.25s ease;
}

.bds-navbar.is-stuck {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.bds-navbar__inner {
	/* Hẹp hơn khung nội dung chung để logo và nút hotline thụt vào trong,
	   không dính sát mép màn hình.

	   Nới từ 1200px lên 1320px khi thêm hai mục Mặt bằng và Thanh toán:
	   với 1200px thì chín mục không đủ chỗ, menu phải cuộn ngang và nút
	   "Đăng ký" ở cuối bị khuất mất một nửa. */
	max-width: 1320px;
	margin-inline: auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 96px;
}

/* ---- Logo ---- */

.bds-navbar__brand {
	display: block;
	flex-shrink: 0;
	font-family: var(--f-display);
	font-size: 1.0625rem;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	line-height: 0;
}

.bds-navbar__logo {
	display: block;
	width: auto;
	height: 68px;
}

/* ---- Menu ở giữa ---- */

.bds-navbar__links {
	flex: 1;
	display: flex;
	/* "safe" là phần bắt buộc: menu nay có tới 9 mục, khi dài hơn chỗ
	   trống thì canh giữa sẽ đẩy mục đầu tiên ra ngoài mép trái và không
	   cuộn tới được nữa — khách chỉ thấy mấy chữ cuối của mục đó. Có
	   "safe" thì lúc chật trình duyệt tự canh trái và cuộn bình thường. */
	justify-content: safe center;
	/* Khoảng cách co theo bề ngang màn hình: rộng rãi trên màn lớn, tự
	   thu lại trên laptop để chín mục còn xếp vừa một hàng. */
	gap: clamp(10px, 1vw, 18px);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.bds-navbar__links li {
	flex: 0 0 auto;
}

.bds-navbar__links::-webkit-scrollbar {
	display: none;
}

.bds-navbar__links a {
	color: #fff;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.bds-navbar__links a:hover,
.bds-navbar__links a.is-active {
	color: var(--c-cta);
	border-bottom-color: var(--c-cta);
}

/* ---- Nút hotline bên phải ---- */

.bds-navbar__cta {
	flex-shrink: 0;
	display: inline-block;
	background: #a855c8;
	color: #fff;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 14px 28px;
	border-radius: var(--r-soft);
	transition: background 0.2s ease;
}

.bds-navbar__cta:hover {
	background: #b96ad6;
	color: #fff;
}


/* ---------- Thanh hotline trên các trang không phải trang dự án ---------- */

.bds-topbar {
	background: var(--c-panel);
	color: var(--c-on-dark-2);
	font-size: 0.8125rem;
}

.bds-topbar__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 9px 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	align-items: center;
	justify-content: space-between;
}

.bds-topbar a {
	color: inherit;
	text-decoration: none;
}

.bds-topbar__phone {
	font-weight: 600;
	color: var(--c-blossom);
}

/* ---------- Hero ---------- */

.bds-hero {
	position: relative;
	background: var(--c-panel);
	color: var(--c-on-dark);
	overflow: hidden;

	/* Hero cao khoảng 3/4 màn hình, không phủ kín nữa: mép trên của mục
	   kế tiếp ló lên dưới cùng, khách thấy ngay là trang còn nội dung.

	   Không dùng aspect-ratio nữa. Khung khớp tỷ lệ ảnh (2400×1350) thì
	   trên màn hình rộng nó luôn cao gần bằng cả màn hình, mà chặn bằng
	   max-height thì trình duyệt co luôn chiều ngang để giữ tỷ lệ — ảnh
	   nền chỉ phủ khoảng 1000px, chừa mảng trống bên phải. Chốt thẳng
	   chiều cao là xong; phần ảnh thừa để object-fit: cover cắt.

	   svh là chiều cao thật của khung nhìn trên điện thoại (đã trừ thanh
	   địa chỉ); trình duyệt cũ không hiểu thì dùng dòng vh phía trên. */
	height: 75vh;
	height: 75svh;

	/* Chốt an toàn: màn hình thấp hoặc chữ dài thì 75% màn hình không đủ
	   chỗ cho tiêu đề và nút. fit-content cho khung cao thêm theo nội
	   dung — thà hero dài hơn dự tính còn hơn cắt mất nút bấm. */
	min-height: fit-content;

	display: flex;
	flex-direction: column;
	justify-content: center;
}

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

.bds-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.5;
}

.bds-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 11, 43, 0.5) 0%, rgba(26, 11, 43, 0.93) 88%);
}

.bds-hero__inner {
	position: relative;
	z-index: 1;

	/* Dùng chung bề ngang và đệm với .bds-navbar__inner (1320px / 32px)
	   thay vì khung nội dung 1120px của các mục bên dưới. Nhờ vậy mép
	   trái của tiêu đề thẳng hàng với mép trái của logo — lùi ra sát
	   ngoài hơn, và trông là chủ ý chứ không phải lệch. */
	max-width: 1320px;
	margin-inline: auto;

	/* BẮT BUỘC. Khung hero là flex cột, mà trong flexbox một phần tử có
	   margin ngang "auto" sẽ THÔI giãn full và tự co lại vừa nội dung —
	   thiếu dòng này thì max-width 1320px không có tác dụng, khối chữ
	   bị co lại rồi dồn vào giữa màn hình. */
	width: 100%;

	padding: 76px 32px 64px;
}

.bds-hero__badge {
	display: inline-block;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-blossom);
	border: 1px solid rgba(240, 144, 24, 0.45);
	border-radius: 999px;
	padding: 6px 15px;
	margin-bottom: 26px;
}

.bds-hero__name {
	display: block;
	font-family: var(--f-sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-on-dark-2);
	margin-bottom: 16px;
}

.bds-hero__title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2.3rem, 1.2rem + 4vw, 4.2rem);
	line-height: 1.2;
	/* Giãn chữ và giãn từ cho thoáng. Trước đây để ÂM (-0.015em) tức là
	   đang bóp chữ sát vào nhau — ngược với dáng thanh thoát mong muốn. */
	letter-spacing: 0.015em;
	word-spacing: 0.01em;
	color: #fff;
	margin: 0 0 22px;
	max-width: 18ch;
}

.bds-hero__sub {
	font-size: 1.0625rem;
	color: var(--c-on-dark-2);
	max-width: 52ch;
	margin: 0 0 32px;
}

/* Hai nút nằm cạnh nhau; màn hẹp thì tự xuống dòng chứ không co nút. */
.bds-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ---------- Slide ảnh tiện ích ----------
   Mỗi lần một ảnh khổ lớn, cuộn ngang có điểm dừng (scroll-snap) nên
   ảnh luôn dừng đúng mép khung. Không JS thì vẫn vuốt tay được. */

.bds-slider {
	/* Nằm giữa mục Tiện ích: cần khoảng thở với câu mở phía trên,
	   dãy tab bên dưới đã tự có margin-top. */
	margin-top: 40px;
}

.bds-slider__khung {
	position: relative;
}

.bds-slider__track {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	/* Thanh cuộn ngang che mất mép dưới ảnh và nhìn thô; điều hướng đã
	   có hai nút mũi tên và thao tác vuốt. */
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.bds-slider__track::-webkit-scrollbar {
	display: none;
}

.bds-slider__track:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 4px;
	border-radius: var(--r-soft);
}

.bds-slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	min-width: 0;
}

.bds-slider__hinh {
	position: relative;
	margin: 0;
	/* Bo góc sâu hơn hẳn mức chung 4px: ảnh ở đây chiếm gần hết bề ngang
	   màn hình nên góc vuông trông thô và cứng; bo 20px làm băng ảnh mềm
	   lại, hợp với các khung bo 12px của dãy nút chọn quanh đó. */
	border-radius: 20px;
	overflow: hidden;
	background: var(--c-cream-2);
}

.bds-slider__hinh img {
	display: block;
	width: 100%;

	/* Bộ ảnh có cả 16:9 lẫn 3:2. Chốt khung về 16:9 để lúc lướt qua ảnh
	   khác tỷ lệ, khung không cao thấp giật cục kéo cả trang nhảy theo. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Chú thích đặt đè lên mép dưới ảnh, có nền tối mờ dần để chữ trắng đọc
   được dù ảnh bên dưới sáng hay tối. */
.bds-slider__cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 56px 22px 18px;
	background: linear-gradient(180deg, rgba(26, 11, 43, 0) 0%, rgba(26, 11, 43, 0.72) 100%);
	color: #fff;
	font-family: var(--f-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bds-slider__nut {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	/* Theme cha thêm đệm trái phải cho mọi thẻ <button>. Nút này là hình
	   tròn có kích thước cố định, đệm đó chỉ bóp méo mũi tên bên trong:
	   khai 30px mà vẽ ra chỉ còn 14px. */
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--c-line);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	/* Nút trắng đặt trên ảnh sáng (sảnh đá, hồ bơi) gần như tàng hình;
	   bóng đổ là thứ duy nhất tách được nó ra khỏi nền. */
	box-shadow: 0 6px 20px rgba(26, 11, 43, 0.22);
	color: var(--c-ink);
	cursor: pointer;
	transition: background 0.2s var(--ease), color 0.2s var(--ease),
		border-color 0.2s var(--ease);
}

.bds-slider__nut:hover,
.bds-slider__nut:focus-visible {
	background: var(--c-nav);
	border-color: var(--c-nav);
	color: #fff;
}

/* Khoá cứng cỡ mũi tên, không cho hộp linh hoạt co lại. */
.bds-slider__nut svg {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
}

.bds-slider__nut--truoc {
	left: 14px;
}

.bds-slider__nut--sau {
	right: 14px;
}

/* JS ẩn nút ở hai đầu băng; thuộc tính hidden phải thắng display:flex. */
.bds-slider__nut[hidden] {
	display: none;
}

.bds-slider__dem {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 14px 2px 0;
	font-family: var(--f-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--c-muted);
	font-variant-numeric: tabular-nums;
}

.bds-slider__dem-so {
	font-family: var(--f-display);
	font-size: 1.25rem;
	color: var(--c-accent);
	line-height: 1;
}

.bds-slider__goi-y {
	margin-left: auto;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-muted);
}

/* ---------- Bảng tóm tắt nhanh ---------- */

.bds-summary {
	border-top: 1px solid var(--c-line);
}

.bds-summary__row {
	display: grid;
	grid-template-columns: 168px 1fr;
	gap: 24px;
	padding: 18px 0;
	border-bottom: 1px solid var(--c-line);
}

.bds-summary__label {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-accent-2);
	padding-top: 3px;
}

.bds-summary__value {
	color: var(--c-ink);
	line-height: 1.7;
}

/* ---------- Bảng thông tin dự án ---------- */

.bds-infotable__scroll {
	overflow-x: auto;
}

.bds-infotable {
	width: 100%;
	border-collapse: collapse;
	/* GeneratePress kẻ viền cả bốn cạnh cho bảng. Xoá sạch rồi chỉ vẽ
	   lại đường kẻ NGANG — nếu chỉ khai báo border-bottom thì ba cạnh
	   kia của theme cha vẫn còn, tạo ra các vạch dọc thừa. */
	border: 0;
	border-top: 1px solid var(--c-line);
}

.bds-infotable th,
.bds-infotable td {
	padding: 15px 0;
	border: 0;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	vertical-align: top;
	font-size: 0.9375rem;
}

.bds-infotable th {
	width: 34%;
	padding-right: 24px;
	font-weight: 400;
	color: var(--c-muted);
}

/* ---------- Mục dùng nền tím giống thanh menu ---------- */

.bds-section--nav {
	background: var(--c-nav);
	color: var(--c-on-dark);
	/* Hình mờ biểu tượng chữ M, cắt từ logo trắng chính thức.
	   position: relative + overflow: hidden để hình mờ không tràn ra
	   ngoài mục và không tạo thanh cuộn ngang. */
	position: relative;
	overflow: hidden;
}

.bds-section--nav::before {
	content: "";
	position: absolute;
	right: -4%;
	top: 50%;
	transform: translateY(-50%);
	width: min(620px, 55%);
	aspect-ratio: 826 / 900;
	background: url("../img/watermark-m.webp") no-repeat center / contain;
	opacity: 0.05;
	pointer-events: none;
}

/* Nội dung phải nằm TRÊN hình mờ, nếu không chữ sẽ bị hình đè lên. */
.bds-section--nav > .bds-wrap {
	position: relative;
	z-index: 1;
}

.bds-section--nav .bds-kicker {
	color: var(--c-blossom);
}

.bds-section--nav .bds-heading {
	color: #fff;
}

/* Bảng trên nền tối: đường kẻ và chữ phải đảo sáng, nếu giữ nguyên
   màu cũ thì chữ xám trên nền tím gần như không đọc được. */
.bds-section--nav .bds-infotable {
	border-top-color: rgba(255, 255, 255, 0.16);
}

.bds-section--nav .bds-infotable th,
.bds-section--nav .bds-infotable td {
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

/* Nhãn cột trái: in hoa, giãn chữ, in đậm, tím bão hòa — tách hẳn khỏi
   phần nội dung màu trắng để mắt quét nhanh xuống đúng dòng cần tìm.

   Màu tím thương hiệu #602888 KHÔNG dùng được ở đây: trên nền tím đậm
   #2b0f3d nó chỉ đạt tỷ lệ tương phản 1.74, chữ chìm hẳn vào nền. Màu
   #b98cf0 giữ đúng chất tím nhưng đạt 6.52 — vượt ngưỡng đọc được 4.5. */
.bds-section--nav .bds-infotable th {
	color: #b98cf0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding-block: 26px;
	line-height: 1.5;
}

.bds-section--nav .bds-infotable td {
	color: #fff;
	font-size: 1.0625rem;
	padding-block: 26px;
	line-height: 1.6;
}

.bds-infotable td {
	color: var(--c-ink);
	font-weight: 500;
}

/* ---------- Lưới đặc quyền ---------- */

/* Các ô rời nhau, bo góc, nền chuyển sắc trắng → tím nhạt.
   Bỏ hẳn kiểu "lưới khe 1px" cũ: các ô dính liền thành một khối bảng,
   nhìn nặng và không tách bạch từng ý. */
.bds-privileges {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
	margin-top: 40px;
}

.bds-privilege {
	background: linear-gradient(180deg, #fff 0%, var(--c-cream) 100%);
	border: 1px solid var(--c-line);
	border-radius: 18px;
	padding: 38px 34px;
	/* Cột dọc + text co giãn: đẩy dòng số liệu xuống đáy thẻ để đường
	   kẻ ngăn của mọi ô nằm thẳng hàng nhau dù nội dung dài ngắn khác nhau. */
	display: flex;
	flex-direction: column;
}

.bds-privilege__kicker {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-accent-2);
	display: block;
	margin-bottom: 16px;
}

.bds-privilege__title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.25;
	color: var(--c-ink);
	margin: 0 0 16px;
}

.bds-privilege__text {
	color: var(--c-muted);
	margin: 0 0 22px;
	font-size: 0.9375rem;
	line-height: 1.75;
	flex: 1;
}

.bds-privilege__fact {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--c-ink);
	padding-top: 18px;
	padding-left: 26px;
	border-top: 1px solid var(--c-line-2);
	margin: 0;
	position: relative;
}

/* Dấu tích tím: báo hiệu đây là con số kiểm chứng được, không phải
   lời quảng cáo. Dùng ::before nên không phải sửa dữ liệu trong admin. */
.bds-privilege__fact::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 18px;
	color: var(--c-accent-2);
	font-weight: 700;
}

/* ---------- Danh sách khoảng cách ---------- */

/* Mỗi khoảng cách là một thẻ riêng: con số đứng trên, địa điểm đứng
   dưới. Kiểu một dòng "địa điểm ……… 15 phút" cũ đọc như bảng kê; ở đây
   con số mới là thứ khách tìm, nên nó phải đứng trước và to. */
.bds-distances {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;

	/* Bốn thẻ trên MỘT hàng. Trước đây dùng auto-fill với bề ngang tối
	   thiểu 260px: bốn thẻ cần 4×260 + 3×14 = 1082px, trong khi khung
	   chỉ rộng 1036px — thiếu 46px nên thẻ thứ tư bị đẩy xuống hàng hai.
	   Chốt cứng 4 cột và cho phép cột co lại (minmax 0) thì vừa. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.bds-distances li {
	display: block;
	padding: 20px;
	border: 1px solid var(--c-line);
	border-radius: 16px;
	background: var(--c-page);
}

/* Màn hình hẹp không đủ chỗ cho bốn cột: xuống hai, rồi xuống một. */
@media (max-width: 900px) {
	.bds-distances {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.bds-distances {
		grid-template-columns: 1fr;
	}
}

/* Con số: cỡ lớn, tím thương hiệu, chữ số đều bề ngang để các thẻ nhìn
   thẳng hàng nhau. */
.bds-distances b {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-accent);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bds-distances span {
	display: block;
	margin-top: 6px;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--c-muted);
}

/* ---------- Tab loại căn hộ ---------- */

.bds-tabs {
	margin-top: 36px;
}

.bds-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}

/* Mỗi tab là một ô bo góc có viền, tab đang chọn tô kín màu tím đậm.
   Kiểu gạch chân cũ quá mảnh, trên màn hình lớn khách khó thấy mình
   đang đứng ở loại căn nào. */
/* Cùng bộ quy tắc với nút của mục lục đầu trang: cùng bo góc 12px, cùng
   nền, cùng cỡ chữ 0,9375rem đậm 600, cùng nhịp chuyển 0,2s. */
.bds-tabs__btn {
	appearance: none;
	background: var(--c-page);
	border: 1px solid var(--c-line);
	border-radius: 12px;
	padding: 15px 18px;
	font-family: var(--f-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--c-ink);
	cursor: pointer;
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
		color 0.2s var(--ease), transform 0.2s var(--ease);
}

/* Mục lục nhấc nút sang PHẢI 3px vì danh sách của nó xếp dọc — nút đi
   về phía nội dung. Dãy tab này xếp NGANG, đẩy ngang thì nút lấn vào
   nút bên cạnh, nên đổi thành nhấc LÊN 2px: cùng một ý, đúng hướng. */
.bds-tabs__btn:hover,
.bds-tabs__btn:focus {
	background: var(--c-cream-2);
	border-color: var(--c-line-2);
	color: var(--c-ink);
	transform: translateY(-2px);
}

/* Phản hồi lúc bấm: nút lún xuống rồi bật lại, 90ms như mục lục. */
.bds-tabs__btn:active,
.bds-tabs__btn.is-active:active {
	transform: scale(0.985);
	transition-duration: 90ms;
}

/* Tab đang chọn phải thắng cả trạng thái rê chuột, nếu không rê vào tab
   đang mở là nó nhảy từ tím đậm sang kem, nhìn như vừa bị bỏ chọn. */
.bds-tabs__btn.is-active,
.bds-tabs__btn.is-active:hover,
.bds-tabs__btn.is-active:focus {
	background: var(--c-nav);
	border-color: var(--c-nav);
	color: #fff;
	transform: none;
}

.bds-tabs__btn:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

.bds-tabs__panel[hidden] {
	display: none;
}

/* ---------- Dãy tab tiện ích: năm nhóm nằm trên MỘT hàng ----------
   Để mỗi nút tự rộng theo tên thì tổng bề ngang nhỉnh hơn khung nội
   dung một chút, đủ để flex-wrap hất nút cuối xuống dòng riêng — nhìn
   như bị lẻ. Chia đều khung cho năm cột thì hàng luôn kín và thẳng. */
.bds-tabs--tienich .bds-tabs__nav {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.bds-tabs--tienich .bds-tabs__btn {
	/* Nút giờ rộng bằng nhau chứ không ôm sát chữ, nên nội dung phải tự
	   căn giữa; không thì tên ngắn bị dồn về mép trái. */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding-inline: 10px;
	text-align: center;
	/* Năm cột chia đều được khoảng 199px mỗi cột, trong khi tên dài nhất
	   ở cỡ 0,9375rem cần hơn 210px — hạ một nấc cỡ chữ để tên nào cũng
	   nằm gọn một dòng. Tên nào vẫn dài thì ngắt hai dòng cho cân. */
	font-size: 0.875rem;
	text-wrap: balance;
}

/* Dãy tab tiện ích mở theo kiểu bấm-mới-hiện: lúc chưa bấm thì KHÔNG
   nhóm nào mở. Khung xếp chồng mặc định giữ chiều cao bằng tab dài nhất
   (17 mục), chưa bấm gì đã chừa sẵn một mảng trống to — nên ở đây trả
   thuộc tính hidden về đúng nghĩa: đóng là không chiếm chỗ. Đổi lại,
   chiều cao mục sẽ thay đổi khi bấm sang nhóm khác, đúng như mọi khối
   đóng/mở khác trên trang. */
.bds-tabs--tienich .bds-tabs__panels > .bds-tabs__panel[hidden] {
	display: none;
}

.bds-tabs--tienich .bds-tabs__count {
	/* Khoảng cách đã do gap của nút lo. */
	margin-left: 0;
	font-size: 0.875rem;
	padding: 3px 7px;
	/* Viên số không được co lại khi tên dài. */
	flex: none;
}

/* ---------- Khung tab có chiều cao cố định ----------

   Ba tab có số mục chênh nhau nhiều (28 / 16 / 9). Nếu tab nào đóng thì
   biến mất hẳn, chiều cao khung đổi theo từng tab và cả phần trang bên
   dưới nhảy lên nhảy xuống mỗi lần bấm — khách đang đọc bị mất chỗ.

   Cách xử lý: xếp CHỒNG cả ba tab vào cùng một ô lưới. Ô lưới luôn cao
   bằng tab dài nhất, nên chiều cao đứng yên. Tab không mở vẫn chiếm chỗ
   nhưng bị làm cho trong suốt (visibility: hidden) — cách này còn tự
   loại nó khỏi thứ tự nhấn Tab và khỏi trình đọc màn hình, không cần
   khai báo thêm gì. */

.bds-tabs__panels {
	display: grid;
}

.bds-tabs__panels > .bds-tabs__panel {
	grid-area: 1 / 1;
	min-width: 0;
}

/* Ghi đè display:none mặc định của thuộc tính hidden. Bắt buộc phải có,
   nếu không tab đóng vẫn biến mất và khung lại co theo như cũ. */
.bds-tabs__panels > .bds-tabs__panel[hidden] {
	display: block;
	visibility: hidden;
}

/* ⚠ Tab nào VỐN là lưới hai cột thì phải giữ nguyên lưới.
   Dòng "display: block" ở trên nhắm vào tab dạng khối thường, nhưng nó
   đè luôn lên tab Loại hình sản phẩm — vốn là lưới ảnh | chữ. Bị ép về
   khối thì ảnh và chữ hết nằm cạnh nhau, ảnh giãn ra full bề ngang nên
   cao gấp đôi (622px → 1201px). Khung xếp chồng lấy chiều cao của tab
   cao nhất, thành ra tab đang mở bị đẩy xuống giữa, chừa 429px trống
   phía trên. Đây chính là khoảng trống đã nhìn thấy trên trang. */
.bds-tabs__panels > .bds-loaihinh__xem[hidden] {
	display: grid;
}

/* ---- Hiệu ứng trượt vào khi đổi tab ----

   Dùng lại nguyên hiệu ứng bds-agenda-vao của mục lục đầu trang, để
   toàn trang có chung một ngôn ngữ chuyển động thay vì mỗi mục một kiểu.

   Trượt từ PHẢI sang vì nút chọn nằm bên trái (hoặc bên trên) — nội
   dung đi cùng chiều với hướng mắt đang nhìn.

   KHÔNG dùng fill-mode "both", dù nó mượt hơn: "both" giữ nguyên trạng
   thái ĐẦU khi hiệu ứng chưa chạy, mà trạng thái đầu là trong suốt hoàn
   toàn. Trình duyệt ngưng vẽ giữa chừng (tab nền, máy tiết kiệm pin) là
   khách bấm vào tab mà KHÔNG THẤY GÌ. Bỏ fill-mode thì trạng thái nghỉ
   luôn là hiện rõ — hiệu ứng không chạy được thì chỉ mất phần trượt. */

.bds-tabs__panels {
	/* Cắt phần thừa khi tab trượt vào từ bên phải. Dùng "clip" chứ không
	   phải "hidden": hidden biến đây thành vùng cuộn riêng và trình duyệt
	   sẽ tự cuộn nó khi khách bấm phím, gây nhảy trang. */
	overflow-x: clip;
}

.bds-tabs__panels > .bds-tabs__panel.is-active {
	animation: bds-agenda-vao 620ms var(--ease);
}

/* Nhịp thứ hai cho phần chữ, để mắt bắt ảnh trước rồi mới tới chữ.
   Làm bằng THỜI LƯỢNG dài hơn chứ không phải độ trễ: độ trễ lại cần
   fill-mode mới khỏi nháy, tức là quay về đúng cái bẫy vừa tránh. */
.bds-tabs__panels > .bds-tabs__panel.is-active .bds-loaihinh__chu,
.bds-tabs__panels > .bds-tabs__panel.is-active .bds-unit__body,
.bds-tabs__panels > .bds-tabs__panel.is-active .bds-amenlist,
.bds-tabs__panels > .bds-tabs__panel.is-active .bds-mbt__mo-ta {
	animation: bds-agenda-vao 880ms var(--ease);
}

/* Cả nội dung tab nằm trong một thẻ bo góc, nền chuyển sắc — cùng ngôn
   ngữ với các ô Đặc quyền, để hai mục nhìn ra là một bộ. */
.bds-unit {
	display: grid;
	/* minmax(0, …) là phần BẮT BUỘC, không thừa.
	   Viết trần "1fr" thì cột vẫn không co xuống dưới bề rộng tối thiểu
	   của chữ bên trong. Mỗi loại căn có mô tả dài ngắn khác nhau nên
	   hai cột chia mỗi lần một kiểu, kéo theo khung ảnh rộng hẹp khác
	   nhau — bấm sang loại khác là cả mục nhảy. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 48px;
	align-items: center;
	background: linear-gradient(150deg, #fbf8fd 0%, var(--c-cream) 100%);
	border: 1px solid var(--c-line);
	border-radius: 18px;
	padding: 52px 56px;
}

.bds-unit--noimg {
	grid-template-columns: 1fr;
}

.bds-unit__title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.4rem);
	line-height: 1.2;
	color: var(--c-ink);
	margin: 0 0 16px;
}

/* Ảnh mặt bằng nền trắng sẵn, thêm viền hay nền nữa sẽ thành hai khung
   lồng nhau — để trần cho nổi trên nền tím nhạt. */
.bds-unit__figure {
	margin: 0;
}

/* Mục Loại căn hộ bên dưới dùng chung bộ ảnh này nên nhảy y hệt —
   khoá cùng một kiểu. */
.bds-unit__figure {
	/* Cùng lý do như khung ảnh ở mục Tổng quan: lấy tỷ lệ của bản vẽ
	   cao nhất để không bản nào bị cắt, và dùng display: block để
	   "height: 100%" của ảnh quy đổi được. */
	aspect-ratio: 1500 / 1457;
	display: block;

	/* Hai dòng này BẮT BUỘC, thiếu là aspect-ratio bên trên vô tác dụng.
	   Ô nằm trong lưới có kích thước tối thiểu tự động bằng nội dung:
	   ảnh cao bao nhiêu thì ô không co xuống dưới mức đó. Đặt min-height
	   về 0 và overflow khác visible mới gỡ được ràng buộc ấy. */
	min-height: 0;
	overflow: hidden;
}

.bds-unit__figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Ba số liệu để trần, chỉ ngăn với đoạn văn bên trên bằng một đường kẻ.
   Kiểu ô có viền cũ tạo ra một cái bảng nhỏ trong thẻ, rối mắt. */
.bds-unit__facts {
	/* Flex chứ không phải lưới 3 cột cứng: có loại căn chỉ khai một chỉ
	   số (Studio chỉ có diện tích). Lưới cứng ép nó vào 1/3 bề ngang,
	   con số dài như "35,85 – 45,13 m²" bị bẻ làm hai dòng. */
	display: flex;
	flex-wrap: wrap;
	/* Khoảng cách ngang rộng (80px) vì con số in cỡ lớn: để sát nhau thì
	   diện tích và số WC dính thành một cụm, mắt không tách được đâu là
	   hai chỉ số khác nhau. Có flex-wrap nên chật thì tự xuống dòng. */
	gap: 24px 80px;
	border-top: 1px solid var(--c-line-2);
	padding-top: 26px;
	margin: 30px 0;
}

.bds-unit__fact span {
	display: block;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-accent-2);
}

.bds-unit__fact b {
	display: block;
	margin-top: 10px;
	font-family: var(--f-display);
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 1.1;
	color: var(--c-ink);
}

/* ---------- Bảng loại căn ---------- */

.bds-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 30px;
	font-size: 0.9375rem;
}

.bds-table th {
	text-align: left;
	padding: 13px 16px 13px 0;
	border-bottom: 1px solid var(--c-line-2);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-accent-2);
	font-weight: 500;
}

.bds-table td {
	padding: 14px 16px 14px 0;
	border-bottom: 1px solid var(--c-line);
	color: var(--c-ink);
}

.bds-table tr.is-locked td {
	filter: blur(4px);
	user-select: none;
}

/* ---------- Thư viện ảnh ---------- */

.bds-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
	margin-top: 36px;
}

.bds-gallery figure {
	margin: 0;
}

.bds-gallery img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	background: var(--c-cream);
}

.bds-gallery figcaption {
	margin-top: 9px;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-muted);
	text-align: center;
}

.bds-figure {
	margin: 34px 0 0;
}

.bds-figure img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--c-line);
	border-radius: 18px;
}

.bds-figure figcaption {
	margin-top: 10px;
	font-size: 0.8125rem;
	color: var(--c-muted);
	text-align: center;
}

/* ---------- Bản đồ Google nhúng ----------

   Google trả về thẻ iframe với chiều cao cố định. Nếu để nguyên thì
   trên điện thoại bản đồ bị bẹp thành một dải mỏng, khách không nhìn
   ra gì. Nên khung ở đây tự khoá tỷ lệ, còn iframe bên trong bị ép
   phủ kín khung. */

.bds-map {
	margin: 34px 0 0;
	border: 1px solid var(--c-line);
	border-radius: 18px;
	overflow: hidden;
	background: var(--c-cream);
	aspect-ratio: 16 / 9;
}

.bds-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Màn hình hẹp: khung vuông hơn để vẫn thấy được đường xá xung quanh. */
@media (max-width: 700px) {
	.bds-map {
		aspect-ratio: 4 / 3;
	}
}

.bds-map__chu-thich {
	margin: 12px 0 0;
	font-size: 0.8125rem;
	color: var(--c-muted);
	text-align: center;
}

/* ---------- Dải số liệu ---------- */

.bds-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.14);
	margin-top: 40px;
}

.bds-figures > div {
	background: var(--c-panel);
	padding: 30px 24px;
}

.bds-figures b {
	display: block;
	font-family: var(--f-display);
	font-size: 2.1rem;
	font-weight: 400;
	color: var(--c-blossom);
	line-height: 1.1;
}

.bds-figures span {
	display: block;
	margin-top: 10px;
	font-size: 0.875rem;
	color: var(--c-on-dark-2);
	line-height: 1.6;
}

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

.bds-amenities {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1px;
	background: var(--c-line);
	border: 1px solid var(--c-line);
	margin-top: 36px;
}

.bds-amenity {
	background: var(--c-page);
	padding: 22px 20px;
}

.bds-amenity b {
	display: block;
	color: var(--c-ink);
	font-weight: 600;
	font-size: 0.9375rem;
	margin-bottom: 4px;
}

.bds-amenity span {
	color: var(--c-muted);
	font-size: 0.875rem;
}

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

.bds-legal {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	border-top: 1px solid var(--c-line);
}

.bds-legal li {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--c-line);
}

.bds-legal b {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-accent-2);
	font-weight: 500;
	padding-top: 3px;
}

/* ---------- Form ngắn chèn giữa bài ---------- */

.bds-miniform {
	position: relative;
	background: var(--c-panel-2);
	color: var(--c-on-dark);
	padding-block: 40px;
	overflow: hidden;
}

/* ---- Dải có ảnh nền ----

   Ảnh phối cảnh nằm dưới cùng, trên nó là một lớp phủ tím. Không phủ
   thì chữ trắng rơi lên vùng trời sáng của ảnh và biến mất. Lớp phủ
   đậm dần xuống dưới vì phần dưới là ô nhập và nút — chỗ cần đọc rõ
   nhất. */
.bds-miniform--anh {
	padding-block: clamp(56px, 6vw, 88px);
	text-align: center;
}

.bds-miniform__nen {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bds-miniform__nen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
	display: block;
}

.bds-miniform__nen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(43, 18, 64, 0.72),
		rgba(26, 11, 43, 0.88)
	);
}

/* Nội dung phải nằm trên lớp phủ, nếu không ảnh che mất hết chữ. */
.bds-miniform__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
}

/* Dải có ảnh thì xếp dọc và căn giữa: tiêu đề lớn ở trên, form ở dưới. */
.bds-miniform--anh .bds-miniform__inner {
	flex-direction: column;
	justify-content: center;
	gap: 30px;
}

.bds-miniform__lead {
	flex: 1 1 260px;
}

.bds-miniform--anh .bds-miniform__lead {
	flex: 0 0 auto;
	max-width: 760px;
}

.bds-miniform__title {
	font-family: var(--f-display);
	font-size: 1.35rem;
	line-height: 1.3;
	color: #fff;
	margin: 0 0 6px;
}

/* Trên nền ảnh thì tiêu đề để cỡ như tiêu đề mục — dải này lúc đó là
   một nhịp nghỉ giữa trang, không còn là một thanh chèn ngang. */
.bds-miniform--anh .bds-miniform__title {
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
	line-height: 1.18;
	margin: 0 0 12px;
}

/* Dòng thứ hai đổi màu hồng phấn. Đây là màu sáng trên nền tím đậm nên
   vẫn đọc rõ, mà lại tách được hai vế của câu. */
.bds-miniform__title-2 {
	display: block;
	color: #efb9d9;
}

.bds-miniform__note {
	margin: 0;
	font-size: 0.85rem;
	color: var(--c-on-dark-2);
}

.bds-miniform--anh .bds-miniform__note {
	font-size: 0.95rem;
}

.bds-miniform__form {
	flex: 1 1 420px;
}

/* Trên nền ảnh, form thu lại và nằm giữa dưới tiêu đề. Giới hạn 640px
   để ba ô không kéo dài hết màn hình rộng, nhìn loãng. */
.bds-miniform--anh .bds-miniform__form {
	flex: 0 0 auto;
	width: min(100%, 640px);
}

/* Ô nhập trên nền ảnh phải đặc hơn: nền mờ 6% đủ dùng khi phía sau là
   màu trơn, nhưng đặt lên ảnh thì cạnh ô lẫn vào chi tiết của ảnh. */
.bds-miniform--anh input {
	background: rgba(26, 11, 43, 0.55);
	border-color: rgba(255, 255, 255, 0.34);
	backdrop-filter: blur(4px);
}

.bds-miniform--anh .bds-miniform__zalo {
	margin-top: 4px;
}

.bds-miniform__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bds-miniform__fields > div {
	flex: 1 1 150px;
}

.bds-miniform input {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--r-soft);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-family: var(--f-sans);
	font-size: 0.9375rem;
}

.bds-miniform input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.bds-miniform input:focus {
	outline: 2px solid var(--c-cta);
	outline-offset: 1px;
	background: rgba(255, 255, 255, 0.1);
}

.bds-miniform .bds-btn {
	flex: 0 0 auto;
	padding-inline: 26px;
}

.bds-miniform__zalo {
	flex: 0 0 auto;
	color: var(--c-blossom);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.bds-miniform .bds-form__msg {
	margin-bottom: 12px;
}

/* Nhãn chỉ dành cho trình đọc màn hình — người sáng mắt đã thấy
   chữ gợi ý sẵn trong ô nhập nên không cần hiện thêm. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

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

.bds-archgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1px;
	background: var(--c-line);
	border: 1px solid var(--c-line);
	margin: 30px 0;
}

.bds-arch {
	background: var(--c-page);
	padding: 24px 22px;
}

.bds-arch__title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.1rem;
	color: var(--c-ink);
	margin: 0 0 8px;
}

.bds-arch__text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--c-muted);
	line-height: 1.65;
}

.bds-swatches {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
}

.bds-swatches li {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bds-swatch {
	width: 46px;
	height: 46px;
	border-radius: var(--r-soft);
	border: 1px solid var(--c-line-2);
	flex-shrink: 0;
}

.bds-swatches b {
	display: block;
	font-size: 0.875rem;
	color: var(--c-ink);
	letter-spacing: 0.04em;
}

.bds-swatches em {
	display: block;
	font-style: normal;
	font-size: 0.8125rem;
	color: var(--c-muted);
}

/* ---------- Trường học ---------- */

.bds-schools {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--c-line);
	border: 1px solid var(--c-line);
}

.bds-schools li {
	background: var(--c-page);
	padding: 26px 24px;
}

.bds-schools__dist {
	display: inline-block;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-cta-dark);
	margin-bottom: 8px;
}

.bds-schools__name {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.15rem;
	color: var(--c-ink);
	margin: 0 0 8px;
}

.bds-schools__text {
	margin: 0;
	color: var(--c-muted);
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* ---------- So sánh giá ---------- */

.bds-pricebars {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

.bds-pricebars li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--c-line);
	font-size: 0.9375rem;
}

.bds-pricebars li:nth-child(odd) {
	background: var(--c-cream-2);
}

/* Dòng của chính dự án được tô nổi để khách nhìn ra ngay vị trí
   của nó trên mặt bằng giá chung. */
.bds-pricebars li.is-current {
	background: var(--c-accent);
	color: #fff;
	font-weight: 700;
	border-bottom-color: var(--c-accent);
}

.bds-pricebars__val {
	white-space: nowrap;
	font-weight: 600;
	color: var(--c-accent);
}

.bds-pricebars li.is-current .bds-pricebars__val {
	color: #fff;
}

/* ---------- Hồ sơ chủ đầu tư ---------- */

.bds-portfolio {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.bds-portfolio li {
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 20px;
}

.bds-portfolio b {
	color: var(--c-blossom);
	font-weight: 600;
}

.bds-portfolio span {
	color: var(--c-on-dark-2);
	line-height: 1.65;
}

.bds-quote {
	margin: 34px 0 0;
	padding: 24px 28px;
	border-left: 3px solid var(--c-cta);
	background: rgba(255, 255, 255, 0.04);
}

.bds-quote p {
	margin: 0 0 10px;
	font-family: var(--f-display);
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--c-on-dark);
}

.bds-quote cite {
	font-style: normal;
	font-size: 0.875rem;
	color: var(--c-on-dark-2);
}

/* ---------- Dòng thời gian pháp lý ---------- */

.bds-timeline {
	list-style: none;
	margin: 20px 0 0;
	padding: 0 0 0 26px;
	border-left: 2px solid var(--c-line);
	counter-reset: moc;
}

.bds-timeline li {
	position: relative;
	padding: 0 0 24px;
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 18px;
	align-items: baseline;
}

.bds-timeline li::before {
	content: "";
	position: absolute;
	left: -33px;
	top: 7px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--c-page);
	border: 2px solid var(--c-line-2);
}

/* Mốc đã hoàn thành tô đặc, mốc tương lai để rỗng — khách nhìn phát
   biết dự án đang ở đâu trong lộ trình. */
.bds-timeline li.is-done::before {
	background: var(--c-cta);
	border-color: var(--c-cta);
}

.bds-timeline__when {
	font-weight: 700;
	color: var(--c-ink);
	font-size: 0.9375rem;
}

.bds-timeline__what {
	color: var(--c-muted);
	line-height: 1.65;
}

/* ---------- Danh sách tiện ích trong từng tab ----------

   Một tab có tới 28 mục. Chia lưới để không kéo trang dài lê thê. */

.bds-amenlist {
	list-style: none;
	margin: 0;
	padding: 0;

	/* LƯỚI chứ không phải chia cột (columns). Kiểu chia cột bắt mắt chạy
	   hết cột 1 từ trên xuống rồi mới quay lên đầu cột 2 — đọc một danh
	   sách 28 mục theo kiểu đó rất dễ lạc dòng. Lưới trải ngang, đọc
	   trái sang phải như đọc chữ bình thường. */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	column-gap: 36px;

	border-bottom: 1px solid var(--c-line);

	/* Đánh số lại từ 01 ở MỖI tầng. Mỗi tab là một tầng riêng, mà khách
	   không nhìn thấy tầng kia khi đang mở tầng này — đánh số chạy liền
	   một mạch 01→53 sẽ khiến tầng 2 mở ra bắt đầu ở số 29, không hiểu
	   được. */
	counter-reset: tienich;
}

/* Mỗi mục là một dòng có kẻ ngang phía trên. Các kẻ này thẳng hàng giữa
   các cột nên tạo thành những đường kẻ chạy suốt bề ngang — mắt có chỗ
   bám để lần theo từng dòng, thay vì nhìn vào một mảng chữ rời rạc. */
/* Khung lưới 34px | chữ, đúng như nút của mục lục đầu trang — để dãy số
   của hai mục thẳng hàng và cùng một cỡ. */
.bds-amenlist li {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 0 12px;
	align-items: baseline;
	padding: 12px 0;
	border-top: 1px solid var(--c-line);
	line-height: 1.4;
	font-size: 0.9375rem;
	counter-increment: tienich;
}

/* Số thứ tự thay cho gạch đầu dòng. Gạch ngang dài 6px gần như vô hình
   trong danh sách hơn 50 mục. Số vừa dễ bám mắt, vừa cho khách biết
   ngay tầng này có bao nhiêu tiện ích mà không phải ngồi đếm — và trùng
   với cách chủ đầu tư đánh số trên bản vẽ tổng mặt bằng.

   Dạng 01, 02… chứ không phải 1, 2: số một chữ số và hai chữ số lệch bề
   ngang nhau, cột chữ bên cạnh sẽ so le. Thêm tabular-nums để mọi chữ
   số rộng bằng nhau.

   Màu tím thương hiệu chứ không phải màu cam nút bấm — cam trên nền
   sáng chỉ đạt tương phản 2,2, đọc không ra. */
.bds-amenlist li::before {
	content: counter(tienich, decimal-leading-zero);
	font-family: var(--f-display);
	font-size: 1.15rem;
	color: var(--c-accent);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

/* Cả tên lẫn mô tả đều nằm ở cột thứ hai. Không khai báo thì lưới tự
   xếp mô tả xuống hàng dưới nhưng lại rơi vào cột SỐ, thành ra mô tả
   thụt hẳn ra ngoài lề trái. */
.bds-amenlist b {
	grid-column: 2;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--c-ink);
	line-height: 1.4;
}

.bds-amenlist span {
	grid-column: 2;
	display: block;
	margin-top: 4px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--c-muted);
}

/* ---------- Số đếm trên tab tiện ích ---------- */

/* Con số dùng font tiêu đề và màu tím thương hiệu, đúng như dãy số của
   mục lục — chỉ thêm viên nền bo tròn để tách khỏi tên tầng. */
.bds-tabs__count {
	display: inline-block;
	margin-left: 8px;
	font-family: var(--f-display);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	color: var(--c-accent);
	background: var(--c-cream);
	border-radius: 999px;
	padding: 4px 10px;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
	transition: color 0.2s ease, background 0.2s ease;
}

/* Trên nền tím đậm của tab đang chọn: nền kem thành trắng mờ, số đổi
   sang màu cam hoa giống số của mục lục khi đang chọn. */
.bds-tabs__btn.is-active .bds-tabs__count {
	background: rgba(255, 255, 255, 0.14);
	color: var(--c-blossom);
}

.bds-tabs__btn.is-active .bds-tabs__count {
	background: var(--c-accent);
	color: #fff;
}

/* ---------- Câu hỏi thường gặp ----------
   Dùng lại y nguyên dáng nút của danh sách chọn bên mục lục
   (.bds-agenda__nut): ô bo góc, số thứ tự 01/02, và khi mở thì tô kín
   màu tím đậm. Hai chỗ đều là "danh sách để khách chọn một mục", nên
   giống nhau về hình thì khách không phải học lại cách bấm. */

.bds-faq {
	margin-top: 34px;
	counter-reset: faq;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bds-faq__item {
	counter-increment: faq;
}

.bds-faq__q {
	appearance: none;
	width: 100%;
	display: grid;
	grid-template-columns: 34px 1fr 24px;
	align-items: center;
	gap: 12px;
	padding: 15px 18px;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	background: var(--c-page);
	font-family: var(--f-sans);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
		transform 0.2s var(--ease), border-radius 0.2s var(--ease);
}

.bds-faq__q::before {
	content: counter(faq, decimal-leading-zero);
	font-family: var(--f-display);
	font-size: 1.15rem;
	color: var(--c-accent);
	transition: color 0.2s ease;
}

.bds-faq__ten {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--c-ink);
	line-height: 1.4;
	transition: color 0.2s ease;
}

/* Cùng lý do đã ghi ở .bds-agenda__nut: GeneratePress chèn quy tắc
   button:hover{color:#fff;background:#3f4047} cho MỌI thẻ <button>, nên
   phải khai cả nền lẫn màu chữ ở cả ba trạng thái, nếu không rê chuột
   vào là chữ tối nằm trên nền tối. */
.bds-faq__q:hover,
.bds-faq__q:focus,
.bds-faq__q:active {
	background: var(--c-cream-2);
	color: var(--c-ink);
	border-color: var(--c-line-2);
	transform: translateX(3px);
}

.bds-faq__q:active {
	transform: scale(0.985);
	transition-duration: 90ms;
}

.bds-faq__q:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* Câu đang mở: tô kín tím đậm và bỏ bo góc dưới để dính liền với khung
   câu trả lời ngay bên dưới. Phải thắng cả trạng thái rê chuột. */
.bds-faq__q[aria-expanded="true"],
.bds-faq__q[aria-expanded="true"]:hover,
.bds-faq__q[aria-expanded="true"]:focus,
.bds-faq__q[aria-expanded="true"]:active {
	background: var(--c-nav);
	border-color: var(--c-nav);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	transform: none;
}

.bds-faq__q[aria-expanded="true"]::before {
	color: var(--c-blossom);
}

.bds-faq__q[aria-expanded="true"] .bds-faq__ten,
.bds-faq__q[aria-expanded="true"]:hover .bds-faq__ten,
.bds-faq__q[aria-expanded="true"]:focus .bds-faq__ten {
	color: #fff;
}

/* Dấu +/− là cột thứ ba của lưới, không còn định vị tuyệt đối. */
.bds-faq__q::after {
	content: "+";
	justify-self: center;
	font-size: 1.35rem;
	line-height: 1;
	font-weight: 300;
	color: var(--c-accent);
	transition: color 0.2s ease;
}

.bds-faq__q[aria-expanded="true"]::after {
	content: "−";
	color: var(--c-blossom);
}

.bds-faq__a-in {
	/* Chữ trả lời thụt vào thẳng hàng với câu hỏi: 18px đệm + 34px cột
	   số + 12px khoảng cách. */
	padding: 0 20px 0 64px;
	color: var(--c-muted);
	line-height: 1.75;
}

/* ---------- Form đăng ký ---------- */

.bds-contact {
	background: var(--c-panel);
	color: var(--c-on-dark);
	scroll-margin-top: 74px;
}

.bds-contact .bds-heading {
	color: var(--c-on-dark);
}

.bds-contact .bds-kicker {
	color: var(--c-blossom);
}

.bds-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

.bds-benefits {
	list-style: none;
	margin: 24px 0;
	padding: 0;
}

.bds-benefits li {
	position: relative;
	padding: 9px 0 9px 26px;
	color: var(--c-on-dark-2);
	line-height: 1.65;
}

.bds-benefits li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--c-blossom);
}

.bds-contact__list {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}

.bds-contact__list li {
	padding: 7px 0;
}

.bds-contact__list a {
	color: var(--c-blossom);
	text-decoration: none;
	font-weight: 600;
}

.bds-form {
	background: var(--c-page);
	border-radius: var(--r-soft);
	padding: 32px;
}

.bds-form label {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-accent-2);
	margin-bottom: 7px;
}

.bds-form input[type="text"],
.bds-form input[type="tel"],
.bds-form input[type="email"],
.bds-form select,
.bds-form textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--c-line-2);
	border-radius: var(--r-soft);
	font-family: var(--f-sans);
	font-size: 0.9375rem;
	margin-bottom: 18px;
	background: #fff;
	color: var(--c-ink);
}

.bds-form input:focus,
.bds-form select:focus,
.bds-form textarea:focus {
	outline: 2px solid var(--c-accent);
	outline-offset: 1px;
	border-color: var(--c-accent);
}

.bds-form .bds-btn {
	width: 100%;
	text-align: center;
}

.bds-form__note {
	font-size: 0.78rem;
	color: var(--c-muted);
	text-align: center;
	margin: 14px 0 0;
}

.bds-form__msg {
	border-radius: var(--r-soft);
	padding: 13px 15px;
	margin-bottom: 16px;
	font-size: 0.9375rem;
}

.bds-form__msg--ok {
	background: #e7f6ec;
	color: #1a6b38;
}

.bds-form__msg--err {
	background: #fdecec;
	color: #99201d;
}

/* ---------- Thẻ dự án (trang chủ & danh sách) ---------- */

.bds-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 32px;
	margin-top: 40px;
}

.bds-card {
	background: var(--c-page);
	border: 1px solid var(--c-line);
	display: flex;
	flex-direction: column;
}

.bds-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--c-cream);
}

.bds-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bds-card__body {
	padding: 24px 22px 26px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.bds-card__title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 10px;
}

.bds-card__title a {
	color: var(--c-ink);
	text-decoration: none;
}

.bds-card__title a:hover {
	color: var(--c-accent);
}

.bds-card__loc,
.bds-card__price {
	margin: 0 0 8px;
	font-size: 0.875rem;
	color: var(--c-muted);
}

.bds-card__price {
	color: var(--c-accent-2);
	font-weight: 600;
}

.bds-card__more {
	margin-top: auto;
	padding-top: 14px;
	color: var(--c-ink);
	font-weight: 500;
	text-decoration: none;
	font-size: 0.875rem;
	border-top: 1px solid var(--c-line);
}

.bds-card__more::after {
	content: " →";
	color: var(--c-accent);
}

.bds-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
}

.bds-filter {
	padding: 9px 18px;
	border: 1px solid var(--c-line-2);
	border-radius: 999px;
	color: var(--c-muted);
	text-decoration: none;
	font-size: 0.875rem;
}

.bds-filter.is-active,
.bds-filter:hover {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: #fff;
}

/* ---------- Nút gọi cố định ---------- */

.bds-mobilebar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 300;
	background: var(--c-page);
	border-top: 1px solid var(--c-line);
	padding-bottom: env(safe-area-inset-bottom);
}

/* Ba ô bằng nhau. Ô chữ hẹp lại nên cỡ chữ phải nhỏ theo, xem
   .bds-mobilebar__chinh bên dưới. */
.bds-mobilebar__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.bds-mobilebar a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 10px 6px;
	text-align: center;
	text-decoration: none;
	color: var(--c-ink);
	border-right: 1px solid var(--c-line);
}

.bds-mobilebar__svg {
	width: 26px;
	height: 26px;
	display: block;
}

/* Ống nghe màu xanh lá — màu ai cũng hiểu là "gọi". */
.bds-mobilebar__svg--goi {
	color: #16a34a;
}

/* Logo Zalo có khoảng trống quanh hình nên phải vẽ to hơn một chút thì
   nhìn mới bằng cái ống nghe bên cạnh. */
.bds-mobilebar__svg--zalo {
	width: 31px;
	height: 31px;
}

/* Viết kèm thẻ a để đè được màu chữ của .bds-mobilebar a phía trên.
   Cỡ chữ co theo bề ngang màn hình nhưng không bao giờ quá 0,88rem:
   ô chỉ rộng 1/3 thanh, để chữ to hơn là xuống dòng hoặc tràn ra. */
.bds-mobilebar a.bds-mobilebar__chinh {
	border-right: 0;
	background: var(--c-cta);
	color: #fff;
	padding: 10px 4px;
	font-size: clamp(0.72rem, 3.4vw, 0.88rem);
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
}

.bds-float {
	position: fixed;
	right: 20px;
	bottom: 24px;
	z-index: 250;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bds-float a {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--c-cta);
	color: #fff;
	text-decoration: none;
	font-size: 1.25rem;
	box-shadow: 0 6px 22px rgba(43, 18, 64, 0.3);
}

.bds-float a.is-zalo {
	background: #0068ff;
	font-size: 0.78rem;
	font-weight: 700;
}

/* ============================================================
   HIỆU ỨNG CHUYỂN ĐỘNG

   Dùng animation-timeline: view() — trình duyệt tự chạy hiệu ứng
   theo vị trí cuộn, không cần JavaScript nên không làm chậm trang.

   BẮT BUỘC bọc trong @supports: trình duyệt chưa hỗ trợ mà vẫn nhận
   animation-fill-mode:both sẽ giữ nguyên opacity:0 và NỘI DUNG BIẾN MẤT.
   Bọc lại thì máy cũ chỉ đơn giản là không có hiệu ứng.

   Và bọc trong prefers-reduced-motion: no-preference — người bật chế độ
   giảm chuyển động thường bị chóng mặt vì hiệu ứng cuộn.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@keyframes bds-reveal {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bds-hero-in {
	from {
		opacity: 0;
		transform: translateY(-24px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Ảnh hero trôi chậm hơn tốc độ cuộn, tạo chiều sâu. */
@keyframes bds-parallax {
	from {
		transform: translateY(-7%) scale(1.16);
	}
	to {
		transform: translateY(7%) scale(1.16);
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/* Các khối nội dung hiện dần khi cuộn tới */
		.bds-privilege,
		.bds-arch,
		.bds-amenity,
		.bds-card,
		.bds-schools li,
		.bds-gallery figure,
		.bds-figure,
		.bds-unit__figure,
		.bds-summary__row,
		.bds-heading,
		.bds-stat {
			animation: bds-reveal linear both;
			animation-timeline: view();
			/* Chạy hết hiệu ứng khi khối vừa nhô lên 4% và cuộn thêm 20% */
			animation-range: entry 4% cover 20%;
		}

		.bds-hero__media img {
			animation: bds-parallax linear both;
			animation-timeline: view();
			animation-range: cover;
			will-change: transform;
		}
	}
}

/* Chữ ở đầu trang trôi xuống khi vừa tải — chạy được trên mọi trình duyệt. */
@media (prefers-reduced-motion: no-preference) {
	.bds-hero__badge,
	.bds-hero__name,
	.bds-hero__title,
	.bds-hero__sub,
	.bds-hero__cta {
		animation: bds-hero-in 0.7s var(--ease) both;
	}

	/* Lệch nhau một chút cho có nhịp, thay vì ập ra cùng lúc. */
	.bds-hero__name {
		animation-delay: 0.06s;
	}

	.bds-hero__title {
		animation-delay: 0.12s;
	}

	.bds-hero__sub {
		animation-delay: 0.18s;
	}

	.bds-hero__cta {
		animation-delay: 0.24s;
	}
}

/* ---------- Nhấc nhẹ khi rê chuột ---------- */

.bds-btn,
.bds-navbar__cta {
	transition: background 0.2s var(--ease), color 0.2s var(--ease),
		border-color 0.2s var(--ease), transform 0.14s var(--ease);
}

.bds-btn:hover,
.bds-navbar__cta:hover {
	transform: translateY(-2px);
}

.bds-btn:active,
.bds-navbar__cta:active {
	transform: translateY(0);
}

.bds-card,
.bds-privilege,
.bds-schools li {
	transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.bds-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(43, 18, 64, 0.1);
}

/* Ảnh trong thư viện phóng nhẹ khi rê chuột */
.bds-gallery a {
	display: block;
	overflow: hidden;
}

.bds-gallery img {
	transition: transform 0.5s var(--ease);
}

.bds-gallery a:hover img {
	transform: scale(1.05);
}

/* ---------- Câu hỏi thường gặp: mở/đóng mượt ----------
   Mẹo grid-template-rows 0fr → 1fr là cách duy nhất cho phép chuyển
   động mượt tới chiều cao tự động (height: auto không chuyển động được). */

.bds-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s var(--ease);
}

.bds-faq__a.is-open {
	grid-template-rows: 1fr;
}

.bds-faq__a-in {
	overflow: hidden;
	min-height: 0;
}

/* Khung trả lời chỉ có viền KHI ĐANG MỞ. Nếu đặt viền cố định thì lúc
   đóng (chiều cao 0) hai đường viền trên dưới vẫn hiện, để lại một vạch
   thừa dưới mỗi câu hỏi. */
.bds-faq__a.is-open .bds-faq__a-in {
	padding-top: 16px;
	padding-bottom: 20px;
	background: var(--c-page);
	border: 1px solid var(--c-line);
	border-top: 0;
	border-radius: 0 0 12px 12px;
}

/* ---------- Máy tính bảng & điện thoại ---------- */

@media (max-width: 900px) {
	.bds-unit,
	.bds-contact__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Thẻ loại căn: đệm 52/56px hợp màn hình lớn, trên điện thoại sẽ
	   ngốn gần hết bề ngang nên phải thu lại. */
	.bds-unit {
		padding: 32px 24px;
	}

	.bds-distances {
		columns: 1;
	}

	.bds-amenlist {
		columns: 2;
	}
}

@media (max-width: 768px) {
	.bds-section {
		padding-block: 56px;
	}

	.bds-hero__inner {
		padding: 56px 22px 48px;
	}

	/* Điện thoại: giấu menu giữa, chỉ còn logo và nút gọi cho gọn. */
	.bds-navbar__links {
		display: none;
	}

	.bds-navbar__inner {
		min-height: 72px;
		padding: 0 18px;
	}

	.bds-navbar__logo {
		height: 48px;
	}

	.bds-navbar__cta {
		padding: 11px 18px;
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
	}

	.bds-summary__row,
	.bds-legal li {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.bds-infotable th,
	.bds-infotable td {
		display: block;
		width: auto;
		padding-right: 0;
	}

	.bds-infotable th {
		border-bottom: 0;
		padding-bottom: 2px;
	}

	.bds-mobilebar {
		display: block;
	}

	.bds-float {
		display: none;
	}

	/* Chừa chỗ cho thanh cố định, tránh che nội dung cuối trang. */
	body {
		padding-bottom: 60px;
	}

	/* ---- Mọi dãy nút chọn đều xếp DỌC trên điện thoại ----

	   Trước đây các dãy này vuốt ngang. Trên màn hình hẹp kiểu đó có hai
	   cái dở: phần lớn lựa chọn nằm khuất ngoài mép phải (khách không
	   biết là còn), và vuốt ngang trong một trang cuộn dọc rất dễ trượt
	   tay. Xếp dọc thì thấy hết một lượt, bấm là trúng. */
	.bds-tabs__nav {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: visible;
	}

	.bds-tabs--tienich .bds-tabs__nav {
		/* Ghi đè lưới năm cột bằng nhau của màn hình rộng. */
		display: flex;
	}

	/* Nút rộng hết hàng, chữ canh trái và viên đếm dạt sang phải — đúng
	   dáng của danh sách chọn ở mục lục và mục hỏi đáp. */
	.bds-tabs__btn,
	.bds-tabs--tienich .bds-tabs__btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		padding-inline: 18px;
		text-align: left;
		font-size: 0.9375rem;

		/* Xếp dọc rồi thì có cả hàng cho tên: cho phép xuống dòng thay vì
		   cắt cụt. text-wrap phải khai lại vì bản màn hình rộng đặt
		   balance, mà balance cũng ép chế độ ngắt dòng. */
		white-space: normal;
		text-wrap: wrap;
	}

	.bds-form {
		padding: 24px;
	}

	/* Thư viện ảnh chuyển thành băng vuốt ngang, mỗi lần vuốt dừng
	   đúng một ảnh — quen tay hơn là cuộn dọc qua chục ảnh. */
	.bds-gallery {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 22px;
		gap: 12px;
		margin-inline: -22px;
		padding-inline: 22px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.bds-gallery::-webkit-scrollbar {
		display: none;
	}

	.bds-gallery figure {
		flex: 0 0 78%;
		scroll-snap-align: center;
	}

	/* Điện thoại: nút mũi tên thừa vì vuốt tay tự nhiên hơn, mà đặt đè
	   lên ảnh khổ nhỏ thì che mất nội dung. */
	.bds-slider__nut {
		display: none;
	}

	.bds-slider__cap {
		padding: 40px 16px 14px;
		font-size: 0.75rem;
		letter-spacing: 0.1em;
	}

	.bds-slider__goi-y {
		display: none;
	}
}

/* ============================================================
   Ba mục thêm theo góp ý khách hàng: mục lục, mặt bằng tầng,
   phương thức thanh toán.
   ============================================================ */

/* ---------- Gỡ nền xám & chữ trắng của theme cha ----------

   GeneratePress tô nền xám đậm VÀ đổi chữ sang trắng cho MỌI thẻ
   <button> lúc rê chuột và lúc đang focus. Hai nút dưới đây chỉ là chữ
   hoặc ảnh bấm được, không phải nút bấm thật — nên sau khi khách bấm
   một cái là dính mảng xám, chữ trắng trên nền sáng thì mất hút.

   Khai báo ở trạng thái thường không đủ: quy tắc của theme cha nhắm
   vào :hover/:focus nên thắng. Phải chặn đúng ba trạng thái đó. */
.bds-floors__q,
.bds-floors__q:hover,
.bds-floors__q:focus,
.bds-floors__q:active {
	background: transparent;
	color: var(--c-ink);
}

.bds-zoom,
.bds-zoom:hover,
.bds-zoom:focus,
.bds-zoom:active {
	background: transparent;
}

/* ---------- Mục lục đầu trang: danh sách trái — xem trước phải ---------- */

.bds-agenda__khung {
	display: grid;
	grid-template-columns: minmax(260px, 34%) 1fr;
	gap: clamp(20px, 2.4vw, 40px);
	margin-top: 34px;
	align-items: start;
}

.bds-agenda__list {
	list-style: none;
	counter-reset: agenda;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bds-agenda__item {
	counter-increment: agenda;
}

.bds-agenda__nut {
	appearance: none;
	width: 100%;
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: center;
	gap: 12px;
	padding: 15px 18px;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	background: var(--c-page);
	font-family: var(--f-sans);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
		transform 0.2s var(--ease);
}

.bds-agenda__nut::before {
	content: counter(agenda, decimal-leading-zero);
	font-family: var(--f-display);
	font-size: 1.15rem;
	color: var(--c-accent);
	transition: color 0.2s ease;
}

/* Phải khai báo CẢ nền lẫn màu chữ, và cho cả ba trạng thái.
   GeneratePress chèn thẳng vào trang quy tắc:
       button:hover, button:focus { color:#fff; background-color:#3f4047 }
   nhắm vào MỌI thẻ <button>. Đây là nút bấm thật nên dính quy tắc đó:
   nền chuyển xám đậm, trong khi chữ vẫn giữ màu tối của mình — thành ra
   chữ tối trên nền tối, rê chuột vào là không đọc được. */
.bds-agenda__nut:hover,
.bds-agenda__nut:focus,
.bds-agenda__nut:active {
	background: var(--c-cream-2);
	color: var(--c-ink);
	border-color: var(--c-line-2);
	transform: translateX(3px);
}

.bds-agenda__nut:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* Phản hồi lúc bấm: nút lún xuống một chút rồi bật lại.
   Đây là loại hiệu ứng "dẫn đường" — nó xác nhận ngón tay đã bấm trúng,
   chứ không phải để trang trí. Thời gian rất ngắn (90ms) vì phản hồi
   chậm hơn khoảng đó là não đã thôi nối nó với cú bấm. */
.bds-agenda__nut {
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
		transform 0.2s var(--ease);
}

.bds-agenda__nut:active {
	transform: scale(0.985);
	transition-duration: 90ms;
}

.bds-agenda__nut.is-active:active {
	transform: scale(0.985);
}

/* Mục đang chọn phải thắng cả trạng thái rê chuột, nếu không thì rê vào
   mục đang mở là nó nhảy từ tím đậm sang kem, nhìn như vừa bị bỏ chọn. */
.bds-agenda__nut.is-active:hover,
.bds-agenda__nut.is-active:focus,
.bds-agenda__nut.is-active:active {
	background: var(--c-nav);
	border-color: var(--c-nav);
	transform: none;
}

.bds-agenda__nut.is-active:hover .bds-agenda__ten,
.bds-agenda__nut.is-active:focus .bds-agenda__ten {
	color: #fff;
}

/* Mục đang chọn tô kín màu tím đậm, cùng ngôn ngữ với tab loại căn hộ. */
.bds-agenda__nut.is-active {
	background: var(--c-nav);
	border-color: var(--c-nav);
	transform: none;
}

.bds-agenda__nut.is-active::before {
	color: var(--c-blossom);
}

.bds-agenda__nut.is-active .bds-agenda__ten {
	color: #fff;
}

.bds-agenda__ten {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--c-ink);
	line-height: 1.4;
	transition: color 0.2s ease;
}

/* ---- Khung xem trước ---- */

.bds-agenda__xem-khung {
	/* Bám theo khi cuộn: danh sách mười mục dài hơn khung xem trước,
	   không dính thì cuộn tới mục cuối là khung bên phải đã trôi mất. */
	position: sticky;
	top: calc(96px + 20px);

	/* Cắt phần thừa khi khung trượt vào từ bên phải. Dùng "clip" chứ
	   không phải "hidden": hidden biến đây thành vùng cuộn riêng và
	   trình duyệt sẽ tự cuộn nó khi khách bấm phím, gây nhảy trang. */
	overflow-x: clip;

	/* Xếp chồng cả bảy mục vào cùng một ô lưới để khung luôn cao bằng
	   mục dài nhất. Mô tả mỗi mục dài ngắn khác nhau, thiếu cách này thì
	   mỗi lần bấm sang mục khác khung lại co giãn. */
	display: grid;
}

.bds-agenda__xem-khung > .bds-agenda__xem {
	grid-area: 1 / 1;
	min-width: 0;
}

/* Ghi đè display:none mặc định của thuộc tính hidden — mục không mở vẫn
   phải chiếm chỗ thì khung mới đứng yên. */
.bds-agenda__xem-khung > .bds-agenda__xem[hidden] {
	display: block;
	visibility: hidden;
}

.bds-agenda__xem[hidden] {
	display: none;
}

.bds-agenda__xem {
	background: var(--c-page);
	border: 1px solid var(--c-line);
	border-radius: 16px;
	overflow: hidden;
}

/* ---- Hiệu ứng trượt vào khi đổi mục ----

   Chạy trên chính mục đang chọn. Mỗi lần bấm sang mục khác, lớp
   is-active được gỡ ra rồi gắn lại nên hiệu ứng chạy lại từ đầu.

   Trượt từ PHẢI sang vì danh sách nằm bên trái — nội dung đi cùng chiều
   với hướng mắt đang nhìn. Nền và chữ tách làm hai nhịp lệch nhau một
   chút, mắt bắt được thứ tự ảnh rồi mới tới chữ. */
/* KHÔNG dùng fill-mode "both" ở đây, dù nó mượt hơn.
   "both" giữ nguyên trạng thái ĐẦU của hiệu ứng khi hiệu ứng chưa chạy
   — mà trạng thái đầu là opacity 0. Nếu trình duyệt ngưng vẽ giữa chừng
   (tab nền, máy tiết kiệm pin) thì khung xem trước kẹt ở trong suốt
   hoàn toàn: khách bấm vào mục mà KHÔNG THẤY GÌ.
   Bỏ fill-mode thì trạng thái nghỉ luôn là hiện rõ — hiệu ứng không
   chạy được thì nội dung vẫn ở đó, chỉ mất phần trượt. */
.bds-agenda__xem.is-active {
	animation: bds-agenda-vao 620ms var(--ease);
}

/* Chữ đi chậm hơn ảnh một nhịp để mắt bắt ảnh trước rồi mới tới chữ.
   Làm bằng THỜI LƯỢNG dài hơn chứ không phải độ trễ: độ trễ lại cần
   fill-mode mới khỏi nháy, tức là quay về đúng cái bẫy vừa tránh. */
.bds-agenda__xem.is-active .bds-agenda__xem-chu {
	animation: bds-agenda-vao 880ms var(--ease);
}

@keyframes bds-agenda-vao {
	from {
		opacity: 0;
		transform: translateX(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Người bật chế độ giảm chuyển động: đổi mục vẫn thấy, chỉ bỏ phần
   trượt — chuyển động ngang là thứ gây chóng mặt nhiều nhất. */
@media (prefers-reduced-motion: reduce) {
	.bds-agenda__xem.is-active,
	.bds-agenda__xem.is-active .bds-agenda__xem-chu {
		animation: none;
	}
}

.bds-agenda__anh {
	margin: 0;
	/* Khoá tỷ lệ 16:10 — mười ảnh mười kích thước khác nhau, không khoá
	   thì khung nhảy cao thấp mỗi lần bấm sang mục khác. */
	aspect-ratio: 16 / 10;
	background: var(--c-cream);
}

.bds-agenda__anh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bds-agenda__xem-chu {
	padding: 26px 30px 30px;
}

.bds-agenda__xem-ten {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.2;
	color: var(--c-ink);
	margin: 0 0 10px;
}

.bds-agenda__xem-mo-ta {
	color: var(--c-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 0 0 22px;
	max-width: 56ch;
}

@media (max-width: 900px) {
	.bds-agenda__khung {
		grid-template-columns: 1fr;
	}

	/* Trên điện thoại khung xem trước nằm DƯỚI danh sách, dính lại sẽ
	   che mất nội dung bên dưới. */
	.bds-agenda__xem-khung {
		position: static;
	}
}

/* ---------- Mặt bằng tầng ---------- */

.bds-floors {
	margin-top: 34px;
	border-top: 1px solid var(--c-line);
}

.bds-floors__item {
	border-bottom: 1px solid var(--c-line);
}

.bds-floors__q {
	width: 100%;
	appearance: none;
	border: 0;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 44px 18px 0;
	position: relative;
	font-family: var(--f-sans);
	font-size: 1rem;
	cursor: pointer;
}

.bds-floors__q::after {
	content: "+";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.35rem;
	font-weight: 300;
	color: var(--c-accent);
	transition: transform 0.28s var(--ease);
}

.bds-floors__q[aria-expanded="true"]::after {
	content: "−";
	transform: translateY(-50%) rotate(180deg);
}

.bds-floors__q:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: -2px;
}

.bds-floors__stt {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--c-cream);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--c-accent);
}

.bds-floors__item.is-hot .bds-floors__stt {
	background: var(--c-cta);
	color: #fff;
}

.bds-floors__ten {
	font-weight: 600;
}

.bds-floors__hot {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--c-cta);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bds-floors__so-can {
	margin-left: auto;
	font-size: 0.875rem;
	color: var(--c-muted);
	white-space: nowrap;
}

.bds-floors__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s var(--ease);
}

.bds-floors__a.is-open {
	grid-template-rows: 1fr;
}

.bds-floors__a-in {
	overflow: hidden;
	min-height: 0;
	padding-right: 44px;
}

.bds-floors__a.is-open .bds-floors__a-in {
	padding-bottom: 26px;
}

.bds-floors__a-in .bds-figure {
	margin-top: 4px;
}

/* Bảng số căn mỗi sàn — bảng duy nhất có hàng tiêu đề riêng. */
.bds-infotable--cot thead th {
	background: var(--c-cream-2);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-muted);
	text-align: left;
}

.bds-infotable--cot tr.is-hot th,
.bds-infotable--cot tr.is-hot td {
	background: color-mix(in srgb, var(--c-cta) 10%, transparent);
	font-weight: 600;
	color: var(--c-ink);
}

/* Trên điện thoại, theme xếp chồng các ô của bảng thông tin thành từng
   dòng — hợp với bảng hai cột "tên · nội dung", nhưng bảng ba cột này
   mà xếp chồng thì thành một cột số rời rạc, không còn đọc ra tầng nào
   ứng với tháp nào.

   Giữ nguyên dạng bảng và cho cuộn ngang trong khung .bds-infotable__scroll
   có sẵn. Không sửa quy tắc gốc của theme — bảng tổng quan vẫn xếp chồng
   như cũ. */
@media (max-width: 768px) {
	.bds-infotable--cot th,
	.bds-infotable--cot td {
		display: table-cell;
		width: auto;
		white-space: nowrap;
		padding-right: 22px;
	}

	.bds-infotable--cot th {
		border-bottom: 1px solid var(--c-line);
		padding-bottom: 12px;
	}

	.bds-infotable--cot thead th {
		border-bottom: 1px solid var(--c-line);
	}
}

/* ---------- Tiến độ thanh toán ---------- */

.bds-steps {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}

.bds-steps__item {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 16px;
	padding: 0 0 22px;
	position: relative;
}

/* Vạch nối các đợt thành một dòng thời gian. Đợt cuối không có vạch. */
.bds-steps__item::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 34px;
	bottom: 0;
	width: 1px;
	background: var(--c-line-2);
}

.bds-steps__item:last-child::before {
	display: none;
}

.bds-steps__stt {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--c-accent);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	position: relative;
	z-index: 1;
}

.bds-steps__body {
	padding-top: 5px;
}

.bds-steps__moc {
	display: block;
	color: var(--c-ink);
	font-weight: 600;
}

.bds-steps__ty-le {
	display: inline-block;
	margin-top: 5px;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--c-cream);
	color: var(--c-accent);
	font-size: 0.875rem;
	font-weight: 600;
}

.bds-steps__ghi-chu {
	display: block;
	margin-top: 6px;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--c-muted);
}

/* ---------- Các phương án thanh toán ---------- */

.bds-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-top: 22px;
}

.bds-plan {
	position: relative;
	padding: 22px;
	border: 1px solid var(--c-line);
	border-radius: 16px;
	background: var(--c-page);
}

.bds-plan.is-hot {
	border-color: var(--c-cta);
	box-shadow: 0 10px 30px -18px var(--c-cta);
}

.bds-plan__tag {
	position: absolute;
	top: -10px;
	left: 22px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--c-cta);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bds-plan__ten {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.2rem;
	color: var(--c-ink);
	margin: 0;
}

.bds-plan__uu-diem {
	margin: 8px 0 0;
	color: var(--c-accent);
	font-weight: 600;
}

.bds-plan__mo-ta {
	margin: 8px 0 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--c-muted);
}

/* ---------- Chiết khấu & ưu đãi ---------- */

.bds-offers {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.bds-offers__item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 4px 16px;
	padding: 16px 20px;
	border: 1px solid var(--c-line);
	border-radius: 14px;
	background: var(--c-page);
}

.bds-offers__gia-tri {
	grid-row: 1 / span 2;
	font-family: var(--f-display);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--c-cta);
	white-space: nowrap;
}

.bds-offers__ten {
	font-weight: 600;
	color: var(--c-ink);
}

.bds-offers__dieu-kien {
	grid-column: 2;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--c-muted);
}

/* ---------- Ảnh mặt bằng: bấm để xem lớn ---------- */

.bds-zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	cursor: zoom-in;
	position: relative;
}

.bds-zoom img {
	display: block;
	width: 100%;
}

.bds-zoom__hint {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(26, 11, 43, 0.72);
	color: #fff;
	font-size: 0.72rem;
	letter-spacing: 0.03em;
	opacity: 0;
	transition: opacity 0.2s var(--ease);
	pointer-events: none;
}

.bds-zoom:hover .bds-zoom__hint,
.bds-zoom:focus-visible .bds-zoom__hint {
	opacity: 1;
}

.bds-zoom:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

/* Ngón tay không có trạng thái "rê qua", nên trên cảm ứng hiện sẵn. */
@media (hover: none) {
	.bds-zoom__hint {
		opacity: 1;
	}
}

.bds-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(15, 6, 25, 0.92);
}

.bds-lightbox[hidden] {
	display: none;
}

.bds-lightbox__in {
	margin: 0;
	max-width: min(1200px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bds-lightbox__in img {
	max-width: 100%;
	max-height: calc(100vh - 120px);
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
}

.bds-lightbox__in figcaption {
	color: var(--c-on-dark-2);
	font-size: 0.875rem;
	text-align: center;
}

.bds-lightbox__dong {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.bds-lightbox__dong:hover {
	background: rgba(255, 255, 255, 0.26);
}

.bds-khoa-cuon {
	overflow: hidden;
}

/* ---------- Loại hình sản phẩm trong mục Tổng quan ----------

   Nằm trên nền tím đậm nên mọi màu phải đảo sáng. Dùng lại cơ chế tab
   của mục Loại căn hộ, chỉ thay phần trình bày. */

/* KHÔNG kẻ đường ngang ở đây. Dòng cuối của bảng thông tin ngay trên đã
   có sẵn một đường kẻ; thêm một đường nữa là hai vạch nằm sát nhau,
   trông như lỗi dựng trang.
   Khoảng cách 26px = đúng bằng padding của một dòng trong bảng, để mục
   này nối tiếp bảng chứ không tách ra thành một khối rời. */
.bds-loaihinh {
	margin-top: 26px;
}

/* Cùng cỡ chữ, độ đậm và giãn chữ với nhãn CHỦ ĐẦU TƯ, QUY MÔ, SỐ CĂN…
   trong bảng ngay trên — để dòng này đọc như một dòng nữa của bảng. */
.bds-loaihinh__tieu-de {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.5;
	color: #b98cf0;
	margin: 0 0 18px;
}

.bds-tabs--loaihinh {
	margin-top: 0;
}

/* Nút trên nền tối: viền và chữ sáng. Nút đang chọn đảo ngược thành
   nền sáng chữ tối — trên nền tím đậm thì đó là cách nổi bật nhất. */
/* ⚠ PHẢI khai báo lại nền trong suốt. Nút tab dùng chung có nền sáng
   (var(--c-page)) cho các mục nền trắng; mục này nằm trên nền tím đậm
   nên để nguyên nền sáng là cả dãy nút thành mảng trắng chói. */
.bds-tabs--loaihinh .bds-tabs__btn {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.28);
	color: var(--c-on-dark);
}

.bds-tabs--loaihinh .bds-tabs__btn:hover,
.bds-tabs--loaihinh .bds-tabs__btn:focus,
.bds-tabs--loaihinh .bds-tabs__btn:active {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.bds-tabs--loaihinh .bds-tabs__btn.is-active,
.bds-tabs--loaihinh .bds-tabs__btn.is-active:hover,
.bds-tabs--loaihinh .bds-tabs__btn.is-active:focus {
	background: #fff;
	border-color: #fff;
	color: var(--c-nav);
}

.bds-loaihinh__xem {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(20px, 2.6vw, 40px);
	align-items: center;
	margin-top: 22px;
}

.bds-loaihinh__anh {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	/* Ảnh mặt bằng có nền trắng, đặt thẳng lên nền tím sẽ thành mảng
	   trắng chói. Viền mờ làm mép dịu lại. */
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: #fff;

	/* Khoá khung 4:3 — sáu mặt bằng có tỷ lệ chênh nhau tới 123%
	   (Studio rộng 2,30 còn 3PN gần vuông 1,03). Để khung tự co theo
	   ảnh thì mỗi lần bấm sang loại khác, cả mục nhảy lên nhảy xuống.
	   4:3 nằm giữa khoảng đó nên không loại nào bị thu quá nhỏ. */
	/* Tỷ lệ khung = tỷ lệ của bản vẽ CAO NHẤT trong bộ (3PN: 1500×1457).
	   Nhờ vậy mọi bản vẽ đều vừa khít bề ngang khung mà không bản nào
	   bị tràn ra ngoài. Đặt 4:3 thì hai bản cao nhất (3PN và Penthouse)
	   vẽ ra cao hơn khung và bị cắt mất mép dưới. */
	aspect-ratio: 1500 / 1457;

	/* display: block chứ KHÔNG phải grid + căn giữa.
	   Ô căn giữa trong lưới không bị kéo giãn, nên "height: 100%" của
	   ảnh bên trong không quy đổi được và rơi về chiều cao tự nhiên —
	   đó chính là lý do ảnh tràn khung. Khối thường có chiều cao xác
	   định từ aspect-ratio nên phần trăm quy đổi đúng. */
	display: block;
	padding: 12px;
}

.bds-loaihinh__anh img {
	width: 100%;
	height: 100%;
	/* "contain" chứ KHÔNG phải "cover": mặt bằng mà bị cắt mép là mất
	   phòng, mất kích thước — khách đọc sai bản vẽ. Thà chừa lề trắng. */
	object-fit: contain;
	display: block;
}

/* Tên loại căn là thứ khách tìm mắt tới đầu tiên sau khi bấm nút, nên
   để hẳn cỡ tiêu đề chứ không phải cỡ chữ thường. Thêm một gạch ngắn
   bên dưới để tách tên khỏi khối số liệu ngay phía sau. */
.bds-loaihinh__ten {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.15rem);
	line-height: 1.15;
	color: #fff;
	margin: 0 0 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.bds-loaihinh__so-lieu {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 44px;
	margin: 0;
}

.bds-loaihinh__so-lieu dt {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #b98cf0;
	margin: 0;
}

.bds-loaihinh__so-lieu dd {
	font-family: var(--f-display);
	font-size: 1.55rem;
	line-height: 1.15;
	color: #fff;
	margin: 6px 0 0;
}

/* Loại căn chưa có bản vẽ dùng được thì cho phần chữ chiếm trọn bề
   ngang, thay vì chừa một ô trống bên trái. */
.bds-loaihinh__xem--noimg {
	grid-template-columns: 1fr;
}

@media (max-width: 900px) {
	.bds-loaihinh__xem {
		grid-template-columns: 1fr;
	}
}

/* ---------- Đặc điểm từng loại hình sản phẩm ---------- */

.bds-loaihinh__dac-diem {
	list-style: none;
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bds-loaihinh__dac-diem li {
	position: relative;
	padding-left: 26px;
	font-size: 0.97rem;
	line-height: 1.6;
	color: var(--c-on-dark);
}

/* Dấu tích vẽ bằng CSS, không nhét vào dữ liệu — chủ nhà gõ nội dung
   thuần, không phải tự gõ ký tự ✓. */
.bds-loaihinh__dac-diem li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: #b98cf0;
	font-weight: 700;
}

/* ---------- Mặt bằng tầng: danh sách trái, bản vẽ phải ----------

   Tám nhóm tầng × hai tòa = mười sáu bản vẽ. Xếp dọc hết thì mục này
   dài bằng cả trang nên chia hai cột: chọn bên trái, xem bên phải. */

.bds-tabs--mbt {
	display: grid;
	grid-template-columns: minmax(230px, 27%) minmax(0, 1fr);
	gap: clamp(20px, 2.4vw, 40px);
	align-items: start;
	margin-top: 34px;
}

/* Cột trái xếp dọc, ghi đè kiểu hàng ngang mặc định của .bds-tabs__nav. */
.bds-tabs--mbt .bds-tabs__nav {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;

	/* Dính lại khi cuộn: bản vẽ bên phải cao hơn danh sách, nếu không
	   dính thì cuộn xuống giữa bản vẽ là mất luôn chỗ bấm đổi tầng. */
	position: sticky;
	top: calc(96px + 20px);
}

/* Dùng lại nguyên kiểu nút của mục lục đầu trang: cùng khung lưới
   34px | chữ, cùng cỡ chữ, cùng font số, cùng hiệu ứng. Hai mục này làm
   đúng một việc — chọn ở trái, xem ở phải — nên phải trông như một. */
.bds-mbt__nut {
	appearance: none;
	width: 100%;
	display: grid;
	grid-template-columns: 34px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 15px 18px;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	background: var(--c-page);
	font-family: var(--f-sans);
	text-align: left;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
		transform 0.2s var(--ease);
}

/* Số thứ tự dùng font tiêu đề và cỡ 1,15rem giống mục lục — số nhỏ
   0,72rem trước đó nhìn như ghi chú, không ra một dãy đánh số. */
.bds-mbt__stt {
	font-family: var(--f-display);
	font-size: 1.15rem;
	color: var(--c-accent);
	font-variant-numeric: tabular-nums;
	transition: color 0.2s ease;
}

.bds-mbt__ten {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--c-ink);
	line-height: 1.4;
	transition: color 0.2s ease;
}

.bds-mbt__so-can {
	font-size: 0.75rem;
	color: var(--c-muted);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.bds-mbt__hot {
	grid-column: 2 / -1;
	justify-self: start;
	margin-top: 5px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-cta);
}

/* GeneratePress tô mọi <button>:hover thành xám đậm nền tối. Phải khai
   báo lại CẢ nền lẫn màu chữ, nếu không chữ tím trên nền xám đen gần
   như không đọc được. Nút trượt sang phải 3px giống mục lục. */
.bds-mbt__nut:hover,
.bds-mbt__nut:focus,
.bds-mbt__nut:active {
	background: var(--c-cream-2);
	color: var(--c-ink);
	border-color: var(--c-line-2);
	transform: translateX(3px);
}

.bds-mbt__nut:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* Phản hồi lúc bấm: nút lún xuống rồi bật lại. 90ms vì phản hồi chậm
   hơn khoảng đó là não đã thôi nối nó với cú bấm. */
.bds-mbt__nut:active,
.bds-mbt__nut.is-active:active {
	transform: scale(0.985);
	transition-duration: 90ms;
}

/* Tầng đang chọn phải thắng cả trạng thái rê chuột, nếu không rê vào
   tầng đang mở là nó nhảy từ tím đậm sang kem, nhìn như vừa bị bỏ chọn. */
.bds-mbt__nut.is-active,
.bds-mbt__nut.is-active:hover,
.bds-mbt__nut.is-active:focus {
	background: var(--c-nav);
	border-color: var(--c-nav);
	color: var(--c-on-dark);
	transform: none;
}

.bds-mbt__nut.is-active .bds-mbt__stt {
	color: var(--c-blossom);
}

.bds-mbt__nut.is-active .bds-mbt__ten {
	color: #fff;
}

.bds-mbt__nut.is-active .bds-mbt__so-can {
	color: var(--c-blossom);
}

/* ---------- Cặp nút chọn tòa ---------- */

.bds-mbt__toa {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 16px;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	background: var(--c-cream);
}

.bds-mbt__toa-nut {
	appearance: none;
	border: 0;
	border-radius: 999px;
	background: transparent;
	padding: 9px 20px;
	font-family: var(--f-sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-muted);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.bds-mbt__toa-nut:hover,
.bds-mbt__toa-nut:focus {
	background: transparent;
	color: var(--c-accent);
}

.bds-mbt__toa-nut.is-active,
.bds-mbt__toa-nut.is-active:hover,
.bds-mbt__toa-nut.is-active:focus {
	background: var(--c-nav);
	color: var(--c-on-dark);
}

/* ---------- Bản vẽ ----------

   Mặc định hiện bản vẽ tòa thứ nhất. Lớp is-toa-2 trên khung ngoài đảo
   lại — một lớp duy nhất đổi hết cả tám tầng, không cần chạy vòng lặp
   JavaScript qua từng tầng. */

.bds-mbt__anh {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--c-line);
}

.bds-mbt__anh[data-toa="2"] {
	display: none;
}

.bds-tabs--mbt.is-toa-2 .bds-mbt__anh[data-toa="1"] {
	display: none;
}

.bds-tabs--mbt.is-toa-2 .bds-mbt__anh[data-toa="2"] {
	display: block;
}

.bds-mbt__anh img {
	width: 100%;
	height: auto;
	display: block;
	border: 0;
	border-radius: 0;
}

.bds-mbt__mo-ta {
	margin: 18px 0 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--c-ink);
}

.bds-mbt__xem .bds-btn {
	margin-top: 22px;
}

/* ---------- Màn hình hẹp ---------- */

@media (max-width: 900px) {
	.bds-tabs--mbt {
		grid-template-columns: 1fr;
	}

	/* Hai cột thành một cột: danh sách chọn tầng vẫn xếp DỌC, chỉ bỏ dính
	   — danh sách dính trên đầu màn hình điện thoại chiếm mất chỗ xem. */
	.bds-tabs--mbt .bds-tabs__nav {
		position: static;
		flex-direction: column;
		overflow-x: visible;
		padding-bottom: 0;
	}

	/* Nút rộng hết hàng và giữ nguyên ba cột bên trong (số | tên | số
	   căn): xếp dọc thì thừa chỗ, không cần cắt bớt thông tin nữa. */
	.bds-mbt__nut {
		width: 100%;
		grid-template-columns: 34px 1fr auto;
	}
}

/* ---------- Hồ sơ pháp lý dạng khung cuộn ----------

   Mỗi văn bản là một khung cố định chiều cao, khách cuộn ngay bên trong
   để xem hết các trang. Không mở tab mới, không phải tải file về — bản
   scan giấy tờ là thứ thuyết phục nhất mà lại hay bị giấu sau một cái
   link chẳng ai bấm. */

.bds-hoso {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 26px;
}

.bds-hoso__the {
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 16px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
	display: flex;
	flex-direction: column;
}

.bds-hoso__dau {
	padding: 16px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.bds-hoso__ten {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: #fff;
}

.bds-hoso__ghi-chu {
	display: block;
	margin-top: 4px;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--c-on-dark-2);
}

/* Dòng nhắc "cuộn trong khung" — thiếu nó thì khách tưởng đây chỉ là
   một tấm ảnh và không biết còn trang phía sau. */
.bds-hoso__so-trang {
	display: block;
	margin-top: 8px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #b98cf0;
}

.bds-hoso__cuon {
	height: clamp(360px, 46vh, 560px);
	overflow-y: auto;
	background: #fff;

	/* Cuộn dừng lại ở đầu mỗi trang thay vì dừng lưng chừng giữa hai
	   trang. "proximity" chứ không phải "mandatory": mandatory ép dính
	   cả khi khách chỉ muốn nhích nhẹ để đọc phần giữa trang. */
	scroll-snap-type: y proximity;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.bds-hoso__cuon:focus-visible {
	outline: 2px solid var(--c-blossom);
	outline-offset: -2px;
}

.bds-hoso__cuon img {
	width: 100%;
	height: auto;
	display: block;
	scroll-snap-align: start;
}

.bds-hoso__cuon img + img {
	border-top: 1px solid var(--c-line);
}

/* Chữ trên nền tối — mấy mục này trước đây phải viết style thẳng vào
   thẻ HTML, gom lại đây cho gọn. */
.bds-prose--on-dark {
	color: var(--c-on-dark-2);
	margin-top: 34px;
}

.bds-subheading--on-dark {
	color: var(--c-on-dark);
}

.bds-note--on-dark {
	color: var(--c-on-dark-2);
	margin-top: 16px;
}

/* ---------- Phương thức thanh toán ----------

   Dùng lại khung hai cột của mục Mặt bằng tầng (.bds-tabs--mbt), chỉ
   thay phần nội dung bên phải. */

/* Tên phương thức dùng cam thương hiệu, cùng màu với dòng chữ nhỏ
   phía trên đầu mục — để khách đổi tab là thấy ngay tên mới đổi. */
.bds-tt__ten {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.2rem, 1rem + 0.7vw, 1.45rem);
	line-height: 1.25;
	color: var(--c-cta);
	margin: 0 0 8px;
}

.bds-tt__mo-ta {
	margin: 0 0 18px;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--c-muted);
}

/* Bề ngang dùng chung cho sơ đồ ảnh và bảng các đợt bên dưới.

   Hai thứ này phải thẳng một lề: bảng chữ chính là phần đọc được của
   sơ đồ, thò ra ngoài mép ảnh là trông như hai khối rời nhau. Để một
   biến ở đây thì đổi một chỗ là cả hai đi theo. */
.bds-tt__xem {
	--rong-so-do: 80%;
}

/* Sơ đồ không kéo hết bề ngang khung. Ảnh gốc rất rộng mà chữ in trong
   ảnh thì bé, kéo càng to càng lộ — thu lại 20% và căn giữa để nó nằm
   gọn giữa mục, phần chữ bên dưới mới là chỗ đọc thật. */
.bds-tt__anh {
	width: var(--rong-so-do);
	margin: 0 auto 24px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--c-line);
	background: #fff;
}

/* Điện thoại thì ngược lại: màn hình đã hẹp sẵn, thu thêm là không
   nhìn được gì nữa. */
@media (max-width: 700px) {
	.bds-tt__xem {
		--rong-so-do: 100%;
	}
}

.bds-tt__anh img {
	width: 100%;
	height: auto;
	display: block;
	border: 0;
	border-radius: 0;
}

/* ---- Danh sách các đợt đóng tiền ----

   In ra cả bảng chữ dù đã có sơ đồ ảnh phía trên. Hai lý do: chữ trong
   ảnh sơ đồ nhỏ tới mức trên điện thoại không đọc nổi, và Google không
   đọc được chữ nằm trong ảnh — mà "tiến độ thanh toán" lại là đúng cụm
   từ khách hay tìm. */

/* Dùng FLEX chứ không phải lưới. Lưới luôn dồn hàng cuối về bên trái,
   không có cách nào căn giữa hàng thiếu ô. Flex thì "justify-content:
   center" căn giữa từng hàng, kể cả hàng cuối chưa đầy.

   Số cột do PHP tính rồi truyền vào bằng biến --cot, vì CSS không đếm
   được số ô để tự chọn cách chia cho cân. */
.bds-tt__buoc {
	list-style: none;
	/* Thẳng đúng hai mép sơ đồ ảnh phía trên. */
	width: var(--rong-so-do, 100%);
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 22px;
	--cot: 5;

	/* Số cột THỰC SỰ đem chia. PHP ghi --cot thẳng vào thẻ (style="..."),
	   mà chữ viết thẳng trong thẻ thì luôn thắng file CSS — nên không thể
	   ghi đè --cot cho màn hình hẹp. Chép sang một biến thứ hai để chỗ nào
	   cần thì đổi được. */
	--cot-hien: var(--cot);

	/* Tỷ lệ cỡ chữ của cả khối. Đổi đúng một số này là to/nhỏ toàn bộ,
	   không phải sửa từng dòng. 1 = cỡ gốc, 0.69 = nhỏ hơn khoảng 30%. */
	--tl-chu: 0.69;
}

/* Cỡ chữ gốc đặt ở đây, rồi chữ bên trong tính theo "em" — nhờ vậy bề
   dài gạch xám và khoảng đệm cũng co giãn theo chữ, không phải chỉnh
   riêng từng thứ. */
.bds-tt__buoc li {
	flex: 0 0 calc((100% - (var(--cot-hien) - 1) * 22px) / var(--cot-hien));
	min-width: 0;
	display: block;
	position: relative;
	font-size: calc(1rem * var(--tl-chu));
	padding: 0.85em 0;
}

/* Gạch xám vẽ bằng lớp phụ chứ không phải viền của ô.

   Viền của ô luôn dài đúng bằng cột, mà bề rộng cột thì do số cột chia
   ra — chữ nhỏ đi bao nhiêu gạch vẫn dài y nguyên, nhìn như gạch rời
   khỏi chữ. Lớp phụ đặt bề dài theo "em" nên co giãn cùng chữ, và vẫn
   bị chặn không vượt quá bề ngang cột. Cách này giữ nguyên cách chia
   hàng cho cân (5 + 3, 3 + 3...) vì bản thân ô không đổi kích thước. */
.bds-tt__buoc li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100%, 14em);
	border-top: 1px solid var(--c-line);
}

/* Tỷ lệ nằm TRÊN, mốc thời gian nằm dưới — không đặt cạnh nhau.

   Trước đây cột tỷ lệ khoá cứng 76px cho thẳng hàng, nhưng các giá trị
   dài ngắn rất khác nhau: "5%" chỉ 34px còn "2,5% × 10 đợt" tới 150px.
   Giá trị dài tràn khỏi cột và ĐÈ LÊN phần chữ bên cạnh. Nới cột rộng
   ra cũng không cứu được, vì mỗi dòng là một lưới riêng nên cột sẽ so
   le nhau. Xếp dọc thì dài bao nhiêu cũng không đụng ai. */
.bds-tt__buoc b {
	display: block;
	font-size: 0.875em;
	font-weight: 700;
	line-height: 1.25;
	color: var(--c-accent);
	font-variant-numeric: tabular-nums;
}

.bds-tt__buoc span {
	display: block;
	margin-top: 0.2em;
	font-size: 0.75em;
	line-height: 1.45;
	color: var(--c-muted);
}

/* Màn hình hẹp: năm cột thì mỗi cột chỉ còn hơn 50px, chữ rơi xuống
   từng chữ một. Bớt cột và trả lại cỡ chữ gần như cũ — trên điện thoại
   không có chỗ nào để tiết kiệm bằng cách thu nhỏ chữ. */
@media (max-width: 860px) {
	.bds-tt__buoc {
		--cot-hien: 3;
		--tl-chu: 0.78;
	}
}

@media (max-width: 560px) {
	.bds-tt__buoc {
		--cot-hien: 2;
		--tl-chu: 0.9;
	}
}

/* Ưu đãi: viền trái màu cam thương hiệu — một dòng duy nhất trong mục
   này mang tính "được lợi", nên tách hẳn khỏi các đợt phải đóng tiền. */
.bds-tt__uu-dai {
	margin: 20px 0 0;
	padding: 11px 16px;
	border-left: 3px solid var(--c-cta);
	border-radius: 0 10px 10px 0;
	background: var(--c-cream-2);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--c-ink);
}

/* ---- Nút chọn xếp NGANG phía trên ----

   Khác mục Mặt bằng tầng (cột dọc bên trái). Năm nút tên ngắn xếp vừa
   một dòng, đổi lại phần nội dung phía dưới được trọn bề ngang — sơ đồ
   tiến độ là ảnh rất rộng, chen vào cột hẹp thì chữ trong ảnh bé tí. */

.bds-tabs--tt .bds-tabs__nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	margin: 54px 0 42px;
	padding: 0;
	list-style: none;
	position: static;

	/* "safe center" chứ không phải "center" trơn. Khi dãy nút rộng hơn
	   màn hình (điện thoại, lúc đó dãy chuyển sang cuộn ngang), căn giữa
	   thường sẽ đẩy nút đầu tiên ra ngoài mép trái và KHÔNG cuộn ngược
	   lại lấy được. "safe" tự bỏ căn giữa đúng lúc đó. */
	justify-content: safe center;
}

/* Năm nút chia đều bề ngang, mép trái nút đầu và mép phải nút cuối
   trùng đúng lề của tiêu đề, đoạn mở và sơ đồ phía dưới — cả mục thẳng
   một đường từ trên xuống.

   ⚠ Lệnh chia đều phải đặt lên thẻ <li>, KHÔNG phải lên nút. Trong dãy
   này mỗi nút được bọc trong một <li>, nên phần tử co giãn của khung
   flex là <li> — đặt lên nút thì hoàn toàn vô tác dụng.

   flex-basis 0 (không phải auto) mới chia đều thật: để auto thì ô có
   tên dài như "Tiến độ cơ bản" vẫn rộng hơn ô "Vay 65%". */
.bds-tabs--tt .bds-tabs__nav > li {
	flex: 1 1 0;
	min-width: 0;
}

.bds-tabs--tt .bds-mbt__nut {
	width: 100%;
	grid-template-columns: auto auto;
	justify-content: center;
	gap: 8px;
	padding: 11px 12px;
}

/* Chữ trên nút nhỏ lại theo cả mục. */
.bds-tabs--tt .bds-mbt__stt {
	font-size: 1rem;
}

.bds-tabs--tt .bds-mbt__ten {
	font-size: 0.85rem;
}

/* Nhấc LÊN khi rê chuột, không đẩy ngang — dãy xếp ngang mà đẩy ngang
   thì nút lấn vào nút bên cạnh. */
.bds-tabs--tt .bds-mbt__nut:hover,
.bds-tabs--tt .bds-mbt__nut:focus {
	transform: translateY(-2px);
}

/* Cột nền kem của mục này, nên nút phải đổi sang trắng mới nổi.

   ⚠ BẮT BUỘC có :not(.is-active). Thiếu nó thì quy tắc này (cùng độ ưu
   tiên với .bds-mbt__nut.is-active nhưng nằm sau trong file) sẽ đè mất
   nền tím của nút đang chọn — trong khi chữ vẫn giữ màu trắng, thành ra
   CHỮ TRẮNG TRÊN NỀN TRẮNG, nút đang chọn mất luôn tên. */
.bds-tabs--tt .bds-mbt__nut:not(.is-active) {
	background: var(--c-page);
}

.bds-tabs--tt .bds-mbt__nut:not(.is-active):hover,
.bds-tabs--tt .bds-mbt__nut:not(.is-active):focus {
	background: #fff;
}

/* Màn hình hẹp: dãy nút xếp dọc, mỗi phương thức một hàng. Xếp ngang rồi
   vuốt thì mấy phương thức cuối nằm khuất ngoài mép phải, khách tưởng
   chỉ có hai ba lựa chọn. */
@media (max-width: 700px) {
	.bds-tabs--tt .bds-tabs__nav {
		flex-direction: column;
		flex-wrap: nowrap;
		overflow-x: visible;
		gap: 8px;
		padding-bottom: 0;
	}

	.bds-tabs--tt .bds-tabs__nav > li {
		flex: 0 0 auto;
		width: 100%;
	}

	/* Xếp dọc thì trả về dáng chuẩn của danh sách chọn: số ở cột 34px,
	   tên canh trái. Canh giữa là để cho dãy ngang trên màn hình rộng;
	   giữ canh giữa ở đây thì mỗi hàng một kiểu lệch, đọc lướt rất mệt. */
	.bds-tabs--tt .bds-mbt__nut {
		width: 100%;
		grid-template-columns: 34px 1fr;
		justify-content: start;
		gap: 12px;
		padding: 15px 18px;
	}

	.bds-tabs--tt .bds-mbt__ten {
		font-size: 0.9375rem;
	}
}

/* ---------- Căn giữa toàn bộ mục Phương thức thanh toán ----------

   Đặt một lần ở khung ngoài rồi chỉnh lại vài chỗ không hợp, thay vì
   rải text-align vào từng thành phần. */

.bds-tt__giua {
	text-align: center;
}

/* Đoạn mở và danh sách đều là khối tự co theo nội dung, phải giới hạn
   bề ngang rồi mới căn giữa được — chữ căn giữa mà dòng dài hết khung
   thì mắt phải nhảy quá xa để bắt đầu dòng mới. */
/* Nới khoảng cách giữa tiêu đề — đoạn mở — dãy nút. Ba khối này đều căn
   giữa nên không còn mép trái chung để mắt phân biệt đâu là khối mới;
   lúc đó khoảng trắng là thứ duy nhất tách chúng ra. */
.bds-tt__giua .bds-prose {
	max-width: 760px;
	margin-inline: auto;
	margin-top: 32px;

	/* Nhỏ hơn đoạn mở của các mục khác (1,0625rem). Đây là đoạn ghi chú
	   về mốc thời gian, không phải lời giới thiệu — để cỡ ngang nhau thì
	   nó tranh chỗ với dãy nút ngay bên dưới. */
	font-size: 0.95rem;
	line-height: 1.7;
}

.bds-tt__giua .bds-tt__mo-ta {
	max-width: 660px;
	margin-inline: auto;
	margin-bottom: 20px;
}

/* Danh sách các đợt giữ kiểu kẻ ngang như cũ — không dùng thẻ nền
   trắng. Chỉ căn giữa chữ bên trong. */

/* Ô ưu đãi có thanh màu bên trái. Nếu để nó rộng hết khung thì thanh
   màu nằm tít ngoài lề trái, rời hẳn khỏi dòng chữ đang ở giữa. Cho ô
   co vừa chữ rồi căn giữa cả ô. */
.bds-tt__giua .bds-tt__uu-dai {
	display: inline-block;
	text-align: left;
}

.bds-tt__giua .bds-portfolio li {
	text-align: center;
}

/* Bảng và danh sách trả về căn TRÁI dù cả mục đang căn giữa. Bảng hai
   ba cột mà căn giữa thì các ô không còn mép chung nào để mắt bám vào,
   đọc ngang một dòng là lạc. */
.bds-tt__giua .bds-tt__bang th,
.bds-tt__giua .bds-tt__bang td,
.bds-tt__giua .bds-tt__hoi {
	text-align: left;
}

/* ---- Bảng so sánh + bảng giải thưởng ----
   Hẹp hơn khung chung và căn giữa, để không kéo dài hơn sơ đồ ảnh
   phía trên. */
.bds-tt__bang {
	max-width: 760px;
	margin-inline: auto;
}

.bds-tt__giua .bds-infotable__scroll {
	max-width: 760px;
	margin-inline: auto;
}

/* Hàng tiêu đề in đậm. Quy tắc gốc .bds-infotable th đặt font-weight
   400 cho MỌI ô tiêu đề, nên hàng đầu bảng mảnh y như chữ thường —
   phải ghi đè, nếu không bảng không có đường phân cấp nào cả. */
.bds-tt__bang thead th {
	font-weight: 700;
	color: var(--c-ink);
}

/* Cột trái là tên phương án — đậm vừa, vì đây là thứ khách dò theo.
   Cột phải là diễn giải, để chữ thường và màu nhạt hơn cho đúng vai
   trò thông tin phụ. */
.bds-tt__bang th[scope="row"] {
	width: 32%;
	color: var(--c-ink);
	font-weight: 600;
}

.bds-tt__bang tbody td {
	font-weight: 400;
	color: var(--c-muted);
}

/* Ảnh cơ cấu giải thưởng — cùng bề ngang với các bảng trong mục, để
   ba khối nối tiếp nhau không bị so le mép. */
.bds-tt__giai-anh {
	max-width: 760px;
	margin: 22px auto 0;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--c-line);
	background: var(--c-page);
}

.bds-tt__giai-anh img {
	width: 100%;
	height: auto;
	display: block;
	border: 0;
	border-radius: 0;
}

.bds-tt__goi-y {
	max-width: 640px;
	margin: 18px auto 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--c-muted);
}

/* ---- Thẻ chương trình bán hàng ----

   Con số là thứ khách nhớ được sau khi rời trang, nên nó to nhất thẻ
   và dùng font tiêu đề. Phần chữ quanh nó chỉ để giải thích con số. */
.bds-tt__ct {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 760px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.bds-tt__ct li {
	padding: 24px 22px;
	border: 1px solid var(--c-line);
	border-radius: 14px;
	background: var(--c-page);
	text-align: center;
}

.bds-tt__ct-nhan {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-cta);
}

.bds-tt__ct-so {
	display: block;
	margin-top: 10px;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem);
	line-height: 1.1;
	color: var(--c-accent);
	font-variant-numeric: tabular-nums;
}

.bds-tt__ct-ten {
	display: block;
	margin-top: 4px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--c-ink);
}

.bds-tt__ct-mo-ta {
	display: block;
	margin-top: 10px;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--c-muted);
}

/* ---- Cần hỏi gì trước khi xuống tiền ----

   Hai cột trên màn rộng: bảy dòng xếp một cột thành một vệt dài, đọc
   như điều khoản hợp đồng — đúng thứ khách bỏ qua. */
.bds-tt__hoi {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 760px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 10px 28px;
}

.bds-tt__hoi li {
	position: relative;
	padding-left: 26px;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--c-muted);
}

.bds-tt__hoi li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-cta);
}

/* Ô nhập "Phù hợp với" chỉ còn hiện trong bảng so sánh, không in trong
   từng tab nữa — nên ở đây không còn quy tắc riêng cho nó. */

/* ---------- Tiêu đề mục tô bằng dải màu chuyển ----------

   Chữ đi từ tím đậm bên trái sang tím sáng bên phải. Làm bằng cách vẽ
   dải màu làm nền rồi cắt nền theo đúng hình chữ (background-clip).

   BA điều kiện an toàn phải có, không phải cho đẹp:

   1. Bọc trong @supports. Cách này cần đặt màu chữ thành trong suốt;
      trình duyệt nào không cắt được nền theo chữ thì chữ trong suốt đó
      nằm trên nền trắng — MẤT TRẮNG cả dòng tiêu đề.

   2. Chỉ áp cho mục nền SÁNG. Ba mục nền tối (Tổng quan, Chủ đầu tư,
      Liên hệ) có tiêu đề màu trắng; tô tím lên nền tím đậm là không đọc
      được gì.

   3. Trả về màu phẳng ở chế độ tương phản cao của hệ điều hành. Chế độ
      đó bỏ qua ảnh nền, nên nếu vẫn để chữ trong suốt thì người dùng
      cần tương phản cao lại là người không thấy gì. */

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.bds-section:not(.bds-section--nav):not(.bds-section--dark):not(.bds-contact) .bds-heading {
		background-image: linear-gradient(95deg, #4a1a6e 0%, #7a35a8 48%, #a563d6 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;

		/* Nền bó sát hộp chữ, thiếu dòng này thì nét bụng của g, y, ạ bị
		   cắt cụt mất màu. */
		padding-bottom: 0.06em;
	}
}

@media (forced-colors: active) {
	.bds-heading {
		background-image: none;
		color: CanvasText;
		-webkit-text-fill-color: CanvasText;
	}
}

/* ============================================================
   GIỮ NGUYÊN MÀU NÚT SAU KHI BẤM

   GeneratePress chèn thẳng vào đầu trang hai quy tắc:

       a:hover, a:focus, a:active { color: var(--contrast) }
       button:focus, a.button:focus { color:#fff; background:#3f4047 }

   Cách viết "a:focus" có độ ưu tiên CAO HƠN một tên lớp như
   .bds-btn--ink, nên nó thắng. Hậu quả: bấm xong nút vẫn giữ trạng
   thái focus, chữ trắng bị đổi sang màu tối và gần như biến mất trên
   nền tím — đúng cái lỗi khách nhìn thấy.

   Trên máy tính khó phát hiện vì bấm xong chuột rời đi ngay. Trên điện
   thoại thì focus bám lại cho tới khi chạm chỗ khác, nên lỗi hiện rõ.

   Khai lại màu cho ba trạng thái :focus, :active, :visited của từng nút.
   KHÔNG đụng tới :hover — hiệu ứng rê chuột là cố ý, giữ nguyên.
   ============================================================ */

.bds-btn--primary:focus,
.bds-btn--primary:active,
.bds-btn--primary:visited,
.bds-btn--ink:focus,
.bds-btn--ink:active,
.bds-btn--ink:visited {
	color: #fff;
}

.bds-btn--outline:focus,
.bds-btn--outline:active,
.bds-btn--outline:visited {
	color: var(--c-ink);
}

.bds-section--dark .bds-btn--outline:focus,
.bds-section--dark .bds-btn--outline:active,
.bds-section--dark .bds-btn--outline:visited {
	color: var(--c-on-dark);
}

.bds-btn--on-dark:focus,
.bds-btn--on-dark:active,
.bds-btn--on-dark:visited {
	color: #fff;
}

/* Thanh điều hướng trên cùng. */
.bds-navbar__cta:focus,
.bds-navbar__cta:active,
.bds-navbar__cta:visited {
	background: #a855c8;
	color: #fff;
}

.bds-navbar__links a:focus,
.bds-navbar__links a:active,
.bds-navbar__links a:visited {
	color: #fff;
}

/* Mục đang xem vẫn phải nổi màu cam kể cả khi đang focus. */
.bds-navbar__links a.is-active:focus,
.bds-navbar__links a.is-active:active,
.bds-navbar__links a.is-active:visited {
	color: var(--c-cta);
}

/* Nút mũi tên hai bên băng ảnh — là thẻ <button> thật nên dính quy tắc
   nền xám #3f4047 của theme cha, bấm một cái là nút trắng hóa xám. */
.bds-slider__nut:focus,
.bds-slider__nut:active {
	background: rgba(255, 255, 255, 0.92);
	border-color: var(--c-line);
	color: var(--c-ink);
}

/* Bàn phím vẫn cần thấy rõ đang đứng ở nút nào — giữ nguyên kiểu đảo màu
   cho riêng :focus-visible (chỉ xuất hiện khi dùng phím Tab, không xuất
   hiện khi bấm chuột hay chạm tay). */
.bds-slider__nut:focus-visible {
	background: var(--c-nav);
	border-color: var(--c-nav);
	color: #fff;
}

/* Nút nổi góc phải trên máy tính. */
.bds-float a:focus,
.bds-float a:active,
.bds-float a:visited {
	color: #fff;
}

/* Thanh nút dưới đáy màn hình điện thoại. */
.bds-mobilebar a:focus,
.bds-mobilebar a:active,
.bds-mobilebar a:visited {
	color: var(--c-ink);
}

.bds-mobilebar a.bds-mobilebar__chinh:focus,
.bds-mobilebar a.bds-mobilebar__chinh:active,
.bds-mobilebar a.bds-mobilebar__chinh:visited {
	background: var(--c-cta);
	color: #fff;
}

/* Liên kết Zalo trong khối đăng ký giữa trang. */
.bds-miniform__zalo:focus,
.bds-miniform__zalo:active,
.bds-miniform__zalo:visited {
	color: var(--c-blossom);
}

/* Liên kết "Đọc tiếp" trong thẻ dự án. */
.bds-card__more:focus,
.bds-card__more:active,
.bds-card__more:visited {
	color: var(--c-ink);
}

/* ---------- Nút tròn về mục lục ----------

   Trong suốt thật: nền chỉ là một lớp tím rất mờ cộng với làm mờ phần
   ảnh nằm dưới. Nhờ vậy nút đọc được trên CẢ nền kem sáng lẫn nền tím
   đậm — nút trắng suông sẽ tàng hình khi trôi qua các mục nền sáng.

   Đặt bên phải, nằm TRÊN hai nút gọi/Zalo trên máy tính và trên thanh
   nút dưới đáy màn hình điện thoại, để không chồng lên nhau. */

.bds-len-dau {
	position: fixed;
	right: 20px;
	bottom: 148px;
	z-index: 260;

	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;

	background: rgba(43, 18, 64, 0.38);
	backdrop-filter: blur(6px) saturate(130%);
	-webkit-backdrop-filter: blur(6px) saturate(130%);
	border: 1px solid rgba(255, 255, 255, 0.45);
	box-shadow: 0 4px 16px rgba(26, 11, 43, 0.18);
	color: #fff;
	text-decoration: none;
	transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.bds-len-dau svg {
	width: 22px;
	height: 22px;
	display: block;
}

.bds-len-dau:hover {
	background: rgba(43, 18, 64, 0.62);
	transform: translateY(-2px);
}

/* Giữ nguyên màu sau khi bấm — xem phần cuối tệp về quy tắc a:focus
   của theme cha. */
.bds-len-dau:focus,
.bds-len-dau:active,
.bds-len-dau:visited {
	color: #fff;
}

@media (max-width: 768px) {
	/* Điện thoại: hai nút gọi/Zalo đã ẩn, chỉ còn thanh nút dưới đáy
	   cao khoảng 53px — nhấc nút lên vừa đủ để không đè lên. */
	.bds-len-dau {
		right: 14px;
		bottom: 70px;
		width: 44px;
		height: 44px;
	}

	.bds-len-dau svg {
		width: 20px;
		height: 20px;
	}
}