/* Trang con — title band + shell 2 cột (nhịp tedi.vn) */

/* ---- Page title: ảnh công trình + phủ navy ----
   Trước đây là dải xanh phẳng ở mọi trang con: đúng màu thương hiệu nhưng không nói được gì,
   và là chỗ chênh lệch thấy rõ nhất so với tedi.vn. `--tdc-hero` do functions.php bơm vào theo
   nhánh menu đang xem (xem tdc_hero_file()).

   Lớp phủ navy là BẮT BUỘC chứ không phải trang trí: ảnh khách gửi có tấm trời trắng xoá, để
   trần thì tiêu đề trắng biến mất — đúng kiểu lỗi menu trắng-trên-trắng đã dính hồi 09/09.
   Đậm bên trái vì tiêu đề canh trái, nhạt dần sang phải để còn nhìn thấy công trình.

   ⚠️ Khối này phải nằm ở page.css chứ không phải brand.css: luật cũ ở đây dùng `background`
   viết tắt kèm !important, mà `background` viết tắt đặt luôn `background-image: none`. Đặt ảnh
   ở brand.css thì thua im lặng — computed ra `none` mà không có lỗi nào để nhìn. */
body:not(.home) .page-title {
	min-height: 0 !important;
	height: auto !important;
	position: relative;
	overflow: hidden;
	padding: 0 !important;
	margin: 0 !important;
	background-color: var(--tdc-navy) !important;
	background-image: var(--tdc-hero) !important;
	background-size: cover !important;
	background-position: center 58% !important;
	border: 0 !important;
	box-shadow: none !important;
}
body:not(.home) .page-title::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(20, 32, 51, .90) 0%,
		rgba(20, 32, 51, .78) 42%,
		rgba(20, 32, 51, .50) 100%);
}
body:not(.home) .page-title .wf-wrap {
	position: relative;
	z-index: 1;
	min-height: 0 !important;
	height: auto !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	width: var(--tdc-wrap) !important;
	max-width: 100%;
	margin: 0 auto;
	padding: 66px 24px 60px !important;
}
@media (max-width: 800px) {
	body:not(.home) .page-title .wf-wrap { padding: 38px 24px 34px !important; }
}
body:not(.home) .page-title .wf-container,
body:not(.home) .page-title .hgroup,
body:not(.home) .page-title .page-title-head {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left !important;
	width: 100%;
}
/* Title band: chữ trắng — đè luật màu tối ở brand.css */
body:not(.home) .page-title h1,
body:not(.home) .page-title .entry-title,
body:not(.home) .page-title .fancy-title,
body:not(.home) .page-title .page-title-head h1 {
	color: #fff !important;
	font-family: var(--tdc-font);
	font-size: clamp(1.55rem, 2.6vw, 2.05rem) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 10px !important;
	padding: 0 !important;
	border: 0 !important;
}
body:not(.home) .page-title h1::after,
body:not(.home) .page-title .entry-title::after {
	display: none !important;
}
body:not(.home) .page-title .breadcrumbs,
body:not(.home) .page-title .breadcrumbs a,
body:not(.home) .page-title .breadcrumbs li,
body:not(.home) .page-title .breadcrumbs .current {
	color: rgba(255, 255, 255, 0.88) !important;
}
body:not(.home) .page-title .breadcrumbs a:hover {
	color: #fff !important;
}
body:not(.home) .breadcrumbs {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
body:not(.home) .page-title .hr-breadcrumbs,
body:not(.home) .page-title .title-line,
body:not(.home) .page-title hr {
	display: none !important;
}

/* ---- Shell content ---- */
body:not(.home) #main > .wf-wrap {
	width: var(--tdc-wrap) !important;
	max-width: 100%;
	margin: 0 auto;
	padding-left: 24px !important;
	padding-right: 24px !important;
}
body:not(.home) #content.content,
body:not(.home) #content.tdc-page {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 36px 0 64px !important;
	background: transparent !important;
}

.tdc-page__shell {
	display: block;
	width: 100%;
}
.tdc-page__shell--nav {
	display: grid;
	grid-template-columns: 262px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* Cột trái = menu con + card liên hệ. Sticky chuyển lên khối bao ngoài, nếu để ở `.tdc-subnav`
   thì card liên hệ đứng yên còn menu trượt, hai cái rời nhau ra khi cuộn.
   `top` phải lớn hơn chiều cao header neo (đo được 100px) — 24px thì menu chui xuống dưới nó. */
.tdc-page__aside {
	position: sticky;
	top: 120px;
}

/* ---- Menu con cột bên ----
   Dựng lại 10/09 sau khi đối chiếu portcoast.com.vn (nguồn bố cục thứ hai): khối menu con của
   họ có ĐẦU MỤC LÀ MỘT THANH MÀU ĐẶC, từng mục có mũi tên dẫn và gạch phân cách mảnh, mục đang
   xem đổi màu thương hiệu. Bản cũ của ta là hộp xám nhạt với chữ nhỏ — đọc được nhưng không
   dẫn mắt, và nhìn cạnh trang của họ thì rõ là yếu hơn.

   Làm bằng hoặc hơn, KHÔNG copy: dùng bảng màu lấy từ logo TDC, mũi tên vẽ bằng CSS (không thêm
   font icon hay ảnh), và giữ menu ở CỘT TRÁI như bố cục sẵn có của ta thay vì bê sang phải. */
.tdc-subnav {
	background: #fff;
	border: 1px solid var(--tdc-blue-soft, #e6e9ec);
	border-radius: 3px;
	overflow: hidden;
}
.tdc-subnav__heading {
	margin: 0;
	padding: 0;
	/* Xanh sáng #0495D8 chỉ đạt 3.34 với chữ trắng — dưới ngưỡng WCAG AA 4.5.
	   Dùng xanh-đậm-làm-việc #0374A8 (5.16). Xem brand.css khối [14]. */
	background: var(--tdc-blue-ink);
	font-family: var(--tdc-font);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
}
/* Padding nằm trên <a> chứ không trên <p>: <a> inline chỉ cao 18px, cả thanh màu trông như
   bấm được nhưng vùng bấm thật chỉ là dòng chữ (đo ở 390px: 86.9×18). */
.tdc-subnav__heading a {
	display: block;
	padding: 13px 18px;
	color: #fff;
	text-decoration: none;
}
/* ⚠️ Phải mang HAI lớp: The7 có `.content ul { list-style: disc }` — độ đặc hiệu (0,1,1), cao
   hơn `.tdc-subnav__list` (0,1,0). Thiếu lớp thứ hai thì chấm tròn đen của trình duyệt vẫn hiện,
   và vì `padding-left: 0` nên chúng rơi RA NGOÀI khung trắng, nhìn như lỗi vẽ. */
.tdc-subnav .tdc-subnav__list { list-style: none; margin: 0; padding: 0; }
.tdc-subnav__list li + li { border-top: 1px solid var(--tdc-blue-soft, #eef2f5); }

/* Xếp bằng flex thay vì neo tuyệt đối: mục dài hai dòng thì mũi tên vẫn thẳng hàng với DÒNG ĐẦU,
   không trôi xuống giữa khối. */
.tdc-subnav__list a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 16px;
	color: var(--tdc-text);
	text-decoration: none;
	font-size: .95rem;
	line-height: 1.45;
	transition: background .15s ease, color .15s ease;
}
/* Mũi tên vẽ bằng hai cạnh của một hình vuông xoay 45° — không cần font icon hay ảnh. */
.tdc-subnav__list a::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	margin-top: .48em;          /* ngang tầm giữa chữ hoa của dòng đầu */
	border-top: 2px solid var(--tdc-muted);
	border-right: 2px solid var(--tdc-muted);
	transform: rotate(45deg);
	transition: border-color .15s ease, transform .15s ease;
}
.tdc-subnav__list a:hover { background: var(--tdc-sky); color: var(--tdc-blue-ink); }
.tdc-subnav__list a:hover::before { border-color: var(--tdc-blue); }

.tdc-subnav__list li.is-current a {
	background: var(--tdc-sky);
	color: var(--tdc-blue-ink);
	font-weight: 700;
}
.tdc-subnav__list li.is-current a::before { border-color: var(--tdc-blue); }


/* ---- Article typography ---- */
.tdc-page__article {
	min-width: 0;
}
.tdc-page__body {
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--tdc-text);
}
.tdc-page__body > *:first-child {
	margin-top: 0;
}
.tdc-page__body h2 {
	margin: 2.1rem 0 0.85rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--tdc-dark);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-left: 14px;
	border-left: 3px solid var(--tdc-blue);
}
.tdc-page__body h3 {
	margin: 1.5rem 0 0.6rem;
	font-size: 1.08rem;
	color: var(--tdc-dark);
}
.tdc-page__body p {
	margin: 0 0 1em;
}
.tdc-page__body ul,
.tdc-page__body ol {
	margin: 0 0 1.1em;
	padding-left: 1.25em;
}
.tdc-page__body li + li {
	margin-top: 0.45em;
}

/* ---- Blocks trong nội dung trang ---- */
.tdc-page-content {
	max-width: none;
}
.tdc-lead {
	font-size: 1.18rem;
	line-height: 1.65;
	color: var(--tdc-dark);
	font-weight: 400;
}
.tdc-lead strong {
	color: var(--tdc-blue-ink);
}
/* Dòng dẫn sang trang khác đặt dưới một hình/bảng — phải nhẹ hơn thân bài, nếu không nó nặng
   ngang nội dung chính và người đọc tưởng còn một đoạn nữa. */
.tdc-ghichu {
	font-size: .94rem;
	color: var(--tdc-muted);
	margin-top: 14px;
}
.tdc-ghichu a { color: var(--tdc-blue-ink); }

.tdc-about-hero {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 28px;
	align-items: center;
	margin: 0 0 28px;
}
.tdc-about-hero__media {
	margin: 0;
	overflow: hidden;
	background: #dbe4ec;
	aspect-ratio: 4 / 3;
}
.tdc-about-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdc-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}
.tdc-stats li {
	background: var(--tdc-blue);
	color: #fff;
	padding: 18px 14px;
	text-align: center;
}
.tdc-stats__n {
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
}
.tdc-stats__l {
	display: block;
	margin-top: 6px;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.92;
}

.tdc-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}
.tdc-cards li {
	background: #f5f8fb;
	border-top: 3px solid var(--tdc-blue);
	padding: 18px 16px;
	margin: 0 !important;
}
.tdc-cards strong {
	display: block;
	margin-bottom: 8px;
	color: var(--tdc-dark);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.tdc-cards span {
	display: block;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--tdc-text);
}

.tdc-pillars {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}
.tdc-pillars li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid #e4eaf0;
	padding: 16px;
	margin: 0 !important;
}
.tdc-pillars__ico {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-top: 7px;
	background: var(--tdc-blue);
}
.tdc-pillars strong {
	display: block;
	margin-bottom: 4px;
	color: var(--tdc-dark);
}

.tdc-awards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}
.tdc-awards li {
	margin: 0 !important;
	padding: 20px 16px;
	background: linear-gradient(160deg, var(--tdc-blue-deep) 0%, var(--tdc-blue) 100%);
	color: #fff;
	text-align: center;
	font-weight: 600;
	line-height: 1.4;
	font-size: 0.95rem;
}

.tdc-info-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.5rem 0 0;
	font-size: 0.98rem;
}
.tdc-info-table th,
.tdc-info-table td {
	border: 1px solid #e0e6ec;
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
}
.tdc-info-table th {
	width: 9.5em;
	background: #f3f7fb;
	color: var(--tdc-dark);
	font-weight: 600;
}

/* Ảnh trong bài KHÔNG được phóng to quá cỡ gốc. Ảnh trụ sở công ty chỉ có 400x289 mà luật cũ
   `width: 100%` kéo nó lên 990px — nhoè hẳn, mà nhìn qua thì tưởng "ảnh xấu" chứ không ai nghĩ
   là do CSS. `width: auto` cho ảnh hiện đúng cỡ thật, `max-width: 100%` giữ ảnh to không tràn. */
.tdc-figure {
	/* Có lề DƯỚI: không thì chú thích ảnh dính vào đoạn văn kế tiếp, đọc tưởng là một câu. */
	margin: 1.75rem auto 2.2rem;
	text-align: center;
}
.tdc-figure img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
.tdc-figure figcaption {
	margin-top: 10px;
	font-size: 0.88rem;
	color: var(--tdc-muted);
	text-align: center;
}

@media (max-width: 980px) {
	.tdc-page__shell--nav {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.tdc-page__aside {
		position: static;
	}
	.tdc-about-hero,
	.tdc-cards,
	.tdc-awards {
		grid-template-columns: 1fr;
	}
	.tdc-stats {
		grid-template-columns: repeat(2, 1fr);
	}
	.tdc-pillars {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.tdc-stats {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---- Lưới đầu mục (inc/hub.php) ----
   Ba cột trên desktop. Thẻ nào có ảnh đại diện thì hiện ảnh; chưa có ảnh cũng phải đẹp, nên
   bản chữ-không-ảnh dùng gạch màu bên trái thay cho ảnh giả — 9 trang con của Giới thiệu hiện
   mới có vài trang có ảnh, và sẽ còn lệch như vậy một thời gian. */
.tdc-hub {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 34px 0 8px;
}
.tdc-hub__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--tdc-line, #e6e9ec);
	border-radius: 2px;
	overflow: hidden;
	text-decoration: none !important;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tdc-hub__card:hover {
	border-color: var(--tdc-blue);
	box-shadow: 0 8px 22px rgba(20, 32, 51, .10);
	transform: translateY(-2px);
}
.tdc-hub__media { display: block; overflow: hidden; }
.tdc-hub__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform .35s ease;
}
.tdc-hub__card:hover .tdc-hub__media img { transform: scale(1.05); }
.tdc-hub__body { display: block; padding: 18px 20px 20px; }
.tdc-hub__card--chu .tdc-hub__body { border-left: 3px solid var(--tdc-blue); }
.tdc-hub__title {
	display: block;
	font-family: var(--tdc-font);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
	color: var(--tdc-dark);
	margin-bottom: 7px;
}
.tdc-hub__card:hover .tdc-hub__title { color: var(--tdc-blue-ink); }
.tdc-hub__desc {
	display: block;
	font-size: 14px;
	line-height: 1.62;
	color: var(--tdc-muted);
}

/* Số thẻ chia 3 dư 1 (Lĩnh vực hoạt động có đúng 7) thì thẻ cuối đứng trơ một mình ở hàng cuối.
   Cho nó trải hết hàng và nằm ngang — thành điểm nhấn có chủ ý thay vì một ô mồ côi.
   `:nth-child(3n+1):last-child` chỉ khớp khi tổng số thẻ chia 3 dư 1, nên trang Giới thiệu
   (9 thẻ) không bị đụng. */
.tdc-hub__card:nth-child(3n+1):last-child {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: stretch;
}
/* Ảnh phải lấp đầy nửa trái mà không kéo dài thẻ. `height: 100%` trên <img> trong flex item
   không có chiều cao xác định thì phần trăm không giải được ⇒ ảnh phình vô hạn (đã dính: thẻ
   cuối cao gần 1200px, chỉ thấy một mảng trời xanh). Neo tuyệt đối trong khung có chiều cao
   tối thiểu thì không còn vòng lặp phần trăm. */
.tdc-hub__card:nth-child(3n+1):last-child .tdc-hub__media {
	flex: 0 0 40%;
	position: relative;
	min-height: 230px;
}
.tdc-hub__card:nth-child(3n+1):last-child .tdc-hub__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}
.tdc-hub__card:nth-child(3n+1):last-child .tdc-hub__body { align-self: center; padding: 22px 28px; }

@media (max-width: 1000px) {
	.tdc-hub { grid-template-columns: repeat(2, 1fr); }
	.tdc-hub__card:nth-child(3n+1):last-child { grid-column: auto; flex-direction: column; }
	.tdc-hub__card:nth-child(3n+1):last-child .tdc-hub__media { min-height: 0; position: static; }
	.tdc-hub__card:nth-child(3n+1):last-child .tdc-hub__media img { position: static; aspect-ratio: 16 / 9; height: auto; }
}
@media (max-width: 620px)  { .tdc-hub { grid-template-columns: 1fr; } }

/* ---- Card liên hệ cột trái (template-parts/page-lienhe.php) ---- */
/* Không có menu con thì card liên hệ là thứ duy nhất trong cột bên — bỏ khoảng cách trên. */
.tdc-page__aside > .tdc-cardlh:first-child { margin-top: 0; }
.tdc-cardlh {
	margin-top: 22px;
	padding: 20px 18px 22px;
	background: var(--tdc-navy);
	color: #fff;
	border-radius: 2px;
}
.tdc-cardlh__heading {
	margin: 0 0 8px;
	font-family: var(--tdc-font);
	font-weight: 700;
	font-size: 16px;
	color: #fff;
}
.tdc-cardlh__desc {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .72);
}
.tdc-cardlh__row { margin: 0 0 7px; font-size: 14px; line-height: 1.5; }
.tdc-cardlh__row a { color: #fff !important; text-decoration: none; }
.tdc-cardlh__row a:hover { text-decoration: underline; }
.tdc-cardlh__row--tel a { font-size: 21px; font-weight: 700; letter-spacing: .01em; }
.tdc-cardlh__row--dc { color: rgba(255, 255, 255, .72); font-size: 13px; margin-top: 12px; }
.tdc-cardlh__cta { margin: 16px 0 0; }
.tdc-cardlh__cta a {
	display: block;
	text-align: center;
	padding: 10px 14px;
	background: var(--tdc-blue-ink);   /* 5.16 với chữ trắng; #0495D8 chỉ 3.34 */
	color: #fff !important;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border-radius: 2px;
	transition: background .15s ease;
}
.tdc-cardlh__cta a:hover { background: var(--tdc-blue-ink); }

/* ---- Danh mục ngành nghề kinh doanh (trang Lĩnh vực hoạt động) ----
   16 mục, mục dài nhất hơn 40 từ. Một cột thì trang dài lê thê, hai cột thì mục ngắn để lại
   khoảng trống lớn — dùng `columns` để trình duyệt tự cân, `break-inside: avoid` giữ mỗi mục
   không bị cắt ngang giữa hai cột. */
.tdc-nganh-nghe {
	columns: 2;
	column-gap: 42px;
	margin: 18px 0 0;
	padding-left: 20px;
}
.tdc-nganh-nghe li {
	break-inside: avoid;
	margin: 0 0 14px;
	padding-left: 4px;
	line-height: 1.68;
}
.tdc-nganh-nghe li::marker { color: var(--tdc-blue-ink); font-weight: 700; }

@media (max-width: 900px) { .tdc-nganh-nghe { columns: 1; } }

/* Số dự án trong bảng tham chiếu của từng lĩnh vực (inc/bang-du-an.php). */
.tdc-dem-du-an {
	margin: 4px 0 22px;
	padding: 9px 16px;
	display: inline-block;
	background: #f3f6f9;
	border-left: 3px solid var(--tdc-blue);
	font-size: 14px;
	color: var(--tdc-muted);
}
.tdc-dem-du-an strong { color: var(--tdc-blue-ink); font-size: 19px; }

/* ---- Bảng dự án theo lĩnh vực (7 trang /linh-vuc/*, body class từ inc/bang-du-an.php) ----
   Henry duyệt 09/10/2026 sau khi thay bảng theo danh mục khách gửi:
   1. Bảng BUNG HẾT bề ngang cột nội dung. Nội dung nhập từ web cũ bọc bảng trong <blockquote>,
      mà blockquote bị giới hạn `--tdc-do-doc` (độ dài dòng đọc) ⇒ đo được bảng 598px trong cột
      990px. Bỏ giới hạn + thụt lề của blockquote trên các trang này.
   2. Hàng tiêu đề NEO ngay dưới header neo khi cuộn. brand.css đã ghi `sticky; top: 0` nhưng
      không bao giờ chạy: `.tdc-bang` có `overflow-x: auto`, và sticky bám theo tổ tiên cuộn gần
      nhất — tức cái khung không cuộn dọc đó. Bảng 3 cột chữ ở đây không tràn ngang (đo ở 390px:
      bảng 310 / cột 358) nên trả `overflow` về `visible`. `top` = đáy header neo đo được:
      100px ở máy tính, 80px (--tdc-mobile-header-h) khi The7 đổi sang header điện thoại.
   3. Hàng tiêu đề THẤP lại (70px → ~40px) để bớt che chỗ khi đang neo.
   ⚠️ border-collapse làm viền KHÔNG đi theo ô sticky ⇒ vẽ mép dưới bằng box-shadow.
   🔴 The7 đặt `#page { overflow: hidden }` — cũng là một khung cuộn, nên kể cả bỏ `.tdc-bang`
      thì ô sticky vẫn bám vào #page (không cuộn) và trôi mất. `clip` cắt phần tràn y như
      `hidden` nhưng KHÔNG tạo khung cuộn ⇒ sticky bám lại vào viewport. */
.tdc-linh-vuc-con #page { overflow: clip; }
.tdc-linh-vuc-con .tdc-page__body blockquote {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	border: 0;
}
.tdc-linh-vuc-con .tdc-bang { overflow: visible; }
.tdc-linh-vuc-con .tdc-page__body table { width: 100%; max-width: none; }
.tdc-linh-vuc-con .tdc-page__body table:has(tr:nth-child(4)) tr:first-child td {
	top: var(--tdc-mobile-header-h);
	z-index: 2;
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 13px;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: .02em;
	box-shadow: inset 0 -1px 0 #cfdde8;
}
.tdc-linh-vuc-con .tdc-page__body table:has(tr:nth-child(4)) tr:first-child :is(p, b, strong, h3) {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: 700;
}
.tdc-linh-vuc-con .tdc-page__body table:has(tr:nth-child(4)) td:first-child { width: 56px; }
@media (min-width: 1100px) {
	.tdc-linh-vuc-con .tdc-page__body table:has(tr:nth-child(4)) tr:first-child td { top: 100px; }
}

/* Ghi chú nhỏ trong bài (bối cảnh của một tài liệu, một con số cũ…). */
.tdc-ghi-chu {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--tdc-muted);
	padding-left: 14px;
	border-left: 2px solid var(--tdc-line, #e6e9ec);
}

/* ============================================================================
   TRANG LIÊN HỆ (mục 13 hợp đồng)
   ----------------------------------------------------------------------------
   Hai cột: thông tin công ty trái, form phải. Form dựng bằng Contact Form 7 nên phải tự tạo
   dáng cho input — CF7 gần như không kèm CSS, để mặc định thì ra ô trắng viền xám của trình
   duyệt, lạc hẳn với phần còn lại của trang.
   ========================================================================= */
.tdc-lienhe {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 42px;
	align-items: start;
	margin-bottom: 34px;
}
.tdc-lienhe__ten { font-size: 16px; line-height: 1.5; }
.tdc-lienhe__ten span { color: var(--tdc-muted); font-size: 14px; }
.tdc-lienhe__tin table th { white-space: nowrap; width: 1%; }

/* --- ô nhập của Contact Form 7 --- */
.tdc-lienhe__form .tdc-form__hang { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.tdc-lienhe__form .tdc-form__o { margin: 0 0 14px; }
.tdc-lienhe__form label { display: block; font-size: 14px; font-weight: 600; color: var(--tdc-dark); }
.tdc-lienhe__form abbr { color: #d0342c; text-decoration: none; border: 0; }
.tdc-lienhe__form input[type="text"],
.tdc-lienhe__form input[type="email"],
.tdc-lienhe__form input[type="tel"],
.tdc-lienhe__form input[type="url"],
.tdc-lienhe__form textarea {
	box-sizing: border-box;
	width: 100%;
	margin-top: 5px;
	padding: 10px 13px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	color: var(--tdc-text);
	background: #fff;
	border: 1px solid var(--tdc-line, #e6e9ec);
	border-radius: 2px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tdc-lienhe__form input:focus,
.tdc-lienhe__form textarea:focus {
	outline: 0;
	border-color: var(--tdc-blue);
	box-shadow: 0 0 0 3px rgba(0, 95, 170, .12);
}
.tdc-lienhe__form textarea { resize: vertical; min-height: 130px; }
.tdc-lienhe__form .tdc-form__ghichu { font-size: 13px; color: var(--tdc-muted); margin: 2px 0 16px; }
.tdc-lienhe__form input[type="submit"] {
	padding: 12px 30px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--tdc-blue);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background .15s ease;
}
.tdc-lienhe__form input[type="submit"]:hover { background: var(--tdc-blue-ink); }

/* Thông báo của CF7: mặc định là khung viền đơn sắc, nhìn như lỗi trình duyệt. */
.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border: 0;
	border-left: 3px solid var(--tdc-blue);
	background: #f3f6f9;
	font-size: 14.5px;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: #d0342c; background: #fdf3f2; }
.wpcf7 form.sent .wpcf7-response-output { border-left-color: #1f9d55; background: #f1f9f4; }
.wpcf7-not-valid-tip { font-size: 13px; font-weight: 400; color: #d0342c; margin-top: 4px; }
.wpcf7-spinner { vertical-align: middle; }

/* --- bản đồ --- */
.tdc-bando {
	margin: 18px 0 0;
	border: 1px solid var(--tdc-line, #e6e9ec);
	line-height: 0;
}
.tdc-bando iframe { display: block; width: 100%; }

@media (max-width: 980px) {
	.tdc-lienhe { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
	.tdc-lienhe__form .tdc-form__hang { grid-template-columns: 1fr; }
}

/* ============================================================================
   NHỊP ĐỌC — sửa đúng năm con số đo được, không sửa theo cảm tính
   ----------------------------------------------------------------------------
   Đo trên /gioi-thieu/ve-cong-ty/ ngày 10/09/2026, so với tedi.vn và
   portcoast.com.vn (cùng ngành tư vấn hạ tầng, cùng kiểu trang):

   | Chỉ số            | Đo được | Đặt lại | Vì sao                                  |
   |-------------------|---------|---------|-----------------------------------------|
   | ký tự mỗi dòng    | ~99     | ~72     | >80 là mắt lạc dòng khi quay đầu dòng   |
   | lề dưới đoạn văn  | 16.3px  | 1 dòng  | 0.57 dòng thì các đoạn dính thành khối  |
   | lề giữa các <li>  | 0       | 10px    | danh sách nhiều dòng dính liền, khó đọc |
   | lề trên <h2>      | 33.6px  | ~2 dòng | mục không tách khỏi mục trước           |
   | padding ô bảng    | 10/12   | 13/16   | bảng chật, chữ chạm viền                |

   Giới hạn bề rộng đặt trên TỪNG khối chữ, không đặt trên khung bao — để bảng, ảnh, thư viện
   ảnh và các lưới thẻ vẫn trải hết cột. Dùng đơn vị `ch` để đổi cỡ chữ là tự co theo.
   ========================================================================= */
:root { --tdc-do-doc: 72ch; }

.tdc-page__body p,
.tdc-page__body ul,
.tdc-page__body ol,
.tdc-page__body blockquote,
.tdc-page__body h2,
.tdc-page__body h3,
.tdc-page__body h4 {
	max-width: var(--tdc-do-doc);
}

/* Khối rộng có chủ đích thì bỏ giới hạn: bảng, lưới thẻ, thư viện ảnh, danh mục hai cột,
   khối liên hệ hai cột. Kể cả chữ nằm BÊN TRONG chúng. */
.tdc-page__body :is(table, .tdc-bang, figure, .gallery, .tdc-hub, .tdc-lienhe, .tdc-bando,
                    .tdc-nganh-nghe, .tdc-anh-tailieu, .wpcf7),
.tdc-page__body :is(table, .tdc-bang, figure, .gallery, .tdc-hub, .tdc-lienhe, .tdc-bando,
                    .tdc-anh-tailieu, .wpcf7) :is(p, ul, ol, h2, h3, h4, blockquote) {
	max-width: none;
}

/* --- nhịp dọc --- */
.tdc-page__body p { margin: 0 0 1.55rem; }          /* ≈ 1 dòng */
.tdc-page__body ul,
.tdc-page__body ol { margin: 0 0 1.55rem; padding-left: 1.35rem; }
.tdc-page__body li { margin-bottom: .6rem; }
.tdc-page__body li:last-child { margin-bottom: 0; }
.tdc-page__body li > ul,
.tdc-page__body li > ol { margin: .6rem 0 0; }
.tdc-page__body li::marker { color: var(--tdc-blue); }

.tdc-page__body h2 { margin-top: 3.1rem; margin-bottom: 1rem; }
.tdc-page__body h3 { margin-top: 2.2rem; margin-bottom: .7rem; }
.tdc-page__body > *:first-child,
.tdc-page__body .tdc-page-content > *:first-child,
.tdc-page__body h2:first-child,
.tdc-page__body h3:first-child { margin-top: 0; }

/* Kiểu BẢNG không đặt ở đây — brand.css đã sở hữu (`.tdc-page-content table`, `.entry-content
   table`), độ đặc hiệu (0,2,1) cao hơn. Thêm luật cạnh tranh ở đây chỉ tạo hai nguồn sự thật
   rồi cái nào thắng thì tuỳ thứ tự nạp. Sửa bảng thì sửa brand.css. */

/* ---- Danh sách nhân sự và gạch đầu dòng dựng từ <p> rời (tdc-core/content-clean.php) ----
   Web cũ để mỗi dòng một <p> và căn cột tên/chức vụ bằng chuỗi &nbsp;. Ở đây dựng lại thành
   lưới hai cột thật: cột chức vụ luôn thẳng hàng bất kể tên dài ngắn. */
.tdc-page__body .tdc-nhan-su {
	list-style: none;
	margin: 0 0 1.8rem;
	padding: 0;
	max-width: var(--tdc-do-doc);
	counter-reset: nhansu;
}
.tdc-page__body .tdc-nhan-su > li {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 15rem) minmax(0, 1fr);
	gap: 0 .8rem;
	align-items: baseline;
	margin: 0;
	padding: .55rem 0;
	border-bottom: 1px solid var(--tdc-blue-soft, #e6e9ec);
}
.tdc-page__body .tdc-nhan-su > li:last-child { border-bottom: 0; }
.tdc-page__body .tdc-nhan-su > li::before {
	counter-increment: nhansu;
	content: counter(nhansu) ".";
	color: var(--tdc-muted);
	font-size: .9em;
	font-variant-numeric: tabular-nums;
}
.tdc-nhan-su__ten { font-weight: 600; color: var(--tdc-dark); }
.tdc-nhan-su__chuc { color: var(--tdc-text); }

.tdc-page__body .tdc-gach { list-style: none; margin: 0 0 1.55rem; padding: 0; }
.tdc-page__body .tdc-gach > li {
	position: relative;
	margin: 0 0 .5rem;
	padding-left: 1.1rem;
}
.tdc-page__body .tdc-gach > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: .55rem;
	height: 2px;
	background: var(--tdc-blue);
}

@media (max-width: 620px) {
	.tdc-page__body .tdc-nhan-su > li { grid-template-columns: 1.6rem minmax(0, 1fr); }
	.tdc-nhan-su__chuc { grid-column: 2; color: var(--tdc-muted); font-size: .95em; }
}

/* Hình khổ lớn cần đọc được chi tiết (sơ đồ tổ chức, bản vẽ): cho tràn hết cột thay vì bó theo
   độ dài dòng chữ. Sơ đồ 1188px thu vào 720px thì chữ trong từng ô không đọc nổi. */
.tdc-page__body .tdc-figure--rong { max-width: none; }
.tdc-page__body .tdc-figure--rong img { width: 100%; height: auto; }
.tdc-page__body .tdc-figure--rong a { display: block; }

/* ---- Thư viện ảnh khối Gutenberg (wp-block-gallery) ----
   Mặc định của WordPress dùng flex + tỉ lệ ảnh gốc ⇒ hàng nào cũng so le, và chú thích là chữ
   TRẮNG đè thẳng lên ảnh, không có nền — trên ảnh sáng thì mất hút (đo trên trang Thư viện hình
   ảnh: chú thích "Đại Hội chi bộ nhiệm kỳ 2010–2015" gần như không đọc được).

   Ép lưới đều, cắt bằng object-fit, và trả chú thích về một dải chuyển sắc tối ở đáy. */
.tdc-page__body .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	max-width: none;
}
.tdc-page__body .wp-block-gallery.has-nested-images.columns-2 { grid-template-columns: repeat(2, 1fr); }
.tdc-page__body .wp-block-gallery.has-nested-images.columns-4 { grid-template-columns: repeat(4, 1fr); }

.tdc-page__body .wp-block-gallery.has-nested-images > figure.wp-block-image {
	position: relative;
	width: auto !important;
	flex-basis: auto !important;
	margin: 0;
	overflow: hidden;
	background: var(--tdc-navy);
}
.tdc-page__body .wp-block-gallery.has-nested-images > figure.wp-block-image > img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .35s ease;
}
.tdc-page__body .wp-block-gallery.has-nested-images > figure.wp-block-image:hover > img {
	transform: scale(1.05);
}
.tdc-page__body .wp-block-gallery.has-nested-images figcaption.wp-element-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 34px 14px 12px;
	font-size: 13px;
	line-height: 1.45;
	color: #fff;
	text-align: left;
	background: linear-gradient(to top, rgba(20, 24, 60, .88), rgba(20, 24, 60, 0));
	max-height: none;
	overflow: visible;
}

@media (max-width: 900px) {
	.tdc-page__body .wp-block-gallery.has-nested-images,
	.tdc-page__body .wp-block-gallery.has-nested-images.columns-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.tdc-page__body .wp-block-gallery.has-nested-images,
	.tdc-page__body .wp-block-gallery.has-nested-images.columns-2,
	.tdc-page__body .wp-block-gallery.has-nested-images.columns-4 { grid-template-columns: 1fr; }
}

/* ============================================================================
   BẢN MOBILE — sửa theo SỐ ĐO, ngày 18/09/2026
   ----------------------------------------------------------------------------
   Đo bằng Chromium ở 360/390/414/768px trên staging (tools/scan/ux_mobile.js),
   đối chiếu trang mẫu khách chỉ: portcoast.com.vn/vi/lanh-dao/.

   | Đo ở 390px, trang /gioi-thieu/nang-luc/ | Trước  | Portcoast |
   |-----------------------------------------|--------|-----------|
   | y của chữ đầu tiên trong bài             | 1206px | 331px     |
   | khối menu cột bên nằm ở đâu              | TRÊN bài (y=392, cao 460) | DƯỚI bài |
   | hộp "Cần tư vấn"                         | TRÊN bài (y=874, cao 308) | — |
   | dải tiêu đề: tiêu đề / breadcrumb        | trái / góc phải 12px | giữa / ngay dưới, giữa |

   768px của menu + card đứng trước bài là lỗi bố cục 2 cột xuống 1 cột: HTML để cột
   bên trước <article> (đúng cho desktop, sai cho mobile). Đảo bằng `order`, KHÔNG
   đụng thứ tự HTML — giữ nguyên cho SEO và trình đọc màn hình.
   ========================================================================= */

@media (max-width: 980px) {
	/* `display: contents` để menu con và card liên hệ trở thành Ô LƯỚI riêng — nếu không thì
	   `order` chỉ xếp được cả cụm `.tdc-page__aside`, không tách được hai thứ bên trong. */
	.tdc-page__aside { display: contents; }

	.tdc-page__article { order: 1; }
	.tdc-cardlh       { order: 2; }   /* đọc xong bài mới mời liên hệ — đúng chỗ của một CTA */
	.tdc-subnav       { order: 3; }   /* điều hướng anh-chị-em: cuối bài, như portcoast */

	/* Cả hai khối nay đứng riêng, không còn thừa kế lề của cột bên. */
	.tdc-page__aside > .tdc-cardlh:first-child,
	.tdc-cardlh { margin-top: 0; }
	.tdc-subnav { margin-top: 4px; }
}

@media (max-width: 800px) {
	/* ---- Dải tiêu đề: tiêu đề lớn căn giữa, breadcrumb NGAY DƯỚI và cũng căn giữa ----
	   Bản cũ để breadcrumb ở góc phải trên, cỡ 12px, và ở 390px nó xuống dòng thành hai
	   hàng lệch. Bố cục giữa của portcoast đọc rõ hơn hẳn ở bề ngang hẹp. */
	body:not(.home) .page-title .wf-wrap {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		padding: 34px 18px 30px !important;
	}
	body:not(.home) .page-title .page-title-head,
	body:not(.home) .page-title .page-title-breadcrumbs {
		width: 100%;
		text-align: center !important;
	}
	body:not(.home) .page-title h1,
	body:not(.home) .page-title .entry-title,
	body:not(.home) .page-title .page-title-head h1 {
		font-size: clamp(1.45rem, 6.6vw, 1.95rem) !important;
		text-align: center !important;
		margin: 0 !important;
	}
	body:not(.home) .page-title .breadcrumbs {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0 2px;
		margin: 10px 0 0 !important;
		padding: 0 !important;
		font-size: 13px !important;
		text-align: center !important;
	}
	body:not(.home) .page-title .breadcrumbs li { float: none !important; }
	/* Vùng bấm 44px cao mà KHÔNG làm dải cao thêm: nở bằng padding rồi kéo lại bằng lề âm.
	   Các mục breadcrumb nằm cạnh nhau theo chiều ngang nên phần nở ra không chồng lên nhau. */
	body:not(.home) .page-title .breadcrumbs a {
		display: inline-block;
		min-width: 44px;      /* "Home" chỉ rộng 40px — thiếu 4px */
		padding: 14px 4px;
		margin: -14px 0;
		text-align: center;
	}
	/* Lớp phủ chéo (đậm trái → nhạt phải) hợp với tiêu đề canh trái. Khi chữ ra giữa thì mép
	   phải chỉ còn .50 — trên ảnh có trời sáng là chữ trắng mất chân. Đổi sang phủ dọc đều. */
	body:not(.home) .page-title::after {
		background: linear-gradient(180deg,
			rgba(20, 32, 51, .88) 0%,
			rgba(20, 32, 51, .74) 100%);
	}

	/* ---- Cắt khoảng trắng thừa giữa dải tiêu đề và chữ đầu tiên ----
	   Đo được 86px trắng trơn ở 390px: 50px padding dọc của `.wf-wrap` (The7) + 36px của
	   `#content`. Trên màn hình cao 800px thì đó là 11% màn hình đầu tiên. */
	body:not(.home) #main > .wf-wrap {
		padding-top: 0 !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	body:not(.home) #content.content,
	body:not(.home) #content.tdc-page {
		padding: 22px 0 48px !important;
	}

	/* ---- Vùng bấm ≥ 44px trong các khối của trang con ---- */
	.tdc-subnav__list a { padding: 13px 16px; min-height: 44px; box-sizing: border-box; }
	.tdc-subnav__heading a { padding: 15px 18px; min-height: 44px; box-sizing: border-box; }

	/* Số điện thoại / email trong card "Cần tư vấn" và trong bảng thông tin trang Liên hệ:
	   chữ chỉ cao 17–18px. Nở vùng bấm bằng padding + lề âm, chữ không xê dịch. */
	.tdc-cardlh__row a,
	.tdc-lienhe__tin a {
		display: inline-block;
		padding: 13px 2px;
		margin: -13px 0;
	}
	.tdc-cardlh__row--tel a { padding: 11px 2px; margin: -11px 0; }

	/* Phải đủ đặc hiệu để thắng luật của The7:
	   `input[type=submit]:not([name=update_cart]):not(.woocommerce-…)` = (0,3,1) và nó đặt
	   `min-height: 1px`. Luật cũ của ta (0,1,1) thua im lặng — nút đo được 99×37. */
	.tdc-lienhe .tdc-lienhe__form input.wpcf7-submit[type="submit"],
	.tdc-lienhe .tdc-lienhe__form input[type="submit"] {
		min-height: 46px;
		padding: 12px 34px;
	}
	.tdc-lienhe__form input[type="text"],
	.tdc-lienhe__form input[type="email"],
	.tdc-lienhe__form input[type="tel"],
	.tdc-lienhe__form input[type="url"] { min-height: 46px; }
}

/* Nút gửi form: trắng trên #0495D8 chỉ đạt 3.34 — dưới AA 4.5. Cùng lỗi đã sửa cho
   `.tdc-subnav__heading` và `.tdc-cardlh__cta`, chỗ này sót lại. #0374A8 = 5.16. */
.tdc-lienhe__form input[type="submit"] { background: var(--tdc-blue-ink); }
.tdc-lienhe__form input[type="submit"]:hover { background: var(--tdc-blue-deep); }

/* Nút "lên đầu trang" của The7 đo được 40×40 — thiếu 4px so với 44. Không nằm trong file bị
   khoá nào, sửa được từ đây. (Trang chủ không nạp page.css nên vẫn còn 40×40 — xem báo cáo.) */
.scroll-top { width: 44px; height: 44px; }

/* Tiêu đề chuyên mục tin: The7 bọc chữ trong <span> rồi tô #222 cỡ 20px cho trang lưu trữ ⇒
   luật trắng ở trên chỉ ăn thẻ h1, chữ thật vẫn đen chìm trên ảnh nền (khách chụp 23/09). */
body:not(.home) .page-title h1 > span {
	color: inherit !important;
	font: inherit !important;
	text-transform: inherit !important;
}