/* ===== VULUXURY — Ô GỢI Ý TÌM KIẾM (dùng chung 4 web) =====
   Đi kèm vlx-tim-kiem.js. Màu dùng biến của web, có giá trị dự phòng nếu web chưa khai. */
/* ===== TÌM KIẾM MẠNH — bảng gợi ý (vlx-tim-kiem.js) ===== */
.vlx-sg{position:absolute;z-index:9999;display:none;background:#fff;border:1px solid var(--line,#DDEBEA);border-radius:14px;
  box-shadow:0 18px 48px rgba(14,90,96,.16);overflow:hidden;font-family:var(--body,inherit)}
.vlx-sg.open{display:block}
.vlx-sg .sg-in{max-height:min(70vh,460px);overflow:auto;-webkit-overflow-scrolling:touch}
.vlx-sg .sg-sec{padding:10px 14px 6px;font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted,#3A555C);background:var(--cream,#F4FBFA)}
.vlx-sg .sg-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;border:0;background:none;text-align:left;
  font:inherit;font-size:.86rem;color:var(--ink,#16323A);cursor:pointer;text-decoration:none;border-bottom:1px solid #f1f7f6}
.vlx-sg .sg-row:last-child{border-bottom:0}
.vlx-sg .sg-row:hover,.vlx-sg .sg-row.on{background:var(--cream,#F4FBFA)}
.vlx-sg .sg-row mark{background:#fdf3d4;color:inherit;padding:0 1px;border-radius:2px;font-weight:700}
.vlx-sg .sg-ic{width:22px;flex:0 0 22px;text-align:center;opacity:.75}
.vlx-sg .sg-villa img,.vlx-sg .sg-villa .ph{width:52px;height:40px;flex:0 0 52px;border-radius:8px;object-fit:cover;background:#e9eff0;display:block}
.vlx-sg .sg-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vlx-sg .sg-tx b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlx-sg .sg-tx small{font-size:.72rem;color:var(--muted,#3A555C)}
.vlx-sg .sg-pr{flex:0 0 auto;font-size:.78rem;font-weight:700;color:var(--coral,#E07A5F);white-space:nowrap}
.vlx-sg .sg-all{justify-content:center;color:var(--teal,#147B81);font-weight:600;font-size:.82rem}
.vlx-sg .sg-note{padding:8px 14px;font-size:.76rem;color:var(--muted,#3A555C);background:#fffaf0;border-bottom:1px solid var(--line,#DDEBEA)}
.vlx-sg .sg-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line,#DDEBEA)}
.vlx-sg .sg-chip{display:inline-block;padding:3px 10px;border:1px solid var(--line,#DDEBEA);border-radius:999px;background:var(--cream,#F4FBFA);
  font-size:.72rem;font-weight:600;color:var(--teal,#147B81);cursor:pointer}
.vlx-sg .sg-empty{padding:18px 16px;font-size:.85rem;color:var(--muted,#3A555C);line-height:1.6}
.vlx-sg .sg-empty b{display:block;color:var(--ink,#16323A);font-size:.92rem;margin-bottom:4px}
.vlx-sg .sg-sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vlx-sg .sg-zalo{display:inline-block;margin-top:12px;padding:8px 14px;border-radius:999px;background:var(--zalo,#06C755);color:#fff;
  font-size:.8rem;font-weight:700;text-decoration:none}
.vlx-sg .sg-x{position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:var(--cream,#F4FBFA);
  color:var(--ink,#16323A);font-size:1rem;cursor:pointer;line-height:1}
/* Mobile: mở toàn màn cho dễ thao tác */
@media(max-width:560px){
  .vlx-sg.mob{position:fixed!important;inset:0;width:100%!important;height:100%;border-radius:0;border:0;padding-top:52px}
  .vlx-sg.mob .sg-in{max-height:calc(100vh - 52px)}
  .vlx-sg.mob .sg-row{padding:12px 14px;font-size:.9rem}
}


/* ===== Nút ✕ xoá nhanh trong ô tìm + khung xương lúc đang tải ===== */
.vlx-hasx{position:relative}
.vlx-hasx .vlx-clr{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:none;
  width:22px;height:22px;padding:0;border:0;border-radius:50%;background:#e4eeed;color:var(--muted,#3A555C);
  font-size:.72rem;line-height:22px;text-align:center;cursor:pointer;z-index:3}
.vlx-hasx .vlx-clr:hover{background:var(--coral,#E07A5F);color:#fff}
.vlx-hasx.on .vlx-clr{display:block}
.vlx-hasx input[type=search]{padding-right:30px}
.vlx-hasx input[type=search]::-webkit-search-cancel-button{display:none}  /* ẩn ✕ mặc định của trình duyệt */
.vlx-sg .sg-sk{cursor:default;pointer-events:none}
.vlx-sg .sk{display:block;border-radius:6px;background:linear-gradient(90deg,#eef4f3 25%,#f7fbfa 50%,#eef4f3 75%);
  background-size:200% 100%;animation:vlxSk 1.1s linear infinite}
.vlx-sg .sk-img{width:52px;height:40px;flex:0 0 52px;border-radius:8px}
.vlx-sg .sk-l1{height:11px;width:62%}
.vlx-sg .sk-l2{height:9px;width:38%;margin-top:6px}
@keyframes vlxSk{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.vlx-sg .sk{animation:none}}