/* ============================================================================
   Card tour "gt" — phần style TÁCH RA FILE (box/gt_tour_card.php còn 1 khối <style>
   inline cũ; style MỚI của card viết ở đây, dần dần chuyển nốt phần cũ sang).
   Scope: .hpgt (container .slideFluid.hpgt) — không đụng .mda-* / bundle cũ.
   ============================================================================ */

/* ===== Thanh "chỗ còn lại" trên card TOUR GIỜ CHÓT (2026-07-27) =====
   Thay dòng chữ đỏ "Còn N chỗ" bằng thanh tiến độ: phần fill = tỉ lệ chỗ TRỐNG / tổng chỗ
   của lịch khởi hành → khách thấy ngay tour sắp đầy.
   Chữ có HAI lớp chồng khít nhau: lớp dưới màu đậm (đọc trên nền track nhạt), lớp trên màu
   trắng bị clip đúng bằng bề rộng fill → chữ luôn tương phản dù fill dài hay ngắn.
   Tỉ lệ truyền bằng class .gt-sb-<5..100> (bước 5%) chứ KHÔNG dùng style inline hay JS:
   render thẳng từ server nên đúng cả trong clone của owl carousel lẫn khi tắt JS. */
.hpgt .gt-seats-left {
    display: block;      /* .gt-m là flex; ở ô này cần block để thanh chiếm trọn bề ngang ô */
    min-width: 0;
}
.hpgt .gt-seatbar {
    position: relative;
    display: block;
    width: 100%;
    /* 22px chứ không 20: track overflow:hidden sẽ CẮT phần dấu nhô cao của "chỗ"/"Hết" (ỗ, ế)
       nếu pill sát chiều cao chữ. 22px chừa đủ khoảng cho dấu mũ + ngã chồng nhau. */
    height: 22px;
    border-radius: 999px;
    background: #ffe1ee;                      /* track: hồng nhạt cùng tông thương hiệu */
    box-shadow: inset 0 0 0 1px rgba(214, 36, 140, .12);
    overflow: hidden;
}
.hpgt .gt-seatbar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;                                  /* bề rộng thật do class .gt-sb-* đặt */
    /* KHÔNG inherit bo tròn 999px: khi fill ngắn (còn ít chỗ) nó biến thành hình TRÒN trông như
       chấm bi. Để vuông, mép trái đã được track (overflow:hidden) bo giúp. */
    border-radius: 0;
    background: linear-gradient(90deg, #ff7a18, #f0264f); /* cùng gradient badge đếm ngược */
}
.hpgt .gt-seatbar-txt {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;                          /* < 1.2 là dấu tiếng Việt bắt đầu chạm mép */
    white-space: nowrap;
    color: #b0145a;                            /* lớp dưới: đọc trên track nhạt */
}
/* Icon ngọn lửa: dùng Font Awesome như icon xe buýt sẵn có trong card (cùng bộ icon của site) */
.hpgt .gt-seatbar-txt .fa {
    font-size: 10px;
    line-height: 1;
    flex: 0 0 auto;
    /* Đặt sẵn bề rộng: font FA nạp từ CDN sau CSS, không có width thì chữ bị xê dịch lúc icon hiện */
    width: 11px;
    text-align: center;
}
/* Lớp trên: chữ trắng, chỉ hiện đúng phần nằm trên fill (clip theo class .gt-sb-*) */
.hpgt .gt-seatbar-txt-on {
    color: #fff;
    clip-path: inset(0 100% 0 0);
}
/* Trình duyệt không hỗ trợ clip-path → ẩn hẳn lớp trắng, giữ lớp chữ đậm (vẫn đọc được) */
@supports not (clip-path: inset(0 50% 0 0)) {
    .hpgt .gt-seatbar-txt-on { display: none; }
}

/* Bước 5%: mỗi mức đặt bề rộng fill + phần clip tương ứng của lớp chữ trắng */
.hpgt .gt-sb-5   .gt-seatbar-fill { width: 5%; }   .hpgt .gt-sb-5   .gt-seatbar-txt-on { clip-path: inset(0 95% 0 0); }
.hpgt .gt-sb-10  .gt-seatbar-fill { width: 10%; }  .hpgt .gt-sb-10  .gt-seatbar-txt-on { clip-path: inset(0 90% 0 0); }
.hpgt .gt-sb-15  .gt-seatbar-fill { width: 15%; }  .hpgt .gt-sb-15  .gt-seatbar-txt-on { clip-path: inset(0 85% 0 0); }
.hpgt .gt-sb-20  .gt-seatbar-fill { width: 20%; }  .hpgt .gt-sb-20  .gt-seatbar-txt-on { clip-path: inset(0 80% 0 0); }
.hpgt .gt-sb-25  .gt-seatbar-fill { width: 25%; }  .hpgt .gt-sb-25  .gt-seatbar-txt-on { clip-path: inset(0 75% 0 0); }
.hpgt .gt-sb-30  .gt-seatbar-fill { width: 30%; }  .hpgt .gt-sb-30  .gt-seatbar-txt-on { clip-path: inset(0 70% 0 0); }
.hpgt .gt-sb-35  .gt-seatbar-fill { width: 35%; }  .hpgt .gt-sb-35  .gt-seatbar-txt-on { clip-path: inset(0 65% 0 0); }
.hpgt .gt-sb-40  .gt-seatbar-fill { width: 40%; }  .hpgt .gt-sb-40  .gt-seatbar-txt-on { clip-path: inset(0 60% 0 0); }
.hpgt .gt-sb-45  .gt-seatbar-fill { width: 45%; }  .hpgt .gt-sb-45  .gt-seatbar-txt-on { clip-path: inset(0 55% 0 0); }
.hpgt .gt-sb-50  .gt-seatbar-fill { width: 50%; }  .hpgt .gt-sb-50  .gt-seatbar-txt-on { clip-path: inset(0 50% 0 0); }
.hpgt .gt-sb-55  .gt-seatbar-fill { width: 55%; }  .hpgt .gt-sb-55  .gt-seatbar-txt-on { clip-path: inset(0 45% 0 0); }
.hpgt .gt-sb-60  .gt-seatbar-fill { width: 60%; }  .hpgt .gt-sb-60  .gt-seatbar-txt-on { clip-path: inset(0 40% 0 0); }
.hpgt .gt-sb-65  .gt-seatbar-fill { width: 65%; }  .hpgt .gt-sb-65  .gt-seatbar-txt-on { clip-path: inset(0 35% 0 0); }
.hpgt .gt-sb-70  .gt-seatbar-fill { width: 70%; }  .hpgt .gt-sb-70  .gt-seatbar-txt-on { clip-path: inset(0 30% 0 0); }
.hpgt .gt-sb-75  .gt-seatbar-fill { width: 75%; }  .hpgt .gt-sb-75  .gt-seatbar-txt-on { clip-path: inset(0 25% 0 0); }
.hpgt .gt-sb-80  .gt-seatbar-fill { width: 80%; }  .hpgt .gt-sb-80  .gt-seatbar-txt-on { clip-path: inset(0 20% 0 0); }
.hpgt .gt-sb-85  .gt-seatbar-fill { width: 85%; }  .hpgt .gt-sb-85  .gt-seatbar-txt-on { clip-path: inset(0 15% 0 0); }
.hpgt .gt-sb-90  .gt-seatbar-fill { width: 90%; }  .hpgt .gt-sb-90  .gt-seatbar-txt-on { clip-path: inset(0 10% 0 0); }
.hpgt .gt-sb-95  .gt-seatbar-fill { width: 95%; }  .hpgt .gt-sb-95  .gt-seatbar-txt-on { clip-path: inset(0 5% 0 0); }
.hpgt .gt-sb-100 .gt-seatbar-fill { width: 100%; } .hpgt .gt-sb-100 .gt-seatbar-txt-on { clip-path: inset(0 0 0 0); }

/* Sắp hết chỗ (≤25% chỗ trống): fill chuyển tông đỏ cảnh báo cho dễ nhận ra */
.hpgt .gt-seatbar.is-low .gt-seatbar-fill { background: linear-gradient(90deg, #f0264f, #c2103a); }

/* Không biết tổng số chỗ → không có tỉ lệ để vẽ: chỉ hiện pill chữ, không fill */
.hpgt .gt-seatbar--plain .gt-seatbar-txt-on { display: none; }

/* Hết chỗ: track xám, chữ đỏ trầm, không fill */
.hpgt .gt-seatbar--out { background: #f1f1f1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.hpgt .gt-seatbar--out .gt-seatbar-txt { color: #c62828; }
.hpgt .gt-seatbar--out .gt-seatbar-txt-on { display: none; }

@media (max-width: 767px) {
    /* Card mobile rộng 86vw → ô meta rộng hơn, cho chữ to lại chút cho dễ đọc */
    .hpgt .gt-seatbar { height: 24px; }
    .hpgt .gt-seatbar-txt { font-size: 12px; }
}

/* ── GIÁ GỐC gạch ngang (+ badge -N%) — chỉ khối Flash Sale & Tour giờ chót ────────
   Bật bằng $opts['showOrigPrice'] ở call-site (xem box/gt_tour_card.php). Các slider
   tour khác không truyền cờ → không có .gt-price-row → không đổi gì.
   Dùng lại đúng tên class .orig/.disc-pct như card trang danh sách (search-global-v2.css)
   để 2 chỗ nhìn giống nhau.
   KHÔNG đụng min-height của .gt-price-block: hàng này CHỈ in khi tour thật sự có giá gốc
   để gạch, nên card không giảm giá giữ nguyên chiều cao như trước. */
.hpgt .gt-price-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.2;
}
.hpgt .gt-price-row .orig {
    font-size: 13px;
    color: #9aa0aa;
    text-decoration: line-through;
    white-space: nowrap;
}
/* Badge "-N%": copy y hệt pill đỏ của Flash Sale (.fss-card-discpill trong
   box/flash_sale_strip.php — nền --fss-red #e5293a, bo TRÒN 999px) theo yêu cầu client
   2026-07-27 "làm giống cái màu đỏ đẹp". Đổi màu/bo thì sửa CẢ HAI nơi cho khớp. */
.hpgt .gt-price-row .disc-pct {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .2px;
    color: #fff;
    background: #e5293a;
    border-radius: 999px;
    padding: 3px 7px;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .hpgt .gt-price-row .orig { font-size: 12px; }
}

/* ─── Nút ‹ › owl của slider gt-card — ĐỒNG BỘ với trang chủ (2026-07-27) ───
   Trang inner (vd /du-lich-khach-doan) KHÔNG nạp homepage-style-v2.css nên nút owl rơi về
   base (mũi tên 80px trắng, lệch vị trí). Ép về pill tròn 40px như trang chủ. Scope .hpgt =
   chỉ slider dùng gt-card; specificity (.hpgt .owl-nav button.owl-prev) thắng base .owl-carousel. */
.hpgt .owl-nav button.owl-prev,
.hpgt .owl-nav button.owl-next {
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18);
    color: #333; font-size: 28px; line-height: 1; text-shadow: none;
    display: flex; align-items: center; justify-content: center;
    /* --mda-nav-top = tâm ảnh (JS đo, chỉ chạy ở trang chủ/landing). Trang inner → fallback 25% (nằm trong ảnh). */
    top: var(--mda-nav-top, 25%) !important; transform: translateY(-50%);
}
.hpgt .owl-nav button.owl-prev { left: 6px; right: auto; }
.hpgt .owl-nav button.owl-next { right: 6px; left: auto; }
.hpgt .owl-nav button.owl-prev span,
.hpgt .owl-nav button.owl-next span { display: block; line-height: 1; margin-top: -4px; }
.hpgt .owl-nav button.owl-prev:hover,
.hpgt .owl-nav button.owl-next:hover { background: #fff; color: #d6248c; box-shadow: 0 4px 14px rgba(0,0,0,.28); opacity: 1; }