/* ─────────────────────────────────────────────────────────────────────────────
   Landing /ve-may-bay. Tách khỏi 2 khối <style> inline 2026-08-03.

   MỘT file cho CẢ hai bản render vì chúng trùng nhau 106/107 rule:
     · desktop = landing_flights_old.php  (include khi $device='D')
     · mobile  = landing_flights.php      (còn lại)
   Trước đây 2 bản LOẠI TRỪ nhau nên khác biệt viết đè thoải mái. Nay cùng nằm
   trong bundle dùng chung → phải phân biệt bằng class, nếu không bản nạp sau sẽ
   đè lên CẢ hai trang (nguy hiểm nhất: desktop UA ở khung hẹp — iPad vẫn là
   device 'D' — sẽ bị ẩn mất h1 hero).
   Giải pháp: giữ giá trị DESKTOP làm mặc định, 5 điểm riêng của mobile scope vào
   `.lf-wrap--m` (chỉ landing_flights.php in ra class này).
   ───────────────────────────────────────────────────────────────────────────── */

.lf-wrap { font-family: inherit; }
/* Hero banner - match pattern với .lh-hero (hotel) + .lt-hero (tour): min-height 420px
   desktop / 300px mobile, padding 60px 16px 110px, flex center, overlay rgba(0,0,0,.4).
   Background load từ flight_landing_config.banner_image (admin có thể đổi qua CMS).
   Search bar đè lên cuối hero bằng negative margin-top: -70px (đồng bộ hotel/tour). */
.lf-hero { position: relative; min-height: 420px; background: center/cover no-repeat; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 16px 110px; text-align: center; overflow: hidden; }
.lf-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 0; }
.lf-hero > * { position: relative; z-index: 1; }
.lf-hero h1 { font-size: 40px; font-weight: 800; margin: 0 0 12px; letter-spacing: -.5px; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.lf-hero p.lf-hero-sub { font-size: 16px; margin: 0 auto; max-width: 720px; opacity: .98; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
@media (max-width: 767px) {
    .lf-hero { min-height: 300px; padding: 40px 16px 100px; }
    .lf-hero h1 { font-size: 26px; }
    .lf-hero p.lf-hero-sub { font-size: 14px; }
}

.lf-search-overlay { position: relative; max-width: 1200px; margin: -70px auto 0; padding: 0 16px; z-index: 10; }
/* 2026-07-23: MÀN HÌNH THẤP (laptop ngang, cửa sổ nhỏ…) — thu gọn hero + kéo thanh tìm kiếm lên để
   hero + form vừa TRỌN 1 khung nhìn. Đây là bản DESKTOP của /ve-may-bay (device D). */
@media (min-width: 768px) and (max-height: 860px) {
  .lf-hero { min-height: 340px; padding-top: 40px; padding-bottom: 92px; }
  .lf-hero h1 { font-size: 34px; }
}
@media (min-width: 768px) and (max-height: 720px) {
  .lf-hero { min-height: 260px; padding-top: 26px; padding-bottom: 82px; }
  .lf-hero h1 { font-size: 28px; margin-bottom: 6px; }
  .lf-hero p.lf-hero-sub { font-size: 14px; }
  .lf-search-overlay { margin-top: -60px; }
}
.lf-search-overlay .vmb-search-wrap { padding: 0; max-width: none; }
:is(.lf-search-overlay, .vmb-search-wrap) .local-search-box { box-shadow: 0 12px 36px rgba(0,0,0,.22); border-radius: 16px; background: #fff; min-height: 0; }
@media (max-width: 767px) { .lf-search-overlay { margin-top: -60px; } }

/* ═══ KHUNG TÌM VÉ MÁY BAY & VÉ XE (bản desktop, search_flights_popup.php & _vexe_search_form.php) = CÙNG KIỂU với khung tìm
   Vé máy bay dưới hàng icon hero trang chủ. Đồng bộ 100% giao diện, hiệu ứng và thao tác mượt mà.
   Mỗi ô là thẻ bo 12px cao 60px, nhãn nhỏ xám nằm TRONG thẻ, giá trị 15px/600, nút đảo chiều tròn đè giữa khe hai ô,
   nút tìm hồng cao bằng thẻ có kính lúp. Ô ngày dạng "CN, 11 thg 10" + icon lịch vẽ vào .lf-date-disp.
   Khác trang chủ CÓ CHỦ Ý: 768–1099px xếp 2 hàng (khung landing co theo cửa sổ / iPad dọc, dồn 1 hàng thì chữ bị cắt).
   ≤767px giữ bố cục xếp dọc sẵn có ở flight-search-popup.css.
   !important: luật gốc của các ô này (local-search.css / overide-v2.css) đều `#ls-panel-flight … !important`. */
@media (min-width: 768px) {
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-flight-top { align-items: center !important; padding: 18px 22px 0 !important; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-flight-trip-pills { display: inline-flex !important; gap: 2px; padding: 3px !important; border-radius: 999px !important; background: #f3f4f6 !important; border: 0 !important; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-trip-pill {
    padding: 6px 16px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
    font-size: 13.5px !important; font-weight: 500 !important; color: #6b7280 !important; text-decoration: none !important;
  }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-trip-pill.active { background: var(--c-primary) !important; color: #fff !important; font-weight: 600 !important; box-shadow: 0 3px 8px rgba(237, 0, 127, .22) !important; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-flight-options { display: flex; align-items: center; gap: 8px !important; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-direct-check { display: inline-flex; align-items: center; gap: 7px; margin: 0 6px 0 0; font-size: 13.5px; font-weight: 500; color: #374151; cursor: pointer; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-direct-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-primary); }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-flight-pill {
    height: 38px !important; padding: 0 12px !important; border: 1.5px solid #e5e7eb !important; border-radius: 10px !important;
    background: #fff !important; box-shadow: none !important; font-size: 13.5px !important; font-weight: 500 !important; color: #111827 !important;
  }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-flight-pill:hover { border-color: #d1d5db !important; }

  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-fields { align-items: stretch !important; gap: 10px !important; padding: 12px 22px 22px !important; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-fields > .ls-field {
    position: relative; flex: 1 1 0 !important; min-width: 0 !important; height: 60px !important; margin: 0 !important;
    padding: 8px 14px 9px !important; border: 1.5px solid #e5e7eb !important; border-radius: 12px !important; background: #fff !important;
    box-shadow: none !important; transition: border-color .15s;
  }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-fields > .ls-field:has(> .ls-datepicker) { flex: .8 1 0 !important; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-fields > .ls-field:hover { border-color: #d1d5db !important; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-fields > .ls-field:focus-within { border-color: var(--c-primary) !important; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-fields > .ls-field > label {
    display: block; margin: 0 0 2px !important; line-height: 1.3;
    font-size: 12px !important; font-weight: 500 !important; color: #6b7280 !important; text-transform: none !important; letter-spacing: 0 !important;
  }
  /* Ô nhập bên trong thẻ: không viền, không nền, không icon (icon cũ vẽ bằng background-image). */
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-field input[type="text"] {
    display: block; width: 100% !important; height: 24px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent none !important; box-shadow: none !important; outline: none;
    font-size: 15px !important; font-weight: 600 !important; line-height: 24px !important; color: #111827 !important; text-overflow: ellipsis;
  }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-field input::placeholder { color: #9ca3af !important; font-weight: 500; }
  /* Ô ngày: ẩn hẳn input (cả value lẫn placeholder), ngày hiển thị ở .lf-date-disp. Bấm vào thẻ = nút phủ .ls-date-overlay
     (box/flight_calendar.inc.php) mở lịch. */
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-field input.lf-date-input { opacity: 0 !important; cursor: pointer; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .lf-date-disp {
    position: absolute; left: 14px; right: 10px; bottom: 9px; height: 24px; padding-left: 24px;
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23ed007f'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v2H2V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1zM2 11h20v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8z'/%3E%3C/svg%3E") no-repeat 0 center / 16px 16px;
    font-size: 15px; font-weight: 600; line-height: 24px; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .lf-date-disp.is-ph { color: #9ca3af; font-weight: 500; }
  /* Danh sách gợi ý bám mép dưới THẺ (wrap static → định vị theo .ls-field), không chồng lên thẻ. */
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-fields > .ls-field .ls-typeahead { position: static !important; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-fields > .ls-field .ls-typeahead-dd { top: calc(100% + 6px) !important; left: 0 !important; min-width: max(100%, 380px) !important; }
  /* Nút đảo chiều: tròn, đè giữa khe 2 thẻ. */
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-swap-btn {
    align-self: center; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; padding: 0 !important; z-index: 3;
    border: 1.5px solid #e5e7eb !important; border-radius: 50% !important; background: #fff !important; color: var(--c-primary) !important;
    box-shadow: 0 2px 8px rgba(17, 24, 39, .08) !important; transform: none !important;
  }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-swap-btn svg { width: 15px; height: 15px; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-flight-fields > .ls-swap-btn { margin: 0 -22px !important; }
  /* Nút tìm: hồng đặc, cao bằng thẻ, kính lúp vẽ bằng ::before (markup nút không có <i>). */
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-btn-search {
    flex: 0 0 auto !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
    width: auto !important; min-width: 150px; height: 60px !important; margin: 0 !important; padding: 0 24px !important;
    border: 0 !important; border-radius: 12px !important; background: var(--c-primary) !important; color: #fff !important;
    box-shadow: 0 6px 16px rgba(237, 0, 127, .22) !important; font-size: 15px !important; font-weight: 600 !important; opacity: 1 !important;
  }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-btn-search:disabled { opacity: .45 !important; box-shadow: none !important; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-btn-flight-search::before { content: "\f002"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 14px; }
}
/* Chặng điền sẵn từ link khuyến mãi mà CHƯA có ngày bay: viền + chữ gợi ý màu hồng */
:is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-fields > .ls-field.lf-need-date { border-color: var(--c-primary) !important; box-shadow: 0 0 0 3px rgba(237, 0, 127, .12) !important; }
:is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-field.lf-need-date .lf-date-disp.is-ph { color: var(--c-primary); font-weight: 600; }
/* ≤767px: ô ngày vẫn là input dd/mm/yyyy */
@media (max-width: 767px) {
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .lf-date-disp { display: none; }
}
/* 768–1099px: 2 hàng — [Điểm đi ⇄ Điểm đến] / [Ngày đi · Ngày về · nút Tìm]. */
@media (min-width: 768px) and (max-width: 1099px) {
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-fields { flex-wrap: wrap !important; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-fields > .ls-field:has(> .ls-typeahead) { flex: 1 1 calc(50% - 22px) !important; }
  :is(.lf-search-overlay, .vmb-search-wrap, .sf-edit-form) :is(#ls-panel-flight, #ls-panel-vexe, #ls-panel-train, #trainForm) .ls-fields > .ls-field:has(> .ls-datepicker) { flex: 1 1 0 !important; }
}

.lf-section { max-width: 1200px; margin: 50px auto; padding: 0 16px; }
.lf-section-title { font-size: 22px; font-weight: 800; color: #222; margin: 0 0 6px; }
.lf-section-sub { color: #666; font-size: 14px; margin-bottom: 20px; }

.lf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 991px) { .lf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lf-grid { grid-template-columns: 1fr; } }

/* Tabs cho "Chặng bay phổ biến" */
.lf-tabs { display: flex; gap: 4px; margin: 14px 0 18px; border-bottom: 2px solid #f0e0e8; }
.lf-tab { background: none; border: none; padding: 10px 18px; font-size: 14px; font-weight: 600; color: #666; cursor: pointer; position: relative; transition: color .15s; border-radius: 8px 8px 0 0; }
.lf-tab:hover { color: #ed007f; background: #fdf0f7; }
.lf-tab.active { color: #ed007f; }
.lf-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #ed007f; border-radius: 2px; }
.lf-tab-panel { display: none; }
.lf-tab-panel.active { display: block; animation: lfTabIn .25s ease; }
@keyframes lfTabIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Pill tabs "Đường bay quốc tế" */
.lf-intl-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.lf-itab { background: #f5f5f5; border: none; padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; color: #444; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; font-family: inherit; }
.lf-itab:hover { background: #fdf0f7; color: #ed007f; }
.lf-itab.active { background: #ed007f; color: #fff; }
.lf-itab-panel { display: none; }
.lf-itab-panel.active { display: block; animation: lfTabIn .25s ease; }
@media (max-width: 767px) {
    .lf-intl-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .lf-intl-tabs::-webkit-scrollbar { display: none; }
}

/* Destination card (Tab 2) - focus điểm đến, không có from→to */
.lf-dest-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: all .2s; text-decoration: none; color: inherit; display: block; }
.lf-dest-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(214,36,140,.18); }
.lf-dest-img { height: 180px; background-size: cover; background-position: center; position: relative; }
.lf-dest-img-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; color: #fff; }
.lf-dest-name { font-size: 18px; font-weight: 700; margin-bottom: 2px; }
.lf-dest-country { font-size: 12.5px; opacity: .92; }
.lf-dest-body { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lf-dest-cta { color: #ed007f; font-size: 13px; font-weight: 600; }
.lf-dest-price { color: #555; font-size: 12.5px; }
.lf-dest-price b { color: #ed007f; font-size: 14px; font-weight: 700; }

.lf-route-card { background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; text-decoration: none; color: #222; display: block; transition: transform .15s, box-shadow .15s; }
.lf-route-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.12); color: #222; text-decoration: none; }
.lf-route-img { width: 100%; height: 160px; background: #f5f5f5 center/cover; position: relative; }
.lf-route-img.no-img { background: linear-gradient(135deg, #ed007f 0%, #9c1a6a 50%, #6b1247 100%); }
.lf-route-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55)); }
.lf-route-img.no-img::after { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.45)); }
.lf-route-img-text { position: absolute; left: 14px; bottom: 10px; right: 14px; color: #fff; font-weight: 500; font-size: 16px; z-index: 1; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
/* Promo label badge (vd "Giảm ngay 200K") - góc trên-phải của image */
.lf-route-label { position: absolute; top: 10px; right: 10px; z-index: 2; background: linear-gradient(135deg, #ed007f 0%, #b81e76 100%); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(214,36,140,.35); letter-spacing: .2px; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.lf-route-body { padding: 14px 16px 16px; }
.lf-route-route { display: none; }
.lf-route-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.lf-route-date { font-size: 12px; color: #555; display: inline-flex; align-items: center; gap: 5px; }
.lf-route-date svg { width: 13px; height: 13px; color: #888; }
.lf-route-price { font-size: 12px; color: #777; text-align: right; }
.lf-route-price b { color: #ed007f; font-size: 18px; font-weight: 600; }

.lf-airlines-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; padding: 24px; background: #fafafa; border-radius: 12px; }
.lf-airline-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.lf-airline-item img { height: 24px; width: auto; }
.lf-airline-item span { font-size: 13px; font-weight: 600; color: #444; }

.lf-usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 991px) { .lf-usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lf-usp-grid { grid-template-columns: 1fr; } }
.lf-usp-card { background: #fff; border: 1px solid #f0e0eb; border-radius: 12px; padding: 22px 20px; text-align: center; transition: all .15s; }
.lf-usp-card:hover { border-color: #ed007f; box-shadow: 0 6px 20px rgba(214,36,140,.1); transform: translateY(-2px); }
.lf-usp-icon { font-size: 36px; margin-bottom: 12px; }
.lf-usp-title { font-size: 15px; font-weight: 700; color: #222; margin-bottom: 6px; }
.lf-usp-desc { font-size: 12.5px; color: #666; line-height: 1.55; }

.lf-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 767px) { .lf-tools-grid { grid-template-columns: 1fr; } }
.lf-tool-card { background: #fdf0f7; border-radius: 12px; padding: 22px; display: flex; gap: 16px; align-items: center; text-decoration: none; color: #222; transition: all .15s; }
.lf-tool-card:hover { background: #fce4ef; transform: translateX(3px); color: #222; text-decoration: none; }
.lf-tool-card-icon { font-size: 32px; flex-shrink: 0; }
.lf-tool-card-content h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: #ed007f; }
.lf-tool-card-content p { font-size: 12.5px; color: #666; margin: 0; line-height: 1.45; }

.lf-faq { max-width: 900px; margin: 0 auto; }
.lf-faq-item { background: #fff; border: 1px solid #eee; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.lf-faq-q { padding: 16px 20px; cursor: pointer; font-weight: 600; font-size: 14.5px; color: #222; display: flex; justify-content: space-between; align-items: center; gap: 12px; user-select: none; }
.lf-faq-q::after { content: '+'; font-size: 22px; color: #ed007f; flex-shrink: 0; transition: transform .2s; }
.lf-faq-item.open .lf-faq-q::after { content: '−'; }
.lf-faq-a { padding: 0 20px 16px; font-size: 13.5px; color: #555; line-height: 1.65; display: none; }
.lf-faq-item.open .lf-faq-a { display: block; }

/* News grid */
.lf-news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 991px) { .lf-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lf-news-grid { grid-template-columns: 1fr; } }
.lf-news-card { display: block; background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; text-decoration: none; color: #222; transition: transform .15s, box-shadow .15s; }
.lf-news-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.1); color: #222; text-decoration: none; }
.lf-news-img { width: 100%; aspect-ratio: 16/10; background: #f2f2f2 center/cover; }
.lf-news-body { padding: 12px 14px 14px; }
.lf-news-date { font-size: 11px; color: #999; margin-bottom: 6px; }
.lf-news-title { font-size: 13.5px; font-weight: 600; line-height: 1.45; color: #222; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lf-news-card:hover .lf-news-title { color: #ed007f; }
.lf-news-more { text-align: center; margin-top: 22px; }
.lf-news-more a { display: inline-block; padding: 10px 26px; border: 1.5px solid #ed007f; color: #ed007f; border-radius: 24px; font-weight: 600; font-size: 13.5px; text-decoration: none; transition: all .15s; }
.lf-news-more a:hover { background: #ed007f; color: #fff; }

/* Intro HTML clamp & readmore */
.lf-intro-clamp { position: relative; overflow: hidden; transition: max-height .3s ease; }
.lf-intro-section.is-clamped .lf-intro-clamp { max-height: 180px; }
.lf-intro-section.is-clamped .lf-intro-clamp::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none;
}
.lf-intro-morebtn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1.5px solid #ed007f; color: #ed007f;
    font-size: 13.5px; font-weight: 700; padding: 8px 22px; border-radius: 20px;
    cursor: pointer; transition: all .18s ease; outline: none;
}
.lf-intro-morebtn:hover { background: #ed007f; color: #fff; }

/* Định dạng HTML phong phú từ CKEditor cho .lf-intro-content */
.lf-intro-content h1, .lf-intro-content h2, .lf-intro-content h3, 
.lf-intro-content h4, .lf-intro-content h5, .lf-intro-content h6 {
    color: #1e293b; font-weight: 700; margin: 16px 0 10px 0; line-height: 1.35;
}
.lf-intro-content h1 { font-size: 22px; }
.lf-intro-content h2 { font-size: 19px; }
.lf-intro-content h3 { font-size: 17px; }
.lf-intro-content h4 { font-size: 15.5px; }
.lf-intro-content p { margin-bottom: 12px; line-height: 1.7; }
.lf-intro-content p:last-child { margin-bottom: 0; }
.lf-intro-content ul { list-style: disc !important; list-style-type: disc !important; list-style-position: outside !important; margin: 12px 0 16px 0 !important; padding-left: 20px !important; }
.lf-intro-content ol { list-style: decimal !important; list-style-type: decimal !important; list-style-position: outside !important; margin: 12px 0 16px 0 !important; padding-left: 20px !important; }
.lf-intro-content li { display: list-item !important; list-style: inherit !important; margin-bottom: 8px; line-height: 1.6; }
.lf-intro-content img { max-width: 100% !important; height: auto !important; border-radius: 8px; margin: 12px auto !important; display: block !important; clear: both; }
.lf-intro-content img[style*="float: left"], .lf-intro-content img[style*="float:left"] { float: left !important; margin: 0 16px 12px 0 !important; display: inline-block !important; }
.lf-intro-content img[style*="float: right"], .lf-intro-content img[style*="float:right"] { float: right !important; margin: 0 0 12px 16px !important; display: inline-block !important; }
.lf-intro-content table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.lf-intro-content table th, .lf-intro-content table td { border: 1px solid #cbd5e1; padding: 8px 12px; text-align: left; }
.lf-intro-content table th { background: #f8fafc; font-weight: 600; }
.lf-intro-content blockquote { border-left: 4px solid #ed007f; margin: 14px 0; padding: 8px 16px; background: #fff5fb; color: #475569; font-style: italic; }

/* ─── RIÊNG BẢN MOBILE (landing_flights.php in class .lf-wrap--m) ─────────────
   5 khác biệt duy nhất so với bản desktop, trước nằm trong khối <style> riêng của
   landing_flights.php. Selector 2 class (0,2,0) thắng bản mặc định (0,1,0) nên
   KHÔNG cần !important và không phụ thuộc thứ tự khai báo. */
@media (max-width: 767px) {
    .lf-wrap--m .lf-hero { min-height: 190px; padding: 0; }
    .lf-wrap--m .lf-hero::before { background: rgba(0,0,0,.28); }
    .lf-wrap--m .lf-hero h1 { display: none; }
    .lf-wrap--m .lf-hero p.lf-hero-sub { display: none; }
    .lf-wrap--m .lf-search-overlay { margin-top: -52px; }
}