/* Fix: template #vnt-container có overflow:hidden phá position:sticky của filter sidebar.
   overflow-x: clip clip phần tràn ngang NHƯNG không tạo scroll-container → sticky vẫn chạy
   (khác overflow:hidden). overflow-y: visible cho sticky bám viewport. */
#vnt-container, #vnt-wrapper, #vnt-content {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Ẩn ô search header trên mobile CHỈ khi trang có layout search riêng thay thế
   (tour /du-lich-X có gt-search-bar, visa có hero) - class gs-search-active được
   PHP thêm có điều kiện ở dưới. KHÔNG dùng body:has(.gs-page) vì nó ẩn vô điều kiện
   trên MỌI tab kết quả (kể cả all/hotel/car/... vốn không có ô search thay thế) →
   mobile mất hẳn ô tìm kiếm trong khi desktop vẫn còn. Logo + icon vẫn giữ. */
body.gs-search-active .mainHead-mob-search,
body.gs-search-active #mainHeadMobSearchWrap { display: none !important; }
.gs-page { background: #f7f8fa; padding: 20px 0 60px; min-height: 70vh; }
.gs-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.gs-bc { font-size: 13px; color: #888; margin-bottom: 12px; }
.gs-bc a { color: #888; text-decoration: none; }
.gs-bc a:hover { color: #d6248c; }
.gs-h1 { font-size: 24px; font-weight: 600; color: #000; margin: 0 0 4px; }
.gs-h1 b { color: #d6248c; font-weight: 600; }
.gs-sub { font-size: 14px; color: #666; margin-bottom: 16px; }

/* Tabs */
.gs-tabs { display: flex; gap: 4px; border-bottom: 2px solid #eee; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.gs-tabs::-webkit-scrollbar { display: none; }
.gs-tab { display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; font-size: 14px; font-weight: 600; color: #000; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .15s; white-space: nowrap; cursor: pointer; }
.gs-tab:hover { color: #d6248c; }
.gs-tab.active { color: #d6248c; border-bottom-color: #d6248c; }
.gs-tab-count { background: #f0f0f0; color: #888; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.gs-tab.active .gs-tab-count { background: #fdf0f7; color: #d6248c; }

/* Layout */
.gs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; }
@media (max-width: 768px) { .gs-layout { grid-template-columns: 1fr; } }

/* Sidebar filters */
/* Bộ lọc hiển thị DÀI HẾT (2026-07-10, client): bỏ sticky + max-height + cuộn nội bộ — trước đây
   max-height calc(100vh-140px) làm thanh Giá trượt/nút Áp dụng tụt dưới nếp cuộn trong → "mất". */
.gs-sidebar { background: #fff; border: 1px solid #ececec; border-radius: 10px; padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.04); align-self: start; }
/* Mobile 1 cột: BỎ sticky + scroll riêng của sidebar. Phải đặt SAU rule gốc ở trên và
   dùng selector đặc hiệu hơn (aside.gs-sidebar) để THẮNG cascade - nếu không, rule gốc
   (position:sticky; overflow-y:auto) đứng sau sẽ ghi đè. Có 2 vùng scroll (trang + sidebar)
   chính là thủ phạm: sidebar ghim top, card cuộn luồn ra sau → đè lên banner. */
@media (max-width: 768px) {
  aside.gs-sidebar { position: static !important; top: auto !important; max-height: none !important; overflow: visible !important; margin-bottom: 16px; }
}
.gs-sidebar:hover { scrollbar-color: #d6248c transparent; }
.gs-sidebar::-webkit-scrollbar { width: 6px; }
.gs-sidebar::-webkit-scrollbar-track { background: transparent; }
.gs-sidebar::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
.gs-sidebar:hover::-webkit-scrollbar-thumb { background: #d6248c; }
.gs-sidebar h3 { font-size: 15px; font-weight: 600; color: #000; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #eee; text-transform: uppercase; letter-spacing: 0.3px; }
.gs-filter-block { margin-bottom: 18px; }
.gs-filter-block:last-child { margin-bottom: 0; }
.gs-filter-title { font-size: 15px; font-weight: 600; color: #000; margin-bottom: 8px; }
.gs-price-slider { position: relative; height: 24px; margin: 8px 0 4px; }
.gs-price-track { position: absolute; top: 10px; left: 0; right: 0; height: 4px; background: #e5e5e5; border-radius: 2px; }
.gs-price-fill { position: absolute; top: 0; bottom: 0; background: #d6248c; border-radius: 2px; }
.gs-price-slider input[type=range] { position: absolute; top: 4px; left: 0; width: 100%; height: 16px; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; margin: 0; }
.gs-price-slider input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #d6248c; border: 2px solid #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.gs-price-slider input[type=range]::-moz-range-thumb { pointer-events: auto; height: 16px; width: 16px; border-radius: 50%; background: #d6248c; border: 2px solid #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.gs-price-labels { display: flex; justify-content: space-between; font-size: 15px; color: #000; font-weight: 700; margin-top: 4px; }
.gs-filter-block label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #444; cursor: pointer; padding: 4px 0; }
.gs-filter-block input[type=checkbox] { accent-color: #d6248c; }
.gs-date-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.gs-date-label { font-size: 11px; color: #666; font-weight: 600; }
.gs-date-input { width: 100%; height: 32px; padding: 0 8px; border: 1.5px solid #ddd; border-radius: 6px; font-size: 13px; font-weight: 400; color: #000; font-family: inherit; }
.gs-date-input:focus { outline: none; border-color: #d6248c; }
.gs-date-clear { width: 100%; padding: 6px; background: #fff; border: 1px solid #ddd; border-radius: 6px; font-size: 11px; color: #888; cursor: pointer; font-family: inherit; transition: all .15s; margin-top: 4px; }
.gs-date-clear:hover { border-color: #d6248c; color: #d6248c; }
.gs-select-filter { width: 100%; height: 36px; padding: 0 10px; border: 1.5px solid #ddd; border-radius: 6px; font-size: 13px; font-weight: 600; font-family: inherit; color: #000; background: #fff; cursor: pointer; }
.gs-select-filter:focus { outline: none; border-color: #d6248c; }
.gs-dur-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #444; cursor: pointer; padding: 4px 0; }
.gs-dur-item input[type=radio] { accent-color: #d6248c; }
.gs-fac-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #444; cursor: pointer; padding: 4px 0; }
.gs-fac-item input[type=checkbox] { accent-color: #d6248c; }

/* Result grid */
.gs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1024px) { .gs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .gs-grid { grid-template-columns: 1fr; } }

.gs-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: transform .15s, box-shadow .15s; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.gs-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.gs-card-img { aspect-ratio: 4/3; background: #f0f0f0 center/cover no-repeat; position: relative; }
.gs-card-badge { position: absolute; top: 8px; left: 8px; padding: 4px 10px; background: rgba(255,255,255,.95); color: #d6248c; font-size: 11px; font-weight: 700; border-radius: 4px; backdrop-filter: blur(4px); }
.gs-card-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
/* line-height SỐ NGUYÊN (px) tránh sliver dòng 3: 1.45*14=20.3px lẻ → 2 dòng=40.6 làm tròn hở đỉnh
   dòng 3 (nhất là DPR 125%/150%). 20px nguyên → 2 dòng=40px khít; max-height 44px (4 pad+40) chốt cứng. */
.gs-card-name { font-size: 14px; font-weight: 700; color: #000; line-height: 20px; max-height: 40px; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.gs-card-meta { font-size: 12px; color: #888; margin-bottom: auto; padding-bottom: 8px; }
.gs-card-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #f57c00; font-weight: 700; margin-right: 6px; }
.gs-card-price { display: flex; align-items: baseline; justify-content: space-between; padding-top: 10px; border-top: 1px dashed #eee; margin-top: 8px; }
.gs-card-price-label { font-size: 11px; color: #888; }
.gs-card-price-val { font-size: 16px; font-weight: 800; color: #d6248c; }

.gs-section { margin-bottom: 32px; }
/* Hotel lazy-load loading state */
.gs-hotel-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: #888; font-size: 14px; background: #fafafa; border-radius: 10px; }
.gs-hotel-loading b { color: #d6248c; }
.gs-spinner { width: 28px; height: 28px; border: 3px solid #fce4ef; border-top-color: #d6248c; border-radius: 50%; animation: gs-spin 0.7s linear infinite; }
@keyframes gs-spin { to { transform: rotate(360deg); } }
.gs-hotel-error { padding: 30px 20px; text-align: center; background: #fff5f5; border: 1px solid #fcc; border-radius: 10px; color: #c33; font-size: 14px; }
.gs-hotel-error a { color: #d6248c; font-weight: 700; text-decoration: none; }
/* Hotel API card - mini-meta + tags + giá gốc/giảm + urgency */
.gs-card-stars { color: #f5a623; font-size: 12px; letter-spacing: 1px; }
.gs-card-score { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; background: #fdf0f7; color: #d6248c; border-radius: 4px; font-size: 11.5px; font-weight: 700; margin-left: 6px; }
/* Discount % badge (top-left) thay cho gs-card-badge khi có giảm giá */
.gs-card-disc { position: absolute; top: 10px; left: 0; padding: 4px 12px 4px 10px; background: linear-gradient(90deg, #ef4444 0%, #f97316 100%); color: #fff; font-size: 11.5px; font-weight: 800; border-radius: 0 999px 999px 0; box-shadow: 0 2px 6px rgba(239,68,68,.4); letter-spacing: .3px; z-index: 2; }
/* "Còn N phòng!" urgency badge (top-right) */
.gs-card-remain { position: absolute; top: 10px; right: 10px; padding: 3px 9px; background: rgba(255,255,255,.95); color: #d97706; font-size: 11px; font-weight: 700; border-radius: 4px; backdrop-filter: blur(4px); box-shadow: 0 1px 3px rgba(0,0,0,.1); z-index: 2; }
/* Địa chỉ */
.gs-card-addr { font-size: 12px; color: #666; line-height: 1.4; margin: -2px 0 6px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* Tags row (wifi / bữa sáng / hoàn hủy / ...) */
.gs-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.gs-card-tag { display: inline-flex; align-items: center; padding: 2px 7px; background: #f5f5f5; color: #666; font-size: 11px; font-weight: 600; border-radius: 4px; line-height: 1.4; white-space: nowrap; }
.gs-card-tag.incl { background: #ecfdf5; color: #047857; }
.gs-card-tag.muted { background: #f9fafb; color: #9ca3af; }
/* Giá gốc (struck-through) hiển thị TRƯỚC giá final */
.gs-card-price-orig { display: flex; flex-direction: column; line-height: 1.2; }
.gs-card-price-orig .orig { font-size: 12px; color: #999; text-decoration: line-through; }
/* Date chips (Ngày khởi hành) - chip nhỏ trên card tour */
.gs-card-dates { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.gs-card-dates::before { content: '📅'; font-size: 12px; margin-right: 2px; align-self: center; }
.gs-date-chip { display: inline-flex; align-items: center; padding: 3px 8px; background: #fdf0f7; color: #d6248c; font-size: 11.5px; font-weight: 700; border-radius: 4px; line-height: 1.4; white-space: nowrap; border: 1px solid #f5b3d3; }
.gs-date-chip.soldout { background: #f5f5f5; color: #999; border-color: #e5e5e5; text-decoration: line-through; font-weight: 600; }
.gs-date-chip.more { background: transparent; color: #888; border: 1px dashed #ccc; font-weight: 600; }
/* Pagination unified gs-grid */
.gs-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.gs-pg-btn, .gs-pg-num { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid #e5e5e5; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: #555; text-decoration: none; background: #fff; transition: all .15s; }
.gs-pg-btn:hover, .gs-pg-num:hover { border-color: #d6248c; color: #d6248c; }
.gs-pg-num.current { background: #d6248c; border-color: #d6248c; color: #fff; cursor: default; }
.gs-pg-btn.disabled { color: #bbb; pointer-events: none; opacity: .6; }
.gs-pg-ellipsis { padding: 0 6px; color: #888; }
/* Chỉ ẩn h2.gs-section-title ở main results (Tour/Khách sạn/...) -
   KHÔNG ảnh hưởng span.gs-section-title trong dropdown global-search. */
.gs-main h2.gs-section-title { display: none; }
/* Section header dùng cho Combo/Cẩm nang (h2 hiển thị + link "Xem tất cả") - override display:none ở trên */
.gs-main h2.gs-section-title.gs-section-title-show { display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 800; color: #0d2e4d; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #fce4ef; }
.gs-main h2.gs-section-title.gs-section-title-show small { font-size: 14px; font-weight: 500; color: #888; margin-left: 6px; }
.gs-main h2.gs-section-title.gs-section-title-show a { font-size: 13px; color: #d6248c; font-weight: 700; text-decoration: none; transition: opacity .15s; }
.gs-main h2.gs-section-title.gs-section-title-show a:hover { opacity: .75; }

.gs-empty-inline { display: flex; align-items: center; gap: 8px; background: #fdf6fb; border: 1px solid #f0c8dc; border-radius: 8px; padding: 10px 16px; font-size: 13.5px; color: #881b5e; margin-bottom: 4px; }
.gs-empty-inline svg { color: #d6248c; flex-shrink: 0; }
.gt-rel-no-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 10px; border-radius: 5px; font-weight: 600; }
.gt-rel-past { background: #fff8f0; border: 1px solid #fcd0a0; color: #a05000; }
.gt-rel-past svg { color: #e07800; flex-shrink: 0; }
.gt-rel-consult { background: #f0f4ff; border: 1px solid #bfcfee; color: #2a4a8a; }
.gt-rel-consult svg { color: #3b6ac4; flex-shrink: 0; }

/* Per-page selector - custom dropdown để tránh native popup bị overlap z-index */
.gt-pp-label { font-size: 13px; color: #555; margin-left: 6px; }
.gt-pp-dd { position: relative; }
.gt-pp-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 110px; height: 38px; padding: 0 12px; border: 1.5px solid #e0e0e0; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; color: #222; cursor: pointer; font-family: inherit; transition: border-color .15s; }
.gt-pp-trigger:hover { border-color: #d6248c; }
.gt-pp-dd.open .gt-pp-trigger { border-color: #d6248c; box-shadow: 0 0 0 3px rgba(214,36,140,.1); }
.gt-pp-caret { color: #888; flex-shrink: 0; transition: transform .2s; }
.gt-pp-dd.open .gt-pp-caret { transform: rotate(180deg); color: #d6248c; }
.gt-pp-list { position: absolute; top: calc(100% + 4px); right: 0; min-width: 100%; margin: 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 1000; display: none; }
.gt-pp-dd.open .gt-pp-list { display: block; }
.gt-pp-item { padding: 9px 16px; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; white-space: nowrap; transition: background .1s; }
.gt-pp-item:hover { background: #fdf0f7; color: #d6248c; }
.gt-pp-item.selected { color: #d6248c; font-weight: 700; background: #fdf0f7; }

/* Pagination nav */
.gt-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 28px 0 8px; flex-wrap: wrap; }
.gt-pg-btn, .gt-pg-num { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 38px; height: 38px; padding: 0 12px; border: 1.5px solid #e0e0e0; border-radius: 8px; background: #fff; color: #333; font-size: 13px; font-weight: 600; text-decoration: none; transition: all .15s; font-family: inherit; cursor: pointer; }
.gt-pg-btn:hover:not(.disabled), .gt-pg-num:hover:not(.current) { border-color: #d6248c; color: #d6248c; }
.gt-pg-btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.gt-pg-num.current { background: #d6248c; border-color: #d6248c; color: #fff; cursor: default; }
.gt-pg-ellipsis { padding: 0 6px; color: #888; font-weight: 700; align-self: center; }
@media (max-width: 600px) { .gt-pagination { gap: 4px; } .gt-pg-btn, .gt-pg-num { min-width: 34px; height: 34px; padding: 0 8px; font-size: 12px; } }

/* ═══ Cross-sell ở cuối list trang category (khách sạn, blog, vé máy bay) ═══ */
.gt-cross-block { margin-top: 36px; }
.gt-cross-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #fce4ef; }
.gt-cross-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: #d6248c; margin: 0; }
.gt-cross-title svg { color: #d6248c; flex-shrink: 0; }
.gt-cross-all { display: inline-flex; align-items: center; gap: 4px; color: #d6248c; font-size: 13px; font-weight: 600; text-decoration: none; }
.gt-cross-all:hover { color: #b91c70; }
.gt-cross-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .gt-cross-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gt-cross-grid { grid-template-columns: 1fr; } }
/* Tin tức liên quan: danh sách tiêu đề 3 cột (như thiết kế) */
.gt-relnews { margin-top: 28px; }
.gt-relnews-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px 30px; }
@media (max-width: 900px) { .gt-relnews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gt-relnews-grid { grid-template-columns: 1fr; } }
.gt-relnews-item { position: relative; display: block; padding-left: 16px; font-size: 14px; line-height: 1.55; color: #334155; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.gt-relnews-item::before { content: "\203A"; position: absolute; left: 2px; top: 0; color: #d6248c; font-weight: 700; }
.gt-relnews-item:hover { color: #d6248c; }
.gt-cross-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #ececec; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
.gt-cross-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.08); border-color: #f5b3d3; }
.gt-cross-img { position: relative; width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: #f5f5f5; }
.gt-cross-stars { position: absolute; top: 10px; left: 10px; padding: 3px 8px; background: rgba(255,193,7,.95); color: #fff; font-size: 11px; font-weight: 700; border-radius: 4px; letter-spacing: 1px; }
.gt-cross-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gt-cross-name { font-size: 14px; font-weight: 700; color: #222; margin: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gt-cross-loc { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #666; }
.gt-cross-loc svg { color: #999; flex-shrink: 0; }
.gt-cross-price { margin-top: auto; font-size: 12px; color: #888; }
.gt-cross-price b { color: #d6248c; font-size: 15px; font-weight: 800; margin-right: 2px; }
.gt-cross-price-cta { color: #d6248c; font-weight: 700; font-size: 13px; }
.gt-cross-card-news .gt-cross-img { aspect-ratio: 16/10; }
.gt-cross-excerpt { margin: 0; font-size: 12.5px; color: #666; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gt-cross-date { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #999; margin-top: 4px; }
.gt-cross-date svg { color: #bbb; }

/* Flight CTA banner */
.gt-flight-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; padding: 22px 26px; background: linear-gradient(135deg, #fdf0f7 0%, #fff5fa 100%); border: 1px solid #f5b3d3; border-radius: 12px; flex-wrap: wrap; }
.gt-flight-cta-text { flex: 1; min-width: 260px; }
.gt-flight-cta-text h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: #d6248c; }
.gt-flight-cta-text p { margin: 0; font-size: 13px; color: #555; line-height: 1.55; }
.gt-flight-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #d6248c; color: #fff; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 700; transition: background .15s, transform .15s; flex-shrink: 0; }
.gt-flight-cta-btn:hover { background: #b91c70; transform: translateY(-1px); color: #fff; }
@media (max-width: 600px) { .gt-flight-cta { padding: 18px; } .gt-flight-cta-btn { width: 100%; justify-content: center; } }

/* Suggest section (có thể bạn quan tâm) */
.gs-suggest { margin-top: 24px; }
.gs-suggest-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: #d6248c; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #fce4ef; }
.gs-suggest-title svg { color: #d6248c; flex-shrink: 0; }
.gs-suggest-title small { font-size: 13px; color: #888; font-weight: 500; margin-left: 2px; }
.gs-suggest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gs-sug-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.gs-sug-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.10); border-color: #f1dfe8; color: inherit; }
.gs-sug-img { position: relative; aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: #f3f3f3; }
.gs-sug-badge { position: absolute; top: 10px; right: 10px; background: #d6248c; color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.gs-sug-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gs-sug-name { font-size: 14px; line-height: 1.35; font-weight: 700; margin: 0; color: #222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.gs-sug-meta { display: flex; gap: 10px; font-size: 12px; color: #666; align-items: center; flex-wrap: wrap; }
.gs-sug-meta svg { color: #888; }
.gs-sug-meta span { display: inline-flex; align-items: center; gap: 4px; }
.gs-sug-price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px dashed #f3f3f3; }
.gs-sug-orig { font-size: 12px; color: #999; text-decoration: line-through; }
.gs-sug-cur { font-size: 16px; font-weight: 800; color: #d6248c; }

/* ═══ Flight tab (tim-kiem?type=flight) ═══ */
.gs-flight { display: flex; flex-direction: column; gap: 28px; }
.gs-flight-hero { position: relative; border-radius: 16px; overflow: hidden; background: #d6248c center/cover no-repeat; min-height: 280px; }
.gs-flight-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,46,77,.78) 0%, rgba(214,36,140,.55) 100%); display: flex; align-items: center; padding: 36px; }
.gs-flight-hero-inner { color: #fff; max-width: 640px; }
.gs-flight-hero-tag { display: inline-block; padding: 5px 12px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); border-radius: 999px; font-size: 12.5px; font-weight: 700; backdrop-filter: blur(6px); margin-bottom: 14px; letter-spacing: .3px; }
.gs-flight-hero-title { display: flex; align-items: center; gap: 16px; font-size: 28px; font-weight: 800; margin: 0 0 12px; line-height: 1.2; flex-wrap: wrap; }
.gs-flight-hero-title svg { flex-shrink: 0; opacity: .9; }
.gs-flight-hero-sub { font-size: 14px; opacity: .92; margin: 0 0 22px; line-height: 1.6; }
.gs-flight-hero-sub b { font-weight: 700; }
.gs-flight-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gs-flight-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .12s, box-shadow .15s, background .15s; }
.gs-flight-btn:hover { transform: translateY(-1px); }
.gs-flight-btn-primary { background: #fff; color: #d6248c; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.gs-flight-btn-primary:hover { background: #fdf0f7; color: #b91c70; }
.gs-flight-btn-ghost { background: rgba(255,255,255,.16); color: #fff; border: 1.5px solid rgba(255,255,255,.45); backdrop-filter: blur(4px); }
.gs-flight-btn-ghost:hover { background: rgba(255,255,255,.28); color: #fff; }

.gs-flight-generic { padding: 36px 24px; text-align: center; background: linear-gradient(135deg, #fdf0f7 0%, #fff5fa 100%); border: 1px solid #f5b3d3; border-radius: 16px; }
.gs-flight-generic-icon { display: inline-flex; width: 72px; height: 72px; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: 0 4px 12px rgba(214,36,140,.15); color: #d6248c; margin-bottom: 14px; }
.gs-flight-generic h2 { font-size: 22px; font-weight: 800; color: #0d2e4d; margin: 0 0 8px; }
.gs-flight-generic p { font-size: 14px; color: #555; margin: 0; line-height: 1.6; }
.gs-flight-generic a { color: #d6248c; font-weight: 700; text-decoration: none; }
.gs-flight-generic a:hover { text-decoration: underline; }

.gs-flight-popular-title { font-size: 16px; font-weight: 800; color: #0d2e4d; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.gs-flight-popular-title::before { content: '✈️'; font-size: 18px; }
.gs-flight-popular-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.gs-flight-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.gs-flight-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.10); border-color: #f5b3d3; color: inherit; }
.gs-flight-card-img { position: relative; aspect-ratio: 4/3; background: #f3f3f3 center/cover no-repeat; }
.gs-flight-card-iata { position: absolute; top: 8px; right: 8px; padding: 3px 9px; background: rgba(13,46,77,.82); color: #fff; font-size: 11px; font-weight: 800; border-radius: 4px; letter-spacing: .5px; backdrop-filter: blur(4px); }
.gs-flight-card-body { padding: 10px 12px 12px; }
.gs-flight-card-name { font-size: 14px; font-weight: 700; color: #0d2e4d; margin-bottom: 2px; }
.gs-flight-card-country { font-size: 12px; color: #888; }

@media (max-width: 640px) {
    .gs-flight-hero { min-height: 220px; }
    .gs-flight-hero-overlay { padding: 24px 20px; }
    .gs-flight-hero-title { font-size: 22px; }
    .gs-flight-btn { flex: 1; justify-content: center; }
}

/* ═══ Tour detail-style layout (matches Vietravel reference) ═══ */
.gt-hero { text-align: center; margin: 12px 0 26px; }
.gt-hero h1 { font-size: 28px; font-weight: 700; color: #d6248c; margin: 0 0 14px; letter-spacing: 0.5px; }
.gt-hero p,
.gt-hero-desc { font-size: 14px; color: #444; line-height: 1.7; margin: 0; }
/* Readable measure: body text ~75ch, không kéo dài hết container 1248px */
.gt-hero-desc, .gt-hero-more { max-width: none; margin-left: 0; margin-right: 0; }
/* Khi description giàu HTML (p, ul, h…) - căn đều 2 bên cho text dài, headers/list giữ left */
/* .gt-hero kế thừa text-align:center cho h1/meta; preview ngắn là text trần trong .gt-hero-desc
   nên căn đều ngay trên chính .gt-hero-desc (không chỉ <p> con) - text dài hiển thị 2 bên đều */
.gt-hero-desc,
.gt-hero-desc p { text-align: justify; }
.gt-hero-desc ul,
.gt-hero-desc ol,
.gt-hero-desc h2,
.gt-hero-desc h3,
.gt-hero-desc h4 { text-align: left; }
.gt-hero-desc p { margin: 0 0 10px; font-size: inherit; color: inherit; line-height: inherit; max-width: none; }
.gt-hero-desc p:last-child { margin-bottom: 0; }
.gt-hero-desc ul, .gt-hero-desc ol { margin: 8px 0 12px 22px; padding: 0; }
.gt-hero-desc li { margin-bottom: 4px; }
/* Image wrapper for zoom-on-hover: dùng figure (CMS render <p><img></p>, browser strip
   wrap thành img direct) - apply trên img + parent <p> giả wrapper qua overflow hidden */
.gt-hero-desc img, .gt-hero-more img { max-width: 100% !important; height: auto !important; display: block; margin: 10px auto; border-radius: 6px; transition: transform .4s ease, box-shadow .3s ease; will-change: transform; }
.gt-hero-desc img:hover, .gt-hero-more img:hover { transform: scale(1.04); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.gt-hero-desc h2 { font-size: 18px; color: #222; margin: 16px 0 8px; }
.gt-hero-desc h3 { font-size: 16px; color: #222; margin: 14px 0 6px; }
.gt-hero-desc h4 { font-size: 15px; color: #222; margin: 12px 0 6px; }
.gt-hero a { color: #d6248c; font-weight: 600; text-decoration: none; }
.gt-hero a:hover { text-decoration: underline; }
/* Rating + views meta - render dưới h1, trên description (giống legacy) */
.gt-hero-meta { display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-start; align-items: center; font-size: 13px; color: #555; margin-bottom: 14px; }
.gt-hero-meta b { color: #222; font-weight: 600; margin-right: 4px; }
.gt-hero-rating { display: inline-flex; align-items: center; gap: 6px; }
.gt-hero-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; }
.gt-hero-stars .fa-star, .gt-hero-stars .fa-star-o { margin-right: 1px; }
.gt-hero-views { display: inline-flex; align-items: center; gap: 6px; color: #666; }
.gt-hero-views .fa-eye { color: #999; }
/* Mobile: khối "Đánh giá" hero nằm gọn 1 hàng cho dễ nhìn. Trước đây inline-flex co
   flex-item (flex-shrink:1) trên màn hẹp → chữ trong từng item xuống dòng lộn xộn.
   Ép nowrap + không co + giảm font vừa khít; desktop giữ nguyên. */
@media (max-width: 767px) {
    /* font-size clamp() tự co theo bề ngang màn hình → luôn khít 1 hàng, không tràn
       (floor 9px vẫn đọc được, cap 13px). Sao dùng em để co cùng nhịp với chữ. */
    .gt-hero-rating { flex-wrap: nowrap; gap: 4px; font-size: clamp(9px, 3.1vw, 13px); justify-content: center; max-width: 100%; }
    .gt-hero-rating > *, .gt-hero-rating b, .gt-hero-rating strong { flex-shrink: 0; white-space: nowrap; }
    .gt-hero-stars { font-size: 0.92em; letter-spacing: 0; white-space: nowrap; }
    .gt-hero-stars .fa-star, .gt-hero-stars .fa-star-o { margin-right: 0; }
}
/* Thu gọn khối mô tả còn ~1 đoạn (2026-07-26): bài SEO danh mục dài 3-5 đoạn đẩy danh sách
   tour xuống quá sâu, nhất là trên mobile. Dùng max-height chứ KHÔNG dùng -webkit-line-clamp:
   line-clamp bắt buộc display:-webkit-box, sẽ phá layout <p>/<h2>/<ul>/<img> của rich HTML từ CMS.
   8.5em = 5 dòng x line-height 1.7 (font-size 14px -> 119px), co giãn theo cỡ chữ.
   Cắt thẳng, KHÔNG gradient fade: fade làm mờ mất chính dòng cuối vẫn cần đọc được; tín hiệu
   "còn nữa" đã do nút "Xem thêm" ngay bên dưới đảm nhiệm.
   2026-07-27: 8.5em CHỈ đúng khi mọi dòng cao 1.7 x 14px. Nội dung CMS tự đặt cỡ chữ
   (<span style="font-size:16px"> -> dòng 27.2px), thêm margin <p>, ảnh… nên mốc 119px rơi
   GIỮA dòng và xén ngang thân chữ. tour-hero-readmore.js đo line box thật rồi ghi
   --gt-hero-clamp = đáy dòng cuối còn nằm trọn; 8.5em ở đây là fallback khi chưa có JS. */
.gt-hero-desc.collapsed { max-height: var(--gt-hero-clamp, 8.5em); overflow: hidden; }
/* Read-more toggle - text full-content nằm trong .gt-hero-more (hidden mặc định), JS toggle hidden + aria */
.gt-hero-more { text-align: left; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eee; }
.gt-hero-more h2, .gt-hero-more h3, .gt-hero-more h4, .gt-hero-more ul, .gt-hero-more ol { text-align: left; }
.gt-hero-more p { text-align: justify; margin: 0 0 10px; }
.gt-hero-more h2 { font-size: 18px; color: #222; margin: 16px 0 8px; }
.gt-hero-more h3 { font-size: 16px; color: #222; margin: 14px 0 6px; }
.gt-hero-toggle { display: block; margin-left: auto; margin-right: 0; background: none; border: none; color: #d6248c; font-weight: 600; cursor: pointer; margin-top: 10px; font-size: 13px; padding: 6px 10px; }
/* display:block ở trên thắng [hidden] mặc định của UA → phải khai báo lại khi JS ẩn nút. */
.gt-hero-toggle[hidden] { display: none; }
.gt-hero-toggle:hover { text-decoration: underline; }
.gt-hero-toggle .fa { margin-left: 4px; transition: transform .2s; }
.gt-hero-toggle[aria-expanded="true"] .fa { transform: rotate(180deg); }

.gt-bc { font-size: 13px; color: #666; margin-bottom: 14px; }
.gt-bc a { color: #666; text-decoration: none; }
.gt-bc a:hover { color: #d6248c; }
.gt-bc .cur { color: #d6248c; font-weight: 600; }

/* ═══ Sticky search context bar - hiển thị filter hiện tại + nút "Đổi tìm kiếm" ═══
   Sticky top = 100px (chiều cao #vnt-header-top fixed). z-index < 9990 (header).
   2 states: .gt-sb-summary (default, readonly) + .gt-sb-edit (form, toggle khi click CTA) */
/* Border-radius token: 10px đồng bộ với .gt-card / .btr-summary toàn site.
   Tròn 50% chỉ dùng cho avatar/icon-button (.gt-sb-icon, .gt-sb-pill-icon, .gt-sb-pill-clear). */
/* display:block = REVEAL cho anti-FOUC: search_global.php inline .gt-search-bar{display:none} để ẩn
   khi CSS chưa lên; rule này (từ <link> đứng SAU inline <style> trong source) thắng cascade → hiện lại. */
.gt-search-bar { display: block; position: sticky; top: 100px; z-index: 50; background: #fff; border: 1px solid #ececec; border-radius: 10px; padding: 10px 12px; margin: 0 0 22px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.gt-sb-summary { display: flex; align-items: center; gap: 0; }
/* Grid 5 cột: auto cho trip, 1fr×3 cho 3 pills (chia đều TUYỆT ĐỐI), auto cho submit.
   1fr ép 3 track bằng nhau bất kể content intrinsic width. align-items: center → KHÔNG stretch
   theo cell cao nhất; pill có explicit height riêng để đồng đều cả ngang lẫn dọc. */
.gt-sb-edit    { display: grid; grid-template-columns: max-content 1fr 1fr 1fr max-content; align-items: center; gap: 10px; }

.gt-sb-icon { width: 38px; height: 38px; border-radius: 50%; background: #fdf0f7; color: #d6248c; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 12px; }
.gt-sb-icon svg { width: 18px; height: 18px; }
.gt-sb-item { display: flex; flex-direction: column; padding: 6px 20px; border-right: 1px solid #f0f0f0; min-width: 0; flex: 1 1 0; }
.gt-sb-item:first-of-type { padding-left: 0; }
.gt-sb-item:last-of-type { border-right: none; }
.gt-sb-label { font-size: 12px; color: #888; margin-bottom: 2px; line-height: 1.2; }
.gt-sb-value { font-size: 15px; color: #d6248c; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-sb-cta { background: #d6248c; color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; margin-left: 14px; font-family: inherit; transition: background .15s; }
.gt-sb-cta:hover { background: #b91c70; color: #fff; }
.gt-sb-cta svg { width: 16px; height: 16px; }

/* Edit form - trip type radios + 3 pills + submit */
.gt-sb-trip { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; padding: 0 12px 0 0; border-right: 1px solid #f0f0f0; margin-right: 6px; }
.gt-sb-trip label { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #444; cursor: pointer; white-space: nowrap; }
.gt-sb-trip input[type=radio] { accent-color: #d6248c; cursor: pointer; }

/* Pill = white bg + light border + flat 10px radius. Explicit height 50px cho 3 pills cao
   bằng nhau tuyệt đối (date input có native min-height riêng, không tự về 50px được). */
.gt-sb-pill { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 50px; box-sizing: border-box; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.gt-sb-pill:hover, .gt-sb-pill:focus-within { border-color: #d6248c; box-shadow: 0 0 0 2px rgba(214,36,140,.08); }
.gt-sb-pill-icon { width: 28px; height: 28px; border-radius: 50%; background: #fdf0f7; color: #d6248c; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gt-sb-pill-icon svg { width: 14px; height: 14px; }
.gt-sb-pill-content { display: flex; flex-direction: column; flex: 1; min-width: 0; justify-content: center; }
.gt-sb-pill-label { font-size: 11px; color: #888; line-height: 1.2; margin-bottom: 1px; }
/* Reset native date height (Webkit có min-height ~22px riêng, ép pill cao thêm) */
.gt-sb-pill-input, .gt-sb-pill-select { border: none; background: transparent; padding: 0; height: 20px; min-height: 0; font-size: 14px; color: #d6248c; font-weight: 700; font-family: inherit; width: 100%; outline: none; cursor: pointer; min-width: 0; line-height: 1.2; box-sizing: border-box; }
.gt-sb-pill-input::placeholder { color: #bbb; font-weight: 600; }
.gt-sb-pill-input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; padding: 0; }
.gt-sb-pill-input[type=date]::-webkit-inner-spin-button, .gt-sb-pill-input[type=date]::-webkit-clear-button { display: none; }
.gt-sb-pill-clear { background: #fff; border: 1px solid #e0e0e0; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; color: #999; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; line-height: 1; padding: 0; font-family: inherit; }
.gt-sb-pill-clear:hover { background: #d6248c; color: #fff; border-color: #d6248c; }

/* ── Nút xoá của ô "Điểm đến" — 2026-07-27 ────────────────────────────────────
   Ô này là autocomplete tự vẽ nên có nút xoá RIÊNG (.gt-sb-dest-clear). Hai lần chỉnh:
   1) Dáng: kéo về đúng .gt-sb-pill-clear (24×24, nền trắng, viền 1px, hover hồng) —
      trước là 18×18 nền xám đặc, lại nằm sát chevron ⌄ nên trông như "× ⌄" dính nhau.
   2) Vị trí: nút giờ là con TRỰC TIẾP của #gtSbDestPill (xem markup search_global.php)
      nên chỉ cần là flex-item bình thường — pill có align-items:center → × căn giữa
      theo CHIỀU CAO Ô, thẳng hàng với × của ô "Điểm khởi hành". Trước đây nút nằm
      trong .gt-sb-dest-wrap (position:relative, đặt dưới nhãn) và absolute top:50% của
      wrap → chỉ căn giữa DÒNG INPUT nên bị lệch xuống dưới so với tâm ô.
   JS bật/tắt nút bằng inline display:flex/none nên KHÔNG đặt display ở đây. */
#gtSbDestPill .gt-sb-dest-clear {
    position: static;
    transform: none;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 4px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: #fff;
    color: #999;
    /* Cùng glyph "×" với .gt-sb-pill-clear nên phải cùng font-size/line-height, nếu không
       dấu × ở ô dưới nhỏ hơn ô trên thấy rõ. */
    font-size: 18px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
#gtSbDestPill .gt-sb-dest-clear:hover {
    background: #d6248c;
    color: #fff;
    border-color: #d6248c;
}
/* Chevron ⌄ và nút × KHÔNG đứng chung: đã chọn điểm đến → chỉ hiện × (giống ô "Điểm khởi
   hành"); chưa chọn → chỉ hiện chevron báo đây là danh sách xổ. JS đặt inline display:flex
   cho nút xoá nên bắt bằng [style*="flex"]; nút giờ là anh em của .gt-sb-dest-wrap nên
   :has() phải đặt ở cấp pill. */
#gtSbDestPill:has(.gt-sb-dest-clear[style*="flex"]) .gt-sb-dest-wrap::after {
    display: none;
}
/* Nút × ra khỏi ô input → input không cần chừa 40px bên phải nữa, chỉ chừa chỗ chevron */
#gtSbDestPill .gt-sb-dest-input {
    padding-right: 18px;
}

/* Mobile - grid 1 cột, mọi phần tử span full width */
/* Pill bar - chỉ dùng mobile (≤900px), ẩn trên desktop */
.gt-sb-pillbar { display: none; }

/* Bottom bar + sheets - chỉ mobile, ẩn desktop */
.gt-bottombar, .gt-sort-sheet, .gt-sheet-backdrop { display: none; }

@media (max-width: 900px) {
    /* ── Fixed bottom bar (Sắp xếp | Bộ lọc) ── */
    .gt-bottombar {
        display: flex; align-items: stretch;
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 970;
        height: 52px; padding: 6px 12px; gap: 8px;
        background: #fff; border-top: 1.5px solid #f0f0f0;
        box-shadow: 0 -3px 16px rgba(0,0,0,.10);
    }
    .gt-bb-btn {
        display: flex; align-items: center; justify-content: center; gap: 7px;
        flex: 1; border: 1.5px solid #e5e7eb; border-radius: 10px;
        background: #fafafa; font-size: 13px; font-weight: 700; color: #374151;
        cursor: pointer; font-family: inherit;
    }
    .gt-bb-btn:active { background: #fdf0f7; border-color: #d6248c; color: #d6248c; }
    .gt-bb-btn svg { color: #d6248c; flex-shrink: 0; }
    .gt-bb-divider { display: none; }

    /* Đẩy content không bị bottom bar che */
    .gs-page { padding-bottom: 60px; }

    /* Ẩn sort + per-page inline + view-toggle (mobile dùng lưới; toggle chỉ desktop/tablet) - giữ count */
    .gt-topbar .gt-sort, .gt-topbar .gt-pp-label, .gt-topbar .gt-pp-dd, .gt-topbar .gt-viewmode { display: none !important; }
    .gt-topbar { padding-bottom: 10px; margin-bottom: 12px; }

    /* ── Backdrop ── */
    .gt-sheet-backdrop {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,.4); z-index: 971; opacity: 0;
        visibility: hidden; transition: opacity .25s, visibility .25s;
    }
    .gt-sheet-backdrop.open { opacity: 1; visibility: visible; }

    /* ── Sort sheet (slide up) ── */
    .gt-sort-sheet {
        display: block; position: fixed; bottom: -100%; left: 0; right: 0; z-index: 972;
        background: #fff; border-radius: 20px 20px 0 0; padding-bottom: 24px;
        transition: bottom .3s cubic-bezier(.4,0,.2,1);
        max-height: 80vh; overflow-y: auto;
    }
    .gt-sort-sheet.open { bottom: 0; }
    .gt-sheet-drag { width: 36px; height: 4px; background: #e5e7eb; border-radius: 2px; margin: 10px auto 0; }
    .gt-sheet-title { font-size: 15px; font-weight: 800; color: #111; padding: 14px 20px 10px; border-bottom: 1px solid #f3f4f6; }
    .gt-sort-sheet-list { list-style: none; margin: 0; padding: 0; }
    .gt-sort-sheet-item {
        display: flex; align-items: center; justify-content: space-between;
        padding: 15px 20px; font-size: 14px; font-weight: 500; color: #374151;
        cursor: pointer; border-bottom: 1px solid #f9fafb;
    }
    .gt-sort-sheet-item.is-active { color: #d6248c; font-weight: 700; }
    .gt-sheet-check { display: none; }
    .gt-sort-sheet-item.is-active .gt-sheet-check { display: block; }

    /* ── Filter sidebar → bottom sheet ── */
    .gt-sidebar {
        position: fixed !important; bottom: -100%; left: 0; right: 0; top: auto !important;
        z-index: 972; background: #fff; border-radius: 20px 20px 0 0;
        max-height: 85vh; overflow-y: auto; padding: 0 !important;
        transition: bottom .3s cubic-bezier(.4,0,.2,1);
        box-shadow: 0 -8px 32px rgba(0,0,0,.18);
        align-self: auto !important; margin: 0 !important;
    }
    .gt-sidebar.open { bottom: 0; }
    /* Drag handle + tiêu đề "Bộ lọc" ở đầu filter sheet (affordance kéo đóng) */
    .gt-sidebar::before {
        content: ''; display: block; width: 36px; height: 4px;
        background: #e5e7eb; border-radius: 2px; margin: 10px auto 2px;
        position: sticky; top: 0;
    }
    /* Form filter: chừa padding ngang, đáy để trống cho thanh nút */
    #gtFilterForm { padding: 8px 16px 0 !important; }
    /* Nút "Áp dụng" = thanh footer đặc full-width dính đáy sheet (hết treo lơ lửng) */
    .gt-apply {
        position: sticky; bottom: 0; z-index: 5;
        margin: 14px -16px 0 !important;
        width: calc(100% + 32px) !important;
        border-radius: 0 !important;
        padding: 15px !important; font-size: 15px !important;
        box-shadow: 0 -6px 16px rgba(0,0,0,.08);
        border-top: 1px solid #f3d3e6;
    }
    /* .gs-sidebar (/tim-kiem) hiển thị INLINE trên mobile (không phải drawer trượt) → nút "Áp dụng"
       KHÔNG dùng kiểu footer đặc vuông full-bleed. Reset về nút thường: bo góc, thụt trong padding
       card, bỏ chrome footer (sticky/box-shadow/border-top). */
    .gs-sidebar .gt-apply {
        position: static !important;
        margin: 6px 0 0 !important;
        width: 100% !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        border-top: none !important;
    }
    /* Ngày khởi hành (mobile): chữ dd/mm/yyyy VIẾT THƯỜNG (regular 400, không in đậm) theo yêu cầu. */
    .gs-sidebar .lsfc-tour-date { font-weight: 400; font-size: 14px; }
}

@media (max-width: 900px) {
    /* Mobile: STICKY ghim dưới header (50px) - collapse thành pill, tap để mở form */
    .gt-search-bar {
        padding: 0 !important;
        position: sticky !important;
        top: 50px !important;
        z-index: 60 !important;
        border-radius: 0 !important;
        margin: 0 0 16px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
        box-sizing: border-box;
    }

    /* ── Pill bar (collapsed) ── */
    .gt-sb-pillbar {
        align-items: center;
        gap: 9px;
        padding: 0 14px;
        min-height: 56px;
        cursor: pointer;
        box-sizing: border-box;
    }
    .gt-sb-pillbar-ico { width: 18px; height: 18px; color: #d6248c; flex-shrink: 0; }
    .gt-sb-pillbar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
    .gt-sb-pillbar-main { font-size: 14px; font-weight: 700; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .gt-sb-pillbar-sub { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .gt-sb-pillbar-edit {
        flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
        height: 34px; padding: 0 14px; background: #d6248c; color: #fff;
        font-size: 13px; font-weight: 700; border: none; border-radius: 8px;
        cursor: pointer; font-family: inherit;
    }

    /* Collapsed: hiện pill, ẩn form */
    .gt-search-bar.is-collapsed .gt-sb-pillbar { display: flex; }
    .gt-search-bar.is-collapsed .gt-sb-edit { display: none; }
    /* Expanded: ẩn pill, hiện form (có padding lại) */
    .gt-search-bar:not(.is-collapsed) .gt-sb-pillbar { display: none; }
    .gt-search-bar:not(.is-collapsed) { padding: 12px !important; }

    .gt-sb-summary { flex-wrap: wrap; gap: 10px; }
    .gt-sb-icon { display: none; }
    .gt-sb-item { flex: 1 1 45%; padding: 4px 8px; border-right: none; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px; }
    .gt-sb-cta { width: 100%; justify-content: center; margin-left: 0; }
    .gt-sb-edit { grid-template-columns: 1fr; gap: 8px; }
    .gt-sb-trip { flex-direction: row; gap: 14px; padding: 0; border-right: none; border-bottom: 1px solid #f0f0f0; margin: 0 0 4px; padding-bottom: 8px; width: auto; }
}

/* Sticky context: tránh ancestor overflow phá sticky - clip-x giữ chặn tràn ngang,
   visible-y cho sticky bám viewport (đồng bộ với rule #vnt-container ở trên). */
#vnt-content { overflow-x: clip !important; overflow-y: visible !important; }

.gt-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; margin-top: 18px; align-items: start; }
@media (max-width: 900px) { .gt-layout { grid-template-columns: 1fr; } }
.gt-main { min-width: 0; overflow: hidden; }

/* Sidebar dùng split-sticky: filter form sticky ở top, consultation widget sticky ở bottom.
   Sidebar parent KHÔNG sticky → con tạo sticky riêng trong viewport, không bị che.
   align-self:stretch → sidebar cao bằng cột kết quả để #gtFilterForm sticky "freeze"
   suốt chiều dài scroll (start chỉ cao bằng form → sticky hết tác dụng ngay). */
.gt-sidebar { background: transparent; padding: 0; align-self: stretch; position: relative; }
/* Filter form sticky - pin BÊN DƯỚI .gt-search-bar (đang sticky top:100px, cao ~70px).
   top = header 100px + search bar ~70px + 16px gap = 186px (tránh lọt sau thanh search).
   max-height trừ luôn 186px + 16px đáy để filter dài vẫn scroll trong, không tràn viewport. */
#gtFilterForm { background: #fff; border: 1px solid #ececec; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.04); padding: 18px; position: sticky; top: calc(100px + 70px + 16px); max-height: calc(100vh - 186px - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #e0e0e0 transparent; z-index: 2; }
/* Mobile: tắt hoàn toàn sticky behavior + reset stacking context để consultation card không lọt sau filter */
@media (max-width: 900px) { #gtFilterForm { position: static; max-height: none; overflow: visible; z-index: auto; } }
#gtFilterForm:hover { scrollbar-color: #d6248c transparent; }
#gtFilterForm::-webkit-scrollbar { width: 6px; }
#gtFilterForm::-webkit-scrollbar-track { background: transparent; }
#gtFilterForm::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
#gtFilterForm:hover::-webkit-scrollbar-thumb { background: #d6248c; }
.gt-sb-title { font-size: 14px; font-weight: 700; color: #000; margin: 0 0 10px; }
.gt-sb-block { margin-bottom: 18px; }
/* Thanh trượt Ngân sách (dual-handle) — dùng CHUNG mobile & desktop. Dải 0–200 triệu.
   Pattern 2 <input type=range> chồng nhau: track chỉ nhận sự kiện ở thumb (pointer-events). */
.gt-price-slider { position: relative; height: 30px; margin: 6px 4px 2px; }
.gt-ps-track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: #eee; border-radius: 2px; transform: translateY(-50%); }
.gt-ps-fill { position: absolute; top: 0; bottom: 0; background: #d6248c; border-radius: 2px; }
.gt-price-slider input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 30px; pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent; margin: 0; }
.gt-price-slider input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #d6248c; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.25); border: 2px solid #fff; }
.gt-price-slider input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #d6248c; cursor: grab; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.gt-price-slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.gt-price-slider input[type="range"]::-moz-range-track { background: transparent; border: none; }
.gt-ps-labels { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: #333; margin-top: 4px; }
.gt-ps-labels span { font-weight: 700; color: #d6248c; }

.gt-select { width: 100%; height: 40px; padding: 0 12px; border: 1.5px solid #e0e0e0; border-radius: 6px; font-size: 13px; font-weight: 500; font-family: inherit; color: #000; background: #fff; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.gt-select:focus { outline: none; border-color: #d6248c; }
.gt-date { width: 100%; height: 40px; padding: 0 12px; border: 1.5px solid #e0e0e0; border-radius: 6px; font-size: 13px; font-weight: 500; font-family: inherit; color: #000; background: #fff; box-sizing: border-box; }
.gt-date:focus { outline: none; border-color: #d6248c; }

.gt-tag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gt-tag-btn { padding: 10px 8px; background: #fff; border: 1.5px solid #e0e0e0; border-radius: 6px; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; font-family: inherit; transition: all .15s; text-align: center; }
.gt-tag-btn:hover { border-color: #d6248c; color: #d6248c; }
.gt-tag-btn.active { background: #fdf0f7; border-color: #d6248c; color: #d6248c; font-weight: 700; }

/* Searchable combobox */
.gt-combo { position: relative; }
.gt-combo-trigger { display: flex; align-items: center; height: 40px; padding: 0 10px 0 12px; border: 1.5px solid #e0e0e0; border-radius: 6px; background: #fff; cursor: text; gap: 6px; transition: border-color .15s; }
.gt-combo-trigger:focus-within { border-color: #d6248c; }
.gt-combo-input { flex: 1; border: none; outline: none; background: transparent; font-size: 13px; font-weight: 500; color: #000; font-family: inherit; padding: 0; min-width: 0; }
.gt-combo-input::placeholder { color: #999; font-weight: 400; }
.gt-combo-caret { color: #666; flex: 0 0 auto; transition: transform .18s; }
.gt-combo.open .gt-combo-caret { transform: rotate(180deg); }
.gt-combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 100; margin: 0; padding: 6px 0; list-style: none; display: none; }
.gt-combo.open .gt-combo-list { display: block; }
.gt-combo-item { padding: 9px 14px; font-size: 13px; color: #333; cursor: pointer; transition: background .1s; }
.gt-combo-item:hover { background: #fdf0f7; color: #d6248c; }
.gt-combo-item.selected { color: #d6248c; font-weight: 600; }
.gt-combo-item.hidden { display: none; }
/* Hero "Điểm đến" combobox (thanh tìm kiếm desktop) - dropdown chọn địa điểm */
.gt-sb-pill { position: relative; }
.gt-sbc-list { position:absolute; top:calc(100% + 6px); left:0; min-width:100%; width:max-content; max-width:360px; max-height:300px; overflow-y:auto; background:#fff; border:1px solid #e5e5e5; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.14); z-index:200; margin:0; padding:6px 0; list-style:none; display:none; }
.gt-sbc.open .gt-sbc-list { display:block; }
.gt-sbc-item { padding:10px 16px; font-size:14px; color:#333; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .1s, color .1s; }
.gt-sbc-item:hover { background:#fdf0f7; color:#d6248c; }
.gt-sbc-item.hidden { display:none; }
.gt-sbc-empty { padding:10px 16px; font-size:13px; color:#999; white-space:normal; }
.gt-combo-empty { padding: 14px; text-align: center; color: #999; font-size: 13px; font-style: italic; }

.gt-apply { width: 100%; padding: 11px; background: #d6248c; color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 6px; }
.gt-apply:hover { background: #b91c70; }

.gt-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #eee; margin-bottom: 16px; flex-wrap: wrap; }
.gt-count { font-size: 14px; color: #444; }
.gt-count b { color: #d6248c; font-weight: 700; }
.gt-sort { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #555; }

/* Custom sort dropdown - replace native <select> để control look + animation */
.gt-sort-dd { position: relative; min-width: 220px; }
.gt-sort-trigger {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 9px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px; font-weight: 500; color: #000;
    transition: border-color .15s, box-shadow .15s;
    text-align: left;
}
.gt-sort-trigger:hover { border-color: #d6248c; }
.gt-sort-dd.open .gt-sort-trigger {
    border-color: #d6248c;
    box-shadow: 0 0 0 3px rgba(214,36,140,.12);
}
.gt-sort-trigger-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-sort-trigger-caret { flex-shrink: 0; color: #888; transition: transform .2s; }
.gt-sort-dd.open .gt-sort-trigger-caret { transform: rotate(180deg); color: #d6248c; }

.gt-sort-list {
    position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    padding: 6px;
    margin: 0;
    list-style: none;
    z-index: 100;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .15s, transform .15s;
}
.gt-sort-dd.open .gt-sort-list {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.gt-sort-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    font-size: 14px; color: #333;
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s;
}
.gt-sort-item:hover { background: #fdf0f7; color: #d6248c; }
.gt-sort-item.selected {
    background: #fdf0f7;
    color: #d6248c;
    font-weight: 700;
}
.gt-sort-item-check {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: #d6248c;
    visibility: hidden;
}
.gt-sort-item.selected .gt-sort-item-check { visibility: visible; }

.gt-card { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 22px; background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; overflow: hidden; padding: 0; margin-bottom: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.09); transition: box-shadow .3s ease, border-color .3s ease; }
.gt-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.16); border-color: #f1dfe8; }
/* Danh sách tour chính: lưới 2 cột, card DỌC (ảnh trên - nội dung dưới) giống web cũ.
   Gọn hơn card ngang full-row khi nội dung mỗi tour ít. Scoped .gt-cards để không
   ảnh hưởng "Tour liên quan" / "Có thể bạn quan tâm" (vẫn dùng .gt-card ngang). */
.gt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gt-cards .gt-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; margin-bottom: 0; }
/* Ảnh card lưới thấp hơn (16/10 thay vì 4/3) để cả ảnh + thông tin + giá gọn trong 1
   card, không bị header cố định (100px) + thanh tìm sticky che khi cuộn xem giá. Scope
   .gt-cards — card ngang "Tour liên quan" vẫn giữ ảnh 4/3. */
.gt-cards .gt-card-img { aspect-ratio: 7 / 5; }
/* Thu nhỏ card cho lưới 3 cột: giảm padding + typography để nội dung gọn trong cột hẹp. */
.gt-cards .gt-card-body { padding: 11px 14px 13px; }
/* line-height 1.35 + overflow:hidden của line-clamp cắt dấu (Ố, Ế...) ở đỉnh dòng đầu →
   nới line-height + padding-top để chừa chỗ cho dấu thanh/mũ tiếng Việt (không bị xén).
   DÙNG line-height SỐ NGUYÊN (px): 1.45*15=21.75px lẻ → 2 dòng = 43.5px, trình duyệt làm tròn
   khác nhau (nhất là màn DPR 125%/150%) → HỞ ~0.5px lộ đỉnh dòng 3. 22px nguyên → 2 dòng=44px
   khít; max-height 48px (=4 padding + 44) chốt cứng overflow, không bao giờ ló dòng thứ 3. */
/* max-height 42px (< 2×lh 44): cắt 2px leading trống dưới dòng 2 → chặn ink diacritic đỉnh dòng 3 nhô lên. */
/* min-height = max-height 42px: LUÔN chừa đủ 2 DÒNG cho tiêu đề (giống card trang chủ .hpgt) →
   tour tên ngắn không co còn 1 dòng, meta/giá của mọi card thẳng hàng nhau. */
.gt-cards .gt-card-title { font-size: 15px; line-height: 22px; min-height: 42px; max-height: 42px; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
/* Hover card: tiêu đề chỉ đổi màu hồng, LUÔN giữ tối đa 2 dòng (không bung đầy đủ) */
.gt-cards .gt-card:hover .gt-card-title { color: #d6248c; }
/* Hover tiêu đề tour → hiện FULL tên tour dạng shape hồng nhạt, chữ hồng.
   Shape NẰM SÁT mép trên ảnh thumb (full-width, bo góc dưới; góc trên do .gt-card overflow:hidden
   bo theo), và TRƯỢT TỪ TRÊN HIỆN XUỐNG khi hover (ẩn phía trên, hover kéo xuống). Chữ mỏng hơn 1 mức. */
.gt-cards .gt-card { position: relative; }
.gt-fulltip {
    /* Thụt vào 6px mỗi cạnh: shape thu nhỏ + KHÔNG chạm góc bo của card (hết lỗi vụn ở góc).
       transform ẩn trừ thêm 8px để bù top:6px → khối ẩn HẲN phía trên (card overflow:hidden che). */
    position: absolute; left: 6px; right: 6px; top: 6px;
    background: rgba(253,240,247,.97); color: #d6248c;
    font-size: 11px; font-weight: 600; line-height: 1.6; text-align: center;
    border: 0; padding: 8px 11px; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(214,36,140,.22);
    opacity: 0; visibility: hidden; transform: translateY(calc(-100% - 8px));
    transition: opacity .18s ease, transform .22s ease; z-index: 6; pointer-events: none;
}
.gt-cards .gt-card-title:hover ~ .gt-fulltip { opacity: 1; visibility: visible; transform: translateY(0); }
.gt-cards .gt-meta-grid { column-gap: 10px; row-gap: 6px; font-size: 12px; margin-bottom: 8px; }
.gt-cards .gt-dates-row { font-size: 12px; margin-bottom: 8px; }
.gt-cards .gt-card-foot { padding-top: 9px; flex-wrap: wrap; gap: 8px 10px; }
.gt-cards .gt-price-block .lbl { font-size: 12px; }
.gt-cards .gt-price-block .val { font-size: 18px; }
.gt-cards .gt-detail-btn { padding: 6px 13px; font-size: 12px; font-weight: 500; }
.gt-cards .gt-divider-unavail { grid-column: 1 / -1; }
@media (max-width: 1180px) { .gt-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .gt-cards { grid-template-columns: 1fr; gap: 12px; } }

/* ── View-mode toggle (Lưới / Danh sách) ở topbar + layout danh sách ─────────
   JS: static-assets/js/tour-listing-view.js. count căn trái, sort+toggle gom phải. */
.gt-topbar .gt-count { margin-right: auto; }
.gt-viewmode { display: inline-flex; flex-shrink: 0; border: 1px solid #e3e3e3; border-radius: 8px; overflow: hidden; background: #fff; }
.gt-vm-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; background: transparent; color: #8a8a8a; cursor: pointer; transition: background .15s, color .15s; }
.gt-vm-btn + .gt-vm-btn { border-left: 1px solid #eee; }
.gt-vm-btn:hover { color: #d6248c; background: #fdf0f7; }
.gt-vm-btn.is-active { color: #fff; background: #d6248c; }
.gt-vm-btn svg { width: 18px; height: 18px; }
/* Danh sách: 1 cột, ảnh trái - nội dung phải (tái dùng layout card ngang gốc).
   Specificity .gt-cards.is-list (0,2,0) > media .gt-cards (0,1,0) nên thắng mọi breakpoint desktop/tablet. */
.gt-cards.is-list { grid-template-columns: 1fr; gap: 14px; }
.gt-cards.is-list .gt-card { grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto; }
.gt-cards.is-list .gt-card-img { aspect-ratio: auto; min-height: 190px; }
.gt-cards.is-list .gt-card-body { padding: 16px 20px; }
.gt-cards.is-list .gt-card-title { min-height: 0; max-height: none; font-size: 16px; line-height: 24px; }
.gt-cards.is-list .gt-card-foot { margin-top: auto; }
/* Phone: danh sách xếp DỌC (ảnh trên - nội dung dưới) cho gọn */
@media (max-width: 680px) {
    .gt-cards.is-list .gt-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .gt-cards.is-list .gt-card-img { aspect-ratio: 7 / 5; min-height: 0; }
    .gt-cards.is-list .gt-card-body { padding: 11px 14px 13px; }
}
/* Lưới "Có thể bạn quan tâm" (gợi ý): dùng chung card mới .gt-card, TỐI ĐA 3 card/hàng. */
.gt-cards.gt-cards--sugg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .gt-cards.gt-cards--sugg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .gt-cards.gt-cards--sugg { grid-template-columns: 1fr; gap: 12px; } }
/* Mobile: chỉ giữ các override mà rule gốc nằm TRƯỚC block này (.gt-card, .gs-wrap).
   Toàn bộ override .gt-card-body / .gt-meta-grid / .gt-card-foot ... được đặt ở
   CUỐI <style> (sau rule gốc) để thắng cascade - xem block "MOBILE card override". */
@media (max-width: 780px) {
    .gt-card { grid-template-columns: 1fr; margin-bottom: 12px; border-radius: 8px; }
    .gs-wrap { padding: 0 10px; }
}
/* Image: zoom-in trên hover (travel.com.vn style). Dùng ::before vì .gt-card-img
   set bg-image qua inline style; transform trên pseudo sẽ scale chỉ phần background,
   không di chuyển grid cell. ::before kế thừa background-image: inherit. */
.gt-card-img { position: relative; aspect-ratio: 4/3; background-color: #f0f0f0; overflow: hidden; }
/* GPU compositing (translateZ) + will-change: smoother scale, ít sub-pixel blur.
   image-rendering: high-quality bật bilinear interpolation tốt hơn cho upscale. */
.gt-card-img::before { content: ''; position: absolute; inset: 0; background-image: inherit; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform .5s cubic-bezier(.2,.6,.2,1); transform: translateZ(0); will-change: transform; image-rendering: -webkit-optimize-contrast; image-rendering: high-quality; backface-visibility: hidden; }
.gt-card:hover .gt-card-img::before { transform: scale(1.08) translateZ(0); }
.gt-card-badge { position: absolute; bottom: 14px; left: 14px; padding: 6px 14px 6px 38px; background: #d6248c; color: #fff; font-size: 13px; font-weight: 700; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.gt-card-badge::before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='white'><path d='M21 11c0-5-4-9-9-9S3 6 3 11c0 2 1 3 2 5l7 8 7-8c1-2 2-3 2-5z'/><circle cx='12' cy='10' r='3' fill='%23d6248c'/></svg>") center/contain no-repeat; }
.gt-heart { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #d6248c; border: none; }
.gt-heart:hover { background: #d6248c; color: #fff; }

.gt-card-body { padding: 18px 22px 18px 0; display: flex; flex-direction: column; min-width: 0; }
.gt-card-title { font-size: 18px; font-weight: 600; color: #000; line-height: 1.35; margin: 0 0 14px; word-break: break-word; }
/* cursor:pointer để hover tiêu đề = bàn tay (link tạm gỡ href khi hover để ẩn URL status bar → mất pointer mặc định) */
.gt-card-title a { cursor: pointer; }
/* "Tour hot" (CMS): tiêu đề VÀNG + NHẤP NHÁY (đồng bộ gt_tour_card partial) */
/* "Tour hot" (client 2026-07-11, chỉnh lần 2): chữ ĐEN, chỉ NHẤP NHÁY sang vàng — KHÔNG để vàng cố định.
   Blink = đổi màu đen ⇄ vàng #fef011 (trước: fade opacity trên chữ vàng #e6a700, rồi #fcd015). */
/* KHÔNG dùng !important cho color: khai báo !important THẮNG cả @keyframes → blink sẽ chết.
   Animation đặt trên tiêu đề; <a> bên trong có style="color:inherit" nên nhấp nháy theo.
   Animation cũng thắng rule hover (.gt-card:hover .gt-card-title{color:#d6248c}) → hot vẫn nhấp nháy khi hover. */
.gt-card-title.gt-title-hot { animation: dlvHotBlink 1.1s ease-in-out infinite; }
/* Text nằm trong <a> con → color:inherit KHÔNG repaint theo frame animation của <h3> (blink chết,
   kẹt màu olive giữa chừng). Cho <a> tự chạy animation như <h1> chi tiết → nhấp nháy đồng bộ. */
.gt-card-title.gt-title-hot a { animation: dlvHotBlink 1.1s ease-in-out infinite; }
/* Vàng nhấp nháy tour hot = #fef011 (client chốt 2026-07-11). Dùng ĐỒNG BỘ mọi nơi: card gt,
   landing, flash sale, carousel, kết quả tìm kiếm (file này), h1 trang chi tiết (tour-detail-v2.css). */
@keyframes dlvHotBlink { 0%, 100% { color: #000; } 50% { color: #fef011; } }
@media (prefers-reduced-motion: reduce) { .gt-card-title.gt-title-hot, .gt-card-title.gt-title-hot a { animation: none; color: #000; } }
.gt-meta-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 10px; column-gap: 16px; font-size: 13px; color: #444; margin-bottom: 14px; }
.gt-meta-grid .gt-m { display: flex; align-items: center; gap: 8px; }
.gt-meta-grid .gt-m svg { color: #888; flex: 0 0 auto; }
.gt-meta-grid .gt-m b { color: #d6248c; font-weight: 700; }
.gt-meta-grid .gt-m a { color: #d6248c; text-decoration: none; }

.gt-dates-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: #444; }
/* Bỏ icon lịch đầu hàng ngày khởi hành → hàng ‹ chip › căn SÁT TRÁI. */
.gt-dates-row > svg { display: none; }
.gt-dates-label { display: none; }
.gt-dates-nav { width: 28px; height: 28px; border: 1px solid #e0e0e0; border-radius: 50%; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #888; flex: 0 0 auto; padding: 0; }
.gt-dates-nav:hover { border-color: #d6248c; color: #d6248c; }
.gt-dates-nav:disabled { opacity: .4; cursor: not-allowed; }
.gt-dates-scroll { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 2px 1px; overflow: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; }
.gt-date-chip { display: inline-block; padding: 6px 10px; border: 1.5px solid #d6248c; color: #d6248c; border-radius: 5px; font-size: 13px; font-weight: 700; line-height: 1.2; cursor: pointer; background: #fff; white-space: nowrap; flex: 0 0 auto; text-decoration: none; transition: background .15s, color .15s; scroll-snap-align: start; }
.gt-date-chip:hover, .gt-date-chip:focus { background: #d6248c; color: #fff; text-decoration: none; }
.gt-date-chip.empty { border-style: dashed; color: #bbb; cursor: default; }
.gt-date-chip.empty:hover { background: #fff; color: #bbb; }
.gt-date-chip.soldout { border-color: #ddd; color: #999; background: #f7f7f7; text-decoration: line-through; display: inline-flex; align-items: center; gap: 5px; }
.gt-date-chip.soldout:hover, .gt-date-chip.soldout:focus { background: #fbeaf2; color: #d6248c; border-color: #d6248c; text-decoration: line-through; }
.gt-date-chip-bad { background: #d6248c; color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 700; letter-spacing: .3px; text-decoration: none; line-height: 1.3; }

.gt-card-foot { display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px dashed #eee; padding-top: 14px; margin-top: auto; }
.gt-price-block .lbl { font-size: 13px; color: #666; }
.gt-price-block .val { font-size: 22px; font-weight: 800; color: #d6248c; line-height: 1.2; }
.gt-price-row { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.gt-price-row .orig { font-size: 13px; color: #999; text-decoration: line-through; }
.gt-price-row .disc-pct { background: #d6248c; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
/* Unavailable tour - đẩy xuống cuối list bằng ORDER BY (minprice>0) DESC, hiển thị lý do rõ ràng */
.gt-card.is-unavailable { opacity: .92; }
.gt-card.is-unavailable .gt-card-img { filter: grayscale(0.45); }
.gt-card.is-unavailable .gt-card-badge { background: #6b7280; }
.gt-card.is-unavailable .gt-card-badge::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='white'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12' stroke='%236b7280' stroke-width='2'/><line x1='12' y1='16' x2='12.01' y2='16' stroke='%236b7280' stroke-width='2'/></svg>"); }
.gt-unavail-block { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.gt-unavail-block > svg { flex-shrink: 0; color: #d97706; }
.gt-unavail-title { font-size: 14px; font-weight: 700; color: #b45309; line-height: 1.25; }
.gt-unavail-sub { font-size: 12px; color: #6b7280; margin-top: 2px; line-height: 1.3; }
.gt-detail-btn-alt { background: #fff; color: #d6248c; border: 1.5px solid #d6248c; padding: 9px 22px; }
.gt-detail-btn-alt:hover { background: #d6248c; color: #fff; }
/* Divider giữa tour available (trên) và unavailable (dưới) - chỉ hiện khi cả 2 nhóm đều có */
.gt-divider-unavail { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; padding: 0 4px; }
.gt-divider-unavail .gt-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #d97706 35%, #d97706 65%, transparent); opacity: .35; }
.gt-divider-unavail .gt-divider-label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; color: #b45309; font-size: 13px; font-weight: 600; line-height: 1.3; }
.gt-divider-unavail .gt-divider-label svg { color: #d97706; flex-shrink: 0; }
.gt-divider-unavail .gt-divider-label b { color: #d6248c; font-weight: 800; }
/* Nút toggle "Xem thêm tour tham khảo": nhỏ hơn nhãn cũ + có tương tác click */
.gt-divider-unavail .gt-divider-toggle { padding: 6px 14px; font-size: 12.5px; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; -webkit-appearance: none; appearance: none; }
.gt-divider-unavail .gt-divider-toggle:hover { background: #ffedd5; border-color: #fdba74; }
.gt-divider-unavail .gt-divider-toggle .gt-toggle-chevron { color: #d97706; flex-shrink: 0; transition: transform .2s ease; }
.gt-divider-unavail .gt-divider-toggle[aria-expanded="true"] .gt-toggle-chevron { transform: rotate(180deg); }
/* Mặc định ẨN nhóm tour hết lịch (chỉ khi có nút toggle = trang vẫn còn tour còn lịch);
   nhấn nút mới hiện. Nếu cả trang đều hết lịch thì không thêm .gt-has-unavail-toggle → vẫn hiện. */
.gt-cards.gt-has-unavail-toggle .gt-card.is-unavailable { display: none; }
.gt-cards.gt-has-unavail-toggle.gt-unavail-open .gt-card.is-unavailable { display: grid; }
/* Tour hết lịch: ẩn hàng "Ngày khởi hành" (không còn ngày khả dụng để chọn) */
.gt-card.is-unavailable .gt-dates-row { display: none; }
@media (max-width: 700px) { .gt-divider-unavail { flex-direction: column; gap: 8px; margin: 20px 0 12px; } .gt-divider-unavail .gt-divider-line { width: 100%; min-height: 1px; } .gt-divider-unavail .gt-divider-label { font-size: 12px; padding: 7px 14px; text-align: center; } }

/* Phương tiện icons (multi) */
.gt-trans-label { color: #444; }
.gt-trans-icons { display: inline-flex; gap: 6px; margin-left: 0; }
.gt-trans-ic { width: 28px; height: 28px; border: 1.5px solid #d6248c; color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #d6248c; }
.gt-trans-ic svg { width: 16px; height: 16px; }
/* Icon "Xe" dùng FontAwesome fa-bus (đồng bộ với trang chi tiết tour) */
.gt-trans-ic i.fa { font-size: 15px; line-height: 1; }
/* Icon trong pill phải TRẮNG trên nền hồng — thắng rule .gt-meta-grid .gt-m svg{color:#888} */
.gt-meta-grid .gt-m .gt-trans-ic svg,
.gt-meta-grid .gt-m .gt-trans-ic i.fa { color: #fff; }

/* Capacity (Còn X/Y chỗ) */
.gt-seats { font-size: 13px; color: #444; }
.gt-seats b { color: #d6248c; font-weight: 700; }
.gt-seats-alert { margin-left: 6px; padding: 2px 7px; background: #ff6b00; color: #fff; font-size: 10px; font-weight: 700; border-radius: 3px; letter-spacing: 0.3px; text-transform: uppercase; }
.gt-detail-btn { background: #d6248c; color: #fff; border: none; border-radius: 6px; padding: 11px 28px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; text-decoration: none; display: inline-block; }
.gt-detail-btn:hover { background: #b91c70; color: #fff; }

/* ════════ MOBILE card override (ĐẶT CUỐI <style> - phải đứng SAU mọi rule gốc
   .gt-card-body / .gt-meta-grid ... vì media query không tăng specificity, rule nào
   đứng sau trong source sẽ thắng. Đây là lý do các fix trước không ăn). ════════ */
@media (max-width: 780px) {
    /* Card 1 cột (ảnh trên, nội dung dưới): bỏ row-gap, dùng padding body để cách */
    .gt-card { gap: 0; }
    /* FIX lệch: padding gốc là 18px 22px 18px 0 (trái=0) → cân đều 16px hai bên */
    .gt-card-body { padding: 14px 16px 16px; }
    .gt-card-title { font-size: 16px; line-height: 1.4; margin-bottom: 12px; }
    /* Card LƯỚI (mặc định): meta xếp 2 cột gọn như desktop thay vì dồn dọc 1 cột (giá trị
       ngắn: điểm đến / thời gian / phương tiện). Giá trị dài cắt ellipsis để không wrap xấu.
       Card DANH SÁCH (.is-list) vẫn 1 cột — có nhãn + chữ dài cần full-width (override bên dưới). */
    .gt-meta-grid { grid-template-columns: 1fr 1fr; row-gap: 9px; column-gap: 12px; margin-bottom: 14px; }
    .gt-meta-grid .gt-m { align-items: center; min-width: 0; }
    .gt-meta-grid .gt-m > svg { margin-top: 0; }
    .gt-meta-grid .gt-m b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gt-cards.is-list .gt-meta-grid { grid-template-columns: 1fr; column-gap: 0; }
    .gt-cards.is-list .gt-meta-grid .gt-m { align-items: flex-start; }
    .gt-cards.is-list .gt-meta-grid .gt-m > svg { margin-top: 1px; }
    .gt-cards.is-list .gt-meta-grid .gt-m b { white-space: normal; }
    /* "Phương tiện": nhãn + icon sát nhau */
    .gt-trans-icons { margin-left: 0; }
    .gt-trans-ic { width: 26px; height: 26px; }
    .gt-trans-ic svg { width: 15px; height: 15px; }
    .gt-trans-ic i.fa { font-size: 14px; }
    .gt-date-chip { padding: 5px 8px; font-size: 12px; }
    .gt-price-block .val { font-size: 20px; }
    .gt-card-foot { padding-top: 12px; }
}
@media (max-width: 480px) {
    .gt-card-body { padding: 14px 14px 14px; }
    .gt-card-foot { flex-direction: column; align-items: stretch; gap: 12px; }
    .gt-detail-btn { width: 100%; text-align: center; }
    .gt-card-title { font-size: 15px; }
}

/* Close button for search bar on mobile */
.gt-sb-mobile-header { display: none; }

@media (max-width: 900px) {
    .gt-sb-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 4px 10px;
        border-bottom: 1px solid #f3f4f6;
        margin-bottom: 8px;
    }
    .gt-sb-mobile-header span {
        font-size: 14px;
        font-weight: 700;
        color: #1f2937;
    }
    .gt-sb-close-btn {
        background: none;
        border: none;
        font-size: 24px;
        color: #9ca3af;
        cursor: pointer;
        line-height: 1;
        padding: 0 6px;
        font-family: inherit;
    }
    .gt-sb-close-btn:hover, .gt-sb-close-btn:active {
        color: #d6248c;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   THANH TUYẾN TOUR (2026-07-22) — 1 hàng pill dưới bộ lọc + popup "Xem thêm"
   Markup: user_2019/search_global.php (.gt-routes). JS: js/tour-route-filter.js
   ══════════════════════════════════════════════════════════════════════════ */
.gt-routes {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    min-width: 0;
}
.gt-routes-row {
    display: flex;
    flex-wrap: wrap;          /* JS ẩn pill tràn hàng → chỉ còn đúng 1 hàng */
    gap: 8px;
    overflow: hidden;
    max-height: 38px;         /* chiều cao đúng 1 pill */
    flex: 1 1 auto;
    min-width: 0;
}
.gt-route-pill {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    background: #fff;
    color: #444;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    /* Tuyến 4 điểm ("Bắc Kinh - Thượng Hải - Hàng Châu - Tô Châu") rộng ~400px, cap 320px
       cũ cắt cụt chữ → mọi pill dài bị clamp cùng 320px, chữ cụt bên phải trong khi lề
       trái vẫn 16px → nhìn "shape không đều". Nới cap để tuyến thường hiện đủ; JS
       tour-route-filter.js vẫn giữ 1 hàng, phần dư dồn vào "Xem thêm N tuyến".
       ellipsis giữ làm lưới an toàn cho tên cực dài (6+ điểm). */
    max-width: 480px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.gt-route-pill:hover {
    border-color: #d6248c;
    color: #d6248c;
    background: #fdf0f7;
}
.gt-route-pill.is-active {
    border-color: #d6248c;
    background: #fdf0f7;
    color: #d6248c;
}
.gt-routes-more {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #1a73e8;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.gt-routes-more:hover { text-decoration: underline; }

/* Popup chọn tuyến */
.gt-routes-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; }
.gt-routes-modal[hidden] { display: none; }
.gt-routes-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.gt-routes-modal-box {
    position: relative;
    width: min(680px, calc(100vw - 32px));
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    overflow: hidden;
}
.gt-routes-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid #f0f0f0; }
.gt-routes-modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: #222; }
.gt-routes-modal-head h3 small { font-weight: 500; color: #888; font-size: 14px; }
.gt-routes-modal-close { border: 0; background: transparent; font-size: 26px; line-height: 1; color: #888; cursor: pointer; padding: 0 4px; }
.gt-routes-modal-close:hover { color: #d6248c; }
.gt-routes-modal-search { padding: 12px 18px; border-bottom: 1px solid #f5f5f5; }
.gt-routes-modal-search input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #222;
}
.gt-routes-modal-search input:focus { outline: none; border-color: #d6248c; }
.gt-routes-modal-list { overflow-y: auto; padding: 8px 10px 14px; }
.gt-route-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
}
.gt-route-row:hover { background: #fdf0f7; color: #d6248c; }
.gt-route-row.is-active { background: #fdf0f7; color: #d6248c; font-weight: 700; }
.gt-route-row-name { min-width: 0; }
.gt-route-row-count { flex: 0 0 auto; color: #999; font-size: 12px; }
.gt-route-row.is-active .gt-route-row-count { color: #d6248c; }
.gt-routes-modal-empty { padding: 18px; text-align: center; color: #888; font-size: 14px; }

@media (max-width: 680px) {
    .gt-route-pill { max-width: 200px; }
    .gt-routes-modal-box { width: 100vw; max-width: 100vw; max-height: 88vh; border-radius: 14px 14px 0 0; align-self: flex-end; }
    .gt-routes-modal { align-items: flex-end; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD KIỂU DANH SÁCH: hiện chi tiết có NHÃN (mã CT / điểm khởi hành / thời
   gian / phương tiện). Kiểu LƯỚI giữ nguyên gọn như cũ.
   ══════════════════════════════════════════════════════════════════════════ */
.gt-m-lbl,
.gt-m-code,
.gt-m-dur-long,
.gt-m-trans-txt,
.gt-m-trans-ic { display: none; }

.gt-cards.is-list .gt-m-code { display: flex; }
.gt-cards.is-list .gt-m-lbl { display: inline; color: #666; font-weight: 400; }
.gt-cards.is-list .gt-m-dur-long,
.gt-cards.is-list .gt-m-trans-txt { display: inline; }
.gt-cards.is-list .gt-m-trans-ic { display: inline-block; }
.gt-cards.is-list .gt-m-dur-short,
.gt-cards.is-list .gt-trans-icons { display: none; }
.gt-cards.is-list .gt-meta-grid { row-gap: 8px; }
.gt-cards.is-list .gt-meta-grid .gt-m { gap: 6px; }