/**
 * Dải pill "gợi ý điểm đến" (.lt-quickdest-section) — DÙNG CHUNG.
 *
 * 2026-07-27: tách nguyên văn khỏi <style> inline của user_2019/landing_tour.php để
 * trang chủ (trangchu.php) dùng lại cùng một component thay vì copy 70 dòng CSS.
 * GIỮ NGUYÊN tiền tố class .lt-* để không phải sửa markup/JS đã có của /tour.
 * Markup: user_2019/box/quick_destinations.php · Hành vi mũi tên: static-assets/js/quick-destinations.js
 */


/* ── QUICK DESTINATION PILLS (gợi ý điểm đến) ── */
.lt-quickdest-section { max-width: 1200px; margin: 30px auto 0; padding: 0 16px; }
.lt-quickdest-wrap { display: flex; align-items: center; gap: 16px; position: relative; }
.lt-quickdest-title { font-size: 17px; font-weight: 800; color: #222; flex-shrink: 0; padding-right: 4px; }
.lt-qd-scroller {
    flex: 1;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 6px 2px;
}
.lt-qd-scroller::-webkit-scrollbar { display: none; }
.lt-qd-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px 4px 4px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    text-decoration: none;
    color: #222;
    /* Chỉ transition thuộc tính KHÔNG đổi hình học (2026-07-22) — xem ghi chú ở :hover. */
    transition: border-color .15s, box-shadow .15s, color .15s;
}
/* 2026-07-22 - FIX GIẬT KHI HOVER VIỀN:
   trước đây hover có `transform: translateY(-1px)`. Trỏ chuột ở đúng mép viền → pill nhích lên
   1px → con trỏ rơi ra ngoài → mất :hover → pill tụt về → lại :hover… lặp vô hạn nên nhìn thấy
   rung/giật. Bỏ transform (giữ đổi màu viền + đổ bóng) → vùng bấm đứng yên, hết giật. */
.lt-qd-pill:hover {
    border-color: #d6248c;
    box-shadow: 0 4px 12px rgba(214,36,140,.18);
    color: #d6248c;
    text-decoration: none;
}
.lt-qd-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f5f5f5 center/cover;
    flex-shrink: 0;
}
.lt-qd-name { font-size: 14px; font-weight: 600; white-space: nowrap; }

.lt-qd-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #555;
    padding: 0;
    transition: all .15s;
}
.lt-qd-arrow:hover { color: #d6248c; border-color: #d6248c; }
.lt-qd-arrow:disabled { opacity: 0; pointer-events: none; }
.lt-qd-arrow svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
    .lt-quickdest-wrap { flex-wrap: wrap; gap: 10px; }
    .lt-quickdest-title { width: 100%; font-size: 15px; }
    .lt-qd-arrow { display: none; }
    .lt-qd-scroller { flex: 1 1 100%; }
}