/* ============================================================================
   VÒNG 5 — LÀN "GIAO DIỆN": hiệu ứng + nhịp chung TOÀN SITE (góp ý khách 30/10/2026)
   Số mục theo /data/kho/tuvangiaothong/2026-10-30/GOP-Y-THEO-STT-KHACH.md:
     1.2d  rê chuột từng mục menu cấp 1 (máy tính)
     1.3d  menu con mở bằng bàn phím (focus-within) + chạm trên máy tính bảng (js/v5-giaodien.js)
     1.4c  điện thoại: lề ≥ 20px, khối thoáng — làm luôn máy tính
     1.5d/e/f  hiệu ứng nút (nền lan, mũi tên trượt, đổi màu) cho MỌI nút đang có — chỉ CSS, không sửa HTML
     1.7a/b/c  màu nhấn đỏ tiết chế, tiêu đề to hơn một bậc, Encode Sans ở cả menu + nút
   File này nạp SAU vong5.css nhưng TRƯỚC page.css/home.css (functions.php enqueue chúng sau) ⇒ mọi
   luật cần thắng page.css/home.css phải mang `#the7-body` để đủ đặc hiệu. Màu CHỈ brand kit (DM-051).
   ============================================================================ */

/* ---- 1.7c Encode Sans cho menu + nút ----
   Đo 02/11 (Playwright, 1440px): 28 mục menu máy tính `.menu-text` và mọi <button> đang hiện bằng
   ARIAL — The7 đặt `--the7-menu-font-family` riêng và <button> không thừa kế font. Encode Sans đã
   nạp đủ 3 tệp (latin, latin-ext, vietnamese) ở 400/600/700; 800 nạp thêm trong inc/v5-giaodien.php. */
#the7-body .masthead .main-nav a,
#the7-body .masthead .main-nav .menu-text,
#the7-body .masthead .main-nav .subtitle-text,
#the7-body .breadcrumbs,
#the7-body .breadcrumbs *,
#the7-body button,
#the7-body input[type="submit"],
#the7-body input[type="button"],
#the7-body select,
#the7-body textarea,
#the7-body input[type="text"],
#the7-body input[type="email"],
#the7-body input[type="tel"],
#the7-body input[type="search"] {
	font-family: var(--tdc-font) !important;
}

/* ---- 1.2d Rê chuột trên mục menu cấp 1: chỉ đổi màu chữ (xanh logo đậm) ----
   02/11 Henry: BỎ vạch gạch dưới khi rê — nó nằm sát vạch xanh trên đỉnh menu con ⇒ thành 2 đường kẻ
   xanh chồng nhau. tedi.vn và bản tvgtweb.web.app cũng chỉ đổi màu chữ. */
@media (min-width: 1100px) {
	#the7-body .masthead #primary-menu > li > a .menu-text { transition: color .2s ease; }
	#the7-body .masthead #primary-menu > li:hover > a,
	#the7-body .masthead #primary-menu > li:hover > a *,
	#the7-body .masthead #primary-menu > li.dt-hovered > a,
	#the7-body .masthead #primary-menu > li.dt-hovered > a * {
		color: var(--tdc-blue-ink) !important; -webkit-text-fill-color: var(--tdc-blue-ink) !important;
	}
}

/* ---- 1.3d Menu con: mở bằng bàn phím (Tab vào mục cha) và bằng chạm (lớp tdc-mo do JS gắn) ----
   The7 chỉ mở khi rê chuột (gắn .dt-hovered bằng JS) ⇒ Tab đi thẳng qua, mục con ẩn không bao giờ
   nhận focus. :focus-within mở khi mục cha có focus nên Tab kế tiếp đi VÀO mục con. Esc đóng
   (lớp tdc-esc, JS). */
@media (min-width: 1100px) {
	#the7-body .masthead .main-nav > li:focus-within:not(.tdc-esc) > .sub-nav,
	#the7-body .masthead .main-nav > li.tdc-mo > .sub-nav {
		visibility: visible !important; opacity: 1 !important; transform: none;
	}
	/* Esc: The7 tự ghi `style="visibility:visible;opacity:1"` khi mục cha nhận focus ⇒ phải !important. */
	#the7-body .masthead .main-nav > li.tdc-esc > .sub-nav {
		visibility: hidden !important; opacity: 0 !important;
	}
	#the7-body .masthead .main-nav > li.tdc-mo > a .menu-text::after { transform: rotate(180deg); }
}

/* ---- 1.5d/e/f Nút: nền lan từ trái, mũi tên trượt, đổi màu ----
   Cùng cách `.tdc-nut` (vong5.css) nhưng KHÔNG cần lớp mới trong HTML: nền lan vẽ bằng
   background-image co giãn (chạy được cả trên <input type=submit>, thứ không có ::before).
   --lan = màu lan vào; mũi tên ::after (nếu nút chưa có) trượt 5px. Chỉ áp cho :hover — focus bàn
   phím giữ kiểu vàng logo + vạch navy chung toàn site (brand.css [15]), đừng chồng thêm. */
#the7-body .tdc-btn,
#the7-body .tdc-section-head__link,
#the7-body .tdc-cardlh__cta a,
#the7-body input.wpcf7-submit,
#the7-body .tdc-lienhe__form input[type="submit"],
#the7-body .tdc-pdf__xem,
#the7-body .tdc-filter__item,
#the7-body .tdc-tv__nut-loc,
#the7-body .tdc-pagination a.page-numbers,
#the7-body .navigation.pagination a.page-numbers,
#the7-body .paginator a {
	--lan: var(--tdc-blue-deep);
	background-image: linear-gradient(var(--lan), var(--lan));
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 0 100%;
	transition: background-size .35s cubic-bezier(.2, .7, .2, 1), background-color .25s ease,
		color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#the7-body .tdc-btn:hover,
#the7-body .tdc-section-head__link:hover,
#the7-body .tdc-cardlh__cta a:hover,
#the7-body input.wpcf7-submit:hover,
#the7-body .tdc-lienhe__form input[type="submit"]:hover,
#the7-body .tdc-pdf__xem:hover,
#the7-body .tdc-filter__item:not(.is-active):hover,
#the7-body .tdc-tv__nut-loc:not(.dang-chon):hover,
#the7-body .tdc-pagination a.page-numbers:hover,
#the7-body .navigation.pagination a.page-numbers:hover,
#the7-body .paginator a:hover {
	background-size: 100% 100%;
}

/* Nút xanh đặc "Tìm hiểu về TDC", "Tải văn bản", "Xem văn bản": xanh mực → lan xanh đậm + mũi tên. */
#the7-body .tdc-btn,
#the7-body .tdc-pdf__xem {
	background-color: var(--tdc-blue-ink) !important; border-radius: 3px;
	box-shadow: 0 0 0 0 rgba(2, 64, 94, 0);
}
#the7-body .tdc-btn:hover,
#the7-body .tdc-pdf__xem:hover {
	--lan: var(--tdc-navy-deep);
	background-color: var(--tdc-blue-ink) !important;
	box-shadow: 0 8px 18px -10px rgba(2, 64, 94, .7);
}
#the7-body .tdc-btn::after {
	content: "→"; display: inline-block; margin-left: 10px;
	transition: transform .25s ease;
}
#the7-body .tdc-btn:hover::after { transform: translateX(5px); }

/* "Xem tất cả dự án / tin tức": nút viền → lan xanh mực, chữ trắng, mũi tên (đã có " →") trượt. */
#the7-body .tdc-section-head__link { --lan: var(--tdc-blue-ink); }
#the7-body .tdc-section-head__link:hover {
	background-color: transparent !important; color: #fff !important;
}
#the7-body .tdc-section-head__link::after { display: inline-block; margin-left: .35em; transition: transform .25s ease; }
#the7-body .tdc-section-head__link:hover::after { transform: translateX(5px); }

/* Nút ĐỎ hành động chính trong hộp "Cần tư vấn?" (Gửi yêu cầu): đỏ → lan đỏ đậm + mũi tên. */
#the7-body .tdc-cardlh__cta a {
	--lan: var(--tdc-red-dark);
	background-color: var(--tdc-red) !important; border-radius: 3px;
}
#the7-body .tdc-cardlh__cta a:hover { background-color: var(--tdc-red) !important; }
#the7-body .tdc-cardlh__cta a::after {
	content: "→"; display: inline-block; margin-left: 10px; transition: transform .25s ease;
}
#the7-body .tdc-cardlh__cta a:hover::after { transform: translateX(5px); }

/* Nút gửi form (Liên hệ + mọi form CF7): là nút CHÍNH ⇒ đỏ brand kit (1.7a). Đo 02/11: đang 12px/400
   (The7 thắng) — trắng trên đỏ chỉ đạt khi chữ ≥ 16px đậm (DM-051) ⇒ ép 16px/700. <input> không có
   ::after nên không có mũi tên; nền lan + đổi màu vẫn chạy. */
#the7-body input.wpcf7-submit,
#the7-body .tdc-lienhe__form input[type="submit"] {
	--lan: var(--tdc-red-dark);
	background-color: var(--tdc-red) !important;
	/* The7 xoá background-image của nút submit bằng luật đặc hiệu cao ⇒ ghi lại có !important. */
	background-image: linear-gradient(var(--lan), var(--lan)) !important;
	background-repeat: no-repeat !important; background-position: 0 0 !important;
	border: 0 !important; border-radius: 3px !important;
	color: #fff !important;
	font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important;
	letter-spacing: .01em; text-transform: none !important;
	min-height: 48px !important; padding: 12px 34px !important;
	cursor: pointer;
}
#the7-body input.wpcf7-submit:hover,
#the7-body .tdc-lienhe__form input[type="submit"]:hover {
	background-color: var(--tdc-red) !important;
	box-shadow: 0 8px 18px -10px rgba(187, 28, 33, .8);
}

/* Bộ lọc lĩnh vực (Dự án), lọc ảnh (Thư viện), phân trang: lan nền trời nhạt, chữ đậm lại. */
#the7-body .tdc-filter__item,
#the7-body .tdc-tv__nut-loc,
#the7-body .tdc-pagination a.page-numbers,
#the7-body .navigation.pagination a.page-numbers,
#the7-body .paginator a { --lan: var(--tdc-sky); text-decoration: none !important; }
#the7-body .tdc-filter__item:not(.is-active):hover,
#the7-body .tdc-tv__nut-loc:not(.dang-chon):hover {
	border-color: var(--tdc-blue-ink) !important; color: var(--tdc-blue-deep) !important;
}

/* Liên kết "Chi tiết →" ở thẻ tin trang chủ + mục chân trang: mũi tên trượt khi rê. */
#the7-body .tdc-news__more::after { display: inline-block; transition: transform .25s ease; margin-left: 0 !important; }
#the7-body .tdc-news__card:hover .tdc-news__more::after,
#the7-body .tdc-news__more:hover::after { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
	#the7-body .tdc-btn, #the7-body .tdc-section-head__link, #the7-body .tdc-cardlh__cta a,
	#the7-body input.wpcf7-submit, #the7-body .tdc-filter__item, #the7-body .tdc-pdf__xem,
	#the7-body .masthead #primary-menu > li > a .menu-text { transition: none; }
}

/* ---- 1.7a Màu nhấn đỏ — tiết chế: chỉ VẠCH và chi tiết nhỏ, không tô mảng ----
   Số liệu banner: vạch đỏ ngắn dưới mỗi con số (chữ số giữ trắng — đỏ trên ảnh tối không đủ tương phản). */
#the7-body .tdc-counters__value::after {
	content: ""; display: block; width: 26px; height: 3px; margin: 8px auto 6px;
	border-radius: 2px; background: var(--tdc-red);
}
/* Tiêu đề mục trong trang con: vạch trái xanh logo + đoạn đỏ cuối — cùng ngôn ngữ với gạch hai màu
   dưới tiêu đề dải trang chủ (home.css). */
#the7-body .tdc-page__body h2 {
	border-left: 0 !important;
	position: relative;
}
#the7-body .tdc-page__body h2::before {
	content: ""; position: absolute; left: 0; top: .1em; bottom: .1em; width: 4px; border-radius: 2px;
	background: linear-gradient(180deg, var(--tdc-blue) 0 66%, transparent 66% 72%, var(--tdc-red) 72% 100%);
}
/* Tiêu đề trang lưu trữ (Dự án, Văn bản…): gạch hai màu như trang chủ thay vì một vạch xanh. */
#the7-body .tdc-section-head h1::after {
	width: 72px; height: 4px; border-radius: 2px; margin-top: 16px;
	background: linear-gradient(90deg, var(--tdc-blue) 0 70%, transparent 70% 76%, var(--tdc-red) 76% 100%);
}

/* ---- 1.7b Tiêu đề to, rõ hơn một bậc ---- */
#the7-body.home .tdc-section-head h2,
#the7-body .tdc-home .tdc-section-head h2 {
	font-size: clamp(1.75rem, 3vw, 2.6rem);
}
#the7-body .tdc-section-head h1 {
	font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.2;
}
#the7-body .tdc-page__body h2 {
	font-size: clamp(1.28rem, 1.6vw, 1.45rem); line-height: 1.3;
}
#the7-body .tdc-page__body h3 { font-size: clamp(1.12rem, 1.3vw, 1.22rem); line-height: 1.35; }
#the7-body:not(.home) .page-title h1,
#the7-body:not(.home) .page-title .entry-title,
#the7-body:not(.home) .page-title .page-title-head h1 {
	font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
	/* Cỡ lớn hơn thì đuôi chữ (y, g, dấu nặng) bị cắt ở đáy hộp — đo 02/11 "Về công ty" 1440px. */
	line-height: 1.35 !important; padding-bottom: .1em !important; overflow: visible !important;
}
#the7-body:not(.home) .page-title h1 > span { overflow: visible !important; line-height: inherit !important; }

/* ---- 1.4c Nhịp và lề ----
   Đo 02/11 ở 390/360px: mọi trang con (#main .wf-wrap) lề 16px; lưới 7 thẻ lĩnh vực trang chủ 14px;
   bảng liên hệ tràn tới mép phải (còn 1px). Bản khách dựng: clamp(14px, 4,2vw, 32px). Ta lấy ≥ 20px. */
@media (max-width: 600px) {
	#the7-body:not(.home) #main > .wf-wrap { padding-left: 20px !important; padding-right: 20px !important; }
	#the7-body .tdc-fields__grid { padding-left: 20px !important; padding-right: 20px !important; }
	#the7-body .tdc-lienhe__tin,
	#the7-body .tdc-lienhe__tin table { max-width: 100%; }
	#the7-body .tdc-lienhe__tin table { width: 100% !important; table-layout: fixed; }
	#the7-body .tdc-lienhe__tin :is(td, th, a) { overflow-wrap: anywhere; }
	/* Khối trong trang con cách nhau thêm một nhịp: tiêu đề mục không dính đuôi khối trước. */
	#the7-body .tdc-page__body h2 { margin-top: 2.6rem !important; }
	#the7-body .tdc-page__body :is(table, figure, .wp-block-image, blockquote) { margin-bottom: 1.6rem; }
}

/* Chân trang: tiêu đề cột hai dòng ("NĂNG LỰC & PHÁP LÝ") đang giãn dòng theo The7 (~32px) ⇒ hở như
   hai mục rời. Dải kết trang: câu dẫn xuống dòng thì vạch đỏ canh theo dòng đầu. */
#the7-body .tdc-footer h3 { line-height: 1.35 !important; }
#the7-body .tdc-cta__cau { align-items: flex-start; line-height: 1.5; }
#the7-body .tdc-cta__cau::before { margin-top: .7em; }