@font-face{ font-family:"Inter"; font-style:normal; font-weight:400 800; font-display:swap; src:url("../fonts/inter-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:400 800; font-display:swap; src:url("../fonts/inter-vietnamese.woff2") format("woff2"); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } :root{ --primary:#002C5F; --primary-2:#001f45; --accent:#0066CC; --accent-soft:#EAF1FE; --bg:#ffffff; --bg-2:#F5F8FC; --page:#F7F8FA; --text:#111827; --text-2:#6B7280; --border:#E5E7EB; /* Bốn màu nhấn dưới đây đã hạ độ sáng để đạt WCAG AA (≥4,5:1) trên chính nền tint của chúng — giữ nguyên sắc và độ bão hoà nên nhìn vẫn ra đúng màu cũ. Mỗi màu chỉ được dùng làm chữ/biểu tượng trên nền tint cùng cặp, nên đổi thẳng ở token là an toàn. Chọn mốc 4,6 chứ không phải 4,5 để có biên: sát vạch thì máy này báo đạt, máy kia làm tròn khác lại báo trượt. Trước: orange #F97316 (2,53) · teal #0D9488 (3,38) · green #16A34A (3,00) · gold #C9A227 (2,41) */ --orange:#B84E05; --orange-bg:#FFF1E6; /* 4,59 trên --orange-bg */ --teal:#0B7C72; --teal-bg:#E6F7F5; /* 4,59 trên --teal-bg */ --blue:#2563EB; --blue-bg:#EAF1FE; --green:#11803A; --green-bg:#E9F8EE; /* 4,58 trên --green-bg, 5,03 trên trắng */ --grey-bg:#F3F4F6; --gold:#8D721B; /* 4,61 trên trắng */ /* Giá gạch ngang. KHÔNG gộp vào --text-2: --text-2 dùng cho chữ thân bài khắp site và vốn đã đạt 4,83 trên trắng, hạ thêm là làm đậm oan cả trăm chỗ đang đúng. */ --price-old:#6C7686; /* 4,59 trên trắng; trước là #9CA3AF (2,53) */ --radius-card:20px; --radius-btn:12px; --shadow-card:0 8px 24px rgba(15,23,42,.06); --shadow-card-hover:0 16px 36px rgba(15,23,42,.10); --container:1280px; /* Mốc neo cho `.price-toolbar` ở trang bảng giá. Từ vòng 20 đây là chiều cao PHẦN DÍNH của đầu trang, không phải cả đầu trang: đầu trang cao 142px nhưng chỉ hàng menu 56px dính lại. Bản điện thoại đặt lại ở khối ≤1150px. ⚠️ Sửa TẠI ĐÂY, đừng khai `:root{}` lần thứ hai ở dưới — LiteSpeed minify gộp selector trùng và giữ giá trị khai TRƯỚC, luật sau bị nuốt im lặng. */ --header-h:56px; --section-space:96px; --shadow-float:0 20px 48px rgba(0,44,95,.14); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--page); color:var(--text); font-family:Inter,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; } /* height:auto bắt buộc phải có: WordPress xuất , nếu CSS chỉ ghi đè chiều rộng thì trình duyệt vẫn dùng nguyên chiều cao trong HTML -> ảnh bị kéo méo và bị overflow:hidden của khung cắt mất. Các khung cần chiều cao cố định đều đã tự set height trong CSS. */ img{max-width:100%; height:auto; display:block;} a{color:inherit; text-decoration:none;} button{font-family:inherit; cursor:pointer;} a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } .num{font-variant-numeric:tabular-nums;} .wrap{max-width:var(--container); margin:0 auto; padding:0 40px;} section{padding:var(--section-space) 0;} /* ---------- chấm mạng xã hội ---------- ⚠️ `.social-dot` (số ít) CÒN SỐNG ở chân trang qua hnt_social_dots(). `.social-dots` (số nhiều — thẻ bọc) đã xoá cùng thanh navy ở vòng 20. Chân trang dùng thẻ bọc `.footer-social`, không phải `.social-dots`. Khác nhau đúng một chữ 's', xoá nhầm là vỡ chân trang. */ .social-dot{width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff;} /* 🔴 VÒNG 19 — nền Facebook hạ từ #1877F2 xuống #166FE5. Trả chữ về trắng đặc vẫn CHƯA đủ: đo được chữ "f" trắng trên #1877F2 chỉ 4,23:1, dưới mốc 4,5:1. Nền xanh Facebook quá sáng, không có màu chữ nào cứu được — trắng đã là màu sáng nhất có thể. Nên phải hạ chính cái nền. #166FE5 là màu hover chính thức của Facebook nên vẫn đúng nhận diện thương hiệu, mắt thường gần như không phân biệt được, mà chữ lên 4,73:1. ⚠️ Sửa TẠI CHỖ trong dòng khai gốc, không thêm luật `.social-dot.fb{}` thứ hai — LiteSpeed minify gộp selector trùng và giữ giá trị khai TRƯỚC. ℹ️ Zalo #0068FF đo được 4,75:1 và TikTok #111 được 18,88:1 → ĐỂ NGUYÊN, không đụng vào thứ đang đạt. */ .social-dot.zalo{background:#0068ff;} .social-dot.fb{background:#166fe5;} .social-dot.tiktok{background:#111;} .social-dot.yt{background:#ff0000;} /* ---------- header ---------- */ /* 🔴 `top:-86px` KHÔNG phải số bừa. Khách chọn "chỉ hàng menu dính". Cách hiển nhiên là cho `.hd-nav` tự sticky — NHƯNG SAI: phần tử sticky chỉ dính trong lúc THẺ BAO NGOÀI còn trong khung nhìn, nên cuộn quá 142px là thẻ header ra khỏi màn và hàng menu rời ra theo. Đó là giới hạn cố hữu của `position:sticky`. 🔴🔴 VÀ ĐÂY LÀ LÝ DO KHÔNG GÕ THẺ ĐÓ KÈM DẤU NHỌN MỞ. cPanel khớp theo TIỀN TỐ "dấu-nhọn-mở + h-e-a-d", nên CẢ thẻ head LẪN thẻ header đều làm nó tưởng file này là tài liệu HTML và chèn thẻ charset vào lúc ĐỌC → dư 22 byte → deploy.js từ chối đẩy cả file CSS. Đã đo: các thẻ khác trong chú thích file này (select · details · button · table · summary · section…) KHÔNG dính, chỉ mỗi tiền tố đó. ⚠️ Kể cả khi đang VIẾT CẢNH BÁO về nó cũng đừng gõ dạng có dấu nhọn — vòng 21 tôi gõ vào chính đoạn này và tự kích hoạt lại cái bẫy mình vừa mô tả. Lỡ dính thì: node qa/day-file-cpanel-sua.js assets/css/main.css Cách chắc: cho CẢ header dính nhưng kéo lên đúng chiều cao hàng logo, nên chỉ phần cuối còn trong khung nhìn: 142 − 86 = 56px = đúng hàng menu. ⚠️ Đổi chiều cao hàng logo là phải đổi CẢ BA: `.hd-brand .wrap{height:85px}` · −86px · `--header-h:56px`. */ header.site-header{position:sticky; top:-86px; background:#fff; z-index:100;} .brand{display:flex; align-items:center; gap:12px; min-width:0;} .brand .hlogo{height:20px; width:auto; display:block; flex-shrink:0;} nav.main-menu ul{display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0;} nav.main-menu a{font-size:14.5px; font-weight:600; color:var(--text); position:relative; padding:8px 0; display:block;} nav.main-menu li.current-menu-item > a, nav.main-menu li.current_page_item > a{color:var(--primary);} nav.main-menu li.current-menu-item > a::after, nav.main-menu li.current_page_item > a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--primary); } /* ══ HIỆU ỨNG RÊ CHUỘT / CHẠM CHO THANH MENU — 22/08/2026 ═══════════════════ Anh Vũ gửi ảnh thanh menu: "thêm hiệu ứng chạm vào các mục". Trước đó chỉ mục ĐANG MỞ có gạch chân, rê qua các mục khác thì không có gì đổi nên khách không biết chúng bấm được. Anh Vũ chọn kiểu A: gạch chân mọc từ giữa ra hai bên. 🔴 PHẢI GIỚI HẠN `> ul > li >`, ĐỪNG DÙNG `nav.main-menu a`. Luật chung đó bắt CẢ 11 link xe trong hộp thả xuống của "Sản Phẩm", mà chúng đã có hiệu ứng riêng (`nav.main-menu .sub-menu a:hover` — đổi nền). Hai hiệu ứng chồng nhau trên cùng một link thì gạch chân chạy bên trong ô nền, nhìn rối. 🔴 DÙNG `::before`, KHÔNG DÙNG `::after`. `::after` đã là gạch chân TĨNH của mục đang mở ngay trên đây. Ghi đè nó là mục đang mở mất dấu khi rê chuột qua mục khác — tức là làm hỏng thứ đang chạy đúng. ⚪ Mục đang mở thì tắt hẳn `::before`: nó đã có gạch chân tĩnh cùng vị trí cùng màu, chạy thêm một lớp nữa chỉ tốn công vẽ mà mắt không phân biệt được. 📱 TRÊN ĐIỆN THOẠI KHÔNG CÓ CHUYỆN RÊ CHUỘT. Ngón tay chạm thì `:hover` hoặc không bắn, hoặc bắn rồi DÍNH LẠI cho tới khi chạm chỗ khác. Nên phản hồi cho chạm đi bằng `:active` (đổi màu chữ) chứ không bám vào `:hover`. */ nav.main-menu > ul > li > a::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--primary); transform:scaleX(0); transform-origin:center; } @media (prefers-reduced-motion: no-preference){ nav.main-menu > ul > li > a::before{transition:transform .22s ease-out;} } nav.main-menu > ul > li > a:hover::before, nav.main-menu > ul > li > a:focus-visible::before{transform:scaleX(1);} nav.main-menu > ul > li > a:active{color:var(--primary);} /* Mục đang mở đã có gạch chân tĩnh — không vẽ chồng thêm lớp động. */ nav.main-menu > ul > li.current-menu-item > a::before, nav.main-menu > ul > li.current_page_item > a::before{display:none;} .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; border-radius:var(--radius-btn); font-weight:700; font-size:14.5px; padding:0 24px; border:none; transition:background .2s ease-out, transform .2s ease-out, box-shadow .2s ease-out; cursor:pointer;} .btn-primary{background:var(--primary); color:#fff;} .btn-primary:hover{background:var(--primary-2); transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,44,95,.22);} .btn-outline{background:#fff; color:var(--primary); border:1.5px solid var(--border);} .btn-outline:hover{border-color:var(--primary); transform:translateY(-2px); box-shadow:0 8px 18px rgba(15,23,42,.08);} .btn svg{width:16px; height:16px;} .btn:active{transform:translateY(0);} .btn-lg{height:60px; padding:0 40px; font-size:16px;} .hamburger{display:none; flex-direction:column; gap:4px; background:none; border:none; padding:8px; cursor:pointer;} .hamburger span{width:22px; height:2px; background:var(--primary);} /* ========================================================================== VÒNG 20 — ĐẦU TRANG HAI HÀNG (logo lớn ở trên, menu + Gọi ngay ở dưới) Khách duyệt qua mockup. Ba quyết định: bỏ thanh navy · chỉ hàng menu dính · điện thoại bỏ nút Gọi ngay, chỉ logo + tên đại lý. 🔴 TOÀN BỘ BỐ CỤC HAI HÀNG KHOANH TRONG `@media (min-width:1151px)`. Cố ý: menu trượt của điện thoại (khối ≤1150px, dòng ~1220 và ~1364) đã chỉnh qua nhiều vòng và rất dễ vỡ. Khoanh thế này thì dù luật máy tính có sai cũng KHÔNG với xuống được bản điện thoại. 🔴🔴 ĐỪNG VIẾT THẺ HTML NGUYÊN VĂN VÀO CHÚ THÍCH CỦA FILE NÀY. Vòng 20 tôi gõ thẻ mở đầu phần đầu tài liệu HTML vào đây, thế là cPanel tưởng `main.css` là tài liệu HTML và chèn thẻ charset vào lúc ĐỌC — đọc về dư đúng 22 byte, `deploy.js` từ chối đẩy CẢ FILE CSS vì không sao lưu được. Một chữ trong chú thích khoá luôn đường đẩy tự động của file quan trọng nhất theme, và chỉ lộ ra ở lần đẩy SAU. → Muốn nhắc tới thẻ nào thì viết bằng lời, đừng gõ dấu ngoặc nhọn. → Nếu lỡ dính: `node qa/day-file-cpanel-sua.js assets/css/main.css`. ⚪ Vòng 21 đã dọn xong CSS chết của vòng này (`.topbar` · `.header-inner` · `.header-right` · `.icon-btn` · `.header-search` · `.brand .divider` · `.brand .cityname`) và gỡ hai khoá `:has(.hd-nav)` — markup đã ổn định nên không cần chúng nữa. ========================================================================== */ .hd-brand{background:#fff; border-bottom:1px solid var(--border);} .hd-nav{background:var(--bg-2); border-bottom:1px solid var(--border);} /* Tên đại lý: #003A70 là ĐÚNG màu xanh của chữ HYUNDAI trong file logo SVG — KHÔNG phải `--primary` (#002C5F) dùng ở nút và tiêu đề. Đo được 11,42:1 trên nền trắng. Hai màu này gần nhau nhưng khác nhau, đừng gộp làm một. */ .dealer-name{margin:0; font-weight:800; color:#003A70; letter-spacing:-.01em; white-space:nowrap;} @media (min-width:1151px){ /* 85 + 1px viền = hàng 86px · 55 + 1px viền = hàng 56px · tổng 142px. Viền nằm trên `.hd-brand`/`.hd-nav` chứ không trên `.wrap`, nên nó CỘNG THÊM vào chiều cao hàng. Lần đo đầu tôi để 86/56 và ra 87/57/144 — lệch 1px mỗi hàng. Ba con số 85 · 55 · `top:-86px` · `--header-h:56px` buộc phải khớp nhau. */ .hd-brand .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; height:85px;} .hd-brand .brand .hlogo{height:34px;} .dealer-name{font-size:28px;} .hd-nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; height:55px;} /* Mục menu cao đúng bằng hàng để vùng bấm phủ kín, và đệm ngang thay cho `gap` — vạch ngăn `|` phải nằm CHÍNH GIỮA hai mục, mà `gap` thì không có chỗ bám. */ .hd-nav nav.main-menu > ul{gap:0;} .hd-nav nav.main-menu > ul > li > a{height:56px; padding:0 20px; display:flex; align-items:center; font-size:15px; color:var(--primary);} .hd-nav nav.main-menu > ul > li + li::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:15px; background:#C7D2E0;} /* Chỉ vạch giữa các mục CẤP MỘT. Không có `> ul >` thì menu con của "Sản Phẩm" cũng mọc vạch giữa 11 dòng xe. */ /* Nút cao 42px chứ không phải 48px của `.btn`: hàng menu chỉ cao 56px, để 48px thì trên dưới còn 4px, nhìn như nút bị nhét. */ .hd-nav .header-call-btn{height:42px; padding:0 22px;} } @media (max-width:1150px){ /* Đầu trang điện thoại: logo trên, tên đại lý dưới, hamburger bên phải trải hai hàng. Dùng lưới chứ không dùng flex-wrap — với flex-wrap thì hamburger bị đẩy xuống hàng thứ ba khi tên đại lý chiếm trọn bề ngang. */ /* Cùng lý do `:has()` như khối máy tính — markup cũ chạy CSS mới thì không đổi gì. */ html:has(.hd-nav){--header-h:75px;} header.site-header:has(.hd-nav){top:0;} /* một hàng thì không phải kéo lên */ /* Đệm 6px, không phải 12px: `.brand` đã bị `min-height:44px` của bản vá vùng chạm (dòng ~1578) ép cao 44px cho logo 19px, tức bên trong đã sẵn ~12px thở mỗi bên. Để 12px nữa là đầu trang lên 91px, trong khi bản cũ chỉ 72px. Với 6px thì ra 75px — hai hàng chữ mà chỉ dày hơn bản cũ 3px. */ .hd-brand .wrap{display:grid; grid-template-columns:1fr auto; align-items:center; padding-top:6px; padding-bottom:6px; row-gap:1px;} .brand{grid-column:1; grid-row:1;} /* 🔴 Ba lớp `.hd-brand .brand .hlogo` là BẮT BUỘC, không phải viết thừa. Luật `.brand .hlogo{height:16px}` ở khối `@media (max-width:414px)` (dòng ~2105) NGANG ĐIỂM (0,2,0) với `.hd-brand .hlogo` và đứng SAU nên nó thắng — đo ra logo 16px chứ không phải 19px như khai. Ba lớp (0,3,0) mới vượt được. ⚪ Luật 2105 đó vốn là bản vá RC12 cho chữ "NHA TRANG" tràn ra đè nút menu. Chữ đó nay đã bỏ khỏi markup nên lý do của nó KHÔNG CÒN — vòng sau dọn cùng `.brand .cityname` và các luật chết khác. */ .hd-brand .brand .hlogo{height:19px;} /* line-height 1.25 thay vì 1.5 kế thừa từ body: tiết kiệm 4px chiều cao mà một dòng chữ đơn thì không cần giãn dòng. */ .dealer-name{grid-column:1; grid-row:2; font-size:13.5px; line-height:1.25;} .hamburger{grid-column:2; grid-row:1 / span 2; justify-self:end;} /* 🔴 KHÔNG dùng `display:none` cho `.hd-nav`. `nav.main-menu` nằm BÊN TRONG nó, và menu trượt là `position:fixed` — cha `display:none` thì con fixed cũng biến mất, tức bấm hamburger ra menu trống. Thu về cao 0 thì con fixed vẫn thoát ra được (không có `overflow:hidden` ở đâu trên đường đi). */ .hd-nav, .hd-nav .wrap{height:0; padding-top:0; padding-bottom:0; border:0; background:transparent;} .hd-nav .header-call-btn{display:none;} /* khách bỏ; thanh dính đáy đã có nút gọi */ } /* ---------- hero ---------- */ .hero{position:relative; background:linear-gradient(125deg,#ffffff 0%,#f4f8fc 28%,#e2edf9 60%,#c5dcf1 100%); overflow:hidden;} .hero::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 62% 58% at 80% 40%, rgba(0,44,95,.13) 0%, rgba(0,44,95,0) 70%); pointer-events:none;} .hero::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 40% 30% at 15% 15%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 70%); pointer-events:none;} .hero-inner{position:relative; display:grid; grid-template-columns:.92fr 1.18fr; align-items:center; min-height:740px; padding:80px 0; gap:24px;} .hero-arrow{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; z-index:5;} .hero-arrow.left{left:16px;} .hero-arrow.right{right:16px;} .hero-arrow svg{width:18px; height:18px; color:var(--primary);} /* gap 18px, không phải 7px: xem ghi chú vùng chạm ở khối chấm tròn của hero. */ /* VÒNG 16 — gap 18px → 32px. Xem lý do đầy đủ ở khối `.hero-dots button` phía dưới: vùng chạm phải đủ 44px, mà công thức bắt buộc là nới×2 ≤ gap. */ .hero-dots{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:32px; z-index:5;} .hero-dots span{width:12px; height:12px; border-radius:50%; background:#c9d6e6;} .hero-dots span.active{background:var(--primary); width:30px; border-radius:6px;} .hero-text h1{font-size:49px; line-height:1.18; font-weight:800; color:var(--primary); margin:0 0 20px; letter-spacing:-.01em; text-wrap:balance;} .hero-text p{font-size:17px; color:var(--text-2); margin:0 0 6px; line-height:1.6;} .hero-cta{display:flex; gap:16px; margin:32px 0 44px; flex-wrap:wrap;} .hero-cta .btn{height:60px; padding:0 40px; font-size:16px;} .hero-highlights{display:flex; gap:40px; flex-wrap:wrap;} .hh{display:flex; align-items:flex-start; gap:14px; padding:8px; margin:-8px; border-radius:14px; transition:background .2s ease-out, transform .2s ease-out;} .hh:hover{background:rgba(0,44,95,.05); transform:translateY(-2px);} .hh-icon{width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .hh-icon svg{width:21px; height:21px;} .hh .t1{font-size:14px; font-weight:700; color:var(--text);} .hh .t2{font-size:12.5px; color:var(--text-2); margin-top:2px;} .hero-car{position:relative; display:flex; justify-content:center; align-items:center; height:100%; min-height:540px;} .hero-car::before{content:""; position:absolute; inset:6% 2%; border-radius:24px; z-index:0; background:radial-gradient(ellipse at 50% 30%,#f2f6fb 0%,#e2ecf6 55%,#cfe0f0 100%);} .hero-car::after{content:""; position:absolute; left:50%; bottom:14%; transform:translateX(-50%); z-index:0; width:56%; height:26px; background:radial-gradient(ellipse, rgba(0,44,95,.3) 0%, rgba(0,44,95,0) 72%);} /* width:130% trước đây là để bù cho ảnh cũ có nhiều lề trắng quanh xe. Ảnh xe nay đã chuẩn hóa (xe chiếm 86% khung 4:3) nên 100% là vừa khít — 130% sẽ đẩy xe tràn khỏi hero và bị cắt. */ .hero-car img{width:100%; max-width:860px; aspect-ratio:4/3; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 36px 40px rgba(0,44,95,.25)); animation:float 6s ease-in-out infinite;} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @media (prefers-reduced-motion:reduce){.hero-car img{animation:none;}} /* ---------- filter (floating search panel) ---------- */ .filter-wrap{position:relative; z-index:10;} .filter-card{background:#fff; box-shadow:var(--shadow-float); border-radius:var(--radius-card); padding:36px 40px; margin-top:-64px; position:relative;} .filter-title{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--primary); letter-spacing:.04em; margin-bottom:20px;} .filter-title svg{width:16px; height:16px;} .filter-grid{display:grid; grid-template-columns:repeat(4,1fr) auto; gap:16px; align-items:end;} .filter-field label{display:block; font-size:13.5px; color:var(--text-2); font-weight:600; margin-bottom:10px;} /* `--fs-pad-l` = chỗ dành cho icon bên trái. Khai thành biến vì khối mobile ẩn icon đi (`.filter-select svg.ic{display:none}`) nên chữ phải dịch lại — đổi biến ở đúng luật `.filter-select{}` của khối đó, thay vì khai `.filter-select select{}` lần thứ hai. Hai luật cùng selector là chỗ LiteSpeed minify dễ gộp nhầm và giữ giá trị khai trước. */ .filter-select{--fs-pad-l:39px; position:relative; display:flex; align-items:center; gap:9px; border:1px solid var(--border); border-radius:var(--radius-btn); height:48px; padding:0 14px; background:var(--bg-2); transition:border-color .18s ease-out;} .filter-select:hover{border-color:var(--accent);} /* Hai icon chỉ để nhìn. `pointer-events:none` để chúng không chắn ô chọn nằm dưới. */ .filter-select svg.ic{width:16px; height:16px; color:var(--text-2); flex-shrink:0; pointer-events:none;} /* 🔴 VÒNG 16 — KHỐI NÀY LÀ BẢN VÁ LỖI CHỨC NĂNG, KHÔNG PHẢI TRANG TRÍ. Bản cũ: bọc `.filter-select` cao 48px và `align-items:center`, nhưng `` là một ô flex nằm TRƯỚC mũi tên `svg.chev`, nên dải mũi tên và lề 14px bên phải không thuộc về nó. Mà mũi tên ▾ chính là chỗ người ta hay bấm nhất để mở một ô chọn. → Cách đang dùng: cho `` đã ra khỏi dòng flex, không còn đẩy mũi tên sang phải. */ .filter-select svg.chev{width:11px; height:11px; color:var(--text-2); flex-shrink:0; margin-left:auto; pointer-events:none;} .filter-search-btn{height:48px; padding:0 32px; white-space:nowrap; border-radius:var(--radius-btn); font-weight:800;} .filter-bottom{display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap;} .filter-bottom .lbl{font-size:13px; color:var(--text-2); font-weight:600; white-space:nowrap;} .chip{padding:7px 15px; border-radius:8px; background:var(--bg-2); border:1px solid var(--border); font-size:13px; font-weight:600; color:var(--text);} .chip:hover{border-color:var(--accent); color:var(--accent);} .adv-link{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--accent); display:flex; align-items:center; gap:6px;} .adv-link svg{width:15px; height:15px;} .filter-empty{text-align:center; padding:40px 0; color:var(--text-2); font-size:14.5px;} .filter-empty a{color:var(--accent); font-weight:700;} /* ---------- section head ---------- */ .section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:40px; gap:16px; flex-wrap:wrap;} .section-head h2{font-size:30px; font-weight:800; letter-spacing:-.01em; color:var(--primary); margin:0; line-height:1.25;} .section-head .eyebrow{margin-bottom:8px;} .section-head .see-all{font-size:13.5px; font-weight:700; color:var(--accent); white-space:nowrap; transition:color .18s ease-out;} .section-head .see-all:hover{color:var(--primary); text-decoration:underline; text-underline-offset:3px;} /* ---------- featured car row ---------- */ .car-row{display:flex; gap:20px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity;} .car-row::-webkit-scrollbar{height:6px;} .car-row::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px;} .car-card{flex:0 0 246px; scroll-snap-align:start; background:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-card); overflow:hidden; transition:box-shadow .3s ease-out, transform .3s ease-out; position:relative;} .car-card:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-4px);} .car-card.is-hidden{display:none;} /* Nền trắng cho khung ảnh thẻ xe — RC12. RC11 đã đổi khung ảnh lớn ở trang chi tiết xe sang trắng vì nền xanh–xám hắt sắc lên thân xe trắng và bạc. Thẻ xe thì bị bỏ quên, thành ra CÙNG một chiếc xe hiện trên hai nền khác nhau giữa trang chủ và trang chi tiết. Đổi nốt ở đây cho khớp. */ .car-img{aspect-ratio:4/3; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fff;} .car-img::before{content:""; position:absolute; left:50%; bottom:16%; transform:translateX(-50%); width:62%; height:12%; background:radial-gradient(ellipse, rgba(0,44,95,.28) 0%, rgba(0,44,95,0) 72%);} .car-img img{width:100%; height:100%; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 10px 10px rgba(0,44,95,.12)); transition:transform .35s ease-out;} .car-card:hover .car-img img{transform:scale(1.04);} /* VÒNG 18b (11/08/2026) — `.seat-badge` THAY CHO `.fav` (icon trái tim). `.fav` là `
` trang trí, KHÔNG có JavaScript nào bám vào — bấm không làm gì cả. Đã xoá cả markup lẫn hai luật CSS của nó: CSS không khớp markup nào là thứ phiên sau đọc sẽ tưởng tính năng vẫn còn. Nhãn số chỗ đặt đúng chỗ icon cũ (góc trên phải) nên KHÔNG chạm dải "HOT" chéo góc (dải đó ở góc trên TRÁI, `left:-26px`). Navy trên trắng 94% cho ~13:1. */ .seat-badge{position:absolute; top:10px; right:10px; z-index:2; background:rgba(255,255,255,.94); color:var(--primary); font-size:11.5px; font-weight:700; letter-spacing:.01em; line-height:1; padding:5px 9px; border-radius:7px; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.12);} .car-body{padding:18px 20px 22px;} .car-name{font-size:17px; font-weight:800; margin:0 0 4px;} .car-spec{font-size:12px; color:var(--text-2); margin-bottom:8px;} .car-price-row{display:flex; align-items:baseline; gap:8px; margin-bottom:10px; flex-wrap:wrap;} .car-price{font-size:19px; font-weight:800; color:var(--primary); letter-spacing:-.01em;} .car-price-old{font-size:12px; color:var(--price-old); text-decoration:line-through;} /* Giá dự kiến của xe chưa ra mắt. Nhỏ hơn giá thật (19px → 14,5px) vì chuỗi dài gấp đôi một con số, mà thẻ ở lưới 2 cột chỉ rộng 166px. Cũng cố ý KHÔNG dùng class .num: font bảng số làm chữ "Dự kiến" trông như một con số. */ .car-price--sap{font-size:14.5px; font-weight:800; color:var(--primary); line-height:1.35;} /* ---------- DẢI XE SẮP RA MẮT (trang xe) — 21/08/2026 ---------- Đứng đúng chỗ thẻ giá thường đứng, nên phải nặng ký ngang thẻ giá: cùng bo góc, cùng lề. Nền navy đặc để mắt rơi vào đây trước, vì nội dung của nó là một lời đính chính ("chưa có giá") và lời đính chính đọc sau con số thì vô nghĩa. */ .srm-band{background:var(--primary); color:#fff; border-radius:var(--radius-card); padding:20px 22px; margin:18px 0 0;} .srm-nhan{display:inline-block; font-size:11px; font-weight:900; letter-spacing:.1em; color:#E5B94E; box-shadow:inset 0 0 0 1px #E5B94E; padding:3px 9px; border-radius:5px; margin-bottom:11px;} .srm-chinh{font-size:15.5px; font-weight:700; line-height:1.5; margin:0;} /* #C8D6E8 trên #002C5F = 9,7:1. KHÔNG hạ xuống rgba(255,255,255,.7): trên nền navy này mức đó chỉ còn 4,2 và trượt chuẩn ở cỡ chữ 13,5px. */ .srm-phu{font-size:13.5px; line-height:1.6; color:#C8D6E8; margin:9px 0 0;} .srm-phu b{color:#fff;} .srm-band .btn{margin-top:16px;} /* Nút xanh mặc định chìm nghỉm trên nền navy — đổi sang nền trắng chữ navy. */ .srm-band .btn-primary{background:#fff; color:var(--primary); border-color:#fff;} .srm-band .btn-primary:hover{background:#E5B94E; color:#00203F; border-color:#E5B94E;} /* Khối thay chỗ bảng giá 4 cột ở trang Bảng giá xe, cho xe chưa ra mắt. Nền vàng rất nhạt + vạch vàng bên trái: đủ để mắt biết "dòng này khác mấy dòng kia" mà không hét lên như dải navy ở trang xe — ở đây nó đứng cạnh 10 khối giá thật, nổi quá thì phá nhịp cả trang. */ .price-srm{background:#FDFAF1; border-left:3px solid var(--gold); border-radius:0 10px 10px 0; padding:16px 18px; margin-top:4px;} .price-srm p{font-size:13.5px; line-height:1.65; color:var(--text-2); margin:0 0 8px;} .price-srm p:last-child{margin-bottom:0;} .price-srm b{color:var(--text);} /* =========================================================================== DẢI QUẢNG CÁO XE SẮP RA MẮT (.pl-bn) — dựng theo ảnh mẫu anh Vũ gửi 21/08/2026 =========================================================================== Dùng ở HAI nơi, cùng một khối markup: trang chủ (ngay dưới đầu trang) và đầu bài chương trình đặt cọc. Xem hnt_sap_ra_mat_banner() trong inc/sap-ra-mat.php. 🔴🔴 MỌI CỠ CHỮ VÀ KHOẢNG CÁCH ĐO BẰNG `cqw`, KHÔNG PHẢI `px`. `container-type:inline-size` biến chính khối này thành mốc đo, nên 1cqw = 1% bề ngang của nó. Ảnh mẫu rộng 1727px, nên một chữ 105px trong ảnh = 105/1727 = 6,08cqw. Nhờ vậy khối giữ ĐÚNG tỉ lệ ảnh mẫu ở mọi bề ngang, không cần một điểm ngắt nào cho quãng 820px tới 1920px. Đổi bất kỳ dòng nào sang px là vỡ tỉ lệ ở khổ giữa mà khổ 1440 vẫn trông đúng, tức là kiểu lỗi rất khó thấy. 🔴 Nền đêm, vòng sáng, đường chân trời, sàn ướt: tất cả vẽ bằng CSS/SVG, KHÔNG tải thêm byte ảnh nào. Chỉ chiếc xe là ảnh thật (nền trong suốt sẵn). =========================================================================== */ #sap-ra-mat{padding:40px 0 8px;} .pl-bn{container-type:inline-size; position:relative; isolation:isolate; aspect-ratio:1727/924; width:100%; overflow:hidden; border-radius:18px; box-shadow:0 18px 48px rgba(2,10,24,.34); background: radial-gradient(120% 90% at 62% 34%, rgba(24,64,120,.55) 0%, transparent 60%), linear-gradient(155deg,#0C2247 0%,#081A35 42%,#040E1F 100%);} /* Vòng sáng lớn sau xe. Hai lớp: viền sáng mảnh + quầng toả. */ .pl-bn-vong{position:absolute; z-index:0; left:12cqw; top:6cqw; width:40cqw; height:40cqw; border-radius:50%; border:0.16cqw solid rgba(255,214,140,.85); box-shadow:0 0 3cqw rgba(255,201,110,.5), inset 0 0 4cqw rgba(255,201,110,.22); background:radial-gradient(circle, rgba(255,208,128,.16) 0%, transparent 62%);} /* Đường chân trời thành phố, chìm sau vòng sáng và sau xe. */ .pl-bn-pho{position:absolute; z-index:0; left:0; right:0; bottom:19cqw; width:100%; height:14cqw; fill:rgba(120,168,225,.17);} /* Mặt sàn ướt: một vệt sáng ngang cộng bóng đổ dưới bánh xe. */ .pl-bn-san{position:absolute; z-index:0; left:0; right:0; bottom:0; height:26cqw; background: radial-gradient(60% 42% at 28% 8%, rgba(150,196,255,.20) 0%, transparent 70%), linear-gradient(180deg, rgba(10,26,52,0) 0%, rgba(6,16,34,.85) 55%, #05101F 100%);} /* ---------- ruy băng vàng góc trái trên ---------- */ .pl-bn-ruy{position:absolute; z-index:3; left:3.4cqw; top:0; width:8.1cqw; padding:1.5cqw 0 2.3cqw; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.35cqw; color:#3A2A05; background:linear-gradient(160deg,#F7DC94 0%,#D8A93C 48%,#B9862A 100%); /* Đuôi cờ khía chữ V ở đáy, đúng như ảnh mẫu. */ clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%); box-shadow:0 .5cqw 1.4cqw rgba(0,0,0,.34);} .pl-bn-ruy-ic svg{width:2.5cqw; height:2.5cqw; stroke-width:1.6;} .pl-bn-ruy b{font-size:.98cqw; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.1;} .pl-bn-ruy i{font-size:1.34cqw; font-weight:900; font-style:normal; letter-spacing:.04em; text-transform:uppercase; line-height:1.1;} /* ---------- chiếc xe ---------- */ .pl-bn-xe{position:absolute; z-index:2; left:2cqw; bottom:12cqw; width:47cqw;} .pl-bn-xe img{display:block; width:100%; height:auto; filter:drop-shadow(0 2.4cqw 2.2cqw rgba(0,0,0,.55));} /* ---------- cột chữ bên phải ---------- */ /* 🔴 NHỊP DỌC ĐO TỪ TOẠ ĐỘ THẬT TRONG ẢNH MẪU (ảnh rộng 1727px), không ước lượng. Chia mỗi toạ độ cho 1727 ra cqw: nhãn 5,5 · Hyundai 8,98 · PALISADE 12,4 · Hybrid 18,8 · địa điểm 22,9 · giá 27,2 · nút 36,5 · dải chân 43,1. Bản đầu để top:7cqw và các lề rộng hơn, cộng dồn lại đẩy nút xuống 44cqw — tức NẰM DƯỚI dải chân, và vì dải chân đứng sau trong DOM ở cùng z-index nên nó phủ lên nút. Nhìn ảnh chụp mới thấy; mọi phép đo kích thước đều báo đạt. */ .pl-bn-chu{position:absolute; z-index:3; left:53.5cqw; right:3cqw; top:5.5cqw;} .pl-bn-pill{display:inline-block; padding:.55cqw 1.5cqw; border-radius:.5cqw; border:.1cqw solid #E7C778; color:#F2D79A; font-size:1.28cqw; font-weight:800; letter-spacing:.22em; text-transform:uppercase;} .pl-bn-hang{margin:.8cqw 0 0; color:#fff; font-size:3.3cqw; font-weight:800; letter-spacing:-.01em; line-height:1;} /* Chữ vàng chuyển sắc. -webkit-background-clip vẫn cần cho Safari. */ .pl-bn-ten{margin:.1cqw 0 0; font-size:6.4cqw; font-weight:900; font-style:italic; letter-spacing:.005em; line-height:1; background:linear-gradient(178deg,#FFF4D2 6%,#F3D189 32%,#C9962F 62%,#F6DFA8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 .18cqw .3cqw rgba(0,0,0,.45));} /* Đời xe, hai bên có vạch kẻ như ảnh mẫu. */ .pl-bn-doi{display:flex; align-items:center; gap:1cqw; margin:.15cqw 0 0; color:#E8F0FB; font-size:2.7cqw; font-weight:700; line-height:1.1;} .pl-bn-doi::before,.pl-bn-doi::after{content:""; height:.1cqw; flex:1 1 auto; background:linear-gradient(90deg,transparent,rgba(150,196,255,.75),transparent);} .pl-bn-doi span{flex:0 0 auto;} /* ---------- dòng địa điểm ---------- */ .pl-bn-noi{display:flex; align-items:center; gap:.8cqw; margin:1.1cqw 0 0; padding:.62cqw .62cqw .62cqw 1.1cqw; border-radius:.75cqw; background:rgba(10,30,62,.62); border:.06cqw solid rgba(126,170,228,.3);} .pl-bn-noi-ic{flex:none; color:#F2C868;} .pl-bn-noi-ic svg{width:1.9cqw; height:1.9cqw; stroke-width:1.8;} /* 1,42cqw chu khong phai 1,55 */ .pl-bn-noi-t{flex:1 1 auto; color:#EAF1FA; font-size:1.42cqw; font-weight:600; white-space:nowrap;} .pl-bn-ngay{flex:none; padding:.5cqw 1.05cqw; border-radius:.5cqw; color:#3A2A05; background:linear-gradient(160deg,#F7DC94,#D8A93C); font-size:1.42cqw; font-weight:900; white-space:nowrap;} /* ---------- giá ---------- */ .pl-bn-gia{display:flex; align-items:center; gap:1.9cqw; margin:1.2cqw 0 0;} .pl-bn-gia-so{flex:none;} .pl-bn-gia-so span{display:block; color:#E8F0FB; font-size:1.55cqw; font-weight:700; line-height:1.2;} .pl-bn-gia-so strong{display:block; margin-top:.15cqw; font-size:4.5cqw; font-weight:900; line-height:1; background:linear-gradient(176deg,#FFF4D2 8%,#F0CB80 46%,#CE9C35 100%); -webkit-background-clip:text; background-clip:text; color:transparent;} /* Vạch dọc ngăn cách, vẽ bằng viền trái của đoạn chữ. */ .pl-bn-gia-chu{flex:1 1 auto; margin:0; padding-left:1.9cqw; border-left:.08cqw solid rgba(126,170,228,.38); color:#D3E0F2; font-size:1.35cqw; line-height:1.62;} .pl-bn-gia-chu b{color:#F2D79A;} /* ---------- nút ---------- */ .pl-bn-nut{display:inline-flex; align-items:center; gap:1.2cqw; margin-top:2.9cqw; padding:.95cqw 1cqw .95cqw 2.4cqw; border-radius:99px; border:.11cqw solid #E7C778; color:#F6E3B4; font-size:1.6cqw; font-weight:800; letter-spacing:.02em; text-transform:uppercase; background:rgba(255,214,140,.08); box-shadow:0 0 1.4cqw rgba(240,203,128,.28); transition:background .18s ease-out, color .18s ease-out, box-shadow .18s ease-out;} .pl-bn-nut i{display:inline-flex; align-items:center; justify-content:center; flex:none; width:2.6cqw; height:2.6cqw; border-radius:50%; color:#3A2A05; background:linear-gradient(160deg,#F7DC94,#D8A93C);} .pl-bn-nut i svg{width:1.5cqw; height:1.5cqw; stroke-width:2.2;} .pl-bn-nut:hover{background:linear-gradient(160deg,#F7DC94,#D8A93C); color:#3A2A05; box-shadow:0 0 2.2cqw rgba(240,203,128,.5);} /* ---------- dải chân ---------- */ .pl-bn-day{position:absolute; z-index:3; left:3.4cqw; right:3.4cqw; bottom:3cqw; display:flex; align-items:stretch; gap:1.4cqw;} .pl-bn-camket{flex:1 1 auto; display:flex; align-items:center; justify-content:space-around; gap:1cqw; margin:0; padding:1.1cqw 1.4cqw; list-style:none; border-radius:.9cqw; background:rgba(11,32,64,.62); border:.06cqw solid rgba(126,170,228,.26);} .pl-bn-camket li{display:flex; align-items:center; gap:.85cqw;} .pl-bn-ck-ic{flex:none; display:inline-flex; align-items:center; justify-content:center; width:2.9cqw; height:2.9cqw; border-radius:50%; color:#F2C868; border:.07cqw solid rgba(242,200,104,.5); background:rgba(242,200,104,.1);} .pl-bn-ck-ic svg{width:1.6cqw; height:1.6cqw;} .pl-bn-ck-t{display:flex; flex-direction:column; line-height:1.18;} .pl-bn-ck-t b{color:#EAF1FA; font-size:1.12cqw; font-weight:700; text-transform:uppercase; letter-spacing:.02em;} .pl-bn-ck-t i{color:#F2D79A; font-size:1.26cqw; font-weight:900; font-style:normal; text-transform:uppercase;} .pl-bn-lienhe{flex:none; display:flex; align-items:center; gap:1.2cqw; padding:.9cqw 1.6cqw; border-radius:.9cqw; background:#fff; box-shadow:0 .5cqw 1.4cqw rgba(0,0,0,.26);} .pl-bn-lh{display:flex; align-items:center; gap:.8cqw;} .pl-bn-lh-ic{flex:none; display:inline-flex; align-items:center; justify-content:center; width:2.6cqw; height:2.6cqw; border-radius:50%;} .pl-bn-lh-goi{background:var(--primary); color:#fff;} .pl-bn-lh-goi svg{width:1.4cqw; height:1.4cqw;} .pl-bn-lh-zalo{background:#0068FF; color:#fff; font-size:.92cqw; font-weight:900; letter-spacing:.01em;} .pl-bn-lh-t{display:flex; flex-direction:column; line-height:1.2;} .pl-bn-lh-t b{color:#5A6472; font-size:1.05cqw; font-weight:600;} /* Số điện thoại và chữ "Tư vấn ngay" phải đậm ngang nhau — chúng là hai lối liên hệ song song, cho một bên nổi hơn là khách chỉ thấy một lối. */ .pl-bn-lh-t i{color:var(--primary); font-size:1.5cqw; font-weight:900; font-style:normal; text-transform:uppercase;} .pl-bn-lh-vach{width:.06cqw; align-self:stretch; background:#D8DEE7;} /* ---------- điện thoại: bỏ tỉ lệ ảnh mẫu, xếp dọc ---------- */ /* 🔴 820px chứ không phải 768px. Ở 800px thì cột chữ bên phải chỉ còn ~370px mà chữ PALISADE cỡ 6,4cqw đã là 51px, hai thứ bắt đầu chen nhau. Đo bằng cách thu dần bề ngang chứ không lấy điểm ngắt quen tay. */ @media (max-width:820px){ /* ========================================================================= BẢN ĐIỆN THOẠI DỰNG LẠI 21/08/2026 — anh Vũ: "trên đt thì mất cân đối quá". ========================================================================= Bản đầu chỉ là bản máy tính xếp dọc lại, và nó hỏng bốn chỗ ĐO ĐƯỢC ở 390px: 1. cao 993px cho MỘT dải, dài gấp rưỡi màn hình 2. số điện thoại gãy làm hai dòng: "087 687 / 6979" 3. "TƯ VẤN NGAY" và "GIAO XE ĐỢT ĐẦU" cũng gãy dòng 4. viên ngày "29 & 30/8" chiếm trọn một dòng riêng, thừa một khoảng trống 🔴 Bài học: xếp dọc KHÔNG PHẢI là thiết kế cho điện thoại. Phải định lại thứ tự quan trọng và cắt bớt, chứ không phải hạ cỡ chữ rồi xuống dòng. ⚪ Mốc nhắm: dải cao dưới 640px ở khổ 390, và KHÔNG chữ nào gãy dòng giữa từ. ========================================================================= */ #sap-ra-mat{padding:22px 0 4px;} .pl-bn{aspect-ratio:auto; container-type:normal; border-radius:14px; padding:0 0 15px;} /* Nền: vòng sáng nhỏ lại và nâng lên ôm lấy xe, đường chân trời hạ xuống ngang bánh. */ /* 🔴 left:22% chứ không phải 12% — SỬA 22/08/2026, đi CẶP với .pl-bn-xe bên dưới. 12% đặt tâm vòng ở 40% bề ngang dải. Xe thì bị margin-left:auto ẩn sát mép phải, nên tâm xe rơi vào 64% — lệch 82px, đo được. Anh Vũ nhìn trên iPhone thật: "chiếc xe đang bị lệch lên góc". → 22% đưa tâm vòng về đúng 50%, và xe cũng đặt tâm 50%. Hai thứ chung một tâm, hai bên chừa đều 53px. ⚠️ Đổi một trong hai con số mà quên con số kia là lệch trở lại. */ .pl-bn-vong{left:22%; top:26px; width:56%; height:auto; aspect-ratio:1; border-width:1px; box-shadow:0 0 20px rgba(255,201,110,.45);} .pl-bn-pho{bottom:auto; top:126px; height:56px;} .pl-bn-san{height:170px;} /* Ruy băng nhỏ hẳn: ở khổ này nó là dấu hiệu, không phải tiêu đề. */ .pl-bn-ruy{left:12px; width:56px; padding:9px 0 15px; gap:2px;} .pl-bn-ruy-ic svg{width:16px; height:16px;} .pl-bn-ruy b{font-size:6.5px; letter-spacing:.04em;} .pl-bn-ruy i{font-size:9.5px;} /* 🔴 SỬA 22/08/2026 — anh Vũ: "chỉnh chiếc xe đang bị lệch lên góc, phóng to lên 20%". Ba con số đổi, mỗi con số một việc: width 72% → 86.4% đúng +20% bề ngang. Phần XE THẬT 195px → 237px. margin-left auto → 6.8% đặt tâm ảnh vào 50% dải, trùng tâm vòng (xem .pl-bn-vong). 6.8% = 50% − 86.4%/2, tính chứ không mò. margin-bottom −22px + padding-top 18→14px lấy lại chiều cao mà cỡ ảnh mới ăn thêm. 🔑 VÌ SAO −22px KHÔNG LÀM XE CHẠM CHỮ: đọc kênh alpha của chính file ảnh ra lề trong suốt trên 12,9% · dưới 22,0% · hai bên 7,0%. Tức đáy ảnh có 45px rỗng hoàn toàn. Thu 22px vẫn còn 27px thật từ bánh xe tới viền "SẮP RA MẮT". ⚠️ Đổi sang ảnh xe khác là ba con số này phải đo lại — ảnh khác thì lề khác. ⚪ Cảnh báo cũ "72% chứ không phải 84%, ở 84% khối ảnh ăn 239px" vẫn đúng về nguyên nhân, nhưng đã xử lý được: dải chỉ cao thêm 11px (641 → 652), không phải 37px, nhờ thu chỗ rỗng ở đáy chứ không nhờ hạ cỡ xe. */ .pl-bn-xe{position:relative; z-index:2; left:auto; right:auto; top:auto; bottom:auto; width:86.4%; margin:0 auto -22px 6.8%; padding:14px 10px 0;} .pl-bn-xe img{filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));} .pl-bn-chu{position:relative; z-index:3; left:auto; right:auto; top:auto; bottom:auto; padding:2px 15px 0;} .pl-bn-pill{padding:4px 10px; border-width:1px; border-radius:5px; font-size:10px; letter-spacing:.16em;} .pl-bn-hang{margin-top:9px; font-size:21px;} .pl-bn-ten{font-size:38px;} .pl-bn-doi{gap:8px; margin-top:3px; font-size:16.5px;} .pl-bn-doi::before,.pl-bn-doi::after{height:1px;} /* 🔴 ĐẢO THỨ TỰ: NGÀY ĐỨNG TRƯỚC, CHỮ CHẢY SAU. Hai bản trước đều để ngày ở CUỐI, và cả hai đều hỏng cùng một kiểu: dòng chữ "Trưng bày tại đại lý Hyundai Nha Trang" dài 267px trong khi lòng hộp chỉ 290px, nên viên ngày 73px không đủ chỗ và rơi xuống một dòng riêng, để lại một mảng trống bên phải. Đo ở 390px mới thấy; ở 320px chữ tự gãy sớm nên lại vừa. → Đưa ngày lên ngay sau biểu tượng thì nó luôn nằm dòng đầu, còn chữ tự gãy hai dòng bên cạnh. Ngày cũng là thứ khách cần thấy trước. */ .pl-bn-noi{display:flex; flex-wrap:nowrap; align-items:center; gap:7px; margin-top:12px; padding:8px 10px; border-radius:9px; border-width:1px;} .pl-bn-noi-ic{order:1;} .pl-bn-noi-ic svg{width:15px; height:15px;} .pl-bn-ngay{order:2; flex:0 0 auto; padding:3px 8px; border-radius:5px; font-size:12px;} .pl-bn-noi-t{order:3; flex:1 1 auto; font-size:12.5px; line-height:1.35; white-space:normal;} /* Giá: nhãn trái, số phải, cùng một dòng — bản cũ xếp dọc tốn hai dòng cho hai chữ. */ /* 🔴 `flex-wrap:wrap` BẮT BUỘC. Thiếu nó thì đoạn chú thích mang `flex:1 1 100%` vẫn bị ép nằm cùng hàng với hai mảnh giá rồi co lại còn một cột chữ hẹp — phép đo kích thước vẫn đạt, chỉ nhìn ảnh mới thấy. */ .pl-bn-gia{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0 12px; margin-top:12px;} /* `display:contents` để nhãn và số thành hai con trực tiếp của hàng flex, nhờ vậy căn được theo đường chân chữ và đẩy ra hai mép. */ .pl-bn-gia-so{display:contents;} .pl-bn-gia-so span{font-size:13px;} .pl-bn-gia-so strong{margin-top:0; font-size:32px;} .pl-bn-gia-chu{order:3; flex:1 1 100%; margin-top:8px; padding:8px 0 0; border-left:0; border-top:1px solid rgba(126,170,228,.32); font-size:12.5px; line-height:1.5;} .pl-bn-nut{width:100%; justify-content:center; gap:9px; margin-top:14px; padding:11px 14px; border-width:1px; font-size:13.5px; letter-spacing:.01em;} .pl-bn-nut i{width:24px; height:24px;} .pl-bn-nut i svg{width:13px; height:13px;} .pl-bn-day{position:relative; z-index:3; left:auto; right:auto; top:auto; bottom:auto; flex-direction:column; gap:8px; margin-top:14px; padding:0 15px;} /* Bốn cam kết thành MỘT HÀNG NGANG, biểu tượng trên chữ dưới. Bản 2x2 tốn 90px chiều cao cho thứ chỉ là dòng trấn an; kiểu một hàng còn 62px mà vẫn đọc được cả bốn. Bỏ luôn dòng nhãn nhỏ phía trên (b) vì ở cỡ 9px nó không đọc được, chỉ làm rối. white-space:nowrap giữ nguyên: thiếu nó thì "giao xe đợt đầu" gãy dòng và bốn ô cao lệch nhau. */ .pl-bn-camket{flex-wrap:nowrap; justify-content:space-between; gap:4px; padding:9px 6px; border-radius:11px; border-width:1px;} .pl-bn-camket li{flex:1 1 0; flex-direction:column; align-items:center; gap:5px; min-width:0; text-align:center;} .pl-bn-ck-ic{width:26px; height:26px; border-width:1px;} .pl-bn-ck-ic svg{width:13px; height:13px;} .pl-bn-ck-t{min-width:0; align-items:center;} .pl-bn-ck-t b{display:none;} .pl-bn-ck-t i{font-size:9.5px; line-height:1.25; letter-spacing:0; white-space:nowrap;} /* 🔴🔴 BỎ HẲN TẤM LIÊN HỆ TRÊN ĐIỆN THOẠI. Site đã có ba nút nổi (gọi · Zalo · chat) bám đáy màn hình suốt mọi lúc, và ở khổ này chúng NẰM ĐÈ ĐÚNG LÊN tấm liên hệ trong dải — chụp ảnh 390px thấy nút chat che mất ô cam kết cuối. Tức là ta đang vẽ hai lần cùng một thứ, rồi hai thứ đó chồng lên nhau. Bỏ đi vừa hết chồng lấn, vừa bớt 48px chiều cao. Khổ máy tính KHÔNG bỏ: ở đó không có nút nổi nào, tấm liên hệ là đường liên hệ duy nhất trong dải. ⚠️ Nếu sau này gỡ nút nổi ở điện thoại thì phải bật lại chỗ này. */ .pl-bn-lienhe{display:none;} } /* Màn rất hẹp (dưới 360px): hạ thêm một nấc chữ lớn, kẻo PALISADE tràn mép. */ @media (max-width:359px){ .pl-bn-ten{font-size:33px;} .pl-bn-gia-so strong{font-size:30px;} .pl-bn-ck-t i{font-size:10px;} .pl-bn-lh-t i{font-size:12px;} } /* Khối này đứng ngay ĐẦU bài chương trình cọc, trên cả tiêu đề bài. */ .pl-bn-bai{margin:0 0 30px;} .tag{display:inline-block; font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; margin-bottom:10px; background:var(--orange-bg); color:var(--orange);} .tag.orange{background:var(--orange-bg); color:var(--orange);} .tag.teal{background:var(--teal-bg); color:var(--teal);} .tag.blue{background:var(--blue-bg); color:var(--blue);} .tag.green{background:var(--green-bg); color:var(--green);} /* Nhãn vàng cho tin xe sắp ra mắt (buổi trưng bày). Viền thay cho nền, đúng nếp .vbadge dòng ~906: --gold đạt 4,61 trên nền TRẮNG, còn đặt nó lên một nền vàng nhạt thì tụt xuống 4,27 và trượt chuẩn. Viền vẽ bằng box-shadow inset để thẻ không bị đội lên 1px so với mấy nhãn màu khác đứng cùng hàng. */ .tag.gold{background:#fff; color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold);} /* Không dùng var(--text-2) ở đây: #6B7280 đạt 4,83 trên nền trắng nhưng chỉ còn 4,39 trên nền xám --grey-bg. Khai riêng đúng một chỗ này thay vì hạ token dùng chung. */ .tag.grey{background:var(--grey-bg); color:#686F7C;} /* 4,59 trên --grey-bg */ .car-link{display:inline-block; font-size:13px; font-weight:700; color:var(--primary); transition:color .18s ease-out;} .car-link:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px;} /* ---------- promo banner (large, replaces the old 3-card grid) ---------- */ .promo-banner{background:linear-gradient(125deg,#0b4380 0%, var(--primary) 45%, #00142f 100%); border-radius:var(--radius-card); box-shadow:var(--shadow-card); overflow:hidden; display:grid; grid-template-columns:1fr 1fr; align-items:center; color:#fff; min-height:440px; position:relative;} .promo-banner-text{padding:56px 56px;} .promo-banner .lbl{font-size:13px; font-weight:800; letter-spacing:.1em; color:#9fc1e8; margin-bottom:18px; text-transform:uppercase;} .promo-banner .headline{font-size:22px; font-weight:700; line-height:1.3; margin:0 0 4px; color:#dce9f9;} .promo-banner .headline b{display:block; font-size:2.1em; font-weight:800; color:#fff; line-height:1.15; margin-top:4px;} .promo-banner .sub{font-size:15px; color:#cfe0f5; margin:20px 0 30px; max-width:36ch; line-height:1.6;} .promo-banner-text .btn-primary{background:#fff; color:var(--primary); height:56px; padding:0 32px;} .promo-banner-text .btn-primary:hover{background:#eaf1fe; box-shadow:0 10px 24px rgba(0,0,0,.25);} .promo-banner-car{height:100%; min-height:320px; position:relative; display:flex; align-items:center; justify-content:center;} .promo-banner-car::before{content:""; position:absolute; left:50%; bottom:16%; transform:translateX(-50%); width:66%; height:16px; background:radial-gradient(ellipse, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 72%);} .promo-banner-car img{position:relative; width:94%; max-width:480px; aspect-ratio:4/3; object-fit:contain; filter:drop-shadow(0 16px 16px rgba(0,0,0,.28)); margin:0 auto;} /* Ba luật `span` này là bản cũ, markup hiện tại dùng `button` (xem khối `.promo-dots button`). Vẫn nâng theo vòng 16 để hai bản không lệch nhau — bản lệch là bẫy cho phiên sau. */ .promo-dots{position:absolute; bottom:26px; left:56px; display:flex; gap:32px;} .promo-dots span{width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.35);} .promo-dots span.active{background:#fff; width:30px; border-radius:6px;} /* ---------- tools ---------- */ .tools-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;} .tool-card{background:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:46px 34px; text-align:center; transition:box-shadow .3s ease-out, transform .3s ease-out;} .tool-icon{width:56px; height:56px; border-radius:16px; margin:0 auto 22px; display:flex; align-items:center; justify-content:center;} .tool-icon svg{width:26px; height:26px;} .tool-icon.o{background:var(--orange-bg); color:var(--orange);} .tool-icon.t{background:var(--teal-bg); color:var(--teal);} .tool-icon.b{background:var(--blue-bg); color:var(--blue);} .tool-icon.g{background:#F3E8FF; color:#9333EA;} .tool-card h4, .tool-card h3{font-size:15.5px; font-weight:700; margin:0 0 8px;} .tool-card p{font-size:13.5px; color:var(--text-2); margin:0; line-height:1.6;} /* ---------- vì sao chọn Hyundai Nha Trang ---------- */ .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:40px;} .why-card{background:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:38px 32px; transition:box-shadow .3s ease-out, transform .3s ease-out;} .why-icon{width:60px; height:60px; border-radius:16px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:24px;} .why-icon svg{width:27px; height:27px;} .why-card h3{font-size:17px; font-weight:800; margin:0 0 12px;} .why-card p{font-size:14px; color:var(--text-2); line-height:1.72; margin:0;} /* shared hover lift for the standard content cards (not the featured car cards, which lift further) */ .tool-card:hover, .why-card:hover, .news-card:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-4px);} .why-stats{display:grid; grid-template-columns:repeat(4,1fr); background:var(--primary); border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card);} .why-stats .stat{background:transparent; padding:30px 20px; text-align:center; border-right:1px solid rgba(255,255,255,.12);} .why-stats .stat:last-child{border-right:none;} .why-stats .stat .n{font-size:32px; font-weight:800; color:#fff;} .why-stats .stat .l{font-size:12px; color:#a8c2e0; text-transform:uppercase; letter-spacing:.04em; margin-top:6px;} /* ══ "ĐIỀU KHÁCH HÀNG HAY CHIA SẺ" — trang chủ + trang chi tiết xe ═════════════ VÒNG 21 đã BỎ HẲN bộ `.review-*` / `.stars` / `.avatar` cũ: markup của chúng là 3 thẻ đánh giá gắn TÊN NGƯỜI BỊA và số sao, giống hệt nhau trên 12 trang xe. Khối này thay thế và KHÁC BẢN CHẤT — đại lý kể lại điều khách hay nói, không tên, không sao. Lý do đầy đủ (gồm điều luật cấm so sánh đích danh đối thủ) ở đầu file `inc/trai-nghiem.php`. ⚠️ KHÔNG thêm dấu ngoặc kép trang trí — ngoặc kép ngụ ý trích dẫn nguyên văn lời một người, mà đây không phải. Cũng đừng thêm số sao. */ .tn-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;} .tn-card{background:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:26px 28px; border-left:3px solid var(--accent);} .tn-nhan{font-size:16px; font-weight:800; color:var(--primary); margin:0 0 9px; line-height:1.3;} .tn-noi-dung{font-size:14.5px; line-height:1.75; color:var(--text-2); margin:0;} /* Dòng nói rõ nguồn — bắt buộc giữ, nó là thứ phân biệt "đại lý tổng hợp" với "trích lời khách". Bỏ nó đi là khối này quay về chỗ mập mờ ban đầu. */ .tn-ghi-chu{margin:18px 0 0; font-size:12px; line-height:1.6; color:var(--text-2);} .tn-ghi-chu a{color:var(--accent); font-weight:700;} /* Trang chủ có 3 mục (nói về dịch vụ đại lý) chứ không phải 4 như trang xe, nên lưới 3 cột. Khoanh trong `body.home` — trang xe phải giữ 2×2. */ body.home .tn-grid{grid-template-columns:repeat(3,1fr);} @media (max-width:900px){ .tn-grid, body.home .tn-grid{grid-template-columns:1fr; gap:14px;} .tn-card{padding:18px 20px;} .tn-nhan{font-size:15px;} .tn-noi-dung{font-size:14px; line-height:1.7;} } /* ---------- tin tức & sự kiện ---------- */ .news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} .news-card{background:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-card); overflow:hidden; transition:box-shadow .3s ease-out, transform .3s ease-out;} .news-img{aspect-ratio:1/1; background:linear-gradient(135deg,#eef3f9,#d7e2ee); position:relative; overflow:hidden;} .news-img img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease-out;} .news-card:hover .news-img img{transform:scale(1.04);} .news-body{padding:24px 26px 28px;} .news-date{font-size:11px; color:var(--accent); font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px;} .news-title{font-size:17.5px; font-weight:800; line-height:1.4; margin:0 0 18px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .news-link{font-size:13px; font-weight:700; color:var(--primary); transition:color .18s ease-out;} .news-card:hover .news-link{color:var(--accent); text-decoration:underline; text-underline-offset:3px;} /* ---------- CTA / lead form band ---------- */ .cta-band{background:linear-gradient(180deg,#ffffff 0%,#f3f7fd 100%); box-shadow:var(--shadow-card); display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; border-radius:var(--radius-card); margin:0 40px; padding:64px 64px; max-width:calc(var(--container) - 80px); margin-inline:auto;} .cta-band-copy{display:flex; flex-direction:column; gap:14px;} .cta-band h2{font-size:clamp(24px,3vw,32px); font-weight:800; margin:0; max-width:20ch; text-wrap:balance; color:var(--primary); line-height:1.25;} /* -------------------------------------------------------------------------- VÒNG 17 — biến thể `.cta-band-stack`: khối form xếp dọc, dùng ở trang chi tiết xe. 🔴 Bốn luật dưới đây trước là INLINE STYLE trong single-product.php. Chuyển ra đây vì inline style thắng mọi luật CSS không `!important` — để nguyên thì mọi media query cho điện thoại đều bị đè, im lặng, không dấu hiệu gì. Giá trị giữ ĐÚNG như inline cũ nên desktop không đổi một pixel. -------------------------------------------------------------------------- */ .cta-band-stack{flex-direction:column; align-items:stretch; text-align:center;} .cta-band-stack .cta-band-copy{align-items:center;} .cta-band-stack h2{max-width:none;} .cta-band-lede{max-width:56ch; color:var(--text-2); font-size:14.5px; margin:0;} .cta-form-stack{justify-content:center; margin-top:28px;} /* Vòng 18 — thay `style="justify-content:center; margin-top:0"` từng nằm inline trên `.final-cta-actions` ở single-product.php. 🔴 `flex:1 1 100%` LÀ BẮT BUỘC, và nó là hệ quả của việc bỏ ô email. `.final-cta-actions` là một ô flex `flex:0 1 auto` nên nó co theo NỘI DUNG. Trước đây ô nhập email nằm bên trong nó rộng 237px và chính nó giữ chiều rộng cho cả cụm. Bỏ ô email đi thì nội dung rộng nhất còn lại là chữ trên nút → cụm tụt xuống 150px, trong khi các ô nhập bên trên rộng 278px. Hai nút hẹp bằng nửa ô nhập, trông như lỗi. Cho nó `flex:1 1 100%` giống các ô nhập thì `width:100%` của nút mới ra đủ 278px. Bài học: bỏ một phần tử khỏi cụm flex thì phải đo lại chiều rộng của CẢ CỤM — phần tử bị bỏ có thể đang là thứ định kích thước cho những phần tử còn lại. */ .final-cta-stack{justify-content:center; margin-top:0; flex:1 1 100%;} /* ba điểm tin cậy: ở desktop là ba chip như cũ */ .cta-trust{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:0;} .cta-badge{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--green); background:var(--green-bg); padding:6px 14px; border-radius:8px; width:fit-content;} .cta-badge::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0;} .cta-form{display:flex; gap:12px; flex-wrap:wrap;} .cta-form input{height:52px; padding:0 20px; border:1px solid var(--border); background:#fff; font-size:14.5px; min-width:220px; border-radius:var(--radius-btn); transition:border-color .18s ease-out;} .cta-form input:focus{outline:2px solid var(--accent); outline-offset:-1px;} .cta-form .btn{height:52px; padding:0 38px; box-shadow:0 10px 24px rgba(0,44,95,.18);} .cta-form .btn:hover{box-shadow:0 14px 30px rgba(0,44,95,.26);} /* ---------- footer (corporate) ---------- */ /* VÒNG 19 — nền cũ #04162E gần như đen, khách thấy nặng. Nâng một bậc lên #071F3C (cùng sắc, chỉ sáng hơn ~3% độ sáng HSL). Đo lại sau khi đổi: tiêu đề trắng 16,53:1, chữ thân 62% trắng 7,02:1 — vẫn trên mốc 4,5:1. ⚠️ Sửa TẠI CHỖ, không đè bằng luật `.site-footer{}` thứ hai: LiteSpeed minify gộp selector trùng và giữ giá trị khai TRƯỚC, luật đè sau sẽ bị nuốt im lặng. */ .site-footer{background:#071F3C; color:rgba(255,255,255,.62);} .footer-top{padding:64px 0 40px; border-bottom:1px solid rgba(255,255,255,.08);} .footer-brand-row{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap;} .footer-brand h3{color:#fff; font-size:19px; font-weight:800; margin:0 0 12px;} .footer-brand p{max-width:38ch; font-size:13.5px; line-height:1.8; margin:0;} .footer-social{display:flex; gap:10px;} .footer-social a{width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; transition:background .18s ease-out, transform .18s ease-out;} .footer-social a:hover{background:rgba(255,255,255,.16); transform:translateY(-2px);} /* 5 cột: thương hiệu (rộng hơn) + 4 cột liên kết. Trước đây thương hiệu nằm ở một hàng riêng phía trên, chân trang cao thêm khoảng 100px so với tỉ lệ của mẫu. */ .footer-cols{padding:56px 0 48px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:36px;} .footer-cols .footer-brand{padding-right:12px;} .footer-cols .footer-brand p{margin-bottom:20px;} .footer-cols h4{color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 18px;} .footer-cols a,.footer-cols p{display:block; font-size:13.5px; line-height:2.2; margin:0;} .footer-cols a{color:rgba(255,255,255,.62); transition:color .18s ease-out;} /* Link nằm trong câu (số hotline) phải inline, nếu không quy tắc display:block ở trên sẽ ngắt dòng. */ .footer-cols p a{display:inline;} .footer-cols a:hover{color:#fff;} /* 🔴 VÒNG 19 — SỬA LỖI TƯƠNG PHẢN CÓ SẴN Ở BA CHẤM MẠNG XÃ HỘI. `.footer-cols a` ngay trên hạ MỌI link chân trang xuống 62% trắng — đúng cho link chữ trên nền navy, nhưng nó vơ luôn cả ba chấm Zalo/Facebook/TikTok, vốn có nền MÀU RIÊNG của thương hiệu. Đo được: chữ "Z" trên #0068FF chỉ 2,70:1 và "f" trên #1877F2 chỉ 2,54:1 — dưới mốc 4,5:1, nhìn gần như mất chữ. Vì sao luật `.social-dot{color:#fff}` ở dòng 75 không cứu được: nó chỉ có độ ưu tiên (0,1,0), thua `.footer-cols a` (0,1,1). Còn `.footer-social a` (dòng 361) tuy cũng khai #fff nhưng NGANG ĐIỂM (0,1,1) và đứng TRƯỚC nên bị đè. → Phải nhắm bằng hai lớp (0,2,0) mới thắng cả hai. ⚠️ Chỉ khoanh trong `.footer-cols`. Bộ chấm này CÒN DÙNG Ở header.php, mà trên đó luật dòng 75 vẫn đúng — sửa luật gốc là đụng cả đầu trang không cần thiết. Đo lại sau khi sửa: Z 4,75:1 · f 4,73:1 (nhờ hạ nền Facebook, xem chú thích ở khối `.social-dot.*` phía trên) · T 18,88:1 — cả ba trên mốc 4,5:1. ⚠️ Trả chữ về trắng MỚI CHỈ LÀ MỘT NỬA. Riêng Facebook vẫn trượt sau bước này (4,23:1) và phải hạ thêm nền. Đừng tưởng đổi màu chữ là xong. 🔴 VÀ CÙNG DÒNG 369 ĐÓ CÒN GIẾT LUÔN CANH GIỮA — lỗi thứ hai, khách nhìn ra trước tôi. `.footer-cols a{display:block; line-height:2.2}` đè `.footer-social a{display:flex; align-items:center; justify-content:center}` (dòng 361) — lại NGANG ĐIỂM (0,1,1) và đứng sau nên thắng. Mất `flex` thì chữ rơi về dòng chảy thường: dính mép TRÁI, còn `line-height:2.2` đẩy nó lên TRÊN tâm. Đo được lệch tâm X −15…−17px, Y −6px trong khung 40px — tức chữ nằm hẳn ở góc trên trái, không phải "hơi lệch". Dòng 369 cũng là thứ đè cỡ chữ 12px của `.footer-social a` thành 13,5px. → Trả lại đủ bộ canh giữa, và cho chữ 22px (55% khung) theo khách chọn. Phóng to chữ MỘT MÌNH không cứu được — chỉ thành chữ to nằm lệch góc. Đo lại sau khi sửa: lệch tâm 0,00px cả ba chữ. ⚪ 22px + w800 đã vượt mốc "chữ lớn" của WCAG (≥18,66px đậm → chỉ cần 3:1), nên ba chấm giờ dư biên tương phản; vẫn giữ nền Facebook đã hạ để có thêm lề an toàn. */ .footer-cols .social-dot{color:#fff; display:flex; align-items:center; justify-content:center; line-height:1; padding:0; text-align:center; font-size:22px;} .footer-bottom{border-top:1px solid rgba(255,255,255,.08); padding:24px 0; display:flex; justify-content:space-between; font-size:12.5px; flex-wrap:wrap; gap:10px;} .footer-bottom a{color:rgba(255,255,255,.62); transition:color .18s ease-out;} .footer-bottom a:hover{color:#fff;} /* ---------- desktop sticky action bar ---------- */ /* 🔴 VÒNG 16 — `env(safe-area-inset-bottom)` LÀ BẮT BUỘC TRÊN iPHONE CÓ VẠCH HOME. Thanh cao 60px (điện thoại) mà không trừ safe-area thì 34px cuối — 57% chiều cao — nằm trong vùng cử chỉ home indicator: chạm vào đó iOS ưu tiên cử chỉ vuốt lên của hệ thống, nên nút bấm hay không ăn, mà `innerHeight` vẫn tính cả dải đó nên mọi phép đo chiều cao đều báo "đủ 60px". `env()` trả 0 trên máy không có vạch home, nên máy tính và Android cũ không đổi gì. Dùng `sticky` chứ không `fixed` là chủ ý: hết trang thì thanh trở về dòng chảy, không che vĩnh viễn nội dung cuối — nhờ vậy không cần `padding-bottom` cho `body`. */ /* 🔴 VÒNG 19 — nền KHÔNG còn là `var(--primary)`. Khách chọn nhạt hơn một bậc (#04356C) cho riêng thanh này. Phải khai màu thẳng chứ TUYỆT ĐỐI không sửa token `--primary`: token đó dùng ở hàng trăm chỗ khắp site, đổi nó là đổi cả nút, cả tiêu đề, cả 12 trang. Thanh này nằm ở footer.php nên nó hiện trên MỌI trang — đổi ở đây là đổi cả 12 trang, đúng như khách duyệt. */ .sticky-bar{position:sticky; bottom:0; z-index:150; background:#04356C; box-shadow:0 -6px 20px rgba(0,0,0,.15); padding-bottom:env(safe-area-inset-bottom, 0px);} .sticky-bar .wrap{display:grid; grid-template-columns:repeat(5,1fr); align-items:stretch; height:68px; padding:0;} .sticky-item{display:flex; align-items:center; gap:10px; color:#fff; height:100%; justify-content:center; border-right:1px solid rgba(255,255,255,.12);} .sticky-item:last-child{border-right:none;} .sticky-item svg{width:20px; height:20px; flex-shrink:0;} .sticky-item .txt{display:flex; flex-direction:column;} .sticky-item .t1{font-size:13px; font-weight:700; line-height:1.3;} .sticky-item .t2{font-size:11px; color:#a8c2e0; line-height:1.3;} .sticky-item.active{background:var(--accent);} /* Chỉ mục đang active mới đổi màu chữ phụ. Nền của nó là --accent #0066CC sáng hơn hẳn nền --primary của cả thanh, nên #A8C2E0 rơi từ 7,51 xuống 3,03. Các mục còn lại giữ nguyên #A8C2E0 vì trên nền navy chúng vẫn đạt thoải mái — đổi cả loạt là làm nhạt oan. */ .sticky-item.active .t2{color:#E2EBF5;} /* 4,62 trên --accent */ /* Nhãn một dòng dành riêng cho điện thoại. Trên máy tính .txt đã hiện đủ hai dòng nên nhãn này nằm im. Không dùng display:none cho .txt ở mobile mà giấu bằng clip, để trình đọc màn hình vẫn đọc được nội dung đầy đủ. */ .sticky-item .t-ngan{display:none;} /* Cụm nút nổi CHỈ có ở điện thoại. Máy tính vẫn dùng thanh đáy 5 nút như cũ. Bật lên ở @media dưới 900px, cuối file. */ .hnt-noi{display:none;} /* Nút Chat AI: CHỈ có mặt trên điện thoại. Máy tính vẫn đi qua nút tròn nổi. Là