/* ============================================================================
   Tour Quick-view ("Xem nhanh") — nút trên card + modal tóm tắt tour.
   Dùng chung trang chủ + trang danh sách tour. Prefix .tqv-*. Token brand #d6248c.
   ============================================================================ */

/* ── Nút "Xem nhanh" trên card (đặt trong vùng ảnh) ── */
.tqv-btn {
    position: absolute; z-index: 5; right: 10px; bottom: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border: 0; border-radius: 999px; cursor: pointer;
    /* Chữ + icon "Xem nhanh" màu VÀNG (client 2026-07-28) — icon dùng currentColor nên đổi theo. */
    background: rgba(17, 17, 17, .60); color: #ffe600;
    font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
    transition: background .15s ease, transform .15s ease;
    /* Luôn hiển thị (không ẩn chờ hover) — theo mẫu tham khảo. */
}
.tqv-btn svg { width: 15px; height: 15px; flex: none; }
.tqv-btn:hover { background: #d6248c; transform: translateY(-1px); }

/* ── Overlay + modal ── */
.tqv-overlay {
    position: fixed; inset: 0; z-index: 100000; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px);
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.tqv-overlay.is-open { display: flex; }
.tqv-modal {
    position: relative; background: #fff; border-radius: 16px; overflow: hidden;
    width: 100%; max-width: 900px; max-height: 92vh;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
    animation: tqvIn .22s cubic-bezier(.2, .7, .3, 1);
}
/* Lưới 2 cột đặt trên #tqv-content (gallery | info) — KHÔNG trên .tqv-modal
   (vì con trực tiếp của modal là nút close + #tqv-content). */
.tqv-modal > #tqv-content { display: grid; grid-template-columns: 46% 1fr; max-height: 92vh; }
@keyframes tqvIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.tqv-close {
    position: absolute; top: 12px; right: 12px; z-index: 6;
    width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .92); color: #334155; font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: background .15s, color .15s;
}
.tqv-close:hover { background: #d6248c; color: #fff; }

/* ── Cột trái: gallery ── */
.tqv-gallery { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #f8fafc; min-width: 0; }
.tqv-main {
    position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
    background: #e9edf2 center/cover no-repeat; box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}
.tqv-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.tqv-thumb {
    width: 62px; height: 46px; flex: none; border-radius: 8px; overflow: hidden; cursor: pointer;
    background: #e9edf2 center/cover no-repeat; border: 2px solid transparent; transition: border-color .15s;
}
.tqv-thumb.is-active { border-color: #d6248c; }

/* ── Cột phải: thông tin ── */
/* padding-top khớp .tqv-gallery (16px) + title margin-top 0 → mép trên ẢNH và TIÊU ĐỀ thẳng hàng. */
.tqv-info { padding: 16px 26px 22px; overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }
.tqv-title { font-size: 20px; font-weight: 700; color: #1a1a1a; line-height: 1.3; margin: 0 40px 16px 0; }
.tqv-rows { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid #eef0f2; padding-top: 16px; }
.tqv-row { display: grid; grid-template-columns: 22px 118px 1fr; gap: 10px; align-items: start; font-size: 14px; }
.tqv-row .tqv-ic { color: #d6248c; margin-top: 1px; display: flex; }
.tqv-row .tqv-ic svg { width: 17px; height: 17px; }
.tqv-row .tqv-k { color: #6b6b6b; }
.tqv-row .tqv-v { color: #1a1a1a; font-weight: 600; word-break: break-word; }

.tqv-price { margin-top: auto; padding-top: 18px; }
.tqv-price .tqv-plbl { font-size: 13px; color: #6b6b6b; }
.tqv-price .tqv-pold { font-size: 14px; color: #9a9a9a; text-decoration: line-through; margin-left: 8px; }
.tqv-price .tqv-pval { font-size: 26px; font-weight: 800; color: #d6248c; line-height: 1.15; }
.tqv-price .tqv-per { font-size: 13px; color: #9a9a9a; font-weight: 500; }

.tqv-cta { display: flex; gap: 10px; margin-top: 14px; }
.tqv-cta a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; border-radius: 10px; font-size: 14.5px; font-weight: 700; text-decoration: none; transition: filter .15s, transform .15s; }
.tqv-cta a:hover { transform: translateY(-1px); filter: brightness(1.05); }
.tqv-call { flex: none !important; width: 46px; background: #d6248c; color: #fff; }
.tqv-detail { background: linear-gradient(135deg, #d6248c 0%, #8e155b 100%); color: #fff; box-shadow: 0 6px 16px rgba(214, 36, 140, .28); }
/* Khi hover: rule global `a:hover{color:#ed0080}` (legacy) đổi chữ nút sang hồng → chìm trên nền hồng.
   Ép GIỮ chữ/icon TRẮNG cho cả nút "Xem chi tiết" và nút gọi khi hover/focus (nền hồng brand). */
.tqv-detail:hover, .tqv-detail:focus { color: #fff !important; }
.tqv-call:hover, .tqv-call:focus { color: #fff !important; background: #b81e76; }

.tqv-loading { grid-column: 1 / -1; padding: 60px; text-align: center; color: #9a9a9a; font-size: 14px; }

/* ── Mobile ── */
@media (max-width: 767px) {
    .tqv-overlay { padding: 0; align-items: flex-end; }
    /* Bottom-sheet: neo đáy màn hình. Cap chiều cao để mép TRÊN luôn chừa status bar/notch
       (iOS) → KHÔNG cắt mất phần đầu ảnh + nút đóng. Sàn 90vh (≥~10vh hở trên) cho máy
       không có safe-area/dvh; máy hỗ trợ dvh dùng safe-area-inset-top chính xác hơn. */
    .tqv-modal { max-width: 100%; max-height: 90vh; max-height: min(90vh, calc(100dvh - env(safe-area-inset-top) - 10px)); border-radius: 16px 16px 0 0; }
    .tqv-modal > #tqv-content { grid-template-columns: 1fr; max-height: 90vh; max-height: min(90vh, calc(100dvh - env(safe-area-inset-top) - 10px)); overflow-y: auto; }
    .tqv-gallery { padding: 14px; }
    .tqv-main { aspect-ratio: 16/10; }
    .tqv-info { padding: 18px 18px 20px; }
    .tqv-title { font-size: 17px; margin-right: 36px; }
    .tqv-row { grid-template-columns: 20px 100px 1fr; font-size: 13.5px; }
    .tqv-price .tqv-pval { font-size: 22px; }
}