/* ============================================================ THÀNH HƯNG — CSS global (mọi trang) Nút nổi (FAB) + tinh chỉnh Header/Footer Flatsome theo thiết kế. Màu hardcode (không phụ thuộc tokens của thanhhung-home.css vì file này nạp toàn site, kể cả trang không có thanhhung-home.css). ============================================================ */ /* ---------- NÚT NỔI (gọi + Zalo) ---------- */ .th-fab { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; gap: 12px; } .th-fab a { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(1,22,49,.16); color: #fff; } .th-fab a:focus { outline: none; } .th-fab svg { width: 24px; height: 24px; } .th-fab .call { background: #BF0603; animation: thpulse 2.2s infinite; } .th-fab .zalo { background: #004E89; } @keyframes thpulse { 0% { box-shadow: 0 0 0 0 rgba(191,6,3,.5); } 70% { box-shadow: 0 0 0 14px rgba(191,6,3,0); } 100% { box-shadow: 0 0 0 0 rgba(191,6,3,0); } } @media (prefers-reduced-motion: reduce) { .th-fab .call { animation: none; } } /* ---------- MŨI TÊN CUỘN XUỐNG (double chevron) — NGUỒN DUY NHẤT, đồng bộ mọi trang ---------- Định nghĩa 1 lần ở global để trang chủ + trang dịch vụ (và mọi trang sau này) luôn GIỐNG HỆT nhau về kích thước, màu, animation. Khoảng cách trên/dưới do padding section điều khiển (đã thu gọn về calc(--sec-pad*.35) ở 2 đầu transition). */ .th-scroll-cue { display: flex; flex-direction: column; align-items: center; margin: 54px 0 4px; } .th-cue-chev { display: flex; line-height: 0; margin-top: -22px; } .th-cue-chev:first-child { margin-top: 0; } .th-cue-chev svg { width: 36px; height: 36px; color: #BF0603; stroke-width: 2.25; filter: drop-shadow(0 2px 5px rgba(191,6,3,.2)); animation: th-cue-wave 1.5s ease-in-out infinite; } .th-cue-chev:nth-child(2) svg { animation-delay: .22s; } @keyframes th-cue-wave { 0% { opacity: .2; transform: translateY(-3px); } 50% { opacity: 1; transform: translateY(2px); } 100% { opacity: .2; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .th-cue-chev svg { animation: none; opacity: .85; } } /* ---------- NHÃN NHỎ MÀU ĐỎ TRÊN TIÊU ĐỀ (.th-eyebrow) — NGUỒN DUY NHẤT ---------- Trước đây nhãn này được khai báo Ở HAI NƠI: thanhhung-home.css (chữ thường, gần như không giãn) và service.css (IN HOA, giãn 0.12em) → cùng một dòng chữ nhìn khác nhau giữa trang chủ và trang dịch vụ. Nay gom về đây (nạp toàn site) theo kiểu IN HOA + giãn chữ, hai file kia đã xoá bản trùng. Màu dùng var có giá trị dự phòng vì global.css còn chạy ở trang không nạp tokens. */ .th-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--th-red, #BF0603); display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; } .th-center .th-eyebrow { justify-content: center; } /* ---------- TRANG CHỦ: ép font thương hiệu (Flatsome inline h1-h6/body = Lato, thắng kế thừa) ---------- */ body.th-home, body.th-home h1, body.th-home h2, body.th-home h3, body.th-home h4, body.th-home h5, body.th-home h6, body.th-home .heading-font, body.th-home p, body.th-home a, body.th-home span, body.th-home li, body.th-home div, body.th-home input, body.th-home select, body.th-home textarea, body.th-home button, body.th-home .button, body.th-home .th-pill { font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; } /* ---------- BÀI VIẾT (single post): ép font thương hiệu cho toàn vùng nội dung (banner + section .thsp bài dịch vụ + bài blog Tin tức). Trước đây chỉ th-home / th-svc được ép → single post rơi về Lato mặc định của Flatsome, nhìn lệch. ---------- */ body.single-post #content, body.single-post #content h1, body.single-post #content h2, body.single-post #content h3, body.single-post #content h4, body.single-post #content h5, body.single-post #content h6, body.single-post #content p, body.single-post #content a, body.single-post #content span, body.single-post #content li, body.single-post #content div, body.single-post #content td, body.single-post #content th, body.single-post #content input, body.single-post #content button, body.single-post #content .th-pill { font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; } /* ---------- TRANG CHỦ: fix khối Tin tức — ảnh thumbnail tràn đè lên chữ ---------- .ph dùng height:100% phụ thuộc chiều cao parent → runtime không resolve được, ảnh giữ kích thước gốc tràn ra; .news-thumb position:relative nên vẽ đè body. Ép chiều cao px trực tiếp lên ảnh + cắt tràn. */ body.th-home .news-thumb { overflow: hidden; } body.th-home .news-card:not(.feature) .news-thumb, body.th-home .news-card:not(.feature) .news-thumb .ph { height: 130px !important; } /* Card "feature" cao gấp đôi (grid-row span 2): card bị grid kéo giãn nhưng flex con KHÔNG nở theo (quirk nested-flex trong stretched grid item) → dôi ô trống dưới. Fix: card feature dùng GRID hàng [1fr auto] → hàng ảnh (1fr) nuốt trọn chiều cao dôi; ảnh absolute inset:0 phủ kín hàng ảnh dù cao bao nhiêu. */ body.th-home .news-card.feature { display: grid; grid-template-rows: 1fr auto; } body.th-home .news-card.feature .news-thumb { position: relative; min-height: 240px; height: auto !important; } body.th-home .news-card.feature .news-thumb .ph { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; } @media (max-width: 860px) { body.th-home .news-card.feature { display: flex; } body.th-home .news-card.feature .news-thumb { min-height: 0; height: 200px !important; } body.th-home .news-card.feature .news-thumb .ph { position: static; height: 200px !important; } } /* ---------- TRANG CHỦ: nhúng bản đồ Google Maps TP.HCM vào khối .cov-map ---------- iframe phủ kín khối (absolute inset:0). Tint đổi thành scrim CHỈ ở đỉnh + đáy (gradient mỏng) để chữ tiêu đề/office-card đọc rõ mà KHÔNG che bản đồ; tint pointer-events:none nên người dùng vẫn kéo/zoom map được. Khối .cov-map cũ đã đổi thành cột .th-cov2-map của UX Builder (để sửa được trong builder), nên nhắm cả hai tên — trang nào chưa đổi vẫn chạy y nguyên. */ body.th-home .cov-map .cov-map-embed, body.th-home .th-cov2-map .cov-map-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } body.th-home .cov-map .cov-map-tint, body.th-home .th-cov2-map .cov-map-tint { background: linear-gradient(180deg, rgba(1,22,49,.78) 0%, rgba(1,22,49,.30) 18%, rgba(1,22,49,0) 34%, rgba(1,22,49,0) 100%); } /* ---------- LƯỚI DỰ ÁN (masonry) — ép ảnh phủ kín ô ---------- Ô "tall" cao 416px (span 2 hàng) trong khi ảnh ngang 1000x750 chỉ tự cao 280px → dôi ra mảng xám dưới đáy ô. Nguyên nhân: theme có luật img{height:auto} nạp SAU nên đè mất height:100% ở đây; phải ghi !important mới ăn. Lưới đã cố định grid-auto-rows:200px nên chiều cao ô là số thật → ảnh đặt absolute inset:0 phủ kín đúng khung dù ô cao bao nhiêu, phần thừa bị cắt đều 2 phía (object-position mặc định là giữa). Caption (cũng absolute, đứng sau trong DOM) vẫn vẽ đè lên ảnh. Áp cho MỌI trang chứ không riêng trang chủ: các trang dịch vụ cũng dùng .masonry và dính đúng lỗi này. */ .masonry-item { position: relative; } .masonry-item .ph { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: center; } /* ---------- TRANG CHỦ: thẻ "Báo chí đưa tin" — masthead branded thay ảnh chụp lỗi ---------- 3 card báo (Dân Trí/VnExpress/Tuổi Trẻ) trước đây dùng ảnh screenshot báo khác (Thanh Hóa, HAPLU…) → sai logo, méo ảnh. Thay bằng header tinted: icon tờ báo + tên báo lớn, sạch & nhất quán, không phụ thuộc ảnh chụp. */ body.th-home .article-card .press-head { height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(135deg, #f7f9fc 0%, #eef2f8 100%); border-bottom: 1px solid rgba(1,22,49,.06); border-top-left-radius: 16px; border-top-right-radius: 16px; } body.th-home .article-card .press-head-ico { width: 46px; height: 46px; border-radius: 12px; flex: none; background: #BF0603; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(191,6,3,.28); } body.th-home .article-card .press-head-ico i, body.th-home .article-card .press-head-ico svg { width: 22px; height: 22px; } body.th-home .article-card .press-head-name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #011631; } /* ---------- HEADER (navy theo thiết kế) — áp dụng cho TẤT CẢ các trang ---------- */ #masthead, #masthead .nav a, #masthead .header-nav a, #masthead .nav > li > a { font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } #masthead, #masthead .header-main, .header-bg-color { background-color: #011631 !important; } #masthead.stuck .header-main, #header.stuck #masthead { box-shadow: 0 2px 14px rgba(1,22,49,.35); } #masthead .header-nav a, #masthead .nav > li > a, #masthead .header-nav-main a { color: #DCE0EC !important; font-weight: 500; } #masthead .header-nav a:hover, #masthead .nav > li > a:hover { color: #fff !important; } /* ---------- MENU XỔ XUỐNG (dropdown "Tin tức") ---------- Hai dòng ngay trên đặt màu chữ #DCE0EC (xám xanh rất nhạt) cho toàn bộ link trong .header-nav, vì thanh menu có nền navy #011631 nên chữ nhạt mới đọc được. Nhưng bảng xổ xuống .nav-dropdown lại nằm trên NỀN TRẮNG, mà nó cũng là con của .header-nav nên dính luôn màu nhạt đó -> chữ trắng-nhạt trên nền trắng, gần như tàng hình (độ tương phản chỉ ~1.2 lần, mức tối thiểu đọc được là 4.5 lần). Riêng dòng hover còn tệ hơn: đổi sang trắng hoàn toàn, rê chuột là chữ biến mất. Trả về màu navy đậm cho lúc bình thường và đỏ thương hiệu khi rê chuột. */ #masthead .nav-dropdown a, #masthead .nav-dropdown li > a { color: #011631 !important; font-weight: 500; } #masthead .nav-dropdown a:hover, #masthead .nav-dropdown li > a:hover, #masthead .nav-dropdown li.current-menu-item > a { color: #BF0603 !important; } /* Logo trong chip trắng bo góc cho nổi trên nền navy */ #logo img { background: #fff; border-radius: 8px; padding: 6px 10px; } /* Đẩy nút gọi về sát phải header + canh đều menu bên trái */ #masthead .header-nav-main.nav-left { align-items: center; } #masthead .th-header-call { margin-left: auto; } /* Nút điện thoại đỏ trên header (gắn class 'th-header-call' cho menu item nút) */ #masthead .th-header-call > a, #masthead a.th-header-call { background: #BF0603 !important; color: #fff !important; border-radius: 999px !important; padding: 0 20px !important; height: 42px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; box-shadow: 0 6px 16px rgba(191,6,3,.30); } #masthead .th-header-call > a:hover, #masthead a.th-header-call:hover { background: #A30503 !important; } /* ---------- FOOTER (navy 4 cột) ---------- */ /* Navy phủ cả #footer LẪN hàng widget bên trong (.footer-1/.footer-2/.footer-widgets) — nếu không, Flatsome tô .footer-1 = trắng đè lên nền navy => chữ sáng bị chìm. */ #footer, .footer-wrapper, #footer .footer-widgets, #footer .footer-1, #footer .footer-2, #footer .row, #footer .col { background-color: #011631 !important; } #footer, #footer p, #footer li, #footer a { color: #C9CDD2; } #footer a:hover { color: #fff; } #footer .widget-title, #footer h1, #footer h2, #footer h3, #footer h4 { color: #fff; } /* Thanh bản quyền dưới cùng — navy đậm hơn cho tách lớp */ #footer .absolute-footer { background-color: #010d1f !important; } .absolute-footer, html #footer .absolute-footer a { color: #8E94A0; } /* Lưới 4 cột footer (1 widget Custom HTML chứa .th-footer-grid) */ #footer, #footer .th-footer-grid { font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } #footer .th-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding: 8px 0; } #footer .th-foot-logo img { background: #fff; border-radius: 8px; padding: 6px 10px; height: 42px; width: auto; display: inline-block; } #footer .th-foot-desc { font-size: 14px; line-height: 1.65; margin: 16px 0 0; max-width: 280px; color: #C9CDD2; } #footer .th-foot-h { color: #fff; font-size: 16px; font-weight: 700; margin: 0 0 16px; } #footer ul.th-foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } #footer .th-foot-links a { color: #C9CDD2; font-size: 14px; } #footer .th-foot-links a:hover { color: #fff; } #footer .th-foot-call { display: inline-flex; align-items: center; gap: 8px; background: #BF0603; color: #fff !important; height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 700; } #footer .th-foot-call:hover { background: #A30503; color: #fff !important; } #footer .th-foot-call svg { width: 18px; height: 18px; } #footer .th-foot-info { margin-top: 14px; display: grid; gap: 9px; font-size: 14px; color: #C9CDD2; } #footer .th-foot-info span { display: flex; gap: 8px; align-items: center; } #footer .th-foot-info svg { width: 16px; height: 16px; color: #E4BC6C; flex: 0 0 auto; } @media (max-width: 849px) { #footer .th-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 549px) { #footer .th-footer-grid { grid-template-columns: 1fr; gap: 24px; } } /* ============================================================ FIX RESPONSIVE COMPONENT DÙNG CHUNG (site-wide, không scope) Bảng giá .pm-table + máy tính giá .calc-* xuất hiện ở CẢ trang chủ và trang dịch vụ → fix ở global để mọi trang nhất quán trên mobile. Màu hardcode (không phụ thuộc tokens của home/service CSS). ============================================================ */ @media (max-width: 900px) { /* Máy tính giá: chống tràn/cắt chữ khi thu hẹp */ .calc-card > * { min-width: 0; } .calc-result, .calc-result * { min-width: 0; max-width: 100%; } .calc-result { overflow-wrap: break-word; } .calc-addon { min-width: 0; } .calc-addon > * { min-width: 0; } .calc-addon > :last-child { flex: none; white-space: nowrap; } /* Bảng giá cuộn ngang gọn ở tablet */ .pm-table { min-width: 560px; } .pm-table th:first-child, .pm-table td:first-child { white-space: nowrap; } /* Hộp phí + FAQ: cho phép xuống dòng */ .fee-box span { white-space: normal !important; } .fee-box *, .svc-faq-qt, .svc-faq-a p { overflow-wrap: break-word; min-width: 0; } } @media (max-width: 600px) { /* Bảng giá → thẻ xếp chồng (stacked cards) trên điện thoại */ .pm-table { min-width: 0; width: 100%; } .pm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pm-table, .pm-table tbody, .pm-table tr, .pm-table td { display: block; width: 100%; } .pm-table tr { border: 1px solid #E5E8EC; border-radius: 12px; background: #fff; padding: 4px 16px 8px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(1,22,49,.06); } .pm-table tr:last-child { margin-bottom: 0; } .pm-table td { padding: 9px 0; text-align: right; border-bottom: 1px solid #E5E8EC; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .pm-table td:last-child { border-bottom: none; } .pm-table td::before { content: attr(data-label); color: #6B7280; font-weight: 600; font-size: 13px; text-align: left; flex: none; } .pm-table td.veh { display: block; text-align: left; white-space: normal; font-size: 15.5px; font-weight: 800; color: #011631; padding: 12px 0 10px; margin-bottom: 4px; border-bottom: 2px solid rgba(191,6,3,.10); } .pm-table td.veh::before { content: none; } } /* ---------- HERO SLIDER (dùng chung: trang chủ + mọi trang dịch vụ) ---------- Biến ảnh hero đơn thành slideshow tự chạy + chấm điều hướng. Container đặt chiều cao inline theo từng trang (430/440/420px); các slide xếp chồng absolute, chuyển bằng fade. Chỉ 1 ảnh thì JS bỏ qua (vẫn hiển thị). */ .th-hero-slider { position: relative; width: 100%; overflow: hidden; border-radius: calc(16px * var(--th-radius-scale, 1)); background: var(--neutral-50, #eef1f6); } /* height/width !important để thắng luật img{height:auto} của Flatsome — nếu không ảnh co về tỷ lệ gốc (407px) trong khung 430px, hở nền xám ở đáy. */ .th-hero-slider .th-hero-slide { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; opacity: 0; transition: opacity .9s ease; } .th-hero-slider .th-hero-slide.is-active { opacity: 1; } .th-hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; align-items: center; gap: 6px; z-index: 3; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); } /* Ép cứng (!important) để thắng kiểu button mặc định của Flatsome (padding/min-height). */ .th-hero-slider .th-hero-dots button { -webkit-appearance: none; appearance: none; display: block; width: 7px !important; height: 7px !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; line-height: 0 !important; font-size: 0 !important; letter-spacing: 0 !important; box-shadow: none !important; text-shadow: none !important; border-radius: 999px !important; background: rgba(255,255,255,.7); cursor: pointer; transition: width .3s ease, background .3s ease; } .th-hero-slider .th-hero-dots button:hover { background: rgba(255,255,255,.95); } .th-hero-slider .th-hero-dots button.is-active { width: 20px !important; background: #fff; } @media (prefers-reduced-motion: reduce) { .th-hero-slider .th-hero-slide { transition: none; } } /* ============================================================ MENU MOBILE (off-canvas #main-menu) — THIẾT KẾ THEO THƯƠNG HIỆU ------------------------------------------------------------ Trước đây menu này để nguyên mặc định Flatsome: chữ IN HOA nhỏ, không icon, không nhận biết trang đang xem, kèm 2 dòng thừa ("-" của account và NEWSLETTER — đã gỡ bằng filter trong functions.php). Toàn bộ luật dưới đây bọc trong #main-menu nên KHÔNG ảnh hưởng menu desktop. Icon vẽ bằng mask + currentColor => tự đổi màu theo trạng thái (navy lúc thường, đỏ khi đang ở trang đó), không cần 2 bộ ảnh. ============================================================ */ /* --- Khung panel & lớp nền mờ --- PHẢI đổi biến --drawer-width chứ KHÔNG đổi thẳng width: Flatsome dùng transform: translateX(calc(var(--drawer-width)*-1)) để giấu bảng menu ngoài mép trái. Nếu width=312px mà biến vẫn 300px thì lúc đóng còn thò ra 12px. Thêm "body " ở đầu để thắng đoạn CSS inline mà Flatsome in trong (cùng độ ưu tiên nhưng nạp sau file này). */ body .off-canvas-left .mfp-content, body .off-canvas-right .mfp-content { --drawer-width: min(312px, 87vw); } .mfp-bg.main-menu-overlay { background: #011631; opacity: .58; } #main-menu.mobile-sidebar { background: #fff; } #main-menu .sidebar-menu { padding: 0; font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* --- Đầu bảng: logo + tổng đài trên nền navy --- */ #main-menu .th-mm-head { background: #011631; padding: 20px 18px 18px; } #main-menu .th-mm-logo { display: inline-block; } #main-menu .th-mm-logo img { display: block; height: 46px; width: auto; background: #fff; border-radius: 8px; padding: 6px 10px; } #main-menu .th-mm-name { color: #fff; font-size: 17px; font-weight: 800; } #main-menu .th-mm-hot { display: flex; align-items: center; gap: 10px; margin-top: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px 12px; color: #fff !important; } #main-menu .th-mm-hot svg { width: 20px; height: 20px; flex: none; color: #FF5A57; } #main-menu .th-mm-hot span { display: flex; flex-direction: column; line-height: 1.25; } #main-menu .th-mm-hot em { font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.62); } #main-menu .th-mm-hot strong { font-size: 17px; font-weight: 800; letter-spacing: .02em; } /* --- Ô tìm kiếm --- */ #main-menu .header-search-form { padding: 14px 16px 6px; border: 0; } #main-menu .searchform .flex-row { border: 1px solid #E2E8F0; border-radius: 10px; overflow: hidden; background: #fff; } #main-menu .searchform input[type="search"] { border: 0 !important; box-shadow: none !important; background: transparent !important; height: 44px; margin: 0; font-size: 14px; color: #011631; } #main-menu .searchform button, #main-menu .searchform .ux-search-submit { margin: 0 !important; height: 44px; border-radius: 0 !important; background: #BF0603 !important; border-color: #BF0603 !important; box-shadow: none !important; } /* --- Danh sách menu chính --- */ #main-menu .nav-sidebar.nav-vertical > li { border-bottom: 1px solid #EEF1F6; margin: 0; } #main-menu .nav-sidebar.nav-vertical > li:last-child { border-bottom: 0; } #main-menu .nav-sidebar.nav-vertical > li > a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 52px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; /* Flatsome đặt nav-uppercase — chữ Việt có dấu IN HOA nhìn nặng */ color: #011631 !important; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } /* Icon: mặc định chấm tròn, từng mục ghi đè bằng --th-ic (class th-mi-*) */ #main-menu .nav-sidebar.nav-vertical > li > a::before { content: ''; flex: none; width: 21px; height: 21px; background: currentColor; opacity: .92; -webkit-mask: var(--th-ic) center / 21px 21px no-repeat; mask: var(--th-ic) center / 21px 21px no-repeat; --th-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); } #main-menu .nav-sidebar.nav-vertical > li.th-mi-nha > a::before { --th-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10 12 3l9 7'/%3E%3Cpath d='M5 10.5V20h14v-9.5'/%3E%3Cpath d='M9.5 20v-5.5h5V20'/%3E%3C/svg%3E"); } #main-menu .nav-sidebar.nav-vertical > li.th-mi-vp > a::before { --th-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v17'/%3E%3Cpath d='M15 9h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M8 7h3M8 11h3M8 15h3'/%3E%3Cpath d='M2 21h20'/%3E%3C/svg%3E"); } #main-menu .nav-sidebar.nav-vertical > li.th-mi-kho > a::before { --th-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V9l9-5.5L21 9v12'/%3E%3Cpath d='M7 21v-7h10v7'/%3E%3Cpath d='M7 17h10'/%3E%3C/svg%3E"); } #main-menu .nav-sidebar.nav-vertical > li.th-mi-lt > a::before { --th-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5h11.5v10H2z'/%3E%3Cpath d='M13.5 10h3.8l3.7 3v3.5h-7.5'/%3E%3Ccircle cx='6.5' cy='18.5' r='1.9'/%3E%3Ccircle cx='17.5' cy='18.5' r='1.9'/%3E%3C/svg%3E"); } #main-menu .nav-sidebar.nav-vertical > li.th-mi-gt > a::before { --th-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.5v5'/%3E%3Cpath d='M12 7.8h.01'/%3E%3C/svg%3E"); } #main-menu .nav-sidebar.nav-vertical > li.th-mi-tin > a::before { --th-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5h13v14h-13z'/%3E%3Cpath d='M16.5 9.5h4v8a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6.5 9h7M6.5 12.5h7M6.5 16h4'/%3E%3C/svg%3E"); } #main-menu .nav-sidebar.nav-vertical > li.th-mi-kv > a::before { --th-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6 7-11.5a7 7 0 1 0-14 0c0 5.5 7 11.5 7 11.5z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); } #main-menu .nav-sidebar.nav-vertical > li.th-mi-meo > a::before { --th-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18.5h5'/%3E%3Cpath d='M10.5 21.5h3'/%3E%3Cpath d='M12 2.5a6.2 6.2 0 0 0-3.6 11.2v2.3h7.2v-2.3A6.2 6.2 0 0 0 12 2.5z'/%3E%3C/svg%3E"); } #main-menu .nav-sidebar.nav-vertical > li.th-mi-lh > a::before { --th-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3h3l1.8 4.5-2.3 1.4a12.5 12.5 0 0 0 6.1 6.1l1.4-2.3L20 14.5v3a2 2 0 0 1-2.2 2A16.8 16.8 0 0 1 3.5 5.2 2 2 0 0 1 5.5 3z'/%3E%3C/svg%3E"); } /* Trang đang xem: nền hồng nhạt + vạch đỏ bên trái */ #main-menu .nav-sidebar.nav-vertical > li.current-menu-item > a, #main-menu .nav-sidebar.nav-vertical > li.current_page_item > a, #main-menu .nav-sidebar.nav-vertical > li.current-menu-parent > a, #main-menu .nav-sidebar.nav-vertical > li.current-menu-ancestor > a { color: #BF0603 !important; background: #FFF4F3; box-shadow: inset 3px 0 0 #BF0603; } #main-menu .nav-sidebar.nav-vertical > li > a:hover, #main-menu .nav-sidebar.nav-vertical > li > a:active { color: #BF0603 !important; background: #F7F9FC; } /* Nút mở/đóng menu con */ #main-menu .nav-sidebar.nav-vertical > li > .toggle { color: #98A2B3; width: 44px; height: 44px; margin: 0 4px 0 0; opacity: 1; } #main-menu .nav-sidebar.nav-vertical > li > .toggle i { font-size: 18px; } /* Menu con: thụt vào, chữ nhẹ hơn, thay icon bằng chấm nhỏ */ #main-menu .nav-sidebar.nav-vertical ul.children, #main-menu .nav-sidebar.nav-vertical ul.sub-menu { background: #F7F9FC; border-top: 1px solid #EEF1F6; } #main-menu .nav-sidebar.nav-vertical ul.children > li > a, #main-menu .nav-sidebar.nav-vertical ul.sub-menu > li > a { padding: 11px 16px 11px 49px; min-height: 0; font-size: 14px; font-weight: 500; text-transform: none; color: #4A5568 !important; position: relative; } #main-menu .nav-sidebar.nav-vertical ul.children > li > a::before, #main-menu .nav-sidebar.nav-vertical ul.sub-menu > li > a::before { content: ''; position: absolute; left: 27px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #CBD5E0; -webkit-mask: none; mask: none; opacity: 1; } #main-menu .nav-sidebar.nav-vertical ul.children > li.current-menu-item > a, #main-menu .nav-sidebar.nav-vertical ul.sub-menu > li.current-menu-item > a { color: #BF0603 !important; font-weight: 600; } #main-menu .nav-sidebar.nav-vertical ul.children > li.current-menu-item > a::before, #main-menu .nav-sidebar.nav-vertical ul.sub-menu > li.current-menu-item > a::before { background: #BF0603; } /* --- Cuối bảng: 2 nút liên hệ + dòng ghi chú --- */ #main-menu .th-mm-foot { padding: 18px 16px 26px; background: #F7F9FC; border-top: 1px solid #EEF1F6; } #main-menu .th-mm-btn { display: flex; align-items: center; justify-content: center; gap: 9px; height: 48px; border-radius: 999px; color: #fff !important; font-size: 15px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 8px 20px rgba(1,22,49,.14); } #main-menu .th-mm-btn svg { width: 19px; height: 19px; flex: none; } #main-menu .th-mm-btn.call { background: #BF0603; } #main-menu .th-mm-btn.zalo { background: #004E89; margin-top: 10px; box-shadow: none; } #main-menu .th-mm-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.65; color: #6B7280; text-align: center; } /* ================================================================ KHỐI "CÂU HỎI THƯỜNG GẶP" — ELEMENT [th_faq] Phần vỏ chung cho cả trang chủ lẫn trang dịch vụ: chỉ là lưới dọc. Hình dáng từng câu do thanhhung-home.css (.faq-item) hoặc service.css (.svc-faq-item) lo — hai tệp đó không bao giờ nạp cùng nhau. ================================================================ */ .th-faq-list { display: grid; gap: 12px; }