/* ========================================================================== TRANG HỢP TÁC ĐẠI LÝ — assets/css/dealer.css ========================================================================== Chỉ nạp khi trang dùng mẫu `page-templates/dealer.php` (xem inc/enqueue.php). Dựng từ bản demo `preview-dealer/index.html` mà anh đã duyệt (11/08/2026). 🔤 Mọi class có tiền tố `dealer-` — bắt buộc, vì main.css đã có `.hero`, `.sh`, `.cta-info`… mang nghĩa khác. Bỏ tiền tố là hai bên đè nhau. 🎨 KHÔNG khai lại `:root`, reset, `.wrap`, header, footer — main.css lo hết. File này chỉ chứa phần RIÊNG của trang đại lý. ⚠️ Biến màu/bo góc/đổ bóng đều lấy từ main.css (`--primary`, `--radius-lg`, `--shadow-lg`…) nên trang này tự đồng bộ khi design system đổi. ========================================================================== */ /* ========================================================================== 🔴 8 BIẾN ALIAS — BẮT BUỘC, ĐỪNG XOÁ (thêm 13/08/2026) ========================================================================== Anh báo "CSS chưa ăn hết". Truy ra: bản demo `preview-dealer/index.html` tự khai 8 biến RÚT GỌN trong `:root` của nó, rồi cả file CSS dùng chúng. Lúc bê sang theme thì phần khai báo đó bị bỏ lại ⇒ 8 biến này KHÔNG TỒN TẠI, và mọi rule dùng chúng **hỏng IM LẶNG** (trình duyệt bỏ qua khai báo, không báo lỗi). Hậu quả đo được (so computed style demo ↔ theme, 31 class): · `.dealer-why` mất hẳn nền gradient → `background-image: none` · `.dealer-step` mất nền xám → `rgba(0,0,0,0)` trong suốt · và mọi chỗ dùng `--fh` rơi về font mặc định, `--line` mất viền… 8 biến này chỉ là TÊN GỌI TẮT trỏ về biến thật của main.css (trừ `--red-hover` là màu riêng của trang). Khai lại ở đây, KHÔNG đụng `:root` toàn cục — file này chỉ nạp ở mẫu trang đại lý nên phạm vi `.dealer-page` là đủ và an toàn nhất. 💡 Thêm biến mới cho trang này thì thêm vào ĐÂY, đừng sửa main.css. */ .dealer-page{ --navy:var(--primary); --red:var(--red-accent); --red-hover:#B3161B; /* main.css KHÔNG có biến này — màu riêng của trang */ --muted:var(--text-secondary); --line:var(--border-color); --bg2:var(--bg-secondary); --sh:var(--shadow-md); --fh:var(--font-heading); } /* ---------- tiêu đề khối ---------- Chép kiểu `.sh` + `.sh h2` của theme: canh giữa, khung 700px, cách khối dưới 56px, cỡ chữ clamp(30px,3.8vw,46px). ⚠️ Bản demo trước để clamp(21px,2.5vw,30px) — nhỏ hơn tiêu đề trang chủ tới 16px ở màn rộng, nhìn như trang phụ của một web khác. */ /* 📏 Khung 820px (trang chủ để 700px) — anh yêu cầu 2 tiêu đề dài phải GÓI TRONG 1 DÒNG. Đo ở cỡ chữ 46px: · "Vì sao nên hợp tác cùng Voltic?" cần **796px** · "Đồng hành cùng đại lý từ đầu" cần **737px** Khung 700px cũ ⇒ cả hai gãy 2 dòng. 820px đủ cho cái dài nhất, dư 24px. ℹ️ Cùng cách đã xử lý tiêu đề khối Thương hiệu ở trang chủ (nới riêng khối đó lên 980px), KHÔNG sửa khung dùng chung. */ .dealer-head{text-align:center;max-width:820px;margin-inline:auto;margin-bottom:56px} .dealer-head h2{position:relative;display:inline-block;padding-bottom:18px; font-size:clamp(30px,3.8vw,46px);font-weight:800;text-transform:uppercase;color:var(--text-primary)} /* Gạch chân gradient xanh — dấu nhận biết của mọi tiêu đề khối trên website. 🔑 Dùng cái này thay hoa văn đỏ của bản thiết kế: anh yêu cầu bám MÀU SẮC của web hiện tại, mà gạch xanh xuất hiện ở trang chủ / So sánh / Về Voltic. Muốn quay lại tông đỏ thì đổi đúng dòng `background` dưới đây. */ .dealer-head h2::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%); width:60px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--blue-accent),#22D3EE)} .dealer-head p{margin-top:16px;color:var(--text-secondary);font-size:16px} /* Hoa văn cũ của bản demo — không dùng nữa, giữ rule rỗng cho khỏi vỡ nếu còn thẻ. */ .dealer-orn{display:none} /* ---------- nút ---------- */ /* Nút: chép đúng `.btn` của theme (padding 14px 28px · radius 8 · font 15/700 · viền 1.5px trong suốt để nút đặc và nút viền cao bằng nhau). */ .dealer-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--fh);font-weight:700;font-size:15px;padding:14px 28px; border-radius:var(--radius-sm);border:1.5px solid transparent;cursor:pointer;white-space:nowrap; transition:var(--transition)} .dealer-btn svg{width:20px;height:20px;flex:0 0 auto} .dealer-btn--red{background:var(--red-accent);color:#fff;box-shadow:0 4px 14px rgba(210,31,37,.2)} .dealer-btn--red:hover{background:var(--red-hover);transform:translateY(-2px);box-shadow:0 12px 24px rgba(210,31,37,.28)} /* Nút phụ dùng NAVY của theme (--primary), không phải #00295E tự đặt như bản trước. */ .dealer-btn--navy{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(var(--primary-rgb),.2)} .dealer-btn--navy:hover{background:var(--primary-hover);transform:translateY(-2px)} /* ========================================================= HERO ======= */ /* Ảnh nền tràn viền, neo PHẢI–ĐÁY, `contain` để không bao giờ bị xén. Tỉ lệ ảnh 2.521 ⇒ 100/2.521 = 39.66vw là chiều cao vừa khít bề ngang màn. */ /* 🔄 DỰNG LẠI THEO HERO TRANG CHỦ (11/08/2026 — anh yêu cầu). Trang chủ không để ảnh tràn cả section, mà bọc trong một THẺ TRẮNG bo góc 24px có đổ bóng, ảnh là nền của chính thẻ đó (`.hero-wrapper` + `::before`). Mọi số dưới đây chép đúng từ `.hero` / `.hero-wrapper` / `.hero-tx` trong main.css để hai trang nhìn ra cùng một khuôn. */ /* padding đáy: chỗ cho 2 nút nay nằm NGOÀI thẻ ảnh. */ .dealer-hero{padding:32px 0 clamp(28px,3.4vw,44px);background:var(--bg-primary)} /* 🔧 SỬA 11/08/2026 (anh gửi ảnh chụp: "nút ở vị trí xấu"). Ba lỗi nhìn thấy trên ảnh đều CÙNG MỘT GỐC — tỉ lệ ảnh không khớp thẻ: · ảnh tỉ lệ 2.521, thẻ 1169×538 = 2.173 ⇒ ảnh `contain` chỉ cao 464px, chừa **74px dải trắng trơn ở mép trên** (thấy rõ trong ảnh anh gửi); · ảnh có DẢI NAVY chạy ngang ở 65,7–70,7% chiều cao. Cụm chữ căn giữa thẻ nên 2 nút rơi đúng vào dải đó ⇒ nút navy chìm vào nền, nút đỏ thì nằm trên đường chuyển màu — đúng chỗ anh chê xấu. → Cho thẻ mang ĐÚNG tỉ lệ ảnh: ảnh lấp kín, hết dải trắng, và vị trí dải navy trở nên đoán trước được để đặt chữ cho tránh. ⚠️ Dùng `aspect-ratio` chứ KHÔNG khoá `height`: chữ dài ra thì thẻ tự cao thêm. Khoá height + overflow:hidden là cắt cụt nút CTA — lỗi đã gặp ở trang chủ. */ /* ⭐ aspect-ratio ĐÚNG BẰNG tỉ lệ ảnh (1800/714 = 2.521) ⇒ ảnh `contain` lấp KÍN thẻ, không còn dải trắng 74px ở mép trên như bản trước — "hình hiển thị đầy đủ" đúng như anh yêu cầu, mà vẫn không xén mất tí nào của xe. ⚠️ KHÔNG khoá `height`: chữ dài ra thì thẻ tự cao thêm. Khoá height kèm overflow:hidden là cắt cụt nội dung — lỗi đã gặp ở hero trang chủ. `min-height` giữ lại làm sàn cho màn rất hẹp. */ .dealer-hero-wrap{position:relative;aspect-ratio:1800/714;min-height:260px;padding:40px; border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background-color:#fff; overflow:hidden;display:flex; /* 🔑 CĂN LÊN TRÊN, không phải giữa — đây là mấu chốt của cả 3 lỗi anh chỉ ra. Ảnh tỉ lệ 2.521 nằm trong thẻ tỉ lệ ~2.17 nên `contain` neo đáy chừa 74px trắng ở mép trên. Căn giữa thì cụm chữ tụt xuống, để lộ dải trắng đó thành một mảng thừa (thấy rõ trong ảnh anh gửi), ĐỒNG THỜI đẩy 2 nút rơi trúng dải navy của ảnh ở 65,7% chiều cao ⇒ nút navy chìm vào nền. Căn lên trên: chữ lấp luôn vùng trắng dư (nhìn thành một khối liền), và cụm chữ kết thúc TRƯỚC dải navy. */ align-items:flex-start} /* Ảnh nền để ở ::before đúng như trang chủ: `contain` neo PHẢI–ĐÁY nên không bao giờ bị xén, phần dư thành dải trắng mép trên. */ .dealer-hero-wrap::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0; background:#fff url(../img/dealer/hero.jpg) right bottom/contain no-repeat;z-index:1;pointer-events:none} /* 🚫 ĐÃ BỎ lớp phủ trắng chuyển sắc (thử 11/08/2026, anh bác: "còn xấu hơn"). Nó che được dải navy thật, nhưng làm BẠC MÀU cả vùng chuyển tiếp của ảnh — trời và mặt đường xỉn đi, ảnh mất độ trong. Đổi một lỗi lấy một lỗi to hơn. → Cách đúng: để ảnh NGUYÊN VẸN, và đưa 2 nút RA NGOÀI thẻ ảnh (xem `.dealer-hero-btns` bên dưới). Không có gì đè lên ảnh thì không cần phủ. */ /* Cột chữ: ĐÚNG bằng trang chủ — min(530px, 46%). ✅ Đã đo ảnh `hero.jpg` bằng canvas: quét dải giữa (nơi chữ nằm), mép hình bắt đầu ở x=1008/1800 = **56% bề ngang**. Cột chữ kết thúc ở 46% ⇒ còn dư 10% (~117px ở khổ 1280) trước khi chạm đầu xe. An toàn. ⚠️ Đổi ảnh hero khác thì phải đo lại con số 56% này — đó là thứ quyết định cột chữ được rộng bao nhiêu. Chữ đè lên xe là lỗi đã gặp ở trang chủ hồi 21/07. */ /* z-index 3: phải NẰM TRÊN lớp phủ trắng (::after ở z-index 2), nếu không chữ bị chính lớp phủ làm mờ đi. */ /* Nới 530→580px (46→48%): dòng "Chiết khấu tốt • Bảo hành 2 năm rõ ràng • Đồng hành phát triển lâu dài" gãy 2 dòng ở màn rộng — cỡ chữ chạm trần 16px từ ~1380px nên chữ dài ra trong khi khung vẫn 530px. ✅ Nới được an toàn NHỜ lớp phủ trắng ở trên: phủ đặc tới 48% nên chữ vẫn nằm trọn trên nền trắng, không còn phụ thuộc vùng trắng sẵn có của ảnh (56%). */ /* ⚠️ 52% chứ không phải 48%: phần trăm ở đây tính theo VÙNG TRONG của thẻ (đã trừ 40px lề mỗi bên), nên 48% chỉ ra 530px chứ không phải 568px như tưởng. Mà dòng "Chiết khấu tốt • Bảo hành 2 năm rõ ràng • Đồng hành phát triển lâu dài" cần **532px** ở cỡ chữ 16px ⇒ THIẾU ĐÚNG 2px, chữ cuối rơi xuống dòng hai. 52% cho 574px — dư 42px, còn chỗ nếu sau này anh sửa câu này dài thêm. */ .dealer-hero-tx{position:relative;z-index:3;max-width:min(600px,52%)} .dealer-hero h1{font-size:clamp(30px,3.72vw,52px);font-weight:800;text-transform:uppercase;letter-spacing:-.025em} .dealer-hero h1 span{display:block;color:var(--red)} .dealer-hero-sub{margin-top:14px;font-family:var(--fh);font-weight:800;color:var(--navy); font-size:clamp(13.5px,1.16vw,16px)} .dealer-hero-lead{margin-top:14px;color:#33465D;font-size:clamp(14.5px,1.16vw,16px);max-width:470px} /* 🔻 Dời 2 nút XUỐNG + QUA TRÁI một chút (11/08/2026, anh yêu cầu). Đo trước khi sửa ở 1280px: nút thẳng hàng với chữ (cùng cách mép thẻ 40px), khe từ đoạn mô tả xuống nút 30px, đáy nút còn cách đáy thẻ 122px. → xuống: khe 30 → 48px · sang trái: lấn 14px vào phần lề của thẻ (còn 26px, chưa chạm mép nên nút không bị cắt và vẫn nằm trong vùng trắng của ảnh). ⚠️ Chỉ lấn trái từ 901px trở lên: dưới mức đó hero xếp dọc, lề thẻ hẹp hơn nhiều — lấn tiếp là nút dính sát mép, nhìn như lỗi. */ /* 🔻 2 NÚT NẰM NGOÀI THẺ ẢNH (11/08/2026 — anh chốt sau 2 lần thử). Đường đi tới đây, ghi lại để khỏi thử lại: ① đặt nút trong thẻ, canh cho nằm trên dải navy của ảnh → KHÔNG BỀN, cột chữ hẹp lại ở khổ nhỏ là chữ xuống dòng, đẩy nút đè lên navy (1200px lệch 57px); ② phủ lớp trắng chuyển sắc lên ảnh → che được navy nhưng LÀM BẠC MÀU trời và mặt đường, anh bác ngay: "còn xấu hơn"; ③ ✅ đưa nút RA NGOÀI thẻ — ảnh giữ nguyên vẹn 100%, nút nằm trên nền trắng của trang nên luôn rõ, không phụ thuộc chi tiết nào trong ảnh. 🔑 Nhờ vậy đổi ảnh hero khác cũng không phải căn lại gì. */ .dealer-hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(18px,2.2vw,28px)} .dealer-hero-img{display:none} /* ===== 2 NÚT VÀO TRONG TẤM HÌNH, GÓC DƯỚI–TRÁI (anh chốt 13/08/2026) ========= Anh yêu cầu 2 nút nằm trong hero, phía dưới bên trái của tấm hình — đảo lại quyết định 11/08 (khi đó đưa nút RA NGOÀI vì đặt trong thì đè dải navy). ĐO THẬT trên assets/img/dealer/hero.jpg (1800×714) bằng canvas: · dải navy chạy ngang, điểm THẤP NHẤT kết thúc ở y = 536/714 = 75,1% · máy điều hòa đầu tiên bắt đầu ở x = 664/1800 = 36,9% ⇒ vùng trắng an toàn = góc dưới–trái, 36,9% ngang × 24,9% dọc của khung ảnh. Ở khổ 1280 (khung 1169×464) là 431×115px; trừ lề 40px còn 391×115px. 🚫 VÌ SAO PHẢI BỎ ICON (`svg{display:none}`): 2 nút xếp ngang KÈM icon cần 469px — thiếu 78px so với 391px chỗ trống. Đã đo, không nhét vừa được. Phương án xếp dọc giữ được icon nhưng khối nút cao 103px trong khi vùng trắng chỉ 109px ⇒ chạm mép navy. Anh xem bản thử rồi chọn kiểu ngang này. 🔑 KHÔNG dùng `position:absolute` mà dùng MARGIN-TOP ÂM — nhờ vậy KHÔNG phải sửa một dòng HTML nào trong `template-parts/dealer/hero.php` (giữ nguyên Live Edit, giữ nguyên bản render để `diff`). Nút vốn nằm NGAY SAU thẻ ảnh nên nó neo theo ĐÁY thẻ: margin-top âm = −(chiều cao nút + lề đáy) = −(46 + 15) = −61px Con số này CỐ ĐỊNH, không phụ thuộc khổ màn — khác hẳn absolute phải tính theo % chiều cao thẻ. ⚠️ Đổi padding/cỡ chữ của nút thì phải tính lại −61px. ⚠️ CHỈ áp từ 1200px trở lên. Ở 1101–1199px khung ảnh co còn ~1013px ⇒ chỗ trống ngang chỉ 334px < 348px mà 2 nút cần ⇒ nút sẽ đè lên máy điều hòa. Từ 1100px xuống thì ảnh vốn đã tách thành thẻ riêng (xem @media bên dưới), nút nằm trên nền trắng của trang như cũ — không liên quan. Đo lại sau khi áp, 10 khổ 1024→1920px: 0 lỗi. Từ 1200px nút nằm dưới dải navy 46→56px, cách máy điều hòa 17→52px, thẳng hàng với chữ (lề trái 40px). */ /* ===== KHOẢNG CÁCH GIỮA CÁC KHỐI (anh yêu cầu giảm, 14/08/2026) ============== Đo trước khi sửa: main.css có rule toàn cục `section{padding:clamp(60px,8vw,100px) 0}` ⇒ ở desktop mỗi khối đệm 100px trên + 100px dưới, tức KHE GIỮA HAI KHỐI là 200px. Trang đại lý có 4 khối liền nhau nên cộng lại thành rất nhiều khoảng trống. Nay: clamp(36px,5vw,64px) ⇒ khe còn 128px ở desktop (giảm 36%), 72px ở điện thoại. 🚫 KHÔNG sửa rule `section` toàn cục — nó dùng cho MỌI trang; sửa là trang chủ, So sánh, Về Voltic, Hướng dẫn đổi theo. Chỉ nhắm .dealer-sec của trang này. */ .dealer-page .dealer-sec{padding-block:clamp(36px,5vw,64px)} @media (min-width:1200px){ .dealer-hero-btns{ position:relative;z-index:3; /* 🔄 -61px → -100px (anh chỉnh 14/08/2026, thấy nút xuống thấp trông cân hơn). ĐO LẠI trước khi áp — nút vẫn nằm trọn trong vùng trắng, KHÔNG đè dải navy: 1280px: cách đáy navy 15px · 1440px: 17px · 1920px: 17px ⚠️ Riêng ĐÚNG khổ 1200px chỉ còn 8px — quá mong manh: anh sửa chữ nút dài ra qua Live Edit là nút xuống 2 hàng và đè lên navy ngay. Nên dải 1200–1279 giữ -75px (cách navy ~33px), mắt không phân biệt được mà hết rủi ro. */ margin-top:-75px;margin-left:40px; /* 40px = đúng padding của .dealer-hero-wrap */ gap:10px; /* 🛡️ LƯỚI AN TOÀN: khoá bề ngang đúng bằng vùng trắng (36,9% khung ảnh, trừ lề trái 40px). Nếu sau này anh sửa chữ nút dài ra qua Live Edit, 2 nút sẽ TỰ XUỐNG HÀNG thay vì tràn sang đè lên máy điều hòa — hỏng nhẹ thay vì hỏng nặng. Đo ở 1200px: chỗ trống 367px, 2 nút cần 338px ⇒ còn biên 29px. */ max-width:calc(36.9% - 40px); } .dealer-hero-btns .dealer-btn{padding:11px 14px;font-size:14px} .dealer-hero-btns .dealer-btn svg{display:none} } /* ⚠️ PHẢI đứng SAU khối @media(min-width:1200px) ở trên — cùng độ đặc hiệu (0,1,0) nên rule nào viết sau thì thắng. Đặt trước là -100px bị -75px của khối kia đè mất (đã dính đúng lỗi này một lần khi áp). */ @media (min-width:1280px){ .dealer-hero-btns{margin-top:-100px} } /* ============================================== 1. VÌ SAO HỢP TÁC ===== */ .dealer-why{background:linear-gradient(180deg,#fff,var(--bg2))} .dealer-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(24px,3vw,36px)} /* Thẻ: chép `.pc` của theme — bo góc 16px (--radius-md), viền --border-color, đổ bóng --shadow-sm, nhấc -5px khi rê chuột như thẻ sản phẩm trang chủ. */ .dealer-card{background:var(--bg-primary);border:1px solid var(--border-color); border-radius:var(--radius-md);padding:26px 22px 28px; text-align:center;box-shadow:var(--shadow-sm);transition:var(--transition)} .dealer-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--blue-accent)} .dealer-card-ic{width:62px;height:62px;margin:0 auto 18px} .dealer-card h3{font-size:16px;font-weight:800;text-transform:uppercase;color:var(--navy);line-height:1.3} .dealer-card p{margin-top:12px;font-size:14px;line-height:1.62;color:var(--muted)} /* ================================================ 2. QUYỀN LỢI ======== */ .dealer-grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:clamp(24px,3vw,36px)} .dealer-perk{background:var(--bg-primary);border:1px solid var(--border-color); border-radius:var(--radius-md);padding:24px 16px 26px; text-align:center;box-shadow:var(--shadow-sm);transition:var(--transition)} .dealer-perk:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--blue-accent)} .dealer-perk-ic{width:52px;height:52px;margin:0 auto 16px} .dealer-perk p{font-size:14.5px;line-height:1.6;color:#2E4159} /* ===================================== 3. DẢI CẠNH TRANH (nền navy) == */ .dealer-quality-out{padding-bottom:clamp(42px,5.2vw,72px)} .dealer-quality{position:relative;border-radius:var(--radius-lg);overflow:hidden;color:#fff; background:#011E43 url(../img/dealer/band-bg.jpg) center/cover no-repeat; padding:clamp(30px,3.6vw,44px) clamp(22px,3vw,52px) clamp(28px,3.4vw,40px)} .dealer-quality h2{font-size:clamp(19px,2.3vw,28px);font-weight:800;text-transform:uppercase;text-align:center;color:#fff} .dealer-qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(22px,2.6vw,32px)} .dealer-q{display:flex;gap:16px;align-items:flex-start;padding-inline:clamp(12px,2vw,30px)} .dealer-q+.dealer-q{border-left:1px solid rgba(255,255,255,.22)} .dealer-q-ic{flex:0 0 auto;width:46px;height:46px;margin-top:2px} .dealer-q b{display:block;font-family:var(--fh);font-size:clamp(15px,1.5vw,18px);font-weight:800; text-transform:uppercase;letter-spacing:.01em} .dealer-q p{margin-top:8px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.82)} /* Ghi chú cuối khối chất lượng — theme đổi tên `.dealer-qfoot` (demo) thành `.dealer-qnote`, nhưng CSS chưa đổi theo ⇒ dòng chữ mất canh giữa và mất khung 640px, trải hết bề ngang dải navy. Dùng chung rule với tên cũ cho chắc. */ .dealer-qnote, .dealer-qfoot{margin-top:clamp(22px,2.6vw,30px);text-align:center;font-size:14.5px;line-height:1.65; color:rgba(255,255,255,.9);max-width:640px;margin-inline:auto} /* ============================================== 4. QUY TRÌNH 4 BƯỚC == */ .dealer-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center; gap:0;margin-top:clamp(24px,3vw,36px)} .dealer-step{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-md); padding:34px 18px 24px;text-align:center;min-height:100%} .dealer-step-n{position:absolute;top:-16px;left:-14px;width:44px;height:44px;border-radius:50%; background:var(--navy);color:#fff;font-family:var(--fh);font-weight:800;font-size:19px; display:grid;place-items:center;box-shadow:0 4px 12px rgba(1,31,64,.28)} .dealer-step-ic{width:56px;height:56px;margin:0 auto 14px} .dealer-step p{font-size:14.5px;line-height:1.55;color:#2E4159;font-weight:500} .dealer-arrow{width:clamp(26px,3.4vw,62px);height:14px;color:#9AA9BC} .dealer-arrow svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round} /* ================================ 5. DẢI BẢO HÀNH 2 NĂM (có ảnh thợ) = */ .dealer-warranty-out{padding-bottom:clamp(42px,5.2vw,72px)} /* 🔴 padding:0 — BẮT BUỘC, đừng xoá (13/08/2026). `.dealer-warranty` là thẻ
, mà main.css có rule TOÀN CỤC `section{padding:clamp(60px,8vw,100px) 0}` ⇒ khối này tự dính thêm 200px padding trên+dưới, cao vọt 204px → 402px (đo thật, gấp đôi bản demo). Bản demo KHÔNG dính vì nó không nạp main.css. ⚠️ Cùng bẫy này áp cho MỌI khối mới dùng thẻ
trong theme — hoặc đặt padding:0, hoặc dùng
. */ .dealer-warranty{padding:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;color:#fff; background:linear-gradient(100deg,#022A5B 0%,#01356F 42%,#012A57 68%,#01203F 100%); display:grid;grid-template-columns:auto 1fr 40%;align-items:center; min-height:clamp(150px,15vw,204px)} /* 🐛 XOÁ RULE Ở ĐÂY (14/08/2026) — anh báo chữ "2 NĂM BẢO HÀNH" bị lệch khỏi khiên. Rule cũ là DI TÍCH của thời khiên chưa có thẻ bọc: nó đặt margin-left cho chính thẻ . Từ khi thêm .dealer-shield-wrap (bên dưới) thì margin ĐÃ chuyển sang thẻ bọc, nên margin bị tính HAI LẦN — svg bị đẩy phải thêm đúng một lần nữa, trong khi 3 dòng chữ lại định vị theo THẺ BỌC (inset:0) nên đứng yên. Đo được: lệch 33px ở 1280 · 37px ở 1440 · 40px ở 1920 — đúng bằng giá trị margin. ℹ️ Ở ≤760px tình cờ KHÔNG lệch vì @media bên dưới ghi đè margin thành `auto`, nên lỗi chỉ hiện trên máy tính — dễ tưởng là do màn hình. */ .dealer-warranty-tx{padding:clamp(18px,2.4vw,28px) clamp(16px,2.4vw,34px)} .dealer-warranty h2{display:inline-block;background:#101418;color:#fff;border-radius:8px; padding:7px 16px 8px;font-size:clamp(16px,2.05vw,26px);font-weight:800;text-transform:uppercase} .dealer-warranty p{margin-top:14px;font-size:clamp(14.5px,1.42vw,19px);line-height:1.5;color:#EAF1FA} /* ===== KHIEN + 3 DONG CHU DE LEN (13/08/2026 - anh muon giong demo 100%) ===== Demo ve cung "2 / NAM / BAO HANH" bang 3 the TRONG SVG nen khong sua duoc tren trang. O day SVG chi ve HINH, 3 dong chu la HTML that de len bang absolute => nhin y het ma Live Edit van sua duoc (wr_badge_num / _year / _txt). Moi con so duoi day SUY TU viewBox 132x150 cua khien, dung chinh cam tinh: - co chu = be rong khien x (co trong SVG / 132) -> 54/132, 17/132, 15/132 - vi tri = % chieu cao (tam chu / 150) -> "2" ~41%, NAM ~63%, ruy bang ~79% CANH BAO: doi viewBox hoac doi hinh khien thi phai tinh lai ca 6 con so nay. Dung bien --w (be rong khien) de chu co gian DUNG TI LE voi hinh o moi kho man; de font-size co dinh thi man hep chu tran ra ngoai khien. */ .dealer-shield-wrap{ --w:clamp(96px,9.4vw,132px); position:relative;flex:0 0 auto;width:var(--w); margin:14px 0 14px clamp(18px,2.6vw,40px); } .dealer-shield{display:block;width:100%;height:auto} .dealer-badge{position:absolute;inset:0;color:#fff;font-family:var(--fh); text-align:center;line-height:1;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.25)} .dealer-badge b{position:absolute;left:0;right:0;top:27.5%;font-weight:800;font-size:calc(var(--w)*.409)} .dealer-badge i{position:absolute;left:0;right:0;top:56.5%;font-style:normal;font-weight:800; font-size:calc(var(--w)*.129);letter-spacing:.06em} .dealer-badge span{position:absolute;left:0;right:0;top:74.5%;font-weight:800; font-size:calc(var(--w)*.114);letter-spacing:.04em} .voltic-live-edit .dealer-badge{pointer-events:auto} .dealer-warranty-img{position:absolute;inset:0 0 0 auto;width:44%;height:100%} .dealer-warranty-img img{width:100%;height:100%;object-fit:cover;object-position:center} /* mép trái ảnh tan dần vào nền navy — không để lộ đường cắt thẳng */ .dealer-warranty-img::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,#012A57 0%,rgba(1,42,87,.72) 22%,rgba(1,42,87,0) 52%)} /* ======================================================= 6. CTA ====== */ .dealer-cta-out{padding-bottom:clamp(42px,5.2vw,72px)} .dealer-cta{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh); padding:clamp(24px,3vw,36px) clamp(22px,3.4vw,48px); display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,3vw,44px)} .dealer-cta-ic{width:clamp(64px,6.4vw,90px);height:clamp(64px,6.4vw,90px)} .dealer-cta h2{font-size:clamp(19px,2.3vw,29px);font-weight:800;text-transform:uppercase;color:var(--navy)} .dealer-cta .dealer-btn{margin-top:18px} /* Cột giữa dải CTA (theme thêm wrapper này, demo không có): cần `min-width:0` để tiêu đề dài không đẩy hẹp cột thông tin bên phải. */ .dealer-cta-mid{min-width:0} .dealer-cta-info{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,44px);display:grid;gap:11px} /* 🔴 SỬA 14/08/2026 — RULE CHẾT, LỖI RẤT NẶNG mà nhìn code không thấy. Template `template-parts/dealer/cta.php` in ra `
  • ` TRẦN (không class), trong khi 4 rule dưới đây nhắm `.dealer-ci` — quét bản render: class đó xuất hiện **0 lần**. Hậu quả: `svg{width:22px;height:22px}` không trúng ⇒ 3 icon liên hệ PHÌNH HẾT BỀ NGANG CỘT. Đo thật ở 1024px: mỗi icon **870×870px**, mỗi
  • cao 904px, cả khối CTA cao **2898px** (đáng lẽ ~300px) ⇒ riêng khối này chiếm 60% chiều dài thừa của trang ở máy tính bảng. Ở desktop cũng sai, chỉ đỡ hơn vì cột chỉ rộng 253px nên icon bị bó lại. 🔑 Cùng họ với bẫy chấm tròn album (`` đổi thành `