/* ============================================================================
VÒNG 5 — góp ý khách 30/10/2026 (số mục theo /data/kho/tuvangiaothong/2026-10-30/GOP-Y-THEO-STT-KHACH.md)
Nạp ở MỌI trang, sau brand.css. Màu CHỈ từ brand kit (DM-051): thang xanh 199° + đỏ #EA232A.
Tham khảo cách trình bày bản khách tự dựng (tvgtweb.web.app), không chép mã.
============================================================================ */
/* ---- 1.1 Banner: không ngắt dòng giữa một cụm "Chất lượng –" / "Uy tín –" / "Thương hiệu" ---- */
.tdc-hero__cum { white-space: nowrap; }
/* ---- 1.3 Menu máy tính: mũi tên ▾ cho mục có menu con + xổ xuống mượt ---- */
#the7-body .masthead .main-nav > li.has-children > a .menu-text,
#the7-body #phantom .main-nav > li.has-children > a .menu-text {
display: inline-flex; align-items: center; gap: 6px;
padding-right: 0 !important; /* The7 chừa 10px cho mũi tên absolute của nó — nay mũi tên nằm trong dòng */
}
#the7-body .masthead .main-nav > li.has-children > a .menu-text::after,
#the7-body #phantom .main-nav > li.has-children > a .menu-text::after {
/* The7 đã có sẵn mũi tên dạng MẶT NẠ (the7-chevron-down.svg) cho ::after nhưng không tô màu nền
⇒ vô hình; lại đặt `position:absolute`. Chỉ cần kéo về dòng chảy và tô bằng màu chữ. */
content: ""; position: static !important; flex: 0 0 auto;
width: 9px !important; height: 9px !important; margin: 1px 0 0 !important;
-webkit-mask-size: 9px; mask-size: 9px; -webkit-mask-position: center; mask-position: center;
background-color: currentColor !important; border: 0 !important;
transition: transform .2s ease; opacity: .8;
}
#the7-body .masthead .main-nav > li.has-children.dt-hovered > a .menu-text::after,
#the7-body .masthead .main-nav > li.has-children:hover > a .menu-text::after,
#the7-body .masthead .main-nav > li.has-children:focus-within > a .menu-text::after {
transform: rotate(180deg);
}
/* Menu con: vạch xanh logo trên đỉnh, bo góc, trượt xuống + mờ vào (The7 chỉ bật/tắt visibility). */
#the7-body .masthead .main-nav > li > .sub-nav,
#the7-body #phantom .main-nav > li > .sub-nav {
border: 0; border-top: 3px solid var(--tdc-blue);
border-radius: 0 0 8px 8px;
box-shadow: 0 14px 32px rgba(1, 47, 69, .16);
padding: 8px 0;
transform: translateY(10px);
transition: opacity .2s ease, transform .22s cubic-bezier(.2, .7, .2, 1), visibility .2s;
}
#the7-body .masthead .main-nav > li.dt-hovered > .sub-nav,
#the7-body .masthead .main-nav > li:hover > .sub-nav,
#the7-body #phantom .main-nav > li.dt-hovered > .sub-nav,
#the7-body #phantom .main-nav > li:hover > .sub-nav { transform: none; }
#the7-body .masthead .main-nav .sub-nav > li > a { padding-top: 9px; padding-bottom: 9px; transition: background .15s, padding-left .15s; }
#the7-body .masthead .main-nav .sub-nav > li > a:hover { background: var(--tdc-sky); padding-left: 26px; }
@media (prefers-reduced-motion: reduce) {
#the7-body .masthead .main-nav > li > .sub-nav { transform: none; transition: none; }
}
/* ---- 1.5d/e/f Nút: nền lan, mũi tên trượt, đổi màu khi rê chuột ---- */
.tdc-nut {
position: relative; isolation: isolate; overflow: hidden;
display: inline-flex; align-items: center; gap: 10px;
min-height: 48px; padding: 0 26px; border-radius: 4px;
font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none !important;
border: 2px solid transparent;
transition: color .25s ease, border-color .25s ease;
}
.tdc-nut::before { /* lớp nền lan từ trái sang */
content: ""; position: absolute; inset: 0; z-index: -1;
transform: scaleX(0); transform-origin: left center;
transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.tdc-nut:hover::before, .tdc-nut:focus-visible::before { transform: scaleX(1); }
.tdc-nut__mui { display: inline-block; transition: transform .25s ease; }
.tdc-nut:hover .tdc-nut__mui, .tdc-nut:focus-visible .tdc-nut__mui { transform: translateX(5px); }
/* Đỏ brand kit, chữ 16px/700: trắng/đỏ 4,40 chỉ đạt cho chữ lớn-đậm (DM-051). Rê chuột: lan đỏ đậm. */
.tdc-nut--do { background: var(--tdc-red); color: #fff !important; }
.tdc-nut--do::before { background: var(--tdc-red-dark); }
.tdc-nut--vien { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .7); }
.tdc-nut--vien::before { background: #fff; }
.tdc-nut--vien:hover, .tdc-nut--vien:focus-visible { color: var(--tdc-blue-deep) !important; border-color: #fff; }
@media (prefers-reduced-motion: reduce) {
.tdc-nut::before, .tdc-nut__mui { transition: none; }
}
/* Khối bọc dải kết trang + chân trang chiếm ô `footer` của lưới The7 (brand.css [1] đặt cho .tdc-footer). */
.tdc-ket-trang { grid-area: footer !important; min-width: 0; }
.tdc-ket-trang > .tdc-footer { grid-area: auto !important; }
/* ---- 1.8a/b Dải kết trang: màu đậm cùng sắc logo + khẩu hiệu + nút Liên hệ ---- */
.tdc-cta {
position: relative; overflow: hidden; isolation: isolate;
background: linear-gradient(120deg, var(--tdc-blue-ink) 0%, var(--tdc-blue-deep) 100%);
color: #fff;
padding: clamp(44px, 7vw, 76px) 20px;
}
.tdc-cta::after { /* vạch xanh logo chạy chéo — chi tiết nhỏ, không phải mảng phẳng */
content: ""; position: absolute; z-index: -1; inset: -40% auto -40% 58%; width: 38%;
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 46px);
transform: skewX(-18deg);
}
.tdc-cta__inner {
max-width: var(--tdc-wrap); margin: 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap;
}
.tdc-cta__cau {
margin: 0 0 10px; color: #fff !important; opacity: .92;
font-size: 15px; font-weight: 600; letter-spacing: .02em;
display: flex; align-items: center; gap: 12px;
}
.tdc-cta__cau::before { content: ""; width: 36px; height: 3px; background: var(--tdc-red); flex: 0 0 auto; }
.tdc-cta__khau-hieu {
margin: 0; color: #fff !important;
font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -.005em;
}
.tdc-cta__khau-hieu span { white-space: nowrap; }
.tdc-cta__nut { display: flex; gap: 14px; flex-wrap: wrap; }
.tdc-cta__nam { /* năm thành lập, nét viền mờ ở góc phải — như bản khách dựng */
position: absolute; z-index: -1; right: 3vw; bottom: -.18em;
font-size: clamp(7rem, 16vw, 15rem); font-weight: 800; line-height: 1;
color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .14);
pointer-events: none; user-select: none;
}
@media (max-width: 782px) {
.tdc-cta__inner { flex-direction: column; align-items: flex-start; }
.tdc-cta__nam { display: none; }
}
/* ---- 1.8c/d/e/g Chân trang 5 cột, logo ngang tên, chứng nhận ---- */
.tdc-footer--v5 .tdc-footer__inner { grid-template-columns: 1.7fr 1fr 1.15fr 1fr 1fr; gap: 32px; }
.tdc-footer__dau {
display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
text-decoration: none !important;
}
.tdc-footer--v5 .tdc-footer__logo { height: 64px; margin: 0; flex: 0 0 auto; }
.tdc-footer--v5 .tdc-footer__ten {
color: #fff !important; font-size: 16px; line-height: 1.35; font-weight: 700; max-width: 22em;
}
.tdc-footer__cn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px !important; }
.tdc-footer__cn-nhan {
width: 100%; font-size: 12px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--tdc-sky) !important;
}
.tdc-footer .tdc-footer__huy-hieu {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
font-size: 13px; font-weight: 600; color: #fff;
transition: background .2s, border-color .2s;
}
.tdc-footer .tdc-footer__huy-hieu::before { content: "✓"; color: var(--tdc-yellow); font-weight: 800; }
.tdc-footer .tdc-footer__huy-hieu:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.tdc-footer--v5 .tdc-footer__col ul a { display: inline-block; transition: transform .2s ease, color .2s; }
.tdc-footer--v5 .tdc-footer__col ul a:hover { transform: translateX(4px); }
.tdc-footer--v5 .tdc-footer__copy { justify-content: center; text-align: center; }
@media (max-width: 1099px) {
.tdc-footer--v5 .tdc-footer__inner { grid-template-columns: 1fr 1fr 1fr; }
.tdc-footer--v5 .tdc-footer__col--cty { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.tdc-footer--v5 .tdc-footer__inner { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding-left: 20px; padding-right: 20px; }
.tdc-footer--v5 .tdc-footer__logo { height: 54px; }
.tdc-footer--v5 .tdc-footer__ten { font-size: 15px; }
}
/* ---- 1.2b/c + 1.4a Tên công ty cạnh logo, hoạt cảnh khi rê chuột; header điện thoại thấp lại ---- */
.tdc-logo-co-ten { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; }
/* The7 ép `.branding a { display:block }` ⇒ tên rớt xuống dưới logo. Ghim theo vị trí, đủ đặc hiệu. */
#the7-body .masthead .branding a.tdc-logo-co-ten,
#the7-body .masthead .mobile-branding a.tdc-logo-co-ten { display: inline-flex; flex-direction: row; }
.tdc-logo-ten {
display: flex; flex-direction: column; gap: 2px;
font-size: 15px; line-height: 1.2; letter-spacing: .01em; white-space: nowrap;
color: var(--tdc-blue-deep);
transition: color .25s ease;
}
.tdc-logo-ten b { font-weight: 800; }
.tdc-logo-ten em { font-style: normal; color: var(--tdc-red); }
/* Rê chuột: CẢ KHỐI logo + tên nhấc lên 3px và đổ bóng mờ (Henry 02/11, theo bản tvgtweb.web.app) —
không phóng riêng ảnh. drop-shadow theo đúng đường viền logo + chữ, không thành hộp chữ nhật. */
.tdc-logo-co-ten { transition: transform .35s cubic-bezier(.2, .7, .2, 1), filter .35s cubic-bezier(.2, .7, .2, 1); }
.tdc-logo-co-ten:hover, .tdc-logo-co-ten:focus-visible {
transform: translateY(-3px);
filter: drop-shadow(0 8px 10px rgba(6, 26, 51, .24));
}
/* Máy tính hẹp: menu 8 mục cần chỗ — chỉ hiện tên khi đủ rộng. */
@media (min-width: 1100px) and (max-width: 1299px) { /* đo 02/11: 1200px chồng lên "GIỚI THIỆU"; 1300px còn hở ~50px */
#the7-body .masthead:not(.mobile-header) .branding .tdc-logo-ten { display: none; }
}
/* Điện thoại (The7 đổi header ở 1100px): 80px → 64px, logo 68 → 50px, tên 2 dòng cạnh logo. */
@media (max-width: 1099px) {
:root { --tdc-mobile-header-h: 64px; --tdc-mobile-logo-h: 50px; }
/* The7 còn giữ min-height 80px cho cả .masthead và JS ghi `style="height:80px"` vào ô đệm bên dưới
⇒ dải trắng 16px giữa header và banner. Ghim cả hai theo biến. */
#the7-body .masthead.masthead-mobile-header { min-height: var(--tdc-mobile-header-h) !important; height: auto; }
#the7-body .mobile-header-space { height: var(--tdc-mobile-header-h) !important; }
.tdc-logo-co-ten { gap: 10px; }
.tdc-logo-ten { font-size: 13px; }
/* Khi neo, The7 ẩn thẻ logo chính và hiện một thẻ logo neo KHÁC (không qua hàm logo, nên
không có tên) ⇒ đo 02/11: hai logo đứng cạnh nhau, mất tên. Giữ thẻ chính + tên, ẩn thẻ neo. */
#the7-body .masthead.sticky-mobile-on .mobile-branding a.tdc-logo-co-ten { display: inline-flex !important; }
#the7-body .masthead.sticky-mobile-on .mobile-branding a.tdc-logo-co-ten .tdc-logo-ten { display: flex !important; }
#the7-body .masthead.sticky-mobile-on .mobile-branding .tdc-logo-ten b,
#the7-body .masthead.sticky-mobile-on .mobile-branding .tdc-logo-ten em { display: inline !important; }
#the7-body .masthead.sticky-mobile-on .mobile-branding .tdc-logo-ten b { display: block !important; }
#the7-body .masthead.sticky-mobile-on .mobile-branding a[class*="sticky-mobile-logo"] { display: none !important; }
#the7-body .masthead.sticky-mobile-on .mobile-branding { width: auto !important; max-width: none !important; }
.tdc-logo-ten { flex-shrink: 0; }
}
@media (max-width: 359px) {
.tdc-logo-ten { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
.tdc-logo-co-ten { transition: none; }
.tdc-logo-co-ten:hover { transform: none; }
}
/* ---- 1.2a/e/f Header máy tính: MỘT header neo, không đổi cỡ, chỉ đổi bóng khi cuộn ----
Trước: The7 hiện header thứ hai `#phantom` khi cuộn (logo ::before cỡ khác, không tên) ⇒ "logo nhảy".
Nay tắt #phantom (inc/header-dien-thoai.php) và cho chính .masthead neo. Nền trắng 97% + làm mờ phía
sau; lúc nằm yên chỉ một vạch 1px, cuộn xuống thì thêm bóng mờ tôn nền (lớp tdc-da-cuon, dien-thoai.js). */
@media (min-width: 1100px) {
#the7-body .masthead:not(.masthead-mobile-header) {
position: sticky; top: 0; z-index: 100;
background: rgba(255, 255, 255, .97) !important;
-webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
box-shadow: 0 1px 0 #e6e9ec !important; /* The7 `shadow-decoration` ghi đè bóng bằng !important */
transition: box-shadow .3s ease;
}
.tdc-da-cuon #the7-body .masthead:not(.masthead-mobile-header) {
box-shadow: 0 1px 0 #e6e9ec, 0 8px 24px -12px rgba(6, 26, 51, .28) !important;
}
.admin-bar #the7-body .masthead:not(.masthead-mobile-header) { top: 32px; }
/* The7 đặt `overflow:hidden` cho #page và `overflow:hidden auto` cho ⇒ hai khung cuộn giả, sticky
chết im lặng (đo 02/11: header trôi mất khi cuộn). `clip` vẫn cắt tràn ngang như cũ nhưng KHÔNG
tạo khung cuộn, nên sticky bám theo cửa sổ. */
html body#the7-body { overflow: visible !important; overflow-x: clip !important; }
#the7-body #page { overflow: clip !important; }
#the7-body .masthead .header-bar { background: transparent !important; }
}
/* Điện thoại: The7 tự neo (sticky-mobile-on); thêm cùng kiểu nền mờ + bóng khi đã cuộn. */
@media (max-width: 1099px) {
#the7-body .masthead.sticky-mobile-on {
background: rgba(255, 255, 255, .97) !important;
-webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
box-shadow: 0 1px 0 #e6e9ec, 0 8px 24px -12px rgba(6, 26, 51, .28) !important;
}
#the7-body .masthead.sticky-mobile-on .mobile-header-bar { background: transparent !important; }
}
/* ---- Chiều cao header máy tính 96 → 80px (Henry 02/11: "giống tedi và tvgtweb.web.app") ----
Đo: tedi.vn header ~70–80px, logo ~56px; tvgtweb.web.app `--p1-cao-dau` 80px (≥1200px), 68px (768–1199).
Logo 72 → 56px. Mục menu cấp 1 cao bằng cả header ⇒ menu con thả xuống sát đáy header (như tedi),
không lơ lửng giữa chừng. */
@media (min-width: 1100px) {
#the7-body .masthead.classic-header .header-bar { min-height: 80px !important; height: 80px !important; }
#the7-body .masthead.classic-header .branding { min-height: 80px !important; }
#the7-body .masthead .branding .logo img,
#the7-body .masthead .branding img.preload-me,
#the7-body .masthead .branding a.tdc-logo-co-ten img { max-height: 56px !important; }
#the7-body .masthead .navigation,
#the7-body .masthead #primary-menu { height: 80px; align-items: stretch; }
#the7-body .masthead #primary-menu > li { display: flex; align-items: center; }
#the7-body .masthead #primary-menu > li > .sub-nav { top: 100% !important; margin-top: 0 !important; }
}