/* ==========================================================================
   TRANG CHỦ — namespace .nt-*
   Port từ giao diện tham chiếu Wolf Arch (giao_dien/), tone màu đen nhám.
   Mọi selector đều nằm trong .nt-home nên không ảnh hưởng Header, Footer,
   trang sản phẩm, giỏ hàng, thanh toán, blog hay các trang khác.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
.nt-home {
	--nt-ink: #141414;        /* đen nhám — màu nhấn: eyebrow, nút, icon */
	--nt-heading: #3a3a3a;    /* nền của tiêu đề, để phần <span> nổi lên */
	--nt-body: #6b6b6b;       /* chữ thân */
	--nt-border: #e5e5e5;
	--nt-surface: #f5f5f4;
	--nt-on-dark: #ffffff;
	--nt-radius: 8px;
}

/* --------------------------------------------------------------------------
   2. Typography dùng chung
   -------------------------------------------------------------------------- */
.nt-home .nt-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	color: var(--nt-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}


.nt-home .nt-h2 {
	margin: 0 0 18px;
	color: var(--nt-heading);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.nt-home .nt-h2 a {
	color: inherit;
}

.nt-home .nt-h2 a:hover {
	color: var(--nt-ink);
}

/* Phần nhấn trong tiêu đề: đen đậm + vệt highlight mảnh phía dưới. */
.nt-home .nt-h2 span {
	color: var(--nt-ink);
	background-image: linear-gradient(to top, rgba(20, 20, 20, 0.10) 0 0.30em, transparent 0.30em);
}

.nt-home .nt-desc {
	color: var(--nt-body);
	font-size: 16px;
	line-height: 1.75;
}

.nt-home .nt-desc p:last-child {
	margin-bottom: 0;
}

.nt-home .nt-section__head {
	margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   3. Nút
   -------------------------------------------------------------------------- */
.nt-home .button.nt-btn {
	position: relative;
	z-index: 0;
	overflow: hidden;
	margin-bottom: 0;
	padding: 0 30px;
	border-radius: 0;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 46px;
	min-height: 46px;
	text-transform: none;
	transition: color .4s ease-in-out, border-color .4s ease-in-out;
}

/* Lớp phủ trượt chéo — tái hiện hiệu ứng hover của bản gốc. */
.nt-home .button.nt-btn::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -15%;
	z-index: -1;
	width: 0;
	height: 106%;
	transform: skew(45deg);
	transition: width .4s ease-in-out, transform .4s ease-in-out, left .4s ease-in-out;
}

.nt-home .button.nt-btn:hover::after,
.nt-home .button.nt-btn:focus-visible::after {
	left: 0;
	width: 100%;
	transform: skew(0deg);
}

.nt-home .button.nt-btn--solid {
	background-color: var(--nt-ink);
	border: 1px solid var(--nt-ink);
	color: #fff;
}

.nt-home .button.nt-btn--solid::after {
	background-color: #fff;
}

.nt-home .button.nt-btn--solid:hover,
.nt-home .button.nt-btn--solid:focus-visible {
	color: var(--nt-ink);
}

.nt-home .button.nt-btn--ghost {
	background-color: #fff;
	border: 1px solid var(--nt-ink);
	color: var(--nt-ink);
}

.nt-home .button.nt-btn--ghost::after {
	background-color: var(--nt-ink);
}

.nt-home .button.nt-btn--ghost:hover,
.nt-home .button.nt-btn--ghost:focus-visible {
	color: #fff;
}

/* Nút dạng liên kết "Đọc thêm bài viết" */
.nt-home .button.nt-btn--more {
	margin-bottom: 0;
	color: var(--nt-ink);
	font-size: 17px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.nt-home .button.nt-btn--more span {
	position: relative;
	padding-bottom: 3px;
}

.nt-home .button.nt-btn--more span::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60%;
	height: 2px;
	background-color: currentColor;
	transition: width .3s ease-in-out;
}

.nt-home .button.nt-btn--more:hover span::after {
	width: 100%;
}

/* --------------------------------------------------------------------------
   4. Section 01 — Hero
   -------------------------------------------------------------------------- */
.nt-hero {
	overflow: hidden;
}

/* Lớp phủ chuyển sắc phía trái: bảo đảm chữ trắng luôn đọc được kể cả
   khi ảnh nền sáng. Chỉ phủ nửa trái nên vẫn thấy rõ ảnh bên phải. */
.nt-hero .nt-hero__slide .banner-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(100deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.08) 78%);
}

/* .banner-layers đứng sau .banner-bg trong DOM nên vốn đã nằm trên;
   nâng z-index để chắc chắn lớp phủ không bao giờ che mất chữ. */
.nt-hero .nt-hero__slide .banner-layers {
	z-index: 2;
}

.nt-hero .nt-hero__box {
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.nt-hero .nt-hero__slide,
.nt-hero .nt-hero__slide .banner-inner {
	min-height: 100vh;
}

.nt-hero .nt-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nt-hero .nt-hero__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 2px;
	background-color: currentColor;
}

.nt-hero .nt-hero__title {
	max-width: 700px;
	margin: 0 0 30px;
	color: #fff;
	font-size: 55px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.nt-hero .nt-hero__desc {
	max-width: 600px;
	margin-bottom: 30px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 22px;
	line-height: 1.6;
}

.nt-hero .nt-hero__box .button.nt-btn--solid {
	background-color: #fff;
	border-color: #fff;
	color: var(--nt-ink);
}

.nt-hero .nt-hero__box .button.nt-btn--solid::after {
	background-color: var(--nt-ink);
}

.nt-hero .nt-hero__box .button.nt-btn--solid:hover {
	border-color: var(--nt-ink);
	color: #fff;
}

/* --------------------------------------------------------------------------
   5. Section 02 — Về chúng tôi
   -------------------------------------------------------------------------- */
/* Anh nen hoa tiet: ban goc dung background-position:left center;
   background-size:contain. Flatsome render section-bg bang <img> nen
   phai chinh object-fit thay vi background-size. */
.nt-about .section-bg img {
	object-fit: contain;
	object-position: left center;
}

.nt-about__images > .col-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	align-items: start;
}

.nt-about__images .nt-about__img {
	margin: 0 !important;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.nt-about__images .nt-about__img:nth-child(2) {
	margin-top: 30px !important;
}

.nt-about__images .nt-about__img:nth-child(3) {
	margin-bottom: 30px !important;
}

.nt-about__images .nt-about__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.nt-about__images .nt-about__img:hover img {
	transform: scale(1.1);
}

/* [nt_about_posts] — lưới bento ảnh bài viết, dùng chung section 02 và 03.
   Nguyên tắc: KHUNG quyết định kích thước, ảnh chỉ lấp đầy khung
   (absolute + object-fit: cover) — ảnh đại diện tỉ lệ nào cũng ra
   cùng một bố cục, không hở, không lệch.
   Chia 2 cột (multi-column: ô 1-2 cột trái, ô 3-4 cột phải). Cột trái
   ô cao 4:5 trên ô thấp 4:3, cột phải đảo lại → tổng chiều cao 2 cột
   luôn bằng nhau, so le nhưng mép trên/dưới thẳng hàng.
   (Không dùng grid-rows fr: chiều cao sinh từ aspect-ratio không được
   tính là "xác định" nên các hàng co về 0.) */
.nt-post-tiles {
	grid-column: 1 / -1; /* chiếm trọn grid 2 cột sẵn có của .col-inner */
	columns: 2;
	column-gap: 16px;
}

/* Cột chứa lưới bento: tắt grid 2 cột cũ (viết cho 4 ux_image). Trong UX
   Builder element bị bọc thêm 1 lớp vỏ → grid-column ở trên không chạm tới
   được, lớp vỏ chỉ chiếm 1 ô và lưới co còn nửa chiều rộng. */
.nt-about__images > .col-inner:has(.nt-post-tiles),
.nt-why__images > .col-inner:has(.nt-post-tiles) {
	display: block;
}

/* :nth-child(n) chỉ để tăng độ ưu tiên, thắng các rule so le cũ của
   ux_image (.nt-about__img:nth-child(2) margin, .nt-why__img align-self). */
.nt-post-tiles > .nt-post-tile:nth-child(n) {
	position: relative;
	display: block;
	align-self: stretch;
	margin: 0 0 16px !important;
	break-inside: avoid;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--nt-radius);
	background: var(--nt-border); /* nền chờ khi ảnh chưa tải */
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	isolation: isolate; /* giữ bo góc khi ảnh scale trên Safari */
}

.nt-post-tiles .nt-post-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transition: transform .5s ease;
}

.nt-post-tiles .nt-post-tile:hover img {
	transform: scale(1.08);
}

.nt-post-tiles > .nt-post-tile:nth-child(1),
.nt-post-tiles > .nt-post-tile:nth-child(4) {
	aspect-ratio: 4 / 5;
}

.nt-post-tiles > .nt-post-tile:nth-child(2),
.nt-post-tiles > .nt-post-tile:nth-child(4) {
	margin-bottom: 0 !important;
}

.nt-post-tile__title {
	position: absolute;
	inset: auto 0 0;
	padding: 40px 16px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
}

/* Cắt dòng ở thẻ con: nếu đặt line-clamp cùng thẻ có padding, dòng thừa
   lọt vào vùng padding-bottom và vẫn lộ ra dưới dấu "…". */
.nt-post-tile__text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Điện thoại: ô chỉ rộng ~170px → chữ nhỏ lại, mọi ô tối đa 2 dòng + "…",
   để tiêu đề không che gần hết ảnh. */
@media (max-width: 549px) {
	.nt-post-tile__title {
		padding: 32px 10px 10px;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
		font-size: 13px;
		line-height: 1.35;
	}

	.nt-post-tile__text {
		-webkit-line-clamp: 2;
	}
}

.nt-post-tile:hover .nt-post-tile__title,
.nt-post-tile:focus-visible .nt-post-tile__title,
.nt-post-tiles--title-always .nt-post-tile__title {
	opacity: 1;
	transform: none;
}

/* Màn cảm ứng không có hover — luôn hiện tiêu đề. */
@media (hover: none) {
	.nt-post-tile__title {
		opacity: 1;
		transform: none;
	}
}

.nt-about .nt-stats {
	margin-top: 26px;
	margin-bottom: 26px;
}

.nt-about .nt-stat__num {
	font-variant-numeric: tabular-nums; /* chữ số đều bề rộng khi nhảy số */
	margin-bottom: 2px;
	color: var(--nt-ink);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
}

.nt-about .nt-stat__label {
	color: var(--nt-body);
	font-size: 15px;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   6. Section 03 — Tại sao chọn chúng tôi
   -------------------------------------------------------------------------- */
.nt-why {
	background-color: var(--nt-surface);
}

.nt-why .nt-why__item {
	margin-top: 18px;
	padding-top: 18px;
	align-items: center;
}

.nt-why .nt-why__item + .nt-why__item {
	border-top: 1px solid var(--nt-border);
}

/* Vòng tròn icon: nền xám, hover đổ đen nhám và icon chuyển trắng. */
.nt-why .nt-why__item .icon-box-img {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px !important;
	height: 60px;
	margin-right: 16px;
	border-radius: 50%;
	background-color: var(--nt-border);
	color: var(--nt-ink);
	overflow: hidden;
}

.nt-why .nt-why__item .icon-box-img::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: var(--nt-ink);
	transform: scale(0);
	transition: transform .3s ease-in-out;
}

.nt-why .nt-why__item .icon-box-img .icon,
.nt-why .nt-why__item .icon-box-img .icon-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .3s ease-in-out;
}

.nt-why .nt-why__item .icon-box-img svg {
	width: 28px;
	height: 28px;
}

.nt-why .nt-why__item:hover .icon-box-img::before {
	transform: scale(1);
}

.nt-why .nt-why__item:hover .icon-box-img {
	color: #fff;
}

.nt-why .nt-why__title {
	margin-bottom: 5px;
	color: var(--nt-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: none;
}

.nt-why .nt-why__item .icon-box-text {
	color: var(--nt-body);
	font-size: 15px;
	line-height: 1.65;
}

/* Lưới ảnh 2×2 so le */
.nt-why__images > .col-inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.nt-why__images .nt-why__img {
	margin: 0 !important;
	overflow: hidden;
	border-radius: var(--nt-radius);
}

.nt-why__images .nt-why__img:nth-child(2) {
	align-self: end;
}

.nt-why__images .nt-why__img:nth-child(3) {
	align-self: start;
}

.nt-why__images .nt-why__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   7. Section 04 — Dịch vụ
   -------------------------------------------------------------------------- */
.nt-service .nt-service__card {
	overflow: hidden;
	border-radius: var(--nt-radius);
}

/* Lớp phủ gradient từ đáy lên, giữ chữ đọc được trên mọi ảnh. */
.nt-service .nt-service__card .banner-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(360deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.12) 72%, transparent 100%);
	transition: opacity .3s ease-in-out;
}

.nt-service .nt-service__card .banner-layers {
	z-index: 2;
}

.nt-service .nt-service__card .banner-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease-in-out;
}

.nt-service .nt-service__card:hover .banner-bg img {
	transform: scale(1.1);
}

.nt-service .nt-service__box {
	padding-bottom: 20px;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.nt-service .nt-service__title {
	margin-bottom: 5px;
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
}

.nt-service .nt-service__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 72px;
	margin-bottom: 6px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	line-height: 1.55;
}

.nt-service .button.nt-service__link {
	position: relative;
	margin-bottom: 0;
	padding: 0;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	min-height: auto;
	line-height: 1.6;
}

.nt-service .button.nt-service__link span {
	position: relative;
	padding-bottom: 3px;
}

.nt-service .button.nt-service__link span::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80%;
	height: 2px;
	background-color: #fff;
	transition: width .3s ease-in-out;
}

.nt-service .button.nt-service__link:hover span::after {
	width: 100%;
}

/* [nt_service_posts] — card bài viết Dịch vụ. Cả card là 1 thẻ <a>;
   giao diện bám theo card ux_banner cũ (khung 10:16, gradient đáy). */
.nt-service .nt-service__card--post {
	position: relative;
	display: block;
	aspect-ratio: 10 / 16;
	color: #fff;
	background: var(--nt-ink);
	isolation: isolate;
}

.nt-service .nt-service__card--post .nt-service__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.nt-service .nt-service__card--post .nt-service__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .4s ease-in-out;
}

.nt-service .nt-service__card--post .nt-service__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(360deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.12) 72%, transparent 100%);
}

.nt-service .nt-service__card--post:hover .nt-service__media img {
	transform: scale(1.1);
}

.nt-service .nt-service__card--post .nt-service__box {
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: 0;
}

.nt-service .nt-service__card--post .nt-service__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nt-service .nt-service__card--post .nt-service__desc {
	margin-bottom: 8px;
}

.nt-service .nt-service__more {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
}

.nt-service .nt-service__more span {
	position: relative;
	display: inline-block;
	padding-bottom: 3px;
}

.nt-service .nt-service__more span::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 80%;
	height: 2px;
	background-color: #fff;
	transition: width .3s ease-in-out;
}

.nt-service .nt-service__card--post:hover .nt-service__more span::after {
	width: 100%;
}

/* --------------------------------------------------------------------------
   8. Section 05 — Dự án nổi bật
   -------------------------------------------------------------------------- */
.nt-projects-section .section-bg img {
	object-fit: contain;
	object-position: left center;
}

.nt-project {
	position: relative;
	overflow: hidden;
	border-radius: var(--nt-radius);
}

.nt-project__media {
	position: relative;
	aspect-ratio: 600 / 450;
	overflow: hidden;
	background-color: var(--nt-surface);
}

.nt-project__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0, transparent 100%);
}

.nt-project__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 3s ease;
}

.nt-project:hover .nt-project__img {
	transform: scale(1.05);
}

/* Link phủ cả box (nằm trên ảnh + phần chữ, dưới nút góc). */
.nt-project__cover {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* Nút góc: tròn nhỏ → bung vuông bo góc trong khi hover. */
.nt-project__corner {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background-color: var(--nt-ink);
	color: #fff;
	transition: all .45s ease;
}

.nt-project:hover .nt-project__corner {
	top: 0;
	right: 0;
	width: 65px;
	height: 65px;
	border-radius: 0 0 0 50px;
}

.nt-project__corner:hover {
	background-color: #000;
	color: #fff;
}

.nt-project__arrow {
	width: 24px;
	height: 24px;
}

.nt-project__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -62px;
	z-index: 2;
	box-sizing: border-box;
	padding: 16px;
	text-align: center;
	background-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.05) 2%, rgba(0, 0, 0, 0.78) 90%);
	transition: bottom .7s ease;
}

.nt-project:hover .nt-project__body {
	bottom: 0;
}

.nt-project__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.nt-project__title a {
	color: #fff;
}

.nt-project__title a:hover {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.nt-project__line {
	display: block;
	width: 60px;
	height: 1px;
	margin: 0 auto 18px;
	background-color: rgba(255, 255, 255, 0.35);
	transition: width .9s ease-in-out;
}

.nt-project:hover .nt-project__line {
	width: 100%;
}

.nt-project__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 45px;
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 15px;
	line-height: 1.5;
}

.nt-projects__empty {
	padding: 24px;
	border: 1px dashed var(--nt-border);
	color: var(--nt-body);
	text-align: center;
}

/* --------------------------------------------------------------------------
   9. Section 06 — Quy trình
   -------------------------------------------------------------------------- */
.nt-procedure {
	background-color: var(--nt-ink);
}

.nt-procedure .nt-eyebrow,
.nt-procedure .nt-h2,
.nt-procedure .nt-desc {
	color: #fff;
}

.nt-procedure .nt-h2 span {
	color: #fff;
	background-image: linear-gradient(to top, rgba(255, 255, 255, 0.18) 0 0.30em, transparent 0.30em);
}

.nt-procedure .nt-procedure__list {
	margin-top: 34px;
}

.nt-procedure .nt-step .icon-box-img {
	margin-bottom: 22px;
	color: #fff;
}

.nt-procedure .nt-step .icon-box-img svg {
	width: 60px;
	height: 60px;
}

.nt-procedure .nt-step__title {
	min-height: 44px;
	margin-bottom: 8px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: none;
}

.nt-procedure .nt-step .icon-box-text {
	color: rgba(255, 255, 255, 0.78);
	font-size: 15px;
	line-height: 1.65;
}

/* Thanh tiến trình nối các bước: vạch mờ chạy suốt hàng (đặt trên .col
   nên nối liền qua khoảng cách giữa các cột), mỗi bước có 1 chấm tròn. */
.nt-procedure .nt-step__col {
	position: relative;
}

.nt-procedure .nt-step__col::before,
.nt-procedure .nt-step__col::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 1px;
}

.nt-procedure .nt-step__col::before {
	right: 0;
	background: rgba(255, 255, 255, 0.15);
}

/* Phần sáng của vạch — JS thêm .is-inview để chạy từ trái sang phải. */
.nt-procedure .nt-step__col::after {
	width: 100%;
	background: #fff;
	transform-origin: left center;
	transition: transform .6s linear, height .3s ease, top .3s ease;
}

.nt-procedure .nt-step__col > .col-inner {
	padding-top: 34px;
}

.nt-procedure .nt-step__col > .col-inner::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 11px;
	height: 11px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--nt-ink);
	transition: background-color .3s ease, transform .3s ease;
}

.nt-procedure .nt-step .icon-box-img {
	transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

/* Hover: icon nhấc lên, chấm tròn đặc lại, đoạn vạch của bước dày hơn. */
.nt-procedure .nt-step__col:hover .icon-box-img {
	transform: translateY(-6px) rotate(-6deg);
}

.nt-procedure .nt-step__col:hover > .col-inner::before {
	background: #fff;
	transform: scale(1.25);
}

.nt-procedure .nt-step__col:hover::after {
	top: -1px;
	height: 3px;
}

/* Hiện dần — chỉ khi JS đã chạy (html.nt-anim), để không JS vẫn thấy đủ. */
.nt-anim .nt-steps--anim .nt-step__col::after {
	transform: scaleX(0);
}

.nt-anim .nt-steps--anim .nt-step__col > .col-inner::before {
	transform: scale(0);
}

.nt-anim .nt-steps--anim .nt-step {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .6s ease, transform .6s ease;
}

.nt-anim .nt-steps--anim.is-inview .nt-step__col::after {
	transform: scaleX(1);
}

.nt-anim .nt-steps--anim.is-inview .nt-step__col > .col-inner::before {
	transform: scale(1);
}

.nt-anim .nt-steps--anim.is-inview .nt-step__col:hover > .col-inner::before {
	transform: scale(1.25);
}

.nt-anim .nt-steps--anim.is-inview .nt-step {
	opacity: 1;
	transform: none;
}

/* Lần lượt: vạch chạy tới bước nào thì chấm + nội dung bước đó hiện. */
.nt-anim .nt-steps--anim.is-inview:not(.is-done) .nt-step__col:nth-child(2)::after { transition-delay: .6s, 0s, 0s; }
.nt-anim .nt-steps--anim.is-inview:not(.is-done) .nt-step__col:nth-child(3)::after { transition-delay: 1.2s, 0s, 0s; }
.nt-anim .nt-steps--anim.is-inview:not(.is-done) .nt-step__col:nth-child(4)::after { transition-delay: 1.8s, 0s, 0s; }

.nt-anim .nt-steps--anim.is-inview:not(.is-done) .nt-step__col:nth-child(2) > .col-inner::before,
.nt-anim .nt-steps--anim.is-inview:not(.is-done) .nt-step__col:nth-child(2) .nt-step { transition-delay: .6s; }
.nt-anim .nt-steps--anim.is-inview:not(.is-done) .nt-step__col:nth-child(3) > .col-inner::before,
.nt-anim .nt-steps--anim.is-inview:not(.is-done) .nt-step__col:nth-child(3) .nt-step { transition-delay: 1.2s; }
.nt-anim .nt-steps--anim.is-inview:not(.is-done) .nt-step__col:nth-child(4) > .col-inner::before,
.nt-anim .nt-steps--anim.is-inview:not(.is-done) .nt-step__col:nth-child(4) .nt-step { transition-delay: 1.8s; }

/* --------------------------------------------------------------------------
   10. Section 07 — Tin mới nhất
   -------------------------------------------------------------------------- */
.nt-blog .nt-blog__grid {
	margin-top: 26px;
}

.nt-blog .nt-blog__grid .box-image {
	border-radius: var(--nt-radius);
	overflow: hidden;
}

.nt-blog .nt-blog__grid .box-image img {
	transition: transform .5s ease;
}

.nt-blog .nt-blog__grid .box:hover .box-image img {
	transform: scale(1.06);
}

.nt-blog .nt-blog__title {
	margin: 10px 0 6px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: 0;
}

.nt-blog .nt-blog__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--nt-heading);
}

.nt-blog .nt-blog__title a:hover {
	color: var(--nt-ink);
}

.nt-blog .nt-blog__grid .from_the_blog_excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #333;
	font-size: 15px;
	line-height: 1.6;
}

/* Flatsome xuat DOM theo thu tu: tieu de > ngay > divider > mo ta.
   Ban goc la: tieu de > mo ta > ngay. Dung flex order de sap lai,
   khong dong vao template cua theme cha. */
.nt-blog .nt-blog__grid .blog-post-inner {
	display: flex;
	flex-direction: column;
}

.nt-blog .nt-blog__title {
	order: 1;
}

.nt-blog .nt-blog__grid .from_the_blog_excerpt {
	order: 2;
}

.nt-blog .nt-blog__grid .post-meta {
	order: 3;
	margin-top: 2px;
	color: #848484;
	font-size: 14px;
	opacity: 1;
}

.nt-blog .nt-blog__grid .is-divider {
	display: none;
}

/* --------------------------------------------------------------------------
   11. Section 08 — CTA Liên hệ
   -------------------------------------------------------------------------- */
.nt-cta .section-bg {
	background-repeat: repeat;
}

.nt-cta__title {
	margin: 0 0 16px;
	color: var(--nt-ink);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.25;
}

.nt-cta__desc {
	max-width: 680px;
	margin: 0 auto 34px;
	color: var(--nt-body);
	font-size: 17px;
	line-height: 1.7;
}

.nt-cta .nt-cta__btn {
	margin: 0 6px;
	padding: 0 40px;
	min-height: 54px;
	line-height: 54px;
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */

/* --- Tablet (≤ 991px) --- */
@media (max-width: 991px) {

	.nt-home .nt-h2 {
		font-size: 34px;
	}

	.nt-hero .nt-hero__title {
		font-size: 42px;
	}

	.nt-hero .nt-hero__desc {
		font-size: 19px;
	}

	/* Blog: cuộn ngang như bản gốc (wolf-scroll-tab) */
	.nt-blog .nt-blog__grid {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding-bottom: 10px;
	}

	.nt-blog .nt-blog__grid > .col {
		flex: 0 0 auto;
		width: 58%;
		max-width: 58%;
		scroll-snap-align: start;
	}

	.nt-blog .nt-blog__grid::-webkit-scrollbar {
		height: 4px;
	}

	.nt-blog .nt-blog__grid::-webkit-scrollbar-thumb {
		background-color: #828282;
	}

	.nt-blog .nt-blog__grid::-webkit-scrollbar-track {
		background-color: #e0e0e0;
	}
}

/* --- Mobile (≤ 767px) --- */
@media (max-width: 767px) {

	.nt-home .nt-h2 {
		font-size: 30px;
	}

	.nt-home .nt-eyebrow {
		font-size: 15px;
	}

	.nt-hero .nt-hero__slide,
	.nt-hero .nt-hero__slide .banner-inner {
		min-height: 80vh;
	}

	.nt-hero .nt-hero__title {
		font-size: 26px;
		line-height: 1.3;
		margin-bottom: 20px;
	}

	.nt-hero .nt-hero__eyebrow {
		font-size: 14px;
		margin-bottom: 15px;
	}

	.nt-hero .nt-hero__desc {
		font-size: 16px;
		margin-bottom: 20px;
	}

	.nt-about .nt-stat__num {
		font-size: 26px;
	}

	.nt-about .nt-stat__label {
		font-size: 13px;
	}

	.nt-cta__title {
		font-size: 30px;
	}

	.nt-cta .nt-cta__btn {
		display: block;
		width: 100%;
		margin: 0 0 14px;
	}

	/* Dịch vụ + Quy trình: cuộn ngang như bản gốc (wolf-scroll-mb) */
	.nt-service .nt-service__grid,
	.nt-procedure .nt-procedure__list {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding-bottom: 10px;
		scrollbar-width: none;
	}

	.nt-service .nt-service__grid::-webkit-scrollbar,
	.nt-procedure .nt-procedure__list::-webkit-scrollbar {
		display: none;
	}

	.nt-service .nt-service__grid > .col,
	.nt-procedure .nt-procedure__list > .col {
		flex: 0 0 auto;
		width: 68%;
		max-width: 68%;
		scroll-snap-align: start;
	}

	.nt-blog .nt-blog__grid > .col {
		width: 78%;
		max-width: 78%;
	}
}

/* --- Màn hình rất nhỏ (≤ 374px) --- */
@media (max-width: 374px) {

	.nt-home .nt-h2 {
		font-size: 26px;
	}

	.nt-hero .nt-hero__title {
		font-size: 23px;
	}
}

/* --------------------------------------------------------------------------
   13. Ưu tiên chuyển động giảm
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.nt-home *,
	.nt-home *::before,
	.nt-home *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   HEADER & FOOTER
   Header/Footer là thành phần toàn site nên buộc phải dùng class của Flatsome.
   Giữ gọn trong #masthead / .footer-wrapper để không lan sang nội dung trang.
   ========================================================================== */

/* --------------------------------------------------------------------------
   H1. Header
   -------------------------------------------------------------------------- */

/* Menu căn giữa: cột trái có flex-grow khi logo đặt bên trái. */
/* Menu 9 mục không được xuống dòng.
   LƯU Ý: tuyệt đối KHÔNG đặt overflow (kể cả overflow-x) lên <ul> này.
   Trong CSS, overflow-x khác 'visible' sẽ ép overflow-y thành 'auto',
   và menu con định vị tuyệt đối sẽ bị cắt mất hoàn toàn.
   Khi hẹp thì thu nhỏ khoảng cách (xem media query bên dưới), không cuộn. */
#masthead .flex-left.flex-grow {
	min-width: 0;
}

#masthead .flex-left.flex-grow > .header-nav-main {
	justify-content: center;
	flex-wrap: nowrap;
	width: 100%;
}

#masthead .flex-left.flex-grow > .header-nav-main > li {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Nền tối để logo SpaceHome (chữ trắng bạc, nền trong suốt) nổi rõ. */
#header #masthead,
#header #masthead .header-bg-color {
	background-color: #111;
}

#header #masthead {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Khi cuộn (sticky): hơi trong suốt + làm mờ nền phía sau. */
#header.stuck #masthead,
#header .stuck #masthead,
#header #masthead.stuck {
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

#header .stuck .header-bg-color,
#header.stuck .header-bg-color {
	background-color: rgba(17, 17, 17, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

#masthead #logo img {
	width: auto;
	max-width: 210px;
	max-height: 52px;
	height: auto;
}

#header .stuck #logo img,
#header.stuck #logo img {
	max-height: 42px;
}

/* Mục menu cấp 1: chữ trắng dịu, hover/đang xem thì trắng hẳn + gạch chân
   mở từ giữa ra. */
#masthead .header-nav-main > li > a {
	position: relative;
	padding-left: 11px;
	padding-right: 11px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	transition: color .2s ease;
}

#masthead .flex-left.flex-grow > .header-nav-main > li > a::after {
	content: "";
	position: absolute;
	left: 11px;
	right: 11px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background-color: #fff;
	transform: scaleX(0);
	transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

#masthead .flex-left.flex-grow > .header-nav-main > li:hover > a::after,
#masthead .flex-left.flex-grow > .header-nav-main > li.current-dropdown > a::after,
#masthead .flex-left.flex-grow > .header-nav-main > li.current-menu-item > a::after,
#masthead .flex-left.flex-grow > .header-nav-main > li.current-menu-ancestor > a::after,
#masthead .flex-left.flex-grow > .header-nav-main > li.current-menu-parent > a::after {
	transform: scaleX(1);
}

#masthead .header-nav-main > li.current-menu-item > a,
#masthead .header-nav-main > li.current-menu-ancestor > a,
#masthead .header-nav-main > li.current-menu-parent > a,
#masthead .header-nav-main > li.current-dropdown > a {
	color: #fff;
}

#masthead .header-nav-main > li > a .icon-angle-down {
	margin-left: 3px;
	opacity: 0.6;
	font-size: 0.85em;
	transition: transform .25s ease, opacity .2s ease;
}

#masthead .header-nav-main > li:hover > a .icon-angle-down,
#masthead .header-nav-main > li.current-dropdown > a .icon-angle-down {
	opacity: 1;
	transform: rotate(180deg);
}

/* Icon tìm kiếm / giỏ hàng / menu mobile. */
#masthead .flex-right .nav > li > a,
#masthead .flex-right .nav > li > a i,
#masthead .show-for-medium .nav > li > a,
#masthead .show-for-medium .nav > li > a i {
	color: rgba(255, 255, 255, 0.85);
}

#masthead .flex-right .nav > li > a:hover,
#masthead .flex-right .nav > li > a:hover i,
#masthead .show-for-medium .nav > li > a:hover i {
	color: #fff;
}

#masthead .flex-right .nav > li > a::after {
	display: none;
}

#masthead .cart-icon strong,
#masthead .header-cart-link .icon-shopping-bag + span,
#masthead [data-icon-label]::after {
	border-color: #fff;
	background-color: #fff;
	color: #111;
}

/* Gạch dọc ngăn menu và cụm icon. */
#masthead .flex-right .header-nav-main {
	padding-left: 14px;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* Mục đầu/cuối không cần đệm ngoài rìa */
#masthead .flex-left.flex-grow > .header-nav-main > li:first-child > a {
	padding-left: 0;
}

#masthead .flex-left.flex-grow > .header-nav-main > li:first-child > a::after {
	left: 0;
}

#masthead .flex-left.flex-grow > .header-nav-main > li:last-child > a {
	padding-right: 0;
}

#masthead .flex-left.flex-grow > .header-nav-main > li:last-child > a::after {
	right: 0;
}

#masthead .header-nav-main > li > a:hover {
	color: #fff;
}

/* Màn hình hẹp (vẫn là menu desktop): thu khoảng cách và cỡ chữ cho vừa
   9 mục, thay vì cho cuộn ngang. */
@media (max-width: 1199px) {

	#masthead #logo img {
		max-width: 170px;
		max-height: 44px;
	}

	#masthead .header-nav-main > li > a {
		padding-left: 6px;
		padding-right: 6px;
		font-size: 13.5px;
	}

	#masthead .flex-left.flex-grow > .header-nav-main > li > a::after {
		left: 6px;
		right: 6px;
	}
}

/* Dưới 1100px: 9 mục menu không còn đủ chỗ — mục cuối đè lên nhóm icon
   tìm kiếm/tài khoản/giỏ hàng. Chuyển sang menu mobile sớm hơn mốc 850px
   mặc định của Flatsome, và xếp lại logo vào giữa đúng như bố cục mobile
   của theme (lớp medium-logo-center). */
@media (max-width: 1099px) {

	#masthead .header-inner > .flex-col.hide-for-medium {
		display: none !important;
	}

	#masthead .header-inner > .flex-col.show-for-medium {
		display: flex !important;
	}

	#masthead .header-inner .flex-left {
		flex: 1 1 0;
		order: 1;
	}

	#masthead .header-inner .logo {
		order: 2;
		margin: 0 15px;
		text-align: center;
	}

	#masthead .header-inner .logo img {
		margin: 0 auto;
	}

	#masthead .header-inner .flex-right {
		flex: 1 1 0;
		order: 3;
	}
}

/* --------------------------------------------------------------------------
   H1b. Dropdown & Mega menu (desktop)
   Khung trắng bo góc, viền mảnh, bóng mềm; hiện ra kèm trượt nhẹ.
   Mục con không kẻ vạch, hover nền xám nhạt + gạch dẫn trượt vào.
   -------------------------------------------------------------------------- */
#masthead .header-nav-main .nav-dropdown {
	min-width: 248px;
	padding: 10px;
	border: 1px solid #ececec;
	border-radius: 12px;
	background-color: #fff;
	box-shadow: 0 24px 48px -12px rgba(20, 20, 20, 0.16), 0 2px 6px rgba(20, 20, 20, 0.04);
	transform: translateY(10px);
	transition: opacity .25s ease, visibility .25s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
}

#masthead .header-nav-main li.current-dropdown > .nav-dropdown,
#masthead .header-nav-main li.has-dropdown:hover > .nav-dropdown {
	transform: translateY(0);
}

/* Mũi tên nhỏ khớp màu viền mới. */
.nav-dropdown-has-arrow.nav-dropdown-has-border #masthead li.has-dropdown:before {
	border-bottom-color: #ececec;
	border-width: 9px;
	margin-left: -9px;
	bottom: -1px;
}

.nav-dropdown-has-arrow #masthead li.has-dropdown:after {
	bottom: -2px;
}

/* Mục trong dropdown thường (Tin tức, Dự án, Dịch vụ). */
#masthead .nav-dropdown.nav-dropdown-default > li > a {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 11px 14px;
	border: 0;
	border-radius: 8px;
	color: #4a4a4a;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
	transition: background-color .2s ease, color .2s ease, padding-left .25s ease;
}

#masthead .nav-dropdown.nav-dropdown-default > li > a::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 1.5px;
	margin-right: 0;
	background-color: currentColor;
	transition: width .25s ease, margin-right .25s ease;
}

#masthead .nav-dropdown.nav-dropdown-default > li > a:hover,
#masthead .nav-dropdown.nav-dropdown-default > li.current-menu-item > a {
	background-color: #f5f5f4;
	color: #141414;
}

#masthead .nav-dropdown.nav-dropdown-default > li > a:hover::before,
#masthead .nav-dropdown.nav-dropdown-default > li.current-menu-item > a::before {
	width: 14px;
	margin-right: 10px;
}

/* ---------- Mega menu "Sản phẩm": 7 cột ---------- */
/* Neo mega menu vào khung header (không phải vào mục "Sản phẩm") để nó
   rộng bằng container và luôn nằm gọn trong màn hình. */
#masthead .header-inner {
	position: relative;
}

#masthead .header-nav-main,
#masthead .header-nav-main > li.has-dropdown:has(> .nav-dropdown > li.nav-dropdown-col) {
	position: static;
}

#masthead .header-nav-main > li.has-dropdown > .nav-dropdown:has(> li.nav-dropdown-col) {
	top: 100%;
	left: 15px !important;
	right: 15px;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, max-content));
	justify-content: space-between;
	column-gap: 0;
	width: auto;
	padding: 30px 12px 26px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Khi ẩn, Flatsome đẩy dropdown ra left:-99999px — giữ nguyên để không
   chặn chuột; chỉ neo lại khi đang mở. */
#masthead .header-nav-main > li.has-dropdown:not(.current-dropdown):not(:hover) > .nav-dropdown:has(> li.nav-dropdown-col) {
	left: -99999px !important;
	right: auto;
}

/* Cầu nối vô hình giữa mục menu và mega menu (mega nằm dưới mép header,
   thấp hơn đáy mục menu) để rê chuột xuống không bị đóng. */
#masthead .nav-dropdown:has(> li.nav-dropdown-col)::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 28px;
}

/* Mũi tên không còn nằm dưới mục menu → ẩn, giống kiểu mega full-width của Flatsome. */
#masthead .header-nav-main > li.has-dropdown:has(> .nav-dropdown > li.nav-dropdown-col)::before,
#masthead .header-nav-main > li.has-dropdown:has(> .nav-dropdown > li.nav-dropdown-col)::after {
	display: none;
}

#masthead .nav-dropdown:has(> li.nav-dropdown-col) > li {
	display: block;
	width: auto;
	min-width: 0;
	padding: 0 18px;
	border-left: 1px solid #f0f0f0;
	white-space: normal;
}

#masthead .nav-dropdown:has(> li.nav-dropdown-col) > li:first-child {
	border-left: 0;
}

/* Tiêu đề cột (cấp 2). */
#masthead .nav-dropdown:has(> li.nav-dropdown-col) > li > a {
	position: relative;
	display: block;
	margin: 0 0 14px;
	padding: 0 0 12px;
	border: 0;
	border-radius: 0;
	background: none;
	color: #141414;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.06em;
	white-space: nowrap;
	text-transform: uppercase;
}

#masthead .nav-dropdown:has(> li.nav-dropdown-col) > li > a::before {
	display: none;
}

#masthead .nav-dropdown:has(> li.nav-dropdown-col) > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 22px;
	height: 2px;
	background-color: #141414;
	transition: width .3s ease;
}

#masthead .nav-dropdown:has(> li.nav-dropdown-col) > li > a:hover {
	background: none;
	color: #141414;
}

#masthead .nav-dropdown:has(> li.nav-dropdown-col) > li:hover > a::after {
	width: 44px;
}

/* Mục con (cấp 3). */
#masthead .nav-dropdown .nav-column {
	padding: 0;
}

#masthead .nav-dropdown .nav-column li > a {
	position: relative;
	display: block;
	margin: 0;
	padding: 6px 0;
	border: 0;
	color: #6b6b6b;
	white-space: nowrap;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: 0;
	transition: color .2s ease, transform .25s ease;
}

#masthead .nav-dropdown .nav-column li > a:hover,
#masthead .nav-dropdown .nav-column li.current-menu-item > a {
	color: #141414;
	transform: translateX(4px);
}

/* Màn 1100–1365px: thu khoảng cách để 7 cột vừa khung. */
@media (max-width: 1365px) {

	#masthead .header-nav-main > li.has-dropdown > .nav-dropdown:has(> li.nav-dropdown-col) {
		padding: 26px 4px 22px;
	}

	#masthead .nav-dropdown:has(> li.nav-dropdown-col) > li {
		padding: 0 13px;
	}

	#masthead .nav-dropdown:has(> li.nav-dropdown-col) > li > a {
		font-size: 11.5px;
		letter-spacing: 0.04em;
	}

	#masthead .nav-dropdown .nav-column li > a {
		font-size: 13.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#masthead .header-nav-main .nav-dropdown,
	#masthead .nav-dropdown a,
	#masthead .nav-dropdown a::before,
	#masthead .nav-dropdown a::after {
		transition: none;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   H2. Footer
   -------------------------------------------------------------------------- */
.footer-wrapper .footer-1 {
	padding-top: 56px;
	padding-bottom: 40px;
}

.footer-wrapper .footer-1 .widget-title {
	display: block;
	margin-bottom: 16px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.footer-wrapper .footer-1 .menu li a {
	padding: 7px 0;
	border: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	transition: color .25s ease;
}

.footer-wrapper .footer-1 .menu li a:hover {
	color: #fff;
	padding-left: 4px;
}

.footer-wrapper .nt-foot__desc {
	margin-bottom: 18px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	line-height: 1.7;
}

.footer-wrapper .nt-foot__info {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.footer-wrapper .nt-foot__info li {
	margin-bottom: 9px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	line-height: 1.6;
}

.footer-wrapper .nt-foot__info strong {
	color: #fff;
	font-weight: 600;
}

.footer-wrapper .nt-foot__info a {
	color: rgba(255, 255, 255, 0.72);
}

.footer-wrapper .nt-foot__info a:hover {
	color: #fff;
}

.footer-wrapper .nt-foot__social .button.icon {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.footer-wrapper .nt-foot__social .button.icon:hover {
	background-color: #fff;
	border-color: #fff;
	color: #141414;
}

@media (max-width: 767px) {

	.footer-wrapper .footer-1 {
		padding-top: 40px;
		padding-bottom: 28px;
	}
}

/* ==========================================================================
   TRANG DỰ ÁN — danh mục (/loai-du-an/…, /du-an/) + chi tiết (/du-an/…)
   Port từ biet-thu-nha-pho.html và garden-house-….html, cùng tone đen nhám.
   Template: archive-du_an.php, taxonomy-loai_du_an.php, single-du_an.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   P1. Tokens
   -------------------------------------------------------------------------- */
.nt-pjcrumb,
.nt-pjlist,
.nt-pjsingle {
	--nt-ink: #141414;
	--nt-text: #212529;       /* chữ thân của bản gốc */
	--nt-muted: #6d6e72;
	--nt-line: #eaf0ec;       /* --border-color của bản gốc */
	--nt-radius-lg: 16px;     /* rounded-4 */
	--nt-radius-md: 8px;      /* rounded-3 */
}

/* --------------------------------------------------------------------------
   P2. Dải breadcrumb ảnh nền
   Bản gốc: padding 200px 0 110px vì header trong suốt đè lên 90px đầu.
   Header site này nền trắng, không đè, nên bỏ phần 90px đó.
   -------------------------------------------------------------------------- */
.nt-pjcrumb {
	padding: 110px 0;
	border-bottom: 1px solid var(--nt-line);
	background: #1d2328 url(../img/nt-breadcrumb.jpg) center / cover no-repeat fixed;
	color: #fff;
	text-align: center;
}

.nt-pjcrumb .nt-pjcrumb__title {
	margin: 0 0 8px;
	color: #fff;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

.nt-pjcrumb__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
}

.nt-pjcrumb__list li {
	margin: 0;
	color: #fff;
}

.nt-pjcrumb__list li + li::before {
	content: "/";
	padding: 0 8px;
	color: #fff;
}

.nt-pjcrumb__list a {
	color: #fff;
	transition: opacity .2s ease;
}

.nt-pjcrumb__list a:hover,
.nt-pjcrumb__list a:focus-visible {
	color: #fff;
	opacity: .7;
}

/* --------------------------------------------------------------------------
   P3. Danh mục — tab loại dự án
   -------------------------------------------------------------------------- */
.nt-pjlist {
	margin: 16px 0;
}

.nt-pjtabs {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 24px 0;
	padding: 0;
	list-style: none;
}

.nt-pjtabs li {
	margin: 0;
}

.nt-pjtabs__link {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--nt-ink);
	border-radius: 6px;
	background-color: var(--nt-ink);
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	white-space: nowrap;
	transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

/* Tab đang xem dùng trạng thái hover của bản gốc — bản gốc không đánh dấu
   tab hiện tại, nhưng không có thì người xem không biết mình đang ở đâu. */
.nt-pjtabs__link:hover,
.nt-pjtabs__link:focus-visible,
.nt-pjtabs__link[aria-current="page"] {
	background-color: #fff;
	color: var(--nt-ink);
}

/* --------------------------------------------------------------------------
   P4. Danh mục — lưới + thẻ dự án
   -------------------------------------------------------------------------- */
.nt-pjgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 16px;
	margin-bottom: 24px;
}

.nt-pjcard__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 600 / 450;
	border-radius: var(--nt-radius-lg);
	background-color: #f5f5f4;
}

.nt-pjcard__media .nt-pjcard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.nt-pjcard__body {
	margin-top: 8px;
}

.nt-pjcard .nt-pjcard__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 42px;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

.nt-pjcard__title a {
	color: var(--nt-text);
}

.nt-pjcard__title a:hover,
.nt-pjcard__title a:focus-visible {
	color: var(--nt-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nt-pjcard__type {
	margin-top: 3px;
	color: var(--nt-muted);
	font-size: 15px;
	line-height: 1.5;
}

.nt-pjlist__empty {
	margin-bottom: 16px;
	padding: 16px;
	border: 1px solid #f1aeb5;
	border-radius: 6px;
	background-color: #f8d7da;
	color: #58151c;
}

/* --------------------------------------------------------------------------
   P5. Phân trang
   -------------------------------------------------------------------------- */
.nt-pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.nt-pager li {
	margin: 0;
}

.nt-pager .nt-pager__link {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 50px;
	padding: 5px 10px;
	border: 1px solid transparent;
	border-radius: var(--nt-radius-lg, 16px);
	background-color: #fff;
	color: var(--nt-text, #212529);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	transition: background-color .15s ease, border-color .15s ease;
}

.nt-pager .is-disabled .nt-pager__link {
	background-color: #e9ecef;
	color: #212529;
}

.nt-pager .is-active .nt-pager__link,
.nt-pager a.nt-pager__link:hover,
.nt-pager a.nt-pager__link:focus-visible {
	background-color: rgba(19, 19, 19, 0.06);
	border-color: var(--nt-line, #eaf0ec);
	color: var(--nt-text, #212529);
}

.nt-pager .nt-pager__link svg {
	width: 24px;
	height: 24px;
}

/* --------------------------------------------------------------------------
   P6. Chi tiết dự án
   -------------------------------------------------------------------------- */
.nt-pjsingle {
	margin: 24px 0;
}

.nt-pjsingle > .container {
	margin-bottom: 16px;
}

.nt-pjsingle__head {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--nt-line);
}

.nt-pjsingle .nt-pjsingle__title {
	margin: 0;
	color: var(--nt-text);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.nt-pjsingle__lead {
	margin-top: 16px;
	color: rgba(33, 37, 41, 0.75);
}

.nt-pjsingle__lead p:last-child {
	margin-bottom: 0;
}

.nt-pjsingle__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}

.nt-pjsingle .nt-pjsingle__subtitle {
	margin: 0 0 16px;
	color: var(--nt-text);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

/* Khối "Thông tin dự án" — bản gốc nền vàng đồng 8%, ở đây đổi sang đen nhám. */
.nt-pjinfo {
	margin-bottom: 16px;
	padding: 16px;
	border: 1px solid rgba(20, 20, 20, 0.08);
	border-radius: var(--nt-radius-lg);
	background-color: rgba(20, 20, 20, 0.025);
}

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

.nt-pjinfo__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.nt-pjinfo__item + .nt-pjinfo__item {
	margin-top: 10px;
}

.nt-pjinfo__icon {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--nt-line);
	color: #000;
	transition: color .3s ease-in-out;
}

.nt-pjinfo__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: var(--nt-ink);
	transform: scale(0);
	transition: transform .3s ease-in-out;
}

.nt-pjinfo__icon svg {
	position: relative;
	z-index: 1;
}

.nt-pjinfo__item:hover .nt-pjinfo__icon {
	color: #fff;
}

.nt-pjinfo__item:hover .nt-pjinfo__icon::before {
	transform: scale(1);
}

.nt-pjinfo__text span {
	font-weight: 600;
}

/* Mô tả dự án */
.nt-pjsingle__desc {
	padding: 24px;
	border-radius: var(--nt-radius-lg);
	background-color: #f8f8f8;
	color: var(--nt-text);
}

.nt-pjsingle__desc img {
	max-width: 100%;
	height: auto;
	margin-bottom: 15px;
}

.nt-pjsingle__desc h2,
.nt-pjsingle__desc h3,
.nt-pjsingle__desc h4,
.nt-pjsingle__desc h5 {
	margin: 0 0 8px;
	color: var(--nt-text);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.nt-pjsingle__desc h2 { font-size: 22px; }
.nt-pjsingle__desc h3 { font-size: 20px; }
.nt-pjsingle__desc h4 { font-size: 18px; }
.nt-pjsingle__desc h5 { font-size: 16px; }

.nt-pjsingle__desc p {
	margin-bottom: 16px;
}

.nt-pjsingle__desc > :last-child {
	margin-bottom: 0;
}

.nt-pjsingle__desc a {
	color: var(--nt-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nt-pjsingle__desc a:hover {
	color: var(--nt-muted);
}

/* Gallery — Packery (Flatsome) xếp kiểu masonry, 2 cột, khe 8px như g-2. */
.nt-pgallery {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -4px -8px;
}

.nt-pgallery__item {
	display: block;
	width: 50%;
	padding: 0 4px 8px;
	cursor: zoom-in;
}

/* du-an-gallery.js có thể kéo cao ảnh để đáy các cột bằng nhau — cắt mép, không méo. */
.nt-pgallery__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--nt-radius-md);
	object-fit: cover;
	object-position: center;
}

/* du-an-gallery.js tự tính vị trí từng ảnh (.is-laid) — mọi khổ màn hình. */
.nt-pgallery.is-laid {
	display: block;
	position: relative;
}

.nt-pgallery.is-laid .nt-pgallery__item {
	position: absolute;
}

/* Desktop + JS (.is-packed): cả lưới chia 4 cột. Khối nội dung (2 cột trái) và
   tiêu đề gallery đứng cố định, ảnh xếp quanh — nội dung ngắn thì ảnh tự tràn
   sang lấp chỗ trống bên trái.
   Khung nới ra 4px mỗi bên để ảnh (đệm 4px) thẳng mép với nội dung. */
.nt-pjsingle__grid.is-packed {
	display: block;
	position: relative;
	margin: 0 -4px;
}

.nt-pjsingle__grid.is-packed .nt-pjsingle__main {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	padding: 0 20px 24px 4px;   /* phải 20 + đệm ảnh 4 = khe 24px như lưới 2 cột; dưới 24 = khe với ảnh tràn xuống */
}

.nt-pjsingle__grid.is-packed .nt-pjsingle__gallery,
.nt-pjsingle__grid.is-packed .nt-pgallery.is-laid {
	position: static;           /* để ảnh định vị theo khung lưới, không theo khối gallery */
	margin: 0;
}

.nt-pjsingle__grid.is-packed .nt-pjsingle__gallery-title {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	padding: 0 4px;
}

.nt-pjsingle__grid.is-packed .nt-pgallery__item {
	width: 25%;
}

/* CTA cuối trang chi tiết: UX Block "CTA Liên hệ" — style ở mục 11 (.nt-cta). */

/* --------------------------------------------------------------------------
   P7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

	.nt-pjcrumb .nt-pjcrumb__title {
		font-size: 35px;
	}
}

@media (max-width: 991px) {

	.nt-pjcrumb {
		padding: 80px 0;
	}

	.nt-pjcrumb .nt-pjcrumb__title {
		font-size: 30px;
	}

	.nt-pjcrumb__list {
		font-size: 16px;
	}

	/* Tab cuộn ngang như wolf-scroll-tab của bản gốc */
	.nt-pjtabs {
		justify-content: flex-start;
		align-items: stretch;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.nt-pjtabs li {
		flex: 0 0 auto;
	}

	.nt-pjtabs::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}

	.nt-pjtabs::-webkit-scrollbar-thumb {
		background-color: #828282;
	}

	.nt-pjtabs::-webkit-scrollbar-track {
		background-color: #e0e0e0;
	}

	.nt-pjgrid {
		gap: 24px 8px;
	}

	.nt-pjsingle__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/* Mobile/tablet: thư viện ảnh lên trên khối thông tin, dạng slider 1 ảnh
	   (du-an-gallery.js bật Flickity, thêm .is-slider). */
	.nt-pjsingle__gallery {
		order: -1;
	}

	.nt-pgallery.is-slider {
		display: block;
		margin: 0;
	}

	.nt-pgallery.is-slider .nt-pgallery__item {
		width: 100%;
		padding: 0;
	}

	.nt-pgallery.is-slider .nt-pgallery__img {
		max-height: 75vh;
	}

	/* Chờ Flickity nạp xong: chỉ hiện ảnh đầu, tránh trang dài vọt lên rồi co lại. */
	.nt-pgallery.is-slider:not(.flickity-enabled) .nt-pgallery__item:not(:first-child) {
		display: none;
	}

	.nt-pgallery.is-slider .flickity-page-dots {
		position: static;
		margin-top: 12px;
	}
}

@media (max-width: 767px) {

	.nt-pjcrumb {
		padding: 50px 0;
	}

	.nt-pjcrumb .nt-pjcrumb__title {
		font-size: 20px;
		line-height: 1.3;
	}

	.nt-pjcrumb__list {
		font-size: 14px;
	}

	.nt-pjgrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.nt-pjsingle {
		margin-top: 16px;
	}
}

/* iOS không hỗ trợ background-attachment: fixed (ảnh bị phóng to, mờ). */
@media (hover: none) {

	.nt-pjcrumb {
		background-attachment: scroll;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nt-pjinfo__icon,
	.nt-pjinfo__icon::before {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Element "Danh sách liên hệ" — [nt_contact_list] / [nt_contact_item]
   Màu, cỡ icon, khoảng cách nhận qua biến CSS do shortcode cha đặt inline.
   -------------------------------------------------------------------------- */
.nt-contact-list {
	--nt-ci-size: 22px;
	--nt-ci-gap: 14px;
	--nt-ci-color: var(--nt-ink);
	display: flex;
	flex-direction: column;
	gap: var(--nt-ci-gap);
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.nt-contact-list--inline {
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: calc(var(--nt-ci-gap) * 2);
}

.nt-contact-list .nt-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	color: var(--nt-body);
	font-size: 16px;
	line-height: 1.6;
}

.nt-contact-item__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--nt-ci-size);
	height: var(--nt-ci-size);
	/* canh giữa icon với dòng chữ đầu tiên (line-height 1.6 × 16px) */
	margin-top: max(0px, calc((1.6em - var(--nt-ci-size)) / 2));
	color: var(--nt-ci-color);
}

.nt-contact-item__svg,
.nt-contact-item__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Kiểu "Nền tròn": icon nằm trong vòng tròn nền nhạt. */
.nt-contact-list--icon-circle .nt-contact-item {
	align-items: center;
}

.nt-contact-list--icon-circle .nt-contact-item__icon {
	box-sizing: content-box;
	margin-top: 0;
	padding: calc(var(--nt-ci-size) * 0.45);
	border-radius: 50%;
	background: color-mix(in srgb, var(--nt-ci-color) 10%, transparent);
}

.nt-contact-item__label {
	margin-right: 4px;
	color: var(--nt-ink);
	font-weight: 700;
}

.nt-contact-item__text a {
	color: var(--nt-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nt-contact-item__text a:hover {
	color: var(--nt-body);
}

/* --------------------------------------------------------------------------
   Element [nt_breadcrumb] / [nt_map] (inc/builder-elements.php)
   -------------------------------------------------------------------------- */
/* .nt-crumb__path span (pages.css) làm mờ dấu "/" — mục hiện tại giữ rõ. */
.nt-crumb__path .nt-crumb__current {
	display: inline;
	margin: 0;
	opacity: 1;
}

.nt-map iframe {
	display: block;
	width: 100%;
	height: var(--nt-map-h, 460px);
	border: 0;
	border-radius: var(--nt-radius);
}

/* --------------------------------------------------------------------------
   Banner: điểm lấy nét riêng trên màn hình dọc (inc/banner-responsive-bg.php)
   Mốc khớp NT_BANNER_PORTRAIT_MQ. !important để thắng object-position mà
   Flatsome sinh theo id banner cho tùy chọn "Position" của PC.
   -------------------------------------------------------------------------- */
@media (max-width: 849px) and (orientation: portrait) {
	.banner-bg img.bg[style*="--nt-bg-pos-sm"] {
		object-position: var(--nt-bg-pos-sm) !important;
	}
}

/* --------------------------------------------------------------------------
   Section Tra cứu phong thủy (plugin SHC Tra cứu phong thủy)
   Form trên trang chủ: thẻ nền đen nhám + hoạ tiết la bàn bát quái mờ,
   ô nhập sáng trên nền tối, nút "Tra cứu" trắng nổi bật.
   -------------------------------------------------------------------------- */
/* Cân trên/dưới: bỏ padding đáy 30px mà [col] của Flatsome tự thêm */
.nt-fengshui .col {
	padding-bottom: 0;
}

.nt-home .shc-pt {
	--shc-pt-accent: var(--nt-ink);
	--shc-pt-border: var(--nt-border);
	--shc-pt-radius: var(--nt-radius);
	--nt-pt-line: rgba(255, 255, 255, .16);
	--nt-pt-muted: rgba(255, 255, 255, .62);
	margin-bottom: 0;
}

.nt-home .shc-pt__form {
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding: 36px 40px 30px;
	border: 0;
	border-radius: 14px;
	background:
		radial-gradient(120% 140% at 100% 0, #2b2b2b 0, transparent 55%),
		var(--nt-ink);
	color: var(--nt-on-dark);
	/* bóng toả đều quanh thẻ, chỉ lệch nhẹ xuống để không làm nặng phần đáy */
	box-shadow: 0 12px 40px -16px rgba(0, 0, 0, .4);
}

/* La bàn bát quái: vòng tròn đồng tâm + 8 tia, vẽ bằng gradient */
.nt-home .shc-pt__form::before,
.nt-home .shc-pt__form::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -90px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.nt-home .shc-pt__form::before {
	background:
		repeating-radial-gradient(circle, transparent 0 38px, rgba(255, 255, 255, .07) 38px 39px),
		repeating-conic-gradient(from 22.5deg, rgba(255, 255, 255, .06) 0 1deg, transparent 1deg 45deg);
	-webkit-mask: radial-gradient(circle, #000 55%, transparent 71%);
	mask: radial-gradient(circle, #000 55%, transparent 71%);
	animation: nt-pt-spin 90s linear infinite;
}

.nt-home .shc-pt__form::after {
	width: 110px;
	height: 110px;
	right: 45px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: radial-gradient(circle, rgba(255, 255, 255, .08), transparent 70%);
}

@keyframes nt-pt-spin {
	to { transform: translateY(-50%) rotate(360deg); }
}

.nt-home .shc-pt__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 26px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--nt-pt-line);
	color: var(--nt-on-dark);
	font-size: 1.25em;
	letter-spacing: .06em;
}

/* dấu la bàn nhỏ trước tiêu đề */
.nt-home .shc-pt__title::before {
	content: "";
	flex: 0 0 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background:
		conic-gradient(from -20deg, transparent 0 20deg, #fff 20deg 22deg, transparent 22deg 180deg, rgba(255, 255, 255, .45) 180deg 182deg, transparent 182deg),
		radial-gradient(circle, #fff 0 3px, transparent 4px);
}

.nt-home .shc-pt__fields {
	gap: 16px;
}

.nt-home .shc-pt__field > span:first-child {
	color: var(--nt-pt-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.nt-home .shc-pt__field select,
.nt-home .shc-pt__field input:not([type="radio"]) {
	height: 50px;
	padding: 0 16px;
	border: 1px solid var(--nt-pt-line);
	border-radius: 10px;
	background-color: rgba(255, 255, 255, .06);
	box-shadow: none;
	color: var(--nt-on-dark);
	font-size: 15px;
	transition: border-color .2s, background-color .2s;
}

.nt-home .shc-pt__field select {
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	-webkit-appearance: none;
	appearance: none;
}

/* danh sách xổ xuống vẫn nền trắng của hệ điều hành */
.nt-home .shc-pt__field option {
	background: #fff;
	color: var(--nt-ink);
}

.nt-home .shc-pt__field input::placeholder {
	color: rgba(255, 255, 255, .45);
}

.nt-home .shc-pt__field select:hover,
.nt-home .shc-pt__field input:not([type="radio"]):hover {
	border-color: rgba(255, 255, 255, .35);
}

.nt-home .shc-pt__field select:focus,
.nt-home .shc-pt__field input:not([type="radio"]):focus {
	border-color: #fff;
	outline: 0;
	background-color: rgba(255, 255, 255, .1);
}

.nt-home .shc-pt__inline select {
	flex-basis: 92px;
}

/* Nút gạt Nam | Nữ trên nền tối */
.nt-home .shc-pt__seg {
	height: 50px;
	padding: 4px;
	border-color: var(--nt-pt-line);
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
}

.nt-home .shc-pt__seg span {
	padding: 0 22px;
	border-radius: 7px;
	color: var(--nt-pt-muted);
}

.nt-home .shc-pt__seg label:hover span {
	color: var(--nt-on-dark);
}

.nt-home .shc-pt__seg input:checked + span {
	background: #fff;
	color: var(--nt-ink);
}

.nt-home .shc-pt__seg input:focus-visible + span {
	outline-color: #fff;
}

.nt-home .shc-pt__actions {
	gap: 10px;
}

.nt-home .shc-pt__btn {
	height: 50px;
	padding: 0 26px;
	border-radius: 10px;
	letter-spacing: .04em;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}

.nt-home .shc-pt__btn[type="submit"] {
	border-color: #fff;
	background: #fff;
	color: var(--nt-ink);
	text-transform: uppercase;
}

/* mũi tên sau chữ "Tra cứu" */
.nt-home .shc-pt__btn[type="submit"]::after {
	content: "";
	width: 14px;
	height: 10px;
	margin-left: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .2s;
}

.nt-home .shc-pt__btn[type="submit"]:hover,
.nt-home .shc-pt__btn[type="submit"]:focus-visible {
	opacity: 1;
	color: var(--nt-ink);
	box-shadow: 0 10px 24px -8px rgba(255, 255, 255, .45);
	transform: translateY(-2px);
}

.nt-home .shc-pt__btn[type="submit"]:hover::after {
	transform: translateX(4px);
}

.nt-home .shc-pt__btn--ghost {
	border-color: rgba(255, 255, 255, .45);
	color: var(--nt-on-dark);
}

.nt-home .shc-pt__btn--ghost:hover,
.nt-home .shc-pt__btn--ghost:focus-visible {
	opacity: 1;
	border-color: #fff;
	background: rgba(255, 255, 255, .1);
	color: var(--nt-on-dark);
}

.nt-home .shc-pt__note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--nt-pt-muted);
}

/* chấm "i" trước ghi chú */
.nt-home .shc-pt__note::before {
	content: "i";
	flex: 0 0 18px;
	height: 18px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* Kết quả (khi không đặt trang kết quả riêng) */
.nt-home .shc-pt__result {
	box-shadow: none;
}

.nt-home .shc-pt__result .shc-pt__title {
	color: var(--nt-heading);
	border-bottom-color: var(--nt-border);
}

.nt-home .shc-pt__result .shc-pt__title::before {
	display: none;
}

.nt-home .shc-pt__item.is-chosen {
	background: var(--nt-surface);
}

@media (max-width: 849px) {
	.nt-home .shc-pt__form {
		padding: 28px 24px 24px;
	}

	.nt-home .shc-pt__form::before {
		right: -160px;
		opacity: .7;
	}

	.nt-home .shc-pt__form::after {
		display: none;
	}
}

/* Điện thoại: thu gọn chiều cao (~300px) */
@media (max-width: 549px) {
	.nt-home .shc-pt__form {
		padding: 18px 16px 16px;
		border-radius: 12px;
	}

	.nt-home .shc-pt__form::before {
		width: 260px;
		height: 260px;
		right: -120px;
	}

	.nt-home .shc-pt__title {
		gap: 10px;
		margin-bottom: 14px;
		padding-bottom: 12px;
		font-size: 1em;
	}

	.nt-home .shc-pt__title::before {
		flex-basis: 26px;
		height: 26px;
	}

	.nt-home .shc-pt__fields {
		gap: 10px;
	}

	.nt-home .shc-pt__field {
		gap: 4px;
	}

	.nt-home .shc-pt__field > span:first-child {
		font-size: 11px;
	}

	/* nút gạt tự rõ nghĩa, bỏ nhãn "Giới tính" */
	.nt-home .shc-pt__field--gender > span:first-child {
		display: none;
	}

	.nt-home .shc-pt__field select,
	.nt-home .shc-pt__field input:not([type="radio"]),
	.nt-home .shc-pt__seg,
	.nt-home .shc-pt__btn {
		height: 44px;
	}

	.nt-home .shc-pt__field select,
	.nt-home .shc-pt__field input:not([type="radio"]) {
		padding: 0 12px;
		padding-right: 32px;
		background-position: right 12px center;
		font-size: 14px;
	}

	/* thanh "Gọi ngay" dưới đáy đã có — ẩn nút trùng */
	.nt-home .shc-pt__btn--ghost {
		display: none;
	}

	.nt-home .shc-pt__note {
		align-items: flex-start;
		margin-top: 12px;
		font-size: 12px;
		line-height: 1.45;
	}

	.nt-home .shc-pt__note::before {
		flex-basis: 16px;
		height: 16px;
		font-size: 10px;
		line-height: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nt-home .shc-pt__form::before {
		animation: none;
	}
}

/* Hiện dần các khối trang chủ khi cuộn tới; chỉ ẩn khi JS đã khởi tạo. */
.nt-anim .nt-home .nt-home-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .3, 1);
}

.nt-anim .nt-home .nt-home-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.nt-anim .nt-home .nt-home-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}