/* ============================================================================= * search-dropdown.css — Ô GỢI Ý TÌM KIẾM * ============================================================================= * * Đặt file này ở: public/module/search/css/search-dropdown.css * Nạp bằng thẻ trong layout, KHÔNG dùng @push('css') — nhiều theme đẩy * khối css ra trước phần nội dung nên push muộn là mất. * * Mọi lớp đều bắt đầu bằng "bcs-" nên không đụng CSS sẵn có của theme nào. * * ĐỔI MÀU CHO KHỚP THEME: sửa 6 biến trong khối :root bên dưới, không cần * đụng vào phần còn lại. * ============================================================================= */ :root { --bcs-nen: #ffffff; --bcs-vien: #e5e7eb; --bcs-chu: #111827; --bcs-chu-phu: #6b7280; --bcs-chinh: #0f766e; /* màu nhấn: chữ khớp, giá */ --bcs-nen-chon: #f3f4f6; /* nền dòng đang chọn */ } /* --- khung ---------------------------------------------------------------- */ .bcs-dd { /* Gắn ở và định vị theo toạ độ thật của ô input (xem datViTri). Nhờ vậy không phải bọc thêm thẻ nào quanh input của theme. */ position: fixed; z-index: 99999; overflow-y: auto; overscroll-behavior: contain; /* cuộn hết danh sách thì không kéo theo cả trang */ -webkit-overflow-scrolling: touch; background: var(--bcs-nen); border: 1px solid var(--bcs-vien); border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, .12); font-size: 14px; line-height: 1.4; color: var(--bcs-chu); text-align: left; } .bcs-dd[hidden] { display: none; } /* --- nhóm ----------------------------------------------------------------- */ .bcs-dd__nhom + .bcs-dd__nhom { border-top: 1px solid var(--bcs-vien); } .bcs-dd__ten-nhom { padding: 10px 14px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bcs-chu-phu); } /* --- một dòng kết quả ------------------------------------------------------ */ .bcs-dd__dong { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: inherit; text-decoration: none; cursor: pointer; } /* Dùng chung một kiểu cho di chuột và cho phím mũi tên, để người dùng thấy đúng một thứ đang được chọn dù đang dùng chuột hay bàn phím. */ .bcs-dd__dong:hover, .bcs-dd__dong.is-chon { background: var(--bcs-nen-chon); text-decoration: none; color: inherit; } .bcs-dd__anh { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--bcs-nen-chon); } .bcs-dd__anh--trong { display: block; } .bcs-dd__giua { flex: 1 1 auto; min-width: 0; /* thiếu dòng này là chữ dài đẩy vỡ hàng thay vì cắt bằng … */ } .bcs-dd__ten { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; } /* Phần chữ khớp với từ khoá */ .bcs-dd__ten mark { padding: 0; background: transparent; color: var(--bcs-chinh); font-weight: 700; } .bcs-dd__phu { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 2px; font-size: 12px; color: var(--bcs-chu-phu); } .bcs-dd__gia { flex: 0 0 auto; padding-left: 8px; font-size: 13px; font-weight: 600; color: var(--bcs-chinh); white-space: nowrap; } /* --- báo trạng thái (đang tìm / không thấy / lỗi) -------------------------- */ .bcs-dd__bao { padding: 16px 14px; text-align: center; color: var(--bcs-chu-phu); } .bcs-dd__bao--loi { color: #b91c1c; } /* --- điện thoại ------------------------------------------------------------ */ @media (max-width: 575.98px) { .bcs-dd { border-radius: 8px; font-size: 15px; /* iOS phóng to trang nếu chữ dưới 16px trong form */ } .bcs-dd__dong { padding: 10px 12px; } .bcs-dd__anh { width: 40px; height: 40px; } /* Màn hẹp thì giá xuống hàng dưới sẽ đỡ chật hơn là bóp tên còn vài chữ. */ .bcs-dd__gia { font-size: 12px; } } /* --- người dùng chọn giảm chuyển động -------------------------------------- */ @media (prefers-reduced-motion: reduce) { .bcs-dd, .bcs-dd__dong { transition: none !important; } }