/* Hộp gợi ý tìm nhà cung cấp — TC4 việc 2. Hộp gắn thẳng vào (xem gyHop) nên phải tự lo z-index và bóng đổ, không thừa hưởng gì từ ô cha. */ .gy-box{ position:absolute; z-index:9999; background:#fff; border:1px solid #cfd8db; border-radius:9px; box-shadow:0 8px 24px rgba(15,42,46,.16); max-height:302px; overflow-y:auto; padding:4px; font-size:13.5px; line-height:1.35; } .gy-dong{ padding:7px 9px; border-radius:6px; cursor:pointer; display:flex; align-items:baseline; gap:8px; } .gy-dong:hover,.gy-dong.sang{background:#e6f2ef} /* Phần khớp câu tìm — teal đậm cho nổi, không dùng nền vàng kiểu highlight vì tên NCC hay dài, nền vàng loang lổ đọc rất mệt. */ .gy-dong b{color:#0b5945; font-weight:700} .gy-phu{margin-left:auto; color:#8a9599; font-size:12px; white-space:nowrap; flex:none} .gy-them{padding:7px 9px; color:#8a9599; font-size:12.5px; border-top:1px solid #eef2f3; margin-top:2px} .gy-trong{padding:9px; color:#8a9599; font-size:13px} /* Ô lọc NCC (tab Đặt hàng NCC + tab Quản lý SKU): trước là nên KHÔNG dính luật `.toolbar input[type=search]` bên index.html — phải chép lại đúng từng con số (padding 9/10, viền 1.5px, bo 10px, focus, và màu "đang lọc") thì nó mới đứng ngang hàng, cùng chiều cao với các bên cạnh cao 40px. Lệch 3px giữa các ô cùng một hàng, mắt thấy ngay. KHAI THẲNG 40px, đừng quay lại lối tính `line-height:20px` (= 40 − đệm 18 − viền 2). Lối tính đó ra đúng số nhưng phụ thuộc ba thứ cùng lúc: đệm 9px, cách Chrome làm tròn viền 1.5px thành 1px mỗi bên, và luật `box-sizing`. Đụng một thứ là lệch lại — đã hụt đúng 1px một lần vì trừ viền 3 thay vì 2. (Codex vòng 2 nêu, tôi nhận.) `box-sizing` khai lại tại chỗ dù index.html:44 đã đặt `*{box-sizing:border-box}`: để khối này tự đứng được, ai gỡ luật chung thì ô vẫn cao đúng 40px. `line-height:normal` để chữ khỏi kéo giãn ô; input một dòng thì Chrome tự căn giữa. Chốt số đo bằng bài kiểm scripts-test/kiem-that-loc-ncc-sku.js mục 1, đổi là nó báo. */ height:40px; box-sizing:border-box; line-height:normal; } .toolbar .gy-o.dang-loc{ border-color:var(--teal); background:#e8f4f5; color:var(--teal-d); font-weight:600; } /* :focus phải đứng SAU .dang-loc. Hai luật cùng độ đặc hiệu (0,3,0) nên luật viết sau thắng — đặt ngược lại thì ô đang lọc mà bấm vào vẫn giữ viền teal, trong khi các trên điện thoại vẫn cao 40px nên ô này phải giữ nguyên 40px khai ở khối trên. */ .toolbar .gy-o{min-width:0; flex:1 1 140px} }