/* ==========================================================================
   TRANG GIỚI THIỆU & LIÊN HỆ — namespace .nt-page
   Dùng chung token với trang chủ. Mọi selector nằm trong .nt-page nên
   không ảnh hưởng Header, Footer, trang chủ hay các trang khác.
   ========================================================================== */

.nt-page {
	--nt-ink: #141414;
	--nt-heading: #3a3a3a;
	--nt-body: #6b6b6b;
	--nt-border: #e5e5e5;
	--nt-surface: #f5f5f4;
	--nt-radius: 8px;
}

/* --------------------------------------------------------------------------
   P0. Typography dùng lại của trang chủ
   -------------------------------------------------------------------------- */
.nt-page .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-page .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-page .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-page .nt-desc {
	color: var(--nt-body);
	font-size: 16px;
	line-height: 1.75;
}

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

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

/* --------------------------------------------------------------------------
   P1. Dải tiêu đề trang
   -------------------------------------------------------------------------- */
.nt-crumb {
	text-align: center;
	border-bottom: 1px solid var(--nt-border);
}

.nt-crumb .section-bg img {
	object-fit: cover;
	object-position: center;
}

/* Lớp tối để chữ trắng luôn đọc được trên ảnh nền */
.nt-crumb .section-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(10, 10, 10, 0.55);
}

.nt-crumb__title {
	margin: 0 0 10px;
	color: #fff;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
}

.nt-crumb__path {
	color: rgba(255, 255, 255, 0.82);
	font-size: 18px;
	font-weight: 600;
}

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

.nt-crumb__path a:hover {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: underline;
}

.nt-crumb__path span {
	display: inline-block;
	margin: 0 10px;
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   P2. Trang Giới thiệu — lưới ảnh so le + chỉ số
   -------------------------------------------------------------------------- */
.nt-page.nt-about .section-bg img {
	object-fit: contain;
	object-position: left center;
}

.nt-page .nt-about__single-image .img-inner {
	border-radius: 10px;
	overflow: hidden;
}

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

.nt-page .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-page .nt-about__images .nt-about__img:nth-child(2) {
	margin-top: 30px !important;
}

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

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

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

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

.nt-page .nt-stat__num {
	margin-bottom: 2px;
	color: var(--nt-ink);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
}

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

/* --------------------------------------------------------------------------
   P3. Tầm nhìn & Sứ mệnh
   Bản gốc: nền chuyển sắc tối 60% trên / trắng 40% dưới, khối nội dung
   xám nhạt nằm vắt ngang ranh giới.
   -------------------------------------------------------------------------- */
.nt-vision {
	background: linear-gradient(180deg, var(--nt-ink) 60%, #fff 60%);
}

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

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

.nt-vision .nt-vision__box {
	margin-top: 40px;
	padding: 44px;
	border-radius: 16px;
	background-color: var(--nt-surface);
}

.nt-vision .nt-vision__item .icon-box-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 95px !important;
	height: 95px;
	margin-bottom: 26px;
	border-radius: 50%;
	background-color: var(--nt-border);
	color: var(--nt-ink);
}

.nt-vision .nt-vision__item .icon-box-img svg {
	width: 40px;
	height: 40px;
}

.nt-vision .nt-vision__item .icon-box-text > h3,
.nt-vision .nt-vision__item .icon-box-text > h5 {
	margin-bottom: 14px;
	color: var(--nt-ink);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}

.nt-vision .nt-vision__item .icon-box-text {
	color: var(--nt-body);
	font-size: 16px;
	line-height: 27px;
}

/* --------------------------------------------------------------------------
   P4. Trang Liên hệ
   -------------------------------------------------------------------------- */
.nt-contact__brand {
	margin: 0 0 12px;
	color: var(--nt-ink);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.25;
}

.nt-contact__intro {
	margin-bottom: 20px;
	color: var(--nt-body);
	font-size: 16px;
	line-height: 1.75;
}

.nt-contact__info ul {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.nt-contact__info li {
	margin-bottom: 10px;
	color: var(--nt-body);
	font-size: 16px;
	line-height: 1.6;
}

.nt-contact__info b {
	color: var(--nt-ink);
	font-weight: 700;
}

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

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

.nt-contact__form-title {
	margin: 0 0 18px;
	color: var(--nt-ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

/* --- Form Contact Form 7 --- */
.nt-contact__form .nt-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.nt-contact__form .nt-form__field--full {
	grid-column: 1 / -1;
}

.nt-contact__form .wpcf7-form-control-wrap {
	display: block;
}

.nt-contact__form input[type="text"],
.nt-contact__form input[type="email"],
.nt-contact__form input[type="tel"],
.nt-contact__form textarea {
	width: 100%;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--nt-border);
	border-radius: 6px;
	background-color: #fff;
	box-shadow: none;
	color: var(--nt-ink);
	font-size: 15px;
	transition: border-color .25s ease;
}

.nt-contact__form input:focus,
.nt-contact__form textarea:focus {
	border-color: var(--nt-ink);
	box-shadow: none;
	outline: none;
}

.nt-contact__form textarea {
	height: 150px;
	resize: vertical;
}

.nt-contact__form .nt-form__submit {
	position: relative;
	z-index: 0;
	overflow: hidden;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--nt-ink);
	border-radius: 6px;
	background-color: var(--nt-ink);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color .4s ease-in-out;
}

/* Lớp phủ trượt chéo — cùng ngôn ngữ hover với nút ở trang chủ */
.nt-contact__form .nt-form__submit::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -15%;
	z-index: -1;
	width: 0;
	height: 106%;
	background-color: #fff;
	transform: skew(45deg);
	transition: width .4s ease-in-out, transform .4s ease-in-out, left .4s ease-in-out;
}

.nt-contact__form .nt-form__submit:hover {
	color: var(--nt-ink);
}

.nt-contact__form .nt-form__submit:hover::after {
	left: 0;
	width: 100%;
	transform: skew(0deg);
}

.nt-contact__form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #c0392b;
	font-size: 13px;
}

.nt-contact__form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 15px;
}

/* --- Bản đồ --- */
.nt-contact__map .col-inner,
.nt-contact__map .col-inner > div {
	height: 100%;
}

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

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

	.nt-crumb__title {
		font-size: 35px;
	}

	.nt-contact__map iframe {
		min-height: 400px;
	}
}

@media (max-width: 991px) {

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

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

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

	.nt-vision .nt-vision__box {
		padding: 30px;
	}

	/* Cột bản đồ xuống dưới form -> cần khoảng cách */
	.nt-contact__map {
		margin-top: 30px;
	}
}

@media (max-width: 767px) {

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

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

	.nt-crumb__title {
		font-size: 22px;
	}

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

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

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

	/* Khối nội dung cao hơn trên mobile nên đổi tỉ lệ nền chuyển sắc */
	.nt-vision {
		background: linear-gradient(180deg, var(--nt-ink) 34%, #fff 34%);
	}

	.nt-vision .nt-vision__box {
		padding: 22px;
	}

	.nt-vision .nt-vision__item .icon-box-img {
		width: 72px !important;
		height: 72px;
		margin-bottom: 18px;
	}

	.nt-vision .nt-vision__item .icon-box-text > h3,
	.nt-vision .nt-vision__item .icon-box-text > h5 {
		font-size: 20px;
	}

	.nt-contact__form .nt-form__grid {
		grid-template-columns: 1fr;
	}

	.nt-contact__map iframe {
		min-height: 320px;
	}
}

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

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

/* --------------------------------------------------------------------------
   P9. Trang dịch vụ — ảnh lấy từ dự án có tỉ lệ khác nhau, ép cùng khung
   để lưới 2×2 so le không bị hở (chỉ áp dụng khi có class --even).
   -------------------------------------------------------------------------- */
.nt-why__images--even .nt-why__img,
.nt-about__images--even .nt-about__img {
	aspect-ratio: 4 / 5;
}

.nt-why__images--even .nt-why__img .img-inner,
.nt-about__images--even .nt-about__img .img-inner {
	height: 100%;
}

/* --------------------------------------------------------------------------
   P10. Lưới ảnh bài viết (bento) — [nt_about_posts] trên trang con.
   Các rule lưới ảnh cũ ở P2/P9 (viết cho 4 ux_image) có độ ưu tiên cao hơn
   rule bento trong custom.css và file này nạp sau, nên phải ghi đè ở đây.
   -------------------------------------------------------------------------- */
.nt-page .nt-about__images > .col-inner:has(.nt-post-tiles),
.nt-page .nt-why__images > .col-inner:has(.nt-post-tiles) {
	display: block;
}

.nt-page .nt-post-tiles > .nt-post-tile:nth-child(n) {
	margin: 0 0 16px !important;
}

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

/* ==========================================================================
   P11. Trang Giới thiệu — Hồ sơ năng lực
   Các section mới: 03 Thông tin doanh nghiệp, 05 Giá trị cốt lõi,
   06 Chặng đường phát triển, 07 Lĩnh vực hoạt động, 08 Năng lực nhân sự,
   11 Cam kết chất lượng. (09 Quy trình, 10 Dự án, 12 CTA dùng lại
   .nt-procedure / .nt-projects-section / .nt-cta của trang chủ.)
   ========================================================================== */

/* --- Tiêu đề mục con (H3 nằm trong ux_text) — bỏ kiểu mặc định --- */
.nt-page .nt-value__title h3,
.nt-page .nt-milestone__title h3,
.nt-page .nt-field__title h3 {
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* --- 03. Thông tin doanh nghiệp: thẻ trắng, mỗi dòng 1 thông tin --- */
.nt-company .nt-company__card > .col-inner {
	padding: 10px 32px;
	border: 1px solid var(--nt-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .25);
}

.nt-company .nt-company__list {
	margin: 0;
}

.nt-company .nt-company__list .nt-contact-item {
	padding: 16px 0;
	border-bottom: 1px dashed var(--nt-border);
}

.nt-company .nt-company__list .nt-contact-item:last-child {
	border-bottom: 0;
}

.nt-company .nt-contact-item__body {
	display: grid;
	grid-template-columns: 150px 1fr;
	align-items: baseline;
	gap: 12px;
	width: 100%;
}

.nt-company .nt-contact-item__label {
	color: var(--nt-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
}

.nt-company .nt-contact-item__text {
	color: var(--nt-ink);
	font-weight: 600;
}

.nt-company .nt-contact-item__text a {
	text-decoration: none;
}

/* --- 05. Giá trị cốt lõi: 4 thẻ đánh số, vạch trên dài ra khi hover --- */
.nt-values .nt-values__list {
	margin-top: 32px;
}

.nt-values .nt-value > .col-inner {
	position: relative;
	height: 100%;
	padding: 32px 28px;
	border: 1px solid var(--nt-border);
	border-radius: 12px;
	background: #fff;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.nt-values .nt-value > .col-inner::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 28px;
	width: 40px;
	height: 3px;
	background: var(--nt-ink);
	transition: width .3s ease;
}

.nt-values .nt-value:hover > .col-inner {
	border-color: transparent;
	box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .35);
	transform: translateY(-4px);
}

.nt-values .nt-value:hover > .col-inner::before {
	width: calc(100% - 56px);
}

.nt-values .nt-value__num {
	margin-bottom: 18px;
	color: transparent;
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	-webkit-text-stroke: 1px var(--nt-ink);
}

.nt-values .nt-value__title {
	margin-bottom: 10px;
	color: var(--nt-ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.nt-values .nt-value__desc {
	color: var(--nt-body);
	font-size: 15px;
	line-height: 1.7;
}

/* --- 06. Chặng đường phát triển: trục ngang có chấm mốc --- */
.nt-timeline .nt-timeline__list {
	position: relative;
	margin-top: 36px;
}

.nt-timeline .nt-timeline__list::before {
	content: "";
	position: absolute;
	top: 7px;
	right: 15px;
	left: 15px;
	height: 1px;
	background: #cfcfcd;
}

.nt-timeline .nt-milestone > .col-inner {
	position: relative;
	padding-top: 38px;
}

.nt-timeline .nt-milestone > .col-inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	border: 3px solid var(--nt-surface);
	border-radius: 50%;
	background: var(--nt-ink);
	box-shadow: 0 0 0 1px var(--nt-ink);
	transition: transform .3s ease;
}

.nt-timeline .nt-milestone:hover > .col-inner::before {
	transform: scale(1.3);
}

.nt-timeline .nt-milestone__year {
	margin-bottom: 8px;
	color: var(--nt-ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nt-timeline .nt-milestone__title {
	margin-bottom: 10px;
	color: var(--nt-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
}

.nt-timeline .nt-milestone__desc {
	padding-right: 12px;
	color: var(--nt-body);
	font-size: 15px;
	line-height: 1.7;
}

/* --- 07. Lĩnh vực hoạt động: thẻ ảnh dọc, chữ trắng dưới đáy --- */
.nt-fields .nt-fields__list {
	margin-top: 32px;
}

.nt-fields .nt-field {
	overflow: hidden;
	border-radius: 12px;
}

.nt-fields .nt-field .banner-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .78) 100%);
	pointer-events: none;
}

.nt-fields .nt-field__box .text-box-content {
	padding: 26px 24px;
}

.nt-fields .nt-field__title {
	margin-bottom: 8px;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.nt-fields .nt-field__desc {
	margin-bottom: 14px;
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
	line-height: 1.6;
}

.nt-fields .nt-field__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.nt-fields .nt-field__more::after {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
	transition: width .3s ease;
}

.nt-fields .nt-field:hover .nt-field__more::after {
	width: 34px;
}

/* --- 08. Năng lực nhân sự: lưới 2×2 con số lớn --- */
.nt-team .row.nt-team__stats {
	margin-right: 0;
	margin-left: 0;
	border-top: 1px solid #d9d9d7;
	border-left: 1px solid #d9d9d7;
}

.nt-team .nt-team__stat {
	padding: 0 !important;
	border-right: 1px solid #d9d9d7;
	border-bottom: 1px solid #d9d9d7;
}

.nt-team .nt-team__stat > .col-inner {
	padding: 30px 28px;
	transition: background-color .3s ease;
}

.nt-team .nt-team__stat:hover > .col-inner {
	background: #fff;
}

.nt-team .nt-team__num {
	margin-bottom: 6px;
	color: var(--nt-ink);
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
}

.nt-team .nt-team__label {
	color: var(--nt-body);
	font-size: 15px;
	line-height: 1.5;
}

/* --- 11. Cam kết chất lượng: 2 cột, icon trong vòng tròn --- */
.nt-commit .nt-commit__list {
	margin-top: 28px;
}

.nt-commit .nt-commit__item {
	height: 100%;
	padding: 26px 28px;
	border-radius: 12px;
	background: var(--nt-surface);
	transition: background-color .3s ease;
}

.nt-commit .nt-commit__item:hover {
	background: #efefed;
}

.nt-commit .nt-commit__item .icon-box-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px !important;
	height: 56px;
	margin-right: 20px !important;
	border-radius: 50%;
	background: #fff;
	color: var(--nt-ink);
}

.nt-commit .nt-commit__item .icon-box-img svg,
.nt-commit .nt-commit__item .icon-box-img img {
	width: 26px;
	height: 26px;
}

.nt-commit .nt-commit__item .icon-box-text > h3,
.nt-commit .nt-commit__item .icon-box-text > h5 {
	margin-bottom: 6px;
	color: var(--nt-ink);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.nt-commit .nt-commit__item .icon-box-text {
	color: var(--nt-body);
	font-size: 15px;
	line-height: 1.7;
}

/* --- Responsive P11 --- */
@media (max-width: 849px) {
	/* trục thời gian chuyển sang dọc bên trái */
	.nt-timeline .nt-timeline__list::before {
		top: 0;
		right: auto;
		bottom: 30px;
		left: 22px;
		width: 1px;
		height: auto;
	}

	.nt-timeline .nt-milestone > .col-inner {
		padding-top: 0;
		padding-left: 34px;
	}

	.nt-timeline .nt-milestone > .col-inner::before {
		top: 4px;
	}

	.nt-company .nt-company__card {
		margin-top: 10px;
	}

	.nt-team .row.nt-team__stats {
		margin-top: 20px;
	}
}

@media (max-width: 549px) {
	.nt-company .nt-company__card > .col-inner {
		padding: 4px 18px;
	}

	.nt-company .nt-contact-item__body {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.nt-values .nt-value > .col-inner {
		padding: 26px 22px;
	}

	.nt-values .nt-value__num,
	.nt-team .nt-team__num {
		font-size: 38px;
	}

	.nt-team .nt-team__stat > .col-inner {
		padding: 22px 16px;
	}

	.nt-commit .nt-commit__item {
		padding: 20px;
	}
}