/* =========================================================================== * HEADER + PANEL MENU ĐIỆN THOẠI — vòng giao diện mới (26/10/2026) * * Henry: "màu menu & chữ in hoa giống tedi về hình thức, màu theo brand kit mới; icon menu làm * giống tedi, có ô tìm nữa". Brand kit: /data/kho/tuvangiaothong/brand/color/brand-kit.pdf — * chỉ 4 màu (xanh TDC, đỏ chữ G, trời, xám nền), phân cấp bằng ĐỘ ĐẬM của MỘT thang xanh. * * tedi.vn (đo 26/10, 390px) ta * nền panel trắng trắng * mục cấp 1 IN HOA 17px/600, xanh-đen IN HOA 16px/600, xanh 800 #02405E * mục đang đứng xanh sáng xanh-chữ #0374A8 (5,16 — đạt AA) * mục con 15px/600 thường 15px/500 thường, xanh 700 #02567D * nút ✕ ô vuông xanh, chữ X trắng ô vuông xanh TDC #0495D8 * nút ☰ / 🔍 nét trần, không ô nền nét trần, xanh 800 * chân panel email · điện thoại · ngôn ngữ như vậy * * 🔴 Không dùng #0495D8 (xanh logo) làm màu CHỮ ở đây: brand kit ghi rõ "chữ nhỏ màu xanh logo * trên trắng 3,34 → dùng --tdc-blue-ink". Xanh logo chỉ làm MẢNG: nút ✕, vạch đánh dấu. * * ⚠️ The7 ghi thẳng mã màu vào `the7-css/custom.css` (sinh ra lúc lưu Theme Options) nên phải * đè bằng LUẬT, và nhiều luật của nó có `!important` (vạch ☰ là `background:#fff!important`). * Mọi selector ở đây bắt đầu bằng `#the7-body` để thắng độ đặc hiệu, file nạp sau brand.css. * ========================================================================= */ :root { --tdc-xanh-800: #02405E; /* bậc 800 của thang xanh trong brand kit — mục menu cấp 1 */ --tdc-ke: #E3E6EA; /* đường kẻ — cùng màu viền của brand kit */ --tdc-panel-w: min(320px, 84vw); } /* ---- Thanh trên cùng (email | điện thoại): BỎ ở khổ có header điện thoại ---- Khách gạch đi trên ảnh chụp 26/10. Hai thông tin đó chuyển xuống chân panel menu, như tedi. 1100px = mốc chuyển sang header điện thoại của The7 (first switch). */ @media (max-width: 1099px) { .tdc-topbar { display: none; } } /* ---- Bản GỐC của hai khối mới nằm trong header máy tính: không bao giờ hiện ---- The7 chỉ cần nó để chép sang header/panel điện thoại (inc/menu-dien-thoai.php). */ #the7-body .masthead .header-bar .tdc-mw { display: none !important; } /* …trừ nút tìm: từ 26/10 máy tính cũng có kính lúp cuối menu như tedi — xem may-tinh.css. */ @media (min-width: 1100px) { #the7-body .masthead .header-bar .tdc-tim { display: flex !important; } } /* ===== Header điện thoại: 🔍 + ☰ nét trần ===== */ #the7-body .mobile-header-bar { position: relative; } #the7-body .mobile-header-bar .mobile-mini-widgets { align-items: center; } /* ☰ — bỏ ô nền xanh The7 đang vẽ, vạch màu xanh 800 như nét của tedi. */ #the7-body .dt-mobile-menu-icon:not(.floating-btn):before, #the7-body .dt-mobile-menu-icon:not(.floating-btn):after { background: none !important; border: 0 !important; box-shadow: none !important; } #the7-body .dt-mobile-menu-icon:not(.floating-btn) { padding: 8px 0 8px 10px; } #the7-body .dt-mobile-menu-icon .menu-line, #the7-body .dt-mobile-menu-icon .menu-line:before, #the7-body .dt-mobile-menu-icon .menu-line:after, #the7-body .dt-mobile-menu-icon:not(.floating-btn):hover .menu-line, #the7-body .dt-mobile-menu-icon:not(.floating-btn):not(:hover) .menu-line { background: var(--tdc-xanh-800) !important; } /* 🔍 */ #the7-body .tdc-tim { display: flex; align-items: center; } /* The7 chép phần tử 2 lần (một cho mỗi khổ) nhưng ở khổ 390 nó KHÔNG ẩn bản thừa — đo 26/10 ra hai kính lúp cạnh nhau. Chỉ giữ bản đầu. */ #the7-body .mobile-mini-widgets .tdc-tim ~ .tdc-tim { display: none !important; } #the7-body .tdc-tim__nut { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0 2px 0 0; background: none; border: 0; border-radius: 0; cursor: pointer; color: var(--tdc-xanh-800); -webkit-tap-highlight-color: transparent; } #the7-body .tdc-tim__dong { display: none; } #the7-body .tdc-tim.is-mo .tdc-tim__kinh { display: none; } #the7-body .tdc-tim.is-mo .tdc-tim__dong { display: block; } /* Ô tìm: thả xuống ngay dưới header, tràn bề ngang. `left/right: 0` là ĐỦ — mốc của absolute là khung đệm (padding box) của .mobile-header-bar; bản đầu bù thêm -20px thành tràn 40px ra ngoài. */ #the7-body .tdc-tim__form { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin: 0; padding: 12px 20px; gap: 8px; background: #fff; border-top: 1px solid var(--tdc-ke); box-shadow: 0 10px 18px rgba(2, 64, 94, .12); } #the7-body .tdc-tim.is-mo .tdc-tim__form { display: flex; } #the7-body .tdc-tim__o { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0 14px; font: 400 16px/44px var(--tdc-font); /* 16px: dưới mức này iOS tự phóng to trang khi gõ */ color: var(--tdc-text); background: #F7F7F7; border: 1px solid var(--tdc-ke); border-radius: 4px; } /* Vòng focus vàng–navy chung của brand.css (`:focus-visible`) dành cho người dùng bàn phím; ô gõ chữ thì luôn được tính là focus-visible ⇒ chạm vào là hiện vòng đó. Thay bằng viền xanh. */ #the7-body .tdc-tim__o:focus, #the7-body .tdc-tim__o:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--tdc-blue-soft); border-color: var(--tdc-blue); background: #fff; } #the7-body .tdc-tim__gui { flex: 0 0 auto; height: 44px; margin: 0; padding: 0 18px; font: 600 15px/44px var(--tdc-font); text-transform: uppercase; color: #fff; background: var(--tdc-blue-ink); /* chữ trắng cỡ nhỏ ⇒ xanh 600, không dùng xanh logo */ border: 0; border-radius: 4px; cursor: pointer; } /* ===== Panel menu ===== */ #the7-body .dt-mobile-header { background-color: #fff; width: var(--tdc-panel-w); } #the7-body .dt-mobile-header .mobile-header-scrollbar-wrap { width: 100%; padding: 56px 24px 28px 28px; } #the7-body .mobile-sticky-header-overlay, #the7-body .mobile-sticky-sidebar-overlay { background-color: rgba(0, 0, 0, .55); } /* Nút ✕: ô vuông xanh TDC ở mép phải panel, như tedi. */ #the7-body .dt-close-mobile-menu-icon { margin: 0; padding: 7px; } #the7-body .dt-close-mobile-menu-icon:before, #the7-body .dt-close-mobile-menu-icon:after { background-color: var(--tdc-blue) !important; border-radius: 0; } #the7-body .dt-close-mobile-menu-icon span:before, #the7-body .dt-close-mobile-menu-icon span:after { background: #fff !important; } #the7-body.ouside-menu-close-icon .show-mobile-header .dt-close-mobile-menu-icon, #the7-body .show-mobile-header .dt-close-mobile-menu-icon { left: calc(var(--tdc-panel-w) - 44px); } /* Mục cấp 1: IN HOA, đậm, kẻ mảnh giữa các mục. The7 tô màu thẳng vào span.menu-text nên phải nhắm cả span (xem ghi chú "Chi tiết suýt làm hỏng bản vá" trong brand.css). */ #the7-body .mobile-main-nav > li > a, #the7-body .mobile-main-nav > li > a .menu-text { font: 600 17px/22px var(--tdc-font); /* tedi 17px/600 — Henry 26/10: "font to và đậm như tedi" */ text-transform: uppercase; letter-spacing: .01em; color: var(--tdc-xanh-800); } #the7-body .mobile-menu-show-divider .mobile-main-nav > li > a { padding: 16px 32px 16px 0; } #the7-body .mobile-menu-show-divider .mobile-main-nav > li:before { border-bottom-color: var(--tdc-ke); } #the7-body .mobile-menu-show-divider.dt-mobile-header .next-level-button { padding: 17px 0; } /* Mục con: chữ thường nhưng ĐẬM 600 và cùng màu xanh 800 như mục chính — đo tedi 26/10 ở 440px: 15px/600 màu gần đen. Bản đầu để 500 + xanh 700 nên nhìn mảnh và nhạt (Henry chụp lại so sánh). Thụt 14px ≈ tedi (bản đầu 16px cộng lề của The7 thành ~27px, lệch hẳn sang phải). */ #the7-body .dt-mobile-header .mobile-main-nav li .sub-nav > li > a, #the7-body .dt-mobile-header .mobile-main-nav li .sub-nav > li > a .menu-text { font: 600 15px/22px var(--tdc-font); text-transform: none; color: var(--tdc-xanh-800); } #the7-body .dt-mobile-header .mobile-main-nav .sub-nav { padding: 0 0 12px 14px; margin-left: 0; } #the7-body .dt-mobile-header .mobile-main-nav .sub-nav > li > a { padding: 7px 0; } /* Đang đứng + hover: xanh-chữ (5,16 trên trắng). Đè luật `color: blue-soft !important` của panel navy cũ trong brand.css — luật đó viết cho nền tối, trên nền trắng nó gần như biến mất. */ #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 .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, #the7-body .dt-mobile-header .mobile-main-nav .sub-nav > li.act > a .menu-text, #the7-body .mobile-main-nav li:not(.act) > a:hover, #the7-body .mobile-main-nav li:not(.act) > a:hover .menu-text, #the7-body .dt-mobile-header .mobile-main-nav .sub-nav > li:not(.act) > a:hover .menu-text { color: var(--tdc-blue-ink) !important; } /* Dấu + / − bung nhánh: xám nhạt như tedi — thấy được nhưng không tranh với 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 .sub-nav .next-level-button { color: #9AA3A9 !important; fill: #9AA3A9 !important; } /* Nút ngôn ngữ trong