/* Brand — bảng màu ĐO TỪ LOGO CHÍNH THỨC (khách chốt 2026-09-10), không theo tedi.vn nữa.
 * Nguồn: /data/kho/tuvangiaothong/brand/color/brand-colors.css
 * Sinh lại: cd code-web/tuvangiaothong && python3 tools/brand/build_brand.py
 * Số tương phản WCAG của từng màu: brand/color/CONTRAST.md — đọc trước khi dùng làm màu CHỮ. */
:root {
	--tdc-blue: #0495D8;       /* mặt nước trong logo — màu chủ đạo. MẢNG/VIỀN, không dùng làm chữ nhỏ (3.34) */
	--tdc-blue-ink: #0374A8;   /* cùng sắc nhưng đủ đậm để LÀM CHỮ trên nền trắng (5.16) */
	--tdc-blue-deep: #02567D;  /* điểm cuối gradient, hover đậm (7.99) */
	--tdc-blue-soft: #C0E4F5;  /* nền nhạt, viền mảnh */
	--tdc-sky: #DFF3FE;        /* trời trong logo — nền dải nhạt */
	--tdc-navy: #2C3093;       /* viền khối trong logo — nền footer, tiêu đề (10.76) */
	--tdc-navy-deep: #1B1D5B;
	--tdc-yellow: #F5ED6E;     /* nền logo — dải nhấn, gạch chân tiêu đề. KHÔNG làm màu chữ trên trắng (1.22) */
	--tdc-yellow-deep: #979244;
	--tdc-red: #EA232A;        /* chữ G trong logo — nhãn "mới", nút hành động (4.40) */
	--tdc-red-dark: #BB1C21;
	--tdc-wrap: 1340px;        /* khung nội dung (The7 mặc định 1200) */

	/* Header ĐIỆN THOẠI — hai số đi với nhau, đổi cái này phải nghĩ tới cái kia.
	   80px lấy theo tedi.vn (cùng chạy The7); logo 68px chừa 6px mỗi bên. Logo là tấm biển
	   có viền vàng riêng nên cần khe thở, không dán sát mép như logo rời của tedi. */
	--tdc-mobile-header-h: 80px;
	--tdc-mobile-logo-h: 68px;
	--tdc-sec-y: 72px;         /* nhịp dọc giữa các dải */
	--tdc-blue-2: #0374A8;     /* giữ tên cũ cho tương thích — nay là xanh-đậm-làm-chữ */
	--tdc-blue-3: #02567D;     /* giữ tên cũ — nay là xanh đậm nhất, dùng khi hover */
	--tdc-dark: #1B1D5B;       /* tiêu đề: navy sâu lấy từ logo, thay #000f1c gần đen */
	--tdc-dark-2: #2d2d2d;
	--tdc-text: #333333;
	/* Đổi 10/09 sau audit tương phản: #a3abaf chỉ đạt 2.33 trên nền trắng — trượt AA (cần 4.5).
	   Nó đang tô ~65 phần tử gồm KÝ HIỆU VĂN BẢN và CHỨC DANH của 24 nhân sự, tức là chữ người
	   ta thật sự cần đọc. #6D7375 giữ nguyên sắc xám-lam, đạt 4.82. */
	--tdc-muted: #6D7375;
	--tdc-muted-tren-toi: rgba(255, 255, 255, .78);  /* chữ phụ trên nền xanh/navy */
	--tdc-bg: #f7f7f7;
	--tdc-bg-soft: #f7f7f7;
	--tdc-white: #ffffff;
	--tdc-font: "Encode Sans", "Open Sans", Arial, Tahoma, sans-serif;
}

body,
.wf-container,
#page {
	font-family: var(--tdc-font);
	color: var(--tdc-text);
}


/* ---------------------------------------------------------------------------
 * Ghi đè HỆ BIẾN của The7 — cách đúng để đổi font/màu toàn theme.
 *
 * The7 14.x không viết `body{font-family:Arial}` mà viết
 *   html, body, body.page, .wf-container > * { font-family: var(--the7-base-font-big) }
 * rồi định nghĩa mọi biến `--the7-*-font-family` = Arial trong `the7-css/css-vars.css`.
 *
 * Hai lý do phải đi đường biến chứ đừng đấu selector:
 *   1. Selector của nó là `body.page` — độ đặc hiệu (0,1,1), CAO HƠN `body` (0,0,1) của ta,
 *      nên dù CSS ta nạp sau vẫn thua. (Đã mất một vòng vì tưởng cứ nạp sau là thắng.)
 *   2. Có 38 biến font-family cho từng thành phần (menu, nút, breadcrumb, filter, widget…).
 *      Đè biến là xong một lượt; đấu selector là đuổi theo vô tận.
 * ------------------------------------------------------------------------- */
:root, body#the7-body {
	--the7-additional-logo-elements-font-family: var(--tdc-font);
	--the7-additional-menu-elements-font-family: var(--tdc-font);
	--the7-base-font-family: var(--tdc-font);
	--the7-breadcrumbs-font-family: var(--tdc-font);
	--the7-btn-l-font-family: var(--tdc-font);
	--the7-btn-m-font-family: var(--tdc-font);
	--the7-btn-s-font-family: var(--tdc-font);
	--the7-close-menu-caption-font-family: var(--tdc-font);
	--the7-close-mobile-menu-caption-font-family: var(--tdc-font);
	--the7-filter-font-family: var(--tdc-font);
	--the7-h1-font-family: var(--tdc-font);
	--the7-h2-font-family: var(--tdc-font);
	--the7-h3-font-family: var(--tdc-font);
	--the7-h4-font-family: var(--tdc-font);
	--the7-h5-font-family: var(--tdc-font);
	--the7-h6-font-family: var(--tdc-font);
	--the7-mega-menu-desc-font-family: var(--tdc-font);
	--the7-mega-menu-title-font-family: var(--tdc-font);
	--the7-menu-caption-font-family: var(--tdc-font);
	--the7-menu-font-family: var(--tdc-font);
	--the7-microwidget-button-2-font-family: var(--tdc-font);
	--the7-microwidget-button-font-family: var(--tdc-font);
	--the7-microwidgets-in-top-line-font-family: var(--tdc-font);
	--the7-mobile-menu-caption-font-family: var(--tdc-font);
	--the7-mobile-menu-font-family: var(--tdc-font);
	--the7-mobile-menu-microwidgets-font-family: var(--tdc-font);
	--the7-mobile-microwidgets-font-family: var(--tdc-font);
	--the7-mobile-sub-menu-font-family: var(--tdc-font);
	--the7-mw-search-font-family: var(--tdc-font);
	--the7-page-title-font-family: var(--tdc-font);
	--the7-sub-subtitle-font-family: var(--tdc-font);
	--the7-submenu-font-family: var(--tdc-font);
	--the7-subtitle-font-family: var(--tdc-font);
	--the7-top-bar-font-family: var(--tdc-font);
	--the7-widget-content-font-family: var(--tdc-font);
	--the7-widget-title-font-family: var(--tdc-font);

	/* ---------------------------------------------------------------------
	 * MÀU — sửa ở GỐC, không đè bằng luật mới.
	 *
	 * `the7-css/css-vars.css` (file The7 tự sinh từ Theme Options) còn **36 biến** mang
	 * `#005faa` — **màu của tedi.vn**, lọt vào hồi dựng theme theo site tham chiếu. DM-20260910-031
	 * đã chốt bỏ màu mượn này, nhưng lần đó chỉ đè bằng các luật `!important` ở cuối file, nên
	 * chỗ nào chưa nghĩ tới thì vẫn ra màu tedi. Khai lại biến ở đây là dập một lần cho cả 36 chỗ.
	 *
	 * ⚠️ KHÔNG sửa vào `the7-css/css-vars.css`: file đó The7 sinh lại mỗi lần lưu Theme Options,
	 * sửa vào là mất trong im lặng.
	 * ------------------------------------------------------------------- */
	--the7-accent-color: var(--tdc-blue-ink);
	--the7-accent-bg-color: var(--tdc-blue-ink);
	--the7-beautiful-loading-bg: var(--tdc-blue-ink);
	/* Màn hình chờ lúc tải trang dùng biến TÊN KHÁC (`--the7-elementor-...`) và có giá trị dự
	   phòng `#005faa` ghi thẳng trong khối <style> nội tuyến — đổi mỗi biến trên là nó vẫn ra
	   màu tedi. Đây là chỗ cuối cùng còn sót sau khi quét 7 trang. */
	--the7-elementor-beautiful-loading-bg: var(--tdc-blue-ink);
	--the7-btn-bg-color: var(--tdc-blue-ink);
	--the7-btn-border-color: var(--tdc-blue-ink);
	--the7-btn-hover-bg-color: var(--tdc-blue-deep);
	--the7-btn-border-hover-color: var(--tdc-blue-deep);
	--the7-menu-active-color: var(--tdc-blue-ink);
	--the7-menu-active-last-color: var(--tdc-blue-ink);
	--the7-menu-hover-color: var(--tdc-blue-ink);
	--the7-menu-hover-last-color: var(--tdc-blue-ink);
	--the7-menu-active-decor-color: var(--tdc-blue);
	--the7-menu-hover-decor-color: var(--tdc-blue);
	--the7-menu-active-line-decor-color: var(--tdc-blue);
	--the7-menu-line-decor-color: var(--tdc-blue);
	--the7-submenu-active-color: var(--tdc-blue-ink);
	--the7-submenu-hover-color: var(--tdc-blue-ink);
	--the7-megamenu-title-active-color: var(--tdc-blue-ink);
	--the7-megamenu-title-hover-color: var(--tdc-blue-ink);
	--the7-floating-menu-color-active: var(--tdc-blue-ink);
	--the7-floating-menu-color-hover: var(--tdc-blue-ink);
	--the7-floating-menu-active-last-color: var(--tdc-blue-ink);
	--the7-floating-menu-hover-last-color: var(--tdc-blue-ink);
	--the7-microwidget-button-bg: var(--tdc-blue-ink);
	--the7-microwidget-button-border-color: var(--tdc-blue-ink);
	--the7-microwidget-button-hover-bg: var(--tdc-blue-deep);
	--the7-microwidget-button-hover-border-color: var(--tdc-blue-deep);
	--the7-microwidget-button-2-bg: var(--tdc-blue-ink);
	--the7-microwidget-button-2-border-color: var(--tdc-blue-ink);
	--the7-microwidget-button-2-hover-bg: var(--tdc-blue-deep);
	--the7-microwidget-button-2-hover-border-color: var(--tdc-blue-deep);
	--the7-page-title-bg-color: var(--tdc-navy-deep);
	--the7-top-icons-bg-color: var(--tdc-blue-ink);
	--the7-top-icons-bg-color-hover: var(--tdc-blue-deep);

	/* ---------------------------------------------------------------------
	 * PANEL MENU ĐIỆN THOẠI — The7 để mặc định nền `#111111` gần như đen, chữ nhấn `#005faa`.
	 *
	 * Đen không có trong bộ nhận diện TDC, mà tệ hơn là **màu nhấn `#005faa` là màu TỐI**:
	 * đặt lên nền gần đen thì tương phản chỉ ~1,9 — mục đang mở và mục đang đứng gần như đọc
	 * không ra (đúng cái khách chụp lại ngày 22/09).
	 *
	 * Nay: nền **navy `#1B1D5B`** lấy từ viền khối trong logo, chữ trắng (tương phản 12,8),
	 * mục đang đứng dùng **`#C0E4F5`** — bản SÁNG của xanh thương hiệu, vì trên nền tối thì
	 * màu nhấn bắt buộc phải sáng hơn nền, không thể dùng lại màu nhấn của nền trắng.
	 * ------------------------------------------------------------------- */
	/* ⚠️ Bốn biến dưới đây là LƯỚI AN TOÀN, KHÔNG phải thứ đang có tác dụng. Đo ngày 22/09:
	   `the7-css/custom.css` **ghi thẳng mã màu** cho panel menu điện thoại (`#111111`,
	   `#005faa`, `rgba(153,153,153,.12)`) chứ không đọc biến — The7 nướng giá trị vào file lúc
	   lưu Theme Options. Nên phần thật sự đổi màu là khối luật ở cuối file này. Giữ biến để
	   phòng bản The7 sau chuyển sang đọc biến. */
	--the7-mobile-menu-bg-color: var(--tdc-navy-deep);
	--the7-mobile-menu-color: #ffffff;
	--the7-mobile-menu-active-color: var(--tdc-blue-soft);
	--the7-mobile-menu-hover-color: var(--tdc-blue-soft);
	--the7-mobile-menu-divider-color: rgba(255, 255, 255, .14);
	--the7-mobile-menu-microwidgets-color: rgba(255, 255, 255, .78);
	--the7-mobile-menu-microwidgets-icon-color: rgba(255, 255, 255, .78);
	--the7-close-mobile-menu-caption-color: rgba(255, 255, 255, .8);
	--the7-close-mobile-menu-caption-color-hover: #ffffff;
	--the7-woo-content-font-family: var(--tdc-font);
	--the7-woo-title-font-family: var(--tdc-font);
	--the7-base-font-size: 15px;
	--the7-base-font-line-height: 28px;
}

/* Thang chữ đo từ Theme Options của tedi.vn. Không có khối này thì The7 áp mặc định của nó
   (Arial 15/20, h2 weight 400) và trang trông nhạt — xem docs/DESIGN_SPEC.md §1. */
body, body#the7-body { font-size: 15px; line-height: 28px; }
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title h1 { font-family: var(--tdc-font); color: var(--tdc-dark); }
h1, .page-title h1 { font-size: 38px; line-height: 48px; font-weight: 700; }
h2 { font-size: 26px; line-height: 32px; font-weight: 700; }
h3 { font-size: 22px; line-height: 32px; font-weight: 600; }
h4 { font-size: 20px; line-height: 30px; font-weight: 600; }
h5 { font-size: 18px; line-height: 28px; font-weight: 600; }

/* Ép nền sáng — The7 skin tối làm chữ xám trên đen */
body#the7-body,
#page,
#main,
#content,
.content,
.wf-wrap,
.wf-container,
.wf-container-main,
.page-inner {
	background-color: #ffffff !important;
	color: var(--tdc-text) !important;
}
#main .page-title,
#main .entry-title,
.fancy-header .fancy-title,
.fancy-header .breadcrumbs,
.fancy-header .breadcrumbs a {
	color: var(--tdc-dark) !important;
}
#sidebar {
	display: none !important;
}

/* The7 viết `#main > .wf-wrap { width: 1200px }`.
   ⚠️ HAI ĐIỀU PHẢI ĐÚNG, sai một là vô hiệu (đã mất 2 vòng vì chuyện này):
   1. Selector của nó có **#id** ⇒ độ đặc hiệu (1,1,0), cao hơn `.home .wf-wrap` (0,2,0);
      muốn thắng thì luật của ta cũng phải mang `#main`.
   2. Nó đặt `width`, KHÔNG phải `max-width` — ghi đè `max-width` thì không đụng gì tới nó. */
#main > .wf-wrap,
.page-title > .wf-wrap,
#fancy-header > .wf-wrap { width: var(--tdc-wrap); max-width: 100%; }
#main {
	width: 100% !important;
	float: none !important;
	display: block !important;
}
#content.content {
	width: 100% !important;
	float: none !important;
	max-width: var(--tdc-wrap);
	margin: 0 auto;
	padding: 24px 20px 48px !important;
}
/* Page title / trang con — xem assets/css/page.css */
.tdc-footer {
	/* The7 #page = CSS grid named areas: header/slider/title/main/footer.
	   Thiếu grid-area thì footer bị auto-place vào hàng slider (đúng lỗi trang con). */
	grid-area: footer !important;
	clear: both !important;
	display: block !important;
	width: 100% !important;
	float: none !important;
	position: relative;
	z-index: 2;
}
#footer.empty-footer,
#footer.full-width-line.empty-footer {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
}

/* Tắt preloader The7 nếu filter không ăn */
body.tdc-no-preloader #load,
body.tdc-no-preloader .load-wrap,
#load {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

a {
	color: var(--tdc-blue-ink);
}
a:hover {
	color: var(--tdc-blue-3);
}

/* Top bar */
.tdc-topbar {
	background: var(--tdc-dark);
	color: #cfd8dc;
	font-size: 13px;
	line-height: 1.2;
}
.tdc-topbar__inner {
	max-width: var(--tdc-wrap);
	margin: 0 auto;
	padding: 8px 20px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.tdc-topbar a {
	color: #e3f2fd;
	text-decoration: none;
}
.tdc-topbar a:hover {
	color: #fff;
}
.tdc-topbar__sep {
	margin: 0 8px;
	opacity: 0.45;
}
.tdc-topbar__lang--muted {
	opacity: 0.55;
}
/* Ô phải của topbar đang RỖNG có chủ đích (chỗ dành cho link mạng xã hội, xem
   template-parts/site-topbar.php). Rỗng mà vẫn là flex item thì nó ăn thêm một
   `gap: 16px` của .tdc-topbar__inner, và ở 390px phần thừa đó đủ đẩy dòng
   email|điện-thoại xuống dòng 2 ⇒ topbar cao 63px thay vì 32px. `:empty` gỡ hẳn
   nó khỏi layout; khi nào thêm link vào thì luật này tự hết tác dụng. */
.tdc-topbar__right:empty {
	display: none;
}

/* Buttons */
.tdc-btn {
	display: inline-block;
	background: var(--tdc-blue);
	color: #fff !important;
	padding: 12px 22px;
	text-decoration: none !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: background 0.2s ease;
}
.tdc-btn:hover {
	background: var(--tdc-blue-2);
}

/* Section heads */
.tdc-section-head {
	max-width: var(--tdc-wrap);
	margin: 0 auto 28px;
	padding: 0 20px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.tdc-section-head h2 {
	margin: 0;
	font-size: clamp(1.4rem, 2.2vw, 1.85rem);
	color: var(--tdc-dark);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.tdc-section-head p {
	margin: 6px 0 0;
	width: 100%;
	color: var(--tdc-muted);
}
.tdc-section-head__link {
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* Front page: full bleed content, no The7 chrome */
body.home #main > .wf-wrap,
body.home #main .wf-container-main {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
body.home #content.tdc-home {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.home .page-title,
body.home .fancy-header,
body.home #sidebar {
	display: none !important;
}

/* The7 viết `#main > .wf-wrap { width: 1200px }`.
   ⚠️ HAI ĐIỀU PHẢI ĐÚNG, sai một là vô hiệu (đã mất 2 vòng vì chuyện này):
   1. Selector của nó có **#id** ⇒ độ đặc hiệu (1,1,0), cao hơn `.home .wf-wrap` (0,2,0);
      muốn thắng thì luật của ta cũng phải mang `#main`.
   2. Nó đặt `width`, KHÔNG phải `max-width` — ghi đè `max-width` thì không đụng gì tới nó. */
#main > .wf-wrap,
.page-title > .wf-wrap,
#fancy-header > .wf-wrap { width: var(--tdc-wrap); max-width: 100%; }

/* Menu accent: xanh TEDI — đè dynamic CSS The7 */
#the7-body #main-nav > li > a:hover,
#the7-body #main-nav > li.act > a,
#the7-body #main-nav > li.current-menu-item > a,
#the7-body #main-nav > li.current-menu-ancestor > a,
#the7-body .main-nav > li > a:hover,
#the7-body .main-nav > li.act > a,
#the7-body .main-nav > li.current-menu-item > a,
#the7-body .main-nav > li.current-menu-ancestor > a,
#the7-body .mini-nav a:hover {
	color: var(--tdc-blue-ink) !important;
}
/* 🔴 Menu ĐIỆN THOẠI phải tách khỏi luật trên. Trước đây hai selector này nằm chung, nên mục
   đang đứng bị tô `--tdc-blue-ink` (#0374A8) — màu dành cho chữ trên nền TRẮNG. Panel menu
   điện thoại là nền tối, đặt màu đó lên chỉ còn tương phản ~1,9: nhìn như chữ bị mờ đi, chứ
   không ra "đang ở trang này". Trên nền tối thì màu nhấn phải SÁNG hơn nền.
   Bài học chung: một màu nhấn không dùng được cho cả nền sáng lẫn nền tối. */
#the7-body .mobile-main-nav > li.current-menu-item > a,
#the7-body .mobile-main-nav > li.current-menu-ancestor > a,
#the7-body .mobile-main-nav > li.act > a,
#the7-body .mobile-main-nav ul > li.current-menu-item > a {
	color: var(--tdc-blue-soft) !important;
}
#the7-body #main-nav > li > a:hover > span:before,
#the7-body #main-nav > li > a:hover > span:after,
#the7-body #main-nav > li.act > a > span:before,
#the7-body #main-nav > li.act > a > span:after,
#the7-body #main-nav > li.current-menu-item > a > span:before,
#the7-body #main-nav > li.current-menu-item > a > span:after,
#the7-body .main-nav > li.act > a > span:before,
#the7-body .main-nav > li.act > a > span:after,
#the7-body .main-nav > li.current-menu-item > a > span:before,
#the7-body .main-nav > li.current-menu-item > a > span:after {
	background-color: var(--tdc-blue) !important;
	color: var(--tdc-blue-ink) !important;
}

/* Logo header — xem khối [1] phía dưới để biết vì sao 110px. */
.branding .logo img,
.branding img.preload-me {
	max-height: 110px;
	width: auto;
}

/* ===========================================================================
 * HEADER ĐIỆN THOẠI — kích thước. (Bố cục trái/phải + neo nằm ở
 * `inc/header-dien-thoai.php`; đọc chú thích đầu file đó để biết vì sao tách đôi.)
 *
 * Đo 23/09/2026, khổ 390×844, đối chiếu tedi.vn (cùng chạy The7) và portcoast.com.vn:
 * cả hai để header điện thoại ~80px và GIỮ NGUYÊN khi cuộn. Ta lấy 80px theo tedi.vn.
 *
 * 🔴 Từ 23/09 header điện thoại NEO (`sticky-mobile-header`), nên mỗi pixel chiều cao là
 *    pixel bị lấy mất SUỐT phiên duyệt web, không phải chỉ ở đầu trang. Đó là lý do hạ
 *    100px → 80px chứ không phải vì thẩm mỹ: 100px ăn 11,8% màn 844, 80px còn 9,5%.
 * ------------------------------------------------------------------------- */

#the7-body .masthead .mobile-header-bar {
	/* 🔴 Phải ghi `min-height`, KHÔNG phải `height`. The7 đặt `min-height` (100px ở khổ điện
	   thoại, 150px ở khổ máy tính bảng) — mà `min-height` luôn THẮNG `height` dù ta có ghi
	   specificity cao hơn. Lần đầu ghi `height: 80px` xong đo lại vẫn ra đúng 100px, không
	   có lỗi nào báo. Giữ luôn `height` cho đủ cặp. */
	min-height: var(--tdc-mobile-header-h);
	height: var(--tdc-mobile-header-h);
	/* 30px là mặc định The7; tedi.vn dùng 20px. Ở khổ 390 thì 20px trả lại 20px bề ngang
	   cho hàng logo–menu, đáng giá hơn khoảng lề. */
	padding-left: 20px;
	padding-right: 20px;
}
#the7-body .masthead .mobile-header-space { height: var(--tdc-mobile-header-h); }

/* Mép dưới header lúc NEO. The7 thay `box-shadow` của ta bằng một quầng mờ toả đều
   `rgba(0,0,0,.07) 0 0 15px 1px` — không lệch hướng, nên ở đoạn nền TRẮNG thì header không có
   mép nào cả và chữ trôi vào dưới nó như bị cắt cụt. Đo pixel ngay dưới đáy header khi cuộn:
   255,255,255 suốt tới tận nền của khối bên dưới — không có một pixel nào là bóng.
   Đoạn nền xám nhìn có vẻ ổn chỉ là ăn may: cái đường ta tưởng là bóng chính là nền xám đó.
   Giữ lại quầng mờ của The7 và cộng thêm sợi kẻ 1px — cùng màu với mép header lúc nghỉ. */
#the7-body .masthead.sticky-mobile-on {
	box-shadow: 0 1px 0 #e6e9ec, rgba(0, 0, 0, .07) 0 0 15px 1px;
}

/* Logo MOBILE — phải ghim chiều cao, theme cha không ghim.
   The7 để thẻ `<img class="mobile-logo">` nở theo bề rộng khả dụng chứ không theo chiều cao
   header. Đo 18/09/2026 với logo cũ (tỉ lệ 2,14): nó chiếm 278×130 CSS px — cao gấp 2,2 lần
   logo PC và ăn gần hết dòng đầu màn hình 390px.
   🔴 23/09/2026 — logo đổi sang bản DỌC nguyên bản (tỉ lệ 0,84 thay vì 2,14), nên RÀNG BUỘC
   ĐỔI CHIỀU: bề ngang hết là vấn đề (68px cao ⇒ chỉ 57px rộng), cái phải giữ bây giờ là
   CHIỀU CAO — logo dọc cao bao nhiêu thì header điện thoại cao thêm đúng bấy nhiêu.
   ⚠️ Đừng cố kéo mobile lên cho đọc được chữ "TDC.1997": đã render nguyên pixel mà đo, chữ chỉ
   rõ từ h≥104px — ở điện thoại nghĩa là header ~156px, ăn 18% màn hình. Không đáng. Ở khổ này
   logo là dấu NHẬN RA, không phải chữ để ĐỌC.

   🔴 BẪY ĐÃ CẮN 23/09/2026 — vì sao selector phải nhắm `.mobile-branding img` chứ không nhắm
   class: khi header chuyển sang trạng thái neo (`.masthead.sticky-mobile-on`), The7 **TRÁO
   SANG MỘT THẺ <img> KHÁC** mang `class="preload-me"` — KHÔNG có `mobile-logo`. Luật cũ nhắm
   `img.mobile-logo` trượt hoàn toàn thẻ đó, và vì WordPress in sẵn `height="300"` trong HTML,
   logo nở đúng 300px, đội header điện thoại từ 80px lên 300px. Ở đầu trang nhìn KHÔNG THẤY GÌ
   SAI — chỉ lòi ra khi cuộn. Vì vậy phải ghim cả `height: auto` (chỉ `max-height` là chưa đủ
   khi HTML có thuộc tính height), và phải nhắm theo VỊ TRÍ (trong ô logo) chứ không theo class.
   ⚠️ Nhắm rộng hơn thành `.mobile-header-bar img` là hỏng lá cờ ngôn ngữ (`.tdc-lang__co`
   cao cố định 12px) — `height: auto` sẽ kéo nó về tỉ lệ gốc. */
.branding img.mobile-logo,
#the7-body img.mobile-logo,
#the7-body .mobile-branding img {
	max-height: var(--tdc-mobile-logo-h);
	width: auto;
	height: auto;
	max-width: 100%;
}

/* Ẩn credit Dream-Theme / bottom bar rác */
#bottom-bar,
.the7-powered,
a[href*="dream-theme.com"],
.wf-container-bottom .text-normal {
	display: none !important;
}

.tdc-eyebrow {
	margin: 0 0 8px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tdc-blue-ink);
}

/* Section head accent (trang chủ + archive) */
.tdc-section-head h2 {
	position: relative;
	padding-bottom: 10px;
}
.tdc-section-head h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	background: var(--tdc-blue);
}


/* ---- Bảng danh mục dự án (7 trang Lĩnh vực) — nội dung nặng nhất của site ---- */
.tdc-page-content table,
.entry-content table {
	width: 100%; border-collapse: collapse; margin: 0 0 1.8rem;
	/* 14/22 đo được là quá chật cho bảng 57 dòng — chữ chạm viền, mắt không tách được hàng.
	   15/24 vẫn đặc hơn chữ trong bài (16.3/28.6) nhưng thở được. */
	font-size: 15px; line-height: 24px;
}
.tdc-page-content table td, .tdc-page-content table th,
.entry-content table td, .entry-content table th {
	border: 1px solid #e6e9ec; padding: 13px 16px; vertical-align: top;
}
/* Hàng đầu chỉ tô nền khi bảng THẬT SỰ là bảng dữ liệu — mốc: có từ 4 hàng trở lên.
   Nhiều văn bản pháp quy dùng bảng 2 hàng để dựng phần TIÊU NGỮ ("BỘ KẾ HOẠCH VÀ ĐẦU TƯ /
   CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM"); tô nền xanh cho nó thì trông như lỗi. */
.tdc-page-content table:has(tr:nth-child(4)) tr:first-child td,
.entry-content table:has(tr:nth-child(4)) tr:first-child td,
.tdc-page-content table th, .entry-content table th {
	background: var(--tdc-sky); font-weight: 700; color: var(--tdc-dark);
	/* Hàng tiêu đề dính lại khi cuộn bảng dài — bảng dự án dài tới 57 dòng. */
	position: sticky; top: 0; z-index: 1;
}

/* Bảng hai cột kiểu "nhãn — giá trị" (thông tin phòng thí nghiệm, thông tin liên hệ): cột nhãn
   co đúng bề rộng chữ thay vì chiếm nửa bảng. */
.tdc-page-content table tr > th:first-child:last-of-type,
.entry-content table tr > th:first-child:last-of-type { width: 1%; white-space: nowrap; }
.tdc-page-content table tr:nth-child(even) td,
.entry-content table tr:nth-child(even) td { background: #fbfcfd; }
.tdc-page-content table p, .entry-content table p { margin: 0; }

/* ===========================================================================
 * VÒNG 2 — đối chiếu ảnh chụp với tedi.vn (docs/DESIGN_SPEC.md §3).
 * Mỗi khối dưới đây sửa MỘT lỗi nhìn thấy được trên ảnh, không sửa đoán.
 * ========================================================================= */

/* [1] Header đang nền ĐEN và khung 1200. tedi.vn: header trắng, khung 1340,
       logo trái + menu phải trên CÙNG MỘT HÀNG (ta đang xếp chồng 2 hàng). */
.masthead,
.masthead.classic-header { background-color: var(--tdc-white); box-shadow: 0 1px 0 #e6e9ec; }
.masthead .header-bar { width: var(--tdc-wrap); max-width: 100%; }

/* ⚠️ ĐÃ THỬ VÀ BỎ: ép `.header-bar` thành flex để logo trái + menu phải cùng hàng như tedi.vn.
   The7 có JS tự đo bề rộng menu để gộp mục thừa; đổi sang flex làm phép đo sai và menu chỉ còn
   hiện đúng "Trang chủ". Bố cục header phải đổi bằng Header Builder của The7, KHÔNG bằng CSS. */
/* 🔴 110px, không phải 58px — khách chốt 23/09/2026 dùng logo DỌC nguyên bản (huy hiệu trên,
   chữ "TDC.1997" dưới) thay cho lockup ngang. Chữ chỉ chiếm 12,9% chiều cao logo, nên chiều cao
   ô logo quyết định chữ có đọc được hay không. Render nguyên pixel rồi soi từng mức:
     h= 88px → khe stencil trong "TDC" dính hẳn, đọc ra một vệt xám
     h= 96px → khe hiện mờ, vẫn phải đoán
     h=104px → NGƯỠNG: T/D/C tách bạch
     h=110px → khe sạch, đọc thoải mái  ← chốt, lấy dư một nhịp so với ngưỡng
   Bề ngang KHÔNG phải rủi ro: 110px cao ⇒ 93px rộng, HẸP HƠN lockup ngang cũ (151px) 58px, nên
   hàng logo+menu còn dư nhiều hơn trước chứ không chật đi. */
.masthead .branding .logo img,
.masthead .branding img.preload-me { max-height: 110px; width: auto; }
#the7-body #primary-menu > li > a { color: var(--tdc-dark); font-weight: 600; font-size: 15px; }
#the7-body #primary-menu > li > a:hover,
#the7-body #primary-menu > li.current-menu-item > a { color: var(--tdc-blue-ink); }

/* [6] Footer: nền navy #2C3093 lấy từ viền khối trong logo (trước đây mượn navy của tedi.vn). */
.tdc-footer { background: var(--tdc-navy); }
.tdc-footer__title {
	text-transform: uppercase; letter-spacing: .04em;
	font-size: 14px; font-weight: 700; color: #fff;
}
.tdc-footer a { color: #c8d0da; }
.tdc-footer a:hover { color: #fff; }
.tdc-footer__copy { border-top: 1px solid rgba(255,255,255,.1); }


/* [7] Menu CHỮ TRẮNG TRÊN NỀN TRẮNG — vô hình.
       Nguyên nhân: The7 tô màu chữ menu cho header nền TỐI (mặc định của nó); ta đổi masthead
       sang trắng nên chữ biến mất, chỉ mục đang chọn còn thấy vì nó có màu xanh riêng.

       ⚠️ CÁCH TÌM RA (ghi lại vì rất dễ đi sai): computed color của `a` và của `.menu-item-text`
       đều báo màu ĐẬM, `opacity:1`, `visibility:visible`, có bề rộng — mọi số đo đều "đúng" mà
       ảnh chụp vẫn trắng. Chỉ khi ép `color:red !important` lên `a` VÀ MỌI PHẦN TỬ CON thì cả 8
       mục mới hiện ⇒ chữ nằm ở một phần tử con SÂU HƠN `.menu-item-text`, và The7 tô nó bằng
       luật có `!important`. Vì vậy ở đây bắt buộc dùng `*` + `!important` — không phải lười.

       Bài học: computed style của phần tử cha KHÔNG chứng minh chữ được vẽ. Muốn chắc thì chụp
       riêng phần tử (`locator.screenshot()`) và nhìn. */
#the7-body .masthead .navigation a,
#the7-body .masthead .navigation a * {
	color: var(--tdc-dark) !important;
	-webkit-text-fill-color: var(--tdc-dark) !important;
}
#the7-body .masthead #primary-menu > li > a,
#the7-body .masthead #primary-menu > li > a * {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .01em;
}
#the7-body .masthead #primary-menu > li > a:hover,
#the7-body .masthead #primary-menu > li > a:hover *,
#the7-body .masthead #primary-menu > li.current-menu-item > a,
#the7-body .masthead #primary-menu > li.current-menu-item > a *,
#the7-body .masthead #primary-menu > li.current-menu-ancestor > a,
#the7-body .masthead #primary-menu > li.current-menu-ancestor > a * {
	color: var(--tdc-blue-ink) !important;
	-webkit-text-fill-color: var(--tdc-blue-ink) !important;
}

/* Menu con: nền trắng, chữ tối, viền nhẹ */
#the7-body .masthead .sub-nav { background: #fff; border: 1px solid #e6e9ec; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
#the7-body .masthead .sub-nav > li > a,
#the7-body .masthead .sub-nav > li > a * {
	color: var(--tdc-text) !important;
	-webkit-text-fill-color: var(--tdc-text) !important;
	text-transform: none; font-weight: 400; font-size: 14px;
}
#the7-body .masthead .sub-nav > li > a:hover,
#the7-body .masthead .sub-nav > li > a:hover * {
	color: var(--tdc-blue-ink) !important; -webkit-text-fill-color: var(--tdc-blue-ink) !important;
}

/* [8] Top bar: tedi.vn dùng NỀN XANH chữ trắng. Ta đang xám nhạt chữ xám ⇒ chìm, trông tạm bợ. */
.tdc-topbar { background: var(--tdc-blue); color: #fff; }
.tdc-topbar a, .tdc-topbar .tdc-topbar__lang { color: #fff; }
.tdc-topbar a:hover { color: #cfe6ff; }
.tdc-topbar__sep { color: rgba(255,255,255,.45); }
.tdc-topbar__lang--muted { color: rgba(255,255,255,.65) !important; }

/* [9] Logo trái + menu phải CÙNG HÀNG như tedi.vn.
       Dùng position:absolute thay vì flex: The7 có JS đo bề rộng `ul` để gộp mục thừa, đổi
       container sang flex làm phép đo sai (đã thử, menu chỉ còn 1 mục). Absolute giữ nguyên
       bề rộng tự nhiên của `ul` nên JS vẫn đo đúng. */
@media (min-width: 1100px) {
	.masthead.classic-header .header-bar { position: relative; min-height: 96px; }
	.masthead.classic-header .navigation {
		position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0;
	}
	/* `align-self: stretch` thêm 23/09/2026. `.header-bar` là flex `align-items: flex-end` (của
	   The7) nên nó DÍ `.branding` xuống đáy thanh: logo cũ 58px nằm trong thanh 140px thì thừa
	   44px ở trên và 0 ở dưới — không ai thấy vì logo bé. Logo nguyên bản 110px làm cái lệch đó
	   lộ ra ngay: mép dưới logo chạm đúng mép dưới header.
	   `stretch` cho `.branding` cao bằng thanh, rồi `align-items: center` của chính nó canh giữa
	   logo ⇒ đều 15px trên/dưới. Dùng `stretch` chứ KHÔNG viết cứng `min-height: 140px`: 140px là
	   Theme Option của The7, đổi trong admin là số viết cứng sai ngay mà không báo gì. */
	.masthead.classic-header .branding {
		display: flex; align-items: center; align-self: stretch; min-height: 96px;
	}
}


/* ===========================================================================
 * FOOTER — áp cho MỌI TRANG.
 *
 * ⚠️ Trước 09/09 toàn bộ CSS footer nằm trong `home.css`, mà `home.css` chỉ enqueue khi
 * `is_front_page()`. Hệ quả: trang chủ footer 4 cột đẹp, còn MỌI TRANG CON footer vỡ
 * thành một cột dọc và chữ tối nằm trên nền navy ⇒ gần như không đọc được. Lỗi này không
 * lộ ra khi chỉ xem trang chủ — phải chụp trang con mới thấy.
 * Quy tắc từ nay: cái gì hiện trên mọi trang thì CSS phải ở brand.css, không ở home.css.
 * ========================================================================= */


/* ---- Footer ---- */
.tdc-footer {
	background: var(--tdc-navy);
	color: #cfd8dc;
	margin-top: 0;
}

.tdc-footer a {
	color: #e3f2fd;
	text-decoration: none;
}

.tdc-footer a:hover {
	color: #fff;
}

.tdc-footer__inner {
	max-width: var(--tdc-wrap);
	margin: 0 auto;
	padding: 48px 20px 28px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 28px;
}

.tdc-footer__title {
	margin: 0 0 14px;
	color: #fff;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tdc-footer__col p {
	margin: 0 0 8px;
	line-height: 1.55;
	font-size: 0.92rem;
}

.tdc-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tdc-footer__col li + li {
	margin-top: 8px;
}

.tdc-footer__copy {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	max-width: var(--tdc-wrap);
	margin: 0 auto;
	padding: 14px 20px 22px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 0.82rem;
	opacity: 0.85;
}



/* Footer — siết màu để không phụ thuộc màu kế thừa của The7.
   Trên trang con, `<strong>`/`<p>` trong cột Liên hệ nhận màu chữ tối của body ⇒ chữ tối trên
   nền navy, gần như không đọc được. Khai màu tường minh cho mọi phần tử con. */
.tdc-footer,
.tdc-footer p,
.tdc-footer li,
.tdc-footer strong,
.tdc-footer span { color: #c8d0da; }
.tdc-footer strong { color: #ffffff; font-weight: 600; }
.tdc-footer h3,
.tdc-footer .tdc-footer__title { color: #ffffff; }
.tdc-footer a { color: #c8d0da; text-decoration: none; }
.tdc-footer a:hover { color: #ffffff; }
.tdc-footer ul { list-style: none; margin: 0; padding: 0; }
.tdc-footer li { margin: 0 0 8px; font-size: 14px; line-height: 22px; }
.tdc-footer p { margin: 0 0 8px; font-size: 14px; line-height: 22px; }

/* Dải bản quyền: tách bằng đường kẻ mờ, hai đầu hai bên như tedi.vn */
.tdc-footer__copy {
	max-width: var(--tdc-wrap);
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid rgba(255,255,255,.1);
	font-size: 13px;
	color: #8d99a8;
}
@media (max-width: 782px) {
	.tdc-footer__inner { grid-template-columns: 1fr 1fr; }
	.tdc-footer__copy { flex-direction: column; text-align: center; }
}
@media (max-width: 520px) {
	.tdc-footer__inner { grid-template-columns: 1fr; }
}

/* [10] HEADER NEO (#phantom) — The7 nhân bản header khi cuộn xuống.
       ⚠️ Nó KHÔNG dùng `.navigation` mà là `#phantom > .ph-wrap > .menu-box > ul.main-nav`,
       nên luật màu menu ở [7] không với tới ⇒ chữ giữ nguyên TRẮNG của The7 (dành cho header nền
       tối) nằm trên nền trắng 90% ⇒ vô hình, chỉ mục đang chọn còn thấy vì nó màu xanh.
       Đúng cùng một lỗi với header chính, nhưng ở một cây DOM khác — sửa chỗ này không tự lan
       sang chỗ kia. Kiểm bằng cách CUỘN rồi mới chụp, đứng ở đầu trang thì #phantom đang ẩn. */
#the7-body #phantom .menu-box a,
#the7-body #phantom .menu-box a *,
#the7-body #phantom .main-nav > li > a,
#the7-body #phantom .main-nav > li > a * {
	color: var(--tdc-dark) !important;
	-webkit-text-fill-color: var(--tdc-dark) !important;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
}
#the7-body #phantom .main-nav > li > a:hover,
#the7-body #phantom .main-nav > li > a:hover *,
#the7-body #phantom .main-nav > li.current-menu-item > a,
#the7-body #phantom .main-nav > li.current-menu-item > a *,
#the7-body #phantom .main-nav > li.current-menu-ancestor > a,
#the7-body #phantom .main-nav > li.current-menu-ancestor > a * {
	color: var(--tdc-blue-ink) !important;
	-webkit-text-fill-color: var(--tdc-blue-ink) !important;
}
/* Menu con của header neo cũng nền trắng chữ tối */
#the7-body #phantom .sub-nav { background: #fff; border: 1px solid var(--tdc-line, #e6e9ec); }
#the7-body #phantom .sub-nav > li > a,
#the7-body #phantom .sub-nav > li > a * {
	color: var(--tdc-text) !important; -webkit-text-fill-color: var(--tdc-text) !important;
	text-transform: none; font-weight: 400;
}

/* Nền mờ 90% cho chữ chồng lên nội dung phía sau khi cuộn — đục hẳn + đổ bóng cho tách lớp. */
#the7-body #phantom.masthead {
	background-color: #fff !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
}
/* box-sizing phải là border-box: dưới kia có padding-left cho logo, để content-box thì
   `.ph-wrap` rộng 1340+190 = 1530px ⇒ tràn ngang, logo dạt sát mép trái màn hình. */
#the7-body #phantom .ph-wrap {
	box-sizing: border-box;
	width: var(--tdc-wrap); max-width: 100%; margin: 0 auto;
}

/* Logo trong header neo. The7 bật cờ `phantom-custom-logo-on` trên <body> nhưng KHÔNG nhân bản
   thẻ <img> sang `#phantom` (đã kiểm: `#phantom .logo-box` là 0x0), nên cuộn xuống là mất nhận
   diện thương hiệu. Đặt bằng ::before thay vì đi sửa JS của theme cha — rẻ, không đụng theme,
   và mất theme cha thì cũng chỉ mất một ảnh nền. */
/* 23/09/2026: ô này phải đổi theo tỉ lệ logo mới. Logo ngang cũ là 168×52 (tỉ lệ 3,2); logo dọc
   nguyên bản là 0,84 ⇒ để nguyên 168×52 thì `contain` vẽ logo chỉ 44px rộng, dạt trái, chừa 124px
   trống — nhìn như lỗi. Ô mới 64×76: header neo cao 100px nên 76px là mức cao nhất còn chừa được
   12px mỗi bên; padding-left 92px = 64px ô + 28px khe. */
#the7-body #phantom .ph-wrap { position: relative; padding-left: 92px; }
#the7-body #phantom .ph-wrap::before {
	content: "";
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 64px; height: 76px;
	/* URL bơm từ functions.php theo TDC_LOGO_ID — ĐỪNG viết cứng lại. Lần trước viết cứng nên
	   đổi logo xong header neo vẫn ra logo cũ, mà nhìn ở đầu trang thì không thấy gì sai. */
	background: var(--tdc-logo-neo) left center / contain no-repeat;
}
@media (max-width: 1100px) {
	#the7-body #phantom .ph-wrap { padding-left: 0; }
	#the7-body #phantom .ph-wrap::before { display: none; }
}

/* Logo chân trang — đứng trên tiêu đề cột "Liên hệ".
   23/09/2026: nay là logo DỌC nguyên bản, KHÔNG phải bản chữ trắng. Logo tự mang mảng vàng nên
   nổi rõ trên nền navy #2C3093 (đã dựng thử cả hai bản đặt cạnh nhau rồi mới chọn).
   96px chứ không phải 54px: dưới 104px chữ "TDC.1997" bắt đầu dính, mà chân trang thì rộng rãi
   — lấy 96px là mức vừa đủ rõ vừa không lấn tiêu đề cột. Rộng tương ứng chỉ 81px. */
.tdc-footer__logo {
	display: block;
	width: auto;
	height: 96px;
	margin: 0 0 18px;
}


/* ============================================================================
   [12] ẢNH & BẢNG TRONG NỘI DUNG NHẬP TỪ WEB CŨ
   ----------------------------------------------------------------------------
   Web cũ chèn thẳng ảnh khổ gốc vào bài, không thuộc tính width. Có tấm 2361px trong khi cột
   nội dung chỉ 930px ⇒ ảnh TRÀN 1444px ra ngoài, kéo theo cả cái bảng bọc nó rộng 2387px, và
   trang sinh thanh cuộn ngang. Chỉ lộ ra khi đo `getBoundingClientRect().right` so với cột —
   ảnh chụp fullPage vẫn trông "bình thường" vì phần tràn nằm ngoài khung.

   Bảng thì bọc trong `.tdc-bang` (inc/bang-du-an.php) để cuộn ngang tại chỗ thay vì đẩy cả trang.
   ========================================================================= */
.entry-content img {
	max-width: 100%;
	height: auto;
}
.tdc-bang {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.tdc-bang > table { max-width: 100%; }

/* ============================================================================
   [13] THƯ VIỆN ẢNH TRONG BÀI ([gallery] của WordPress)
   ----------------------------------------------------------------------------
   Gallery mặc định giữ nguyên tỉ lệ ảnh gốc. Ảnh khách gửi đủ mọi tỉ lệ nên hàng nào cũng so
   le, chen khoảng trắng giữa các tấm. Ép lưới đều + cắt bằng object-fit; bấm vào vẫn mở ảnh
   đầy đủ nên không mất phần bị cắt.

   Ở đây (brand.css) chứ không ở pages.css: pages.css chỉ nạp cho du-an/van-ban, mà gallery còn
   dùng ở trang thường (ISO 9001, LAS-XD…). Đây đúng là kiểu lỗi footer từng vỡ trên trang con.
   ========================================================================= */
.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 26px 0 0;
}
.entry-content .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.entry-content .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.entry-content .gallery br { display: none; }
.entry-content .gallery-item {
	margin: 0 !important;
	width: auto !important;
	float: none !important;
}
.entry-content .gallery-icon,
.entry-content .gallery-icon a { display: block; overflow: hidden; }
.entry-content .gallery-item img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border: 0 !important;
	transition: transform .3s ease;
}
.entry-content .gallery-item img:hover { transform: scale(1.04); }
.entry-content .gallery-caption { display: none; }

/* Ảnh TÀI LIỆU (chứng chỉ, quyết định) là trang giấy dọc — cắt kiểu `cover` là mất đầu mất
   chân, đọc không ra gì. Hiện trọn trang trên nền nhạt, có viền cho ra dáng tờ giấy. */
.tdc-anh-tailieu .gallery-item img {
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: #f3f6f9;
	border: 1px solid var(--tdc-line, #e6e9ec) !important;
}
.tdc-anh-tailieu .gallery-item img:hover { transform: none; }

@media (max-width: 900px) {
	.entry-content .gallery,
	.entry-content .gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.entry-content .gallery,
	.entry-content .gallery-columns-4 { grid-template-columns: 1fr; }
}


/* ============================================================================
   [14] TƯƠNG PHẢN — sửa theo audit WCAG 2.1 AA ngày 10/09/2026
   ----------------------------------------------------------------------------
   Kỷ luật "hệ hai xanh", đo được ở cả tedi.vn (#005faa / #008be8) lẫn Ramboll
   (#005bb5 / #0098eb), và 8/8 hãng tư vấn hạ tầng lớn đều theo:

     --tdc-blue-ink  #0374A8  5.16  ⭐ NGỰA THỒ — nền nút chữ trắng, màu link, icon có nghĩa
     --tdc-blue      #0495D8  3.34     CHỈ điểm nhấn — gạch chân, viền active, mảng đồ hoạ

   `#0495D8` làm nền nút chữ trắng chỉ đạt 3.34, dưới ngưỡng AA 4.5. Lỗi này KHÔNG nhìn thấy
   bằng mắt thường nhưng 93 phần tử trên toàn site đang dính.
   ========================================================================= */
.tdc-topbar { background: var(--tdc-blue-ink); }
.tdc-topbar__sep { color: rgba(255, 255, 255, .55); }
.tdc-topbar__lang--muted { color: var(--tdc-muted-tren-toi); }

/* `.tdc-cardlh__cta a` và `.tdc-subnav__heading` KHÔNG liệt kê ở đây: page.css sở hữu chúng và
   nạp SAU brand.css, nên luật ở đây thua. Đã sửa tại nguồn trong page.css. */
.tdc-btn,
.tdc-lienhe__form input[type="submit"],
.tdc-pdf__xem,
#the7-body .tdc-filter__item.is-active,
#the7-body .page-numbers.current {
	background: var(--tdc-blue-ink);
	border-color: var(--tdc-blue-ink);
}
.tdc-btn:hover,
.tdc-lienhe__form input[type="submit"]:hover,
.tdc-pdf__xem:hover {
	background: var(--tdc-blue-deep);
	border-color: var(--tdc-blue-deep);
}

/* Chữ phụ trên nền tối (chân trang, card liên hệ) — xám #6D7375 chỉ hợp nền sáng. */
.tdc-footer .tdc-footer__col p,
.tdc-cardlh__desc,
.tdc-cardlh__row--dc { color: var(--tdc-muted-tren-toi); }

/* ---------------------------------------------------------------------------
   [15] CHỈ BÁO FOCUS BÀN PHÍM — trước đó 0/14 chặng Tab thấy được gì.
   Kiểu vàng-viền-đậm của GOV.UK: vàng logo một mình chỉ 1.22 so với trắng, nên thanh navy
   4px bên dưới mới là thứ tạo tương phản (15.29). Đây là cách duy nhất dùng được #F5ED6E
   mà không phạm WCAG — biến màu nền logo thành tài sản nhận diện thay vì màu chết.
   ------------------------------------------------------------------------ */
#the7-body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid transparent;
	background-color: var(--tdc-yellow);
	color: var(--tdc-navy-deep) !important;
	box-shadow: 0 -2px var(--tdc-yellow), 0 4px var(--tdc-navy-deep);
	text-decoration: none;
}
/* Ảnh và thẻ thì viền quanh, đừng đổi nền. */
#the7-body :is(a, button):has(img):focus-visible,
#the7-body .tdc-hub__card:focus-visible,
#the7-body .tdc-card:focus-visible {
	background-color: transparent;
	box-shadow: none;
	outline: 3px solid var(--tdc-navy-deep);
	outline-offset: 2px;
}


/* ---------------------------------------------------------------------------
 * PANEL MENU ĐIỆN THOẠI — đổi bằng LUẬT, vì The7 ghi thẳng mã màu vào `custom.css`.
 *
 * Khách chụp lại ngày 22/09: panel đen kịt, mục đang đứng màu xanh sẫm gần như chìm vào nền.
 * Truy ra hai nguyên nhân, cả hai đều nằm ở `the7-css/custom.css` (file The7 tự sinh):
 *   - dòng 2578: `.dt-mobile-header { background-color: #111111 }` — đen, không có trong
 *     bộ nhận diện TDC.
 *   - dòng 2786 & 2790: mục đang đứng tô `#005faa` — **màu của tedi.vn**, và là màu TỐI: đặt
 *     lên nền #111111 thì tương phản chỉ ~1,9.
 *
 * 🔴 Chi tiết suýt làm hỏng bản vá: The7 bọc chữ trong `<span class="menu-text">` và tô màu
 *    THẲNG vào span đó. Sửa màu ở thẻ `<a>` thôi thì **không có tác dụng gì** — con đã có màu
 *    riêng thì không thừa kế của cha nữa. Phải nhắm cả `.menu-text` và `.subtitle-text`.
 *
 * ⚠️ KHÔNG sửa `the7-css/custom.css`: The7 sinh lại nó mỗi lần lưu Theme Options.
 * ------------------------------------------------------------------------- */

/* Nền panel + lớp phủ: navy lấy từ viền khối trong logo. */
#the7-body .dt-mobile-header {
	background-color: var(--tdc-navy-deep);
}
#the7-body .mobile-sticky-header-overlay,
#the7-body .mobile-sticky-sidebar-overlay {
	background-color: rgba(27, 29, 91, .55);
}

/* Mục đang đứng — phải là màu SÁNG trên nền tối, không dùng lại màu nhấn của nền trắng. */
#the7-body .mobile-main-nav li.act > a,
#the7-body .mobile-main-nav li.act > a .menu-text,
#the7-body .mobile-main-nav li.act > a .subtitle-text,
#the7-body .mobile-main-nav li.current-menu-item > a,
#the7-body .mobile-main-nav li.current-menu-item > a .menu-text,
#the7-body .mobile-main-nav li.current-menu-ancestor > a,
#the7-body .mobile-main-nav li.current-menu-ancestor > a .menu-text,
#the7-body .dt-mobile-header .mobile-main-nav .sub-nav > li.act > a .menu-text,
#the7-body .dt-mobile-header .mobile-main-nav .sub-nav > li.act > a .subtitle-text {
	color: var(--tdc-blue-soft) !important;
}

/* Đường kẻ ngăn cách: xám-trên-đen đổi sang trắng mờ cho hợp nền navy. */
#the7-body .mobile-menu-show-divider .mobile-main-nav > li:before {
	border-bottom-color: rgba(255, 255, 255, .16);
}

/* Dấu + bung nhánh: The7 để `rgba(255,255,255,.17)` — mờ tới mức nhìn như hỏng, người dùng
   không biết mục đó còn menu con. Nâng lên .62 vẫn nhạt hơn chữ nên không tranh chỗ. */
#the7-body .mobile-main-nav > li.has-children > a:after,
#the7-body .mobile-main-nav .next-level-button svg,
#the7-body .mobile-main-nav > li.menu-item-language > a:after {
	color: rgba(255, 255, 255, .62);
	fill: rgba(255, 255, 255, .62);
}

/* Chữ menu điện thoại: The7 ghi thẳng `Arial, Helvetica, Arial, Verdana` vào
   `custom.css` (`.mobile-main-nav li > a .menu-text`) nên biến
   `--the7-mobile-menu-font-family` khai ở trên KHÔNG có tác dụng. Đo 22/09: cả web chạy
   Encode Sans, riêng menu điện thoại ra Arial — khách mở menu là thấy ngay chữ khác hẳn
   phần còn lại. */
#the7-body .mobile-main-nav li > a,
#the7-body .mobile-main-nav li > a .menu-text,
#the7-body .mobile-main-nav li > a .subtitle-text,
#the7-body .dt-close-mobile-menu-icon .close-line-caption {
	font-family: var(--tdc-font);
}

/* ---------------------------------------------------------------------------
 * Nút chuyển ngôn ngữ (inc/ngon-ngu.php) — có ở thanh trên cùng VÀ cạnh menu chính.
 * Đặt cạnh menu chính là để header NEO (lúc cuộn xuống) cũng có: thanh trên cùng bị cuộn mất,
 * mà đó lại đúng lúc người ta đọc nội dung và nghĩ tới chuyện đổi ngôn ngữ.
 * ------------------------------------------------------------------------- */
.tdc-lang {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--tdc-font);
}
.tdc-lang__muc {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}
.tdc-lang__co {
	display: block;
	width: 18px;
	height: 12px;
	border-radius: 2px;
	/* Cờ nền trắng (cờ Anh) đặt trên thanh xanh sẽ tan vào nền — viền mảnh giữ lại hình cờ. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.tdc-lang__ma { letter-spacing: .04em; }

/* Cạnh menu chính: nền trắng, chữ theo màu chữ menu.
   Chỉ còn MỘT nút (ngôn ngữ kia) nên cho nó viền nhẹ để đọc ra là nút bấm, không lẫn vào
   một mục menu nữa. */
.tdc-lang--header {
	margin-left: 14px;
}
.tdc-lang--header .tdc-lang__muc {
	color: var(--tdc-dark);
	border: 1px solid #D8E3EC;
}
.tdc-lang--header a.tdc-lang__muc:hover {
	background: var(--tdc-sky);
	color: var(--tdc-blue-ink);
	border-color: var(--tdc-blue-soft);
}

/* Thanh trên cùng: nền xanh đậm, chữ trắng. */
.tdc-lang--topbar .tdc-lang__muc { color: rgba(255, 255, 255, .82); padding: 2px 6px; }
.tdc-lang--topbar a.tdc-lang__muc:hover { background: rgba(255, 255, 255, .16); color: #fff; }


/* Điện thoại: thanh trên cùng đã chật, bỏ chữ VN/EN chỉ giữ lá cờ. */
@media (max-width: 600px) {
	.tdc-lang--topbar .tdc-lang__ma { display: none; }
}

/* Nút ngôn ngữ nằm trong <ul> menu chính (để header neo và menu điện thoại cùng có). */
.tdc-lang-li { display: flex; align-items: center; }
.tdc-lang-li::before,
.tdc-lang-li::after { content: none !important; }
.tdc-lang--menu { margin-left: 10px; }
.tdc-lang--menu .tdc-lang__muc { color: var(--tdc-dark); font-size: 12.5px; }
.tdc-lang--menu a.tdc-lang__muc:hover { background: var(--tdc-sky); color: var(--tdc-blue-ink); }
.tdc-lang--menu .tdc-lang__muc { border: 1px solid #D8E3EC; }

/* Trong panel menu điện thoại thì nền là navy — chữ phải sáng lên, và cho nó đứng riêng
   một dòng có khoảng thở, đừng để dính vào "Liên hệ" như một mục menu nữa. */
#the7-body .mobile-main-nav .tdc-lang-li {
	padding: 14px 0 4px;
	margin-top: 6px;
}
#the7-body .mobile-main-nav .tdc-lang--menu { margin-left: 0; }
#the7-body .mobile-main-nav .tdc-lang--menu .tdc-lang__muc {
	color: rgba(255, 255, 255, .85);
	font-size: 14px;
	padding: 6px 10px;
}
#the7-body .mobile-main-nav .tdc-lang--menu .tdc-lang__muc {
	border-color: rgba(255, 255, 255, .28);
}

/* ---------------------------------------------------------------------------
 * Dải trắng giữa header và hero trang chủ.
 *
 * The7 để `.sidebar-none { padding-top: 50px }` cho MỌI trang — hợp lý khi nội dung mở đầu
 * bằng chữ trên nền trắng, nhưng trang chủ mở đầu bằng `.tdc-hero` tràn viền nền navy. 50px
 * trắng kẹp giữa header trắng và khối navy không đọc ra là khoảng thở, nó đọc ra là ĐƯỜNG NỐI
 * bị hở. Đo 23/09 ở khổ 390: header hết ở y=112 mà hero mãi y=162.
 *
 * Chỉ gỡ ở trang mở đầu bằng khối tràn viền, KHÔNG gỡ toàn site: trang trong vẫn mở đầu bằng
 * tiêu đề trên nền trắng và vẫn cần 50px đó. `:has()` để luật tự tắt nếu sau này trang chủ đổi
 * bố cục — không phải quay lại sửa tay.
 * ------------------------------------------------------------------------- */
/* 🔴 Phải ghi `#main`, không phải `.sidebar-none`. Luật 50px của The7 là `#main{padding:50px 0}`
   — selector ID, thắng mọi tổ hợp class dù ta có xâu chuỗi bao nhiêu lớp trong `:has()`.
   Bản đầu viết `.sidebar-none:has(...)` đo lại vẫn ra đúng 50px, không lỗi nào báo. */
/* 01/10/2026: thêm nhánh `.tdc-mo-dau` — hero nay nằm trong khối màn mở đầu (front-page.php),
   không còn là con trực tiếp của `.content`, nên nhánh cũ tự tắt và 50px trắng quay lại. */
#main:has(> .wf-wrap > .wf-container-main > .content > .tdc-hero),
#main:has(> .wf-wrap > .wf-container-main > .content > .tdc-mo-dau) { padding-top: 0; }

/* ---- Ảnh trong bài mở lightbox (inc/bai-viet.php) ----
   Chú thích của khối Gallery nằm ĐÈ lên mép dưới ảnh — không cho nó nuốt cú bấm, nếu không
   bấm trúng dòng chữ thì chẳng mở gì. Con trỏ kính lúp báo trước "bấm để xem lớn". */
.wp-block-gallery figcaption { pointer-events: none; }
a.dt-pswp-item { cursor: zoom-in; }


/* ===========================================================================
 * VÒNG 3 — HEADER MÁY TÍNH (01/10/2026, khách duyệt qua chat)
 *
 * Khách: "kích thước logo to quá, cần điều chỉnh tỷ lệ hài hoà hơn giữa logo và phần text
 * (menu), và đẩy logo ra phía gần góc trái hơn". Đối chiếu tedi.vn ở 1920px:
 *
 *                     ta (trước)          tedi.vn          ta (sau)
 *   logo cao          110px               ~56px            72px
 *   header cao        140px               80px             96px
 *   mép trái logo     x=390               x=50             x=80
 *
 * 🔴 Đánh đổi đã biết: 23/09 chốt 110px vì dưới 104px khe stencil trong chữ "TDC.1997" dính
 *    lại (khối ghi chú phía trên). Ở 72px huy hiệu vẫn nhận ra ngay nhưng dòng chữ nhỏ dưới
 *    huy hiệu chỉ còn ~9px. Khách ưu tiên tỷ lệ hài hoà — đây là lựa chọn của khách.
 *
 * Khung header + topbar nới ra 1840px, đệm 40px hai bên (tedi dùng gần tràn màn hình); khung
 * NỘI DUNG vẫn 1340px như cũ. Topbar nới theo để email thẳng hàng với logo.
 * Chỉ ≥1100px: dưới mốc đó là header điện thoại, đã chỉnh riêng ở khối "HEADER ĐIỆN THOẠI".
 * ========================================================================= */
@media (min-width: 1100px) {
	.tdc-topbar__inner { max-width: 1840px; box-sizing: border-box; padding-left: 40px; padding-right: 40px; }
	#the7-body .masthead.classic-header .header-bar {
		width: 100%; max-width: 1840px; box-sizing: border-box;
		padding-left: 40px; padding-right: 40px;
		min-height: 96px; height: 96px;
	}
	#the7-body .masthead.classic-header .branding { min-height: 96px; padding-left: 0; }
	#the7-body .masthead .branding .logo img,
	#the7-body .masthead .branding img.preload-me { max-height: 72px; width: auto; height: auto; }
	/* Menu absolute (khối [9]) bám mép phải của header-bar — phải trừ đệm 40px cho cân. */
	#the7-body .masthead.classic-header .navigation { right: 40px; }
}