/* ============================================================
   TRANG CHỦ v3 (client 2026-09-24, theo bản vẽ)
   Nạp TRỰC TIẾP từ user_2019/trangchu.php (không nằm trong bundle → sửa là ăn, không cần build).
   Scope: .hph (hero desktop) + .hp3-* (Voucher ưu đãi / Deal hot hôm nay / Khám phá điểm đến).
   Markup: user_2019/box/home_hero.php · home_vouchers.php · home_deals.php · home_destinations.php
   JS:     static-assets/js/home-v3.js (kéo ngang, chấm trang, đếm ngược)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap');

:root {
  --hp3-w: 1200px;
  /* Bảng màu v3.1 (client 2026-09-24 "nhiều hồng quá"): HỒNG chỉ còn cho nút chính / "Xem tất cả" voucher;
     khối Deal hot dùng tông VÀNG-NÂU, số tiền voucher màu xanh đậm. */
  --hp3-gold: #c58f2c;         /* nút tròn, dấu chấm, "Xem tất cả" Deal */
  --hp3-gold-ink: #8a5a12;     /* giá bán, chữ trên nền vàng nhạt */
  --hp3-gold-soft: #f7e3b8;    /* nền nhãn FLASH SALE / vòng Giảm */
  --hp3-ink: #1f2a44;          /* tiêu đề xanh đậm như bản vẽ */
  --hp3-muted: #6b7280;
  --hp3-radius: 16px;
}

/* ───────────────────────── HERO (desktop) ───────────────────────── */
.hph {
  position: relative;
  /* KHÔNG overflow:hidden — dropdown gợi ý của ô tìm kiếm phải tràn xuống dưới hero. */
  padding: 46px 16px 28px;       /* client 30/09: "tăng chiều cao banner để bên trên thoáng hơn" (trước 26/22) */
  --hph-page-bg: #fafafa;       /* = nền body trang chủ → đáy hero tan liền, không lộ mép */
  background: linear-gradient(180deg, #dff1fb 0%, #eef7fc 55%, var(--hph-page-bg) 100%);
}
.hph-bg {
  position: absolute; top: 0; bottom: 0; width: 34%;
  background: url('/static-assets/images/home/hero-bay.jpg') center / cover no-repeat;
  pointer-events: none;
}
/* ảnh cảnh biển tan dần vào nền ở 2 mép (bản vẽ: vịnh bên trái, núi mây bên phải) */
.hph-bg-l { left: 0;  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent); }
.hph-bg-r { right: 0; transform: scaleX(-1); opacity: .75;
  -webkit-mask-image: linear-gradient(90deg, #000 10%, transparent 80%); mask-image: linear-gradient(90deg, #000 10%, transparent 80%); }
.hph::after { /* mờ đáy để khối voucher bên dưới liền mạch */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(180deg, rgba(250,250,250,0), var(--hph-page-bg));
  pointer-events: none;
}
.hph-inner { position: relative; z-index: 2; max-width: var(--hp3-w); margin: 0 auto; }
/* Khi dropdown gợi ý mở (global-search.js gắn body.gs-dropdown-active + bật #gsOverlay z 9990 trong
   header): nhấc hero lên TRÊN lớp phủ để ô tìm + dropdown sáng rõ. Chỉ lúc mở — bình thường giữ
   z thấp để mega-menu header (sổ xuống đè hero) không bị ô tìm kiếm che.
   CHỈ DESKTOP (:not(.is-mobile)): ở đó ô tìm thật nằm TRONG hero. Mobile thì ô trong hero chỉ là nút giả, lớp tìm
   kiếm toàn màn hình mở ở HEADER (#gsMobPanel, header z 9990) — nhấc hero lên 10000 làm 8 icon + ô giả nổi đè
   lên lớp tìm kiếm (client báo 03/10: "ấn vào ô search bị các icon bên trên đè lên"). */
body.gs-dropdown-active .hph:not(.is-mobile) .hph-inner { z-index: 10000; }
/* ô tìm kiếm CĂN GIỮA trang (client 2026-09-24); slogan absolute bên phải nên không đẩy lệch ô.
   max-width 640 chừa đủ chỗ cho slogan (~250px) trong khung 1200 mà không đè nhau. */
.hph-top { position: relative; display: flex; align-items: center; justify-content: center; }
.hph-search { flex: 1 1 auto; min-width: 0; max-width: 640px; }

/* Ô tìm kiếm toàn cục phiên bản hero (partials/_global_search_box.php variant 'hero').
   Selector kèm .hph để thắng rule nền .global-search-bar (global-search.css) mà không cần !important. */
.hph .hph-gs .global-search-bar {
  height: 56px;
  padding: 0 6px 0 20px;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(31, 42, 68, .12);
  overflow: visible;
}
.hph .hph-gs-ico { flex: 0 0 auto; display: inline-flex; color: var(--hp3-ink); margin-right: 12px; }
.hph .hph-gs-ico svg { width: 22px; height: 22px; }
.hph .hph-gs-field { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.hph .hph-gs .global-search-bar input#globalSearchInput {
  /* flex:none BẮT BUỘC: rule chung .global-search-bar input có flex:1 → trong cột flex .hph-gs-field
     input giãn DỌC lấp đầy (36px), đẩy dòng gợi ý sát viền dưới ô. Ghim cao 22px để cụm 2 dòng căn giữa. */
  flex: none; height: 22px; min-height: 0; line-height: 22px; padding: 0; font-size: 15px; font-weight: 500; color: var(--hp3-ink);
}
.hph .hph-gs .global-search-bar input#globalSearchInput::placeholder { color: #4b5563; }
.hph .hph-gs-hint { font-size: 12px; color: var(--hp3-muted); line-height: 1.3; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hph .hph-gs input#globalSearchInput:not(:placeholder-shown) + .hph-gs-hint { visibility: hidden; }
.hph .hph-gs .global-search-bar .gs-btn-search {
  flex: 0 0 auto;
  height: 44px; padding: 0 28px;
  border: 0; border-radius: 999px;
  background: linear-gradient(90deg, #f0167f, var(--c-primary));
  color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 16px rgba(237, 0, 127, .3);
  transition: filter .2s, transform .2s;
}
.hph .hph-gs .global-search-bar .gs-btn-search:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
.hph .hph-gs .gs-dropdown { top: calc(100% + 8px); border-radius: 16px; }

.hph-slogan {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(-6deg);
  margin: 0; display: flex; flex-direction: column; align-items: flex-start;
  font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 26px; line-height: 1.15;
  color: #0f4c5c; pointer-events: none;
}
.hph-slogan-2 { padding-left: 36px; }
.hph-slogan .fa-heart { font-size: 18px; }

.hph-svc {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 40px;
  margin-top: 22px;
}
.hph-svc-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 96px; color: var(--hp3-ink); text-decoration: none; text-align: center;
  font-size: 15px; line-height: 1.25;
}
.hph-svc-item:hover, .hph-svc-item:focus { color: var(--c-primary); text-decoration: none; }
.hph-svc-ico {
  width: 68px; height: 68px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; background: #fff;
  box-shadow: 0 6px 16px rgba(31, 42, 68, .1);
  transition: transform .2s;
}
.hph-svc-item:hover .hph-svc-ico { transform: translateY(-3px); }
.hph-svc-ico svg { width: 1.4em; height: 1.4em; display: block; }   /* bộ icon 24×24 client gửi 30/09 (có lề trong → 1.4em), tô currentColor */
/* Ô chưa có SVG trong bộ đặc dùng glyph Font Awesome (Khách sạn, Vé vui chơi, Tour trong ngày, Tour trekking — 03/10):
   hình SVG chỉ chiếm ~80% khung 1.4em (= 1.12em) nên phóng glyph FA lên cùng cỡ cho cân mắt giữa hai loại. */
.hph-svc-ico > i { font-size: 1.12em; line-height: 1; }
.hph-svc-ico.is-pink   { background: #ffe1ee; color: #f0167f; }
.hph-svc-ico.is-blue   { background: #e0edff; color: #2563eb; }
.hph-svc-ico.is-green  { background: #dcf5ea; color: #14a37f; }
.hph-svc-ico.is-orange { background: #ffe9d6; color: #f97316; }
.hph-svc-ico.is-purple { background: #efe4ff; color: #8b3fd9; }
.hph-svc-ico.is-sky    { background: #e0f0ff; color: #1d7ee0; }
.hph-svc-ico.is-amber  { background: #fff1d1; color: #f59e0b; }
.hph-svc-ico.is-rose   { background: #ffe1e6; color: #e11d48; }
/* ── Khung tìm theo sản phẩm (desktop) — box/local_search_bar.php nạp trong #hphLs, xổ khi bấm icon ──
   Hàng .ls-tabs của khung bị ẩn vì icon ở trên đóng vai tab. Bỏ margin âm cũ (-45px local-search.css,
   -115px !important homepage-style-v2.css) vốn để khung ĐÈ lên banner slide — hero không còn banner. */
.hph-ls { margin-top: 18px; animation: hphLsIn .18s ease-out; }
.hph-ls[hidden] { display: none; }
@keyframes hphLsIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.hph-ls .local-search-overlay { margin: 0 !important; max-width: none; z-index: 60; }
.hph-ls .local-search-overlay > .wrapper { width: 100%; max-width: none; padding: 0 !important; }
.hph-ls .local-search-box .ls-tabs { display: none !important; }
.hph-ls .local-search-box { border-radius: 16px; }
.hph-ls .local-search-overlay.hph-ls-off { display: none !important; }
/* Mobile: local-search-overlay-mobile.css ẩn .local-search-overlay ở ≤767px trên MỌI trang (!important,
   0,1,0) → bật lại riêng trong hero bằng selector mạnh hơn. */
.hph-ls .local-search-overlay:not(.hph-ls-off) { display: block !important; }
/* MOBILE = bottom-sheet trượt từ dưới lên (client 2026-09-25) — .is-sheet chỉ render khi $device==='M';
   JS (home-v3.js) dời #hphLs + #hphLsMask ra <body>. z 99990: trên header (9990), DƯỚI lịch lsfc
   (99998/99999, gắn ở body) để lịch vé máy bay vẫn nổi trên sheet; datepicker bootstrap tự lấy z của cha +10.
   Nút nổi Zalo/Chat tự ẩn nhờ dlv-overlay-fabs.js (thấy lớp mờ fixed kín màn hình).
   Mở hẳn thì transform:none (KHÔNG translateY(0)) — transform khác none biến sheet thành containing block
   của con position:fixed (bottom-sheet chọn tháng .lsmp-sheet) → sheet con bị nhốt trong khung. */
.hph-ls-mask { position: fixed; inset: 0; z-index: 99989; background: rgba(17, 24, 39, .45); opacity: 0; transition: opacity .25s; }
.hph-ls-mask.is-open { opacity: 1; }
.hph-ls-mask[hidden] { display: none; }
.hph-ls.is-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990;
  margin: 0; max-height: 88vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); animation: none;
}
.hph-ls.is-sheet.is-open { transform: none; }
.hph-ls.is-sheet[hidden] { display: none; }
.hph-ls-head { flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: center; padding: 16px 52px 12px; border-bottom: 1px solid #f1f1f4; }
.hph-ls-grab { position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #e5e7eb; }
.hph-ls-title { font-size: 16px; font-weight: 700; color: #111; }
.hph-ls-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; font-size: 26px; line-height: 1; color: #666; cursor: pointer; }
.hph-ls.is-sheet .hph-ls-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Trong sheet: bỏ khung thẻ nổi (bóng/viền/bo góc — homepage-style-v2.css ép !important lên .wrapper). */
.hph-ls.is-sheet .local-search-overlay > .wrapper { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
.hph-ls.is-sheet .local-search-box { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
/* 30/09 (client "border xám, màu của ô bên trong màu trắng"): mỗi ô trong sheet mobile CHỈ CÒN 1 viền — bỏ viền đáy
   của khung .ls-field (rule mobile local-search tạo border-bottom, home-mytour-skin.css tô #e6e8ec + bo 12px → trông
   như 2 lớp). Ô nhập viền xám trung tính, nền trắng, không bóng; focus = hồng.
   30/09 sau (client gửi hình ô tìm trang /tour — landing_tour.php .lt-search-box — "chỉnh lại UI popup search bên
   mobile như hình cũ", tab Tour + Khách sạn): ô BO 12px (thay bo tròn hết cỡ 999px), nhãn IN HOA xám đậm, KHÔNG icon
   trong ô, nút hồng bo 12px. Áp cho mọi tab trong sheet để các tab đồng bộ; riêng phần BỎ ICON + đệm trái + cỡ chữ
   cho các tab trong :is(...) bên dưới (mọi tab mở từ hàng icon hero; vé máy bay dùng form /ve-may-bay riêng).
   Rà từng tab (client "rà soát và chỉnh lại cho từng cái"): .ls-fields mỗi tab khác nhau (tour gap 16px, khách sạn
   gap 0, vé vui chơi align-items:flex-end → ô co theo chữ dạt sang phải) → chuẩn hoá 1 kiểu: cột, ô full ngang,
   khoảng cách 16px bằng margin của ô.
   #hphLs + !important vì rule gốc (overide-v2.css / local-search.css) đều dạng #ls-panel-… !important, có cả
   #ls-panel-tour input#lsTourDestInput (2 id) → selector dưới cần 2 id (#hphLs + #ls-panel-…) mới thắng. */
#hphLs.is-sheet .ls-panel .ls-fields { gap: 0 !important; align-items: stretch !important; }
/* Lề ngang panel: vé vui chơi riêng 24px, các tab khác 14px → đồng bộ 14px. */
#hphLs.is-sheet :is(#ls-panel-tour, #ls-panel-hotel, #ls-panel-activity, #ls-panel-trekking, #ls-panel-ticket, #ls-panel-combo) { padding-left: 14px !important; padding-right: 14px !important; }
#hphLs.is-sheet .ls-panel .ls-fields > .ls-field {
  flex: 0 0 auto !important; width: 100% !important; max-width: none !important;
  border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0 16px !important;
}
#hphLs.is-sheet .ls-panel .ls-fields > .ls-field > label {
  display: block; margin: 0 0 8px !important;
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: .3px; text-transform: uppercase; color: #4b5563 !important;
}
#hphLs.is-sheet .ls-panel .ls-fields > .ls-field > label .req { display: none; }   /* hình mẫu không có dấu * — nút Tìm tự khoá khi thiếu ô bắt buộc */
#hphLs.is-sheet .ls-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#hphLs.is-sheet .ls-field select,
#hphLs.is-sheet .ls-field .ls-pax-trigger,
#hphLs.is-sheet .ls-field .ls-dep-trigger,
#hphLs.is-sheet .ls-field .lsmp-trigger,
#hphLs.is-sheet .ls-field .ls-budget-trigger,
#hphLs.is-sheet .ls-field .ls-typeahead-text {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  box-shadow: none !important;
}
#hphLs.is-sheet :is(#ls-panel-tour, #ls-panel-hotel, #ls-panel-activity, #ls-panel-trekking, #ls-panel-ticket, #ls-panel-combo) .ls-field input[type="text"],
#hphLs.is-sheet :is(#ls-panel-tour, #ls-panel-hotel, #ls-panel-activity, #ls-panel-trekking, #ls-panel-ticket, #ls-panel-combo) .ls-field .ls-dep-trigger,
#hphLs.is-sheet :is(#ls-panel-tour, #ls-panel-hotel, #ls-panel-activity, #ls-panel-trekking, #ls-panel-ticket, #ls-panel-combo) .ls-field .lsmp-trigger,
#hphLs.is-sheet :is(#ls-panel-tour, #ls-panel-hotel, #ls-panel-activity, #ls-panel-trekking, #ls-panel-ticket, #ls-panel-combo) .ls-field .ls-pax-trigger,
#hphLs.is-sheet :is(#ls-panel-tour, #ls-panel-hotel, #ls-panel-activity, #ls-panel-trekking, #ls-panel-ticket, #ls-panel-combo) .ls-field .ls-budget-trigger {
  height: 52px !important; padding: 0 16px !important;
  border: 1.5px solid #e5e7eb !important; border-radius: 12px !important;
  background: #fff none !important;   /* none = bỏ icon vẽ bằng background-image (ghim, lịch, người…) */
  box-shadow: none !important;
  font-size: 16px !important; font-weight: 500 !important; color: #111827 !important;
}
#hphLs.is-sheet .ls-field input::placeholder { color: #9ca3af !important; font-weight: 400; }
#hphLs.is-sheet .ls-field input:not([type="checkbox"]):not([type="radio"]):focus,
#hphLs.is-sheet .ls-field select:focus,
#hphLs.is-sheet .ls-field .ls-pax-trigger:focus-visible,
#hphLs.is-sheet .ls-field .ls-dep-trigger:focus-visible,
#hphLs.is-sheet .ls-field .lsmp-trigger:focus-visible,
#hphLs.is-sheet .ls-field .ls-typeahead-text:focus { border-color: var(--c-primary) !important; }
/* Nút Tìm: hồng đặc bo 12px như hình mẫu. Thiếu ô bắt buộc thì nút vẫn bị khoá (lsRefreshBtns → disabled) —
   hiện hồng NHẠT thay cho xám để giữ kiểu hình mẫu mà vẫn thấy rõ là chưa bấm được. */
#hphLs.is-sheet :is(#ls-panel-tour, #ls-panel-hotel, #ls-panel-activity, #ls-panel-trekking, #ls-panel-ticket, #ls-panel-combo) .ls-btn-search {
  width: 100% !important; height: 52px !important; margin: 4px 0 0 !important; padding: 0 18px !important;
  border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
  background: var(--c-primary) !important; color: #fff !important; opacity: 1 !important;
  font-size: 16px !important; font-weight: 700 !important;
}
#hphLs.is-sheet :is(#ls-panel-tour, #ls-panel-hotel, #ls-panel-activity, #ls-panel-trekking, #ls-panel-ticket, #ls-panel-combo) .ls-btn-search i { color: #fff !important; }
#hphLs.is-sheet :is(#ls-panel-tour, #ls-panel-hotel, #ls-panel-activity, #ls-panel-trekking, #ls-panel-ticket, #ls-panel-combo) .ls-btn-search:disabled { opacity: .45 !important; }
/* Số đêm (khách sạn) + nút đảo chiều điểm đi/đến (combo): trước dùng margin âm -22px chen GIỮA 2 ô → đè lên viền ô.
   Nay neo góc PHẢI của HÀNG NHÃN ô phía dưới (vd ngang chữ "TRẢ PHÒNG"): đứng ngay sau ô trên (ăn margin 16px của ô
   đó), margin-bottom âm đúng bằng chiều cao của nó để ô dưới trồi lên cùng hàng. Nhãn cao ~26px (18 + 8) ≥ 24px → không
   chạm ô nhập. */
#hphLs.is-sheet #ls-panel-hotel .ls-hotel-nights {
  position: relative !important; align-self: flex-end !important; z-index: 2;
  height: 24px !important; margin: 0 0 -24px !important; padding: 0 10px !important; border: 1px solid #ffd3e6 !important;
  background: #fff5fa !important; box-shadow: none !important; color: var(--c-primary) !important;
  font-size: 12px !important; font-weight: 700;
}
#hphLs.is-sheet #ls-panel-combo .ls-combo-area-swap {
  position: relative !important; align-self: flex-end !important; z-index: 2;
  width: 26px !important; height: 26px !important; margin: -2px 0 -24px !important; padding: 0 !important;
  border: 1px solid #ffd3e6 !important; background: #fff5fa !important; box-shadow: none !important; color: var(--c-primary) !important;
}
#hphLs.is-sheet #ls-panel-combo .ls-combo-area-swap svg { width: 14px; height: 14px; }
#hphLs.is-sheet #ls-panel-hotel .ls-hotel-nights svg { width: 14px; height: 14px; }
/* 30/09 (client: "ngày nhận/trả phòng có popup calendar đẩy lên, số khách cũng vậy, tương tự vé máy bay" + "vé vui chơi
   dropdown hiển bên trên chứ không để bên dưới" + "tương tự, chỉnh lại cho các mục khác"):
   - Ô CHỌN (điểm khởi hành tour, địa điểm vé vui chơi, số khách KS) → SHEET CON trượt từ đáy + nền mờ, như ô số khách vé máy
     bay. Đầu sheet + nút "Xong" do home-v3.js chèn (.hph-dd-*). Ô ngày (KS, combo) đã mở lịch sheet (lsfc) sẵn; ô tháng
     khởi hành dùng .lsmp-sheet sẵn; ô điểm đến KS mở màn hình tìm riêng (hotel-dest-picker) — không đụng.
   - Ô GÕ TÌM có danh sách gợi ý (điểm đến tour / tour trong ngày / trekking, tìm vé, sân bay combo): client "chọn nhập
     điểm đến thì dropdown nhảy lên trên, không tràn vào trong ô" → focus ô = CẢ CỤM ô nhập + danh sách (.hph-ac-open,
     home-v3.js) nổi thành SHEET TÌM KIẾM cao gần hết màn hình; ô nhập ở đầu sheet nên vẫn thấy chữ đang gõ.
   Nền mờ = ::after của .local-search-overlay — stacking context z 60 chứa cả ô lẫn dropdown (z 200): nền z 150 nằm trên
   các ô, dưới sheet con. Bấm nền → target ngoài .ls-field-* → handler "bấm ra ngoài" sẵn có của local_search_bar tự đóng. */
#hphLs.is-sheet .ls-dep-dropdown.active,
#hphLs.is-sheet .ls-pax-dropdown.active {
  position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
  width: auto !important; min-width: 0 !important; max-width: none !important; max-height: 75vh !important;
  overflow-y: auto !important; overscroll-behavior: contain;
  margin: 0 !important; padding: 0 16px calc(16px + env(safe-area-inset-bottom)) !important;
  border: 0 !important; border-radius: 20px 20px 0 0 !important; background: #fff !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .18) !important; z-index: 200 !important;
  animation: hphDdUp .24s cubic-bezier(.4, 0, .2, 1);
}
@keyframes hphDdUp { from { transform: translateY(100%); } to { transform: none; } }
#hphLs.is-sheet .local-search-overlay:has(.ls-dep-dropdown.active, .ls-pax-dropdown.active, .hph-ac-open)::after {
  content: ""; position: fixed; inset: 0; z-index: 150; background: rgba(17, 24, 39, .45);
}
#hphLs.is-sheet .hph-dd-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 0 -16px 6px; padding: 20px 52px 12px; background: #fff; border-bottom: 1px solid #f1f1f4;
}
#hphLs.is-sheet .hph-dd-grab { position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #e5e7eb; }
#hphLs.is-sheet .hph-dd-title { font-size: 16px; font-weight: 700; color: #111; }
/* Nút trong sheet con dính rule chung `.local-search-box .ls-field button {height:46px; border-radius:999px; nền trắng
   viền xám … !important}` → phải !important lại. */
#hphLs.is-sheet .hph-dd-x {
  position: absolute; right: 6px; top: 50%; transform: translateY(-40%);
  width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: none !important; box-shadow: none !important; font-size: 26px; line-height: 1; color: #666;
}
#hphLs.is-sheet .ls-dep-dropdown.active .ls-dep-item {
  padding: 14px 4px !important; border-radius: 0 !important; border-bottom: 1px solid #f3f4f6;
  font-size: 16px !important; color: #111827;
}
#hphLs.is-sheet .ls-dep-dropdown.active .ls-dep-item:last-child { border-bottom: 0; }
#hphLs.is-sheet .ls-dep-dropdown.active .ls-dep-item.selected { color: var(--c-primary); font-weight: 700; background: none !important; }
#hphLs.is-sheet .hph-dd-done {
  display: block; width: 100% !important; height: 50px !important; margin-top: 14px; border: 0 !important; border-radius: 12px !important;
  background: var(--c-primary) !important; color: #fff !important; box-shadow: none !important; font-size: 16px; font-weight: 700;
}
/* Nút −/+ số khách: tròn 36px như sheet số khách vé máy bay (thay viên thuốc cao 46px). */
#hphLs.is-sheet .ls-pax-dropdown .ls-pax-btn {
  width: 36px !important; min-width: 36px !important; height: 36px !important; padding: 0 !important;
  border: 1.5px solid #e5e7eb !important; border-radius: 50% !important; background: #fff !important; box-shadow: none !important;
  color: var(--c-primary) !important; font-size: 18px !important; line-height: 1 !important;
}
#hphLs.is-sheet .ls-pax-dropdown .ls-pax-btn:disabled { color: #d1d5db !important; }
#hphLs.is-sheet .ls-pax-dropdown .ls-pax-row { padding: 12px 0 !important; }
/* Sheet tìm kiếm: cụm ô nhập + danh sách, top 7vh (lộ mép nền mờ phía trên để biết đang ở lớp nổi). */
#hphLs.is-sheet .hph-ac-head { display: none; }
#hphLs.is-sheet .hph-ac-open {
  position: fixed !important; left: 0 !important; right: 0 !important; top: 7vh !important; bottom: 0 !important;
  z-index: 200 !important; display: flex !important; flex-direction: column;
  margin: 0 !important; padding: 0 16px calc(12px + env(safe-area-inset-bottom)) !important;
  background: #fff !important; border-radius: 20px 20px 0 0 !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, .18) !important;
  animation: hphDdUp .24s cubic-bezier(.4, 0, .2, 1);
}
#hphLs.is-sheet .hph-ac-open .hph-ac-head {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  margin: 0 -16px 12px; padding: 20px 52px 12px; border-bottom: 1px solid #f1f1f4;
}
/* Sheet là flex cột → ô nhập bị co (còn ~22px) nếu không khoá. */
#hphLs.is-sheet .hph-ac-open input[type="text"] { flex: 0 0 auto !important; min-height: 52px !important; }
#hphLs.is-sheet .hph-ac-open .ls-autocomplete-dropdown,
#hphLs.is-sheet .hph-ac-open .ls-typeahead-dd {
  position: static !important; flex: 1 1 auto; min-height: 0; width: auto !important; max-height: none !important;
  overflow-y: auto !important; overscroll-behavior: contain;
  margin: 10px -16px 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
/* Ô NGÀY dạng THẺ 2 CỘT (client 30/09: "thêm icon calendar nhỏ ở đầu để user biết bấm được" → rồi "ngày đi và ngày về
   trình bày UI dạng 2 bên như hình" — kiểu ô ngày vé máy bay): nhãn nằm TRONG thẻ (chữ thường xám), dưới là icon lịch hồng
   đặc + ngày dạng "T7, 3 thg 10" (.hph-date-disp do home-v3.js vẽ; value dd/mm/yyyy thật vẫn trong input, chỉ ẩn chữ).
   Áp cho Combo (Ngày đi/Ngày về + Nhận/Trả phòng) và Khách sạn (Nhận/Trả phòng). Cả thẻ bấm được: nút phủ .ls-date-overlay
   của local_search_bar phủ kín .ls-field (local-search.css). Panel đổi sang lưới 2 cột; ô khác chiếm cả hàng. */
#hphLs.is-sheet :is(#ls-panel-hotel, #ls-panel-combo) .ls-fields {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px !important; row-gap: 0 !important;
}
#hphLs.is-sheet :is(#ls-panel-hotel, #ls-panel-combo) .ls-fields > * { grid-column: 1 / -1; }
#hphLs.is-sheet #ls-panel-combo .ls-fields > .ls-combo-area-from   { grid-row: 1; }
#hphLs.is-sheet #ls-panel-combo .ls-fields > .ls-combo-area-to     { grid-row: 2; }
/* !important: rule neo cũ (khi còn xếp dọc) đặt align-self:flex-end !important → trong lưới = dính đáy ô. */
#hphLs.is-sheet #ls-panel-combo .ls-fields > .ls-combo-area-swap   { grid-row: 2; justify-self: end !important; align-self: start !important; margin: -2px 0 0 !important; }
#hphLs.is-sheet #ls-panel-combo .ls-fields > .ls-combo-area-start  { grid-row: 3; grid-column: 1; }
#hphLs.is-sheet #ls-panel-combo .ls-fields > .ls-combo-area-end    { grid-row: 3; grid-column: 2; }
#hphLs.is-sheet #ls-panel-combo .ls-fields > .ls-combo-area-loc    { grid-row: 4; }
#hphLs.is-sheet #ls-panel-combo .ls-fields > .ls-combo-area-ci     { grid-row: 5; grid-column: 1; }
#hphLs.is-sheet #ls-panel-combo .ls-fields > .ls-combo-area-co     { grid-row: 5; grid-column: 2; }
#hphLs.is-sheet #ls-panel-combo .ls-fields > .ls-combo-area-search { grid-row: 6; }
/* overide-v2.css ẩn chữ nút tìm combo ở mobile (chỉ còn kính lúp) — trong sheet có đủ chỗ, hiện lại như các tab khác. */
#hphLs.is-sheet #ls-panel-combo .ls-combo-search-txt { display: inline !important; }
#hphLs.is-sheet #ls-panel-hotel .ls-fields > .ls-field:has(#lsHotelCity)     { grid-row: 1; }
#hphLs.is-sheet #ls-panel-hotel .ls-fields > .ls-field:has(#lsHotelCheckin)  { grid-row: 2; grid-column: 1; }
#hphLs.is-sheet #ls-panel-hotel .ls-fields > .ls-field:has(#lsHotelCheckout) { grid-row: 2; grid-column: 2; }
#hphLs.is-sheet #ls-panel-hotel .ls-fields > .ls-field-pax                   { grid-row: 3; }
#hphLs.is-sheet #ls-panel-hotel .ls-fields > .ls-btn-search                  { grid-row: 4; }
/* Số đêm: góc trên-phải thẻ Trả phòng, ngang nhãn (thay kiểu neo hàng nhãn ô dưới khi còn xếp dọc). */
#hphLs.is-sheet #ls-panel-hotel .ls-fields > .ls-hotel-nights {
  grid-row: 2; grid-column: 2; justify-self: end !important; align-self: start !important; margin: 9px 10px 0 0 !important; z-index: 6;
}
#hphLs.is-sheet :is(#ls-panel-hotel, #ls-panel-combo) .ls-fields > .ls-field:has(> input.hph-date-input) {
  position: relative; padding: 10px 14px 12px !important;
  border: 1.5px solid #e5e7eb !important; border-radius: 14px !important; background: #fff !important;
}
#hphLs.is-sheet :is(#ls-panel-hotel, #ls-panel-combo) .ls-fields > .ls-field:has(> input.hph-date-input) > label {
  margin: 0 0 4px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: #6b7280 !important;
}
#hphLs.is-sheet :is(#ls-panel-hotel, #ls-panel-combo) .ls-field input:is(#lsHotelCheckin, #lsHotelCheckout, #lsComboStart, #lsComboEnd, #lsComboCheckin, #lsComboCheckout) {
  display: block; width: 100% !important; height: 26px !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent none !important;
  color: transparent !important; caret-color: transparent; font-size: 16px !important; cursor: pointer;
  opacity: 0 !important;   /* ẩn cả placeholder — tô chữ trong suốt không ăn placeholder */
}
#hphLs.is-sheet .hph-date-disp {
  position: absolute; left: 14px; right: 10px; bottom: 12px; height: 26px; padding-left: 26px;
  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 / 18px 18px;
  font-size: 16px; font-weight: 700; line-height: 26px; color: #111827;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
#hphLs.is-sheet .hph-date-disp.is-ph { color: #9ca3af; font-weight: 600; }
/* ═══ DESKTOP — khung tìm dưới hàng icon hero theo STYLE MỚI (client 30/09: "bộ search đang theo style cũ, tối ưu theo
   style mới — làm vé máy bay trước" → "font nhỏ và mảnh hơn" → "làm tương tự và căn chỉnh cho các item khác"):
   cùng ngôn ngữ với sheet mobile / form /ve-may-bay — mỗi ô là THẺ bo 12px cao 60px, nhãn nhỏ xám nằm TRONG thẻ, giá
   trị 15px/600; ô ngày dạng "T7, 3 thg 10" + icon lịch (home-v3.js initDateDisp → .hph-date-disp); nút tìm hồng cao
   bằng thẻ. Áp cho mọi tab mở từ hàng icon hero; chỉ trong hero trang chủ (#hphLs không .is-sheet) — thanh tìm ở trang
   khác không đổi. #hphLs + id panel để thắng rule gốc dạng #ls-panel-… !important (có cả input#id → 2 id). */
#hphLs:not(.is-sheet) .local-search-box { min-height: 0 !important; }
/* Panel tour / vé vui chơi / tour trong ngày / trekking có padding riêng (~24px) chồng lên padding .ls-fields → lệch lề
   so với vé máy bay / khách sạn / combo. Bỏ padding panel để mọi tab thẳng mép như nhau. */
#hphLs:not(.is-sheet) :is(#ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) { padding: 0 !important; }   /* gốc 220px → thừa khoảng trắng dưới (vé máy bay, khách sạn, combo) */
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-fields { align-items: stretch !important; gap: 10px !important; padding: 18px 22px 22px !important; }
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .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;
}
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-fields > .ls-field:hover { border-color: #d1d5db !important; }
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-fields > .ls-field:focus-within { border-color: var(--c-primary) !important; }
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .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;
}
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-fields > .ls-field > label .req { display: none; }
/* Ô nhập / nút chọn bên trong thẻ: không viền, không nền, không icon (icon cũ vẽ bằng background-image). */
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field input[type="text"],
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field .ls-dep-trigger,
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field .lsmp-trigger,
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field .ls-pax-trigger,
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field .ls-typeahead-text {
  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;
}
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field input[type="text"] { display: block; }
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field :is(.ls-dep-trigger, .lsmp-trigger, .ls-pax-trigger) { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field :is(.ls-dep-trigger, .lsmp-trigger, .ls-pax-trigger) > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field :is(.ls-dep-trigger, .lsmp-trigger, .ls-pax-trigger) :is(i, svg) { flex-shrink: 0; color: #9ca3af; }
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field .ls-placeholder, #hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field .lsmp-val:empty { color: #9ca3af !important; font-weight: 500 !important; }
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field input::placeholder { color: #9ca3af !important; font-weight: 500; }
/* Ô ngày: ẩn HẲN input (opacity — cả value lẫn placeholder; trước chỉ tô trong suốt → placeholder "Chọn ngày về" vẫn in
   chồng lên chữ vẽ), ngày hiển thị ở .hph-date-disp. Bấm vào thẻ = nút phủ .ls-date-overlay mở lịch như cũ. */
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-field input.hph-date-input { opacity: 0 !important; cursor: pointer; }
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .hph-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;
}
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .hph-date-disp.is-ph { color: #9ca3af; font-weight: 500; }
/* Danh sách gợi ý / dropdown bám mép dưới THẺ (wrap static → định vị theo .ls-field), không chồng lên thẻ. */
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-fields > .ls-field :is(.ls-typeahead, .ls-autocomplete-wrap) { position: static !important; }
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-fields > .ls-field :is(.ls-typeahead-dd, .ls-autocomplete-dropdown, .ls-dep-dropdown, .ls-pax-dropdown, .lsmp-sheet) {
  top: calc(100% + 6px) !important; left: 0 !important;
}
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-fields > .ls-field :is(.ls-typeahead-dd, .ls-autocomplete-dropdown) { min-width: max(100%, 380px) !important; }
#hphLs:not(.is-sheet) #ls-panel-tour .ls-fields > .ls-field .ls-autocomplete-dropdown.ls-pop-mode { min-width: 720px !important; }   /* lưới điểm đến HOT 3 cột (gốc 720px) */
/* Nút đảo chiều (vé máy bay, combo): tròn, đè giữa khe 2 thẻ sân bay. */
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .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;
}
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-swap-btn svg { width: 15px; height: 15px; }
#hphLs:not(.is-sheet) #ls-panel-flight .ls-flight-fields > .ls-swap-btn { margin: 0 -22px !important; }
/* Nút tìm: hồng đặc, cao bằng thẻ, có kính lúp (icon <i> sẵn có của các tab; vé máy bay không có → ::before). */
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .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;
}
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-btn-search i { color: #fff !important; font-size: 14px; }
#hphLs:not(.is-sheet) :is(#ls-panel-flight, #ls-panel-tour, #ls-panel-hotel, #ls-panel-ticket, #ls-panel-combo, #ls-panel-activity, #ls-panel-trekking) .ls-btn-search:disabled { opacity: .45 !important; box-shadow: none !important; }
#hphLs:not(.is-sheet) #ls-panel-flight .ls-btn-flight-search::before { content: "\f002"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 14px; }
#hphLs:not(.is-sheet) #ls-panel-combo .ls-combo-search-txt { display: inline !important; }

/* ── Vé máy bay: hàng trên = công tắc Một chiều/Khứ hồi (segmented) + "Chỉ bay thẳng" + chip hành khách/hạng ghế ── */
#hphLs:not(.is-sheet) #ls-panel-flight .ls-flight-top { align-items: center !important; padding: 18px 22px 0 !important; }
#hphLs:not(.is-sheet) #ls-panel-flight .ls-flight-fields { padding-top: 12px !important; }
#hphLs:not(.is-sheet) #ls-panel-flight .ls-flight-fields > .ls-field.ls-flight-date-sep { flex: .8 1 0 !important; }
#hphLs:not(.is-sheet) #ls-panel-flight .ls-flight-trip-pills { display: inline-flex !important; gap: 2px; padding: 3px !important; border-radius: 999px !important; background: #f3f4f6 !important; border: 0 !important; }
#hphLs:not(.is-sheet) #ls-panel-flight .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;
}
#hphLs:not(.is-sheet) #ls-panel-flight .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; }
#hphLs:not(.is-sheet) #ls-panel-flight .ls-flight-options { display: flex; align-items: center; gap: 8px !important; }
#hphLs:not(.is-sheet) #ls-panel-flight .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; }
#hphLs:not(.is-sheet) #ls-panel-flight .ls-direct-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-primary); }
#hphLs:not(.is-sheet) #ls-panel-flight .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;
}
#hphLs:not(.is-sheet) #ls-panel-flight .ls-flight-pill:hover { border-color: #d1d5db !important; }

/* ── Tour trọn gói: ô điểm đến rộng hơn 2 ô chọn ── */
#hphLs:not(.is-sheet) #ls-panel-tour .ls-fields > .ls-field-grow { flex: 1.4 1 0 !important; }

/* ── Khách sạn: pill số đêm tròn nhỏ đè giữa khe Nhận/Trả phòng (như nút đảo chiều) ── */
#hphLs:not(.is-sheet) #ls-panel-hotel .ls-fields > .ls-field-grow { flex: 1.3 1 0 !important; }
#hphLs:not(.is-sheet) #ls-panel-hotel .ls-hotel-nights {
  align-self: center; flex: 0 0 auto !important; height: 26px !important; margin: 0 -18px !important; padding: 0 8px !important; z-index: 3;
  border: 1px solid #ffd3e6 !important; border-radius: 999px !important; background: #fff5fa !important; box-shadow: none !important;
  color: var(--c-primary) !important; font-size: 12px !important; font-weight: 600;
}
#hphLs:not(.is-sheet) #ls-panel-hotel .ls-hotel-nights svg { width: 13px; height: 13px; }

/* ── Combo: lưới 2 hàng gốc (cfrom cswap cto cstart cend csearch / cloc … cci cco csearch) giữ nguyên, chỉ đổi khoảng
   cách + nút đảo chiều đè khe (cột cswap 0px) + nút tìm cao bằng 2 hàng thẻ. ── */
#hphLs:not(.is-sheet) #ls-panel-combo .ls-fields {
  grid-template-columns: minmax(0, 1.2fr) 0 minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto !important;
  gap: 10px 10px !important; align-items: stretch !important;
}
#hphLs:not(.is-sheet) #ls-panel-combo .ls-fields > .ls-field { flex: none !important; }
#hphLs:not(.is-sheet) #ls-panel-combo .ls-combo-area-swap { justify-self: center; margin: 0 !important; }
#hphLs:not(.is-sheet) #ls-panel-combo .ls-combo-area-search { height: auto !important; align-self: stretch; }

/* Khung tìm đang mở: nhấc cả khối hero lên trên các khối bên dưới — không thì nhãn "Giảm %" / nút → của thẻ Deal hot
   (z-index 2, cùng lớp gốc, đứng SAU trong DOM) đè lên danh sách sân bay/điểm đến đang xổ (client "không để các icon đè
   lên ô search"). Vẫn thấp xa header (9990). */
.hph-inner:has(> #hphLs:not([hidden]):not(.is-sheet)) { z-index: 40; }
body.hph-ls-lock { overflow: hidden; }
.hph-svc-item.is-active { color: var(--c-primary); }
/* Ô đang mở khung tìm (desktop): nền tròn nhạt theo màu icon — thay vòng viền hồng cũ (03/10 bỏ mọi viền quanh icon). */
.hph-svc-item.is-active .hph-svc-ico { border-radius: 50%; background: color-mix(in srgb, currentColor 14%, #fff); }
.hph-svc-ico.is-gray   { background: #eef0f4; color: #9ca3af; }   /* ô "Xem thêm" — icon xám như mẫu */
/* 03/10 (client: "bỏ border bên ngoài các icon đi, giữ lại style cũ dạng là mỗi icon 1 màu để nhìn sống động hơn"
   + bộ icon đặc src/public/Icons): icon KHÔNG còn vòng tròn — bỏ nền, viền, bóng, kính mờ; mỗi ô một màu theo
   .is-<tone> khai phía trên (hồng / xanh dương / vàng / đỏ / tím / cam / xanh lá / xám). Cả desktop lẫn mobile.
   Lịch sử: 30/09 nền pastel → vòng kính mờ + tất cả icon hồng; 02/10 thêm viền xanh #2178c4. Khối này thay cho khối
   kính mờ, rule "icon đồng bộ hồng" và 2 rule viền xanh (desktop + mobile).
   [class*="is-"] để cùng specificity (0,2,0) với .is-pink/.is-blue… và thắng nền pastel của chúng nhờ đứng sau. */
.hph-svc-ico, .hph-svc-ico[class*="is-"] {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* overide-v2.css ép icon <i> của #hpSvcMoreBtn (lưới dịch vụ CŨ) sang hồng bằng !important, kể cả :hover →
   cần đủ specificity (1,4,1) + !important để giữ màu XÁM của ô "Xem thêm". Icon nay là SVG (không dính luật đó);
   dòng này chỉ còn cho icon Font Awesome dự phòng khi thiếu file more.svg. */
.hph .hph-svc #hpSvcMoreBtn .hph-svc-ico i.fa-layer-group { color: #9ca3af !important; fill: #9ca3af !important; }
/* 30/09 (client gửi hình "thêm 1 khung border bên ngoài"): DESKTOP gói hàng icon trong 1 thẻ trắng bo góc,
   các ô chia đều bề ngang + vạch ngăn mảnh giữa các ô. :not(.is-mobile) → không đụng lưới 2 hàng của mobile. */
.hph:not(.is-mobile) .hph-svc {
  flex-wrap: nowrap; justify-content: space-between; gap: 0;
  margin-top: 16px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(229, 231, 235, .9);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(31, 42, 68, .08);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.hph:not(.is-mobile) .hph-svc-item { position: relative; flex: 1 1 0; width: auto; min-width: 0; padding: 0 6px; gap: 5px; font-size: 13.5px; }
/* 30/09 (client "thu nhỏ lại chút, to quá nhìn page bị thô" → "nhỏ hơn tí nữa"): ô 68→52→46px, chữ 15→14→13.5px.
   03/10 bỏ vòng tròn nên hình icon to lên cho lấp ô: 26px → SVG 36px (1.4em, bộ 24×24 có lề trong), glyph Font
   Awesome 26px (trước 19px → 27px nằm lọt trong vòng tròn). */
.hph:not(.is-mobile) .hph-svc-ico { width: 46px; height: 46px; font-size: 26px; }
.hph:not(.is-mobile) .hph-svc-item + .hph-svc-item::before {
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 1px; background: #eceef2;
}

/* 03/10 (client "Combo tiết kiệm để lên cùng 1 dòng"): desktop bỏ chỗ ngắt Combo / Tiết kiệm — cả hàng nhãn cùng
   MỘT dòng. Nhãn này dài nhất hàng: 119px ở chữ 13,5px; lòng ô đo được 136px từ 1280 trở lên, 119px ở 1100,
   106px ở 992 ⇒ khoảng 992–1099px hạ chữ cả hàng xuống 12,5px (nhãn còn ~110px, bằng cỡ chữ tablet) cho khỏi
   chạm vạch ngăn. Dưới 992px (tablet) ô chỉ ~80px, không cỡ chữ nào vừa ⇒ GIỮ chỗ ngắt; mobile (.is-mobile)
   không đổi. nowrap để lệch 1px cũng không rớt thành "Combo Tiết / kiệm".
   Đổi cỡ chữ / lề ô / thêm nhãn dài hơn thì đo lại các mốc này. */
@media (min-width: 992px) {
  .hph:not(.is-mobile) .hph-svc-br { display: none; }
  .hph:not(.is-mobile) .hph-svc-lbl { white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1099px) {
  .hph:not(.is-mobile) .hph-svc-item { font-size: 12.5px; }
}

@media (max-width: 1280px) { .hph-slogan { display: none; } }
@media (max-width: 991px)  { .hph-svc { gap: 8px 16px; } }
@media (max-width: 991px)  {
  .hph:not(.is-mobile) .hph-svc { padding: 10px 4px; }
  .hph:not(.is-mobile) .hph-svc-item { font-size: 12.5px; }
  .hph:not(.is-mobile) .hph-svc-ico { width: 42px; height: 42px; font-size: 23px; }
}

/* ───────────────────────── Khung section chung ───────────────────────── */
.hp3-sec { max-width: var(--hp3-w); margin: 0 auto 28px; padding: 0 16px; box-sizing: content-box; }
.hp3-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; min-width: 0; }
.hp3-head-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #fff;
}
.hp3-head-ico.is-ticket { background: none; color: var(--c-primary); font-size: 28px; transform: rotate(-20deg); }
.hp3-head-ico.is-deal   { background: #fbecd2; color: #e07a2a; }
.hp3-deal .hp3-head-more { color: var(--hp3-gold-ink); }
.hp3-deal .hp3-head-more:hover, .hp3-deal .hp3-head-more:focus { color: #6b430b; }
.hp3-head-ico.is-pin    { background: none; color: #3b5b8c; font-size: 30px; }
.hp3-head-title { margin: 0; font-size: 26px; font-weight: 700; color: var(--hp3-ink); line-height: 1.2; white-space: nowrap; }
.hp3-head-sub { font-size: 15px; color: var(--hp3-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hp3-head-more {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--c-primary); font-size: 15px; font-weight: 600; text-decoration: none;
}
.hp3-head-more:hover, .hp3-head-more:focus { color: var(--c-primary-hover); text-decoration: none; }

/* Track kéo ngang dùng chung (scroll-snap, ẩn thanh cuộn) */
[data-hp3-track] {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
[data-hp3-track]::-webkit-scrollbar { display: none; }
[data-hp3-track] > * { scroll-snap-align: start; flex-shrink: 0; }

/* ───────────────────────── Mã ưu đãi tặng bạn (box/home_codes.php, 30/09) ─────────────────────────
   Thẻ mã kiểu phiếu: phần trên (icon + tiêu đề + ⓘ), gạch đứt có 2 khuyết tròn, phần dưới (mã + Copy).
   Khuyết = 2 vòng tròn cùng màu nền trang (#fafafa) đè lên mép thẻ. 3 thẻ/màn desktop, 1,15 thẻ/màn mobile. */
.hp3-head-ico.is-gift { background: #ffe1ee; color: var(--c-primary); }
.hp3-cp { --cp-hole: #fafafa; --cp-line: #e5e7eb; }
.hp3-cp-wrap { position: relative; }
.hp3-cp-track { gap: 16px; padding: 4px 2px 12px; }
.hp3-cp-card {
  --cp-ico-bg: #ffe1ee; --cp-ico: var(--c-primary);
  position: relative; box-sizing: border-box; width: calc((100% - 2 * 16px) / 3); min-width: 260px;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(31, 42, 68, .08);
}
.hp3-cp-card.is-flight   { --cp-ico-bg: #e0f2fe; --cp-ico: #0284c7; }
.hp3-cp-card.is-hotel    { --cp-ico-bg: #dbeafe; --cp-ico: #1d4ed8; }
.hp3-cp-card.is-tour     { --cp-ico-bg: #fef3c7; --cp-ico: #d97706; }
.hp3-cp-card.is-activity { --cp-ico-bg: #fee2e2; --cp-ico: #e0263b; }
.hp3-cp-card.is-combo    { --cp-ico-bg: #f3e8ff; --cp-ico: #9333ea; }
.hp3-cp-card.is-visa     { --cp-ico-bg: #dcfce7; --cp-ico: #16a34a; }
.hp3-cp-top { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 12px; min-width: 0; }
.hp3-cp-ico {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cp-ico-bg); color: var(--cp-ico); font-size: 12px;
}
.hp3-cp-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hp3-cp-title, .hp3-cp-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp3-cp-title { font-size: 15px; font-weight: 700; color: var(--hp3-ink); line-height: 1.35; padding-top: 1px; }
.hp3-cp-sub { font-size: 12.5px; color: var(--hp3-muted); line-height: 1.4; }
.hp3-cp-info {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #6b7280; font-size: 15px; cursor: pointer;
}
.hp3-cp-info:hover, .hp3-cp-info:focus-visible, .hp3-cp-info[aria-expanded="true"] { color: var(--c-primary); background: #fdf2f8; }
.hp3-cp-bot {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding: 12px 14px; border-top: 1px dashed var(--cp-line);
}
/* 2 khuyết tròn ở đầu gạch đứt */
.hp3-cp-bot::before, .hp3-cp-bot::after {
  content: ''; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--cp-hole); box-shadow: inset 0 1px 3px rgba(31, 42, 68, .08);
}
.hp3-cp-bot::before { left: -8px; }
.hp3-cp-bot::after  { right: -8px; }
.hp3-cp-code {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 14px; font-weight: 700; color: #374151; letter-spacing: .03em;
}
.hp3-cp-code span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp3-cp-code .fa-copy { color: #6b7280; font-size: 13px; }
.hp3-cp-copy {
  flex: 0 0 auto; min-width: 64px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #ffe1ee; color: var(--c-primary); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.hp3-cp-copy:hover, .hp3-cp-copy:focus-visible { background: var(--c-primary); color: #fff; }
.hp3-cp-copy.is-done { background: #dcfce7; color: #15803d; }
.hp3-cp-wrap .hp3-nav { top: calc(50% - 4px); }

/* Bảng điều kiện (1 phần tử dùng chung, JS dời ra <body> và đặt vị trí cạnh nút ⓘ) */
.hp3-cp-pop {
  position: absolute; z-index: 9000; box-sizing: border-box; width: 320px; max-width: calc(100vw - 24px);
  padding: 14px 16px 12px; border-radius: 12px; background: #fff; color: var(--hp3-ink, #1f2a44);
  box-shadow: 0 12px 32px rgba(31, 42, 68, .18); border: 1px solid #eef0f4; font-size: 13px; line-height: 1.5;
}
.hp3-cp-pop[hidden] { display: none; }
.hp3-cp-clip { position: fixed; top: 0; left: -9999px; opacity: 0; }
.hp3-cp-pop-title { margin: 0 24px 2px 0; font-size: 14px; font-weight: 700; }
.hp3-cp-pop-code { margin: 0 0 8px; font-size: 12px; color: #6b7280; }
.hp3-cp-pop-code b { color: var(--c-primary); letter-spacing: .03em; }
.hp3-cp-pop ul { margin: 0; padding-left: 18px; }
.hp3-cp-pop li { margin: 2px 0; }
.hp3-cp-pop-terms { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #eef0f4; color: #4b5563; white-space: pre-line; max-height: 160px; overflow: auto; }
.hp3-cp-pop-x {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #6b7280; font-size: 18px; line-height: 1; cursor: pointer;
}
.hp3-cp-pop-x:hover, .hp3-cp-pop-x:focus-visible { background: #f3f4f6; color: var(--hp3-ink, #1f2a44); }

/* ───────────────────────── Voucher ưu đãi ───────────────────────── */
.hp3-vc-box {
  position: relative; overflow: hidden;
  padding: 20px 24px 22px;
  border-radius: 20px;
  background: linear-gradient(90deg, #fdf7fa 0%, #fff 70%, #fdf3f7 100%);   /* nhạt hơn — client "nhiều hồng quá" */
  border: 1px solid #f6e8ee;
}
.hp3-vc-body { position: relative; }
/* 03/10 (client gửi hình hàng thẻ desktop: "tăng chiều ngang, thu hẹp chiều cao lại"): bỏ 104px chừa bên phải cho
   hộp quà trang trí (.hp3-vc-gift, đã gỡ cả markup) → 3 thẻ chia hết bề ngang khung: 339 → 374px/thẻ. */
.hp3-vc-track { gap: 14px; }
/* 30/09 (client gửi hình thẻ vé + "chữ to quá không thấy đủ nội dung"): thẻ vé 2 phần — thân (mức giảm, tên,
   nút "Sử dụng") | gạch đứt có 2 khuyết tròn | cuống icon dịch vụ. Chữ nhỏ lại và được xuống 2 dòng thay vì
   cắt "…" 1 dòng. Màu theo ngành hàng qua --vc-ink / --vc-bg. */
.hp3-vc-card {
  --vc-bg: #fdeef5; --vc-ink: var(--c-primary, #d6248c);
  --vc-stub: 72px;   /* bề rộng cuống = vị trí gạch đứt + 2 khuyết (84 → 72 ngày 03/10: nhường bề ngang cho chữ) */
  position: relative;
  width: calc((100% - 2 * 14px) / 3); min-width: 260px; min-height: 104px; box-sizing: border-box;
  display: flex;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--vc-ink) 14%, #fff);
  background: linear-gradient(105deg, #fff 30%, var(--vc-bg) 100%);
  color: var(--hp3-ink); text-decoration: none;
  /* 2 khuyết tròn trên/dưới đúng chỗ gạch đứt: mỗi lớp mask phủ NỬA thẻ (trên / dưới) nên không chồng nhau —
     chồng thì lớp này lấp lỗ của lớp kia (mask-composite mặc định là cộng). */
  -webkit-mask:
    radial-gradient(circle 9px at calc(100% - var(--vc-stub)) 0,    transparent 97%, #000) top    / 100% 51% no-repeat,
    radial-gradient(circle 9px at calc(100% - var(--vc-stub)) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle 9px at calc(100% - var(--vc-stub)) 0,    transparent 97%, #000) top    / 100% 51% no-repeat,
    radial-gradient(circle 9px at calc(100% - var(--vc-stub)) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
}
/* 03/10 (client "bỏ hiệu ứng mỗi lần hover vào phần mã giảm giá"): rê chuột KHÔNG nhấc thẻ, không đổi viền, nút không
   sậm màu. Dòng này chỉ còn chặn luật a:hover / a:focus chung của site (bundle): đổi màu chữ, gạch chân và
   `border: none` — thiếu dòng border thì viền thẻ biến mất mỗi lần rê chuột. */
.hp3-vc-card:hover, .hp3-vc-card:focus {
  color: var(--hp3-ink); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--vc-ink) 14%, #fff);
}
.hp3-vc-card.is-flight   { --vc-bg: #e8f0ff; --vc-ink: #1d5fe0; }
.hp3-vc-card.is-hotel    { --vc-bg: #fff0ea; --vc-ink: #e0572f; }
.hp3-vc-card.is-tour     { --vc-bg: #e6f7ef; --vc-ink: #1f9d6b; }
.hp3-vc-card.is-activity { --vc-bg: #f2edff; --vc-ink: #7446dd; }
.hp3-vc-card.is-combo    { --vc-bg: #fff3e6; --vc-ink: #e46a0c; }
.hp3-vc-card.is-visa     { --vc-bg: #e2f6f8; --vc-ink: #0e97a8; }
/* Lề trên/dưới 14 → 10px, nút 6 → 5px (03/10 "thu hẹp chiều cao lại"): cùng nội dung thẻ thấp đi ~10px; thân chữ rộng
   thêm ~47px nên tiêu đề thường còn 1 dòng, thẻ thấp thêm một dòng chữ nữa. */
.hp3-vc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px 10px 18px; }
/* Mức giảm + tên: tối đa 2 dòng rồi mới "…" — tên đủ nằm ở title của thẻ. */
.hp3-vc-amt, .hp3-vc-for {
  max-width: 100%; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hp3-vc-amt { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--vc-ink); }   /* 03/10: client "giảm size chữ tiêu đề xuống 1 size" (16 → 15; mobile 15 → 14) */
.hp3-vc-for { font-size: 13px; line-height: 1.4; color: var(--hp3-ink); }
.hp3-vc-min { font-size: 12px; color: var(--hp3-muted); }
/* Nút luôn nằm đáy thân vé (thẻ cùng hàng cao bằng nhau → nút thẳng hàng); dòng chữ ngay trên nút cách ≥ 8px. */
.hp3-vc-btn {
  margin-top: auto; padding: 5px 16px; border-radius: 8px;
  background: var(--vc-ink); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.hp3-vc-main > :nth-last-child(2) { margin-bottom: 5px; }
.hp3-vc-stub {
  flex: 0 0 var(--vc-stub); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border-left: 2px dashed color-mix(in srgb, var(--vc-ink) 25%, #fff);
  margin: 10px 0;   /* gạch đứt không chạm 2 khuyết */
  color: var(--vc-ink); font-size: 34px;
}
.hp3-vc-stub svg { display: block; width: 40px; height: 40px; }

/* ───────────────────────── Deal hot hôm nay ───────────────────────── */
/* Khung neo nút ‹ › của dải Deal hot (.hp3-nav là position:absolute). */
.hp3-deal-wrap { position: relative; }
/* Đệm quanh dải + margin âm bù lại (03/10): dải cuộn ngang (overflow-x:auto) CẮT mọi thứ tràn ra ngoài, kể cả theo
   chiều dọc → trước đây bóng của thẻ bị cắt cụt, thẻ trông phẳng lì trên nền trang. Chừa 8px trên (khoảng thẻ nhấc
   lên khi rê chuột), 24px dưới + 6px hai bên (bóng); margin âm để khối không cao/rộng thêm, chấm phân trang đứng yên.
   scroll-padding để thẻ vẫn bắt (snap) thẳng mép cũ. */
.hp3-deal-track { gap: 18px; padding: 8px 6px 24px; margin: -8px -6px -24px; scroll-padding-inline: 6px; }
/* 30/09 (client "giảm chiều ngang deal hot, hiện 2 deal + 1 nửa deal số 3 → khách biết để scroll"): 2,5 thẻ/khung
   (trước 2 thẻ vừa khít — không có gì gợi ý là còn thẻ để kéo). Chữ/giá thu nhỏ theo thẻ hẹp hơn.
   03/10 (client "thêm border để nhìn rõ từng loại deal, hoặc hiệu ứng để nổi từng deal lên"): VIỀN mảnh + BÓNG rõ
   hơn để từng thẻ tách khỏi nền trang (#fafafa) và tách nhau; rê chuột thì thẻ nhấc lên, viền đổi vàng (màu Deal hot). */
.hp3-dc {
  position: relative; overflow: hidden;
  width: calc((100% - 2 * 18px) / 2.5); min-height: 210px; box-sizing: border-box;
  display: flex; align-items: stretch;
  border: 1px solid #dfe5ee;
  border-radius: var(--hp3-radius);
  background: linear-gradient(90deg, #eef5fa, #f7fafc);
  color: var(--hp3-ink); text-decoration: none;
  box-shadow: 0 8px 22px rgba(31, 42, 68, .12);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp3-dc.is-alt { background: linear-gradient(90deg, #f3f1f6, #faf9fb); }
.hp3-dc:hover, .hp3-dc:focus { color: var(--hp3-ink); text-decoration: none; }
/* Chỉ thiết bị có chuột: trên cảm ứng :hover dính lại sau khi chạm, thẻ sẽ kẹt ở trạng thái nhấc. */
@media (hover: hover) {
  .hp3-dc:hover { transform: translateY(-4px); border-color: var(--hp3-gold); box-shadow: 0 14px 30px rgba(31, 42, 68, .18); }
}
.hp3-dc:focus-visible { border-color: var(--hp3-gold); box-shadow: 0 14px 30px rgba(31, 42, 68, .18); }
@media (prefers-reduced-motion: reduce) { .hp3-dc { transition: none; } }
.hp3-dc-img {
  position: absolute; top: 0; right: 0; bottom: 0; width: 60%; height: 100%;
  object-fit: cover;
  /* ảnh tan dần sang trái để chữ luôn nằm trên nền sáng (bản vẽ) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 60%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 60%);
  transition: transform .4s;
}
.hp3-dc:hover .hp3-dc-img { transform: scale(1.03); }
/* Sản phẩm Deal hot KHÔNG ảnh (trừ tour) → icon loại sản phẩm làm banner (client 30/09; box/home_deals.php
   + include_tab/product_type_icon.php): icon hồng trên vòng tròn hồng nhạt ở nửa phải thẻ, đúng chỗ ảnh. */
.hp3-dc-ico {
  position: absolute; top: 0; right: 0; bottom: 0; width: 42%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-primary); pointer-events: none;
}
.hp3-dc-ico::before {
  content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, #ffdcec 0%, #ffeaf4 58%, rgba(255, 234, 244, 0) 72%);
}
.hp3-dc-ico svg { position: relative; display: block; width: 84px; height: 84px; transition: transform .4s; }
.hp3-dc:hover .hp3-dc-ico svg { transform: scale(1.06); }
.hp3-dc-body {
  position: relative; z-index: 1; width: 60%;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 18px 0 18px 22px;
}
.hp3-dc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hp3-dc-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(90deg, #f6d68f, #f0c267); color: #3b2a10;
  font-size: 13px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .3px;
}
.hp3-dc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; background: #fff;
  color: var(--hp3-gold-ink); font-size: 13px; font-weight: 600;
}
.hp3-dc-pill b { font-variant-numeric: tabular-nums; }
.hp3-dc-title {
  font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--hp3-ink);
  text-shadow: 0 0 10px rgba(255, 255, 255, .9);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding-bottom: 2px; /* không cắt dấu tiếng Việt dòng cuối */
}
.hp3-dc-sub { margin-top: 4px; font-size: 15px; color: #374151; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.hp3-dc-price {
  margin-top: auto; padding: 8px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(31, 42, 68, .08);
  display: flex; flex-direction: column; line-height: 1.2;
}
.hp3-dc-price s { font-size: 14px; color: #6b7280; }
.hp3-dc-price b { font-size: 24px; font-weight: 800; color: var(--hp3-gold-ink); }
/* Deal hot "Chỉ hiện %" (deal_price_mode=pct, 30/09): khối giá ghi "Giảm 6%" thay cho giá. */
.hp3-dc-price.is-pct small { font-size: 13px; font-weight: 600; color: #6b7280; }
.hp3-dc-price.is-pct b { font-size: 30px; line-height: 1.1; }
.hp3-dc-off {
  position: absolute; z-index: 2; top: 14px; right: 16px;
  width: 70px; height: 70px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--hp3-gold-soft); color: #4a3210; font-size: 18px; font-weight: 800; line-height: 1.1; text-align: center;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .75);
}
.hp3-dc-off small { font-size: 12px; font-weight: 500; }
.hp3-dc-go {
  position: absolute; z-index: 2; right: 18px; bottom: 18px;
  width: 50px; height: 50px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hp3-gold); color: #fff; font-size: 18px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .7);
}
.hp3-dots { display: flex; justify-content: center; gap: 10px; margin-top: 14px; min-height: 10px; }
.hp3-dots button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: #d1d5db; cursor: pointer; transition: background .2s, transform .2s;
}
.hp3-dots button.is-active { background: var(--hp3-gold); transform: scale(1.2); }

/* ───────────────────────── Khám phá điểm đến ───────────────────────── */
.hp3-dest-wrap { position: relative; }
.hp3-dest-track { gap: 14px; }
.hp3-dest-card {
  position: relative; overflow: hidden;
  width: calc((100% - 4 * 14px) / 5); aspect-ratio: 16 / 9; min-width: 180px;
  border-radius: 12px; background: #e5e7eb;
}
.hp3-dest-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.hp3-dest-card:hover img { transform: scale(1.05); }
.hp3-dest-card::after {
  content: ''; position: absolute; inset: 45% 0 0;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}
.hp3-dest-name {
  position: absolute; z-index: 1; left: 16px; bottom: 12px;
  color: #fff; font-size: 17px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.hp3-nav {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: var(--hp3-ink); font-size: 16px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(31, 42, 68, .18);
  display: inline-flex; align-items: center; justify-content: center;
}
.hp3-nav-prev { left: -22px; }
.hp3-nav-next { right: -22px; }
.hp3-nav[hidden] { display: none; }

/* ───────────────────────── Mobile / tablet ───────────────────────── */
@media (max-width: 1260px) {
  .hp3-nav-prev { left: 6px; }
  .hp3-nav-next { right: 6px; }
}
@media (max-width: 991px) {
  .hp3-cp-card { width: calc((100% - 16px) / 2); }
  .hp3-vc-card { width: calc((100% - 18px) / 2); }
  .hp3-dc { width: calc((100% - 18px) / 1.5); }   /* tablet: 1 thẻ + nửa thẻ sau (cùng ý "lộ thẻ kế để kéo") */
  .hp3-dest-card { width: calc((100% - 2 * 14px) / 3); }
}
@media (max-width: 767px) {
  /* ── MOBILE theo bản vẽ mobile 2026-09-24: voucher 3 thẻ/màn, deal 2 thẻ/màn, điểm đến 5 thẻ/màn ── */
  .hp3-sec { margin-bottom: 18px; padding: 0 12px; }
  .hp3-head { gap: 8px; margin-bottom: 10px; }
  .hp3-head-ico { width: 32px; height: 32px; font-size: 14px; }
  .hp3-head-ico.is-ticket { background: #ffe1ee; font-size: 15px; transform: none; }
  .hp3-head-ico.is-pin    { background: #3b5b8c; color: #fff; font-size: 15px; }
  .hp3-head-title { font-size: 18px; }
  .hp3-head-sub { display: none; }
  .hp3-head-more { font-size: 13px; gap: 6px; }

  /* Voucher: bỏ khung hồng, thẻ nhỏ 3/màn, nhãn xuống dòng riêng.
     border:0 (03/10, client "có 1 border hồng bên ngoài section voucher ưu đãi, bỏ đi"): trước chỉ bỏ nền + bo góc
     + padding của khung nên viền 1px #f6e8ee của .hp3-vc-box vẫn còn, thành khung chữ nhật mảnh bao sát cả khối. */
  .hp3-vc-box { padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
  .hp3-vc-track { gap: 10px; }
  /* 03/10 (client "bên voucher ưu đãi làm giống như dưới deal hot, là trải voucher dàn chiều ngang ra luôn, còn
     chiều cao giảm xuống tầm 2px"): MỖI MÀN 1 THẺ rộng hết khung như băng rôn Deal hot (trước: thẻ 78% + mép thẻ
     sau); xem thẻ kế bằng kéo ngang / chấm phân trang (box/home_vouchers.php in chấm cho mobile). Khe 10px như
     Deal hot để pages() của JS ra số chấm = số thẻ. Chiều cao −2px: lề trên/dưới của thân 11 → 10px. */
  .hp3-vc-card { --vc-stub: 64px; width: 100%; min-width: 0; min-height: 106px; border-radius: 12px; }
  .hp3-vc-main { padding: 10px 10px 10px 14px; gap: 2px; }
  .hp3-vc-amt { font-size: 14px; }
  .hp3-vc-for { font-size: 12.5px; }
  .hp3-vc-min { font-size: 11px; }
  .hp3-vc-btn { padding: 5px 14px; font-size: 12.5px; }
  .hp3-vc-stub { font-size: 26px; }
  .hp3-vc-stub svg { width: 34px; height: 34px; }

  /* Deal hot: MỖI MÀN 1 BĂNG RÔN (client 03/10 "deal hot ở mobile chỉ để thành 1 banner ở ngoài thôi, không tách
     riêng item" + hình mẫu 1 băng rôn/khung có chấm phân trang). Thẻ rộng hết khung, bố cục như desktop: chữ bên
     trái, ảnh tan dần bên phải; xem deal kế bằng kéo ngang / chấm / tự chuyển 6s (home-v3.js). Trước đó là 2 thẻ
     nhỏ/màn, ảnh phủ cả thẻ. Khe 10px giữa các băng rôn: pages() của JS làm tròn nên số chấm vẫn = số thẻ.
     min-height (không phải height) → tiêu đề + dòng phụ dài thì thẻ tự cao lên, không cắt chữ. */
  .hp3-deal-track { gap: 10px; }
  .hp3-dc { width: 100%; min-height: 150px; border-radius: 14px; }
  .hp3-dc-img { width: 62%; }
  .hp3-dc-body { width: 66%; padding: 12px 0 12px 14px; }
  .hp3-dc-ico::before { width: 120px; height: 120px; }
  .hp3-dc-ico svg { width: 66px; height: 66px; }
  .hp3-dc-pills { gap: 6px; margin-bottom: 8px; }
  .hp3-dc-label, .hp3-dc-pill { padding: 4px 9px; font-size: 10.5px; gap: 4px; }
  .hp3-dc-title { font-size: 16px; }
  .hp3-dc-sub { font-size: 12px; margin-top: 3px; }
  /* Ô giá bám đáy thẻ (margin-top:auto) nên tiêu đề 2 dòng sẽ dính sát ô giá → giữ khe tối thiểu 8px. */
  .hp3-dc-title:has(+ .hp3-dc-price), .hp3-dc-sub:has(+ .hp3-dc-price) { margin-bottom: 8px; }
  .hp3-dc-price { padding: 6px 11px; border-radius: 10px; }
  .hp3-dc-price s { font-size: 11px; }
  .hp3-dc-price b { font-size: 18px; }
  .hp3-dc-price.is-pct small { font-size: 11px; }
  .hp3-dc-price.is-pct b { font-size: 22px; }
  .hp3-dc-off { width: 52px; height: 52px; top: 10px; right: 10px; font-size: 14px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .75); }
  .hp3-dc-off small { font-size: 9px; }
  .hp3-dc-go { width: 36px; height: 36px; right: 12px; bottom: 12px; font-size: 14px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
  .hp3-dots { margin-top: 10px; gap: 8px; }
  .hp3-dots button { width: 8px; height: 8px; }

  /* Mã ưu đãi: 1 thẻ + mép thẻ sau lộ ra để biết kéo được */
  .hp3-cp-track { gap: 10px; }
  .hp3-cp-card { width: 86%; min-width: 0; }
  .hp3-cp-top { padding: 12px 12px 10px; gap: 8px; }
  .hp3-cp-title { font-size: 14px; }
  .hp3-cp-sub { font-size: 12px; }
  .hp3-cp-bot { padding: 10px 12px; }
  .hp3-cp-code { font-size: 13px; }
  .hp3-cp-copy { height: 30px; min-width: 58px; padding: 0 12px; font-size: 12.5px; }

  /* Khám phá điểm đến: 5 thẻ/màn, thẻ đứng */
  .hp3-dest-track { gap: 6px; }
  .hp3-dest-card { width: calc((100% - 4 * 6px) / 5); min-width: 0; aspect-ratio: 4 / 5; border-radius: 8px; }
  .hp3-dest-name { left: 6px; right: 4px; bottom: 6px; font-size: 11px; line-height: 1.2; }
  .hp3-nav { display: none; }
}

/* ───────────────────────── HERO mobile (.hph.is-mobile) ───────────────────────── */
.hph.is-mobile { padding: 10px 12px 16px; margin: 0 12px 14px; background: var(--hph-page-bg); border-bottom: 1px solid #eceef2; }
.hph.is-mobile .hph-bg, .hph.is-mobile::after, .hph.is-mobile .hph-slogan { display: none; }
.hph.is-mobile .hph-search { max-width: none; }
.hph.is-mobile .hp-mob-search-trigger { cursor: pointer; }
.hph.is-mobile .hph-gs .global-search-bar { height: 54px; padding: 0 5px 0 16px; }
.hph.is-mobile .hph-gs-ico { margin-right: 10px; }
.hph.is-mobile .hph-gs-ph { font-size: 15px; font-weight: 400; color: #6b7280; line-height: 1.25; }  /* xám như placeholder */
.hph.is-mobile .hph-gs-hint { font-size: 11px; margin-top: 1px; color: #9ca3af; }
.hph.is-mobile .hph-gs .global-search-bar .gs-btn-search {
  display: inline-flex; align-items: center; height: 34px; padding: 0 13px; font-size: 13px;
  box-shadow: 0 3px 8px rgba(237, 0, 127, .25);
}
/* Trang chủ mobile đã có ô tìm kiếm to trong hero → ẩn kính lúp trên header (file này CHỈ nạp ở
   trang chủ nên trang con vẫn giữ kính lúp). Sheet #gsMobPanel vẫn mở qua .hp-mob-search-trigger. */
.mainHead-mob-search .gs-mob-trigger { display: none; }
.hph.is-mobile .hph-svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 4px; margin-top: 14px; }
.hph.is-mobile .hph-svc-item { width: auto; gap: 6px; font-size: 13px; }
.hph.is-mobile .hph-svc-ico { width: 56px; height: 56px; font-size: 24px; box-shadow: none; }
/* MOBILE: 2 hàng icon (client 30/09, mẫu Traveloka) — 4 ô ĐẦU to + chữ đậm, các ô SAU nhỏ hơn; hai hàng chỉ khác cỡ.
   03/10 (client "bỏ border bên ngoài các icon, mỗi icon 1 màu"): không còn vòng tròn nền trắng + viền xanh của 02/10
   (xem khối "icon KHÔNG còn vòng tròn" ở phần desktop — áp cho cả mobile). Hình icon to lên cho lấp ô: hàng trên
   31px → SVG 43px trong ô 50px (trước 26px trong vòng 60px), hàng dưới 24px → SVG 34px trong ô 40px (trước 18px/44px).
   Chọn ô theo thứ tự trong DOM: Khách sạn ẩn thì hàng trên = Tour · Vé máy bay · Combo · Vé tàu; bật lại Khách sạn
   thì nó chen vào hàng trên, Vé tàu xuống hàng dưới (5 ô → xuống dòng).
   [class*="is-"] + :nth-child để thắng .hph.is-mobile .hph-svc-ico (0,3,0). */
.hph.is-mobile .hph-svc { gap: 14px 4px; }
/* 03/10 (client "giảm size chữ ở 4 icon hàng trên để chữ nằm trên 1 dòng" — "Tour trọn gói" cỡ 13,5px rộng ~88px
   trong ô 82,5px ở máy 390 nên rớt dòng): cỡ chữ co theo bề ngang ô để nhãn dài nhất luôn vừa MỘT dòng.
   Ô = (100vw − 48px lề thẻ − 12px khe) / 4; "Tour trọn gói" chữ đậm 600 rộng ≈ 6,45 × cỡ chữ
   → cỡ = (100vw − 64px) / 27 (chia 27 chứ không 26 để dư ~4px mỗi ô, phòng máy làm tròn cỡ chữ lên số nguyên):
   12px ở máy 390 · 11,5px ở 375 · 11px ở 360; trần 13px (máy ≥ 415), sàn 10px (máy 320).
   Đổi lề/khe của thẻ, hoặc thêm nhãn dài hơn vào hàng trên, thì tính lại. nowrap để lệch 1px cũng không rớt dòng. */
.hph.is-mobile .hph-svc-item:nth-child(-n+4) { gap: 6px; font-size: clamp(10px, calc((100vw - 64px) / 27), 13px); font-weight: 600; }
.hph.is-mobile .hph-svc-item:nth-child(-n+4) .hph-svc-lbl { white-space: nowrap; }
.hph.is-mobile .hph-svc-item:nth-child(-n+4) .hph-svc-ico[class*="is-"] { width: 50px; height: 50px; font-size: 31px; }
.hph.is-mobile .hph-svc-item:nth-child(n+5) { gap: 5px; font-size: 12px; color: #374151; }
.hph.is-mobile .hph-svc-item:nth-child(n+5) .hph-svc-ico[class*="is-"] { width: 40px; height: 40px; font-size: 24px; }
/* Hàng dưới 5 ô (Khách sạn bật → Vé tàu xuống hàng dưới; class is-rest-<n> do home_hero.php đếm): lưới 20 cột —
   hàng trên mỗi ô 5 cột (= 4 ô), hàng dưới mỗi ô 4 cột (= 5 ô), không để ô thứ 5 rớt dòng. */
.hph.is-mobile .hph-svc.is-rest-5 { grid-template-columns: repeat(20, minmax(0, 1fr)); }
.hph.is-mobile .hph-svc.is-rest-5 > .hph-svc-item:nth-child(-n+4) { grid-column: span 5; }
.hph.is-mobile .hph-svc.is-rest-5 > .hph-svc-item:nth-child(n+5) { grid-column: span 4; font-size: 11.5px; }

/* ── MOBILE: thứ tự + vị trí khối hero (client 03/10) ──
   1) "đẩy thanh search xuống dưới 8 icon": lưới icon đứng TRÊN, ô tìm kiếm ngay DƯỚI. Đổi bằng order (markup
      home_hero.php dùng chung với desktop, ở đó ô tìm vẫn đứng trên). Đặt cuối file để thắng margin-top:14px của
      .hph.is-mobile .hph-svc khai phía trên (cùng specificity).
   2) "để icon và ô search bên trong khung như hình": khối hero là KHUNG THẺ trắng bo đủ 4 góc + đổ bóng, cách mép
      màn hình 12px. Lề trong 12px + lề ngoài 12px = 24px như trước → icon/ô tìm giữ nguyên vị trí ngang. Ô tìm
      nằm trên nền trắng nên đổi sang viền xám + bóng nhẹ cho khỏi chìm.
   3) "bỏ banner phía sau trên UI mobile đi, đẩy icon và thanh search lên trên" (cuối ngày 03/10): KHÔNG còn banner
      phía trên hero → thẻ nằm ngay dưới header. Trước đó trong ngày thẻ từng đè lên đáy 1 banner
      (.has-banner, margin-top âm 24px → 35vw → 21vw); đã gỡ cùng banner ở trangchu.php.
      Khe giữa header và thẻ: 12px → 20px (client gửi hình khoanh khe này: "tăng khoảng cách ở đây thêm chút nữa"). */
.hph.is-mobile .hph-inner { display: flex; flex-direction: column; }
.hph.is-mobile .hph-svc { order: 1; margin-top: 0; }
.hph.is-mobile .hph-top { order: 2; margin-top: 16px; }
.hph.is-mobile {
  margin: 20px 12px 16px;
  padding: 18px 12px 14px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(31, 42, 68, .14);
}
.hph.is-mobile .hph-gs .global-search-bar { border-color: #e5e7eb; box-shadow: 0 2px 10px rgba(31, 42, 68, .06); }