/* ============================================================================
   Landing tour (/tour) — CSS NGOÀI cho các thay đổi mới.
   Phần lớn style của trang còn nằm inline trong user_2019/landing_tour.php (legacy);
   file này nạp TRƯỚC block <style> đó, nên rule nào trùng selector thì bản inline vẫn
   thắng — các rule dưới đây đều thêm tiền tố .lt-wrap để không đụng vào cascade cũ.
   ============================================================================ */

/* ── Bộ tìm tour ở hero: bộ field MOBILE khác desktop (client 2026-07-30) ────
   desktop: Điểm đến · Ngày khởi hành · Ngân sách
   mobile : Điểm đến · Điểm khởi hành · Tháng khởi hành  (bỏ Ngân sách)
   Ẩn/hiện bằng CSS, còn việc field nào được SUBMIT do landing-tour-search.js bật/tắt
   thuộc tính disabled — ẩn bằng CSS thôi thì field vẫn lọt vào query string. */
.lt-sf-mobile-only { display: none; }

@media (max-width: 600px) {
    .lt-sf-mobile-only { display: block; }
    .lt-sf-desktop-only { display: none; }
}

/* ── MOBILE: mỗi khối nội dung là một THẺ TRẮNG BO GÓC (client 2026-07-30) ──
   Trước: các khối tràn hết chiều ngang, góc vuông, chỉ ngăn nhau bằng dải xám 8px
   → mép trên-trái của khối "TOUR TRONG NƯỚC" nhìn cụt (ảnh client gửi).
   Nay: nền trang chuyển xám nhạt (đúng màu #f1f3f6 vốn đang dùng làm dải ngăn) rồi
   thả từng khối lên dạng thẻ trắng bo 16px — bo góc mới "đọc" được, và đồng bộ với
   khung thẻ desktop (.lt-hpgt-section > .wrapper đã bo 16px từ trước).
   Chỉ áp ≤767px; desktop giữ nguyên. */
@media (max-width: 767px) {
    .lt-wrap {
        background: #f1f3f6;
    }

    .lt-wrap > .lt-quickdest-section,
    .lt-wrap > .lt-section:not(.lt-coll-section),
    .lt-wrap .lt-hpgt-section > .wrapper {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(17, 24, 39, .07);
        margin-left: 10px;
        margin-right: 10px;
        padding: 16px 12px;
    }

    /* Khoảng cách giữa các thẻ thay cho dải xám 8px cũ (đã bỏ trong landing_tour.php). */
    .lt-wrap > .lt-quickdest-section,
    .lt-wrap > .lt-section,
    .lt-wrap .lt-hpgt-section {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    /* "Bộ sưu tập tour" tự có nền gradient hồng + bo 18px → chỉ căn lề cho thẳng hàng
       với các thẻ khác, KHÔNG đè nền/bo góc của nó. */
    .lt-wrap > .lt-section.lt-coll-section {
        margin-left: 10px;
        margin-right: 10px;
    }

    /* Card tour trong slider RỘNG THÊM, chỉ chừa 1 mẩu nhỏ của card kế (client 2026-07-30).
       Rule gốc trong box/gt_tour_card.php là calc(100vw - 88px) = lề 44 + margin owl 10 + peek 34;
       peek 34px hở quá nhiều nên card trông hụt bề ngang so với khối bên trên. Ở /tour lề vẫn 44
       (10 margin thẻ + 12 padding mỗi bên) → 44 + 10 + 18 = 72, peek còn ~18px: vừa đủ ló góc bo +
       viền của card kế để khách biết vuốt ngang. Specificity 0,5,0 nên thắng rule gốc (0,4,0);
       chỉ scope trong .lt-wrap nên TRANG CHỦ giữ nguyên như cũ. */
    .lt-wrap .lt-hpgt-section .slideFluid.width2.hpgt .item {
        width: calc(100vw - 72px);
    }

    /* BỎ bóng xám (client 2026-07-30). Nền trang giờ đã xám nhạt nên đổ bóng thành vệt xám lộ ra
       ở mép trái thẻ section và dưới đáy từng card tour — nhìn như vết bẩn. Thẻ vẫn tách nền nhờ
       nền trắng + viền 1px sẵn có của .gt-card. */
    .lt-wrap > .lt-quickdest-section,
    .lt-wrap > .lt-section:not(.lt-coll-section),
    .lt-wrap .lt-hpgt-section > .wrapper,
    .lt-wrap .lt-hpgt-section .gt-card {
        box-shadow: none;
    }
}

/* ── Đếm tour trên thẻ "Địa điểm trong nước đang hot nhất" (2026-07-31) ──────
   Thẻ .lt-coll-card-sm là ảnh nền tối + chữ trắng, nên dòng đếm dùng trắng mờ
   thay vì màu phụ xám (xám trên ảnh gần như đọc không ra). */
.lt-coll-count {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* ══ Bộ chọn "Tháng khởi hành" ở hero (client 2026-08-02) ═══════════════════════
   Thay native <select> (iOS xổ danh sách 24 dòng, chữ nhỏ, khó nhìn) bằng nút mở
   bottom-sheet có nút đổi NĂM + lưới tháng 3 cột. Chỉ dùng ở khối .lt-sf-mobile-only
   nên không đụng bản desktop (desktop vẫn là ô "Ngày khởi hành"). */
.lt-mp-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    color: #111;
}
.lt-mp-trigger .lt-mp-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-mp-trigger .lt-mp-caret { flex: 0 0 auto; color: #777; transition: transform .18s; }
.lt-mp-trigger[aria-expanded="true"] .lt-mp-caret { transform: rotate(180deg); }
.lt-mp-trigger.is-set .lt-mp-val { font-weight: 600; color: #ed007f; }

.lt-mp-sheet[hidden] { display: none; }
.lt-mp-sheet { position: fixed; inset: 0; z-index: 9995; }
.lt-mp-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.lt-mp-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding: 0 16px calc(18px + env(safe-area-inset-bottom));
    max-height: 82vh;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.lt-mp-sheet.is-open .lt-mp-panel { transform: translateY(0); }
.lt-mp-grab { width: 40px; height: 4px; border-radius: 2px; background: #e5e7eb; margin: 10px auto 4px; }
.lt-mp-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 12px; }
.lt-mp-title { font-size: 16px; font-weight: 700; color: #111; }
.lt-mp-close { border: 0; background: transparent; color: #666; padding: 4px; cursor: pointer; line-height: 0; }

.lt-mp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; }
.lt-mp-any {
    border: 0; background: transparent; padding: 0;
    font-family: inherit; font-size: 15px; font-weight: 700; color: #555; cursor: pointer;
}
.lt-mp-any.is-active { color: #ed007f; }
/* Nút đổi năm — vị trí ① trong ảnh mẫu client gửi. */
.lt-mp-year { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.lt-mp-ybtn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid #eadfe6; background: #fff; color: #ed007f;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lt-mp-ybtn:disabled { color: #cfcfcf; border-color: #f0f0f0; cursor: default; }
.lt-mp-yval { min-width: 52px; text-align: center; font-size: 15px; font-weight: 700; color: #111; }

.lt-mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lt-mp-m {
    height: 46px; border-radius: 10px;
    border: 1.5px solid #eee; background: #fff;
    font-family: inherit; font-size: 14px; font-weight: 600; color: #333;
    cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.lt-mp-m[hidden] { display: none; }
.lt-mp-m.is-active { border-color: #ed007f; background: #fdf0f7; color: #ed007f; }

/* Hàng "Tháng khởi hành". 2026-08-03 (client): ô "Năm" đứng riêng bên phải ĐÃ BỎ —
   bottom-sheet chọn tháng vốn đã có bộ đổi năm ◀ 2026 ▶ nên ô ngoài chỉ lặp chức năng.
   Giữ .lt-mp-row/.lt-mp-col (flex 1 cột) thay vì gỡ hẳn: markup còn dùng, và nếu sau này
   cần thêm ô thứ hai cạnh Tháng thì không phải dựng lại khung.
   2026-08-03 (client "desktop chọn tháng và năm như mobile luôn"): hàng này KHÔNG còn
   nằm trong .lt-sf-mobile-only nữa nên bỏ media query — hiện ở MỌI khổ màn hình. */
.lt-mp-row { display: flex; gap: 10px; align-items: flex-start; }
.lt-mp-col { min-width: 0; }
.lt-mp-col--month { flex: 1 1 auto; }

/* ── DESKTOP: DROPDOWN xổ ngay dưới ô, KHÔNG phải popup giữa màn hình ────────────────
   Client 2026-08-04: "thanh search theo ngày khởi hành này sẽ là dropdown chứ không phải
   popup". Trước đó khối này dựng hộp thoại canh giữa màn hình (top/left 50% + translate)
   — đúng là đỡ lạc lõng hơn bottom-sheet nhưng vẫn cắt ngữ cảnh: khách đang thao tác ở
   thanh tìm kiếm mà panel nhảy ra giữa trang kèm lớp phủ tối.
   Cách neo: markup #ltMonthSheet đã được chuyển vào TRONG .lt-mp-col--month (xem chú thích
   ở landing_tour.php) nên chỉ cần position:absolute + top:100% là bám đúng đáy ô, tự đi
   theo ô khi đổi khổ màn hình — không cần JS tính toạ độ.
   Cùng ngôn ngữ với dropdown "Điểm khởi hành" (.lt-dep-dropdown) ngay cạnh: bo 10-14px,
   đổ bóng mềm, xổ xuống 4-8px.
   Mobile (≤600px) KHÔNG đụng: vẫn là bottom-sheet position:fixed + lớp phủ. */
@media (min-width: 601px) {
    .lt-mp-col--month { position: relative; }

    /* Bỏ khung phủ toàn màn: gốc là .lt-mp-sheet{position:fixed;inset:0}. */
    .lt-mp-sheet {
        position: absolute;
        inset: auto;
        top: 100%;
        left: 0;
        width: 320px;
        max-width: calc(100vw - 32px);
        /* 200 = đúng tầng của .lt-dep-dropdown để 2 dropdown cùng box không đè lẫn nhau. */
        z-index: 200;
    }
    /* Lớp phủ tối là ngôn ngữ của modal — dropdown không cần. Đóng khi bấm ra ngoài do
       landing-tour-search.js xử lý (xem onDocClick). */
    .lt-mp-backdrop { display: none; }

    .lt-mp-panel {
        position: static;
        width: auto;
        margin-top: 4px;
        max-height: none;
        overflow: visible;
        border: 1px solid #eee;
        border-radius: 14px;
        padding: 0 16px 16px;
        box-shadow: 0 10px 32px rgba(0, 0, 0, .14);
        /* Animation gốc là translateY(100%) → translateY(0) (trượt từ đáy lên). Dropdown
           chỉ cần hé xuống một nhịp ngắn, nên phải ghi đè CẢ 2 trạng thái transform. */
        transform: translateY(-6px);
        opacity: 0;
        transition: transform .16s ease, opacity .16s ease;
    }
    .lt-mp-sheet.is-open .lt-mp-panel { transform: translateY(0); opacity: 1; }

    /* Thanh kéo là gợi ý thao tác vuốt — desktop không vuốt được nên bỏ. */
    .lt-mp-grab { display: none; }
    .lt-mp-head { padding-top: 14px; }
}
.lt-yr { position: relative; }
.lt-yr-trigger { display: flex; align-items: center; justify-content: space-between; gap: 4px; cursor: pointer; color: #111; }
.lt-yr-trigger[aria-expanded="true"] .lt-mp-caret { transform: rotate(180deg); }
.lt-yr-val { font-weight: 600; }
.lt-yr-list[hidden] { display: none; }
.lt-yr-list {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    margin: 0; padding: 6px; list-style: none;
    background: #fff; border: 1px solid #eee; border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}
.lt-yr-item {
    display: block; width: 100%;
    border: 0; background: transparent; border-radius: 8px;
    padding: 10px 8px; font-family: inherit; font-size: 14px; font-weight: 600;
    color: #333; text-align: center; cursor: pointer;
}
.lt-yr-item.is-active { background: #fdf0f7; color: #ed007f; }

/* ── Tiêu đề section landing: TẮT HẲN vạch dọc ::before (client báo 2026-08-03 "nút gạch |
   và chữ Tour đang bị dính vào nhau") ─────────────────────────────────────────────────────
   Landing đã chốt BỎ vạch dọc trước tiêu đề từ 2026-07-29 và làm điều đó bằng cách đặt
   `.lt-hpgt-section .titleHome h2{ padding-left:0 }` (bỏ chỗ dành cho vạch) — xem chú thích
   trong landing_tour.php. NHƯNG chưa bao giờ tắt chính cái ::before.
   Lúc đó không lộ vì ::before chỉ có `background:#ed007f` từ rule nền và landing không nạp
   file vẽ nó. Về sau home-mytour-skin.css (nằm trong bundle, áp SITE-WIDE) thêm
   `.titleHome h2::before{ background:var(--mt-grad) !important; width:5px !important }`
   → vạch hiện lại, mà chỗ cho nó đã bị bỏ → vạch ĐÈ lên chữ "TOUR".
   `content:none` gỡ hẳn hộp giả, không phụ thuộc rule nào tô nền nó. Specificity (0,2,1)
   cao hơn rule nền (0,1,1) nên thắng bất kể thứ tự nạp.
   Muốn HIỆN vạch có khe hở như trang chủ thì bỏ khối này và trả padding-left về 18px. */
.lt-hpgt-section .titleHome h2::before,
.lt-hpgt-section .titleHome h3::before {
    content: none !important;
}