/**
 * Trang chủ — dựng theo design/homepage.png.
 *
 * Bám brand guideline: navy nền tảng, kem xen kẽ, cam Trí Tín (#F98E30 — đúng
 * màu logo) điểm nhấn, mảng cam đặc chỉ ở đúng một nút hành động chính
 * (nút "Đặt lịch tư vấn" ở dải mở đầu).
 * Không bo góc, không đổ bóng đậm.
 *
 * Mọi thứ nằm trong body.tth để không đụng phần còn lại của site. Không nạp
 * font riêng — cả trang dùng font của Customizer (Quicksand).
 */

body.tth {
	--tth-navy: #0F1E33;
	--tth-navy-900: #0A1626;
	--tth-navy-700: #16283F;
	--tth-navy-400: #8FA3BD;
	--tth-cream: #F7F5F0;
	/* Hai nấc cam nhấn: sáng cho nền navy, nung cho nền kem. `--tth-gold` là
	   nấc đang hiệu lực, được đổi theo nền ở khối ngay bên dưới. */
	--tth-gold-lit: #F0A45E;
	--tth-gold-dark: #A85B0E;
	--tth-gold: var(--tth-gold-lit);
	/* Màu chữ đặt trên mảng cam đặc — lật theo nấc: navy trên cam nhạt,
	   trắng trên cam nung. */
	--tth-gold-fg: var(--tth-navy);
	--tth-orange: #F98E30;
	--tth-orange-dark: #D9720F;
	--tth-mist: #D7DEE8;
	--tth-ink: #1C2B3F;
	--tth-muted: #6B7686;
	--tth-line: #E4DFD4;
}

/* --------------------------------------------------------------------------
   Nấc cam theo nền
   Cam sáng #F0A45E trên nền kem chỉ đạt 1.9:1 — không đọc nổi. Các dải nền
   sáng đổi luôn token sang cam nung #A85B0E (4.6:1), nên mọi var(--tth-gold)
   bên trong tự chuyển theo, không phải sửa từng thuộc tính.
   Khối nền tối nằm lồng trong dải sáng thì bật ngược lại nấc sáng.
   -------------------------------------------------------------------------- */

.tth-story,
.tth-benefits,
.tth-props,
.tth-gallery,
.tth-life,
.tth-journey,
.tth-testi,
.tth-news,
.tth-series,
.tth-extra {
	--tth-gold: var(--tth-gold-dark);
	--tth-gold-fg: #fff;
}

.tth-story__media,
.tth-benefits__card,
.tth-card__media,
.tth-card__tag,
.tth-life__item,
.tth-testi__media,
.tth-news__media {
	--tth-gold: var(--tth-gold-lit);
	--tth-gold-fg: var(--tth-navy);
}

/* Bỏ padding mặc định của Flatsome để dải mở đầu chạm sát header. */
body.tth #content.page-wrapper {
	padding-top: 0;
	padding-bottom: 0;
	background-color: var(--tth-cream);
}

body.tth .tth-wrap {
	max-width: 1250px;
	margin: 0 auto;
	padding-right: 20px;
	padding-left: 20px;
}

body.tth .tth-icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

/* Ảnh thật và ảnh giữ chỗ dùng chung một khung, để bố cục không đổi khi
   trang chưa chọn đủ ảnh trong Bảng tin. */
body.tth .tth-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.tth .tth-img--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background-color: var(--tth-navy-700);
	color: rgba(240, 164, 94, .5);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
}

/* ==========================================================================
   Chữ dùng lại giữa các khối
   ========================================================================== */

body.tth .tth-eyebrow {
	margin: 0 0 14px;
	color: var(--tth-gold);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 2.4px;
	text-transform: uppercase;
}

/* Biến thể có gạch vàng nối theo sau, như các nhãn giữa trang trong thiết kế. */
body.tth .tth-eyebrow--rule::after {
	content: "";
	display: inline-block;
	width: 42px;
	height: 1px;
	margin-left: 14px;
	background-color: var(--tth-gold);
	vertical-align: middle;
}

body.tth .tth-heading {
	margin: 0 0 20px;
	color: var(--tth-ink);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -.01em;
	text-transform: none;
}

body.tth .tth-heading--light {
	color: #fff;
}

/* Tiêu đề nhiều dòng: xuống dòng đúng chỗ trên desktop, màn hẹp cho chảy tự nhiên. */
body.tth .tth-heading span,
body.tth .tth-hero__title span,
body.tth .tth-hero__desc span,
body.tth .tth-benefits__title span,
body.tth .tth-stats__label span {
	display: block;
}

body.tth .tth-lead {
	margin: 0 0 16px;
	color: var(--tth-muted);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.8;
}

body.tth .tth-sec-head {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

body.tth .tth-sec-head .tth-heading {
	margin-bottom: 0;
}

/* Đầu khối có link "xem tất cả" thì chuyển sang canh trái, link nằm bên phải. */
body.tth .tth-sec-head--row {
	display: flex;
	max-width: none;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 32px;
	text-align: left;
}

body.tth .tth-sec-head--row .tth-eyebrow--rule::after {
	display: none;
}

/* ==========================================================================
   Nút và liên kết
   ========================================================================== */

body.tth .tth-btn {
	display: inline-block;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Cam là hành động chính — cả trang chỉ có đúng một nút này, ở dải mở đầu. */
body.tth .tth-btn--primary {
	background-color: var(--tth-orange);
	border-color: var(--tth-orange);
	color: #fff;
}

body.tth .tth-btn--primary:hover,
body.tth .tth-btn--primary:focus-visible {
	background-color: var(--tth-orange-dark);
	border-color: var(--tth-orange-dark);
	color: #fff;
}

/* Vàng đồng nền, chữ navy — cặp hợp lệ trong guideline, dùng cho nút dẫn
   hướng phụ để không tranh chỗ với nút cam. */
body.tth .tth-btn--gold {
	background-color: var(--tth-gold);
	border-color: var(--tth-gold);
	color: var(--tth-gold-fg);
}

body.tth .tth-btn--gold:hover,
body.tth .tth-btn--gold:focus-visible {
	background-color: var(--tth-gold-dark);
	border-color: var(--tth-gold-dark);
	color: #fff;
}

/* Nút phụ của guideline: nền trong suốt, viền 1px + chữ cam. Dùng token nên
   tự đổi nấc — cam sáng trên nền navy, cam nung trên nền kem. */
body.tth .tth-btn--ghost {
	background-color: transparent;
	border-color: var(--tth-gold);
	color: var(--tth-gold);
}

body.tth .tth-btn--ghost:hover,
body.tth .tth-btn--ghost:focus-visible {
	background-color: var(--tth-gold);
	border-color: var(--tth-gold);
	color: var(--tth-gold-fg);
}

body.tth .tth-btn--ghost-light {
	background-color: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

body.tth .tth-btn--ghost-light:hover,
body.tth .tth-btn--ghost-light:focus-visible {
	background-color: #fff;
	border-color: #fff;
	color: var(--tth-navy);
}

/* "Xem tất cả bất động sản →" — chữ nhỏ in hoa, mũi tên vàng trượt sang phải. */
body.tth .tth-more {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--tth-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

body.tth .tth-more .tth-icon {
	color: var(--tth-gold);
	transition: transform .18s ease;
}

body.tth .tth-more:hover {
	color: var(--tth-gold-dark);
}

body.tth .tth-more:hover .tth-icon {
	transform: translateX(4px);
}

body.tth .tth-more--light {
	color: #fff;
}

body.tth .tth-more--light:hover {
	color: var(--tth-gold);
}

body.tth .tth-more--sm {
	font-size: 11px;
	letter-spacing: 1.4px;
}

/* ==========================================================================
   Dải mở đầu
   ========================================================================== */

.tth-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--tth-navy);
}

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

/*
 * Lớp phủ để chữ trắng đọc được trên ảnh: đậm ở nửa trái nơi có chữ, nhạt dần
 * về phải để vẫn thấy cảnh. Đây là mặt nạ chức năng, không phải gradient
 * trang trí.
 */
.tth-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg,
			rgba(10, 22, 38, .88) 0%,
			rgba(10, 22, 38, .72) 30%,
			rgba(10, 22, 38, .32) 62%,
			rgba(10, 22, 38, .18) 100%),
		linear-gradient(180deg,
			rgba(10, 22, 38, .55) 0%,
			rgba(10, 22, 38, 0) 26%);
}

.tth-hero__inner {
	position: relative;
	display: flex;
	min-height: 640px;
	flex-direction: column;
	justify-content: center;
	padding-top: 86px;
	padding-bottom: 86px;
}

.tth-hero__text {
	max-width: 620px;
}

.tth-hero__title {
	margin: 0 0 26px;
	color: #fff;
	font-size: clamp(32px, 4vw, 54px);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -.015em;
	text-transform: none;
}

.tth-hero__desc {
	margin: 0 0 34px;
	color: var(--tth-mist);
	font-size: clamp(15px, 1.3vw, 17px);
	font-weight: 300;
	line-height: 1.7;
}

.tth-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
}

/* Link video nằm ở góc dưới bên phải dải mở đầu, như bản thiết kế. */
.tth-hero__video {
	position: absolute;
	right: 20px;
	bottom: 34px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
}

.tth-hero__video .tth-icon {
	color: var(--tth-gold);
	transition: color .18s ease;
}

.tth-hero__video:hover,
.tth-hero__video:hover .tth-icon {
	color: var(--tth-gold);
}

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

/* Nấc navy sáng hơn cả dải mở đầu lẫn dải "vấn đề" ngay dưới: ba mảng tối
   liền nhau mà cùng một màu thì dính thành một khối, không còn thấy đây là
   một băng số liệu riêng. */
.tth-stats {
	background-color: var(--tth-navy-700);
}

.tth-stats__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tth-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 34px 24px 38px;
	list-style: none;
	text-align: center;
}

/* Đường kẻ ngăn cột — kẻ ở mép trái nên ô đầu tiên không có. */
.tth-stats__item + .tth-stats__item {
	border-left: 1px solid rgba(240, 164, 94, .26);
}

.tth-stats__icon {
	color: var(--tth-gold);
	line-height: 0;
}

.tth-stats__value {
	color: #fff;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 600;
	line-height: 1.1;
}

.tth-stats__label {
	color: var(--tth-gold);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

/* ==========================================================================
   Câu chuyện
   ========================================================================== */

.tth-story {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: var(--tth-cream);
}

.tth-story__media {
	position: relative;
	min-height: 460px;
	background-color: var(--tth-navy-900);
}

.tth-story__media .tth-img {
	position: absolute;
	inset: 0;
}

/* Ảnh chân dung trong thiết kế tối dần về đáy để chữ "xem câu chuyện" nổi lên. */
.tth-story__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(10, 22, 38, .1) 40%,
		rgba(10, 22, 38, .7) 100%);
	pointer-events: none;
}

.tth-story__play {
	position: absolute;
	right: 30px;
	bottom: 32px;
	left: 30px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
}

.tth-story__play .tth-icon {
	color: var(--tth-gold);
}

.tth-story__text {
	display: flex;
	align-items: center;
	padding: 78px 0;
}

/* Chữ canh theo mép trong của .tth-wrap để cột phải thẳng hàng với các khối khác. */
.tth-story__inner {
	max-width: 605px;
	padding-right: 20px;
	padding-left: 58px;
}

.tth-story__text .tth-lead:last-of-type {
	margin-bottom: 26px;
}

/* Chữ ký cuối thư ngỏ: ảnh tròn + tên + chức danh, ngăn với đoạn văn bằng
   một vạch vàng mảnh. */
.tth-story__sign {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 22px;
	margin-bottom: 28px;
	border-top: 1px solid var(--tth-line);
}

.tth-story__face {
	display: block;
	overflow: hidden;
	width: 54px;
	height: 54px;
	flex: 0 0 auto;
	border: 1px solid var(--tth-gold);
	border-radius: 50%;
}

.tth-story__face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.tth-story__name {
	display: block;
	color: var(--tth-ink);
	font-size: 15px;
	font-weight: 600;
}

.tth-story__role {
	display: block;
	color: var(--tth-gold-dark);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

/* ==========================================================================
   Vấn đề khách hàng đang gặp
   ========================================================================== */

.tth-problems {
	padding: 78px 0 84px;
	background-color: var(--tth-navy);
}

.tth-problems__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: 0;
	padding: 0;
	background-color: rgba(240, 164, 94, .26);
	list-style: none;
}

/*
 * Đường kẻ ngăn ô vẽ bằng `gap` trên nền màu kẻ chứ không bằng border: lưới
 * 3 × 2 này về màn hẹp còn 2 rồi 1 cột, cách này không phải tính lại xem ô nào
 * mất kẻ trái, ô nào thêm kẻ trên.
 */
.tth-problems__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	padding: 30px 26px 32px;
	background-color: var(--tth-navy);
	list-style: none;
}

.tth-problems__icon {
	flex: 0 0 auto;
	color: var(--tth-gold);
	line-height: 0;
}

.tth-problems__title {
	margin: 0 0 10px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
}

.tth-problems__desc {
	margin: 0;
	color: var(--tth-navy-400);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.75;
}

/* Câu chốt: chữ sáng hơn cả tiêu đề ô, phần vàng đồng là vế "đầu tư định cư Síp". */
.tth-problems__note {
	max-width: 860px;
	margin: 44px auto 0;
	color: var(--tth-mist);
	font-size: clamp(17px, 1.8vw, 21px);
	font-weight: 300;
	line-height: 1.6;
	text-align: center;
}

.tth-problems__note strong {
	color: var(--tth-gold);
	font-weight: 600;
}

/* ==========================================================================
   Cam kết
   ========================================================================== */

.tth-promise {
	padding: 78px 0 84px;
	background-color: var(--tth-navy);
}

.tth-promise__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: 0;
	padding: 0;
	background-color: rgba(240, 164, 94, .26);
	list-style: none;
}

.tth-promise__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 40px 30px 42px;
	background-color: var(--tth-navy);
	list-style: none;
	text-align: center;
}

.tth-promise__icon {
	margin-bottom: 22px;
	color: var(--tth-gold);
	line-height: 0;
}

.tth-promise__title {
	margin: 0 0 14px;
	color: #fff;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	text-transform: none;
}

.tth-promise__desc {
	margin: 0 0 16px;
	color: var(--tth-mist);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.75;
}

.tth-promise__en {
	margin-top: auto;
	color: var(--tth-navy-400);
	font-size: 12px;
	font-style: italic;
	letter-spacing: 1px;
}

/* ==========================================================================
   Lợi ích đầu tư
   ========================================================================== */

.tth-benefits {
	padding: 78px 0 84px;
	background-color: var(--tth-cream);
}

.tth-benefits__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.tth-benefits__card {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 340px;
	background-color: var(--tth-navy-900);
	color: #fff;
	text-decoration: none;
}

.tth-benefits__media {
	position: absolute;
	inset: 0;
}

.tth-benefits__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(10, 22, 38, .25) 0%,
		rgba(10, 22, 38, .5) 45%,
		rgba(10, 22, 38, .88) 100%);
}

.tth-benefits__card .tth-img {
	transition: transform .5s ease;
}

a.tth-benefits__card:hover .tth-img {
	transform: scale(1.04);
}

/* Nền navy mờ sau vòng tròn: icon vàng nằm trên ảnh, mà ảnh nào cũng có thể
   sáng ở đúng góc đó — không có nền thì nét vàng biến mất. */
.tth-benefits__icon {
	position: absolute;
	top: 26px;
	right: 26px;
	display: flex;
	width: 52px;
	height: 52px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(240, 164, 94, .8);
	border-radius: 50%;
	background-color: rgba(10, 22, 38, .45);
	color: var(--tth-gold);
}

.tth-benefits__body {
	position: absolute;
	right: 28px;
	bottom: 28px;
	left: 28px;
	display: block;
}

.tth-benefits__title {
	display: block;
	margin-bottom: 12px;
	color: #fff;
	font-size: clamp(19px, 1.7vw, 23px);
	font-weight: 600;
	line-height: 1.3;
}

.tth-benefits__desc {
	display: block;
	color: var(--tth-mist);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.7;
}

/* ==========================================================================
   Băng cuộn dùng chung (BĐS nổi bật, cảm nhận khách hàng)
   ========================================================================== */

.tth-rail {
	position: relative;
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 40px;
}

.tth-rail__track {
	display: flex;
	overflow-x: auto;
	margin: 0;
	padding: 4px 0 14px;
	gap: 24px;
	list-style: none;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.tth-rail__track::-webkit-scrollbar {
	display: none;
}

/* Kéo bằng chuột. `scroll-behavior` và `scroll-snap-type` do JS tắt bằng style
   nội tuyến trong lúc kéo — ở đây chỉ còn con trỏ và việc chặn bôi đen. */
.tth-rail__track {
	cursor: grab;
}

.tth-rail__track.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.tth-rail__track img {
	-webkit-user-drag: none;
	user-select: none;
}

.tth-rail__track > li {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.tth-rail__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--tth-line);
	border-radius: 50%;
	margin-top: -19px;
	background-color: #fff;
	color: var(--tth-ink);
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.tth-rail__nav:hover {
	border-color: var(--tth-gold);
	color: var(--tth-gold);
}

.tth-rail__nav--prev {
	left: 0;
	transform: rotate(180deg);
}

.tth-rail__nav--next {
	right: 0;
}

/* ==========================================================================
   Thẻ bất động sản
   ========================================================================== */

.tth-props {
	padding: 78px 0 84px;
	background-color: #F1EDE6;
}

.tth-props .tth-sec-head--row {
	margin-bottom: 34px;
}

.tth-props__item {
	width: min(374px, 82vw);
}

.tth-card {
	display: flex;
	height: 100%;
	flex-direction: column;
	background-color: #fff;
	border: 1px solid var(--tth-line);
}

.tth-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-color: var(--tth-navy-700);
}

.tth-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.tth-card:hover .tth-card__media img {
	transform: scale(1.05);
}

.tth-card__tag {
	position: absolute;
	top: 0;
	left: 0;
	padding: 8px 16px;
	background-color: var(--tth-navy);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.tth-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px 22px 0;
}

.tth-card__place {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	color: var(--tth-gold);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.tth-card__title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.45;
	text-transform: none;
}

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

.tth-card__title a:hover {
	color: var(--tth-gold-dark);
}

.tth-card__price {
	margin: 0 0 16px;
	color: var(--tth-ink);
	font-size: 19px;
	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ữ.
 */
body.tth .bds-price-phone {
	color: var(--tth-gold);
	text-decoration: none;
	white-space: nowrap;
}

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

/*
 * Đường kẻ ngăn các ô thông số vẽ bằng `gap` trên nền màu kẻ, không dùng
 * `border-left`: thẻ hẹp thì ba ô xuống hai hàng, và cách này vẫn ra đúng lưới
 * thay vì để lòi một mẩu kẻ ở đầu hàng dưới.
 */
.tth-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin: auto 0 0;
	padding: 0;
	border-top: 1px solid var(--tth-line);
	background-color: var(--tth-line);
	list-style: none;
}

.tth-card__specs li {
	display: flex;
	flex: 1 1 0;
	min-width: 32%;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0;
	padding: 13px 6px;
	background-color: #fff;
	color: var(--tth-muted);
	font-size: 12px;
	font-weight: 400;
	list-style: none;
	white-space: nowrap;
}

.tth-card__specs .tth-icon {
	color: var(--tth-gold);
}

/* ==========================================================================
   Chủ đầu tư chính thức
   ========================================================================== */

.tth-devs {
	padding: 74px 0 78px;
	background-color: var(--tth-navy);
}

.tth-devs__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.tth-devs__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 8px 30px;
	list-style: none;
	text-align: center;
}

.tth-devs__item + .tth-devs__item {
	border-left: 1px solid rgba(240, 164, 94, .3);
}

/*
 * Logo đặt trên tấm nền trắng chứ không thả thẳng lên navy: bộ logo đóng gói
 * trong `inc/bat-dong-san/assets/logos/` được cắt cho nền sáng — Aristo là chữ
 * đen, Leptos đã đổi sang navy — nên trên nền tối chúng biến mất.
 */
.tth-devs__logo {
	display: flex;
	width: 100%;
	max-width: 240px;
	height: 84px;
	align-items: center;
	justify-content: center;
	padding: 14px 22px;
	margin-bottom: 26px;
	background-color: #fff;
}

.tth-devs__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.tth-devs__name {
	color: var(--tth-navy);
	font-size: 19px;
	font-weight: 600;
	text-align: center;
}

/* `margin-bottom: auto` đẩy link "Xem dự án" xuống đáy cột: ba cột cao bằng
   nhau nên link thẳng hàng kể cả khi một nhãn số liệu xuống hai dòng. */
/*
 * `auto-fit` chứ không phải ba cột cứng: ba đối tác thì cột rộng, số liệu nằm
 * ngang đúng như thiết kế; thêm đối tác thì cột hẹp lại và số liệu tự xếp dọc
 * thay vì bóp mỗi nhãn thành bốn dòng chữ.
 *
 * `margin-bottom: auto` đẩy link "Xem dự án" xuống đáy cột: các cột cao bằng
 * nhau nên link thẳng hàng kể cả khi một nhãn dài hơn hẳn.
 */
.tth-devs__stats {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 14px 12px;
	margin: 0 0 auto;
	padding: 0 0 26px;
	list-style: none;
}

.tth-devs__stats li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tth-devs__value {
	display: block;
	margin-bottom: 5px;
	color: var(--tth-gold);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
}

.tth-devs__label {
	display: block;
	color: var(--tth-navy-400);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.5;
}

/*
 * Dải mở đầu và các ô nhỏ (thẻ lợi ích, ô cuộc sống) đều chồng chữ lên giữa
 * ảnh, nên ảnh giữ chỗ ở đây chỉ để lại nền navy — in thêm chữ "TRÍ TÍN
 * CYPRUS" vào đó là hai lớp chữ đè nhau.
 */
body.tth .tth-hero__media .tth-img--empty span,
body.tth .tth-benefits__media .tth-img--empty span,
body.tth .tth-life__media .tth-img--empty span {
	display: none;
}

/* ==========================================================================
   Hình ảnh hoạt động
   ========================================================================== */

.tth-gallery {
	padding: 78px 0 84px;
	background-color: var(--tth-cream);
}

.tth-gallery__desc {
	margin: 18px auto 0;
	max-width: 680px;
}

/* Ảnh 16:9 nên khung cũng 16:9 — bộ ảnh hiện tại có chú thích nướng sẵn ở
   đáy ảnh, khung lệch tỉ lệ là cắt mất dòng chữ đó. */
.tth-gallery__item {
	width: min(560px, 86vw);
}

.tth-gallery__item .tth-img {
	aspect-ratio: 16 / 9;
	height: auto;
	background-color: var(--tth-navy-700);
}

.tth-gallery__link {
	position: relative;
	display: block;
	cursor: zoom-in;
}

/* Đang kéo thì con trỏ phải là bàn tay nắm trên cả ảnh, không thì nửa băng
   báo "bấm để phóng to" trong khi người dùng đang kéo. */
.tth-rail__track.is-dragging .tth-gallery__link {
	cursor: grabbing;
}

.tth-gallery__zoom {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(10, 22, 38, .55);
	color: #fff;
	opacity: 0;
	transition: opacity .18s ease;
}

.tth-gallery__link:hover .tth-gallery__zoom,
.tth-gallery__link:focus-visible .tth-gallery__zoom {
	opacity: 1;
}

/* ==========================================================================
   Lightbox ảnh hoạt động
   ========================================================================== */

body.tth-lb-open {
	overflow: hidden;
}

.tth-lb {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 60px 72px;
	/* Gần đặc hẳn: 0.94 vẫn để chữ sáng của header và dải số liệu lọt qua
	   thành bóng mờ sau ảnh. Blur là lớp đỡ thêm, trình duyệt nào không hỗ
	   trợ thì vẫn đủ tối. */
	background-color: rgba(10, 22, 38, .975);
	backdrop-filter: blur(6px);
}

.tth-lb.is-open {
	display: flex;
}

.tth-lb__stage {
	display: flex;
	max-width: 100%;
	max-height: 100%;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 0;
}

.tth-lb__stage img {
	max-width: 100%;
	max-height: calc(100vh - 160px);
	width: auto;
	height: auto;
	object-fit: contain;
}

.tth-lb__stage figcaption {
	display: flex;
	align-items: baseline;
	gap: 16px;
	color: var(--tth-mist);
	font-size: 14px;
	font-weight: 300;
	text-align: center;
}

.tth-lb__count {
	color: var(--tth-navy-400);
	font-size: 13px;
	white-space: nowrap;
}

.tth-lb__close,
.tth-lb__nav {
	position: absolute;
	display: flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background-color: transparent;
	color: #fff;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.tth-lb__close:hover,
.tth-lb__nav:hover,
.tth-lb__close:focus-visible,
.tth-lb__nav:focus-visible {
	border-color: #fff;
	background-color: rgba(255, 255, 255, .12);
}

.tth-lb__close svg,
.tth-lb__nav svg {
	width: 20px;
	height: 20px;
}

.tth-lb__close {
	top: 20px;
	right: 20px;
}

.tth-lb__nav--prev {
	left: 16px;
}

.tth-lb__nav--next {
	right: 16px;
}

/* ==========================================================================
   Cuộc sống ở Síp
   ========================================================================== */

.tth-life {
	padding: 78px 0 84px;
	background-color: var(--tth-cream);
}

.tth-life__list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tth-life__item {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
	aspect-ratio: 3 / 4;
	background-color: var(--tth-navy-900);
	list-style: none;
}

.tth-life__media {
	position: absolute;
	inset: 0;
}

.tth-life__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(10, 22, 38, .25) 0%,
		rgba(10, 22, 38, .34) 45%,
		rgba(10, 22, 38, .9) 100%);
}

.tth-life__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	width: 50px;
	height: 50px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(240, 164, 94, .85);
	border-radius: 50%;
	margin: -38px 0 0 -25px;
	background-color: rgba(10, 22, 38, .45);
	color: var(--tth-gold);
}

.tth-life__label {
	position: absolute;
	right: 12px;
	bottom: 16px;
	left: 12px;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}

/* ==========================================================================
   Hành trình
   ========================================================================== */

.tth-journey {
	padding: 78px 0 88px;
	background-color: var(--tth-cream);
}

.tth-journey__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Trục ngang chạy sau lưng các vòng tròn; dừng ở tâm bước đầu và bước cuối
   để không có đoạn kẻ thừa thò ra hai mép. */
.tth-journey__list::before {
	content: "";
	position: absolute;
	top: 29px;
	right: calc(100% / 12);
	left: calc(100% / 12);
	height: 1px;
	background-color: var(--tth-line);
}

.tth-journey__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0 10px;
	list-style: none;
	text-align: center;
}

.tth-journey__disc {
	display: flex;
	width: 58px;
	height: 58px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--tth-gold);
	border-radius: 50%;
	background-color: var(--tth-cream);
	color: var(--tth-gold);
}

.tth-journey__num {
	display: flex;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin: -11px 0 12px;
	background-color: var(--tth-gold);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.tth-journey__title {
	color: var(--tth-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.tth-journey__desc {
	color: var(--tth-muted);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.5;
}

/* ==========================================================================
   Khách hàng
   ========================================================================== */

.tth-testi {
	padding: 78px 0 84px;
	background-color: #F1EDE6;
}

.tth-testi__item {
	width: min(376px, 84vw);
}

.tth-testi__item.is-wide {
	width: min(620px, 88vw);
}

.tth-testi__card {
	display: flex;
	height: 100%;
	margin: 0;
	background-color: #fff;
	border-left: 3px solid transparent;
}

/* Thẻ chữ thuần có vạch vàng bên trái, đúng như thẻ thứ ba trong thiết kế. */
.tth-testi__item:not(.is-wide) .tth-testi__card {
	border-left-color: var(--tth-gold);
}

.tth-testi__media {
	position: relative;
	display: block;
	overflow: hidden;
	flex: 0 0 44%;
	background-color: var(--tth-navy-700);
}

.tth-testi__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin: -28px 0 0 -28px;
	background-color: rgba(255, 255, 255, .92);
	color: var(--tth-gold-dark);
}

.tth-testi__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 30px 30px 28px;
}

.tth-testi__mark {
	margin-bottom: 14px;
	color: var(--tth-gold);
	line-height: 0;
}

.tth-testi__quote {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	color: var(--tth-ink);
	font-size: 14px;
	font-weight: 300;
	font-style: normal;
	line-height: 1.8;
}

.tth-testi__who {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
}

.tth-testi__avatar {
	display: block;
	overflow: hidden;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border-radius: 50%;
}

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

.tth-testi__name {
	display: block;
	color: var(--tth-ink);
	font-size: 14px;
	font-weight: 600;
}

.tth-testi__place {
	display: block;
	color: var(--tth-muted);
	font-size: 13px;
	font-weight: 300;
}

/* ==========================================================================
   Tin tức
   ========================================================================== */

.tth-news {
	padding: 78px 0 88px;
	background-color: var(--tth-cream);
}

.tth-news .tth-sec-head--row {
	margin-bottom: 34px;
}

.tth-news__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.tth-news__card {
	display: flex;
	height: 100%;
	flex-direction: column;
	background-color: #fff;
	border: 1px solid var(--tth-line);
}

.tth-news__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--tth-navy-700);
}

.tth-news__media .tth-img {
	transition: transform .5s ease;
}

.tth-news__card:hover .tth-media .tth-img,
.tth-news__card:hover .tth-news__media .tth-img {
	transform: scale(1.05);
}

.tth-news__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 22px 24px 24px;
}

.tth-news__date {
	margin: 0 0 10px;
	color: var(--tth-gold);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.tth-news__title {
	margin: 0 0 22px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	text-transform: none;
}

.tth-news__title a {
	color: var(--tth-ink);
	text-decoration: none;
}

.tth-news__title a:hover {
	color: var(--tth-gold-dark);
}

.tth-news__body .tth-more {
	margin-top: auto;
	align-self: flex-start;
}

/* ==========================================================================
   Chuyên mục đọc theo thứ tự
   Nằm ngay dưới khối Tin tức nên cùng nền kem; tách nhau bằng một tấm trắng
   có viền, không đổi màu dải — hai dải kem liền nhau vẫn đọc ra hai khối.
   ========================================================================== */

.tth-series {
	padding: 0 0 72px;
	background-color: var(--tth-cream);
}

/* Hai khối là một cặp: Tin tức nhả 88px xuống dưới cho khối kế tiếp, nhưng ở
   đây khoảng đó rơi vào giữa hai thứ đang đọc như một mạch — kéo lại gần. */
.tth-news:has(+ .tth-series) {
	padding-bottom: 44px;
}

.tth-series__panel {
	max-width: 860px;
	margin: 0 auto;
	padding: 30px 34px 32px;
	background-color: #fff;
	border: 1px solid var(--tth-line);
	/* Nét cam mảnh ở cạnh trái — điểm nhấn dạng đường kẻ, không phải mảng đặc. */
	border-left: 3px solid var(--tth-gold);
}

.tth-series__head {
	margin-bottom: 18px;
}

.tth-series__head .tth-heading {
	margin-bottom: 8px;
}

.tth-series__desc {
	margin: 0;
	color: var(--tth-muted);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
}

.tth-series__list {
	margin: 0 0 22px;
	padding: 0;
	border-top: 1px solid var(--tth-line);
	list-style: none;
	counter-reset: none;
}

.tth-series__item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--tth-line);
	list-style: none;
}

.tth-series__link {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 13px 2px;
	text-decoration: none;
}

.tth-series__num {
	flex: 0 0 auto;
	min-width: 28px;
	color: var(--tth-gold);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 1px;
}

.tth-series__text {
	display: block;
}

.tth-series__title {
	display: block;
	margin-bottom: 5px;
	color: var(--tth-ink);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.45;
	transition: color .18s ease;
}

.tth-series__link:hover .tth-series__title,
.tth-series__link:focus-visible .tth-series__title {
	color: var(--tth-gold);
}

.tth-series__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--tth-muted);
	font-size: 12px;
	letter-spacing: .3px;
}

.tth-series__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: var(--tth-gold);
	opacity: .8;
}

.tth-series__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ==========================================================================
   Nội dung gõ thêm trong editor
   ========================================================================== */

.tth-extra {
	padding: 60px 0;
	background-color: var(--tth-cream);
	color: var(--tth-ink);
	font-weight: 300;
}

/* ==========================================================================
   Màn hẹp
   ========================================================================== */

@media (max-width: 1100px) {
	.tth-life__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.tth-journey__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px 0;
	}

	/* Ba cột thì trục ngang không còn đúng nữa — bỏ hẳn, các bước tự đứng. */
	.tth-journey__list::before {
		display: none;
	}

	.tth-problems__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.tth-devs__list {
		grid-template-columns: 1fr;
	}

	.tth-devs__item {
		padding: 30px 20px;
	}

	.tth-devs__item + .tth-devs__item {
		border-top: 1px solid rgba(240, 164, 94, .3);
		border-left: 0;
	}
}

@media (max-width: 850px) {
	.tth-hero__inner {
		min-height: 520px;
		padding-top: 64px;
		padding-bottom: 92px;
	}

	.tth-hero__media::after {
		background: linear-gradient(180deg,
			rgba(10, 22, 38, .78) 0%,
			rgba(10, 22, 38, .62) 55%,
			rgba(10, 22, 38, .85) 100%);
	}

	.tth-hero__video {
		right: auto;
		bottom: 26px;
		left: 20px;
	}

	.tth-story {
		grid-template-columns: 1fr;
	}

	.tth-story__media {
		min-height: 380px;
	}

	.tth-story__text {
		padding: 56px 0 62px;
	}

	.tth-story__inner {
		max-width: none;
		padding-right: 20px;
		padding-left: 20px;
	}

	.tth-benefits__list {
		grid-template-columns: 1fr;
	}

	.tth-problems__list,
	.tth-promise__list {
		grid-template-columns: 1fr;
	}

	.tth-promise__item {
		padding: 32px 24px 34px;
	}

	.tth-benefits__card {
		min-height: 300px;
	}

	.tth-news__list {
		grid-template-columns: 1fr;
	}

	.tth-series {
		padding-bottom: 52px;
	}

	.tth-series__panel {
		padding: 24px 20px 26px;
	}

	.tth-series__actions .tth-btn {
		flex: 1 1 100%;
		text-align: center;
	}

	.tth-problems,
	.tth-benefits,
	.tth-props,
	.tth-gallery,
	.tth-life,
	.tth-journey,
	.tth-promise,
	.tth-testi,
	.tth-news {
		padding: 58px 0 64px;
	}
}

@media (max-width: 640px) {
	.tth-stats__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.tth-stats__item {
		padding: 26px 12px 28px;
	}

	.tth-stats__item:nth-child(odd) {
		border-left: 0;
	}

	.tth-stats__item:nth-child(n + 3) {
		border-top: 1px solid rgba(240, 164, 94, .26);
	}

	.tth-hero__actions .tth-btn {
		width: 100%;
		text-align: center;
	}

	.tth-sec-head--row {
		flex-direction: column;
		align-items: flex-start;
	}

	.tth-life__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.tth-journey__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 0;
	}

	.tth-rail {
		padding: 0 20px;
	}

	.tth-rail__nav {
		display: none;
	}

	.tth-lb {
		padding: 56px 16px 88px;
	}

	.tth-lb__stage img {
		max-height: calc(100vh - 200px);
	}

	/* Màn hẹp không đủ chỗ hai bên — đưa nút chuyển ảnh xuống đáy. */
	.tth-lb__nav {
		top: auto;
		bottom: 20px;
	}

	.tth-lb__nav--prev {
		left: calc(50% - 54px);
	}

	.tth-lb__nav--next {
		right: calc(50% - 54px);
	}

	/* Thẻ cảm nhận có video: màn hẹp thì ảnh nằm trên, chữ nằm dưới. */
	.tth-testi__card {
		flex-direction: column;
	}

	.tth-testi__media {
		flex: 0 0 auto;
		aspect-ratio: 16 / 10;
	}

	.tth-testi__body {
		padding: 24px 22px 22px;
	}
}