/* Gợi ý sản phẩm ở ô tìm kiếm đầu trang (từ 2026-10-15; js/goi-y-tim-kiem.js, includes/goi-y-tim-kiem.php). Chỉ có lớp mới: ô tìm
   kiếm và trang không đổi gì khi chưa gõ. */

/* Lớp tối phủ cả trang khi danh sách mở. JS đặt lớp này ngay trước #hkt-search nên chung lớp chồng (stacking context) với ô tìm kiếm:
   máy tính là .t3-wrapper (position relative, z-index 99, khung của cả trang), điện thoại là #header (thanh đen cố định, z-index 999).
   Khi mở (lớp goi-y-tim-mo trên thẻ html):
   - .hkt-search lên trên lớp tối: ô tìm kiếm và danh sách sáng, phần còn lại (cả logo, menu ở đầu trang) tối theo;
   - #header lên trên mọi thứ khác trong .t3-wrapper (chỉ có tác dụng khi #header cố định, tức điện thoại);
   - nút liên hệ nổi (widget Support: thanh dưới đáy điện thoại z-index 99000, cột nút tròn máy tính 99800) và nút lên đầu trang
     (#topcontrol, 999) nằm ngoài .t3-wrapper, cao hơn lớp tối: tối đi bằng filter (brightness(.5), y như phủ đen 50%) và không nhận
     bấm (bấm vào chỗ đó là bấm lớp tối bên dưới: đóng danh sách). Không nâng cả .t3-wrapper lên trên các nút này: nền trắng của nó
     sẽ che mất các nút (nút biến mất thay vì tối đi). */
.goi-y-lop-toi {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99990; background: rgba(0, 0, 0, .5);}
html.goi-y-tim-mo #header {z-index: 99995;}
html.goi-y-tim-mo .hkt-search {z-index: 99991;}
html.goi-y-tim-mo .thanh-lien-he,
html.goi-y-tim-mo .float-btn-group,
html.goi-y-tim-mo #topcontrol {filter: brightness(.5); pointer-events: none;}
.goi-y-lop-toi[hidden],
.goi-y-khung[hidden] {display: none;}

/* Danh sách: ngay dưới ô, rộng bằng ô */
.goi-y-khung {position: absolute; top: calc(100% + 6px); left: 0; right: 0; overflow: hidden; background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); color: var(--xam-12); font-size: 14px; line-height: 20px; text-align: left;}
.goi-y-ds:not(:empty) {padding: 4px 0;}

/* Mỗi dòng: ảnh 40px | tên 1 dòng (dư thì "…", phần khớp từ khóa đỏ), dưới là giá đỏ đậm + giá cũ gạch ngang */
.goi-y-dong {display: flex; align-items: center; padding: 8px 12px; color: var(--xam-12); text-decoration: none;}
.goi-y-dong:hover,
.goi-y-dong:focus,
.goi-y-dong[aria-selected="true"] {background: var(--do-3); color: var(--xam-12); text-decoration: none; outline: 0;}
.goi-y-anh {flex: 0 0 40px; width: 40px; height: 40px; margin-right: 10px; overflow: hidden; border-radius: 6px; background: var(--xam-3);}
.goi-y-anh img {display: block; width: 100%; height: 100%; object-fit: contain; background: #fff;}
.goi-y-chu {flex: 1 1 auto; min-width: 0;}
.goi-y-ten,
.goi-y-gia-dong {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.goi-y-ten mark {padding: 0; background: none; color: var(--do-11);}
.goi-y-gia-dong {margin-top: 2px;}
.goi-y-gia {color: var(--do-11); font-weight: 700;}
.goi-y-gia-cu {margin-left: 2px; color: var(--xam-11); font-size: 13px; text-decoration: line-through;}
/* Ngừng sản xuất: chữ đỏ trong khung viền đỏ (như ở thẻ sản phẩm, nhỏ hơn cho vừa dòng) */
.goi-y-ngung {display: inline-block; padding: 0 6px; color: var(--do-11); font-size: 12px; font-weight: 700; line-height: 18px; border: 1px solid var(--do-9); border-radius: 4px;}
/* Đang chờ kết quả của từ khóa mới: danh sách cũ mờ đi */
.goi-y-khung.dang-tim .goi-y-ds {opacity: .5;}

/* Dòng cuối: "Đang tìm…" | link "Xem tất cả N kết quả…" (đỏ đậm, căn giữa) | "Không tìm thấy…" */
.goi-y-cuoi {padding: 10px 12px; text-align: center;}
.goi-y-ds:not(:empty) + .goi-y-cuoi {border-top: 1px solid var(--xam-3);}
.goi-y-cho {color: var(--xam-11);}
.goi-y-xem {display: block; margin: -10px -12px; padding: 10px 12px; color: var(--do-11); font-weight: 700; text-decoration: none;}
.goi-y-xem:hover,
.goi-y-xem:focus {background: var(--do-3); color: var(--do-11); text-decoration: none;}
.goi-y-khong a {color: var(--do-11); font-weight: 700; white-space: nowrap;}

/* Điện thoại: rộng hết màn, ngay dưới thanh đen #header (cố định; JS đo chiều cao thanh vào --goi-y-tren). Màn thấp thì danh sách cuộn
   được, dừng trên thanh liên hệ dưới đáy (cao 60px + vùng an toàn iPhone; thanh đó nằm cao hơn, sẽ đè lên đáy danh sách) */
@media (max-width: 767px) {
	.goi-y-khung {position: fixed; top: var(--goi-y-tren, 52px); border-radius: 0; box-shadow: 0 10px 20px rgba(0, 0, 0, .2); max-height: calc(100vh - 112px); max-height: calc(100dvh - var(--goi-y-tren, 52px) - 60px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain;}
	.goi-y-dong {padding: 8px 15px;}
	.goi-y-cuoi {padding: 12px 15px;}
	.goi-y-xem {margin: -12px -15px; padding: 12px 15px;}
}