/**
 * Giao diện Bất động sản — bám theo design/product_detail.png.
 *
 * Mọi thứ nằm trong .ttc-bds để không đụng phần còn lại của Flatsome.
 */

/* Cam nhấn lấy từ logo (#F98E30), hai nấc theo nền.
 *
 * Khác trang chủ và trang Giới thiệu: thân trang BĐS gần như toàn nền trắng
 * và kem (hero, thẻ, cột điều hướng, bảng thanh toán), khối navy chỉ là vài
 * đảo nhỏ. Nên ở đây **nấc nung là mặc định** — nấc sáng #f0a45e trên nền
 * trắng chỉ đạt 2.1:1, icon và nhãn nhìn như bị bạc màu. Các khối navy bật
 * ngược lại nấc sáng ở khối ngay bên dưới. */

.ttc-bds {
	--bds-navy: #0e2c4b;
	--bds-navy-soft: #14395e;
	--bds-gold-lit: #f0a45e;
	--bds-gold-dark: #a85b0e;
	--bds-gold: var(--bds-gold-dark);
	/* Màu chữ đặt trên mảng cam đặc, lật theo nấc. */
	--bds-gold-fg: #fff;
	/* Cam CTA — đúng màu logo, chỉ dành cho nút hành động chính. */
	--bds-orange: #f98e30;
	--bds-orange-dark: #d9720f;
	--bds-cream: #faf7f2;
	--bds-line: #e6e0d6;
	--bds-text: #333a42;
	--bds-muted: #7b8794;
}

/* Hai khối nền navy — nấc sáng mới đọc được ở đây. */
.bds-contact,
.bds-cta {
	--bds-gold: var(--bds-gold-lit);
	--bds-gold-fg: var(--bds-navy);
}

.ttc-bds .bds-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.bds-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

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

.bds-hero {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	background: #fff;
}

.bds-hero__text {
	padding: 40px 48px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bds-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bds-muted);
	margin-bottom: 28px;
}

.bds-back:hover { color: var(--bds-navy); }
.bds-back .bds-icon { width: 16px; height: 16px; flex-basis: 16px; transform: rotate(180deg); }

.bds-eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bds-gold);
	margin-bottom: 10px;
}

.bds-eyebrow .bds-icon { width: 15px; height: 15px; flex-basis: 15px; }

.bds-hero__title {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.18;
	color: var(--bds-navy);
	margin: 0 0 16px;
	font-weight: 400;
}

.bds-hero__lead {
	color: var(--bds-muted);
	font-size: 15px;
	line-height: 1.65;
	margin: 0 0 24px;
	max-width: 420px;
}

.bds-price {
	font-size: 32px;
	color: var(--bds-navy);
	margin-bottom: 24px;
	font-weight: 600;
}

/*
 * Số điện thoại thay chỗ của giá ở những tin đối tác không công bố giá. Tô nấc
 * cam theo nền để nó đọc ra là chỗ bấm được, không phải phần đuôi của chữ.
 */
.bds-price-phone {
	color: var(--bds-gold);
	text-decoration: none;
	white-space: nowrap;
}

.bds-price-phone:hover,
.bds-price-phone:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.bds-price small {
	font-family: inherit;
	font-size: 14px;
	color: var(--bds-muted);
	font-weight: 400;
	margin-left: 6px;
}

/*
 * Giá hiện ra trang là VNĐ, nên .bds-price__vnd cứ thừa hưởng cỡ chữ của khối
 * giá — không đặt lại gì ở đây.
 *
 * Dòng ghi nguồn tỷ giá thì phải nhỏ và mờ: nó là chú thích cho con số bên
 * trên, tô đậm lên là tranh chỗ của chính cái giá.
 */
.bds-price__rate {
	margin-top: 6px;
	color: var(--bds-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}

.bds-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-bottom: 28px;
}

.bds-spec { display: flex; gap: 10px; align-items: flex-start; }
.bds-spec .bds-icon { color: var(--bds-gold); margin-top: 2px; }
.bds-spec__value { font-weight: 600; color: var(--bds-navy); font-size: 16px; line-height: 1.2; }
.bds-spec__label { font-size: 12px; color: var(--bds-muted); }

.bds-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }

.bds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 24px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	border: 1px solid transparent;
	border-radius: 2px;
	transition: background-color .2s, color .2s, border-color .2s;
	line-height: 1;
}

/* Nút hành động chính (tên class giữ nguyên vì template đang dùng). */
.bds-btn--gold { background: var(--bds-orange); color: #fff; }
.bds-btn--gold:hover { background: var(--bds-orange-dark); color: #fff; }
.bds-btn--ghost { background: transparent; border-color: var(--bds-line); color: var(--bds-navy); }
.bds-btn--ghost:hover { border-color: var(--bds-navy); color: var(--bds-navy); }
.bds-btn--light { background: #fff; color: var(--bds-navy); }
.bds-btn--light:hover { background: var(--bds-cream); color: var(--bds-navy); }
.bds-btn--dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); color: #fff; }
.bds-btn--dark:hover { background: rgba(255,255,255,.16); color: #fff; }
.bds-btn .bds-icon { width: 16px; height: 16px; flex-basis: 16px; }

.bds-pr-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: var(--bds-text);
}

.bds-pr-badge .bds-icon { color: var(--bds-gold); }

.bds-hero__media { position: relative; min-height: 420px; background: var(--bds-cream); }
.bds-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bds-gallery-badge {
	position: absolute;
	right: 20px;
	bottom: 20px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: rgba(14, 44, 75, .82);
	color: #fff;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: 2px;
}

.bds-gallery-badge span { opacity: .7; }
.bds-gallery-badge:hover { background: rgba(14, 44, 75, .95); color: #fff; }

/* Lớp phủ trong suốt trên ảnh hero, bấm vào là mở lightbox. */
.bds-hero__zoom { position: absolute; inset: 0; display: block; cursor: zoom-in; z-index: 1; }
.bds-gallery-badge { z-index: 2; }

/* Lớp phủ trùm nguyên ảnh hero nên vòng focus mặc định thành khung đỏ to
   quanh nửa màn hình — hay gặp vì đóng lightbox bằng Esc là focus quay về đây. */
.bds-hero__zoom:focus,
.bds-hero__zoom:focus-visible { outline: none; }

/* Bỏ khung rồi vẫn phải thấy đang đứng ở đâu khi đi bàn phím: sáng nút
   "Xem thư viện" ngay kế bên (badge đứng sau lớp phủ trong DOM). */
.bds-hero__zoom:focus-visible ~ .bds-gallery-badge {
	background: var(--bds-gold);
	color: var(--bds-gold-fg);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
}

/* ----------------------------------------------------------------- USP */

.bds-usps { border-top: 1px solid var(--bds-line); border-bottom: 1px solid var(--bds-line); background: #fff; }

.bds-usps__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	padding: 26px 0;
}

.bds-usp { display: flex; gap: 14px; align-items: flex-start; }
.bds-usp .bds-icon { width: 26px; height: 26px; flex-basis: 26px; color: var(--bds-gold); }
.bds-usp__title { font-weight: 600; color: var(--bds-navy); font-size: 14px; margin-bottom: 3px; }
.bds-usp__text { font-size: 12.5px; color: var(--bds-muted); line-height: 1.45; }

/* ------------------------------------------------------------ Bố cục chính */

.bds-body { background: var(--bds-cream); padding: 46px 0 10px; }

.bds-layout {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) 280px;
	gap: 34px;
	align-items: start;
}

.bds-nav { position: sticky; top: 90px; background: #fff; border: 1px solid var(--bds-line); }
.bds-nav a {
	display: block;
	padding: 14px 18px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bds-muted);
	border-left: 3px solid transparent;
}
.bds-nav a:hover { color: var(--bds-navy); background: var(--bds-cream); }
.bds-nav a.is-active { color: var(--bds-navy); background: var(--bds-cream); border-left-color: var(--bds-gold); font-weight: 600; }

.bds-section { scroll-margin-top: 100px; margin-bottom: 44px; }
.bds-section__title {
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bds-navy);
	font-weight: 700;
	margin-bottom: 18px;
}

.bds-prose { color: var(--bds-text); line-height: 1.75; font-size: 15px; }
.bds-prose p { margin-bottom: 14px; }

.bds-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 26px; }
.bds-columns h4 {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bds-gold);
	margin-bottom: 12px;
	font-weight: 700;
}
.bds-list { list-style: none; margin: 0; padding: 0; }
.bds-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--bds-text); margin-bottom: 9px; line-height: 1.5; }
.bds-list .bds-icon { width: 15px; height: 15px; flex-basis: 15px; color: var(--bds-gold); margin-top: 4px; }

/* --------------------------------------------------------------- Sidebar */

.bds-card { background: #fff; border: 1px solid var(--bds-line); padding: 22px; margin-bottom: 20px; }
.bds-card__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bds-gold); margin-bottom: 14px; }
.bds-card__name { font-size: 22px; color: var(--bds-navy); text-align: center; margin-bottom: 18px; letter-spacing: .04em; }
.bds-card__stats { list-style: none; margin: 0 0 18px; padding: 0; }
.bds-card__stats li { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--bds-text); margin-bottom: 11px; }
.bds-card__stats .bds-icon { color: var(--bds-gold); width: 18px; height: 18px; flex-basis: 18px; }

.bds-contact { background: var(--bds-navy); color: #fff; padding: 24px; }
.bds-contact__title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.bds-contact__text { font-size: 13px; color: rgba(255,255,255,.72); margin-bottom: 18px; }
.bds-contact__row { display: flex; gap: 11px; align-items: center; font-size: 14px; margin-bottom: 11px; color: #fff; }
.bds-contact__row a { color: #fff; }
.bds-contact__row a:hover { color: var(--bds-gold); }
.bds-contact__row .bds-icon { color: var(--bds-gold); width: 17px; height: 17px; flex-basis: 17px; }
.bds-contact .bds-btn { width: 100%; margin-top: 8px; }

/* --------------------------------------------------------------- Gallery */

.bds-strip { position: relative; margin: 8px 0 44px; }
.bds-strip__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(33.333% - 8px);
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.bds-strip__track::-webkit-scrollbar { display: none; }
.bds-strip__track a { scroll-snap-align: start; display: block; aspect-ratio: 4 / 3; cursor: zoom-in; overflow: hidden; }
.bds-strip__track img { transition: transform .35s ease; }
.bds-strip__track a:hover img { transform: scale(1.04); }

/* Đi bàn phím thì phải thấy đang đứng ở ảnh nào — vòng mặc định của trình duyệt
   lạc màu so với phần còn lại của trang. */
.bds-strip__track a:focus-visible { outline: 2px solid var(--bds-gold, #a85b0e); outline-offset: 2px; }

/* Dập vòng tiêu điểm đúng một lần khi trả tiêu điểm về ảnh sau khi đóng lightbox
   bằng Esc, và chỉ khi lightbox được mở bằng chuột — xem focusQuietly() trong
   bat-dong-san.js. Class tự gỡ khi tiêu điểm rời đi.

   Hai selector sau phải kèm .bds-strip__track a để thắng rule ring ngay trên:
   .bds-focus-quiet:focus-visible chỉ có độ ưu tiên (0,2,0), thua (0,2,1) của
   rule kia nên class gắn vào mà outline vẫn vẽ. */
.bds-focus-quiet:focus,
.bds-focus-quiet:focus-visible,
.bds-strip__track a.bds-focus-quiet:focus,
.bds-strip__track a.bds-focus-quiet:focus-visible { outline: none; }
.bds-strip__track img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bds-strip__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--bds-line);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--bds-navy);
	z-index: 2;
}
.bds-strip__nav--prev { left: -16px; }
.bds-strip__nav--next { right: -16px; }
.bds-strip__nav--prev .bds-icon { transform: rotate(180deg); }

/* --------------------------------------------------------- Thông số chi tiết */

.bds-details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 0;
	background: #fff;
	border: 1px solid var(--bds-line);
	margin-bottom: 40px;
}

.bds-details__body { padding: 28px 30px; }
.bds-details__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 20px; }
.bds-detail { display: flex; gap: 10px; align-items: flex-start; }
.bds-detail .bds-icon { color: var(--bds-gold); margin-top: 2px; width: 18px; height: 18px; flex-basis: 18px; }
.bds-detail__label { font-size: 11.5px; color: var(--bds-muted); margin-bottom: 2px; }
.bds-detail__value { font-size: 14px; color: var(--bds-navy); font-weight: 500; line-height: 1.35; }

.bds-map { min-height: 260px; background: var(--bds-cream); }
.bds-map iframe { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; }
.bds-map__fallback { display: flex; height: 100%; min-height: 260px; align-items: center; justify-content: center; color: var(--bds-muted); font-size: 13px; }

/* ----------------------------------------------------------------- Nearby */

.bds-nearby { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-bottom: 46px; }
.bds-nearby__item { display: flex; gap: 10px; align-items: flex-start; }
.bds-nearby__item .bds-icon { color: var(--bds-gold); margin-top: 2px; }
.bds-nearby__label { font-size: 13px; color: var(--bds-navy); font-weight: 500; line-height: 1.3; }
.bds-nearby__value { font-size: 12px; color: var(--bds-muted); }

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

.bds-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.bds-plans figure { margin: 0; background: #fff; border: 1px solid var(--bds-line); padding: 12px; }
.bds-plans a { display: block; cursor: zoom-in; }
.bds-plans img { width: 100%; height: auto; display: block; }
.bds-plans figcaption { font-size: 12.5px; color: var(--bds-muted); margin-top: 8px; text-align: center; }

.bds-payment { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bds-line); }
.bds-payment th, .bds-payment td { padding: 11px 16px; border-bottom: 1px solid var(--bds-line); font-size: 14px; text-align: left; }
.bds-payment th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bds-muted); font-weight: 600; }
.bds-payment tr:last-child td { border-bottom: 0; }

.bds-docs { list-style: none; margin: 0; padding: 0; }
.bds-docs li { margin-bottom: 10px; }
.bds-docs a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--bds-navy); }
.bds-docs a:hover { color: var(--bds-gold-dark); }
.bds-docs .bds-icon { color: var(--bds-gold); }

/* -------------------------------------------------------------------- CTA */

.bds-cta { position: relative; background: var(--bds-navy); color: #fff; text-align: center; padding: 62px 20px; background-size: cover; background-position: center; }
.bds-cta::before { content: ""; position: absolute; inset: 0; background: rgba(14, 44, 75, .82); }
.bds-cta > * { position: relative; }
.bds-cta h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 400; margin: 0 0 10px; color: #fff; }
.bds-cta p { color: rgba(255,255,255,.8); margin: 0 0 26px; font-size: 15px; }
.bds-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Khối archive cũ đã chuyển sang assets/bds-listing.css (thiết kế mới,
   token màu theo brand guideline). File này giờ chỉ phục vụ trang chi tiết. */

/* -------------------------------------------------------------- Lightbox */

html.bds-lb-lock { overflow: hidden; }

.bds-lb {
	/* Lớp phủ tối, dù thẻ nằm trong .ttc-bds nền sáng — giữ nấc cam sáng. */
	--bds-gold: var(--bds-gold-lit);
	--bds-gold-fg: var(--bds-navy);

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	grid-template-columns: 64px minmax(0, 1fr) 64px;
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: center;
	background: rgba(10, 22, 38, .97);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .18s ease;
}
.bds-lb.is-open { display: grid; opacity: 1; }

.bds-lb__stage {
	position: relative;
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 64px 8px;
	height: 100%;
	min-height: 0;
	cursor: zoom-out;
}

.bds-lb__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	cursor: default;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
	opacity: 1;
	transition: opacity .18s ease;
}
.bds-lb.is-loading .bds-lb__img { opacity: 0; }

/* Vòng xoay chờ tải ảnh. */
.bds-lb.is-loading .bds-lb__stage::after {
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
	border: 2px solid rgba(255, 255, 255, .25);
	border-top-color: var(--bds-gold, #f0a45e);
	border-radius: 50%;
	animation: bds-lb-spin .7s linear infinite;
}

@keyframes bds-lb-spin { to { transform: rotate(360deg); } }

.bds-lb__nav,
.bds-lb__close {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Nền tối để nút vẫn đọc được khi đè lên ảnh sáng (hay gặp trên mobile). */
	background: rgba(10, 22, 38, .55);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
	cursor: pointer;
	padding: 0;
	border-radius: 50%;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.bds-lb__nav:hover,
.bds-lb__close:hover {
	background: var(--bds-gold, #f0a45e);
	border-color: var(--bds-gold, #f0a45e);
	color: var(--bds-gold-fg, #0e2c4b);
}
.bds-lb__nav:focus-visible,
.bds-lb__close:focus-visible { outline: 2px solid var(--bds-gold, #f0a45e); outline-offset: 3px; }

.bds-lb__nav { grid-row: 1; width: 46px; height: 46px; justify-self: center; }
.bds-lb__nav svg { width: 22px; height: 22px; }
.bds-lb__nav--prev { grid-column: 1; }
.bds-lb__nav--next { grid-column: 3; }
.bds-lb__nav[hidden] { display: none; }

.bds-lb__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 42px;
	height: 42px;
}
.bds-lb__close svg { width: 20px; height: 20px; }

.bds-lb__bar {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 14px 64px 22px;
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	pointer-events: none;
}
.bds-lb__caption { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bds-lb__count {
	color: var(--bds-gold, #f0a45e);
	letter-spacing: .12em;
	font-size: 12px;
	white-space: nowrap;
}
.bds-lb__count[hidden] { display: none; }

@media (max-width: 860px) {
	.bds-lb { grid-template-columns: minmax(0, 1fr); }
	.bds-lb__stage { padding: 60px 12px 4px; }
	/* Rời khỏi lưới, neo theo mép overlay — grid-row/column phải là auto thì
	   containing block mới là cả overlay chứ không phải một ô lưới. */
	.bds-lb__nav { position: absolute; grid-row: auto; grid-column: auto; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; }
	.bds-lb__nav--prev { left: 8px; }
	.bds-lb__nav--next { right: 8px; left: auto; }
	.bds-lb__bar { padding: 10px 16px 18px; flex-direction: column; gap: 4px; }
	.bds-lb__caption { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.bds-lb,
	.bds-lb__img,
	.bds-strip__track img { transition: none; }
}

/* ------------------------------------------------------------- Ghi chú nội bộ */

.bds-note { border: 1px solid #f0d9a8; background: #fff8e5; padding: 16px 18px; margin: 26px 0; border-radius: 4px; }
.bds-note h4 { color: #b45309; margin: 0 0 8px; font-size: 14px; }

/* ------------------------------------------------------------------ Mobile */

/* ---------------------------------------------------------------- Các căn
   Bảng so nhanh các căn cùng dự án. Đối tác nào cũng có trang kiểu này, và
   khách hay hỏi "còn căn nào tầng thấp hơn không" ngay khi đang xem một căn. */

.bds-units__lead { color: var(--bds-muted); margin: 0 0 14px; font-size: 14px; }

.bds-units {
	border: 1px solid var(--bds-line);
	overflow: auto;
	/* Kéo bằng chuột — xem initUnits() trong bat-dong-san.js. */
	cursor: grab;
	overscroll-behavior: contain;
}

.bds-units.is-dragging { cursor: grabbing; user-select: none; }
.bds-units.is-dragging a { pointer-events: none; }

/* Trên 12 dòng thì cuộn dọc trong khung, khỏi đẩy phần dưới trang đi quá xa.
   Dự án lớn nhất có 60 căn. */
.bds-units.is-scroll { max-height: 480px; }

.bds-units__table {
	/*
	 * style.css của child đặt `table { display: block; overflow-x: auto }` cho
	 * mọi bảng. Để nguyên thì hộp bảng rộng đúng khung nhưng các hàng chỉ co
	 * theo nội dung — nền hàng và đường kẻ hụt mất một khúc bên phải.
	 */
	display: table;
	width: 100%;
	/* Cột cố định: nhãn dài của Leptos ("Căn hộ 201 Cavalli Tower") mà để auto
	   thì nó đẩy cột Giá ra khỏi khung. */
	table-layout: fixed;
	min-width: 340px;
	border-collapse: collapse;
	font-size: 14px;
	margin: 0;
	overflow: visible;
}

.bds-units__col--unit   { width: 36%; }
.bds-units__col--size   { width: 22%; }
.bds-units__col--status { width: 20%; }
.bds-units__col--price  { width: 22%; }

.bds-units__table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--bds-cream);
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--bds-muted);
	padding: 9px 14px;
	border-bottom: 1px solid var(--bds-line);
	white-space: nowrap;
}

.bds-units__table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--bds-line);
	color: var(--bds-text);
	vertical-align: middle;
	white-space: nowrap;
}

/*
 * Flatsome đặt `td:first-child { padding-left: 0 }` và `td:last-child {
 * padding-right: 0 }` để bảng nội dung ăn sát mép. Hai rule đó cùng độ ưu tiên
 * (0,1,1) với `.bds-units__table td` của mình, mà flatsome.css nạp sau nên nó
 * thắng — chữ cột Căn dính sát viền trái, chữ cột Giá dính sát viền phải. Bảng
 * này có viền bao quanh nên cần đệm thật; thêm class vào selector cho đủ (0,2,1).
 */
.bds-units__table th:first-child,
.bds-units__table td:first-child { padding-left: 14px; }

.bds-units__table th:last-child,
.bds-units__table td:last-child { padding-right: 14px; }

.bds-units__table tr:last-child td { border-bottom: 0; }
.bds-units__table tbody tr:hover td { background: var(--bds-cream); }

/* Chữ số đều bề ngang để giá xếp thẳng hàng dọc khi so giữa các căn. Căn lề
   trái như mọi cột khác. */
.bds-units__num { font-variant-numeric: tabular-nums; }

/* Phải kèm `td` mới đủ độ ưu tiên: `.bds-units__table td` ở trên đặt nowrap với
   độ ưu tiên (0,2,1), còn `.bds-units__unit` chỉ có (0,1,0) nên thua — nhãn dài
   không xuống dòng mà tràn đè sang cột Quy mô. */
.bds-units__table td.bds-units__unit {
	white-space: normal;
	hyphens: manual;
	overflow-wrap: break-word;
	line-height: 1.35;
}

.bds-units__unit a,
.bds-units__unit span { color: var(--bds-navy); font-weight: 600; text-decoration: none; }
.bds-units__unit a:hover { color: var(--bds-gold); }

.bds-units__size { color: var(--bds-muted); font-variant-numeric: tabular-nums; }

/* Dòng phụ dưới tên căn, chỉ hiện ở màn hình hẹp — xem media query cuối khối. */
.bds-units__sub { display: none; }

.bds-units__price { font-weight: 600; color: var(--bds-navy); }

/* Trạng thái: chấm tròn + chữ, nhẹ hơn hẳn cái hộp viền cũ và không tranh chỗ
   với cột Giá trên màn hình hẹp. Màu chấm mới là thứ đọc được từ xa. */
.bds-units__status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--bds-text);
	white-space: nowrap;
}

.bds-units__status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bds-gold);
	flex: none;
}

/* Căn đang xem: không còn là link nên phải nổi bằng nền và nét dọc. */
.bds-units__table tr.is-current td {
	background: color-mix(in srgb, var(--bds-gold) 10%, transparent);
	color: var(--bds-navy);
}
.bds-units__table tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--bds-gold); }
.bds-units__table tr.is-current:hover td { background: color-mix(in srgb, var(--bds-gold) 10%, transparent); }

/* Đã bán thì mờ đi, nhưng vẫn đọc được — nó là thông tin, không phải rác. */
.bds-units__table tr.is-sold td,
.bds-units__table tr.is-sold .bds-units__price { color: var(--bds-muted); font-weight: 400; }
.bds-units__table tr.is-sold .bds-units__unit a,
.bds-units__table tr.is-sold .bds-units__unit span { color: var(--bds-muted); }
.bds-units__table tr.is-sold .bds-units__status::before { background: var(--bds-muted); }

.bds-units__all {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bds-gold);
	text-decoration: none;
}
.bds-units__all:hover { color: var(--bds-orange-dark); }
.bds-units__all .bds-icon { width: 16px; height: 16px; }

@media (max-width: 560px) {
	.bds-units__table { font-size: 13px; min-width: 300px; }
	.bds-units__table th { padding: 8px 10px; }
	.bds-units__table td { padding: 9px 10px; }
	.bds-units__table th:first-child,
	.bds-units__table td:first-child { padding-left: 10px; }
	.bds-units__table th:last-child,
	.bds-units__table td:last-child { padding-right: 10px; }
	.bds-units__status { font-size: 12px; gap: 6px; }

	/*
	 * Khung chỉ còn ~334px; bốn cột thì "Liên hệ" bị cắt mất. Bỏ cột "Quy mô",
	 * đưa nó xuống làm dòng phụ ngay dưới tên căn: ba cột vừa khít, không mất
	 * thông tin nào và khỏi phải vuốt ngang mới thấy giá.
	 */
	.bds-units__table th:nth-child(2),
	.bds-units__table td:nth-child(2) { display: none; }

	.bds-units__sub {
		display: block;
		margin-top: 2px;
		font-size: 11.5px;
		font-weight: 400;
		color: var(--bds-muted);
		font-variant-numeric: tabular-nums;
	}

	/*
	 * Bỏ luôn bố cục cột cố định ở đây. Ẩn ô giữa bằng CSS không ăn khớp với
	 * <colgroup>: <col> gán theo vị trí, ô thứ ba bị ẩn thì hai ô sau tụt lên
	 * ăn phải bề rộng của <col> khác — cột Tình trạng nhận đúng cột 0px và biến
	 * mất. Ba cột ngắn, để trình duyệt tự chia theo nội dung là vừa đẹp.
	 */
	.bds-units__table { table-layout: auto; }
	.bds-units__col--unit,
	.bds-units__col--size,
	.bds-units__col--status,
	.bds-units__col--price { width: auto; }

	/* Chật thì cho nhãn tiêu đề xuống dòng còn hơn bị cắt cụt. */
	.bds-units__table th { white-space: normal; line-height: 1.3; vertical-align: bottom; }
}

@media (max-width: 1024px) {
	.bds-layout { grid-template-columns: minmax(0, 1fr); }
	.bds-nav { position: static; display: flex; overflow-x: auto; border-left: 0; }
	.bds-nav a { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
	.bds-nav a.is-active { border-left: 0; border-bottom-color: var(--bds-gold); }
	.bds-details { grid-template-columns: minmax(0, 1fr); }
	.bds-nearby { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bds-usps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

@media (max-width: 860px) {
	.bds-hero { grid-template-columns: minmax(0, 1fr); }
	.bds-hero__media { min-height: 280px; order: -1; }
	.bds-hero__text { padding: 26px 20px 34px; }
	.bds-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bds-strip__track { grid-auto-columns: calc(85%); }
	.bds-strip__nav { display: none; }
}

@media (max-width: 560px) {
	.bds-columns { grid-template-columns: minmax(0, 1fr); }
	.bds-nearby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bds-details__grid { grid-template-columns: minmax(0, 1fr); }
	.bds-actions .bds-btn { flex: 1 1 100%; }
}

.bds-card__logo { text-align: center; margin-bottom: 18px; }
.bds-card__logo img { max-width: 170px; max-height: 60px; width: auto; height: auto; display: inline-block; }

/* Dòng địa chỉ nhiều dòng: icon giữ ở đầu, không bị kéo xuống giữa. */
.bds-contact__row--address { align-items: flex-start; line-height: 1.5; }
.bds-contact__row--address .bds-icon { margin-top: 2px; }

/* ------------------------------------------------- Bố cục cột giữa dày hơn */

/*
 * Thông số, thư viện ảnh và tiện ích lân cận nay nằm trong .bds-content thay vì
 * chạy hết bề ngang bên dưới. Trước đó grid chỉ có nav + tổng quan + sidebar,
 * nên bài nào mô tả ngắn là cột giữa cao 315px trong khi sidebar cao 682px —
 * thừa gần 370px trắng. Dồn vào một cột thì cột giữa luôn có nội dung.
 */

/* Sidebar theo chân người đọc thay vì đứng yên rồi hụt xuống. */
.bds-sidebar { position: sticky; top: 90px; }

/* Cột giữa hẹp hơn bề ngang trang, các lưới bên trong phải giảm số cột. */
.bds-content .bds-details { grid-template-columns: minmax(0, 1fr); }
.bds-content .bds-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bds-content .bds-map { min-height: 240px; border-top: 1px solid var(--bds-line); }
.bds-content .bds-map iframe { min-height: 240px; }
.bds-content .bds-nearby { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bds-content .bds-strip__track { grid-auto-columns: calc(50% - 6px); }

/* Mũi tên dải ảnh nằm sát mép cột, kéo vào trong cho khỏi tràn. */
.bds-content .bds-strip__nav--prev { left: -12px; }
.bds-content .bds-strip__nav--next { right: -12px; }

@media (max-width: 1024px) {
	/* Dưới ngưỡng này .bds-layout đã về một cột, trả các lưới về mặc định. */
	.bds-sidebar { position: static; }
	.bds-content .bds-strip__track { grid-auto-columns: calc(85%); }
}

@media (max-width: 560px) {
	.bds-content .bds-details__grid { grid-template-columns: minmax(0, 1fr); }
	.bds-content .bds-nearby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}