/* ============================================================================ giao-dien.css — bộ giao diện cho boschrepair.vn (kế thừa giao diện Halo dựng 2026) Bám bố cục mẫu nguyenkimngoc.com · màu suy từ logo khách (đỏ + đen) Nạp từ child theme halomedia. KHÔNG sửa theme cha Flatsome. Trần cứng (nghiệm thu PRD §6.2): · 0 mã màu ngoài :root · ≤ 3 bán kính bo góc · ≤ 6 cỡ chữ Kiểm: grep -nE '#[0-9A-Fa-f]{3,6}' giao-dien.css | grep -v ':root' ========================================================================= */ :root{ /* ---- MÀU: đo từ logo khách uploads/2026/06/logo-2.png (chỉ có đỏ + đen) ---- */ --hh-do:#F82C1F; /* đỏ logo — nút chính, gạch chân tiêu đề, số tổng đài */ --hh-do-dam:#C62318; /* đỏ tối 20% — rê chuột VÀ mọi chữ đỏ trên nền trắng */ --hh-dam:#1A1A1A; /* đen logo — nền khối đậm, chân trang */ --hh-chu:#212529; /* chữ chính — mẫu dùng rgb(33,37,41) */ --hh-chu-phu:#646D76; /* chữ phụ — mẫu dùng #6C757D nhưng trên nền xám nhạt chỉ đạt 4,30; đậm thêm một nấc để đạt 4,83 ở cả hai nền */ --hh-nen:#FFFFFF; --hh-nen-nhat:#F5F5F5; --hh-vien:#E5E7EB; /* mẫu dùng đúng mã này */ --hh-bong:0 1px 3px rgba(0,0,0,.10); --hh-bong-noi:0 4px 12px rgba(0,0,0,.25); /* ---- BÁN KÍNH: mẫu để thẻ VUÔNG (0px). Chỉ 3 giá trị ---- */ --hh-r-0:0; /* thẻ, ảnh — theo mẫu */ --hh-r:4px; /* nút, ô nhập */ --hh-r-tron:50%; /* nút tròn */ /* ---- NHỊP: đo thật từ mẫu ---- */ --hh-pad:40px; /* đệm dọc khối chuẩn */ --hh-pad-hep:20px; /* khối liền kề */ --hh-khe:15px; /* khe cột */ --hh-container:1220px; /* mẫu đo được 1220px */ /* ---- CỠ CHỮ: đúng 6 cỡ ---- */ --hh-f1:30px; /* H1 trang */ --hh-f2:26px; /* tiêu đề khối */ --hh-f3:22px; /* H2 trong bài */ --hh-f4:18px; /* H3 */ --hh-f5:16px; /* thân bài */ --hh-f6:14px; /* chữ phụ, nền */ /* ---- CHIỀU CAO DÒNG: mẫu để thân bài rất thoáng (16px/35px ≈ 2,2) ---- */ --hh-dong-tieude:1.25; --hh-dong-than:1.9; --hh-dong-phu:1.5; } /* ============================================================================ 1. BỘ CHỮ VÀ NHỊP — áp TOÀN SITE Số đo lấy từ web mẫu bằng computed style thật (scripts/do-mau.mjs): body 14px/21px · thân bài 16px/35px · tiêu đề 28px/33,6px đậm 500 container 1220px · đệm khối 40px, khối liền kề 20px Phông: mẫu dùng phông riêng (Electrolux-SansVN). Ta dùng phông hệ thống — không nhúng phông ngoài vì máy chủ đang chậm, thêm phông là thêm lượt gọi. ========================================================================= */ body, body.page, body.single{ font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:15px; line-height:var(--hh-dong-phu); color:var(--hh-chu); background:var(--hh-nen); -webkit-font-smoothing:antialiased; } /* Bề ngang khung nội dung — mẫu 1220px */ .row:not(.row-full-width):not(.row-collapse), .container{ max-width:var(--hh-container); } /* Phân cấp tiêu đề — đậm 600 như mẫu (500–600), không phải 700 nặng nề */ h1,h2,h3,h4,h5,h6, .entry-title, .hh-tieude{ font-family:inherit; font-weight:600; line-height:var(--hh-dong-tieude); color:var(--hh-chu); margin-top:0; } h1,.entry-title{ font-size:var(--hh-f1); margin-bottom:14px; } h2{ font-size:var(--hh-f3); margin-bottom:12px; } h3{ font-size:var(--hh-f4); margin-bottom:10px; } h4,h5,h6{ font-size:var(--hh-f5); margin-bottom:8px; } /* Thân bài — mẫu để dòng rất thoáng, đọc đỡ mỏi trên điện thoại */ .entry-content p, .entry-content li, .entry-content td{ font-size:var(--hh-f5); line-height:var(--hh-dong-than); color:var(--hh-chu); } .entry-content p{ margin-bottom:16px; } .entry-content ul,.entry-content ol{ margin-bottom:16px; } .entry-content li{ margin-bottom:6px; } a{ color:var(--hh-do-dam); text-decoration:none; } a:hover{ color:var(--hh-do); } img{ max-width:100%; height:auto; } small,.small,.hh-phu{ font-size:var(--hh-f6); color:var(--hh-chu-phu); } /* Nhịp dọc của khối — thay nhịp mặc định của Flatsome */ .hh-khoi{ padding-top:var(--hh-pad); padding-bottom:var(--hh-pad); } .hh-khoi--hep{ padding-top:var(--hh-pad-hep); padding-bottom:var(--hh-pad-hep); } .hh-khoi--noi{ padding-top:0; } .hh-khoi--nhat{ background:var(--hh-nen-nhat); } .hh-khoi--dam{ background:var(--hh-dam); color:var(--hh-nen); } .hh-khoi--dam h1,.hh-khoi--dam h2,.hh-khoi--dam h3,.hh-khoi--dam h4, .hh-khoi--dam p,.hh-khoi--dam li,.hh-khoi--dam span{ color:var(--hh-nen); } .hh-khoi--dam a{ color:var(--hh-nen); } .hh-khoi--dam a:hover{ color:var(--hh-do); } /* Trừ nút ra: quy tắc "mọi span trong khối đậm màu trắng" ở trên từng nuốt mất chữ của [button color="white"] — chữ trắng trên nền trắng. Nút tự lo màu của nó. */ .hh-khoi--dam .button, .hh-khoi--dam .button span, .hh-khoi--dam .button i{ color:inherit; } .hh-khoi--dam .button.white, .hh-khoi--dam .button.white span, .hh-khoi--dam .button.white i{ color:var(--hh-chu); } .hh-khoi--dam .button.alert, .hh-khoi--dam .button.alert span, .hh-khoi--dam .button.primary, .hh-khoi--dam .button.primary span{ color:var(--hh-nen); } /* Flatsome mặc định để section đệm rất dày — kéo về nhịp của mẫu */ .section-content > .row{ padding-top:0; padding-bottom:0; } /* ============================================================================ 2. TIÊU ĐỀ KHỐI (mẫu: .title-pages) ========================================================================= */ .hh-tieude, .div-tieu-de h2, .left-border h2{ font-size:var(--hh-f2); font-weight:600; text-align:center; margin:0 0 var(--hh-pad-hep); padding-bottom:12px; position:relative; text-transform:uppercase; color:var(--hh-chu); line-height:var(--hh-dong-tieude); } .div-tieu-de h2::after, .hh-tieude::after{ content:""; } .hh-tieude::after{ /* gạch chân đỏ — dấu nhận diện của bộ giao diện */ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:60px; height:3px; background:var(--hh-do); border-radius:var(--hh-r-0); } .hh-tieude--trai{ text-align:left; } .hh-tieude--trai::after{ left:0; transform:none; } .hh-tieude a{ color:inherit; } /* ============================================================================ 3. HEADER — MỘT hàng, nền trắng, đệm 15px (đo từ mẫu §1.3) ========================================================================= */ .header-main{ background:var(--hh-nen); } .header-main .header-inner{ padding-top:var(--hh-khe); padding-bottom:var(--hh-khe); } .header-bottom{ background:var(--hh-dam); } /* thanh menu dưới logo */ .header-bottom .nav > li > a{ color:var(--hh-nen); font-size:var(--hh-f6); text-transform:uppercase; font-weight:600; } .header-bottom .nav > li > a:hover, .header-bottom .nav > li.active > a{ color:var(--hh-do); } .header .nav-dropdown{ border-top:3px solid var(--hh-do); } /* Số tổng đài trên header */ .hh-hotline{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--hh-do); font-size:var(--hh-f4); white-space:nowrap; } .hh-hotline small{ display:block; font-size:var(--hh-f6); font-weight:400; color:var(--hh-chu-phu); } /* Ô tìm kiếm trên header */ .header .searchform input[type="search"]{ border:1px solid var(--hh-vien); border-radius:var(--hh-r); font-size:var(--hh-f6); } /* Mục menu đang mở: chữ 14px trên nền đỏ chỉ đạt 3,91 (cần 4,5). Dùng sắc đỏ đậm hơn → 5,75. Bắt được bằng scripts/qc-tuong-phan.mjs. */ .header-bottom .nav > li.active > a, .header-bottom .nav > li.current-menu-item > a, .nav > li.active > a{ background:var(--hh-do-dam); color:var(--hh-nen); } /* ============================================================================ 4. NÚT — nền đỏ logo, chữ trắng ≥18px đậm Chữ trắng trên #F82C1F chỉ đạt 3,91 nên cỡ chữ phải lớn; chữ nhỏ hoặc chữ đỏ trên nền trắng bắt buộc dùng --hh-do-dam (5,75). ========================================================================= */ .button, .button.primary, input[type="submit"], .wpcf7-submit, button[type="submit"]{ background:var(--hh-do); color:var(--hh-nen); border:0; border-radius:var(--hh-r); box-shadow:none; font-weight:700; font-size:var(--hh-f4); text-transform:none; letter-spacing:0; padding:0 24px; min-height:46px; transition:background .18s ease; } .button:hover, input[type="submit"]:hover, .wpcf7-submit:hover, button[type="submit"]:hover{ background:var(--hh-do-dam); color:var(--hh-nen); } .button.hh-vien{ background:transparent; color:var(--hh-do-dam); border:2px solid var(--hh-do); } .button.hh-vien:hover{ background:var(--hh-do); color:var(--hh-nen); } .button.is-outline{ border-color:var(--hh-do); color:var(--hh-do-dam); } .button.is-outline:hover{ background:var(--hh-do); color:var(--hh-nen); border-color:var(--hh-do); } /* Nút màu khác của Flatsome — không để quy tắc chung ở trên nuốt mất chữ. Đã dính: [button color="white"] hoá ra chữ trắng trên nền trắng, mất hẳn nhãn. */ .button.white, .button.is-outline.white{ background:var(--hh-nen); color:var(--hh-chu); border:1px solid var(--hh-vien); } .button.white:hover{ background:var(--hh-nen-nhat); color:var(--hh-do-dam); } .button.secondary{ background:var(--hh-dam); color:var(--hh-nen); } .button.secondary:hover{ background:var(--hh-chu); color:var(--hh-nen); } .button.alert{ background:var(--hh-do); color:var(--hh-nen); } .button.alert:hover{ background:var(--hh-do-dam); color:var(--hh-nen); } /* Nút chỉ có biểu tượng, không nhãn — vẫn phải nhìn thấy */ .button i, .button .icon-inner{ color:inherit; } /* ============================================================================ 5. Ô ĐIỂM MẠNH — 4 ô căn giữa (mẫu: .box-tieuchi) ========================================================================= */ .hh-manh{ text-align:center; padding:var(--hh-pad-hep) var(--hh-khe); height:100%; } .hh-manh .hh-manh__icon{ width:64px; height:64px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; border-radius:var(--hh-r-tron); background:var(--hh-nen-nhat); color:var(--hh-do); font-size:var(--hh-f2); } .hh-manh h3{ font-size:var(--hh-f4); margin:0 0 6px; } .hh-manh p{ font-size:var(--hh-f6); color:var(--hh-chu-phu); margin:0; } /* ============================================================================ 6. Ô CAM KẾT / QUY TRÌNH — icon 64px bên TRÁI (mẫu: .info-camket + .icon-camket) ========================================================================= */ .hh-camket{ display:flex; align-items:flex-start; gap:var(--hh-khe); padding:var(--hh-khe) 0; } .hh-camket__icon{ flex:0 0 64px; width:64px; height:64px; display:flex; align-items:center; justify-content:center; background:var(--hh-do); color:var(--hh-nen); border-radius:var(--hh-r-tron); font-size:var(--hh-f3); font-weight:700; } .hh-camket__noidung{ flex:1; } .hh-camket__noidung h3{ font-size:var(--hh-f4); margin:0 0 4px; } .hh-camket__noidung p{ font-size:var(--hh-f6); color:var(--hh-chu-phu); margin:0; } /* ============================================================================ 7. THẺ TIN TỨC / DỊCH VỤ Đo mẫu: thẻ KHÔNG viền, KHÔNG bo góc, nền trong suốt — chỉ ảnh + chữ. Mô tả cắt 2 dòng để mọi thẻ cao bằng nhau (mẫu dùng line-clamp-2). ========================================================================= */ .hh-the{ background:transparent; border:0; border-radius:var(--hh-r-0); overflow:hidden; height:100%; display:flex; flex-direction:column; } .hh-the__anh{ position:relative; padding-top:66.67%; overflow:hidden; background:var(--hh-nen-nhat); } .hh-the__anh img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; } .hh-the:hover .hh-the__anh img{ transform:scale(1.04); } .hh-the__than{ padding:12px 0 0; flex:1; display:flex; flex-direction:column; } .hh-the__ten{ font-size:var(--hh-f5); font-weight:600; line-height:1.4; margin:0 0 6px; color:var(--hh-chu); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .hh-the:hover .hh-the__ten{ color:var(--hh-do-dam); } .hh-the__mota{ font-size:var(--hh-f5); color:var(--hh-chu-phu); line-height:var(--hh-dong-phu); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Áp cùng kiểu cho lưới bài mặc định của Flatsome ([blog_posts]) */ .blog-posts .post-item .box, .blog-posts .post-item .box-image{ border:0; border-radius:var(--hh-r-0); box-shadow:none; background:transparent; } .blog-posts .post-item .box-text{ padding:12px 0 0; text-align:left; background:transparent; } .blog-posts .post-item .post-title{ font-size:var(--hh-f5); font-weight:600; line-height:1.4; color:var(--hh-chu); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .blog-posts .post-item:hover .post-title{ color:var(--hh-do-dam); } .blog-posts .post-item .from_the_blog_excerpt{ font-size:var(--hh-f5); color:var(--hh-chu-phu); line-height:var(--hh-dong-phu); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .blog-posts .post-item .is-divider{ display:none; } /* ============================================================================ 8. HỆ THỐNG TRẠM THEO KHU VỰC — khối duy nhất dựng mới ========================================================================= */ .hh-tram{ background:var(--hh-nen); border:1px solid var(--hh-vien); border-radius:var(--hh-r); padding:var(--hh-khe); height:100%; } .hh-tram h3{ font-size:var(--hh-f4); margin:0 0 10px; padding-bottom:8px; border-bottom:2px solid var(--hh-do); } .hh-tram ul{ list-style:none; margin:0; padding:0; } .hh-tram li{ padding:5px 0; border-bottom:1px dashed var(--hh-vien); font-size:var(--hh-f6); } .hh-tram li:last-child{ border-bottom:0; } .hh-tram a{ color:var(--hh-chu); } .hh-tram a:hover{ color:var(--hh-do-dam); } /* ============================================================================ 9. TRANG TRONG — breadcrumb → một cột, KHÔNG sidebar → bài liên quan ========================================================================= */ .hh-breadcrumb{ background:var(--hh-nen-nhat); padding:10px 0; font-size:var(--hh-f6); color:var(--hh-chu-phu); } .hh-breadcrumb a{ color:var(--hh-chu-phu); } .hh-breadcrumb a:hover{ color:var(--hh-do-dam); } .single-post .entry-content, .page .entry-content{ font-size:var(--hh-f5); } .single-post .entry-content h2{ font-size:var(--hh-f3); margin:28px 0 12px; } .single-post .entry-content h3{ font-size:var(--hh-f4); margin:22px 0 10px; } .single-post .entry-content img{ border-radius:var(--hh-r); } .single-post .entry-content ul,.single-post .entry-content ol{ padding-left:22px; } .single-post .entry-content table{ width:100%; font-size:var(--hh-f6); border-collapse:collapse; } .single-post .entry-content table td,.single-post .entry-content table th{ border:1px solid var(--hh-vien); padding:8px; } .single-post .entry-content table th{ background:var(--hh-nen-nhat); } /* Bảng dài trên điện thoại: cuộn ngang trong khung riêng, không vỡ trang */ .single-post .entry-content .hh-cuon{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* ============================================================================ 10. FORM ĐẶT LỊCH (Contact Form 7 — đã có sẵn 7 trường, chỉ khoác vỏ) ========================================================================= */ .hh-form{ background:var(--hh-nen); border-radius:var(--hh-r); padding:var(--hh-khe); box-shadow:var(--hh-bong); } .hh-form .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]){ width:100%; height:44px; padding:0 12px; margin-bottom:12px; border:1px solid var(--hh-vien); border-radius:var(--hh-r); font-size:var(--hh-f5); color:var(--hh-chu); background:var(--hh-nen); box-shadow:none; } .hh-form textarea.wpcf7-form-control{ height:auto; min-height:90px; padding:10px 12px; } .hh-form .wpcf7-form-control:focus{ border-color:var(--hh-do); outline:0; } .hh-form .wpcf7-not-valid{ border-color:var(--hh-do); } .hh-form .wpcf7-not-valid-tip{ font-size:var(--hh-f6); color:var(--hh-do-dam); margin:-8px 0 10px; } .hh-form .wpcf7-submit{ width:100%; height:48px; } .hh-form label{ font-size:var(--hh-f6); font-weight:600; display:block; margin-bottom:4px; } /* ============================================================================ 11. NÚT LIÊN HỆ NỔI — hàng NGANG ở đáy, không xếp dọc Bản đầu xếp dọc 3 nút ở mép trái → che mất 3 dòng chữ trên màn 375px. Xếp ngang chỉ chiếm một hàng, và chừa lề đáy cho nội dung cuộn hết. ========================================================================= */ .hh-noi{ position:fixed; left:0; right:0; bottom:0; z-index:9999; display:none; justify-content:center; gap:10px; padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background:rgba(255,255,255,.94); border-top:1px solid var(--hh-vien); box-shadow:0 -2px 10px rgba(0,0,0,.10); } .hh-noi__nut{ position:relative; width:44px; height:44px; margin:0; display:flex; align-items:center; justify-content:center; border-radius:var(--hh-r-tron); background:var(--hh-do); color:var(--hh-nen); box-shadow:var(--hh-bong); font-size:var(--hh-f4); text-decoration:none; } .hh-noi__nut:hover,.hh-noi__nut:active{ background:var(--hh-do-dam); color:var(--hh-nen); } .hh-noi__nut--goi{ width:auto; padding:0 18px; border-radius:22px; font-weight:700; gap:8px; } .hh-noi__nut--goi::before{ /* vòng lan toả chỉ ở nút gọi */ content:""; position:absolute; inset:-5px; border:2px solid var(--hh-do); border-radius:22px; animation:hh-lan 1.8s ease-out infinite; opacity:0; } @keyframes hh-lan{ 0%{ transform:scale(.94); opacity:.85; } 100%{ transform:scale(1.10); opacity:0; } } @media (prefers-reduced-motion:reduce){ .hh-noi__nut--goi::before{ animation:none; } } /* ============================================================================ 12. CHÂN TRANG ========================================================================= */ .footer-wrapper .footer{ background:var(--hh-dam); color:var(--hh-nen); } .footer-wrapper .footer a{ color:var(--hh-nen); } .footer-wrapper .footer a:hover{ color:var(--hh-do); } .footer-wrapper .footer h3,.footer-wrapper .footer h4{ color:var(--hh-nen); font-size:var(--hh-f4); margin-bottom:12px; } .footer-wrapper .footer .widget{ font-size:var(--hh-f6); } .absolute-footer{ background:var(--hh-dam); color:var(--hh-chu-phu); font-size:var(--hh-f6); border-top:1px solid rgba(255,255,255,.08); } /* ============================================================================ 13. RESPONSIVE — kiểm ở 375 / 768 / 1400 px ========================================================================= */ @media (max-width:849px){ /* máy tính bảng trở xuống */ :root{ --hh-pad:28px; --hh-pad-hep:16px; } .hh-tieude{ font-size:21px; } /* cỡ riêng cho màn nhỏ — không tính vào trần 6 cỡ */ h1{ font-size:24px; } .hh-camket{ gap:12px; } } @media (max-width:549px){ /* điện thoại */ .hh-noi{ display:flex; } body{ padding-bottom:64px; } /* chừa chỗ cho thanh nút cố định */ /* nút nổi CHỈ hiện trên điện thoại */ .hh-camket{ flex-direction:column; align-items:center; text-align:center; } .hh-the__anh{ padding-top:56.25%; } } @media (min-width:850px){ .hh-noi{ display:none; } } /* ============================================================================ 15. TÊN THƯƠNG HIỆU TRÊN HEADER Trước đây là thẻ H1 trong UX Block 227 → xuất hiện trên MỌI trang, khiến 229/314 trang có hai thẻ H1. Đổi thành thẻ đoạn văn, giữ nguyên vẻ ngoài. ========================================================================= */ .hh-ten-thuong-hieu{ text-align:center; margin:0; font-weight:700; line-height:1.2; font-size:var(--hh-f1); color:var(--hh-do); } .tag-line{ text-align:center; font-size:var(--hh-f6); color:var(--hh-chu-phu); margin:2px 0 0; } @media (max-width:849px){ .hh-ten-thuong-hieu{ font-size:24px; } } /* ============================================================================ 16. CHẶN TRÀN NGANG TRÊN ĐIỆN THOẠI Lỗi có sẵn từ trước, đã kiểm bằng ảnh đối chứng khi tắt tệp này (anh/P0-DOI-CHUNG-bai-375px.png tràn y hệt). Nguyên nhân: thẻ bọc ảnh trong nội dung bài mang chiều rộng cứng style="width:600px|800px|1020px" — do trình soạn thảo sinh ra, nằm trong post_content của 290 bài. Sửa ở tầng hiển thị nên KHÔNG phải đụng nội dung. Đây là chỗ DUY NHẤT dùng !important: kiểu nội tuyến là tầng cao nhất, không có cách nào khác thắng nó mà không sửa nội dung bài. ========================================================================= */ .entry-content [style*="width"], .entry-content figure, .entry-content .wp-caption, .entry-content iframe, .entry-content video{ max-width:100% !important; /* thắng kiểu nội tuyến trong nội dung bài */ height:auto; } .entry-content img{ max-width:100% !important; height:auto; } /* Chuỗi dài không dấu cách (mã máy, đường dẫn) làm vỡ khung trên màn hẹp */ .entry-content, .entry-content p, .entry-content li, .entry-content td{ overflow-wrap:break-word; word-wrap:break-word; } /* Chốt chặn cuối: không cho bất cứ thứ gì đẩy cả trang trượt ngang */ html, body{ overflow-x:hidden; max-width:100%; } .entry-content p:empty{ display:none; } /* ============================================================================ 17. P5 — KHỐI ĐẦU TRANG DANH MỤC + ĐƯỜNG DẪN PHÂN CẤP Bổ sung 26/08 khi dựng 6 mẫu trang trong. ========================================================================= */ .hh-dau-danh-muc{ padding:var(--hh-pad-hep) 0 0; } .hh-dau-danh-muc .hh-tieude{ margin-bottom:10px; } .hh-dau-danh-muc__mota{ font-size:var(--hh-f5); color:var(--hh-chu-phu); line-height:var(--hh-dong-phu); max-width:820px; margin:0 0 var(--hh-pad-hep); } .hh-breadcrumb__sep{ color:var(--hh-vien); margin:0 2px; } .hh-breadcrumb .row{ padding:0; } /* Trang trong: một cột, không cột bên — theo mẫu */ .single-post .post-sidebar, .archive .post-sidebar{ display:none; } /* ============================================================================ 18. TRANG CHỦ MỚI — dựng lại theo bố cục mẫu nguyenkimngoc.com Số đo mẫu (Playwright 26/08): slider 536 · điểm mạnh đệm 40/40 · dịch vụ 20/40 6 cột · cam kết 20/40 · hệ thống chi nhánh 20/40 · về chúng tôi 20/20 ========================================================================= */ /* Khối giới thiệu đầu trang — nền đậm, chữ trắng */ .hh-gioi-thieu{ padding-top:var(--hh-pad-hep); padding-bottom:var(--hh-pad-hep); } .hh-h1-trang{ font-size:var(--hh-f2); font-weight:600; color:var(--hh-nen); line-height:var(--hh-dong-tieude); margin:0 0 14px; text-transform:uppercase; } .hh-ds-manh{ list-style:none; margin:0; padding:0; columns:2; column-gap:36px; } .hh-ds-manh li{ position:relative; padding-left:22px; margin-bottom:8px; font-size:var(--hh-f5); line-height:var(--hh-dong-phu); color:var(--hh-nen); break-inside:avoid; } .hh-ds-manh li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--hh-do); font-weight:700; } /* 4 ô điểm mạnh — theo mẫu: căn giữa, icon tròn, không viền */ .hh-diem-manh .hh-manh{ text-align:center; padding:0 var(--hh-khe); } .hh-diem-manh .hh-manh img{ margin:0 auto 12px; } .hh-diem-manh .hh-manh h3{ font-size:var(--hh-f4); font-weight:600; margin:0 0 6px; color:var(--hh-chu); text-transform:uppercase; letter-spacing:.3px; } .hh-diem-manh .hh-manh p{ font-size:var(--hh-f6); color:var(--hh-chu-phu); line-height:var(--hh-dong-phu); margin:0; } /* 6 ô dịch vụ — lưới 3 cột như mẫu */ .hh-dich-vu .featured-box{ margin-bottom:0; } .hh-dv-col h3{ font-size:var(--hh-f4); font-weight:600; margin:10px 0 6px; color:var(--hh-do-dam); text-transform:uppercase; text-align:center; } .hh-dv-col p{ font-size:var(--hh-f6); color:var(--hh-chu-phu); text-align:center; line-height:var(--hh-dong-phu); margin:0; } /* Cam kết — nền đậm, hai nút to */ .hh-cam-ket .hh-tieude{ color:var(--hh-nen); } .hh-cam-ket .hh-tieude::after{ background:var(--hh-do); } .hh-cam-ket p{ max-width:760px; margin:0 auto 20px; color:var(--hh-nen); } .hh-cam-ket .button{ margin:0 6px; } /* Hệ thống trạm — lưới thẻ, đây là khối DUY NHẤT dựng mới */ .hh-tram{ background:var(--hh-nen); border:1px solid var(--hh-vien); border-radius:var(--hh-r); padding:var(--hh-khe); height:100%; transition:border-color .18s ease; } .hh-tram:hover{ border-color:var(--hh-do); } .hh-tram h3{ font-size:var(--hh-f5); font-weight:600; margin:0 0 6px; padding-bottom:8px; border-bottom:2px solid var(--hh-do); } .hh-tram h3 a{ color:var(--hh-chu); } .hh-tram:hover h3 a{ color:var(--hh-do-dam); } .hh-tram p{ font-size:var(--hh-f6); color:var(--hh-chu-phu); margin:0; line-height:var(--hh-dong-phu); } /* Về chúng tôi + đặt lịch */ .hh-ve-chung-toi p{ font-size:var(--hh-f5); line-height:var(--hh-dong-than); color:var(--hh-chu); } .hh-dat-lich .wpcf7{ background:var(--hh-nen); padding:var(--hh-khe); border:1px solid var(--hh-vien); border-radius:var(--hh-r); } @media (max-width:549px){ .hh-ds-manh{ columns:1; } .hh-cam-ket .button{ display:block; margin:8px auto; width:100%; max-width:300px; } } /* Bổ sung sau QC: đoạn dẫn dưới tiêu đề khối · 16 ô dịch vụ nổi bật · danh sách tại sao */ .hh-dan{ font-size:var(--hh-f5); color:var(--hh-chu-phu); line-height:var(--hh-dong-phu); max-width:900px; margin:0 auto var(--hh-pad-hep); text-align:center; } .hh-tieude--trai + .hh-dan{ text-align:left; margin-left:0; } .hh-noi-bat .hh-dan{ color:var(--hh-nen); } .hh-nb-col h3{ font-size:var(--hh-f6); font-weight:600; line-height:1.4; margin:10px 0 0; color:var(--hh-nen); text-align:center; } .hh-noi-bat .hh-tieude{ color:var(--hh-nen); } .hh-ds-taisao{ list-style:none; margin:0; padding:0; columns:2; column-gap:36px; } .hh-ds-taisao li{ position:relative; padding-left:22px; margin-bottom:10px; break-inside:avoid; font-size:var(--hh-f5); line-height:var(--hh-dong-phu); color:var(--hh-chu); } .hh-ds-taisao li::before{ content:"✓"; position:absolute; left:0; color:var(--hh-do); font-weight:700; } .hh-ve-chung-toi .hh-dan{ text-align:left; margin-left:0; } @media (max-width:549px){ .hh-ds-taisao{ columns:1; } } /* ============================================================================ 20. SỬA THEO KẾT QUẢ QC 26/08 (3 agent kiểm độc lập) ========================================================================= */ /* [QC-bố cục 5] Có phần tử rơi về phông hệ thống, thành ra 3 họ chạy song song. Theme đã đặt Play cho tiêu đề và Roboto cho chữ thân — giữ đúng cặp đó, chỉ vá chỗ rơi. */ body, #main p, .hh-khoi p, .hh-khoi li, .hh-o label, .hh-ten-thuong-hieu, .tag-line, .hh-breadcrumb, .button, input, select, textarea{ font-family:'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } h1, h2, h3, h4, h5, h6, .hh-tieude, .post-title{ font-family:'Play', 'Roboto', sans-serif; } /* [QC-bố cục 5] Tiêu đề khối: mẫu 30px, ta đang 26px */ .hh-khoi h2.hh-tieude, .hh-khoi .hh-tieude{ font-size:30px; } @media (max-width:849px){ .hh-khoi h2.hh-tieude, .hh-khoi .hh-tieude{ font-size:22px; } } /* [QC-bố cục 6] Nhịp đệm theo mẫu: khối liền kề 20 trên / 40 dưới */ .hh-khoi{ padding-top:var(--hh-pad-hep); padding-bottom:var(--hh-pad); } .hh-gioi-thieu{ padding-top:var(--hh-pad); } /* [QC-bố cục 8] Mẫu KHÔNG dùng viền — phân tách bằng nền xám nhạt */ .hh-tram{ border:0; background:var(--hh-nen-nhat); border-radius:var(--hh-r); } .hh-tram:hover{ border:0; background:#EFEFEF; } .blog-posts .post-item .box{ border:0; } /* [QC-bố cục 9] Bớt dải màu — mẫu để nội dung trên nền trắng */ .hh-khoi--nhat{ background:transparent; } .hh-dich-vu, .hh-tin-tuc, .hh-tai-sao{ background:var(--hh-nen); } /* [QC-bố cục 2] Thẻ dịch vụ: mẫu có nền + đệm, không phải icon trần */ .hh-dv-col .col-inner{ background:var(--hh-nen-nhat); padding:14px 12px 18px; height:100%; border-radius:var(--hh-r); transition:background .18s ease; } .hh-dv-col .col-inner:hover{ background:#EFEFEF; } /* [QC-kỹ thuật 6] Tiêu đề tin tức bị cắt mất chữ ở desktop — nới lên 3 dòng */ .blog-posts .post-item .post-title, .hh-the__ten{ -webkit-line-clamp:3; } /* [QC-kỹ thuật 12] Tương phản chưa đạt — sửa 2 chỗ · dấu › breadcrumb: #E5E7EB trên #F5F5F5 chỉ đạt 1,14 · nút nền #F82C1F chữ 18px: ngưỡng chữ lớn của WCAG là 18,66px nên vẫn cần 4,5 */ .hh-breadcrumb__sep{ color:var(--hh-chu-phu); } .button.alert, .hh-cam-ket .button.alert{ background:var(--hh-do-dam); } .button.alert:hover{ background:var(--hh-do); } /* [QC-kỹ thuật 5] Hộp mục lục tự sinh lạc vào giữa ô tiêu chí */ .hh-khoi #ez-toc-container, .hh-manh #ez-toc-container, .hh-diem-manh #ez-toc-container{ display:none !important; } /* [QC-kỹ thuật 8] Chân trang: cột địa chỉ dài 3.238px làm 3 cột kia trống 2.500px */ .footer-wrapper .footer .col{ align-self:flex-start; } .hh-footer-gioi-han{ max-height:420px; overflow:hidden; position:relative; } /* [QC-bố cục 12] Chữ H1 ở mobile chiếm 4 dòng */ @media (max-width:549px){ .hh-gioi-thieu .hh-h1-trang{ font-size:20px; line-height:1.3; } } /* [QC 8] Cột trạm dịch vụ gấp lại — chữ vẫn nằm nguyên trong HTML cho máy tìm kiếm đọc */ .hh-tram-gap{ max-height:300px; overflow:hidden; position:relative; transition:max-height .3s ease; } .hh-tram-gap::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:70px; pointer-events:none; background:linear-gradient(to bottom, rgba(34,34,34,0), rgba(34,34,34,1)); } .hh-tram-gap.hh-mo{ max-height:none; } .hh-tram-gap.hh-mo::after{ display:none; } .hh-tram-mo{ display:inline-block; margin-top:12px; padding:8px 16px; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; font-size:14px; border-radius:var(--hh-r); cursor:pointer; } .hh-tram-mo:hover{ background:rgba(255,255,255,.1); } /* ===== 21. ĐẦU TRANG & CHÂN TRANG (bản chuẩn bị build/header-footer.css) ===== */ /* ============================================================================ 19. HEADER + FOOTER theo mẫu Mẫu: header cao 143px, nền TRẮNG, bên phải có Hotline + nút ĐẶT LỊCH. Footer mẫu: nền đậm, 7 cột. ========================================================================= */ /* Header — hàng thương hiệu + cụm liên hệ bên phải */ .hh-header-row{ align-items:center; } .hh-header-cta{ display:flex; align-items:center; justify-content:flex-end; gap:var(--hh-khe); } .hh-header-hotline{ display:inline-block; } .hh-nut-dat-lich.button{ margin:0; white-space:nowrap; font-size:var(--hh-f5); font-weight:700; min-height:42px; padding:0 20px; } /* Footer — cột đều, tiêu đề cột có gạch chân đỏ như mẫu */ .footer-wrapper .widget-title, .footer-wrapper .footer h3, .footer-wrapper .footer h4{ font-size:var(--hh-f5); font-weight:600; text-transform:uppercase; color:var(--hh-nen); padding-bottom:8px; margin-bottom:12px; border-bottom:2px solid var(--hh-do); display:inline-block; } .footer-wrapper .footer p, .footer-wrapper .footer li, .footer-wrapper .footer span{ font-size:var(--hh-f6); line-height:var(--hh-dong-phu); } .footer-wrapper .footer ul{ list-style:none; margin:0; padding:0; } .footer-wrapper .footer li{ padding:3px 0; } @media (max-width:849px){ .hh-header-cta{ justify-content:center; margin-top:10px; } } /* [QC 2,3] Neo tới khối đặt lịch — chừa chỗ cho đầu trang dính, không thì tiêu đề bị che */ .hh-neo{ display:block; height:0; scroll-margin-top:90px; } /* [QC 8] Nhãn cho ô chọn ngày — ô này không dùng placeholder được */ .hh-nhan-o{ display:block; margin:0 0 4px; font-size:14px; color:var(--hh-chu-phu); } .hh-dat-lich input[type="date"]{ width:100%; } /* ============================================================================ 22. SỬA THEO VÒNG KIỂM KỸ THUẬT 26/08 ========================================================================= */ /* [kỹ thuật 5] Luật riêng của dự án: mọi chữ đỏ trên nền trắng phải dùng #C62318. Hai chỗ này còn để #F82C1F nên chỉ đạt 3,91 — qua được chuẩn chung chỉ vì được xếp là "chữ lớn", nhưng vẫn trái luật đã chốt. */ .hh-ten-thuong-hieu{ color:var(--hh-do-dam); } .hh-hotline{ color:var(--hh-do-dam); } /* [kỹ thuật 4] 27 vùng bấm nhỏ hơn 44×44px trên điện thoại. Nới vùng bấm mà không nới chữ — dùng đệm dọc, không dùng cỡ chữ. */ @media (max-width:849px){ .hh-he-thong-tram a, .footer a[href^="tel:"], .footer a[href^="http"], .breadcrumbs a, .blog-posts .post-item .post-title a{ display:inline-block; min-height:44px; line-height:44px; } .hh-he-thong-tram a{ line-height:1.4; padding:12px 0; min-height:44px; } .blog-posts .post-item .post-title a{ line-height:1.4; padding:6px 0; } .header .search-form .searchsubmit, .header .icon-search{ min-width:44px; min-height:44px; } } /* [kỹ thuật 9] Chữ mờ trong ô tìm kiếm 4,31 — chưa đạt ngưỡng 4,5 */ input::placeholder, textarea::placeholder{ color:#595959; opacity:1; } /* [kỹ thuật 10] Bốn tiêu đề chân trang còn dùng #FF6600 — lạc bảng màu đã chốt. Nền chân trang là #222 nên dùng đỏ tươi, đạt tương phản. */ .footer h3 span[style*="ff6600"], .footer h3 span[style*="FF6600"], .footer h3 strong span[style*="ff6600"]{ color:var(--hh-do) !important; } /* [kỹ thuật 6] Nhãn cho từng ô của biểu mẫu đặt lịch */ .hh-o{ margin-bottom:14px; } .hh-o label{ display:block; margin-bottom:4px; font-size:14px; font-weight:600; color:var(--hh-chu); } .hh-bat-buoc{ color:var(--hh-do-dam); } /* ============================================================================ 23. BÁM MẪU — theo bảng đo đối chiếu nguyenkimngoc.com ngày 26/08 ========================================================================= */ /* [mẫu 3] Đang chạy 3 họ phông (hệ thống 96 · Play 112 · Roboto 5), mẫu chỉ 1. Đặt Play làm phông trục cho cả body và thanh menu. */ .nav-top-link, .nav a{ font-family:'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* [mẫu 1] Thân trang mẫu KHÔNG có khối nền tối nào; bản dựng có 3 khối đen chiếm 1.882px = 25% chiều cao trang, làm trang nặng nề và đổi nền 9 lần. Giữ nền tối cho thanh menu và chân trang — đúng như mẫu. */ .hh-khoi--dam{ background:var(--hh-nen); } .hh-khoi--dam, .hh-khoi--dam h2, .hh-khoi--dam h3, .hh-khoi--dam h4, .hh-khoi--dam p, .hh-khoi--dam li, .hh-khoi--dam span:not([class]){ color:var(--hh-chu); } .hh-khoi--dam .hh-tieude{ color:var(--hh-chu); } .hh-gioi-thieu{ background:var(--hh-nen-nhat); } .hh-noi-bat{ background:var(--hh-nen); } .hh-cam-ket{ background:var(--hh-nen-nhat); } /* nút trên nền sáng phải đọc được */ .hh-khoi--dam .button.white{ background:var(--hh-do-dam); color:#fff; border-color:var(--hh-do-dam); } .hh-khoi--dam .button.white span{ color:#fff; } /* [mẫu 9] Mẫu chỉ dùng 2 giá trị bo góc: nút vuông, ảnh 12px */ .button, input[type="submit"], input[type="text"], input[type="tel"], input[type="date"], select, textarea{ border-radius:0; } .blog-posts .post-item img, .blog-posts .post-item .box-image, .hh-dv-col img{ border-radius:12px; } /* [mẫu 2,10] Thẻ dịch vụ: mẫu cao 518px với ảnh lớn và nút; bản dựng 290px, không nút */ .hh-dv-col .col-inner{ background:#FAFAFA; padding:10px 10px 0; display:flex; flex-direction:column; height:100%; } .hh-dv-col .featured-box, .hh-dv-col .icon-box{ flex:1 1 auto; } .hh-dv-col h3{ font-size:20px; font-weight:700; color:var(--hh-do-dam); margin:14px 0 8px; } .hh-dv-col p{ font-size:16px; line-height:26px; color:#87868A; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; } .hh-dv-nut{ display:block; margin:14px -10px 0; padding:0; height:46px; line-height:46px; background:#EFEFEF; color:var(--hh-chu); font-size:14px; font-weight:700; text-align:center; text-transform:uppercase; letter-spacing:.02em; } .hh-dv-nut:hover{ background:var(--hh-do-dam); color:#fff; } /* [mẫu 5] Bốn ô điểm mạnh so le 425/362/367/367px — mẫu đều 165px nhờ cắt 3 dòng */ .hh-manh p{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-size:15px; line-height:1.55; } .hh-diem-manh .col{ display:flex; } .hh-diem-manh .col-inner{ width:100%; } /* [mẫu 4] Thẻ tin: mẫu tiêu đề 25px, ảnh bo 12px. Bản dựng 15,5px, mobile tụt 12,75px */ .blog-posts .post-item .post-title{ font-size:19px; font-weight:600; line-height:1.35; } @media (max-width:849px){ .blog-posts .post-item .post-title{ font-size:17px; } } /* [mẫu 12] Nút gửi biểu mẫu: chữ trắng 18px trên #F82C1F chỉ đạt 3,91, mà ngưỡng "chữ lớn" là 18,66px nên vẫn phải đạt 4,5 */ .wpcf7 input[type="submit"], .SUBMIT{ background:var(--hh-do-dam); color:#fff; font-size:18px; font-weight:700; } .wpcf7 input[type="submit"]:hover{ background:var(--hh-do); } /* [mẫu 11] Mẫu không có đường dẫn phân cấp ở trang chủ */ .home .hh-breadcrumb{ display:none; } /* [mẫu 8] Nút gọi trên thanh nổi: chữ 188px nhồi trong hộp 179px nên số bị cắt */ @media (max-width:849px){ .hh-noi__nut--goi{ padding-left:14px; padding-right:14px; font-size:16px; } .hh-noi__nut{ min-width:0; } } /* Chân trang nằm ngoài #main nên không dính quy tắc phông ở trên — vá nốt */ .footer-wrapper, .footer-wrapper p, .footer-wrapper b, .footer-wrapper strong, .footer-wrapper span, .footer-wrapper a, .hh-tram-mo, .absolute-footer{ font-family:'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* [kỹ thuật 4 — vòng 2] Selector trước đó không khớp: tiêu đề tin dùng class .plain, còn link chân trang nằm ngoài .footer. Nới vùng bấm cho đủ 44px trên điện thoại. */ @media (max-width:849px){ .post-item a.plain, .blog-posts a.plain{ display:block; min-height:44px; padding:6px 0; } .footer-wrapper a[href^="tel:"], .footer-wrapper a[href^="http"], .footer-wrapper a[href^="/"], .footer-wrapper a[href^="mailto:"]{ display:inline-block; min-height:44px; line-height:44px; } } /* ============================================================================ 24. TỐI ƯU GIAO DIỆN — vòng UI/UX 26/08 Sáu điểm Tình nêu: tương phản · bo góc–viền–đổ bóng · tỉ lệ ảnh bài viết · đồng bộ màu logo · biểu mẫu · máy tính bảng và điện thoại. ========================================================================= */ :root{ /* Thang bo góc — trước chỉ có 0 và 4px, quá phẳng. Ba nấc, dùng nhất quán. */ --hh-r-nho:6px; /* ô nhập, nút, thẻ nhỏ */ --hh-r-vua:10px; /* thẻ nội dung */ --hh-r-to:14px; /* ảnh, khối lớn */ /* Thang đổ bóng — trước 122/129 phần tử phẳng lì, không có lớp lang */ --hh-b1:0 1px 2px rgba(26,26,26,.06), 0 1px 3px rgba(26,26,26,.08); --hh-b2:0 4px 10px rgba(26,26,26,.08), 0 2px 4px rgba(26,26,26,.06); --hh-b3:0 10px 26px rgba(26,26,26,.12), 0 4px 8px rgba(26,26,26,.06); --hh-b-do:0 4px 14px rgba(198,35,24,.28); /* bóng mang màu logo cho nút chính */ --hh-vien-nhat:#E8EAED; --hh-nen-em:#FAFAFA; } /* --------------------------------------------------------------------------- 24.1 TƯƠNG PHẢN — sửa lỗi chữ trắng còn sót trên nền đã đổi sang sáng ------------------------------------------------------------------------ */ /* 🔴 H1 trang chủ đang là chữ TRẮNG trên nền #F5F5F5 → tỉ lệ 1,09, gần như vô hình. Sinh ra khi khối giới thiệu đổi từ nền đen sang nền sáng mà màu chữ giữ nguyên. */ .hh-gioi-thieu, .hh-gioi-thieu *, .hh-khoi--dam .hh-h1-trang, .hh-h1-trang{ color:var(--hh-chu); } .hh-gioi-thieu .hh-h1-trang strong, .hh-gioi-thieu .hh-h1-trang b{ color:var(--hh-do-dam); } /* Quét sạch mọi chữ trắng còn sót trên khối nền sáng */ .hh-khoi--dam [style*="color: #fff"], .hh-khoi--dam [style*="color:#fff"], .hh-khoi--dam [style*="color: white"]{ color:var(--hh-chu) !important; } /* --------------------------------------------------------------------------- 24.2 VIỀN · BO GÓC · ĐỔ BÓNG — dựng lớp lang thay vì mặt phẳng ------------------------------------------------------------------------ */ /* Thẻ nội dung: nền trắng, viền mảnh, bóng nhẹ; nhấc lên khi rê chuột */ .hh-dv-col .col-inner, .hh-tram, .hh-manh, .hh-noi-bat .col-inner{ background:var(--hh-nen); border:1px solid var(--hh-vien-nhat); border-radius:var(--hh-r-vua); box-shadow:var(--hh-b1); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .hh-dv-col .col-inner:hover, .hh-tram:hover, .hh-manh:hover{ box-shadow:var(--hh-b2); border-color:var(--hh-do); transform:translateY(-2px); } /* Thẻ bài viết */ .blog-posts .post-item .col-inner, .blog-posts .post-item .box{ border-radius:var(--hh-r-vua); overflow:hidden; background:var(--hh-nen); box-shadow:var(--hh-b1); transition:box-shadow .2s ease, transform .2s ease; } .blog-posts .post-item .col-inner:hover{ box-shadow:var(--hh-b2); transform:translateY(-2px); } /* Ảnh */ .blog-posts .post-item img, .blog-posts .post-item .box-image, .hh-dv-col img{ border-radius:var(--hh-r-to); } .blog-posts .post-item .box-image{ box-shadow:none; } /* Nút */ .button, a.button, input[type="submit"], .hh-dv-nut, .hh-tram-mo{ border-radius:var(--hh-r-nho); transition:background .18s ease, box-shadow .18s ease, transform .12s ease; } .button.alert, input[type="submit"], .wpcf7 input[type="submit"]{ box-shadow:var(--hh-b-do); } .button:hover, a.button:hover, input[type="submit"]:hover{ box-shadow:var(--hh-b2); } .button:active, a.button:active, input[type="submit"]:active{ transform:translateY(1px); } /* Vòng nhận nét bàn phím — trước đây không có, người dùng bàn phím lạc chỗ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid var(--hh-do); outline-offset:2px; border-radius:var(--hh-r-nho); } /* --------------------------------------------------------------------------- 24.3 ĐỒNG BỘ MÀU LOGO — đỏ đang chỉ xuất hiện 11 lần, chưa thành nhận diện ------------------------------------------------------------------------ */ /* Gạch chân tiêu đề khối — nhấn nhận diện, lặp lại đều khắp trang */ .hh-tieude::after{ background:var(--hh-do); } /* Viền trái đỏ cho thẻ trạm và ô tiêu chí: nhắc màu logo mà không rợp đỏ */ .hh-tram{ border-left:3px solid var(--hh-do); } .hh-manh{ border-top:3px solid var(--hh-do); } /* Số tổng đài, liên kết trong bài, mục đang mở của trình đơn */ .hh-khoi a:not(.button):not(.plain):not(.hh-dv-nut){ color:var(--hh-do-dam); } .hh-khoi a:not(.button):not(.plain):hover{ color:var(--hh-do); } /* (đã gỡ: dòng ép chữ đỏ lên nền đỏ của mục menu đang mở) */ /* Tiêu đề bài viết chuyển đỏ khi rê chuột — dấu hiệu bấm được */ .blog-posts .post-item .post-title a:hover{ color:var(--hh-do-dam); } /* --------------------------------------------------------------------------- 24.4 BIỂU MẪU — ô cao 36px, chữ 14,55px, viền nhạt: vừa khó bấm vừa khó đọc ------------------------------------------------------------------------ */ .wpcf7 input[type="text"], .wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 input[type="date"], .wpcf7 select, .wpcf7 textarea{ height:48px; /* 36px chưa đạt ngưỡng chạm 44px */ font-size:16px; /* dưới 16px là iOS tự phóng to trang khi gõ */ padding:0 14px; border:1px solid var(--hh-vien); border-radius:var(--hh-r-nho); background:var(--hh-nen); box-shadow:none; color:var(--hh-chu); transition:border-color .18s ease, box-shadow .18s ease; } .wpcf7 textarea{ height:auto; padding:12px 14px; } .wpcf7 select{ appearance:none; padding-right:38px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23646D76' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } .wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus{ border-color:var(--hh-do); box-shadow:0 0 0 3px rgba(248,44,31,.14); outline:none; } /* Ô sai: viền đỏ + nền hồng rất nhạt, không chỉ dựa vào màu mà còn có chữ báo lỗi */ .wpcf7 .wpcf7-not-valid{ border-color:var(--hh-do-dam); background:#FFF7F6; } .wpcf7-not-valid-tip{ font-size:13px; color:var(--hh-do-dam); margin-top:4px; display:block; } .wpcf7-response-output{ border-radius:var(--hh-r-nho); border-width:1px; padding:12px 14px; font-size:14px; } .wpcf7 input[type="submit"]{ height:52px; width:100%; font-size:18px; font-weight:700; letter-spacing:.02em; border:0; cursor:pointer; } /* Khối đặt lịch: đóng khung cho ra dáng một thẻ, không trôi trên nền */ .hh-dat-lich .wpcf7{ background:var(--hh-nen); padding:24px; border-radius:var(--hh-r-vua); border:1px solid var(--hh-vien-nhat); box-shadow:var(--hh-b2); } /* --------------------------------------------------------------------------- 24.5 MÁY TÍNH BẢNG VÀ ĐIỆN THOẠI ------------------------------------------------------------------------ */ /* Máy tính bảng 768–1024: 3 cột quá chật, 1 cột quá thưa → 2 cột */ @media (min-width:550px) and (max-width:1024px){ .hh-dv-col{ flex-basis:50%; max-width:50%; } .hh-khoi{ padding-left:20px; padding-right:20px; } .hh-dat-lich .wpcf7{ padding:20px; } } @media (max-width:549px){ .hh-dat-lich .wpcf7{ padding:16px; border-radius:var(--hh-r-nho); } .hh-dv-col .col-inner, .hh-tram, .hh-manh{ border-radius:var(--hh-r-nho); } .blog-posts .post-item img{ border-radius:var(--hh-r-vua); } /* Bóng nhẹ hơn trên màn nhỏ để chữ không bị viền bóng chèn */ .hh-dv-col .col-inner, .hh-tram, .hh-manh{ box-shadow:var(--hh-b1); } } /* Người dùng chọn giảm chuyển động thì bỏ hết hiệu ứng nhấc thẻ */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } .hh-dv-col .col-inner:hover, .hh-tram:hover, .hh-manh:hover, .blog-posts .post-item .col-inner:hover{ transform:none; } } /* [24.6] Hai chỗ chốt lại sau khi đo lần hai */ /* Bốn tiêu đề chân trang dùng cam #FF6600 ghi thẳng trong nội dung — lạc bảng màu logo. Selector cũ không khớp vì span nằm lồng trong strong. */ .footer-wrapper [style*="#ff6600"], .footer-wrapper [style*="#FF6600"], .footer-wrapper h3 span, .footer-wrapper h3 strong{ color:var(--hh-do) !important; } /* Nút và ô tìm kiếm còn giữ bo góc 4px của theme cha — kéo về đúng thang */ .header .search-field, .header .ux-search-submit, a.button, a.button.alert, a.button.white, button.button, .ux-search-submit.submit-button{ border-radius:var(--hh-r-nho) !important; } /* [24.7] Chân trang — hai điểm Tình chỉ ra */ /* Nút mở danh sách trạm nay nằm ở đáy chân trang, sau cả bốn cột. Cho chạy hết bề ngang và có vạch ngăn để đọc ra là "mở thêm", không phải nút lạc. */ .hh-tram-mo{ display:block; width:100%; margin:24px 0 0; padding:14px 16px; border:1px solid rgba(255,255,255,.28); border-radius:var(--hh-r-nho); background:rgba(255,255,255,.04); color:#fff; font-size:15px; font-weight:600; letter-spacing:.02em; cursor:pointer; transition:background .18s ease, border-color .18s ease; } .hh-tram-mo:hover{ background:rgba(255,255,255,.10); border-color:var(--hh-do); } .hh-tram-mo::after{ content:" ▾"; } .hh-tram-mo[aria-expanded="true"]::after{ content:" ▴"; } /* Cột trạm gấp lại: bỏ vạch mờ ở đáy vì nút đã chuyển đi chỗ khác, để lại thì trông như nội dung bị cụt giữa chừng. */ .hh-tram-gap::after{ background:linear-gradient(to bottom, rgba(34,34,34,0), rgba(34,34,34,.96)); } /* Tiêu đề cột chân trang: ngắt dòng cân đối thay vì cắt giữa cụm từ */ .footer-wrapper h3{ text-wrap:balance; line-height:1.35; margin-bottom:12px; } .hh-phu-de{ display:inline-block; margin-top:4px; font-size:82%; font-weight:400; opacity:.85; letter-spacing:.04em; } /* Tiêu đề bốn cột chân trang đang mỗi cột một cỡ (105% · 120% ghi thẳng trong nội dung), nên cột dài nhất chiếm 5 dòng còn cột khác 1 dòng. Đồng cỡ để bốn đầu cột thẳng hàng. */ .footer-wrapper h3, .footer-wrapper h3 span, .footer-wrapper h3 strong, .footer-wrapper h3 strong span{ font-size:17px !important; font-weight:700; letter-spacing:.01em; } .footer-wrapper h3 .hh-phu-de, .footer-wrapper h3 .hh-phu-de span{ font-size:14px !important; font-weight:400; } /* ============================================================================ 25. RÀ SOÁT TOÀN DIỆN — 26/08 Gộp: lỗi Tình chỉ ra (menu mất chữ · icon tìm kiếm dính viền) + 10 việc từ vòng thẩm định thị giác. Sửa tận gốc, không đè lớp. ========================================================================= */ /* --------------------------------------------------------------------------- 25.1 🔴 CHỮ TRÙNG MÀU NỀN — nhóm lỗi làm mất hẳn chữ ------------------------------------------------------------------------ */ /* Mục menu đang mở: nền đỏ đậm mà chữ cũng đỏ → mất chữ. Nền đỏ thì chữ phải trắng, không có ngoại lệ. */ .header-bottom .nav > li.active > a, .header-bottom .nav > li.current-menu-item > a, .header-bottom .nav > li.current-menu-parent > a, .header-bottom .nav > li.current-menu-ancestor > a, .header-bottom .nav > li:hover > a, .nav > li.active > a{ background:var(--hh-do-dam) !important; color:#fff !important; } .header-bottom .nav > li.active > a *, .header-bottom .nav > li.current-menu-item > a *, .header-bottom .nav > li:hover > a *{ color:#fff !important; } /* Nút số tổng đài phụ: chữ trắng trên nền trắng, tỉ lệ 1,00 — số biến mất, người dùng chỉ thấy một ô viền đỏ rỗng. */ .button.white, a.button.white{ background:#fff; color:var(--hh-do-dam) !important; border:1px solid var(--hh-do-dam); } .button.white span, a.button.white span{ color:var(--hh-do-dam) !important; } .button.white:hover, a.button.white:hover{ background:var(--hh-do-dam); color:#fff !important; border-color:var(--hh-do-dam); } .button.white:hover span, a.button.white:hover span{ color:#fff !important; } /* Chữ mô tả ô dịch vụ đang #87868A trên nền trắng = 3,62. Màu này lạc bảng. */ .hh-dv-col p{ color:var(--hh-chu-phu); } /* --------------------------------------------------------------------------- 25.2 🔴 Ô TÌM KIẾM — kính lúp dính sát viền phải ------------------------------------------------------------------------ */ .header .searchform, .header .search-form{ position:relative; } .header .searchform input[type="search"], .header .search-field{ height:44px; padding:0 52px 0 16px; /* chừa chỗ cho kính lúp bên phải */ border-radius:var(--hh-r-nho); } .header .ux-search-submit, .header .searchform button[type="submit"]{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; margin:0; padding:0; display:flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:var(--hh-r-nho); transition:background .18s ease; } .header .ux-search-submit:hover{ background:rgba(255,255,255,.12); } .header .ux-search-submit .icon-search{ margin:0; font-size:19px; } /* --------------------------------------------------------------------------- 25.3 🔴 THỨ BẬC TIÊU ĐỀ — H1 (26px) đang NHỎ HƠN H2 (30px) ------------------------------------------------------------------------ */ .hh-h1-trang, .hh-gioi-thieu h1{ font-size:38px; font-weight:700; line-height:1.25; } @media (max-width:1024px){ .hh-h1-trang, .hh-gioi-thieu h1{ font-size:30px; } } @media (max-width:549px){ .hh-h1-trang, .hh-gioi-thieu h1{ font-size:24px; } } /* --------------------------------------------------------------------------- 25.4 🔴 NÚT ĐỎ — rê chuột đang TỤT tương phản từ 5,75 xuống 3,91 Đảo chiều: nghỉ dùng đỏ tươi của logo, rê chuột dùng đỏ đậm. ------------------------------------------------------------------------ */ .button.alert, a.button.alert, .wpcf7 input[type="submit"], input[type="submit"]{ background:var(--hh-do); color:#fff; font-size:19px; font-weight:700; /* trên ngưỡng chữ lớn 18,66px */ box-shadow:0 4px 14px rgba(248,44,31,.26); } .button.alert:hover, a.button.alert:hover, .wpcf7 input[type="submit"]:hover, input[type="submit"]:hover{ background:var(--hh-do-dam); color:#fff; box-shadow:0 6px 18px rgba(198,35,24,.34); /* rê chuột phải NỔI hơn, không chìm */ } .button.alert span, a.button.alert span{ color:#fff; } /* Sáu nút "Đặt lịch sửa" đang nền xám #EFEFEF — trông như nút bị khoá, trong khi đó là sáu điểm chuyển đổi chính của khối dịch vụ. */ .hh-dv-nut{ background:var(--hh-do); color:#fff; font-size:16px; font-weight:700; border-radius:0 0 var(--hh-r-vua) var(--hh-r-vua); } .hh-dv-nut:hover{ background:var(--hh-do-dam); color:#fff; } /* --------------------------------------------------------------------------- 25.5 🟠 VÒNG NHẬN NÉT BÀN PHÍM — đang 4 màu, 2 độ dày, thiếu ở 2 chỗ ------------------------------------------------------------------------ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .wpcf7 input[type="submit"]:focus-visible, .post-item a:focus-visible, .button:focus-visible{ outline:3px solid var(--hh-do-dam) !important; outline-offset:2px !important; } /* Trên nền tối thì vòng đỏ chìm — đổi sang trắng */ .header-bottom a:focus-visible, .footer-wrapper a:focus-visible, .hh-tram-mo:focus-visible{ outline-color:#fff !important; } /* --------------------------------------------------------------------------- 25.6 🟠 RÊ CHUỘT GIẬT KHUNG VÀ MẢNG XÁM ------------------------------------------------------------------------ */ /* Thẻ trạm đang đổi border-top 1px → 0px khi rê chuột nên nhảy 1px. Giữ nguyên độ dày, chỉ đổi màu. */ .hh-tram{ border-top:1px solid var(--hh-vien-nhat); } .hh-tram:hover{ border-top:1px solid var(--hh-do); background:var(--hh-nen); } /* Thẻ tin rê chuột đang phủ nền #B3B3B3 — mảng xám đậm, lạc bảng màu */ .blog-posts .post-item .box:hover, .blog-posts .post-item:hover .box{ background:var(--hh-nen); } .blog-posts .post-item:hover .col-inner{ border-color:var(--hh-do); } /* --------------------------------------------------------------------------- 25.7 🟠 DỌN THANG — bo góc lồng nhau, màu viền trùng, nhịp đệm ------------------------------------------------------------------------ */ /* Ảnh icon bo 14px nằm trong thẻ bo 10px: bo trong không được lớn hơn bo ngoài */ .hh-dv-col .icon-box-img img, .hh-dv-col .icon-box-img{ border-radius:8px; } /* Hai màu viền xám chênh nhau 3/255, mắt không phân biệt — gộp về một */ .wpcf7 input[type="text"], .wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 input[type="date"], .wpcf7 select, .wpcf7 textarea{ border-color:var(--hh-vien-nhat); } /* Đệm khối: đang 30/30 cho cả 11 khối — lạc lưới 8 và lệch chuẩn đã chốt (20/40). Ba bậc theo vai trò để trang có điểm ngắt, không đọc thành một dải phẳng. */ .hh-khoi{ padding-top:24px; padding-bottom:40px; } .hh-noi-bat, .hh-dat-lich{ padding-top:32px; padding-bottom:56px; } .hh-cam-ket{ padding-top:16px; padding-bottom:24px; } /* ============================================================================ 26. RÀ KHOẢNG TRẮNG THỪA + LỖI THEO KHỔ MÀN HÌNH — 26/08 ========================================================================= */ /* --------------------------------------------------------------------------- 26.1 KHOẢNG TRẮNG THỪA — rà cả trang, không chỉ chỗ Tình chỉ Gốc chung: phần tử cuối trong hộp vẫn giữ margin-bottom, cộng thêm đệm hộp thành khoảng trống đôi. Dọn một lượt cho mọi hộp có đệm. ------------------------------------------------------------------------ */ .hh-dat-lich .wpcf7 > form > p:last-child, .hh-dat-lich .wpcf7 .hh-o:last-of-type, .hh-dat-lich .wpcf7 form > :last-child, .hh-khoi .col-inner > :last-child, .hh-manh > :last-child, .hh-tram > :last-child, .footer-wrapper .col-inner > :last-child{ margin-bottom:0 !important; } /* Contact Form 7 chèn sẵn một

rỗng và một vùng thông báo luôn chiếm chỗ dù chưa có lỗi nào — đó là phần trống lớn dưới nút gửi. */ .wpcf7 form > p:empty, .wpcf7 form br:last-child{ display:none; } .wpcf7-response-output:empty{ display:none !important; margin:0 !important; border:0 !important; } .wpcf7 .wpcf7-response-output{ margin:14px 0 0; } .wpcf7 form.init .wpcf7-response-output{ display:none; } .hh-dat-lich .wpcf7{ padding-bottom:20px; } .hh-o:last-of-type{ margin-bottom:16px; } /* --------------------------------------------------------------------------- 26.2 🔴 ẢNH TIN TỨC vẫn bị cắt chữ ở điện thoại và máy tính bảng dọc Khung đang 1,307 trong khi ảnh gốc 1,605 — lệch 19%, chữ in trên ảnh mất hai mép. Ép tỉ lệ khung bằng aspect-ratio để mọi khổ đều giữ đúng 16:10. ------------------------------------------------------------------------ */ .blog-posts .post-item .box-image, .blog-posts .post-item .box-image > div, .hh-tin-tuc .box-image{ aspect-ratio:16 / 10; height:auto !important; padding-top:0 !important; } .blog-posts .post-item .box-image img, .hh-tin-tuc .box-image img{ width:100%; height:100%; object-fit:cover; object-position:center; } /* --------------------------------------------------------------------------- 26.3 🔴 VÙNG BẤM — quy tắc cũ dừng ở 849px nên từ máy tính bảng ngang trở lên rơi lại 18–19px. Áp cho MỌI khổ, không giới hạn breakpoint. ------------------------------------------------------------------------ */ .hh-he-thong-tram a, .hh-tram h3 > a, .footer-wrapper a[href^="tel:"], .footer-wrapper a[href^="http"], .footer-wrapper a[href^="/"], .post-item a.plain, .blog-posts a.plain{ display:inline-block; min-height:44px; line-height:1.45; padding:11px 0; } .header-search > a.nav-top-link{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } .button.hh-nut-dat-lich, a.button.hh-nut-dat-lich{ min-height:46px; line-height:44px; } /* --------------------------------------------------------------------------- 26.4 🟠 CHỮ QUÁ NHỎ TRÊN ĐIỆN THOẠI Tiêu đề tin đang 12,75px do theme thu nhỏ theo khổ. ------------------------------------------------------------------------ */ @media (max-width:549px){ .blog-posts .post-item .post-title, .blog-posts .post-item .post-title a{ font-size:16px !important; line-height:1.4; } .hh-manh p{ font-size:15px; } } /* --------------------------------------------------------------------------- 26.5 🟠 SỐ CỘT THEO KHỔ — thẻ 162–182px ở máy tính bảng dọc là quá chật ------------------------------------------------------------------------ */ @media (min-width:550px) and (max-width:849px){ .hh-diem-manh .col, .hh-noi-bat .col, .hh-he-thong-tram .col{ flex-basis:50% !important; max-width:50% !important; } /* Chân trang giữ 4 cột 192px, cột 1 cao 933px trong khi hai cột giữa hụt 700px */ .footer-wrapper .footer .col{ flex-basis:50% !important; max-width:50% !important; } } @media (min-width:850px) and (max-width:1100px){ .hh-noi-bat .col, .hh-he-thong-tram .col{ flex-basis:33.33% !important; max-width:33.33% !important; } } /* --------------------------------------------------------------------------- 26.6 🟡 CHỮ TRÀN HỘP VÀI PIXEL — do không ngắt được từ dài ------------------------------------------------------------------------ */ .hh-manh p, .hh-tram p, .hh-dv-col p, .footer-wrapper p{ overflow-wrap:anywhere; word-break:normal; hyphens:auto; } /* --------------------------------------------------------------------------- 26.7 🟡 DANH SÁCH TRẠM THU GỌN cắt ngang giữa dòng chữ ------------------------------------------------------------------------ */ .hh-tram-gap{ max-height:296px; } .hh-tram-gap::after{ height:88px; } /* ============================================================================ 27. RÀ TOÀN SITE — 26/08 (không riêng trang chủ mới) ========================================================================= */ /* 27.1 🔴 Chữ trắng ghi thẳng trong nội dung, trên khối đã đổi sang nền sáng. Ảnh hưởng cả trang chủ thật: H1 để color:#FFFFFF nên mất hẳn. Bắt đủ mọi cách viết: #fff · #FFF · #ffffff · #FFFFFF · white · rgb(255,255,255) */ .hh-khoi--dam [style*="#fff" i], .hh-khoi--dam [style*="white" i], .hh-khoi--dam [style*="255, 255, 255"], .hh-gioi-thieu [style*="#fff" i], .hh-gioi-thieu [style*="white" i], .hh-diem-manh [style*="#fff" i], .hh-tai-sao [style*="#fff" i], .hh-cam-ket [style*="#fff" i], .hh-noi-bat [style*="#fff" i]{ color:var(--hh-chu) !important; } /* Nút trong các khối đó vẫn phải giữ chữ trắng trên nền đỏ */ .hh-khoi--dam .button [style*="#fff" i], .hh-khoi--dam .button span{ color:#fff !important; } /* 27.2 Tiêu đề trang tự sinh cho những trang vốn không in tiêu đề */ .hh-h1-tu-sinh{ font-size:34px; font-weight:700; line-height:1.25; color:var(--hh-chu); margin:0 0 18px; padding-bottom:12px; position:relative; } .hh-h1-tu-sinh::after{ content:""; position:absolute; left:0; bottom:0; width:60px; height:3px; background:var(--hh-do); } @media (max-width:849px){ .hh-h1-tu-sinh{ font-size:26px; } } /* 27.3 Ô tiêu chí: ảnh 182px lệch trái, chừa 87px trắng bên phải — không cân. Cho ảnh chiếm hết bề ngang thẻ và bo góc khớp thẻ. */ .hh-manh{ padding:0 0 18px; overflow:hidden; } .hh-manh .ux-image, .hh-manh img{ width:100% !important; max-width:100% !important; height:auto; margin:0 0 16px !important; border-radius:var(--hh-r-vua) var(--hh-r-vua) 0 0; aspect-ratio:16 / 11; object-fit:cover; } .hh-manh h3, .hh-manh h4{ padding:0 18px; margin:0 0 10px; } .hh-manh p{ padding:0 18px; margin:0; } /* 27.4 Thẻ dịch vụ nổi bật: chữ sát mép trái phải, không có đệm */ .hh-noi-bat .col-inner{ padding:0 0 4px; overflow:hidden; } .hh-noi-bat .col-inner img{ border-radius:var(--hh-r-vua) var(--hh-r-vua) 0 0; } .hh-noi-bat .col-inner h3, .hh-noi-bat .col-inner h4, .hh-noi-bat .col-inner .post-title, .hh-noi-bat .col-inner p{ padding:0 16px; } .hh-noi-bat .col-inner h3, .hh-noi-bat .col-inner h4{ margin:14px 0 10px; } /* 27.5 Danh sách điểm tin cậy ở cột trái khối đặt lịch */ .hh-diem-tin{ list-style:none; margin:22px 0 0; padding:0; } .hh-diem-tin li{ position:relative; padding:0 0 0 30px; margin-bottom:14px; font-size:16px; line-height:1.6; color:var(--hh-chu); } .hh-diem-tin li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--hh-do-dam); font-weight:700; font-size:17px; } .hh-goi-ngay{ margin-top:22px; font-size:17px; } .hh-goi-ngay a{ font-weight:700; font-size:22px; color:var(--hh-do-dam); } /* [27.6] Nút mở danh sách trạm: nằm cuối CỘT TRẠM, và bị đẩy xuống đáy cột để thẳng hàng với đáy ba cột kia — trước đây nó dừng ở 300px nên rơi vào giữa. */ .footer-wrapper .footer .row{ align-items:stretch; } .footer-wrapper .footer .col{ display:flex; } .footer-wrapper .footer .col > .col-inner{ display:flex; flex-direction:column; width:100%; } .hh-tram-mo{ margin-top:auto !important; /* đẩy xuống đáy cột */ width:100%; padding:12px 14px; font-size:14px; } /* ============================================================================ 28. CHÂN TRANG — biểu mẫu, tên tỉnh, nút mở trạm ========================================================================= */ /* 28.1 🔴 Nhãn biểu mẫu ở chân trang đang màu chữ tối trên nền đen — không đọc được. Quy tắc màu nhãn viết cho khối sáng, không tính tới bản sao nằm trong chân trang. */ .footer-wrapper .hh-o label, .footer-wrapper .wpcf7 label, .footer-wrapper .hh-nhan-o{ color:rgba(255,255,255,.92) !important; } .footer-wrapper .hh-bat-buoc{ color:var(--hh-do) !important; } .footer-wrapper .wpcf7-not-valid-tip{ color:#FF8A80 !important; } .footer-wrapper .wpcf7-response-output{ color:#fff; border-color:rgba(255,255,255,.3); } /* 28.2 Biểu mẫu gọn lại — ô 48px và cách nhau 14px là quá thoáng cho chân trang */ .footer-wrapper .hh-o{ margin-bottom:10px; } .footer-wrapper .hh-o label{ margin-bottom:3px; font-size:13px; } .footer-wrapper .wpcf7 input[type="text"], .footer-wrapper .wpcf7 input[type="tel"], .footer-wrapper .wpcf7 input[type="date"], .footer-wrapper .wpcf7 select{ height:42px; font-size:15px; padding:0 12px; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.96); } .footer-wrapper .wpcf7 input[type="submit"]{ height:46px; font-size:16px; } /* Biểu mẫu trên trang: gom nhịp lại một nấc */ .hh-dat-lich .hh-o{ margin-bottom:12px; } .hh-dat-lich .hh-o label{ margin-bottom:5px; } .hh-dat-lich .wpcf7 input[type="text"], .hh-dat-lich .wpcf7 input[type="tel"], .hh-dat-lich .wpcf7 input[type="date"], .hh-dat-lich .wpcf7 select{ height:44px; } .hh-dat-lich .wpcf7 input[type="submit"]{ height:50px; margin-top:6px; } /* 28.3 Tên tỉnh thành trong danh sách trạm: đang cùng màu với địa chỉ nên đọc thành một khối chữ liền, không thấy đâu là đầu mục. */ .hh-tram-gap b, .hh-tram-gap strong, .footer-wrapper .col-inner b{ color:var(--hh-do); font-size:15px; font-weight:700; display:inline-block; margin-top:10px; letter-spacing:.01em; } .hh-tram-gap p{ margin:0 0 3px; line-height:1.5; } /* 28.4 Nút mở trạm phải tụt xuống đáy cột — selector cũ không bắt đúng lớp bọc */ .footer-wrapper .col-inner{ display:flex; flex-direction:column; height:100%; } .footer-wrapper .col-inner > .hh-tram-mo{ margin-top:auto !important; } /* [28.5] Hai chỗ chốt lại sau lần đo cuối */ /* Nút "Đặt lịch sửa" chữ 16px — dưới ngưỡng chữ lớn 18,66px nên nền đỏ tươi chỉ cho 3,91. Dùng đỏ đậm (5,75); đỏ tươi để dành cho lúc rê chuột. */ .hh-dv-nut{ background:var(--hh-do-dam); } .hh-dv-nut:hover{ background:var(--hh-do); } /* Nút mở trạm đang để nền trong suốt 4% nên phép đo tương phản không truy được nền thật. Đặt nền đặc cho chắc, vẫn giữ đúng sắc độ. */ .hh-tram-mo{ background:#2E2E2E; } .hh-tram-mo:hover{ background:#3A3A3A; } /* [28.6] Tỉ lệ khung ảnh bài viết — đặt lên chính thẻ ảnh. Đặt trên hộp bọc không ăn: hộp để chiều cao tự động nên chính ảnh quyết định chiều cao, thành vòng luẩn quẩn. Ảnh gốc 352×220 nên khung phải đúng 16:10. */ .blog-posts .post-item img, .hh-tin-tuc img, .blog-posts .box-image img{ aspect-ratio:16 / 10 !important; width:100% !important; height:auto !important; object-fit:cover; object-position:center; } .blog-posts .post-item .box-image, .hh-tin-tuc .box-image{ aspect-ratio:auto !important; height:auto !important; } /* [28.7] Khoảng trống giữa danh sách trạm và nút mở. Nguyên nhân: nút bị `margin-top:auto` đẩy xuống đáy cột, trong khi danh sách chỉ cao 296px — hở ra một mảng trống ở giữa. Cách đúng là cho danh sách GIÃN lấp phần còn lại của cột, nút bám ngay dưới nó. */ .hh-tram-gap{ flex:1 1 auto; max-height:none; /* bỏ trần cứng — chiều cao do cột quyết định */ min-height:260px; } .footer-wrapper .col-inner > .hh-tram-mo{ margin-top:12px !important; /* bám ngay dưới danh sách, không đẩy xuống đáy */ flex:0 0 auto; } /* [28.8] Cột liên hệ ở chân trang — nhịp dòng loạn và biểu tượng dính chữ. Mỗi dòng là một đoạn riêng nên chỗ sát nhau, chỗ hở 60–70px. */ .footer-wrapper .col-inner p{ margin:0 0 8px; line-height:1.65; } .footer-wrapper .col-inner p:empty{ display:none; } /* đoạn rỗng tạo hở lớn */ /* Biểu tượng: chừa khoảng cách và canh thẳng hàng với chữ */ .footer-wrapper .fa, .footer-wrapper [class^="fa-"], .footer-wrapper [class*=" fa-"]{ margin-right:9px; width:16px; text-align:center; color:var(--hh-do); font-size:14px; vertical-align:baseline; } /* Nhóm ba số điện thoại lại thành một cụm, tách khỏi địa chỉ phía trên */ .footer-wrapper .col-inner p:has(a[href^="tel:"]){ margin-bottom:5px; } /* Hai địa chỉ web để trần — cho thành liên kết có gạch chân khi rê chuột */ .footer-wrapper .col-inner p > a[href*="boschrepair"]{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.22); padding-bottom:1px; } .footer-wrapper .col-inner p > a[href*="boschrepair"]:hover{ border-bottom-color:var(--hh-do); } /* Dòng nhãn in đậm ("Website…", "Email:", "Thời gian làm việc…") là đầu mục của cụm bên dưới nên cần thở phía trên, sát phía dưới */ .footer-wrapper .col-inner p > strong:only-child{ display:inline-block; margin-top:10px; } /* [28.9] Ô tiêu chí: chữ mô tả sát đáy thẻ, không có chỗ thở */ .hh-manh{ padding-bottom:22px !important; } .hh-manh p{ padding-bottom:0; margin-bottom:0; } .hh-manh h3, .hh-manh h4{ margin-top:16px; } /* Ảnh tràn qua viền bo của thẻ ở góc trên */ .hh-manh > .ux-image:first-child, .hh-manh img:first-child{ margin-top:0 !important; } /* [28.10] Thẻ dịch vụ: nút gần chạm mép mà không chạm hẳn — hở một vạch ở đáy và hai bên, đúng kiểu nhìn là thấy lệch. Cho nút chạm khít ba cạnh và bo góc dưới khớp đúng bo góc của thẻ. */ .hh-dv-col .col-inner{ padding:10px 10px 0 !important; display:flex; flex-direction:column; overflow:hidden; } .hh-dv-col .featured-box, .hh-dv-col .icon-box{ flex:1 1 auto; } .hh-dv-nut{ display:block; width:calc(100% + 20px); margin:16px -10px 0 !important; height:48px; line-height:48px; padding:0; border-radius:0 0 calc(var(--hh-r-vua) - 1px) calc(var(--hh-r-vua) - 1px); } /* [28.11] Thẻ tin tức: tiêu đề dòng 2 bị cắt ngang thân chữ, và hở một mảng trắng lớn giữa ảnh với tiêu đề. Nguyên nhân cắt chữ: giới hạn số dòng cộng với chiều cao hộp không phải bội số của chiều cao dòng, nên dòng cuối bị xén nửa dưới. */ .blog-posts .post-item .post-title, .blog-posts .post-item .post-title a, .hh-tin-tuc .post-title{ -webkit-line-clamp:2; line-height:1.45 !important; max-height:calc(2 * 1.45em); overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; padding:0 14px; margin:0; } /* Chừa đúng chỗ cho hai dòng để các thẻ cao đều mà không xén chữ */ .blog-posts .post-item .box-text{ padding:14px 0 16px !important; min-height:calc(2 * 1.45em + 30px); } .blog-posts .post-item .box-text .post-meta{ padding:0 14px; } /* Ảnh và phần chữ dính liền nhau, không chừa mảng trắng ở giữa */ .blog-posts .post-item .box-image{ margin-bottom:0 !important; } .blog-posts .post-item .box{ margin-bottom:0; } /* ============================================================================ 29. KHỐI CHỮ DÀI + SỬA NỐT XÉN CHỮ Mọi quy tắc dưới đây bám vào CLASS CỦA KHỐI, không bám thứ tự phần tử — khách sửa chữ hay thêm bớt dòng trong UX Builder thì style vẫn ăn. ========================================================================= */ /* 29.1 Tiêu đề thẻ tin vẫn bị xén ở desktop: trần chiều cao tính bằng `em` nên lệch khi cỡ chữ đổi. Chốt bằng px cho khớp đúng hai dòng. */ .blog-posts .post-item .post-title, .blog-posts .post-item .post-title a, .hh-tin-tuc .post-title{ font-size:17px !important; line-height:26px !important; max-height:52px !important; /* đúng 2 × 26px */ -webkit-line-clamp:2; } .blog-posts .post-item .box-text{ min-height:82px !important; } @media (max-width:549px){ .blog-posts .post-item .post-title, .hh-tin-tuc .post-title{ font-size:16px !important; line-height:24px !important; max-height:48px !important; } .blog-posts .post-item .box-text{ min-height:78px !important; } } /* 29.2 Khối chữ dài: dòng chạy hết 1.900px thì mắt lạc dòng khi xuống hàng. Giới hạn bề rộng đoạn văn về khoảng 70 ký tự — chuẩn đọc thoải mái. */ .hh-ve-chung-toi .col-inner > p, .hh-tai-sao .col-inner > p, .hh-khoi .hh-dan{ max-width:78ch; margin-left:auto; margin-right:auto; line-height:1.75; color:var(--hh-chu); } .hh-ve-chung-toi .col-inner{ text-align:left; } .hh-ve-chung-toi p{ margin-bottom:14px; } /* 29.3 Danh sách dấu tích — dùng chung cho mọi khối, khách thêm dòng vẫn đúng kiểu */ .hh-khoi ul:not(.nav):not(.menu){ list-style:none; margin:18px 0 0; padding:0; } .hh-khoi ul:not(.nav):not(.menu) > li{ position:relative; padding:0 0 0 30px; margin-bottom:14px; line-height:1.7; color:var(--hh-chu); } .hh-khoi ul:not(.nav):not(.menu) > li::before{ content:"✓"; position:absolute; left:0; top:1px; color:var(--hh-do-dam); font-weight:700; font-size:16px; line-height:1.6; } /* Chữ in đậm mở đầu mỗi gạch đầu dòng thành nhãn có màu, dễ quét mắt */ .hh-khoi ul:not(.nav):not(.menu) > li > strong:first-child, .hh-khoi ul:not(.nav):not(.menu) > li > b:first-child{ color:var(--hh-chu); font-weight:700; } /* 29.4 Hai cột danh sách: chừa máng giữa để hai cột không dính nhau */ .hh-tai-sao .col + .col, .hh-gioi-thieu .col + .col{ padding-left:26px; } @media (max-width:849px){ .hh-tai-sao .col + .col, .hh-gioi-thieu .col + .col{ padding-left:15px; } } /* 29.5 Đoạn dẫn dưới tiêu đề khối — canh giữa, nhạt hơn một nấc */ .hh-khoi .hh-dan{ text-align:center; color:var(--hh-chu-phu); font-size:16px; } /* [29.6] Chân trang — cột trạm và nút mở, chốt lại lần cuối. Yêu cầu: nút nằm DƯỚI CÙNG cột thứ hai, và không hở khoảng trống ở giữa. Cách đạt cả hai: cột là hộp dọc cao bằng cột dài nhất; danh sách trạm nhận `flex:1 1 0` + `min-height:0` để GIÃN lấp đúng phần còn lại rồi cắt phần thừa; nút bám ngay sau danh sách nên tự nằm sát đáy cột. (Bỏ trần chiều cao thì danh sách bung hết 40 địa chỉ, chân trang phình lên 2.500px và nút mở mất ý nghĩa — đó là điều vừa xảy ra.) */ .footer-wrapper .footer .row{ align-items:stretch; } .footer-wrapper .footer .col{ display:flex; } .footer-wrapper .col-inner{ display:flex; flex-direction:column; width:100%; height:100%; } .hh-tram-gap{ flex:1 1 0 !important; min-height:180px !important; max-height:none !important; overflow:hidden; position:relative; } .footer-wrapper .col-inner > .hh-tram-mo{ flex:0 0 auto; margin-top:12px !important; } /* [29.7] Tiêu đề tin bị cắt ngang thân chữ — chốt lại cho đúng phần tử. Chữ nằm trong thẻ chứ không nằm thẳng trong

: cao 71px (gần ba dòng) trong khi
bị ép 42px nên xén. Giới hạn số dòng phải đặt lên . */ .hh-tin-tuc .post-title, .blog-posts .post-item .post-title{ display:block !important; height:auto !important; max-height:none !important; overflow:visible !important; -webkit-line-clamp:none !important; margin:0 !important; } .hh-tin-tuc .post-title a, .blog-posts .post-item .post-title a{ display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:17px !important; line-height:26px !important; max-height:52px !important; min-height:52px; /* hai dòng cố định để các thẻ cao đều */ padding:0 !important; } @media (max-width:549px){ .hh-tin-tuc .post-title a, .blog-posts .post-item .post-title a{ font-size:16px !important; line-height:24px !important; max-height:48px !important; min-height:48px; } } /* [29.8] Mảng trắng 61px giữa ảnh và tiêu đề tin — gom lại còn một nhịp */ .hh-tin-tuc .box-image, .blog-posts .post-item .box-image{ margin:0 !important; padding:0 !important; line-height:0; } .hh-tin-tuc .box-text, .blog-posts .post-item .box-text{ padding:14px 14px 16px !important; } .hh-tin-tuc .post-title a, .blog-posts .post-item .post-title a{ padding:0 !important; } .hh-tin-tuc .box-text .post-meta, .blog-posts .post-item .box-text .post-meta{ padding:0 !important; margin-top:6px; } /* [29.9] Mảng trắng dưới ảnh tin: hộp bọc `.image-cover` giữ tỉ lệ bằng đệm trên theo phần trăm (264px) trong khi ảnh chỉ cao 220px — chênh 44px thành khoảng trắng. Cho hộp bọc mang đúng tỉ lệ 16:10, ảnh phủ kín hộp. */ .hh-tin-tuc .image-cover, .blog-posts .post-item .image-cover{ padding-top:0 !important; height:auto !important; aspect-ratio:16 / 10; position:relative; overflow:hidden; border-radius:var(--hh-r-vua) var(--hh-r-vua) 0 0; } .hh-tin-tuc .image-cover img, .blog-posts .post-item .image-cover img{ position:absolute !important; inset:0; width:100% !important; height:100% !important; aspect-ratio:auto !important; object-fit:cover; object-position:center; border-radius:0 !important; } /* ============================================================================ 30. STYLE CHUNG TOÀN WEB — 26/08 Áp cho mọi trang: trang chủ, trang con, bài viết, danh mục, liên hệ. Bám class chung của theme nên khách sửa nội dung trong UX Builder vẫn giữ. ========================================================================= */ :root{ /* Đỏ logo #F82C1F trên nền tối #222 chỉ đạt 4,07 — thiếu cho chữ thường. Thêm một sắc đỏ sáng hơn DÀNH RIÊNG cho chữ trên nền tối; nền sáng vẫn dùng #C62318 như cũ. Vẫn là đỏ của logo, chỉ nâng độ sáng. */ --hh-do-tren-toi:#FF8377; --hh-doc:72ch; /* bề rộng dòng đọc thoải mái */ } /* --------------------------------------------------------------------------- 30.1 CHỮ ĐỎ TRÊN NỀN TỐI — lỗi lặp ở mọi trang (9–13 chỗ mỗi trang) ------------------------------------------------------------------------ */ .footer-wrapper h3, .footer-wrapper h3 span, .footer-wrapper h3 strong, .footer-wrapper h3 strong span, .footer-wrapper .hh-phu-de, .footer-wrapper a[href^="tel:"], .footer-wrapper a[href^="tel:"] strong, .hh-tram-gap b, .hh-tram-gap strong, .footer-wrapper .col-inner b, .footer-wrapper .hh-bat-buoc, .dark .hh-hotline, .nav-dark .hh-hotline{ color:var(--hh-do-tren-toi) !important; } /* Nút nổi trên điện thoại: chữ trắng trên đỏ tươi chỉ 3,91 */ .hh-noi__nut, .hh-noi a{ background:var(--hh-do-dam) !important; } .hh-noi__nut:hover{ background:var(--hh-do) !important; } /* --------------------------------------------------------------------------- 30.2 VÙNG BẤM ≥44px — áp mọi trang, không giới hạn khổ màn hình ------------------------------------------------------------------------ */ .footer-wrapper a[href^="tel:"], .footer-wrapper a[href^="http"], .footer-wrapper a[href^="mailto:"], .entry-content a[href^="tel:"], .post-item a.plain, .hh-tram h3 > a{ display:inline-block; min-height:44px; line-height:1.5; padding:11px 0; } /* --------------------------------------------------------------------------- 30.3 NỘI DUNG BÀI VIẾT VÀ TRANG CON — đồng bộ với giao diện mới ------------------------------------------------------------------------ */ .entry-content, .page-inner, .hh-noi-dung{ font-size:17px; line-height:1.8; color:var(--hh-chu); } /* Dòng chạy hết 1.220px thì mắt lạc dòng khi xuống hàng */ .entry-content > p, .entry-content > ul, .entry-content > ol, .page-inner > p{ max-width:var(--hh-doc); } .entry-content h2, .page-inner h2{ font-size:26px; font-weight:700; line-height:1.3; margin:38px 0 14px; padding-left:14px; border-left:4px solid var(--hh-do); } .entry-content h3, .page-inner h3{ font-size:21px; font-weight:700; line-height:1.35; margin:28px 0 10px; color:var(--hh-chu); } .entry-content h4, .page-inner h4{ font-size:18px; font-weight:700; margin:22px 0 8px; } .entry-content a:not(.button){ color:var(--hh-do-dam); text-decoration:none; border-bottom:1px solid rgba(198,35,24,.32); } .entry-content a:not(.button):hover{ border-bottom-color:var(--hh-do-dam); } .entry-content img, .page-inner img{ border-radius:var(--hh-r-vua); height:auto; max-width:100%; } .entry-content figure{ margin:24px 0; } .entry-content figcaption{ font-size:14px; color:var(--hh-chu-phu); text-align:center; margin-top:8px; } /* Danh sách trong bài — dấu tích đỏ giống các khối của trang chủ */ .entry-content ul:not(.nav):not(.menu){ list-style:none; padding:0; margin:16px 0; } .entry-content ul:not(.nav):not(.menu) > li{ position:relative; padding-left:28px; margin-bottom:10px; } .entry-content ul:not(.nav):not(.menu) > li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--hh-do-dam); font-weight:700; } .entry-content ol{ padding-left:22px; margin:16px 0; } .entry-content ol > li{ margin-bottom:10px; padding-left:6px; } .entry-content ol > li::marker{ color:var(--hh-do-dam); font-weight:700; } /* Bảng trong bài — thường tràn ngang trên điện thoại */ .entry-content table{ width:100%; border-collapse:collapse; margin:22px 0; font-size:15px; display:block; overflow-x:auto; } .entry-content th{ background:var(--hh-nen-nhat); font-weight:700; text-align:left; padding:11px 13px; border:1px solid var(--hh-vien-nhat); } .entry-content td{ padding:11px 13px; border:1px solid var(--hh-vien-nhat); } .entry-content tr:nth-child(even) td{ background:#FCFCFC; } .entry-content blockquote{ margin:24px 0; padding:16px 20px; background:var(--hh-nen-em); border-left:4px solid var(--hh-do); border-radius:0 var(--hh-r-nho) var(--hh-r-nho) 0; font-style:normal; color:var(--hh-chu); } .entry-content blockquote p:last-child{ margin-bottom:0; } /* Thẻ bài liên quan ở cuối bài — dùng chung kiểu thẻ của trang chủ */ .related .post-item .col-inner, .related-posts .post-item .col-inner{ background:var(--hh-nen); border:1px solid var(--hh-vien-nhat); border-radius:var(--hh-r-vua); overflow:hidden; box-shadow:var(--hh-b1); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .related .post-item .col-inner:hover, .related-posts .post-item .col-inner:hover{ box-shadow:var(--hh-b2); transform:translateY(-2px); border-color:var(--hh-do); } @media (max-width:849px){ .entry-content, .page-inner{ font-size:16px; line-height:1.75; } .entry-content h2, .page-inner h2{ font-size:22px; margin:30px 0 12px; } .entry-content h3, .page-inner h3{ font-size:19px; } } /* --------------------------------------------------------------------------- 30.4 TRANG LIÊN HỆ ------------------------------------------------------------------------ */ .page-id-153 .ux-text p, .page-id-153 .ux-text{ font-size:16px; line-height:1.9; } .page-id-153 .ux-text .fa{ color:var(--hh-do); width:18px; margin-right:9px; text-align:center; } .page-id-153 .ux-text a{ color:var(--hh-chu); } .page-id-153 .ux-text a[href^="tel:"]{ color:var(--hh-do-dam); font-weight:700; font-size:18px; } .page-id-153 .wpcf7{ background:var(--hh-nen); padding:24px; border-radius:var(--hh-r-vua); border:1px solid var(--hh-vien-nhat); box-shadow:var(--hh-b2); } @media (max-width:849px){ .page-id-153 .wpcf7{ padding:18px; } } /* [30.5] Sửa hai lỗi do chính mục 30 gây ra khi đo lại: · `.page-id-153 .wpcf7` là class trên body nên bao trùm CẢ chân trang, làm biểu mẫu ở đó thành nền trắng trong khi nhãn vẫn trắng → tỉ lệ 1,00. · Quy tắc dọn màu cam ở mục 22 dùng `!important` nên đè mất màu đỏ sáng. */ .footer-wrapper .wpcf7{ background:transparent !important; padding:0 !important; border:0 !important; box-shadow:none !important; } .page-id-153 #main .wpcf7{ background:var(--hh-nen); padding:24px; border-radius:var(--hh-r-vua); border:1px solid var(--hh-vien-nhat); box-shadow:var(--hh-b2); } .footer-wrapper h3 span[style*="ff6600" i], .footer-wrapper h3 strong span[style*="ff6600" i], .footer h3 span[style*="ff6600" i]{ color:var(--hh-do-tren-toi) !important; } /* [30.6] Vùng bấm — chỉ nới những chỗ là ĐIỀU HƯỚNG và HÀNH ĐỘNG. Liên kết nằm giữa một dòng văn được chuẩn miễn yêu cầu kích thước; nới chúng sẽ phá nhịp dòng, nên cố ý không đụng. */ /* Đường dẫn phân cấp */ .hh-breadcrumb a, .breadcrumbs a{ display:inline-block; min-height:44px; line-height:44px; padding:0 2px; } /* Mục lục tự sinh trong bài — là danh sách điều hướng, không phải văn xuôi */ #ez-toc-container a, .ez-toc-list a{ display:inline-block; min-height:44px; line-height:1.5; padding:11px 0; } #ez-toc-container .ez-toc-btn{ min-width:44px; min-height:44px; } /* Số điện thoại và địa chỉ web ở trang liên hệ — đây là hành động chính của trang */ .page-id-153 .ux-text a{ display:inline-block; min-height:44px; line-height:1.5; padding:11px 0; } /* [30.7] Trang liên hệ — khối thông tin đang là chuỗi đoạn văn trần với biểu tượng dính chữ. Dựng thành các hàng có cấu trúc: biểu tượng tròn, nhãn, giá trị. */ .page-id-153 #main .col-inner > p{ display:flex; align-items:flex-start; gap:13px; padding:13px 15px; margin:0 0 9px; background:var(--hh-nen-em); border:1px solid var(--hh-vien-nhat); border-left:3px solid var(--hh-do); border-radius:var(--hh-r-nho); line-height:1.6; } /* Đoạn đầu là tên trạm — giữ dạng tiêu đề, không đóng khung */ .page-id-153 #main .col-inner > p:first-child{ display:block; background:transparent; border:0; padding:0 0 6px; margin-bottom:16px; font-size:19px; font-weight:700; color:var(--hh-chu); border-bottom:2px solid var(--hh-do); } .page-id-153 #main .col-inner > p .fa{ flex:0 0 34px; width:34px; height:34px; line-height:34px; margin:0; text-align:center; border-radius:50%; background:rgba(248,44,31,.10); color:var(--hh-do-dam); font-size:15px; } .page-id-153 #main .col-inner > p > strong:first-of-type{ white-space:nowrap; } /* Số điện thoại thành hành động rõ ràng, đủ vùng bấm */ .page-id-153 #main a[href^="tel:"]{ display:inline-block; min-height:44px; line-height:44px; padding:0 4px; font-size:19px; font-weight:700; color:var(--hh-do-dam); border-bottom:0; } .page-id-153 #main a[href^="tel:"]:hover{ color:var(--hh-do); } .page-id-153 #main a[href^="http"]{ display:inline-block; min-height:44px; line-height:44px; color:var(--hh-chu); border-bottom:1px solid var(--hh-vien); } .page-id-153 #main a[href^="http"]:hover{ border-bottom-color:var(--hh-do); } /* Ảnh bìa đầu trang đang cao 674px, chiếm gần một màn hình */ .page-id-153 .page-header-wrapper, .page-id-153 .header-title{ max-height:220px; } .page-id-153 #main > .section:first-child img{ border-radius:var(--hh-r-vua); max-height:340px; width:100%; object-fit:cover; } @media (max-width:849px){ .page-id-153 #main .col-inner > p{ padding:11px 12px; gap:10px; } .page-id-153 #main .col-inner > p .fa{ flex-basis:30px; width:30px; height:30px; line-height:30px; } .page-id-153 #main a[href^="tel:"]{ font-size:18px; } } /* [30.8] Số trang đang mở ở danh mục: chữ trắng 15px trên nền đỏ tươi chỉ 3,91 */ .page-numbers.current, .page-numbers li .current, ul.page-numbers > li > span.current{ background:var(--hh-do-dam) !important; color:#fff !important; border-color:var(--hh-do-dam) !important; } .page-numbers{ min-width:44px; min-height:44px; line-height:42px; } /* [30.9] Trang liên hệ — tinh gọn. Bản trước đóng khung TỪNG dòng, thành chín khung viền đỏ liên tiếp: rối. Nay: một khối liền, phân nhóm bằng khoảng cách, chỉ số điện thoại được nhấn. */ .page-id-153 #main .col-inner > p{ display:block; background:transparent; border:0; border-left:0; padding:0; margin:0 0 11px; border-radius:0; font-size:16px; line-height:1.65; } .page-id-153 #main .col-inner > p:first-child{ font-size:18px; font-weight:700; color:var(--hh-chu); padding:0 0 10px; margin-bottom:18px; border-bottom:2px solid var(--hh-do); } /* Biểu tượng nhỏ, cùng cột, không viền tròn */ .page-id-153 #main .col-inner > p .fa{ display:inline-block; width:20px; margin:0 8px 0 0; background:transparent; border-radius:0; line-height:inherit; height:auto; color:var(--hh-do); font-size:14px; text-align:center; } /* Ba dòng điện thoại đứng thành một cụm, tách khỏi địa chỉ phía trên */ .page-id-153 #main .col-inner > p:has(a[href^="tel:"]){ margin-bottom:4px; } .page-id-153 #main a[href^="tel:"]{ min-height:0; line-height:1.5; padding:2px 0; font-size:18px; font-weight:700; } /* Địa chỉ web: một dòng, chữ thường, không phải hai dòng nút to */ .page-id-153 #main a[href^="http"]{ min-height:0; line-height:1.5; padding:0; font-size:15px; color:var(--hh-chu-phu); border-bottom:1px solid var(--hh-vien); } /* Nhóm cuối (web · thư · giờ làm việc) lùi xuống một nhịp cho tách khỏi cụm điện thoại */ .page-id-153 #main .col-inner > p:nth-last-child(-n+3){ font-size:15px; color:var(--hh-chu-phu); } .page-id-153 #main .col-inner > p:nth-last-child(3){ margin-top:20px; } /* ============================================================================ 31. CHỐT BỐ CỤC TRANG TRONG + BO TRÒN ĐỒNG BỘ + MOBILE — 26/08 ========================================================================= */ /* Thang bo tròn chốt lại — trước có 5 giá trị rời rạc (0 · 6 · 8 · 10 · 14) */ :root{ --hh-r-nho:8px; /* nút, ô nhập, thẻ nhỏ, biểu tượng vuông */ --hh-r-vua:12px; /* thẻ nội dung, khối, ảnh */ --hh-r-to:12px; /* gộp về cùng bậc với thẻ để không lệch bo trong/bo ngoài */ } /* --------------------------------------------------------------------------- 31.1 🔴 CỘT TRẮNG BÊN PHẢI Ở TRANG CHI TIẾT Quy tắc `max-width:72ch` đặt lên từng đoạn văn làm chữ chỉ chiếm 647px trong cột 1.150px → chừa 503px trắng bên phải, nhìn như thiếu một cột. Cách đúng: giới hạn cho CẢ khối nội dung rồi canh giữa. ------------------------------------------------------------------------ */ .entry-content > p, .entry-content > ul, .entry-content > ol, .page-inner > p{ max-width:none; } .entry-content, .page-inner{ max-width:900px; margin-left:auto; margin-right:auto; } /* Bảng, ảnh lớn và khối nhúng được phép rộng hơn phần chữ */ .entry-content > table, .entry-content > figure, .entry-content > .wp-block-image{ max-width:none; } /* --------------------------------------------------------------------------- 31.2 KHOẢNG CÁCH ĐẦU TRANG CHI TIẾT — đang hở 50px rồi 56px, quá rộng ------------------------------------------------------------------------ */ .hh-breadcrumb{ padding-top:10px; padding-bottom:10px; margin-bottom:0; } .blog-single .entry-header, .page-wrapper .entry-header{ padding-top:18px; } .blog-single h1.entry-title, .entry-header h1{ margin:0 0 14px; } .blog-single .entry-content, .page-wrapper .entry-content{ padding-top:0; margin-top:0; } .blog-single .entry-meta, .entry-header .entry-meta{ margin-bottom:16px; } #main .page-wrapper, #main .blog-wrapper{ padding-top:14px; } /* --------------------------------------------------------------------------- 31.3 BO TRÒN ĐỒNG BỘ — ép mọi phần tử về đúng hai bậc ------------------------------------------------------------------------ */ .button, a.button, button, input[type="submit"], input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="date"], select, textarea, .hh-dv-nut, .hh-tram-mo, .page-numbers{ border-radius:var(--hh-r-nho) !important; } .hh-dv-col .col-inner, .hh-tram, .hh-manh, .hh-noi-bat .col-inner, .blog-posts .post-item .col-inner, .blog-posts .post-item .box, .related .post-item .col-inner, .hh-dat-lich .wpcf7, .page-id-153 #main .wpcf7, .entry-content blockquote{ border-radius:var(--hh-r-vua) !important; } .entry-content img, .entry-content figure img, .hh-manh img, .hh-dv-col img{ border-radius:var(--hh-r-vua); } .hh-tin-tuc .image-cover, .blog-posts .post-item .image-cover{ border-radius:var(--hh-r-vua) var(--hh-r-vua) 0 0; } .hh-dv-nut{ border-radius:0 0 var(--hh-r-vua) var(--hh-r-vua) !important; } /* --------------------------------------------------------------------------- 31.4 Ô TÌM KIẾM ------------------------------------------------------------------------ */ .header .searchform, .header .search-form, .searchform{ position:relative; } .header .searchform input[type="search"], .header .search-field, .searchform input[type="search"]{ height:44px; padding:0 52px 0 16px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff; border-radius:var(--hh-r-nho) !important; } .header .searchform input[type="search"]::placeholder{ color:rgba(255,255,255,.6); } .header .searchform input[type="search"]:focus{ background:rgba(255,255,255,.14); border-color:var(--hh-do); box-shadow:0 0 0 3px rgba(248,44,31,.18); outline:none; } .header .ux-search-submit, .searchform button[type="submit"]{ position:absolute !important; right:5px; top:50%; transform:translateY(-50%); width:38px; height:38px; min-width:38px; min-height:38px; margin:0; padding:0; display:flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:var(--hh-r-nho); color:#fff; transition:background .18s ease; } .header .ux-search-submit:hover{ background:rgba(255,255,255,.16); } .header .ux-search-submit .icon-search{ margin:0; font-size:18px; } /* --------------------------------------------------------------------------- 31.5 ĐẦU TRANG VÀ TRÌNH ĐƠN TRÊN ĐIỆN THOẠI ------------------------------------------------------------------------ */ @media (max-width:849px){ /* Hàng đầu trang: logo trái, nút gọi và trình đơn phải, cùng một đường */ .header-main .flex-row{ align-items:center; min-height:64px; } .header-main .logo img{ max-height:46px; width:auto; } .hh-header-brand{ text-align:left; } .hh-ten-thuong-hieu{ font-size:16px; line-height:1.2; text-align:left; } .tag-line{ font-size:11px; line-height:1.3; text-align:left; opacity:.85; } /* Nút mở trình đơn: đủ vùng bấm, có viền cho thấy là nút */ .header .mobile-nav .icon-menu, .off-canvas-toggle, a.menu-icon{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--hh-vien); border-radius:var(--hh-r-nho); } /* Nút đặt lịch ở đầu trang bị ẩn trên điện thoại — cho hiện lại, gọn */ .hh-nut-dat-lich{ display:inline-flex !important; align-items:center; justify-content:center; min-height:40px; padding:0 14px; font-size:14px; } .hh-header-cta{ display:flex; align-items:center; gap:10px; justify-content:flex-end; } } /* Ngăn kéo trình đơn */ #main-menu .nav-sidebar, .off-canvas-left .mfp-content, .mfp-content .sidebar-menu{ background:var(--hh-dam); } #main-menu li a, .nav-sidebar li a{ color:rgba(255,255,255,.92) !important; padding:14px 18px !important; min-height:48px; font-size:15px; font-weight:600; letter-spacing:.01em; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; } #main-menu li a:hover, #main-menu li.current-menu-item > a, .nav-sidebar li.current-menu-item > a{ background:var(--hh-do-dam) !important; color:#fff !important; } #main-menu li.menu-item-has-children > a{ justify-content:space-between; } #main-menu .toggle{ color:rgba(255,255,255,.7); min-width:44px; min-height:44px; } #main-menu ul.children li a, #main-menu ul.sub-menu li a{ padding-left:34px !important; font-weight:400; font-size:14px; background:rgba(255,255,255,.04); } /* Ô tìm kiếm trong ngăn kéo */ #main-menu .searchform input[type="search"]{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.2); color:#fff; } /* --------------------------------------------------------------------------- 31.6 TỐI ƯU CHUNG CHO ĐIỆN THOẠI ------------------------------------------------------------------------ */ @media (max-width:549px){ .hh-khoi{ padding-top:18px; padding-bottom:28px; } .hh-noi-bat, .hh-dat-lich{ padding-top:22px; padding-bottom:34px; } .entry-content, .page-inner{ max-width:none; } .entry-content h2, .page-inner h2{ padding-left:11px; border-left-width:3px; } /* Chừa chỗ cho thanh nổi ở đáy để không che nội dung cuối trang */ body{ padding-bottom:64px; } .absolute-footer{ padding-bottom:14px; } /* Ảnh và bảng không được đẩy trang rộng ra */ .entry-content img, .entry-content table, .entry-content iframe{ max-width:100%; } .entry-content table{ font-size:14px; } /* Tiêu đề dài không cắt ngang từ */ h1, h2, h3{ overflow-wrap:break-word; } } /* ============================================================================ 32. KHỐI ĐẶT LỊCH · NÚT XỔ · CHUYỂN ĐỘNG — 26/08 ========================================================================= */ /* 32.1 🔴 Nút "Xem toàn bộ trạm" đổi chữ nhưng danh sách không bung. Do quy tắc `flex:1 1 0` đã bỏ trần chiều cao nên lớp `.hh-mo` không còn gì để nới. */ .hh-tram-gap.hh-mo{ flex:0 0 auto !important; max-height:none !important; overflow:visible !important; } .hh-tram-gap.hh-mo::after{ display:none; } /* 32.2 Khối đặt lịch — cột trái đang dư 478px, form dư 90px dưới nút gửi */ .hh-dat-lich .hh-dl-dan{ font-size:17px; line-height:1.7; color:var(--hh-chu); margin:0 0 18px; } .hh-dat-lich .hh-dl-dan strong{ color:var(--hh-do-dam); } .hh-dat-lich .hh-dl-anh img{ width:100%; border-radius:var(--hh-r-vua); box-shadow:var(--hh-b2); } .hh-dat-lich .hh-diem-tin{ margin:20px 0 0; } .hh-dat-lich .hh-diem-tin li{ font-size:16px; margin-bottom:12px; } .hh-dat-lich .hh-goi-ngay{ margin-top:20px; padding-top:16px; font-size:16px; border-top:1px solid var(--hh-vien-nhat); } .hh-dat-lich .hh-goi-ngay a{ font-size:24px; font-weight:700; color:var(--hh-do-dam); white-space:nowrap; } /* Bỏ khoảng dư dưới nút gửi */ .hh-dat-lich .wpcf7 form > :last-child{ margin-bottom:0 !important; } .hh-dat-lich .wpcf7{ padding-bottom:22px; } .hh-dat-lich .wpcf7 input[type="submit"]{ margin-bottom:0; } /* Hai cột cao đều, không cột nào hụt */ .hh-dat-lich .row{ align-items:stretch; } .hh-dat-lich .col{ display:flex; } .hh-dat-lich .col > .col-inner{ display:flex; flex-direction:column; width:100%; } /* --------------------------------------------------------------------------- 32.3 CHUYỂN ĐỘNG — nhẹ, ngắn, chỉ dùng `transform` và `opacity` để không gây tính lại bố cục. Mọi thứ tắt sạch khi người dùng chọn giảm chuyển động. ------------------------------------------------------------------------ */ @media (prefers-reduced-motion:no-preference){ .hh-hien{ opacity:0; transform:translateY(14px); transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; } .hh-hien.hh-vao{ opacity:1; transform:none; } /* Các phần tử trong cùng một khối vào lệch nhau một nhịp rất ngắn */ .hh-hien[data-nhip="1"]{ transition-delay:.06s; } .hh-hien[data-nhip="2"]{ transition-delay:.12s; } .hh-hien[data-nhip="3"]{ transition-delay:.18s; } .hh-hien[data-nhip="4"]{ transition-delay:.24s; } } /* 32.4 Nút chuyển đổi chính — phản hồi rõ mà không ồn ào */ .button.alert, a.button.alert, .wpcf7 input[type="submit"], input[type="submit"], .hh-dv-nut, .hh-nut-dat-lich{ transition:background .2s ease, box-shadow .25s ease, transform .15s ease; } @media (prefers-reduced-motion:no-preference){ .button.alert:hover, a.button.alert:hover, .wpcf7 input[type="submit"]:hover, .hh-nut-dat-lich:hover{ transform:translateY(-2px); } .button.alert:active, a.button.alert:active, .wpcf7 input[type="submit"]:active{ transform:translateY(0); } /* Vệt sáng quét qua nút chính khi rê chuột — một lần, rất nhanh */ .button.alert, a.button.alert, .wpcf7 input[type="submit"]{ position:relative; overflow:hidden; } a.button.alert::after, .button.alert::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform:translateX(-120%); transition:transform .55s ease; pointer-events:none; } a.button.alert:hover::after, .button.alert:hover::after{ transform:translateX(120%); } /* Nút gọi trên thanh nổi: nhịp thở rất nhẹ để mắt bắt được, không giật */ .hh-noi__nut--goi{ animation:hh-tho 2.8s ease-in-out infinite; } @keyframes hh-tho{ 0%,100%{ box-shadow:0 4px 14px rgba(198,35,24,.28); } 50% { box-shadow:0 4px 20px rgba(198,35,24,.46); } } } /* Người dùng chọn giảm chuyển động: tắt sạch, nội dung hiện ngay */ @media (prefers-reduced-motion:reduce){ .hh-hien{ opacity:1 !important; transform:none !important; transition:none !important; } .hh-noi__nut--goi{ animation:none; } *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ============================================================================ 33. THEO KẾT QUẢ RÀ SOÁT SEO VÀ NỘI DUNG — 26/08 ========================================================================= */ /* 33.1 🔴 Bề rộng dòng chữ. Bài viết đang 900px = 124–126 ký tự mỗi dòng, gấp rưỡi trần 80. Trang Giới thiệu tệ hơn: 1.190px = 175 ký tự. Mắt quét quá xa, xuống dòng dễ lạc. */ .entry-content, .page-inner{ max-width:720px; } .entry-content > table, .entry-content > figure, .entry-content > .wp-block-image, .entry-content > .hh-cta-giua{ max-width:none; } /* Trang tĩnh dựng bằng UX Builder không có .entry-content — bắt theo cột */ .page-template-page-blank #main .large-12 > .col-inner > p, .page-id-151 #main .col-inner > p{ max-width:720px; } /* 33.2 🔴 Cỡ chữ và chiều cao dòng dưới chuẩn ở trang chủ và trang danh mục */ .hh-khoi p, .hh-khoi li, .archive .post-item .from_the_blog_excerpt, .archive .box-text p{ font-size:16px; line-height:1.7; } .hh-khoi .hh-dan{ font-size:17px; line-height:1.75; } .entry-content, .page-inner{ line-height:1.75; } .page-template-page-blank #main .col-inner > p{ font-size:16px; line-height:1.7; } /* 33.3 🔴 H1 bài viết dùng phông hệ thống 24px, chỉ hơn H2 đúng 2px */ .blog-single h1.entry-title, .entry-header h1, h1.entry-title{ font-family:'Play','Roboto',sans-serif !important; font-size:32px !important; font-weight:700; line-height:1.3; } @media (max-width:849px){ .blog-single h1.entry-title, h1.entry-title{ font-size:25px !important; } } /* 33.4 🔴 Khối kêu gọi hành động chèn giữa bài. Bài dài 7.000–13.660px mà không có nút nào từ đầu bài tới 83–95% chiều dài. */ .hh-cta-giua{ margin:34px 0; padding:22px 24px; background:var(--hh-nen-em); border:1px solid var(--hh-vien-nhat); border-left:4px solid var(--hh-do); border-radius:var(--hh-r-vua); display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .hh-cta-giua__chu{ flex:1 1 320px; } .hh-cta-giua__chu strong{ display:block; font-size:18px; font-weight:700; color:var(--hh-chu); margin-bottom:5px; } .hh-cta-giua__chu span{ font-size:15px; color:var(--hh-chu-phu); line-height:1.6; } .hh-cta-giua__nut{ display:flex; gap:10px; flex-wrap:wrap; } .hh-cta-giua__nut a{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:var(--hh-r-nho); font-size:17px; font-weight:700; text-decoration:none; border-bottom:0 !important; transition:background .2s ease, transform .15s ease, box-shadow .2s ease; } .hh-cta-giua__nut .hh-goi{ background:var(--hh-do); color:#fff; box-shadow:0 4px 14px rgba(248,44,31,.26); } .hh-cta-giua__nut .hh-goi:hover{ background:var(--hh-do-dam); transform:translateY(-2px); } .hh-cta-giua__nut .hh-dat{ background:#fff; color:var(--hh-do-dam); border:1px solid var(--hh-do-dam); } .hh-cta-giua__nut .hh-dat:hover{ background:var(--hh-do-dam); color:#fff; } @media (max-width:549px){ .hh-cta-giua{ padding:18px; gap:14px; } .hh-cta-giua__nut{ width:100%; } .hh-cta-giua__nut a{ flex:1 1 100%; } } /* 33.5 Dòng tác giả và ngày đăng: ngày đang rỗng, tên tài khoản quản trị hiện ra */ .blog-single .entry-meta time:empty, .entry-meta .posted-on time[datetime=""]{ display:none; } /* [33.6] Ảnh bìa bài viết cao 631px, chiếm gần hết màn hình đầu và đẩy nội dung xuống tận 1.123px — người đọc phải cuộn một màn mới thấy chữ đầu tiên. */ .blog-single .entry-image, .entry-image.relative{ max-height:360px; overflow:hidden; border-radius:var(--hh-r-vua); margin:0 auto 22px; max-width:720px; } .blog-single .entry-image img, .entry-image.relative img{ width:100%; height:360px; object-fit:cover; object-position:center; border-radius:var(--hh-r-vua); } @media (max-width:849px){ .blog-single .entry-image, .entry-image.relative{ max-height:220px; } .blog-single .entry-image img, .entry-image.relative img{ height:220px; } } /* Nhãn ngày trên ảnh bìa */ .blog-single .entry-image .badge{ top:12px; left:12px; } /* Khoảng cách đầu bài gọn lại */ .blog-single .entry-header{ padding-top:12px; } .blog-single h1.entry-title{ margin-bottom:10px; } .blog-single .entry-meta{ margin-bottom:14px; } /* [33.7] Hở 67px giữa đường dẫn phân cấp và tiêu đề bài — gom lại một nhịp */ .hh-breadcrumb{ padding:8px 0; margin:0; } #main .blog-single, #main .blog-wrapper{ padding-top:8px; } .blog-single .entry-header{ padding-top:6px; } /* [33.8] Nút gửi biểu mẫu: chữ 16px trắng trên đỏ tươi chỉ đạt 3,91. Dưới ngưỡng chữ lớn 18,66px nên bắt buộc dùng đỏ đậm. */ .wpcf7 input[type="submit"], input[type="submit"], .SUBMIT{ background:var(--hh-do-dam) !important; font-size:18px; } .wpcf7 input[type="submit"]:hover, input[type="submit"]:hover{ background:var(--hh-do) !important; } /* ============================================================================ 34. ĐẦU TRANG DỰNG BẰNG THEME OPTIONS — 26/08 Trước đây cả hàng chính là một UX Block nên khách không chỉnh được trong Tuỳ biến. Nay dùng thành phần có sẵn: logo · chữ thương hiệu · liên hệ · nút. Mọi quy tắc dưới đây bám class chuẩn của Flatsome, khách đổi nội dung trong Tuỳ biến thì style vẫn giữ. ========================================================================= */ /* Chữ thương hiệu ở giữa (Tuỳ biến → Đầu trang → Nội dung) */ #header .hh-header-brand{ text-align:center; line-height:1.25; } #header .hh-ten-thuong-hieu{ display:block; font-family:'Play','Roboto',sans-serif; font-size:26px; font-weight:700; color:var(--hh-do-dam); letter-spacing:.01em; } #header .tag-line{ display:block; margin-top:3px; font-size:13px; font-weight:600; color:var(--hh-chu-phu); letter-spacing:.02em; } /* Khối liên hệ (Tuỳ biến → Đầu trang → Liên hệ) */ #header .header-contact, #header li.header-contact-wrapper{ margin-right:14px; } #header .header-contact a, #header .nav-contact a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 6px; font-size:18px; font-weight:700; color:var(--hh-do-dam); white-space:nowrap; } #header .header-contact a:hover{ color:var(--hh-do); } #header .header-contact i, #header .nav-contact i{ font-size:17px; color:var(--hh-do); } /* Nút (Tuỳ biến → Đầu trang → Nút) */ #header .header-button .button, #header .header-button-1 .button{ min-height:44px; line-height:42px; padding:0 20px; margin:0; font-size:15px; font-weight:700; border-radius:var(--hh-r-nho); background:var(--hh-do-dam); color:#fff; border-color:var(--hh-do-dam); box-shadow:0 4px 12px rgba(198,35,24,.24); } #header .header-button .button:hover{ background:var(--hh-do); } #header .header-button .button span{ color:#fff; } /* Vùng bấm chưa đủ: nút tìm kiếm 38×38 và mục trình đơn con 41px */ #header .ux-search-submit, #header .searchform button[type="submit"]{ min-width:44px; min-height:44px; } #header .nav-dropdown li > a{ min-height:44px; display:flex; align-items:center; } #header .nav-contact-link, #header a[aria-label*="ontact"]{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } /* Hàng dưới — thanh trình đơn nền đậm */ #header .header-bottom{ background:var(--hh-dam); } #header .header-bottom .nav > li > a{ color:rgba(255,255,255,.94); } @media (max-width:849px){ #header .hh-ten-thuong-hieu{ font-size:16px; } #header .tag-line{ font-size:10px; } #header .header-contact a{ font-size:16px; } #header .header-button .button{ padding:0 12px; font-size:13px; } } /* [34.1] Chữ thương hiệu nằm trong một
  • của thanh điều hướng nên hai dòng của nó đội khối cao 179px, tràn xuống chồng vào thanh trình đơn (hàng chính chỉ 126px). */ #header .header-main .header-nav > li.html_top_right_text, #header li.html_top_right_text{ display:flex; align-items:center; height:100%; padding:0 0 0 18px; } #header .hh-header-brand{ display:flex; flex-direction:column; justify-content:center; text-align:left; line-height:1.2; gap:2px; } #header .hh-ten-thuong-hieu{ font-size:24px; line-height:1.15; margin:0; } #header .tag-line{ font-size:12px; line-height:1.25; margin:0; } /* Khe trái: logo và chữ thương hiệu trên cùng một đường */ #header .header-main .flex-left{ align-items:center; } #header .header-main .header-nav-main{ align-items:center; } #header .header-main .header-nav-main > li{ display:flex; align-items:center; } @media (max-width:1200px){ #header .hh-ten-thuong-hieu{ font-size:19px; } #header .tag-line{ font-size:11px; } } @media (max-width:849px){ #header li.html_top_right_text{ display:none; } /* điện thoại: logo đã đủ nhận diện */ } /* [34.2] Khe trái không được xuống dòng — logo và chữ thương hiệu phải cùng một hàng */ #header .header-main .header-nav-main{ flex-wrap:nowrap !important; } #header .header-main .flex-left{ flex:1 1 auto; min-width:0; } #header li.html_top_right_text{ min-width:0; } #header .hh-header-brand{ min-width:0; } #header .hh-ten-thuong-hieu, #header .tag-line{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Dưới 1200px thì bỏ dòng mô tả dài, giữ tên thương hiệu */ @media (max-width:1200px){ #header .tag-line{ display:none; } } /* [34.3] Đầu trang và trình đơn gói gọn trong khung nội dung. Trước đây header rộng 1.370px trong khi nội dung 1.220px → lề lệch 75px, logo và trình đơn không thẳng hàng với nội dung bên dưới. */ #header .header-main > .flex-row, #header .header-bottom > .flex-row, #header .header-top > .flex-row{ max-width:var(--hh-container); margin-left:auto; margin-right:auto; padding-left:15px; padding-right:15px; } @media (max-width:849px){ #header .header-main > .flex-row{ padding-left:15px; padding-right:15px; } } /* ============================================================================ 35. SỬA THEO KẾT QUẢ NHÌN THỰC TẾ HEADER — 26/08 ========================================================================= */ /* 🟠 Ô tìm kiếm rộng 298px trong khung 269px nên nhô ra ngoài lề 29px, mép phải không thẳng với nút "ĐẶT LỊCH NGAY" ở hàng trên. */ #header .header-bottom .searchform, #header .header-bottom .search-form{ max-width:100%; } #header .header-bottom input.search-field, #header .header-bottom input[type="search"]{ max-width:100% !important; width:100% !important; box-sizing:border-box; } /* Kính lúp đang lệch vào trong 54px, chừa khoảng trống thừa bên phải */ #header .header-bottom .ux-search-submit{ right:5px !important; } /* 🟠 Trên 390px logo bắt đầu ở x=81 trong khi nút trình đơn kết thúc ở 83 — đè nhau 2px */ @media (max-width:549px){ #header .mobile-nav .nav-icon > a, #header a.menu-icon{ min-width:44px !important; width:44px; padding:0; } #header .logo, #header .header-logo-wrapper{ margin-left:14px; } /* Nút trình đơn đang là khối đỏ đặc có bóng, nhìn nặng so với phần còn lại */ #header .mobile-nav .nav-icon > a{ background:transparent !important; box-shadow:none !important; border:1px solid var(--hh-vien); color:var(--hh-do-dam); } } /* 🟠 Header dính chỉ còn dải đen: mất logo, số tổng đài và nút đặt lịch */ #header.stuck .header-main, .sticky-shrink .header-main{ display:flex !important; } #header.stuck .header-main .flex-row{ min-height:60px; } #header.stuck .logo img{ max-height:44px; width:auto; } @media (max-width:849px){ /* Trên điện thoại phần dính đang cao 0px — không dính gì cả */ #header.stuck, .header-wrapper.stuck{ position:sticky; top:0; z-index:9999; } #header.stuck .header-main{ background:#fff; box-shadow:var(--hh-b2); } } /* 🟡 Dòng mô tả đang cấm xuống dòng nên khổ 1024–1200 sẽ bị cắt cụt thành "… - 3…" */ @media (min-width:850px) and (max-width:1200px){ #header .tag-line{ display:block; white-space:normal; overflow:visible; text-overflow:clip; font-size:10px; line-height:1.2; max-width:280px; } } /* 🟡 Hai mục trình đơn cùng sáng đỏ một lúc — khách tưởng đang ở hai trang. Chỉ tô mục thật sự đang mở, không tô mục cha của trang tuỳ chỉnh. */ #header .header-bottom .nav > li.current-menu-ancestor:not(.current-menu-item) > a, #header .header-bottom .nav > li.current-menu-parent:not(.current-menu-item) > a{ background:transparent !important; color:rgba(255,255,255,.94) !important; } #header .header-bottom .nav > li:hover > a{ background:var(--hh-do-dam) !important; } /* 🟡 Khoảng trắng 193px ở giữa hàng trên — kéo khối liên hệ về gần chữ thương hiệu hơn */ #header .header-main .flex-right{ flex:0 0 auto; } /* [35.1] Điện thoại: logo bắt đầu ở x=70 trong khi nút trình đơn kết thúc ở x=83 — chồng nhau 13px. Quy tắc trước không khớp vì nút mang class `.icon`, không phải `.nav-icon > a`. Thu nút về đúng 44px và đẩy logo ra sau nó. */ @media (max-width:849px){ #header .mobile-nav a.icon, #header .nav-left a.icon, #header a.icon.button{ width:44px !important; min-width:44px !important; max-width:44px !important; height:44px; padding:0 !important; margin:0; display:inline-flex; align-items:center; justify-content:center; background:transparent !important; box-shadow:none !important; border:1px solid var(--hh-vien); border-radius:var(--hh-r-nho); color:var(--hh-do-dam); } #header .header-main .flex-left{ flex:0 0 auto; gap:12px; } #header .header-main .flex-center{ padding-left:12px; } #header .logo, #header .logo a, #header .header-logo-wrapper{ margin-left:12px; padding-left:0; } /* Nút tìm kiếm trên điện thoại đang bo 0px, lệch thang */ #header a.nav-top-link, #header .header-search a{ border-radius:var(--hh-r-nho) !important; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } } /* ============================================================================ 36. HEADER DÍNH — LOGO TRÀN RA NGOÀI Khi dính, hàng chính co từ 100px xuống 70px nhưng logo vẫn giữ 70px và bắt đầu ở y=15, nên kết thúc ở y=85 trong khi hàng chỉ tới y=70 → tràn 15px xuống dải menu đen. Quy tắc trước nhắm `#header.stuck`, nhưng lớp `stuck` nằm ở `.header-wrapper` — nên không khớp. ========================================================================= */ .header-wrapper.stuck .header-main{ overflow:hidden; } .header-wrapper.stuck .logo, .header-wrapper.stuck .header-logo-wrapper{ display:flex; align-items:center; height:100%; } .header-wrapper.stuck .logo img, .header-wrapper.stuck img.header_logo, .header-wrapper.stuck img.header-logo{ max-height:46px !important; height:auto !important; width:auto !important; margin:0 !important; } /* Chữ thương hiệu cũng phải co theo, nếu không lại đội hàng lên */ .header-wrapper.stuck .hh-ten-thuong-hieu{ font-size:18px; } .header-wrapper.stuck .tag-line{ display:none; } /* Mọi thứ trong hàng dính căn giữa theo chiều dọc */ .header-wrapper.stuck .header-main > .flex-row{ align-items:center; min-height:0; } .header-wrapper.stuck .header-main .header-nav-main > li{ align-items:center; } /* Nút và khối liên hệ co lại một nấc cho vừa hàng 70px */ .header-wrapper.stuck .header-button .button{ min-height:40px; line-height:38px; } .header-wrapper.stuck .header-contact a{ min-height:40px; } @media (max-width:849px){ /* Trên điện thoại phần dính không bám được vì nằm trong khối cuộn — dùng cố định */ .header-wrapper.stuck{ position:fixed !important; top:0; left:0; right:0; z-index:9999; background:#fff; box-shadow:var(--hh-b2); } .header-wrapper.stuck .logo img{ max-height:38px !important; } } /* ============================================================================ 37. MENU XỔ + KHỐI BÀI VIẾT LIÊN QUAN — 26/08 ========================================================================= */ /* --------------------------------------------------------------------------- 37.1 MENU XỔ — đang bo góc 0, bóng lệch một bên (1px 1px 15px), các mục ngăn nhau bằng gạch cứng. Làm mềm lại cho khớp phần còn lại của giao diện. ------------------------------------------------------------------------ */ #header .nav-dropdown{ padding:8px !important; border:1px solid var(--hh-vien-nhat) !important; border-top:3px solid var(--hh-do) !important; border-radius:0 0 var(--hh-r-vua) var(--hh-r-vua) !important; box-shadow:0 12px 32px rgba(26,26,26,.14), 0 4px 10px rgba(26,26,26,.06) !important; background:#fff !important; min-width:280px; } #header .nav-dropdown li{ border:0 !important; } #header .nav-dropdown > li > a{ display:block; padding:11px 14px !important; font-size:15px; line-height:1.45; font-weight:500; color:var(--hh-chu) !important; border-radius:var(--hh-r-nho); border-left:3px solid transparent; transition:background .18s ease, color .18s ease, border-color .18s ease, padding-left .18s ease; } #header .nav-dropdown > li > a:hover, #header .nav-dropdown > li.current-menu-item > a{ background:var(--hh-nen-em) !important; color:var(--hh-do-dam) !important; border-left-color:var(--hh-do); padding-left:18px !important; } /* Mũi tên chỉ lên: dùng cùng màu viền trên cho liền mạch */ #header .nav-dropdown-has-arrow li.has-dropdown:before{ border-bottom-color:var(--hh-do) !important; } #header .nav-dropdown-has-arrow li.has-dropdown:after{ border-bottom-color:#fff !important; } @media (prefers-reduced-motion:no-preference){ #header .nav-dropdown{ transform-origin:top center; animation:hh-xo .18s cubic-bezier(.22,.61,.36,1); } @keyframes hh-xo{ from{ opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } } /* --------------------------------------------------------------------------- 37.2 KHỐI BÀI VIẾT LIÊN QUAN cuối bài — dùng chung kiểu thẻ của trang chủ ------------------------------------------------------------------------ */ .related, .related-posts, #main .related{ margin-top:44px; padding-top:30px; border-top:1px solid var(--hh-vien-nhat); } .related > h3, .related-posts > h3, .related .widget-title{ font-size:22px; font-weight:700; color:var(--hh-chu); margin:0 0 20px; padding-bottom:12px; position:relative; text-transform:none; letter-spacing:0; } .related > h3::after, .related-posts > h3::after, .related .widget-title::after{ content:""; position:absolute; left:0; bottom:0; width:56px; height:3px; background:var(--hh-do); } .related .post-item .col-inner, .related-posts .post-item .col-inner{ background:#fff; border:1px solid var(--hh-vien-nhat); border-radius:var(--hh-r-vua); overflow:hidden; box-shadow:var(--hh-b1); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; height:100%; } .related .post-item .col-inner:hover, .related-posts .post-item .col-inner:hover{ box-shadow:var(--hh-b2); transform:translateY(-3px); border-color:var(--hh-do); } /* Ảnh cùng tỉ lệ 16:10 như thẻ tin ở trang chủ, không để hộp bọc tự tính */ .related .post-item .image-cover, .related-posts .post-item .image-cover{ padding-top:0 !important; height:auto !important; aspect-ratio:16 / 10; position:relative; overflow:hidden; border-radius:var(--hh-r-vua) var(--hh-r-vua) 0 0; } .related .post-item .image-cover img, .related-posts .post-item .image-cover img{ position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover; aspect-ratio:auto !important; border-radius:0 !important; } .related .post-item .box-text, .related-posts .post-item .box-text{ padding:14px !important; } .related .post-item .post-title, .related-posts .post-item .post-title{ display:block !important; max-height:none !important; overflow:visible !important; margin:0 !important; } .related .post-item .post-title a, .related-posts .post-item .post-title a{ display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:16px !important; line-height:24px !important; max-height:48px !important; min-height:48px; font-weight:600; color:var(--hh-chu) !important; border-bottom:0 !important; padding:0 !important; } .related .post-item:hover .post-title a{ color:var(--hh-do-dam) !important; } .related .post-item .post-meta, .related-posts .post-item .post-meta{ font-size:13px; color:var(--hh-chu-phu); margin-top:8px; padding:0 !important; } .related .badge, .related-posts .badge{ display:none; } @media (max-width:549px){ .related > h3, .related-posts > h3{ font-size:19px; } .related .post-item .post-title a{ font-size:15px !important; line-height:22px !important; max-height:44px !important; min-height:44px; } } /* ============================================================================ 38. BÀI LIÊN QUAN · KHOẢNG CÁCH BÀI VIẾT · ĐẦU TRANG VÀ NGĂN KÉO TRÊN ĐIỆN THOẠI ========================================================================= */ /* --------------------------------------------------------------------------- 38.1 KHỐI BÀI VIẾT LIÊN QUAN (.hh-lien-quan) — dùng chung kiểu thẻ của trang chủ ------------------------------------------------------------------------ */ .hh-lien-quan{ padding-top:34px; padding-bottom:44px; background:var(--hh-nen-em); } .hh-lien-quan .hh-tieude{ margin-bottom:22px; } .hh-lien-quan .hh-the{ display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--hh-vien-nhat); border-radius:var(--hh-r-vua); overflow:hidden; box-shadow:var(--hh-b1); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .hh-lien-quan .hh-the:hover{ box-shadow:var(--hh-b2); transform:translateY(-3px); border-color:var(--hh-do); } /* Ảnh cùng tỉ lệ 16:10 như thẻ tin ở trang chủ */ .hh-lien-quan .hh-the__anh{ aspect-ratio:16 / 10; overflow:hidden; position:relative; border-radius:var(--hh-r-vua) var(--hh-r-vua) 0 0; margin:0; } .hh-lien-quan .hh-the__anh img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; transition:transform .35s ease; } .hh-lien-quan .hh-the:hover .hh-the__anh img{ transform:scale(1.04); } .hh-lien-quan .hh-the__than{ padding:14px 15px 16px; display:flex; flex-direction:column; flex:1 1 auto; } .hh-lien-quan .hh-the__ten{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:16px; line-height:24px; max-height:48px; min-height:48px; font-weight:600; color:var(--hh-chu); margin:0 0 8px; transition:color .18s ease; } .hh-lien-quan .hh-the:hover .hh-the__ten{ color:var(--hh-do-dam); } .hh-lien-quan .hh-the__mota{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:14px; line-height:1.6; color:var(--hh-chu-phu); margin:0; } /* --------------------------------------------------------------------------- 38.2 BÀI VIẾT — bớt lề trái phải cho chữ thoáng hơn ------------------------------------------------------------------------ */ .entry-content, .page-inner{ max-width:820px; } @media (max-width:849px){ #main .blog-single .large-12, #main .blog-single .col{ padding-left:12px; padding-right:12px; } .entry-content, .page-inner{ max-width:none; } } @media (max-width:549px){ #main .blog-single .large-12, #main .blog-single .col{ padding-left:10px; padding-right:10px; } } /* --------------------------------------------------------------------------- 38.3 ĐẦU TRANG TRÊN ĐIỆN THOẠI — cân lại nhịp cho gọn mắt ------------------------------------------------------------------------ */ @media (max-width:849px){ #header .header-main > .flex-row{ padding-left:12px; padding-right:12px; gap:10px; align-items:center; } #header .header-main .flex-left, #header .header-main .flex-right{ gap:8px; } #header .logo img{ max-height:40px; width:auto; } #header .header-main .flex-center{ padding-left:0; } /* Nút gọi: gọn, không lấn chỗ */ #header .header-button .button, #header .header-button-2 .button{ min-height:40px; line-height:38px; padding:0 14px; font-size:13px; letter-spacing:.01em; box-shadow:none; } /* Ba nút cùng một cỡ, cùng một bo góc */ #header a.icon, #header a.nav-top-link, #header .header-button .button{ border-radius:var(--hh-r-nho) !important; } } /* --------------------------------------------------------------------------- 38.4 NGĂN KÉO TRÌNH ĐƠN khi bấm nút — đang trông thô ------------------------------------------------------------------------ */ .mfp-content .mobile-sidebar, #main-menu .sidebar-menu{ background:var(--hh-dam); padding:0; } /* Đầu ngăn kéo: một dải nhận diện thay vì mở thẳng vào danh sách */ #main-menu .sidebar-menu::before{ content:"BOSCH REPAIR"; /* CHƯA CHỐT tên hiển thị — chờ khách */ display:block; padding:20px 18px 16px; font-family:'Play','Roboto',sans-serif; font-size:15px; font-weight:700; color:#fff; letter-spacing:.03em; background:linear-gradient(135deg, var(--hh-do-dam), var(--hh-do)); } #main-menu li a, .nav-sidebar li a{ color:rgba(255,255,255,.9) !important; padding:13px 18px !important; min-height:48px; font-size:15px; font-weight:500; letter-spacing:.01em; border-bottom:1px solid rgba(255,255,255,.07); display:flex; align-items:center; border-left:3px solid transparent; transition:background .18s ease, border-color .18s ease, padding-left .18s ease; } #main-menu li a:hover, #main-menu li.current-menu-item > a{ background:rgba(255,255,255,.06) !important; color:#fff !important; border-left-color:var(--hh-do); padding-left:22px !important; } /* Mục có menu con: mũi tên tách riêng, đủ vùng bấm */ #main-menu li.menu-item-has-children > a{ justify-content:space-between; } #main-menu .toggle{ color:rgba(255,255,255,.55); min-width:48px; min-height:48px; display:flex; align-items:center; justify-content:center; transition:color .18s ease, transform .2s ease; } #main-menu li.active > .toggle{ color:var(--hh-do); transform:rotate(180deg); } /* Mục con thụt vào, nền tối hơn một nấc */ #main-menu ul.children li a, #main-menu ul.sub-menu li a{ padding-left:34px !important; font-size:14px; font-weight:400; background:rgba(0,0,0,.25); color:rgba(255,255,255,.8) !important; border-bottom-color:rgba(255,255,255,.05); } #main-menu ul.children li a:hover{ padding-left:38px !important; } /* Ô tìm kiếm trong ngăn kéo */ #main-menu .searchform{ margin:14px 18px; } #main-menu .searchform input[type="search"]{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:var(--hh-r-nho); height:44px; } #main-menu .searchform input::placeholder{ color:rgba(255,255,255,.5); } /* Nút đóng */ .mfp-close, #main-menu .mfp-close{ color:#fff !important; opacity:.85; min-width:44px; min-height:44px; font-size:26px; } .mfp-close:hover{ opacity:1; color:var(--hh-do) !important; } /* ============================================================================ 39. THANH NỔI ĐÁY MÀN HÌNH + CÂN LẠI ĐẦU TRANG ĐIỆN THOẠI ========================================================================= */ /* --------------------------------------------------------------------------- 39.1 THANH NỔI — ba biểu tượng đang là KÝ TỰ CHỮ (☎ ✉ ↻) nên tuy cùng cỡ chữ vẫn trông to nhỏ khác nhau, mỗi ký tự một tỉ lệ. Bo góc cũng lệch: nút gọi 22px kiểu viên thuốc, hai nút kia bo tròn 50% — không theo thang chung. ------------------------------------------------------------------------ */ .hh-noi{ padding:9px 12px; gap:10px; background:rgba(255,255,255,.97); border-top:1px solid var(--hh-vien-nhat); box-shadow:0 -4px 16px rgba(26,26,26,.10); backdrop-filter:saturate(160%) blur(8px); } /* Ba nút cùng chiều cao, cùng bo góc, biểu tượng cùng cỡ */ .hh-noi__nut{ height:46px; min-height:46px; border-radius:var(--hh-r-nho) !important; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:700; letter-spacing:.01em; transition:background .18s ease, transform .15s ease, box-shadow .18s ease; } /* Biểu tượng: ép cùng một ô vuông và cùng cỡ nét, bất kể ký tự nào */ .hh-noi__nut::first-letter{ font-size:0; } /* giấu ký tự gốc lệch cỡ */ .hh-noi__nut .hh-ico, .hh-noi__nut > i{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:20px; line-height:1; flex:0 0 22px; } /* Nút gọi là hành động chính — chiếm phần lớn bề ngang */ .hh-noi__nut--goi{ flex:1 1 auto; background:var(--hh-do-dam); color:#fff; box-shadow:0 4px 14px rgba(198,35,24,.30); padding:0 16px; } .hh-noi__nut--goi:hover, .hh-noi__nut--goi:active{ background:var(--hh-do); } /* Hai nút phụ: ô vuông đều nhau, viền mảnh, không nền đặc */ .hh-noi__nut--sms, .hh-noi__nut--goilai{ flex:0 0 46px; width:46px; padding:0; background:#fff; color:var(--hh-do-dam); border:1px solid var(--hh-vien); } .hh-noi__nut--sms:hover, .hh-noi__nut--goilai:hover{ background:var(--hh-nen-em); border-color:var(--hh-do); } @media (prefers-reduced-motion:no-preference){ .hh-noi__nut:active{ transform:translateY(1px); } } /* --------------------------------------------------------------------------- 39.2 ĐẦU TRANG ĐIỆN THOẠI — logo 83×28 nhỏ hơn hẳn ba nút bên cạnh, nút tìm kiếm cao 64px trong khi hai nút kia 44px và 42px. ------------------------------------------------------------------------ */ @media (max-width:849px){ #header .logo img{ max-height:44px !important; width:auto !important; } /* Ba phần tử bên phải và nút trình đơn bên trái: cùng 44px, cùng bo góc */ #header a.icon, #header a.nav-top-link, #header .header-button .button, #header .header-button-2 .button{ height:44px !important; min-height:44px !important; line-height:42px !important; border-radius:var(--hh-r-nho) !important; } #header a.nav-top-link{ width:44px; padding:0; } #header .header-button .button{ padding:0 14px; font-size:13px; } /* Hàng đầu trang căn giữa theo chiều dọc, khe đều */ #header .header-main > .flex-row{ align-items:center; } #header .header-main .flex-right{ gap:8px; align-items:center; } } /* ============================================================================ 40. DẢI CHỨNG THỰC DƯỚI ẢNH BÌA Mẫu "Trust & Authority" khuyên đặt bằng chứng ngay sau ảnh bìa, trước nội dung. Trình bày theo lối thẻ module: bo góc rộng, bóng mềm, nhấc nhẹ khi rê chuột. Màu vẫn bám logo khách (đỏ + đen), không dùng bảng màu mà skill gợi ý. ========================================================================= */ .hh-tin-cay{ padding-top:0 !important; padding-bottom:0 !important; background:transparent; position:relative; z-index:3; } .hh-tin-cay .col{ padding-bottom:0; } .hh-tc{ list-style:none; margin:-46px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .hh-tc__o{ background:#fff; border:1px solid var(--hh-vien-nhat); border-radius:16px; padding:22px 20px; box-shadow:0 8px 24px rgba(26,26,26,.10), 0 2px 6px rgba(26,26,26,.05); display:flex; flex-direction:column; gap:8px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; position:relative; overflow:hidden; } /* Vạch đỏ mảnh trên đầu mỗi ô — nhắc màu logo mà không rợp đỏ */ .hh-tc__o::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--hh-do); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; } .hh-tc__o:hover::before{ transform:scaleX(1); } .hh-tc__so{ display:flex; align-items:baseline; gap:6px; font-family:'Play','Roboto',sans-serif; font-size:34px; font-weight:700; line-height:1; color:var(--hh-do-dam); letter-spacing:-.01em; } .hh-tc__so small{ font-size:14px; font-weight:600; color:var(--hh-chu-phu); letter-spacing:.02em; text-transform:lowercase; } .hh-tc__chu{ font-size:15px; line-height:1.55; color:var(--hh-chu); } @media (prefers-reduced-motion:no-preference){ .hh-tc__o:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(26,26,26,.14), 0 4px 10px rgba(26,26,26,.06); border-color:var(--hh-vien); } } @media (max-width:1024px){ .hh-tc{ grid-template-columns:repeat(2,1fr); gap:14px; margin-top:-30px; } .hh-tc__so{ font-size:29px; } } @media (max-width:549px){ .hh-tc{ grid-template-columns:1fr 1fr; gap:10px; margin-top:-18px; } .hh-tc__o{ padding:15px 13px; border-radius:12px; } .hh-tc__so{ font-size:23px; } .hh-tc__so small{ font-size:12px; } .hh-tc__chu{ font-size:13px; line-height:1.45; } } /* ============================================================================ 41. CHỮ SÁT LỀ — ba chỗ đo được, trong đó một chỗ do quy tắc của chính bộ này ========================================================================= */ /* 🔴 Dải bốn ô dưới ảnh bìa: đệm đang là `0 0 0 30px` nên chữ chỉ cách mép phải 1px. Nguyên nhân: quy tắc danh sách dấu tích `.hh-khoi ul > li` ở mục 29.3 đè lên, vì ô này cũng là thẻ
  • . Loại trừ nó ra và trả lại đệm đều bốn phía. */ .hh-khoi ul.hh-tc > li, .hh-tc__o{ padding:24px 22px !important; margin-bottom:0 !important; } .hh-khoi ul.hh-tc > li::before, .hh-tc__o::before{ content:none; } /* dấu tích của quy tắc kia không thuộc về đây */ /* Trả lại vạch đỏ trên đầu ô */ .hh-tc__o::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--hh-do); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; } .hh-tc__o:hover::after{ transform:scaleX(1); } /* Thẻ "dịch vụ khách hàng nổi bật": chữ cách mép hộp đúng 1px */ .hh-noi-bat .col-inner, .hh-noi-bat .col-inner.text-center{ padding-left:16px !important; padding-right:16px !important; } .hh-noi-bat .col-inner h3, .hh-noi-bat .col-inner h4, .hh-noi-bat .col-inner p{ padding-left:0; padding-right:0; } /* Chân trang: chữ chạm sát mép cột */ .footer-wrapper .col-inner{ padding-left:4px; padding-right:12px; } .footer-wrapper .col:first-child .col-inner{ padding-left:0; } @media (max-width:549px){ .hh-khoi ul.hh-tc > li, .hh-tc__o{ padding:16px 14px !important; } .hh-noi-bat .col-inner{ padding-left:14px !important; padding-right:14px !important; } .footer-wrapper .col-inner{ padding-left:0; padding-right:0; } } /* ============================================================================ 42. THEO KẾT QUẢ THẨM ĐỊNH MỸ THUẬT VÙNG ĐẦU TRANG — 26/08 ========================================================================= */ /* 🔴 42.1 Lề lệch toàn trang: mọi thẻ
  • còn giữ `margin-left:1.3em` mặc định (20,8px) chưa reset. Hậu quả: tiêu đề bắt đầu ở x=45 còn thẻ và danh sách ở x=66 — ba mốc lề khác nhau trong cùng một vùng. Trên điện thoại thành lề trái 36px trong khi lề phải 15px, cả khối lệch hẳn sang phải. */ .hh-tc, .hh-khoi ul:not(.nav):not(.menu):not(.page-numbers), .hh-gioi-thieu ul, .hh-tai-sao ul, .hh-dat-lich ul{ list-style:none; padding-left:0; margin-left:0; } .hh-tc__o, .hh-khoi ul:not(.nav):not(.menu) > li, .hh-gioi-thieu li, .hh-tai-sao li, .hh-dat-lich li{ margin-left:0 !important; } /* 42.2 Đơn vị trong ô số liệu lơ lửng giữa chiều cao con số */ .hh-tc__so{ align-items:baseline; } .hh-tc__chu{ line-height:22px; } /* 🔴 42.3 Bắc cầu ảnh bìa → dải số liệu. Đang chỉ 18px trên và 14px dưới, trong khi mọi khối khác cách nhau 60px — chỗ cần thở nhất lại chật nhất, và mép ảnh bìa cắt phẳng nuốt mất bóng của thẻ. */ .hh-tin-cay{ margin-top:-56px; position:relative; z-index:2; padding:0 0 48px !important; } .hh-tc{ margin-top:0; } @media (max-width:549px){ .hh-tin-cay{ margin-top:-40px; padding-bottom:32px !important; } } /* 🔴 42.4 Ảnh bìa trên điện thoại chỉ cao 128px, chữ nung trong ảnh co còn 6–8px, không đọc được chữ nào. Cắt theo tâm logo để phần đọc được vẫn còn. */ @media (max-width:549px){ .slider-wrapper, .slider-wrapper .img, .slider-wrapper .img-inner, #main > .ux-slider-wrapper, .ux-slider-container .ux-slider{ min-height:300px; } .slider-wrapper img, .ux-slider img{ min-height:300px; object-fit:cover; object-position:18% center; } .flickity-page-dots{ bottom:8px !important; } } /* 42.5 Ba danh sách dấu tích: khoảng cách GIỮA hai mục (14px) đang nhỏ hơn khoảng cách giữa hai dòng TRONG một mục (27,2px) → các gạch đầu dòng dính lại thành một mảng chữ liền. */ .hh-khoi ul:not(.nav):not(.menu):not(.hh-tc) > li, .hh-gioi-thieu li, .hh-tai-sao li, .hh-dat-lich li{ line-height:26px; margin-bottom:22px; padding-left:32px; } .hh-khoi ul:not(.nav):not(.menu):not(.hh-tc) > li::before{ font-size:15px; font-weight:700; color:var(--hh-do-dam); } /* 42.6 Tiêu đề chính: 79 ký tự hoa ở 38px không giãn chữ là một mảng đen đặc, lại là tiêu đề duy nhất canh trái trong khi 10 tiêu đề khối khác canh giữa. */ .hh-gioi-thieu h1, .hh-h1-trang{ font-size:30px !important; line-height:40px; letter-spacing:.4px; max-width:900px; margin:0 auto 26px; text-align:center; color:var(--hh-dam); } @media (max-width:549px){ .hh-gioi-thieu h1, .hh-h1-trang{ font-size:20px !important; line-height:28px; letter-spacing:.3px; margin-bottom:18px; } } /* 42.7 Ba lỗi khung nhỏ nhưng lộ */ /* Khung viền lạc bao riêng một dòng tiêu đề, mép dưới cắt ngang gạch đỏ */ .hh-noi-bat .col-inner.text-center:has(> .hh-tieude), .hh-noi-bat .col-inner.text-center{ border:0 !important; border-radius:0 !important; background:transparent !important; } /* Thẻ tin: viền thẻ x=45 · ảnh x=61 · tiêu đề x=88 — ba mốc lề khác nhau */ .blog-posts .post-item .box-image, .hh-tin-tuc .box-image{ margin:0 !important; } .blog-posts .post-item .box-text, .hh-tin-tuc .box-text{ padding:18px 20px 22px !important; } /* Nút trong thẻ dịch vụ cách viền 10px hai bên, chỉ 4px đáy — như tràn ra ngoài */ .hh-dv-col .col-inner{ padding:10px 10px 0 !important; } .hh-dv-nut{ margin:16px 0 0 !important; width:100% !important; border-radius:var(--hh-r-nho) !important; } /* Thẻ biểu mẫu: 75px trống chết dưới nút trong khi đệm trên chỉ 40px */ .hh-dat-lich .wpcf7{ padding:28px !important; } .hh-dat-lich .wpcf7 form{ margin-bottom:0; } /* Quầng nhận nét dính lại ở vài nút khi không thực sự được chọn */ .button:focus:not(:focus-visible), input[type="submit"]:focus:not(:focus-visible){ box-shadow:none; outline:none; } /* [42.8] Dải số liệu nằm HẲN DƯỚI ảnh bìa, không gối lên. Bỏ lề âm; thay bằng khoảng thở đúng nhịp 40px của trang. */ .hh-tin-cay{ margin-top:0 !important; padding:40px 0 !important; background:var(--hh-nen-nhat); } .hh-tc{ margin-top:0 !important; } @media (max-width:549px){ .hh-tin-cay{ padding:26px 0 !important; } } /* ============================================================================ 39. SỬA LỖI TRANG CHI TIẾT BÀI VIẾT — khách báo 27/08/2026 ========================================================================= */ /* 39.1 NÚT TRONG KHỐI KÊU GỌI GIỮA BÀI — chữ đỏ nằm trên nền đỏ, không đọc được. Nguyên nhân: .entry-content a:not(.button) (0,2,1) mạnh hơn .hh-cta-giua__nut .hh-goi (0,2,0) nên màu chữ đỏ đậm của link trong bài đè lên màu trắng của nút. Chữ nâng lên 18px đậm vì trắng trên #F82C1F chỉ đạt 3,91 — cỡ chữ lớn mới đạt. */ .entry-content .hh-cta-giua__nut a, .entry-content .hh-cta-giua__nut a[href^="tel:"]{ border-bottom:0 !important; font-size:18px; padding:0 28px !important; min-height:52px; } .entry-content .hh-cta-giua__nut .hh-goi, .entry-content .hh-cta-giua__nut .hh-goi:hover{ color:#fff; } .entry-content .hh-cta-giua__nut .hh-dat{ color:var(--hh-do-dam); } .entry-content .hh-cta-giua__nut .hh-dat:hover{ color:#fff; } /* 39.2 MỤC LỤC TỰ SINH — quy tắc danh sách của bài viết dán dấu ✓ vào từng mục và gạch chân mọi liên kết, nên mục lục đầy dấu tích với các gạch dài ngắn lệch nhau. Mục lục là điều hướng, không phải danh sách văn xuôi → trả về dạng trơn. */ #ez-toc-container ul > li{ padding-left:0; } #ez-toc-container ul > li::before{ content:none !important; } #ez-toc-container a, #ez-toc-container a:hover{ border-bottom:0 !important; } #ez-toc-container ul ul{ padding-left:18px; } /* 39.3 Ô XÁM RỖNG CUỐI BÀI — là thẻ không có nội dung còn sót trong nội dung bài. Ẩn ở lớp hiển thị, không đụng nội dung bài. */ .entry-content code:empty, .entry-content pre:empty, .entry-content p:empty{ display:none !important; } /* 39.4 Ô VUÔNG TRẮNG GÓC TRÊN ẢNH ĐẦU BÀI — nhãn ngày đăng của theme, rỗng vì ngày đăng đã tắt toàn site, chỉ còn lại cái khung. */ .badge.post-date, .entry-image .badge, .post-item .badge.post-date{ display:none !important; } /* 39.5 ẢNH ĐẦU BÀI — đang bị ép cao đúng 360px và cắt theo tâm nên logo trên ảnh bìa bị mất. Cho ảnh hiện đủ theo tỉ lệ gốc, vẫn giữ bề ngang 720px. */ .blog-single .entry-image, .entry-image.relative{ max-height:none; } .blog-single .entry-image img, .entry-image.relative img{ height:auto; object-fit:contain; } @media (max-width:849px){ .blog-single .entry-image, .entry-image.relative{ max-height:none; } .blog-single .entry-image img, .entry-image.relative img{ height:auto; } } /* 39.6 HÀNG NÚT CHIA SẺ CUỐI BÀI — kiểu nút của theme cho mỗi mạng một màu nền khác nhau, có mạng nền sáng nên rê chuột vào là biểu tượng trắng biến mất. Thống nhất một kiểu: nền đậm, rê chuột đổi sang đỏ thương hiệu. */ .blog-share .social-icons a.button, .blog-share .social-icons a.icon{ background-color:var(--hh-dam) !important; border-color:var(--hh-dam) !important; color:#fff !important; border-radius:var(--hh-r-nho) !important; } .blog-share .social-icons a.button i, .blog-share .social-icons a.icon i{ color:#fff !important; } .blog-share .social-icons a.button:hover, .blog-share .social-icons a.icon:hover{ background-color:var(--hh-do) !important; border-color:var(--hh-do) !important; color:#fff !important; transform:translateY(-2px); } .blog-share .social-icons a.button:hover i, .blog-share .social-icons a.icon:hover i{ color:#fff !important; } /* 39.7 THẺ BÀI VIẾT LIÊN QUAN — hộp ảnh là thẻ nên vẫn nằm dòng, tỉ lệ 16:10 không có tác dụng và mỗi thẻ cao thấp theo tỉ lệ ảnh gốc. */ .hh-lien-quan .hh-the__anh{ display:block; } .hh-lien-quan .hh-the__anh img{ display:block; } /* ============================================================================ 44. MỤC LỤC BÀI VIẾT + ĐÁNH GIÁ SAO — mã của Halo, thay 2 plugin Easy Table of Contents (~0,10s mỗi lượt tải) và kk Star Ratings (~0,07s). Mục lục đóng/mở bằng thẻ
    , không cần JavaScript. ========================================================================= */ .halo-ml{ margin:20px 0; padding:14px 18px; background:var(--hh-nen-nhat,#f7f7f7); border:1px solid var(--hh-vien,#e5e5e5); border-radius:var(--hh-r,6px); font-size:var(--hh-f6,15px); } .halo-ml__tieu-de{ cursor:pointer; font-weight:700; list-style:none; color:var(--hh-do-dam,#C62318); display:flex; align-items:center; gap:8px; } .halo-ml__tieu-de::-webkit-details-marker{ display:none; } .halo-ml__tieu-de::after{ content:"▾"; margin-left:auto; font-size:14px; transition:transform .15s ease; } .halo-ml[open] .halo-ml__tieu-de::after{ transform:rotate(180deg); } .halo-ml__ds{ margin:12px 0 0; padding-left:22px; counter-reset:halo-ml; } .halo-ml__ds--con{ margin:6px 0 6px; } .halo-ml__muc{ margin:5px 0; list-style:decimal; } .halo-ml__muc a{ color:var(--hh-chu,#333); text-decoration:none; border-bottom:1px solid transparent; } .halo-ml__muc a:hover{ color:var(--hh-do-dam,#C62318); border-bottom-color:currentColor; } html{ scroll-behavior:smooth; } .entry-content h1, .entry-content h2, .entry-content h3{ scroll-margin-top:90px; } /* ---- Đánh giá sao ---- */ .halo-dg{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 16px; font-size:14px; color:var(--hh-chu-phu,#666); } .halo-dg__nhan{ font-weight:700; color:var(--hh-chu,#333); letter-spacing:.02em; } .halo-dg__sao{ position:relative; display:inline-block; line-height:1; font-size:18px; letter-spacing:3px; white-space:nowrap; } .halo-dg__nen{ color:#d9d9d9; } .halo-dg__day{ position:absolute; inset:0 auto 0 0; overflow:hidden; color:#f5a623; white-space:nowrap; pointer-events:none; transition:width .12s ease; } .halo-dg__nut{ position:absolute; top:0; bottom:0; width:20%; padding:0; margin:0; background:none; border:0; cursor:pointer; } .halo-dg__nut[data-diem="1"]{ left:0; } .halo-dg__nut[data-diem="2"]{ left:20%; } .halo-dg__nut[data-diem="3"]{ left:40%; } .halo-dg__nut[data-diem="4"]{ left:60%; } .halo-dg__nut[data-diem="5"]{ left:80%; } .halo-dg--da-cham .halo-dg__nut{ cursor:default; } .halo-dg__chu{ font-size:12px; } @media (max-width:549px){ .halo-ml{ padding:12px 14px; } .halo-dg{ gap:8px; } } /* ============================================================================ 45. SỬA LỖI HIỂN THỊ TRÊN ĐIỆN THOẠI — 28/08/2026 Sáu lỗi đo được ở khung 390px, sửa theo đúng số đo, không đoán. ========================================================================= */ /* --- 45.1 ẢNH BÌA TRANG CHỦ BỊ CẮT HAI BÊN --------------------------------- Ảnh gốc 768×253 (tỉ lệ 3,04) bị ép vào khung cao 300px với object-fit:cover → phóng to 2,3 lần, mất cả chữ hai bên. Cho khung cao đúng tỉ lệ ảnh thì ảnh vừa khít, không mất gì. 100vw/3,04 ở khung 390px ra 128px. */ @media (max-width:849px){ .home .slider-wrapper, .home .slider-wrapper .slider, .home .flickity-viewport, .home .slider-wrapper .img, .home .slider-wrapper .img-inner, .home .slider-wrapper .img img{ height:calc(100vw / 3.04) !important; min-height:0 !important; } .home .slider-wrapper .img img{ object-fit:cover !important; } .home .slider-wrapper .flickity-prev-next-button{ display:none; } /* nút mũi tên đè lên ảnh thấp */ } /* --- 45.2 THANH NÚT NỔI CHE NỘI DUNG CUỐI TRANG ---------------------------- Thanh cao 65px nhưng thân trang chỉ chừa 64px, lại chưa tính vùng an toàn dưới màn hình iPhone → che mất hàng nút cuối chân trang. */ @media (max-width:549px){ body{ padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)) !important; } .hh-noi{ padding-bottom:env(safe-area-inset-bottom, 0px); box-shadow:0 -2px 10px rgba(0,0,0,.15); } } /* --- 45.3 BIỂU TƯỢNG TÌM KIẾM Ở ĐẦU TRANG NHỎ VÀ LỆCH ---------------------- Đo được 14px trong khi nút menu và nút gọi đều 44px; tâm lệch xuống 4px. */ .header .icon-search, .header a[class*="search"] .icon-search{ font-size:20px !important; line-height:1 !important; } .header a[class*="search"], .header li.header-search a{ display:inline-flex !important; align-items:center; justify-content:center; width:44px; height:44px; } /* --- 45.4 ĐƯỜNG DẪN ĐIỀU HƯỚNG (BREADCRUMB) CHIẾM 3 DÒNG ------------------- Chuỗi dài 95px chiều cao trên khung 390. Thu nhỏ và cho gọn trong 2 dòng. */ @media (max-width:849px){ .page-wrapper .breadcrumbs, .breadcrumbs, .yoast-breadcrumb, #breadcrumbs{ font-size:13px !important; line-height:1.45 !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } } /* --- 45.5 TIÊU ĐỀ H1 TRANG TRONG QUÁ TO ------------------------------------ */ @media (max-width:549px){ .page-wrapper h1, .page h1.entry-title, .hh-h1-trang{ font-size:21px !important; line-height:1.3 !important; } } /* --- 45.6 MENU TRÊN ĐIỆN THOẠI — GIỮ NGUYÊN MẶC ĐỊNH FLATSOME ------------ Bản trước đặt display:flex cho thẻ bọc mục menu. Nhưng đó bọc CẢ nhánh con