/* ========================================================================== MR.VŨ — Khung widget sidebar trang chủ ("Phong cách quạt trần" / "Nhu cầu lắp quạt trần") -------------------------------------------------------------------------- File này CHỈ chỉnh khung: bo góc, khoảng cách, hiệu ứng hover, gạch màu trước tiêu đề. Font chữ đã do mrvu-typography.css xử lý ở lớp trước — không lặp lại ở đây để tránh hai file cùng ghi đè một thuộc tính. PHẠM VI: mọi selector đều bắt đầu bằng "#banner_home .mrvu-catbox-section". ĐÃ SỬA LẦN 3 — đổi hướng hoàn toàn: hoá ra vấn đề gốc không phải chọn sai class (đã sửa ở lần 1) hay thiếu bề rộng (lần 2, làm 2 widget xếp CẠNH NHAU — sai hướng). Nhìn lại home.php (file "Home" còn lại, vẫn dùng đúng cấu trúc gốc) mới phát hiện: .mrvu-catbox-section LẼ RA phải nằm trong .col-md-3, đứng CẠNH .col-md-9 (khối video) trên CÙNG một hàng — 2 widget bên trong nó xếp CHỒNG DỌC bình thường, không phải xếp ngang. Bản home1.php trước đó tách .mrvu-catbox-section ra một .container RIÊNG, đứng TRÊN khối video thay vì ĐỨNG CẠNH — khiến nó tự giãn full-width. Đã sửa HTML trong home1.php (đưa vào đúng .col-md-3 cùng hàng với .col-md-9) — file CSS này giờ chỉ cần lo trang trí, việc xếp cột đã do Bootstrap grid có sẵn của theme xử lý, không cần tự viết grid/flex nữa. #banner_home CHỈ tồn tại trên home1.php (trang chủ, xác nhận qua class body "page-template-home1") — không xuất hiện ở page-woo.php, nơi cũng dùng chung class .widget/.sidebar-title cho bộ lọc giá/thuộc tính. Nhờ phạm vi "#banner_home" ở đầu mọi selector, file này không ảnh hưởng bộ lọc sản phẩm dù widget dùng chung markup gốc. Nạp SAU mrvu-typography.css, SAU style3.css. ========================================================================== */ /* -------------------------------------------------------------------------- 0 · Không cần giới hạn chiều rộng nữa — .col-md-3 (thêm trong home1.php) đã tự lo việc đó theo đúng Bootstrap grid có sẵn của theme. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 1 · Ô CHỨA WIDGET — bo góc, khoảng cách, đổ bóng Giữ nguyên box-shadow gốc, chỉ tăng bo góc và đệm cho thoáng hơn. -------------------------------------------------------------------------- */ #banner_home .mrvu-catbox-section .widget { border-radius: 16px; padding: 0; /* bỏ padding đều, tự kiểm soát từng phần bên trong */ box-shadow: 0 2px 8px rgba(31, 27, 24, .055); border: 1px solid #e0dad1; overflow: hidden; } #banner_home .mrvu-catbox-section .widget:not(:last-child) { margin-bottom: 20px; /* khoảng cách giữa 2 widget xếp chồng dọc */ } /* -------------------------------------------------------------------------- 2 · TIÊU ĐỀ — gạch màu đỏ đô trước chữ, đường kẻ dưới nhạt hơn Màu chữ và font giữ đúng như mrvu-typography.css đã đổi (serif, không hoa). Ở đây chỉ thêm cấu trúc: đệm, gạch dọc, đường kẻ dưới. -------------------------------------------------------------------------- */ #banner_home .mrvu-catbox-section .sidebar-title { position: relative; margin: 0; padding: 20px 22px 16px 30px; /* chừa chỗ bên trái cho gạch dọc */ border-bottom: 1px solid #e0dad1; /* đường kẻ nhạt hơn bản gốc (2px vàng) */ white-space: normal; /* bỏ nowrap gốc — tiêu đề dài không bị cắt */ } #banner_home .mrvu-catbox-section .sidebar-title::before { content: ""; position: absolute; left: 22px; top: 24px; width: 3px; height: 17px; background: #660000; border-radius: 2px; } /* -------------------------------------------------------------------------- 3 · DANH SÁCH MỤC — khoảng cách đều, hiệu ứng hover đổi nền -------------------------------------------------------------------------- */ #banner_home .mrvu-catbox-section .menu { padding: 8px 0; margin: 0; } #banner_home .mrvu-catbox-section .menu > li { margin-bottom: 0; /* bỏ margin 20px gốc — dùng padding trên để căn đều hơn */ } #banner_home .mrvu-catbox-section .menu > li > a { display: flex; align-items: center; gap: 10px; padding: 10px 22px; font-weight: 500; border-radius: 0; transition: background .16s cubic-bezier(.22, 1, .36, 1), color .16s cubic-bezier(.22, 1, .36, 1); } #banner_home .mrvu-catbox-section .menu > li > a:hover, #banner_home .mrvu-catbox-section .menu > li > a:focus-visible { background: #f9efef; color: #660000; } /* Mũi tên nhỏ hiện khi rê chuột — thêm bằng ::after, không cần sửa HTML/PHP */ #banner_home .mrvu-catbox-section .menu > li > a::after { content: ""; width: 6px; height: 6px; margin-left: auto; flex: none; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg) translateX(-4px); opacity: 0; transition: opacity .16s cubic-bezier(.22, 1, .36, 1), transform .16s cubic-bezier(.22, 1, .36, 1); } #banner_home .mrvu-catbox-section .menu > li > a:hover::after, #banner_home .mrvu-catbox-section .menu > li > a:focus-visible::after { opacity: .65; transform: rotate(-45deg) translateX(0); } /* -------------------------------------------------------------------------- 4 · (Đã bỏ) Trước đây có luật ẩn gạch chân cho widget cuối cùng, phòng trường hợp sau này thêm thẻ tư vấn (CTA) nằm cuối sidebar. Sidebar thật trên site chỉ có đúng 2 widget menu, nên luật đó vô tình ẩn mất gạch chân của "Nhu cầu lắp quạt trần" — chính là lỗi bạn báo. Nếu sau này có thêm widget thứ 3 dạng thẻ tư vấn, quay lại đây và thêm luật nhắm đúng class của widget đó (không dùng :last-child) để tránh lặp lại lỗi này. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 5 · ĐIỆN THOẠI — không đổi gì Theme gốc đã ẩn hẳn .sidebar trên di động (dùng menu riêng #menu_bar_mobile thay thế). File này không đụng tới display nên hành vi ẩn/hiện giữ nguyên. -------------------------------------------------------------------------- */