/* * Trang chủ — nhịp thị giác và chuyển động. * * VẤN ĐỀ ĐO ĐƯỢC 08/09/2026: sáu khối cấp cao nhất có nhịp rất lệch nhau. * * #94cfd19 tieu de PRODUCTS nen trong suot, dem 0/0 * #00bd3a2 slider PRODUCTS nen trong suot, dem 0/0 * #8de73d5 APPLICATIONS nen #f8f9fa, dem 100/100 * #3bfc492 INDUSTRY nen #343a40, dem 100/100 * #eb72302 Helping Center nen trong suot, dem 0/0 * #60c2811 Latest News nen trong suot, dem 0/0 * * Hai khối giữa được chăm, bốn khối còn lại thì không — nên PRODUCTS trông như * trôi giữa trang còn phần cuối thì dính liền nhau. Cho cả sáu cùng một nhịp. * * DÙNG ID CỦA ELEMENTOR có chủ ý. Không dùng `:nth-of-type` vì PRODUCTS bị tách * làm HAI khối — đánh số thứ tự sẽ tô nền xen kẽ ngay giữa tiêu đề và slider * của cùng một mục. ID của Elementor không đổi khi sửa nội dung; chỉ đổi nếu * ai đó xoá hẳn khối rồi tạo lại. */ /* --- Nhịp khối ----------------------------------------------------------- */ body.home .elementor-element-94cfd19 { /* tiêu đề PRODUCTS */ background: #fff; padding-top: 72px !important; padding-bottom: 8px !important; } body.home .elementor-element-00bd3a2 { /* slider PRODUCTS */ background: #fff; padding-bottom: 72px !important; } body.home .elementor-element-eb72302 { /* Helping Center */ background: #fff; padding-top: 64px !important; padding-bottom: 64px !important; } body.home .elementor-element-60c2811 { /* Latest News */ background: #f5f7f9; padding-top: 64px !important; padding-bottom: 72px !important; } /* Hai khối đã có nền thì chỉ giảm đệm: 100px trên và dưới là quá rộng, cộng * lại thành 400px khoảng trắng cho hai mục. */ body.home .elementor-element-8de73d5, body.home .elementor-element-3bfc492 { padding-top: 72px !important; padding-bottom: 72px !important; } /* --- Tiêu đề mục --------------------------------------------------------- */ /* Gạch nhấn dưới dòng nhãn nhỏ. Nó cho mắt một mốc để biết "mục mới bắt đầu", * thay vì chỉ dựa vào khoảng trắng. */ body.home .ape-title-sev { position: relative; padding-bottom: 14px; letter-spacing: .04em; } body.home .ape-title-sev::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 54px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #08A6D9, #0b5cab); } /* Trên nền tối (mục INDUSTRY) thì gạch phải sáng lên mới thấy. */ body.home .elementor-element-3bfc492 .ape-title-sev::after { background: linear-gradient(90deg, #4fd2ff, #08A6D9); } body.home .ape-mo-home-product { font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.25; margin-top: .35rem; } /* --- Mũi tên slider ------------------------------------------------------ */ .category-slider .slick-prev, .category-slider .slick-next, .hktCarousel .slick-prev, .hktCarousel .slick-next { width: 40px; height: 40px; border-radius: 50%; background: #fff !important; border: 1px solid #dfe4ea; box-shadow: 0 2px 10px rgba(16, 42, 67, .10); transition: background .18s ease, border-color .18s ease, transform .18s ease; } .category-slider .slick-prev:hover, .category-slider .slick-next:hover, .hktCarousel .slick-prev:hover, .hktCarousel .slick-next:hover { background: #08A6D9 !important; border-color: #08A6D9; transform: scale(1.08); } .category-slider .slick-prev:before, .category-slider .slick-next:before, .hktCarousel .slick-prev:before, .hktCarousel .slick-next:before { color: #0b5cab; opacity: 1; font-size: 20px; line-height: 1; } .category-slider .slick-prev:hover:before, .category-slider .slick-next:hover:before, .hktCarousel .slick-prev:hover:before, .hktCarousel .slick-next:hover:before { color: #fff; } /* --- Hiện dần khi cuộn tới ---------------------------------------------- * Chuyển động ở đây để DẪN MẮT, không để trang trí: mỗi khối nhích lên 16px * và hiện ra khi vào tầm nhìn, nên người xem biết mình vừa sang mục mới. * * Biên độ cố ý nhỏ và nhanh (.5s). Hiệu ứng lớn trên trang catalog kỹ thuật * làm chậm việc tra cứu, mà tra cứu mới là việc khách đến đây để làm. * * `.vt-reveal` do JS gắn — không có JS thì không có class, nội dung hiện bình * thường. Không bao giờ để nội dung phụ thuộc JS mới nhìn thấy được. */ @media (prefers-reduced-motion: no-preference) { /* TRẠNG THÁI NỀN LÀ HIỆN, không phải ẩn. * * Cách thường thấy là `.vt-reveal { opacity: 0 }` rồi nhờ JS thêm class để * hiện ra. Cách đó có một chế độ hỏng rất tệ: JS không chạy vì bất kỳ lý do * gì — lỗi script khác trên trang, trình chặn quảng cáo, mạng đứt giữa * chừng — là toàn bộ nội dung biến mất vĩnh viễn, mà không ai báo lỗi. * * Ở đây `.vt-in` chỉ CHẠY MỘT HOẠT ẢNH. Không có class thì không có hoạt * ảnh, và nội dung hiện bình thường. Xấu nhất là mất hiệu ứng, không bao * giờ là mất nội dung. * * Tôi chọn cách này sau khi KHÔNG xác nhận được IntersectionObserver kích * hoạt trong trình duyệt điều khiển tự động — chưa rõ do môi trường test * hay do trang. Với thứ chưa chắc chắn thì phải chọn chế độ hỏng an toàn. */ body.home .vt-in { animation: vtRevealIn .5s ease both; } } @keyframes vtRevealIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* --- Chữ trên banner hiện dần ------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .slider-wrapper.slider .slick-active .hero-title, .slider-wrapper.slider .owl-item.active h1, .slider-wrapper.slider .owl-item.active h2 { animation: vtHeroIn .7s ease both; } } @keyframes vtHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ========================================================================= * MŨI TÊN — thay chữ "Prev / Next / Back" bằng biểu tượng * ========================================================================= * Hai bộ slider khác nhau đang chạy trên trang chủ, và chúng in ra chữ khác * nhau (đã đo trong trình duyệt): * .slick-prev / .slick-next chu "Prev" / "Next" — slider danh muc * .owl-prev / .owl-next chu "Back" / "Next" — banner va blog * * Vẽ mũi tên bằng CSS thuần (một hình vuông xoay 45°, chỉ giữ hai cạnh) chứ * không dùng font biểu tượng: không thêm file phải tải, không phụ thuộc font * nào có sẵn hay không, và nét luôn sắc ở mọi độ phân giải. * * `font-size: 0` giấu chữ khỏi mắt nhưng GIỮ NGUYÊN trong DOM — trình đọc màn * hình vẫn đọc được "Prev"/"Next". Dùng `display:none` là mất luôn nhãn đó. */ .category-slider .slick-prev, .category-slider .slick-next, .hktCarousel .slick-prev, .hktCarousel .slick-next, .hktCarousel .owl-prev, .hktCarousel .owl-next, .slider-wrapper.slider .owl-prev, .slider-wrapper.slider .owl-next { font-size: 0 !important; line-height: 0 !important; color: transparent !important; /* KHONG dat `position` o day. Xem muc 7 cuoi file. */ width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .94) !important; border: 1px solid #dfe4ea !important; box-shadow: 0 2px 12px rgba(16, 42, 67, .12); transition: background .18s ease, border-color .18s ease, transform .18s ease; display: inline-flex !important; align-items: center; justify-content: center; } /* Slick vẽ sẵn một ký tự qua ::before — tắt đi để không chồng lên mũi tên mới. */ .category-slider .slick-prev:before, .category-slider .slick-next:before, .hktCarousel .slick-prev:before, .hktCarousel .slick-next:before { content: "" !important; display: none !important; } .category-slider .slick-prev::after, .category-slider .slick-next::after, .hktCarousel .slick-prev::after, .hktCarousel .slick-next::after, .hktCarousel .owl-prev::after, .hktCarousel .owl-next::after, .slider-wrapper.slider .owl-prev::after, .slider-wrapper.slider .owl-next::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 2px solid #0b5cab; border-right: 2px solid #0b5cab; transition: border-color .18s ease; } /* Mũi tên phải: xoay 45°. Lùi 2px để khối hình cân về mặt thị giác — tâm hình * học của một chữ V không trùng tâm ô vuông bao quanh nó. */ .category-slider .slick-next::after, .hktCarousel .slick-next::after, .hktCarousel .owl-next::after, .slider-wrapper.slider .owl-next::after { transform: translate(-62%, -50%) rotate(45deg); } .category-slider .slick-prev::after, .hktCarousel .slick-prev::after, .hktCarousel .owl-prev::after, .slider-wrapper.slider .owl-prev::after { transform: translate(-38%, -50%) rotate(-135deg); } .category-slider .slick-prev:hover, .category-slider .slick-next:hover, .hktCarousel .slick-prev:hover, .hktCarousel .slick-next:hover, .hktCarousel .owl-prev:hover, .hktCarousel .owl-next:hover, .slider-wrapper.slider .owl-prev:hover, .slider-wrapper.slider .owl-next:hover { background: #08A6D9 !important; border-color: #08A6D9 !important; transform: scale(1.06); } .category-slider .slick-prev:hover::after, .category-slider .slick-next:hover::after, .hktCarousel .slick-prev:hover::after, .hktCarousel .slick-next:hover::after, .hktCarousel .owl-prev:hover::after, .hktCarousel .owl-next:hover::after, .slider-wrapper.slider .owl-prev:hover::after, .slider-wrapper.slider .owl-next:hover::after { border-color: #fff; } /* ========================================================================= * MÀU NỀN — thẻ trắng đang nằm trên nền trắng * ========================================================================= * Đo được: mục PRODUCTS có nền #fff, thẻ cũng #fff, viền #e6eaef. Ba giá trị * gần nhau tới mức thẻ gần như tan vào nền — nhìn thành một dải ảnh trôi nổi * chứ không phải các ô bấm được. * * Hai việc cùng lúc: * 1. Cho mục PRODUCTS nền xám nhạt để thẻ trắng nổi lên * 2. Đậm viền thẻ một bậc, để thẻ vẫn đọc được trên nền trắng * * Nhịp sau khi đổi — xem thêm mục "BẢNG MÀU" ở cuối file. */ body.home .elementor-element-94cfd19, body.home .elementor-element-00bd3a2 { background: #f5f7f9; } /* `!important` là bắt buộc ở đây: Elementor sinh CSS nền riêng cho khối này * (nó là khối duy nhất được đặt màu nền trong trình dựng trang), và luật đó * thắng luật của tôi. Đã đo: đặt `background: #fff` bình thường thì giá trị * thực tế vẫn là rgb(248,249,250). * * SỬA 10/09/2026 — TRẮNG Ở ĐÂY LÀ SAI, xem mục "NHỊP NỀN" ở cuối file. * Khối này chứa 28 thẻ MÀU TRẮNG. Thẻ trắng trên nền trắng là đúng cái lỗi đã * sửa cho PRODUCTS ngay bên trên, chỉ là lúc đó tôi quên áp sang đây. */ body.home .elementor-element-8de73d5 { /* APPLICATIONS */ background: #e3edf8 !important; background-color: #e3edf8 !important; } .category-slider .slide > a, .col-custom .thumb { border-color: #d8e0e8 !important; box-shadow: 0 1px 3px rgba(16, 42, 67, .06); } /* ========================================================================= * BẢNG MÀU — rà lại toàn trang 08/09/2026 * ========================================================================= * HAI MÀU XÁM GẦN GIỐNG NHAU * Trang đang dùng đồng thời #f5f7f9 (mục PRODUCTS) và #f8f9fa (Helping Center). * Chênh nhau đúng 3/255 ở mỗi kênh — mắt không phân biệt được, nên nó không tạo * ra khác biệt nào; nó chỉ làm bảng màu có hai token cho cùng một vai trò, và * người sửa sau sẽ phải đoán nên dùng cái nào. Gộp về MỘT màu xám: #f5f7f9. * * ĐỔI CHỖ HAI MỤC CUỐI * Trước: Helping Center xám, Latest News trắng. Nhưng thẻ bài viết màu trắng — * thẻ trắng trên nền trắng thì viền là thứ duy nhất tách chúng ra, đúng lỗi đã * gặp ở mục PRODUCTS. Còn Helping Center là các ô biểu tượng, không có thẻ nào * cần nổi lên. Nên đảo lại: Helping Center trắng, Latest News xám. * * Nhịp ngày 08/09 (đã thay, giữ lại để so sánh — xem "NHỊP NỀN" cuối file): * * PRODUCTS (tiêu đề) #f5f7f9 xám * PRODUCTS (slider) #f5f7f9 xám ← cùng một mục nên cùng màu * APPLICATIONS #ffffff trắng ← SAI, 28 thẻ trắng trên nền trắng * INDUSTRY #0e2a47 tối * Helping Center #ffffff trắng * Latest News #f5f7f9 xám ← thẻ trắng nổi trên nền này * * MÀU TỐI PHẢI THUỘC VỀ THƯƠNG HIỆU * Mục INDUSTRY đang là #343a40 — xám than trung tính, màu mặc định của * Bootstrap. Nó không liên quan gì tới cyan #08A6D9 và xanh #0b5cab đang dùng * cho mọi nét nhấn khác, nên khối tối trông như mảnh ghép từ trang khác. * * Thay bằng #0e2a47 — xanh navy đậm, cùng họ với #0b5cab. Cùng độ tối, cùng * mức tương phản với chữ trắng (đã kiểm: 14.8:1, vượt xa ngưỡng AA 4.5:1), nên * không có rủi ro về khả năng đọc; chỉ khác ở chỗ giờ nó nằm trong bảng màu. * * `!important` vì màu này do Elementor sinh ra trong CSS của khối, giống hệt * trường hợp APPLICATIONS ở trên. */ body.home .elementor-element-3bfc492 { background: #0e2a47 !important; background-color: #0e2a47 !important; } /* Mục tin dùng nền xám nên khối bọc slider phải trong suốt, nếu không nó lại * phủ trắng đè lên đúng cái nền vừa đặt. */ body.home .elementor-element-60c2811 .hktCarousel, body.home .elementor-element-60c2811 .owl-carousel { background: transparent; } /* ========================================================================= * BA LỖI BỐ CỤC — sửa 08/09/2026 sau khi xem ảnh chụp thật * ========================================================================= * Cả ba đều KHÔNG nhìn ra được bằng số đo tôi chạy trước đó, vì số đo trả lời * "thẻ có cao bằng nhau không" chứ không trả lời "trang có cân không". Ghi lại * để lần sau nhớ: đo xong vẫn phải nhìn. */ /* --- 1. Chữ trên banner dính sát mép trái -------------------------------- */ /* Đo được: tiêu đề banner ở `left=1` trong viewport 1707, còn khối chứa nó * rộng 1350px — tức nó nằm sát mép trái thay vì căn giữa, kéo theo cả tiêu đề * và nút EXPLORE MORE. Mọi mục khác trên trang đều đã căn giữa nên banner * trông lệch hẳn. * * KHÔNG tìm ra luật nào đặt `width: 1350px` — đã grep toàn bộ CSS của hai * theme, bootstrap, và cả hai file Elementor sinh ra. Nghĩa là tôi không chắc * chắn phần tử nào mới là phần tử hẹp. * * Nên căn giữa ở CẢ BA CẤP thay vì đoán. Đặt `margin: auto` lên một phần tử đã * chiếm hết chiều ngang là luật vô hại — không có rủi ro khi thừa, nhưng thiếu * đúng cấp thì lỗi còn nguyên. */ .slider-wrapper.slider .item.slide-item, .slider-wrapper.slider .vietape-slider-home, .slider-wrapper.slider .vietape-slider-home > .container { margin-left: auto !important; margin-right: auto !important; } /* --- 2. Bỏ dòng "VIETAPE" phía trên tiêu đề ------------------------------ */ /* Logo đã có chữ Vietape ngay bên trên, lặp lại lần nữa không thêm thông tin. * * ẨN BẰNG CSS LÀ CÁCH DUY NHẤT ở đây — không phải lựa chọn cho tiện. * Chuỗi "VIETAPE" được HARDCODE trong PHP của theme cha: * hkt-simple/inc/shortcodes/hkt-slider.php:69 *
VIETAPE
* Nó không đọc từ database, nên không có trường nào trong WP Admin để xoá. * Mà quy tắc dự án thì cấm sửa theme cha. * * (Bản ghi chú đầu của tôi ở đây nói "vào WP Admin xoá trường" — sai, viết * theo phỏng đoán trước khi đọc file shortcode.) */ .slider-wrapper.slider .ten-company.hero-subtitle { display: none; } /* --- 3. Mũi tên slider rơi xuống dưới ------------------------------------ */ /* Đo được `position: relative` trên `.slick-prev` / `.slick-next` — nghĩa là * chúng nằm trong dòng chảy bình thường, nên một cái đội lên trên hàng thẻ và * một cái tụt xuống dưới, cách nhau gần 300px. * * Nguyên nhân: `slick-theme.css` (file đặt `position:absolute; top:50%` cho * hai nút) KHÔNG được nạp trên site này. Luật của tôi trước đó chỉ đặt kích * thước, màu và bo tròn — đúng phần hình dạng, thiếu hẳn phần vị trí, nên nhìn * ra thì nút đẹp mà nằm sai chỗ. * * `.category-slider` đã có `position: relative` nên nó làm mốc được. Sửa ở đây * là sửa cho cả ba mục PRODUCTS, APPLICATIONS và INDUSTRY — chúng dùng chung * lớp này. */ .category-slider .slick-prev, .category-slider .slick-next { position: absolute !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%); margin: 0 !important; z-index: 3; } .category-slider .slick-prev { left: -28px !important; right: auto !important; } .category-slider .slick-next { right: -28px !important; left: auto !important; } /* --- 4. Hai thanh dọc hai bên khối tin ----------------------------------- */ /* "Hai viền" trong ảnh chụp không phải viền của khối nào — đó là hai NÚT của * Owl, đo được 30 × 316px, cao đúng bằng thẻ bài viết. Nguồn gốc nằm ở ba luật * của theme cha, và phải đọc cả ba mới sửa đúng: * * .slider-wrapper .owl-nav [class*="owl-"] position:absolute; top:40%; * bottom:40%; opacity:0 * .slider-wrapper .owl-nav .owl-prev transform:translateX(-10%); * width:30px; height:100% * .slider-wrapper:hover .owl-nav [class*="owl-"] transform:translateX(0) * !important * * BẪY ĐỘ ƯU TIÊN — lý do bản sửa đầu của tôi chỉ ăn một nửa. * Luật thứ ba là (0,4,0) KÈM `!important`. Tôi định căn giữa nút bằng * `transform: translateY(-50%)` ở (0,2,0) — `!important` gặp `!important` thì * độ ưu tiên phân thắng bại, nên transform của tôi bị xoá **đúng lúc rê * chuột**: nút đứng yên khi không chạm, tụt xuống nửa thẻ khi chạm vào. Kiểu * lỗi này rất dễ tưởng là đã sửa xong vì ảnh chụp tĩnh không thấy. * * Nên KHÔNG dùng transform để căn giữa. Dùng `top: 50%` cộng * `margin-top: -21px` (nửa chiều cao) — không luật nào của theme cha đụng tới * margin-top, và kết quả không phụ thuộc trạng thái hover. * * Selector thêm `.slider-wrapper` và `.hktCarousel` để lên (0,4,0) và (0,5,0), * vừa đủ thắng, không thừa. * * Vị trí `left` của nút KHÔNG tính từ `.slider-wrapper` mà từ `.hktCarousel` — * đó mới là tổ tiên định vị gần nhất (`position: relative`). Đã đo: * offsetParent của nút là `.listing-wrap ... hktCarousel`, hộp x=54..1472, * trong khi `.slider-wrapper` là x=0..1526. Xem tiếp mục 5 bên dưới. */ .slider-wrapper:not(.slider) .hktCarousel .owl-nav [class*="owl-"], .slider-wrapper:not(.slider):hover .hktCarousel .owl-nav [class*="owl-"] { width: 42px !important; height: 42px !important; top: 50% !important; bottom: auto !important; margin: -21px 0 0 0 !important; padding: 0 !important; transform: none !important; border-radius: 50% !important; background: rgba(255, 255, 255, .96) !important; border: 1px solid #dfe4ea !important; box-shadow: 0 2px 12px rgba(16, 42, 67, .12) !important; z-index: 3; } /* Theme cha để mũi tên `opacity: 0` cho tới khi rê chuột vào băng chạy. Trên * điện thoại không có hover, nên người dùng không bao giờ biết còn bài phía * sau. Cho hiện thường trực. */ .slider-wrapper:not(.slider) .hktCarousel .owl-nav [class*="owl-"] { opacity: 1 !important; } .slider-wrapper:not(.slider) .hktCarousel .owl-nav .owl-prev { left: -48px !important; right: auto !important; } .slider-wrapper:not(.slider) .hktCarousel .owl-nav .owl-next { right: -48px !important; left: auto !important; } /* Theme cha còn chèn một thẻ `` trong nút và phóng nó lên 26px màu trắng * khi hover. Nó sẽ nằm đè lên mũi tên tôi vẽ bằng CSS. Ẩn đi. */ .slider-wrapper:not(.slider) .hktCarousel .owl-nav i { display: none !important; } /* --- 5. Mũi tên đè lên chữ trong thẻ đầu và cuối ------------------------- */ /* Đo được sau khi sửa vị trí: mũi tên trái chiếm x=6..48, còn chữ trong thẻ * đầu tiên bắt đầu ở x=19. Nút tròn nằm đè lên hai dòng chữ. * * Ba slider kia không gặp lỗi này vì `.category-slider` KHÔNG có * `overflow: hidden`, nên mũi tên đặt được ở `left: -28px` — hẳn ra ngoài * vùng thẻ. Băng chạy của khối tin thì có `overflow: hidden` (theme cha đặt, * và Owl cần nó để cắt các ô ngoài khung), nên đặt âm là bị cắt mất nửa nút. * * Cách còn lại: chừa một khoảng lề cho mũi tên đứng. Vì nút định vị tuyệt đối * ăn theo PADDING BOX của `.slider-wrapper`, `left: 6px` sẽ rơi đúng vào vùng * đệm này, còn thẻ bắt đầu từ mép trong của đệm — hết đè. * * Phạm vi `.hkt-posts` là lớp bọc của shortcode bài viết (hkt-post.php:152), * nên luật chỉ chạm băng chạy tin, không đụng slider khác. */ .hkt-posts .slider-wrapper { padding-left: 54px; padding-right: 54px; } /* Màn hình nhỏ: chỉ hiện 1 thẻ, để 54px mỗi bên là ăn mất 1/4 chiều ngang. * Thu cả lề lẫn nút lại cho cân. */ @media (max-width: 767px) { .hkt-posts .slider-wrapper { padding-left: 40px; padding-right: 40px; } .slider-wrapper:not(.slider) .hktCarousel .owl-nav [class*="owl-"], .slider-wrapper:not(.slider):hover .hktCarousel .owl-nav [class*="owl-"] { width: 34px !important; height: 34px !important; margin-top: -17px !important; } .slider-wrapper:not(.slider) .hktCarousel .owl-nav .owl-prev { left: -37px !important; } .slider-wrapper:not(.slider) .hktCarousel .owl-nav .owl-next { right: -37px !important; } } /* --- 6. Chữ banner tràn khỏi khung và bị cắt đáy ------------------------- */ /* ĐO ĐƯỢC trên production, chuỗi cha của khối chữ: * * .owl-stage-outer.owl-height cao 620 overflow:hidden ← chỗ cắt * .owl-item cao 620 * .item.slide-item cao 620 * .vietape-slider-home cao 620 * .container cao 868 ← tràn ra 248px * .row cao 868 * .hero-style2 cao 868 padding 186px/250px * * Thủ phạm là `style.css:10482` — `.hero-style2 { padding: 186px 0 250px }`, * đệm của mẫu hero nguyên bản mà bộ giao diện cũ để lại. 436px đệm đó đẩy khối * chữ lên 868px trong khi banner chỉ cao 620px, nên phần đáy — đúng chỗ có nút * EXPLORE MORE — bị `overflow: hidden` cắt mất. * * Nội dung THẬT chỉ cao 432px, thừa sức nằm gọn trong 620px. Vấn đề hoàn toàn * là đệm, không phải banner thiếu chỗ. * * Đệm này còn được đặt lại ở ba breakpoint nữa (style.css 10920, 10984, 11025) * với 140/206 và 120/176 — tức mọi cỡ màn hình đều dính. Luật dưới đây ở * (0,3,0) nên thắng cả ba mà không cần `!important` và không cần lặp media * query. */ .slider-wrapper.slider .hero-style2 { padding-top: 0; padding-bottom: 0; } /* Bỏ đệm xong thì khối chữ cao 432px nằm trong khung 620px — nhưng nó sẽ dính * lên MÉP TRÊN, vì `.container` là khối thường nên cao bằng nội dung, và * `align-items: center` của `.row` chỉ căn được trong chiều cao của chính nó. * * Cho `.container` và `.row` cao bằng khung thì hàng mới có 620px để căn giữa, * và `align-items: center` (theme cha đặt inline trên `.row`) mới có tác dụng. * * `.vietape-slider-home` cao 620px cố định — đo được `min-height: auto`, dấu * hiệu nó là flex item đang bị kéo giãn — nên `height: 100%` ở đây có mốc thật * để ăn theo. */ .slider-wrapper.slider .vietape-slider-home > .container, .slider-wrapper.slider .vietape-slider-home > .container > .row { height: 100%; } /* Lớp căn giữa thứ hai, cho trường hợp `.vietape-slider-home` KHÔNG được kéo * giãn. Đã gặp thật: cùng một luật, production căn giữa đúng (lệch 0px) còn * local lệch 94px — vì ở local phần tử này cao theo nội dung, nên `height:100%` * của `.container` không có mốc để ăn theo. * * `.item.slide-item` là flex container (đo được `display: flex`), nên * `align-items: center` căn con của nó theo chiều dọc BẤT KỂ con cao bao nhiêu. * Hai lớp không đá nhau: khi có căn giữa bằng flex thì con không bị kéo giãn, * `height: 100%` thành 100% của chính nó — vô hại. */ .slider-wrapper.slider .item.slide-item { align-items: center; } /* ========================================================================= * MỤC 7 — SỬA BỐN LỖI DO CHÍNH TÔI GÂY RA, TÌM RA BẰNG ĐỢT RÀ SOÁT 09/09/2026 * ========================================================================= * Cả bốn đều là lỗi ĐỘ ƯU TIÊN, và ba trong bốn chỉ lộ ra khi RÊ CHUỘT hoặc * trên màn hình hẹp — tức không ảnh chụp tĩnh nào ở desktop phát hiện được. */ /* --- 7a. Mũi tên BANNER mất `position: absolute` ------------------------- */ /* Khối mũi tên chung ở trên trước đây khai `position: relative`. Nó ở (0,3,0), * HOÀ với luật `.slider-wrapper .owl-nav [class*="owl-"] { position: absolute }` * của theme cha — mà CSS của child nạp SAU, nên khi hoà thì child thắng. * * Hậu quả: hai nút của banner rơi khỏi lớp định vị tuyệt đối, tụt xuống dòng * chảy bên trong `.owl-nav` (nằm sau `.owl-stage-outer`), rồi bị luật * `top: 50% !important` đẩy tiếp — mũi tên banner nằm hẳn dưới banner. * * BẤT ĐỐI XỨNG DỄ LÀM BỎ SÓT: cũng trong khối đó, nhánh `.hktCarousel .owl-prev` * chỉ là (0,2,0) nên THUA theme cha — khối tin vẫn absolute và vẫn đúng. Nhìn * khối tin thấy ổn rất dễ kết luận cả hai đều ổn. * * Sửa bằng cách BỎ HẲN `position` khỏi khối chung: mũi tên slick đã có * `position: absolute !important` riêng, còn mũi tên owl thì theme cha lo. */ .slider-wrapper.slider .owl-prev, .slider-wrapper.slider .owl-next { position: absolute; } /* --- 7b. Mũi tên slick tụt 21px đúng lúc rê chuột ------------------------ */ /* Căn giữa dọc dùng `transform: translateY(-50%)` ở (0,2,0). Luật hover của * chính tôi `.category-slider .slick-prev:hover` ở (0,3,0) khai lại * `transform: scale(1.06)` — cao hơn nên THẮNG, xoá luôn phần `-50%`, và nút * rơi xuống đúng nửa chiều cao (42/2 = 21px). * * Đây ĐÚNG loại lỗi tôi đã sửa cho Owl vài giờ trước rồi lặp lại nguyên xi cho * Slick. Bài học: khi căn giữa bằng transform, MỌI luật hover trên cùng phần * tử phải viết lại đủ cả chuỗi transform. */ .category-slider .slick-prev:hover, .category-slider .slick-next:hover { transform: translateY(-50%) scale(1.06); } /* --- 7c. Rê chuột vào mũi tên khối tin thì mũi tên BIẾN MẤT -------------- */ /* Luật hover chung đổi nền sang #08A6D9 và đổi mũi tên (`::after`) sang trắng. * Nhưng nó ở (0,3,0), còn luật đặt nền trắng cho mũi tên khối tin ở (0,4,0) — * nên NỀN VẪN TRẮNG trong khi mũi tên đã chuyển trắng. Trắng trên trắng. * * Chỉ `::after` đổi màu được, nền thì không: đúng kiểu lỗi làm nút trông như * biến mất chứ không phải như hỏng, nên rất khó bị báo lại. */ .slider-wrapper:not(.slider) .hktCarousel .owl-nav [class*="owl-"]:hover { background: #08A6D9 !important; border-color: #08A6D9 !important; } /* --- 7d. Mũi tên slick lòi ra ngoài khung trên màn hình hẹp -------------- */ /* Bộ giao diện nạp cứng trong `header.php` có luật ẩn `.slick-arrow` từ 1200px * trở xuống. Khối mũi tên của tôi đặt `display: inline-flex !important` ở * (0,2,0), thắng luật đó ở (0,1,0), nên mũi tên hiện lại trên tablet và điện * thoại — cộng với `left: -28px` thì nút nằm ngoài mép `.container` (chỉ còn * 15px đệm), bị cắt hoặc lọt khỏi khung nhìn. * * Giữ mũi tên (điện thoại không có hover nên ẩn đi là mất đường điều hướng) * nhưng thu nhỏ và kéo vào trong. */ @media (max-width: 1200px) { .category-slider .slick-prev, .category-slider .slick-next { width: 34px; height: 34px; } .category-slider .slick-prev { left: -6px !important; } .category-slider .slick-next { right: -6px !important; } } /* Ghi chú về một luật CỐ Ý để chết: hiệu ứng `scale(1.06)` khi hover không * chạy cho mũi tên Owl, vì luật `transform: none !important` ở mục 4 xoá nó. * Đó là chủ đích — `transform: none` chính là thứ chặn `translateX(0)` mà * theme cha ép khi hover. Đừng "sửa" bằng cách gỡ `transform: none`, làm vậy * là mang lỗi nhảy vị trí quay lại. */ /* --- 7e. Banner lệch tâm dọc trở lại sau khi gỡ rò `display:flex` -------- */ /* Đo ngay sau khi khoanh vùng `blog-card.css`: banner lệch tâm dọc -42px, dù * trước đó đo được 0px. * * Lý do đáng ghi lại: phần căn giữa của tôi (`align-items: center` trên * `.item.slide-item`) chỉ chạy được vì phần tử đó ĐANG LÀ flex container — mà * `display: flex` ấy đến từ chính luật rò của `blog-card.css`. Tức là bản sửa * banner trước đây đứng được nhờ một lỗi khác, và gỡ lỗi kia đi thì nó sập. * * Hai lỗi che nhau: một cái làm banner co lại còn 1250px, cái kia bù lại bằng * cách căn giữa. Đo riêng từng cái thì cả hai đều "đúng". * * Nay khai `display: flex` TƯỜNG MINH, không mượn của ai. Kèm `width: 100%` * cho phần tử con, vì flex item mặc định co về `max-content` — đúng cơ chế đã * làm banner thành 1250px lần trước. */ .slider-wrapper.slider .item.slide-item { display: flex; align-items: center; } .slider-wrapper.slider .vietape-slider-home { flex: 1 1 auto; width: 100%; } /* --- 7f. Mũi tên banner nằm sát mép trên -------------------------------- */ /* Sau khi trả `position: absolute` về cho mũi tên banner, chúng nằm đúng theo * luật của theme cha: `top: -2px; bottom: 0; height: 100%`. Nhưng khối mũi tên * chung của tôi đặt `height: 42px`, thắng `height: 100%` — nên nút thành một * hình tròn 42px neo ở MÉP TRÊN. Đo được: tâm nút y=107, tâm banner y=398, * lệch 291px. * * Đây là hệ quả của việc sửa nửa vời: trả lại `position` mà không trả lại * `top`. Hai thuộc tính đó phải đi cùng nhau. * * Dùng đúng cách đã dùng cho khối tin — `top: 50%` + `margin-top: -21px`, * không dùng transform — vì theme cha ép `transform: translateX(0) !important` * khi hover, và đó chính là cái bẫy đã mất một vòng mới tìm ra. * * Cho hiện thường trực: theme cha để `opacity: 0` tới khi rê chuột, mà banner * có hai slide nên người dùng cần biết là có thể chuyển. */ .slider-wrapper.slider .owl-nav [class*="owl-"], .slider-wrapper.slider:hover .owl-nav [class*="owl-"], .slider-wrapper.slider .owl-nav [class*="owl-"]:hover { /* width/height PHAI co !important — xem ghi chu 7i cuoi file. */ width: 42px !important; height: 42px !important; top: 50% !important; bottom: auto !important; margin-top: -21px !important; transform: none !important; opacity: 1 !important; } /* Banner cũng có `overflow: hidden`, nên đặt âm là bị xén. Kéo vào trong. */ .slider-wrapper.slider .owl-nav .owl-prev { left: 14px !important; right: auto !important; } .slider-wrapper.slider .owl-nav .owl-next { right: 14px !important; left: auto !important; } /* Thẻ `` theme cha chèn trong nút cũng phải ẩn ở banner, cùng lý do như * khối tin: nó phóng lên 26px màu trắng khi hover và đè lên mũi tên vẽ bằng * CSS. */ .slider-wrapper.slider .owl-nav i { display: none !important; } /* --- 7g. Chữ banner nhảy vị trí khi slide xoay --------------------------- */ /* Sau khi thay 2 slide trùng nhau bằng 4 slide khác nội dung, khối chữ mỗi * slide cao một khác — đo được 432, 252, 432, 342px. Khối được căn giữa theo * chiều dọc nên TÂM đứng yên, nhưng dòng tiêu đề thì nhảy lên nhảy xuống tới * 90px mỗi lần chuyển slide. Mắt bám vào dòng chữ, không bám vào tâm khối. * * Cho mỗi dòng một sàn bằng 2 dòng chữ. Dùng đơn vị `lh` (= line-height hiện * hành) chứ không phải px: cỡ chữ banner đổi theo breakpoint, viết cứng 180px * là sai ngay ở màn hình nhỏ. * * Trình duyệt không hiểu `lh` sẽ bỏ qua dòng này và quay về hành vi hiện tại — * mất hiệu quả, không vỡ gì. */ .slider-wrapper.slider .ten-title, .slider-wrapper.slider .ten-sub-title { min-height: 2lh; } /* --- 7h. Mỗi slide banner một màu nền riêng ------------------------------ */ /* Bốn slide dùng bốn file ảnh, nhưng ba trong số đó là ba góc cắt của CÙNG * một cuộn băng chống trượt — thư viện không có ảnh tách nền nào khác (đã kiểm * 132 file PNG: 130 cái nền vẫn đục màu trắng, hiện lên nền tối thành ô * trắng). Nên riêng ảnh thì chưa đủ để bốn slide nhìn khác nhau. * * CÁCH ĐỔI MÀU Ở ĐÂY * Banner có một lớp phủ `.hero-bg-color` với `mix-blend-mode: hue` — nó áp SẮC * của mình lên nền phía dưới. Lớp này nằm NGOÀI vòng lặp slide nên chỉ có một * cái cho cả bốn. * * `:has()` giải được: bắt lớp bọc theo ảnh của slide ĐANG hiện, rồi đổi màu * lớp phủ. Owl tự gắn `.active` nên luật cập nhật theo mỗi lần chuyển slide. * * Đã thử trên chính production trước khi viết: chuyển sang slide `888.png` thì * nền đổi sang `rgb(0, 162, 181)`, và cuộn băng vàng GIỮ NGUYÊN màu — vì ảnh * sản phẩm nằm trên lớp phủ trong thứ tự xếp chồng, không bị hue chạm tới. * * Bốn sắc chọn cách nhau ~25° trên vòng màu, đều nằm trong dải lạnh để không * lệch khỏi tông kỹ thuật của thương hiệu. */ .slider-wrapper.slider:has(.owl-item.active img[src*="hero-thumb-2-5-2"]) .hero-bg-color { background: #0055e0 !important; /* xanh dương — slide định vị */ } .slider-wrapper.slider:has(.owl-item.active img[src*="888"]) .hero-bg-color { background: #0098b0 !important; /* teal — hợp với cuộn băng vàng */ } .slider-wrapper.slider:has(.owl-item.active img[src*="hero-thumb-2-5-1"]) .hero-bg-color { background: #00b389 !important; /* xanh lục lam */ } .slider-wrapper.slider:has(.owl-item.active img[src*="hero-thumb-2-5.png"]) .hero-bg-color { background: #3a2ae0 !important; /* chàm */ } /* Chuyển màu mềm thay vì nhảy cóc khi đổi slide. */ .slider-wrapper.slider .hero-bg-color { transition: background-color .6s ease; } /* --- Chuẩn hoá khung ảnh sản phẩm trên banner ---------------------------- */ /* Bốn ảnh có tỉ lệ khác nhau — 836, 964 và 1190px ngang trên cùng 626px cao. * Template in `width="100%"` nên ảnh rộng hơn sẽ render THẤP hơn, làm bố cục * nhấp nhô mỗi lần chuyển slide. Cố định chiều cao và để `object-fit: contain` * lo phần còn lại: không méo, không cắt, mọi slide cùng một khung. */ .slider-wrapper.slider .col-md-7 img { height: 420px; width: 100%; object-fit: contain; object-position: center right; } @media (max-width: 991px) { .slider-wrapper.slider .col-md-7 img { height: 240px; } } /* --- Chấm chỉ báo banner ------------------------------------------------- */ /* Xem `assets/js/home.js` để biết vì sao phải tự dựng thay vì bật `dots` của * Owl: thuộc tính `pagination` của shortcode theme cha không được nối vào * `shortcode_atts` nên luôn rỗng. * * BẢN ĐẦU BỊ CHÊ THÔ, và đúng: bốn thanh 34×4px căn giữa đáy banner, không * liên quan gì tới phần chữ nằm bên trái. Hai chỗ sai: * - hình gạch dài trông như thanh trạng thái chứ không như nút chọn * - căn giữa trong khi toàn bộ nội dung banner căn trái * * Nay là chấm tròn nhỏ, xếp thẳng hàng với mép trái của chữ — dùng đúng chiều * rộng và đệm của `.container` để tự khớp ở mọi bề ngang màn hình. Chấm đang * xem kéo dài thành viên thuốc, đủ để nhận ra mà không ồn. */ .slider-wrapper.slider .vt-hero-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 34px; z-index: 4; width: min(1250px, 100% - 30px); padding-left: 15px; display: flex; justify-content: flex-start; align-items: center; gap: 9px; pointer-events: none; } .slider-wrapper.slider .vt-hero-dots button { pointer-events: auto; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .3); cursor: pointer; transition: background .22s ease, width .22s ease; } .slider-wrapper.slider .vt-hero-dots button:hover { background: rgba(255, 255, 255, .6); } .slider-wrapper.slider .vt-hero-dots button.dang-xem { width: 26px; background: #08A6D9; } .slider-wrapper.slider .vt-hero-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (max-width: 767px) { .slider-wrapper.slider .vt-hero-dots { bottom: 18px; } } /* --- Màu riêng cho từng slide, đủ mạnh để nhìn ra -------------------------- * * Bản trước chỉ đổi SẮC của lớp phủ `mix-blend-mode: hue`. Trên một nền gần * như đen, hue chỉ ăn vào mấy vệt sáng mảnh — nên bốn slide vẫn đọc ra là * "cùng một màu xanh tối". Long báo đúng: nhìn vẫn giống hệt nhau. * * Thêm một quầng sáng lớn phía sau sản phẩm, đặt lệch sang PHẢI để không phủ * lên vùng chữ bên trái — chữ trắng trên nền tối phải giữ nguyên độ tương phản. * * Màu quầng khai bằng biến `--vt-glow` trên lớp bọc, nên chỉ cần một luật vẽ * và bốn dòng khai màu; không phải lặp lại cả khối gradient bốn lần. */ .slider-wrapper.slider .as-hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 78% at 72% 52%, var(--vt-glow, rgba(0, 85, 224, .40)) 0%, transparent 68%); pointer-events: none; } .slider-wrapper.slider:has(.owl-item.active img[src*="hero-thumb-2-5-2"]) { --vt-glow: rgba(0, 85, 224, .42); /* xanh dương */ } .slider-wrapper.slider:has(.owl-item.active img[src*="888"]) { --vt-glow: rgba(0, 168, 180, .42); /* teal */ } .slider-wrapper.slider:has(.owl-item.active img[src*="hero-thumb-2-5-1"]) { --vt-glow: rgba(0, 165, 118, .40); /* xanh lục */ } .slider-wrapper.slider:has(.owl-item.active img[src*="hero-thumb-2-5.png"]) { --vt-glow: rgba(122, 62, 226, .42); /* tím */ } .slider-wrapper.slider .as-hero-bg::after { transition: background .6s ease; } /* ========================================================================= * BANNER NỀN SÁNG — 10/09/2026 * ========================================================================= * Long hỏi: "banner đâu nhất thiết phải nền tối?". Đúng, và đổi sang sáng gỡ * được nút thắt lớn nhất của cả mục banner. * * NÚT THẮT: kho ảnh chỉ có 4 file tách nền dùng được trên nền tối, và cả 4 là * cùng một cuộn băng chống trượt. 130 file PNG sản phẩm còn lại đều nền TRẮNG * ĐỤC nên đặt lên nền tối thành ô trắng. * * Đã thử tách nền tự động bằng Imagick (tô loang từ 4 góc): hai ảnh sạch, * nhưng cuộn băng đồng thì LÕI TRẮNG Ở GIỮA vẫn trắng — tô loang không với * tới vùng kín bên trong. Mà lõi cuộn thì gần như sản phẩm nào của Vietape * cũng có. Nên tách nền hàng loạt sẽ hỏng đúng loại hàng chính. * * NỀN SÁNG GIẢI QUYẾT TRIỆT ĐỂ: nền chuyển sang TRẮNG HẲN ở phía phải, đúng * chỗ đặt sản phẩm — ảnh nền trắng hoà vào không thấy mép, không cần xử lý ảnh * nào cả. Còn hai ảnh anti-slip vốn đã tách nền thì nằm trên nền sáng vẫn đẹp. * * Nó cũng hợp với phần còn lại của trang hơn: năm mục dưới banner đều sáng * (xám/trắng), chỉ mỗi banner tối — banner đang là ngoại lệ chứ không phải quy * tắc. * * CÁCH LÙI LẠI: xoá trọn khối này. Không luật nào ở đây sửa dữ liệu, tất cả * chỉ đè lên phần nền tối phía trên. */ /* Nền: tối -> sáng, và trắng hẳn ở phía phải để ảnh sản phẩm hoà vào. */ body.home .slider-wrapper.slider .as-hero-bg { background-image: none !important; background: linear-gradient(90deg, #e3ecf6 0%, #eef4fb 22%, #ffffff 41%) !important; } /* Lớp phủ `mix-blend-mode: hue` chỉ có nghĩa trên nền tối. Trên nền sáng nó * làm bợt màu sản phẩm. Tắt. */ body.home .slider-wrapper.slider .hero-bg-color { display: none !important; } /* Màu riêng từng slide chuyển sang vệt loang nhạt phía SAU PHẦN CHỮ (bên * trái), không phải sau sản phẩm — bên phải phải giữ trắng để ảnh hoà vào. */ body.home .slider-wrapper.slider .as-hero-bg::after { background: radial-gradient(54% 72% at 16% 50%, var(--vt-glow-sang, rgba(11, 92, 171, .16)) 0%, transparent 72%); } body.home .slider-wrapper.slider:has(.owl-item.active img[src*="hero-thumb-2-5-2"]) { --vt-glow-sang: rgba(11, 92, 171, .18); /* xanh dương */ } body.home .slider-wrapper.slider:has(.owl-item.active img[src*="aluminum-foil-tape"]) { --vt-glow-sang: rgba(0, 150, 168, .18); /* teal */ } body.home .slider-wrapper.slider:has(.owl-item.active img[src*="foam"]) { --vt-glow-sang: rgba(0, 150, 108, .16); /* xanh lục */ } body.home .slider-wrapper.slider:has(.owl-item.active img[src*="copper-foil-tape"]) { --vt-glow-sang: rgba(178, 96, 32, .16); /* nâu đồng, hợp với màu sản phẩm */ } /* --- Chữ phải đảo màu theo nền ------------------------------------------ */ /* Chữ trắng trên nền sáng là không đọc được. Tiêu đề dùng navy của bảng màu; * dòng nhấn dùng #0b5cab chứ KHÔNG dùng cyan #08A6D9 — cyan trên nền trắng chỉ * đạt 2.8:1, trượt chuẩn AA. #0b5cab đạt 5.9:1. */ body.home .slider-wrapper.slider .ten-title, body.home .slider-wrapper.slider .ten-title * { color: #16283d !important; } body.home .slider-wrapper.slider .ten-sub-title, body.home .slider-wrapper.slider .ten-sub-title * { color: #0b5cab !important; } /* Nút chính: nền cyan chữ tối trên nền sáng bị chìm. Tô đặc navy, chữ trắng. */ body.home .slider-wrapper.slider .hkt-btn.primary { background: #0b5cab !important; color: #fff !important; border-color: #0b5cab !important; } body.home .slider-wrapper.slider .hkt-btn.primary:hover { background: #08A6D9 !important; border-color: #08A6D9 !important; } /* --- Mũi tên và chấm phải đổi theo nền sáng ----------------------------- */ body.home .slider-wrapper.slider .owl-nav [class*="owl-"] { background: #fff !important; border-color: #c6d4e2 !important; box-shadow: 0 2px 10px rgba(16, 42, 67, .10) !important; } body.home .slider-wrapper.slider .vt-hero-dots button { background: rgba(16, 42, 67, .22); } body.home .slider-wrapper.slider .vt-hero-dots button:hover { background: rgba(16, 42, 67, .45); } body.home .slider-wrapper.slider .vt-hero-dots button.dang-xem { background: #0b5cab; } /* --- Bố cục banner bị trống ---------------------------------------------- */ /* Đo được: chữ kết thúc ở x=642, khung ảnh x=672..1389. Nhưng khung KHÔNG phải * là sản phẩm: `object-fit: contain` co ảnh về đúng tỉ lệ rồi `object-position: * center right` đẩy nó sát mép phải. Với ảnh vuông cao 420px, sản phẩm chỉ * rộng 420px và bắt đầu ở x=969 — tức KHOẢNG TRỐNG THẬT giữa chữ và sản phẩm * là 327px, không phải 30px như số đo khung nói. * * Nền tối che được khoảng trống đó; nền sáng thì không, nên lỗi này chỉ lộ ra * sau khi đổi nền. * * Hai việc: phóng ảnh to hơn (420 -> 500px) và bỏ `center right` để sản phẩm * về giữa cột. Khoảng trống còn ~138px — đủ để hai khối tách bạch mà không * thành hố. */ body.home .slider-wrapper.slider .col-md-7 img { height: 500px; object-position: center; } @media (max-width: 991px) { body.home .slider-wrapper.slider .col-md-7 img { height: 260px; } } /* --- Vì sao gradient banner phải trắng hẳn từ 41% ------------------------ * * Sau khi phóng ảnh từ 420 lên 500px, HỘP nền trắng của ảnh lộ ra thành một * hình chữ nhật trắng có cạnh rõ ở x≈795 — vì gradient khi ấy mới trắng hẳn từ * 66% (x≈1007), còn hộp ảnh đã bắt đầu từ x=672. * * Ảnh to hơn thì hộp trắng cũng to hơn, nên bản sửa "cho bớt trống" lại tự tạo * ra lỗi mới. Chỗ này phải tính theo HỘP ảnh chứ không theo cảm giác. * * Đổi sang `90deg` (ngang hẳn) để mốc phần trăm ánh xạ thẳng sang toạ độ x — * với góc chéo thì 41% không còn là 41% chiều ngang nữa. Trắng hẳn từ 41% * (x≈626 ở màn 1526), sớm hơn mép trái hộp ảnh (672). Phần chuyển màu dồn về * bên trái, đúng chỗ có chữ, cũng là chỗ đặt vệt màu riêng của từng slide. */ /* --- 7i. "Vạch dọc" ở mép phải: nút next phồng ra khi rê chuột ----------- */ /* Long báo còn một vạch dọc mảnh gần mũi tên. Tôi soi hai lần ở hai bề ngang * khác nhau và KHÔNG thấy gì — vì nó chỉ hiện khi RÊ CHUỘT tới, mà chuột tự * động của tôi không kích hoạt được `:hover`. * * Manh mối nằm trong chính ảnh chụp: con trỏ của Long là BÀN TAY CHỈ ngay cạnh * vạch, tức chỗ đó có phần tử bấm được trải dài. * * Thủ phạm, trong `hktheme.min.css` của theme cha: * * .slider-wrapper .owl-nav .owl-next, * .slider-wrapper .owl-nav .owl-next:hover { width: 30px; height: 100% } * * Nhánh `:hover` ở (0,4,0), cao hơn luật (0,3,0) không `!important` của tôi. * Nên vừa rê chuột tới là nút phồng từ 42×42 thành 30px × TRỌN CHIỀU CAO * banner. Cộng với viền `#c6d4e2` tôi đặt, nó vẽ ra đúng một vạch dọc mảnh * chạy suốt — và vì vẫn là nút nên con trỏ hoá bàn tay. * * Khối tin không dính lỗi này vì luật của nó ở (0,5,0) kèm `!important`. Đúng * cùng kiểu BẤT ĐỐI XỨNG đã gây lỗi mất mũi tên banner hôm qua: sửa cho một * nhánh, quên nhánh còn lại, rồi nhìn nhánh đã sửa mà tưởng cả hai đều xong. * * Bài học ghi lại: mỗi khi đè kích thước một phần tử của theme cha, phải kiểm * luôn xem theme cha có khai lại kích thước đó trong `:hover` không — `:hover` * cộng thêm một bậc độ ưu tiên, đủ để lật ngược kết quả. */ /* --- Hàng APPLICATIONS bị khung đôi -------------------------------------- */ /* Bộ biểu tượng của mục APPLICATIONS có sẵn MỘT Ô VUÔNG VẼ TRONG FILE ẢNH — * cả 12 cái đều thế. Cộng với viền của thẻ thành hai khung lồng nhau, và vì * ô vuông vẽ sẵn nằm sát mép sau khi cắt viền thừa, hai đường viền chạy song * song cách nhau vài pixel — kiểu chi tiết trông như lỗi in. * * Không xoá được ô vuông kia bằng CSS vì nó là nét vẽ trong ảnh. Nên bỏ viền * THẺ đi, để ô vuông vẽ sẵn làm khung. Giữ phản hồi khi rê chuột bằng đổ bóng * thay cho đổi màu viền. * * Chỉ áp cho khối APPLICATIONS (`8adead4`); hai hàng kia dùng ảnh chụp không * có khung vẽ sẵn nên vẫn cần viền thẻ. */ /* CAP NHAT 10/09/2026: bo bieu tuong da thay bang SVG tu ve, KHONG con o vuong * ve san trong anh nua — nen vien the phai quay lai, khong thi hang nay thanh * cac bieu tuong troi khong co ranh gioi. Giu lai ghi chu tren de nguoi doc sau * hieu vi sao tung co luat nay. */ body.home .elementor-element-8adead4 .category-slider .slide > a { padding: 14px; } /* ========================================================================= * NHỊP NỀN — bố cục lại màu toàn trang, 10/09/2026 * ========================================================================= * ĐO TRƯỚC KHI SỬA (production, trang cao 4571px): * * y=746 PRODUCTS #f5f7f9 xám 58 thẻ trắng * y=1407 APPLICATIONS #ffffff trắng 28 thẻ trắng <- lỗi * y=2032 INDUSTRY #0e2a47 navy 24 thẻ trắng * y=2602 Helping Center #ffffff trắng 3 thẻ trắng * y=3086 VIETAPE NEWS #f5f7f9 xám 14 thẻ trắng * y=3717 dải tìm kiếm #0e2a47 navy * y=3940 chân trang #1b2024 đen * * BA VẤN ĐỀ, tách bạch: * * 1. THẺ TRẮNG TRÊN NỀN TRẮNG Ở APPLICATIONS. * Đúng lỗi đã sửa cho PRODUCTS ngày 08/09 bằng cách cho nó nền xám, nhưng * lúc đó tôi chỉ nhìn PRODUCTS. Bằng chứng nhìn thấy được: chụp một ảnh có * cả hai mục — thẻ PRODUCTS trên nền xám hiện rõ ranh giới, thẻ * APPLICATIONS trên nền trắng chỉ còn 12 biểu tượng trôi lơ lửng. Cùng bộ * biểu tượng ấy đặt trên nền navy ở mục INDUSTRY thì nổi bật nhất trang. * Nền quyết định, không phải biểu tượng. * * 2. HAI PHẦN BA TRANG ĐẦU KHÔNG CÓ ĐIỂM NHÌN NÀO. * Từ khi banner đổi sang nền sáng, đoạn 0 -> 2032px chỉ còn sáng-trên-sáng. * Mắt không có chỗ dừng, nên người xem lướt qua cả PRODUCTS lẫn * APPLICATIONS — hai mục điều hướng chính. * * 3. HAI DẢI TỐI GIỐNG HỆT NHAU. * INDUSTRY (y=2032) và dải tìm kiếm (y=3717) cùng đúng một màu #0e2a47. * Ngày 08/09 tôi gộp chúng lại vì trước đó chúng lệch nhau một cách vô * nghĩa (#0e2a47 với #144d85). Gộp là đúng ở thời điểm đó, nhưng bằng * nhau tuyệt đối thì lại thành vấn đề khác: không cái nào được ưu tiên. * * NHỊP MỚI — một dốc lên rồi một chỗ nghỉ: * * banner sáng, chuyển xanh nhạt sang trắng * PRODUCTS #f5f7f9 xám trung tính * APPLICATIONS #e3edf8 xanh nhạt <- ĐỔI * INDUSTRY #0e2a47 navy đậm <- đỉnh của dốc * Helping Center #ffffff trắng <- chỗ nghỉ, và là mục chuyển đổi * VIETAPE NEWS #f5f7f9 xám trung tính * dải tìm kiếm navy -> xanh thương hiệu <- ĐỔI (ở site.css) * chân trang #1b2024 đen * * VÌ SAO #e3edf8 CHỨ KHÔNG PHẢI MỘT MÀU XÁM NỮA * Ngày 08/09 tôi đã mắc lỗi dùng đồng thời #f5f7f9 và #f8f9fa — lệch 3/255, * mắt không thấy, chỉ tổ làm bảng màu có hai token cho một vai trò. Nếu giờ * cho APPLICATIONS một màu xám thứ hai thì lặp lại đúng lỗi ấy. * * #e3edf8 lệch theo TÔNG chứ không theo độ sáng: nó cùng họ với #0b5cab, nên * đọc ra là "giấy xanh" chứ không phải "xám hơi khác". Số đo: * * thẻ trắng trên #f5f7f9 tỉ lệ tương phản 1.07 * thẻ trắng trên #e3edf8 tỉ lệ tương phản 1.18 <- tách gấp ~2.5 lần * * VÌ SAO INDUSTRY ĐƯỢC GIỮ MÀU KHÁC HẲN * Long hỏi để một mục màu khác như vậy có hợp lý không. Có, và giờ còn hợp lý * hơn lúc mới đặt: * - Trang cao 4571px. Không có chỗ ngắt chương thì người xem không biết * mình đang ở đâu; một dải tối ở khoảng giữa làm đúng việc đó. * - Từ khi banner sáng lên, đây là khối tối DUY NHẤT trong hai phần ba đầu. * - Nó không lạc bảng màu: #0e2a47 cùng họ với #0b5cab của mọi nét nhấn * khác. Cái từng lạc là #343a40 — xám than mặc định của Bootstrap — và * đã bỏ ngày 08/09. * - Chữ trắng trên #0e2a47 đạt 14.8:1, vượt xa ngưỡng AA 4.5:1. * Nói cách khác: khác màu không phải vấn đề, khác BẢNG MÀU mới là vấn đề. */ /* --- Khe trắng giữa hai dải màu ------------------------------------------ */ /* Hai khối mang sẵn class Bootstrap `mt-5` / `mt-4` từ trình dựng trang, tức * 48px và 24px margin ở NGOÀI nền của chúng. Lúc mọi khối đều trăng trắng thì * không ai thấy; đổi APPLICATIONS sang xanh là lộ ngay một vạch trắng chạy * ngang giữa mục xám và mục xanh — trông như lỗi tràn chứ không như khoảng * cách có chủ ý. * * Khoảng cách đã nằm trong `padding` 72px của chính khối rồi, nên bỏ margin đi * là đủ; các dải màu dính liền nhau và nhịp mới đọc được. */ body.home .elementor-element-8de73d5, body.home .elementor-element-eb72302 { margin-top: 0 !important; } /* --- Tiêu đề mục về đúng bảng màu ---------------------------------------- */ /* Đo được: "Find solutions by Applications" là rgb(68,68,68) — xám mặc định, * không liên quan gì tới thương hiệu. Dòng nhãn nhỏ phía trên nó thì đã cyan, * nên trong cùng một cụm hai dòng có một dòng thuộc bảng màu và một dòng * không. Đưa dòng lớn về navy: cùng màu với khối INDUSTRY và với chân trang, * và tương phản trên nền sáng còn cao hơn xám cũ. */ body.home .ape-mo-home-product .elementor-heading-title { color: #0e2a47; } /* Trừ mục INDUSTRY — ở đó nền tối nên chữ phải trắng, giữ nguyên. */ body.home .elementor-element-3bfc492 .ape-mo-home-product .elementor-heading-title { color: #fff; } /* --- Thẻ nổi lên khi rê chuột -------------------------------------------- */ /* Cả ba slider đều là ô bấm được, nhưng không ô nào phản hồi khi rê chuột — * nên trông như ảnh minh hoạ chứ không như thứ bấm được. Nhấc thẻ lên 3px và * cho viền chuyển sang xanh thương hiệu. * * `will-change` cố ý KHÔNG dùng: 130 thẻ trên một trang, mỗi thẻ một lớp * hợp thành là đủ để làm chậm cuộn trên máy yếu. */ .category-slider .slide > a { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .category-slider .slide > a:hover { transform: translateY(-3px); border-color: #08A6D9 !important; box-shadow: 0 8px 20px rgba(11, 92, 171, .16); } /* Trên nền navy, đổ bóng xanh nhạt không nhìn thấy — dùng bóng đậm thay. */ body.home .elementor-element-3bfc492 .category-slider .slide > a:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .35); } /* KHÔNG BỎ ĐƯỢC KHỐI DƯỚI, nếu không cái nhấc 3px ở trên thành lỗi. * * Đo được: thẻ nằm SÁT mép trên của `.slick-list`, mà `.slick-list` thì * `overflow: hidden` (Slick bắt buộc phải thế để giấu các slide bên cạnh). * Nhấc thẻ lên 3px là 3px đó bị cắt cụt, và cả vệt bóng phía trên cũng mất — * kết quả là thẻ trông như bị xén mép chứ không như được nhấc lên. * * Đúng cùng họ với lỗi mũi tên banner: một `overflow: hidden` của thư viện * ngoài âm thầm cắt thứ mình vừa đặt ra ngoài khung. * * Cách chữa: cho `.slick-list` 14px đệm dọc rồi trừ lại đúng 14px bằng lề âm. * `overflow` cắt ở mép HỘP ĐỆM, nên phần đệm là chỗ trống thật để bóng và cú * nhấc có nơi hiện ra; lề âm kéo lại nên không khối nào xê dịch. * * CHỈ ĐỆM DỌC. Slick lấy chiều rộng của `.slick-list` để chia chiều rộng mỗi * slide, nên đệm ngang sẽ làm hẹp thẻ. Đã đo trước và sau: chiều rộng * `.slick-list` 1225px và chiều rộng thẻ 209px đều không đổi. */ .category-slider .slick-list { padding-top: 14px !important; padding-bottom: 14px !important; margin-top: -14px !important; margin-bottom: -14px !important; } /* --- Thanh breadcrumb rỗng ngay dưới banner ------------------------------ */ /* `templates/page-home.php` in ra `.ws-breadcrumbs` rồi gọi `hkt_breadcrumbs()`. * Ở TRANG CHỦ hàm đó không in gì — breadcrumb của trang chủ vốn vô nghĩa. Nhưng * cái div bọc vẫn còn `pb-3` (16px đệm) và `border-bottom`, nên nó vẽ ra một * vạch ngang mảnh cao 16px ngay dưới banner. * * Đo được: y=613, cao đúng 16px, không một ký tự nào bên trong. * * Trước đây nó lẫn vào khoảng trắng giữa banner cũ và mục PRODUCTS nên không ai * để ý. Từ khi banner thành video tràn viền, nó nằm giữa mép dưới video và dải * xám của PRODUCTS — thành một vạch lạc, đúng loại chi tiết đã phải sửa hai lần * hôm nay. * * Chỉ ẩn ở TRANG CHỦ. Các trang khác vẫn cần breadcrumb thật. * * `!important` là BẮT BUỘC, không phải cho chắc. Div đó mang class * `d-none d-sm-none d-md-block` của Bootstrap, mà toàn bộ nhóm utility display * của Bootstrap khai `display: block !important` theo thiết kế — để chúng luôn * thắng. Luật không `!important` của tôi thua bất kể độ ưu tiên bao nhiêu. * Đã đo: bản đầu không có `!important` thì `getComputedStyle` vẫn trả `block`. */ body.home .ws-page-default > .ws-breadcrumbs { display: none !important; }