/* =====================================================================================
   Vé vui chơi (pro/TicketConnect) — giao diện ngoài trang.

   LUẬT CỦA FILE NÀY, đã trả giá mới có:

   1. Mọi class mang tiền tố `.tc-`. Tuyệt đối KHÔNG mượn class của theme (`.row`, `.col-md-*`,
      `.btn`, `.form-control`, `.card`, `.banner-header-body`…). Mỗi theme style bộ đó một kiểu,
      nhiều rule kèm `!important`, nên cùng một markup cho ra 6 giao diện khác nhau và đều lỗi —
      3 vòng sửa ở thanh tìm kiếm của module Voyage là vì chuyện này.

   2. Màu bám `var(--primary-color)` của theme, nên khác theme thì chỉ khác MÀU, không khác bố cục.
      Màu chữ trên nền chính đi qua `--tc-on-primary` để theme có màu chủ đạo SÁNG (VNE vàng
      #FEC529) chỉ cần khai đè một dòng thay vì sửa file này.

   3. ĐẶC HIỆU: `.tc-wrap a { color: inherit }` là (0,1,1). Một rule `.tc-btn { color:#fff }` chỉ
      (0,1,0) nên THUA — mọi nút dựng bằng thẻ <a> sẽ lấy màu chữ thân trang, trong khi nút dựng
      bằng <button> vẫn trắng, nên nhìn lướt tưởng chỉ vài nút bị. Vì vậy nút luôn viết
      `.tc-wrap .tc-btn`. (Lỗi này đã xảy ra thật ở eSIM.)

   4. Không dùng `!important` ở đâu cả. Cần tới nó là dấu hiệu đang tranh chấp với theme, tức
      đang vi phạm luật 1.

   5. THANG KHOẢNG CÁCH: mọi `padding` / `gap` / `margin` là **bội số của 4px**. Không 13px chỗ
      này 17px chỗ kia — mắt không đọc ra con số nhưng đọc ra sự lộn xộn.

   6. Mọi MÀU khai thành biến ở `.tc-wrap`, kể cả màu của dải cảnh báo. Rải mã hex khắp file là
      thứ khiến việc đổi tông màu sau này phải đi sửa hai chục chỗ và sót một chỗ.
   ===================================================================================== */

.tc-wrap {
    /* Nền / viền / chữ */
    --tc-vien: #e4e7ec;
    --tc-vien-dam: #d6dae1;
    --tc-nen: #ffffff;
    --tc-nen-mo: #f6f7f9;
    --tc-chu: #1d2433;
    --tc-chu-mo: #6b7280;

    /* Màu chủ đạo — bám theme, có màu lùi cho trường hợp theme không khai biến */
    --tc-chinh: var(--primary-color, #1a73e8);
    --tc-on-primary: #ffffff;
    --tc-chinh-mo: #f2f5f9;   /* nền chip; bản color-mix nằm ngay dưới, xem ghi chú ở đó */
    /* Màu chủ đạo dùng làm CHỮ trên nền trắng (giá, link, tab đang chọn). Trình duyệt cũ: chính
       màu chủ đạo. Trình duyệt mới: xem khối `@supports` ngay dưới. */
    --tc-chinh-chu: var(--tc-chinh);

    /* Cảnh báo + nguy hiểm */
    --tc-canh-vien: #f3d9a4;
    --tc-canh-nen: #fff8e8;
    --tc-do: #d93025;

    /* Đổ bóng + bo góc */
    --tc-bong: 0 10px 24px rgba(16, 24, 40, .12);
    --tc-bong-nhe: 0 1px 2px rgba(16, 24, 40, .05);
    --tc-bo: 12px;
    --tc-bo-nho: 8px;
    --tc-bo-lon: 16px;
    /* Chiều cao header DÍNH của theme — `ticket-chung.js` đo và ghi đè; không JS thì 0. */
    --tc-dinh: 0px;
    /* Chiều cao thanh CỐ ĐỊNH của theme ở mép dưới (vd `.bc-mobile-bottom-menu` của Euphoria) —
       `ticket-chung.js` đo; thứ gì của module nổi ở đáy phải đứng TRÊN nó. */
    --tc-day: 0px;

    color: var(--tc-chu);
    font-size: 15px;
    line-height: 1.5;
}

/* ⚠️⚠️ TƯƠNG PHẢN TỰ TÍNH THEO MÀU CỦA THEME (WCAG AA ≥ 4.5:1).
   Đo thật 25/09/2026: theme VNE có màu chủ đạo VÀNG `#FEC529` ⇒ chữ trắng trên hero/nút và giá,
   link, tab đang chọn màu vàng trên nền trắng gần như KHÔNG ĐỌC ĐƯỢC. Không khai đè từng theme
   (6 kho git riêng, và theme mới sẽ lại quên) — suy ra từ chính `--tc-chinh`:
     · `--tc-chinh-chu`   kẹp độ sáng OKLCH ≤ 0.52 ⇒ màu tối (xanh, teal) gần như giữ nguyên, màu
                          sáng (vàng) sẫm lại thành nâu vàng — cùng sắc độ, đọc được trên nền trắng;
     · `--tc-on-primary`  chữ trên nền màu chủ đạo: TRẮNG khi nền tối, ĐEN khi nền sáng
                          (`clamp(0, (0.68 − L) × 100, 1)` là phép "nếu L < 0.68 thì 1, ngược lại 0").
   Trình duyệt chưa hỗ trợ màu tương đối (Chrome < 119, Safari < 16.4) giữ hai giá trị ở trên. */
@supports (color: oklch(from red l c h)) {
    .tc-wrap {
        --tc-chinh-chu: oklch(from var(--tc-chinh) min(l, 0.52) c h);
        --tc-on-primary: oklch(from var(--tc-chinh) clamp(0, (0.68 - l) * 100, 1) 0 0);
    }
}

.tc-wrap * { box-sizing: border-box; }

/* Link trong khối này thừa kế màu chữ — trừ những chỗ khai riêng bên dưới. */
.tc-wrap a { color: inherit; text-decoration: none; }

.tc-hop {
    max-width: 1200px;
    margin: 0 auto;
    /* 16px lề hai bên ở khổ điện thoại — không có thì chữ dính sát mép màn hình. */
    padding: 0 16px;
}

/* Chỉ trình đọc màn hình đọc được. */
.tc-an {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Nút ────────────────────────────────────────────────────────────────────────────── */

.tc-wrap .tc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    /* 12 + 12 + ~18 = 42px — thoải mái trên ngưỡng vùng bấm 32px của WCAG. */
    padding: 12px 20px;
    border: 0; border-radius: var(--tc-bo-nho);
    background: var(--tc-chinh);
    color: var(--tc-on-primary);
    font-size: 14px; font-weight: 600; line-height: 1.2;
    cursor: pointer;
    transition: filter .15s ease;
    white-space: nowrap;
}
.tc-wrap .tc-btn:hover { filter: brightness(1.08); color: var(--tc-on-primary); }
.tc-wrap .tc-btn:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: 2px; }
/* 8 + 8 + ~16 = 32px — đúng sàn, không xuống dưới. */
.tc-wrap .tc-btn-nho { padding: 8px 16px; font-size: 13px; }

/* ── Dải cảnh báo ───────────────────────────────────────────────────────────────────── */

.tc-bao {
    margin: 16px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--tc-canh-vien);
    border-radius: var(--tc-bo);
    background: var(--tc-canh-nen);
    font-size: 14px;
}
.tc-bao b { display: block; margin-bottom: 4px; }

/* Thuộc tính `hidden` phải THẮNG mọi rule `display` của file này. Không có dòng này thì một
   class khai `display:flex` (0,1,0) đè lên `[hidden]` của trình duyệt và phần tử "ẩn" vẫn hiện. */
.tc-wrap [hidden] { display: none; }

/* Khoá cuộn thân trang khi bảng lọc trượt đang mở (JS gắn/gỡ class ở <html>). */
html.tc-khoa-cuon, html.tc-khoa-cuon body { overflow: hidden; }

/* Đường dẫn (breadcrumb) — dùng chung hai trang. */
.tc-crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 16px 0 12px;
    font-size: 13px; color: var(--tc-chu-mo);
}
.tc-crumb a { color: var(--tc-chinh-chu); }
.tc-crumb a:hover { text-decoration: underline; }

/* =====================================================================================
   TRANG DANH SÁCH — bố cục theo khuôn luktrip (25/09/2026)
   Hero dải màu · khung tìm đè đáy hero · hàng nút loại hình · cột lọc trái dính theo cuộn
   (khổ hẹp: bảng trượt từ đáy) · lưới thẻ.
   ===================================================================================== */

/* ── Hero ───────────────────────────────────────────────────────────────────────────── */

.tc-hero {
    position: relative; overflow: hidden;
    /* Chừa 88px đáy: khung tìm kéo lên đè 48px, còn 40px thở. */
    padding: 48px 0 88px;
    /* Hai dòng, có chủ ý: dòng đầu là màu đặc cho trình duyệt chưa có `color-mix()`. */
    background: var(--tc-chinh);
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--tc-chinh) 80%, #fff) 0%,
        var(--tc-chinh) 55%,
        color-mix(in srgb, var(--tc-chinh) 70%, #000) 100%);
    color: var(--tc-on-primary);
    text-align: center;
}
/* Hoạ tiết chấm mờ — trang trí thuần. */
.tc-hero-cham {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.6px);
    background-size: 20px 20px;
    pointer-events: none;
}
.tc-hero-ve {
    position: absolute; right: -24px; top: 50%;
    transform: translateY(-50%) rotate(-12deg);
    opacity: .12; pointer-events: none;
}
.tc-hero-trong { position: relative; max-width: 800px; }
.tc-hero-nho {
    display: inline-block; margin-bottom: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    opacity: .88;
}
.tc-hero-tieu { margin: 0; color: inherit; font-size: 32px; line-height: 1.25; font-weight: 800; }
.tc-hero-phu { margin: 12px auto 0; max-width: 640px; color: inherit; opacity: .92; font-size: 15px; }

/* ── Khung tìm (đè đáy hero) ────────────────────────────────────────────────────────── */

.tc-tim {
    position: relative; z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) auto;
    align-items: stretch; gap: 8px;
    margin-top: -48px;
    padding: 12px;
    border: 1px solid var(--tc-vien);
    border-radius: var(--tc-bo-lon);
    background: var(--tc-nen);
    box-shadow: var(--tc-bong);
}
.tc-tim-o-khung, .tc-tim-dd {
    position: relative; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 8px 16px;
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen);
    transition: border-color .15s;
}
.tc-tim-o-khung:focus-within, .tc-tim-dd:focus-within { border-color: var(--tc-chinh); }
.tc-tim-nhan { font-size: 12px; font-weight: 600; color: var(--tc-chu-mo); line-height: 1.3; }
.tc-tim-dong { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tc-tim-ic { flex: 0 0 auto; color: var(--tc-chu-mo); }
.tc-wrap .tc-tim-o,
.tc-wrap .tc-tim-chon {
    flex: 1 1 auto; min-width: 0; width: 100%;
    height: 28px; padding: 0; margin: 0;
    border: 0; outline: none; box-shadow: none; background: transparent;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--tc-chu);
    /* Tắt nút xoá / mũi tên mặc định của trình duyệt — nó nằm đè lên bảng gợi ý. */
    -webkit-appearance: none; appearance: none;
}
.tc-tim-o::-webkit-search-cancel-button { display: none; }
.tc-wrap .tc-tim-chon {
    cursor: pointer; padding-right: 20px;
    /* Mũi tên tự vẽ (SVG nội tuyến, không phụ thuộc font icon của theme). */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center;
}
.tc-wrap .tc-tim-nut { min-height: 56px; padding: 12px 28px; border-radius: var(--tc-bo); font-size: 15px; }

/* Bảng gợi ý */
.tc-goiy {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
    max-height: 320px; overflow-y: auto;
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen);
    box-shadow: var(--tc-bong);
    text-align: left;
}
.tc-goiy-muc {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tc-nen-mo);
    cursor: pointer;
}
.tc-goiy-muc:last-child { border-bottom: 0; }
.tc-goiy-muc.is-now, .tc-goiy-muc:hover { background: var(--tc-nen-mo); }
.tc-goiy-ic { flex: 0 0 auto; color: var(--tc-chu-mo); display: flex; }
.tc-goiy-chu { min-width: 0; }
.tc-goiy-ten {
    display: block; font-weight: 600; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-goiy-phu { display: block; font-size: 12.5px; color: var(--tc-chu-mo); }

/* Trạng thái "đang tìm" và "không tìm thấy" — xem ghi chú trong ticket-browse.js về việc
   vì sao im lặng đóng bảng là một lỗi chứ không phải một lựa chọn. */
.tc-goiy-tin {
    padding: 12px 16px;
    font-size: 13.5px; color: var(--tc-chu-mo);
}

/* ── Hàng nút loại hình ─────────────────────────────────────────────────────────────── */

.tc-lh {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 4px 0 24px;
}
.tc-wrap .tc-lh-i {
    display: inline-flex; align-items: center; gap: 8px;
    /* 8 + 8 + 20 = 36px */
    padding: 8px 16px;
    border: 1.5px solid var(--tc-vien); border-radius: 999px;
    background: var(--tc-nen);
    font-size: 14px; font-weight: 600; line-height: 20px; color: var(--tc-chu);
    transition: border-color .15s, background .15s, color .15s;
}
.tc-wrap .tc-lh-i:hover { border-color: var(--tc-chinh); color: var(--tc-chinh-chu); }
.tc-wrap .tc-lh-i.is-now {
    border-color: var(--tc-chinh);
    background: var(--tc-chinh-mo);
    background: color-mix(in srgb, var(--tc-chinh) 10%, #fff);
    color: var(--tc-chinh-chu);
}
.tc-lh-so {
    padding: 0 8px; border-radius: 999px;
    background: var(--tc-nen-mo);
    font-size: 12px; font-weight: 600; line-height: 20px; color: var(--tc-chu-mo);
}
.tc-lh-i.is-now .tc-lh-so { background: var(--tc-nen); color: var(--tc-chinh-chu); }

/* ── Lưới: cột lọc + cột kết quả ───────────────────────────────────────────────────── */

.tc-ds-luoi {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-bottom: 48px;
}
.tc-ds-luoi.is-mot-cot { grid-template-columns: minmax(0, 1fr); }
.tc-ds-chinh { min-width: 0; }

/* ── Cột lọc ────────────────────────────────────────────────────────────────────────── */

/* Nút nổi "Bộ lọc", nền tối của bảng trượt, đầu + chân bảng trượt: chỉ tồn tại ở khổ hẹp KHI CÓ
   JS (xem @media cuối mục). Khổ rộng không cần, không JS thì cột lọc hiện thẳng. */
.tc-loc-mo, .tc-loc-nen, .tc-loc-dau, .tc-loc-chan { display: none; }

.tc-loc {
    position: sticky; top: calc(var(--tc-dinh, 0px) + 16px);
    display: flex; flex-direction: column; gap: 16px;
}
.tc-loc-than { display: flex; flex-direction: column; gap: 16px; }

.tc-loc-the {
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen);
    box-shadow: var(--tc-bong-nhe);
    overflow: hidden;
}
.tc-loc-the-dau {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tc-vien);
    font-size: 15px;
}
.tc-wrap .tc-loc-xoa { font-size: 13px; font-weight: 600; color: var(--tc-chinh-chu); }
.tc-wrap .tc-loc-xoa:hover { text-decoration: underline; }

.tc-loc-nhom { padding: 16px 20px; }
.tc-loc-nhom + .tc-loc-nhom { border-top: 1px solid var(--tc-nen-mo); }
.tc-loc-nhom-ten { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--tc-chu); }
.tc-loc-ds { margin: 0; padding: 0; list-style: none; }
.tc-wrap .tc-loc-muc {
    display: flex; align-items: center; gap: 12px;
    /* 8 + 8 + 20 = 36px */
    padding: 8px 0;
    font-size: 14px; line-height: 20px; color: var(--tc-chu);
}
.tc-wrap .tc-loc-muc:hover .tc-loc-chu { color: var(--tc-chinh-chu); }
/* Chấm TRÒN — một mặt lọc chỉ chọn được MỘT giá trị (xem chú thích blade). */
.tc-loc-cham {
    position: relative; flex: 0 0 auto;
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--tc-vien-dam);
    background: var(--tc-nen);
    transition: border-color .15s;
}
.tc-loc-muc:hover .tc-loc-cham { border-color: var(--tc-chinh); }
.tc-loc-muc.is-now .tc-loc-cham { border-color: var(--tc-chinh); }
.tc-loc-muc.is-now .tc-loc-cham::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%;
    background: var(--tc-chinh);
}
.tc-loc-muc.is-now .tc-loc-chu { font-weight: 600; }
.tc-loc-chu { flex: 1 1 auto; min-width: 0; }
.tc-loc-so {
    flex: 0 0 auto;
    padding: 0 8px; border-radius: 999px;
    background: var(--tc-nen-mo);
    font-size: 12px; line-height: 20px; color: var(--tc-chu-mo);
}

/* Thẻ hỗ trợ đặt vé */
.tc-wrap .tc-tu-van {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px;
    border-radius: var(--tc-bo);
    background: var(--tc-chinh);
    background: linear-gradient(135deg, var(--tc-chinh), color-mix(in srgb, var(--tc-chinh) 72%, #000));
    color: var(--tc-on-primary);
    box-shadow: var(--tc-bong-nhe);
}
.tc-tu-van-ic {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}
.tc-tu-van-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-tu-van-nhan { font-size: 13px; opacity: .9; }
.tc-tu-van-so { font-size: 18px; font-weight: 800; letter-spacing: .4px; }

/* ── Đầu cột kết quả: số kết quả + sắp xếp + chip ───────────────────────────────────── */

.tc-ds-dau {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 16px;
}
.tc-dem { margin: 0; font-size: 14px; color: var(--tc-chu); }
.tc-dem b { font-weight: 700; }
.tc-dem-phu { color: var(--tc-chu-mo); }

.tc-sx { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tc-sx-nhan { flex: 0 0 auto; font-size: 13px; color: var(--tc-chu-mo); }
.tc-sx-nhom {
    display: inline-flex; gap: 4px; padding: 4px; min-width: 0;
    border-radius: var(--tc-bo);
    background: var(--tc-nen-mo);
    overflow-x: auto; scrollbar-width: none;
}
.tc-sx-nhom::-webkit-scrollbar { display: none; }
.tc-wrap .tc-sx-i {
    flex: 0 0 auto;
    /* 4 + 4 + 24 = 32px — đúng sàn vùng bấm, vẫn giữ bội số 4px. */
    padding: 4px 12px; border-radius: var(--tc-bo-nho);
    font-size: 13px; font-weight: 600; line-height: 24px; color: var(--tc-chu-mo);
    white-space: nowrap;
}
.tc-wrap .tc-sx-i:hover { color: var(--tc-chu); }
.tc-wrap .tc-sx-i.is-now { background: var(--tc-nen); color: var(--tc-chinh-chu); box-shadow: var(--tc-bong-nhe); }

/* Chip bộ lọc đang bật */
.tc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.tc-chip {
    display: inline-flex; align-items: center; gap: 8px;
    /* 8 + 8 + ~16 = 32px — đúng sàn vùng bấm. Bản đầu để 5px/11px ⇒ chỉ ~28px, dưới chuẩn. */
    padding: 8px 12px;
    border: 1px solid var(--tc-chinh); border-radius: 999px;
    /* Hai dòng, có chủ ý: `color-mix()` chỉ có từ Chrome 111 / Safari 16.2 / Firefox 113.
       Trình duyệt cũ bỏ qua dòng sau và giữ dòng trước — chip vẫn đọc được, chỉ không bám
       màu chủ đạo của theme. ⛔ Đừng bỏ dòng đầu: thiếu nó thì trên máy cũ chip thành trong
       suốt và mất hẳn tín hiệu "đang lọc". */
    background: var(--tc-chinh-mo);
    background: color-mix(in srgb, var(--tc-chinh) 8%, #fff);
    font-size: 13px;
}
.tc-chip-xoa { border-color: var(--tc-vien); background: transparent; color: var(--tc-do); }

/* ── Lưới thẻ ───────────────────────────────────────────────────────────────────────── */

.tc-luoi {
    display: grid;
    /* Bề rộng cột do CHÍNH file này quyết, không mượn `col-md-*`: hệ lưới của mỗi theme khác
       nhau (Dhome còn ép `width:auto` cho con của `.g-field-search`). 240px tối thiểu ⇒ cột
       kết quả ~860px ra 3 cột, ~690px ra 2, điện thoại ra 1 — không cần mốc @media nào. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}
/* Tối đa 3 cột (khối "Khu vui chơi khác" chỉ có ≤ 3 thẻ trên bề ngang đầy đủ). */
.tc-luoi-3 { grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 40px) / 3)), 1fr)); }

.tc-card {
    position: relative;
    display: flex; flex-direction: column;
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen);
    box-shadow: var(--tc-bong-nhe);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.tc-card:hover { box-shadow: var(--tc-bong); transform: translateY(-4px); }
.tc-card:focus-within { outline: 2px solid var(--tc-chinh); outline-offset: 2px; }

.tc-card-anh {
    position: relative; display: block;
    /* TỈ LỆ CỐ ĐỊNH: ảnh của hãng đủ mọi kích thước. Không khoá tỉ lệ thì lưới nhảy lung tung
       khi ảnh tải xong (layout shift), và hàng thẻ so le nhau. */
    aspect-ratio: 3 / 2;
    background: var(--tc-nen-mo);
    overflow: hidden;
}
.tc-card-anh img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
}
.tc-card:hover .tc-card-anh img { transform: scale(1.05); }
.tc-card-loai {
    position: absolute; left: 12px; top: 12px; z-index: 2;
    max-width: calc(100% - 24px);
    padding: 4px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    font-size: 12px; font-weight: 600; line-height: 16px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    box-shadow: var(--tc-bong-nhe);
}

.tc-card-than { display: flex; flex-direction: column; flex: 1 1 auto; gap: 8px; padding: 16px; }
.tc-card-meta {
    margin: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12.5px; line-height: 16px; color: var(--tc-chu-mo);
}
.tc-card-dc, .tc-card-gio { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.tc-card-dc { flex: 1 1 auto; }
.tc-card-gio { flex: 0 0 auto; white-space: nowrap; }
.tc-card-meta-chu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-card-meta .tc-ic { flex: 0 0 auto; }

.tc-card-ten {
    margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700;
    /* Hai dòng rồi cắt — tên khu của hãng dài tới 40 ký tự và độ dài rất lệch nhau. Chừa đủ
       HAI dòng kể cả khi tên ngắn ⇒ khối giá của mọi thẻ trong hàng thẳng nhau. */
    min-height: calc(2em * 1.35);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tc-wrap .tc-card-link { color: var(--tc-chu); }
/* Link ở TÊN kéo giãn phủ cả thẻ ⇒ bấm đâu trên thẻ cũng đi, mà chỉ có MỘT điểm dừng Tab. */
.tc-wrap .tc-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tc-wrap .tc-card-link:focus { outline: none; }
.tc-card:hover .tc-card-link { color: var(--tc-chinh-chu); }

.tc-card-chan {
    /* `margin-top:auto` đẩy khối giá xuống đáy ⇒ mọi thẻ trong một hàng có giá thẳng hàng
       nhau dù tên dài ngắn khác nhau. */
    margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--tc-nen-mo);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.tc-gia { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-gia-dong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.tc-gia-cu { font-size: 12.5px; color: var(--tc-chu-mo); }
.tc-gia-tu { font-size: 12.5px; color: var(--tc-chu-mo); }
.tc-gia-so { font-size: 18px; font-weight: 800; line-height: 1.2; color: var(--tc-chinh-chu); }
.tc-card-xem {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 600; color: var(--tc-chinh-chu); white-space: nowrap;
}
.tc-card-xem svg { transition: transform .15s; }
.tc-card:hover .tc-card-xem svg { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
    .tc-card, .tc-card-anh img, .tc-card-xem svg { transition: none; }
    .tc-card:hover { transform: none; }
    .tc-card:hover .tc-card-anh img { transform: none; }
}

/* ── Trạng thái rỗng ────────────────────────────────────────────────────────────────── */

.tc-rong {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 48px 20px;
    border: 1px dashed var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen-mo);
    text-align: center; color: var(--tc-chu-mo);
}
.tc-rong b { color: var(--tc-chu); font-size: 16px; }
.tc-rong p { margin: 0; font-size: 14px; }
.tc-rong .tc-btn { margin-top: 12px; }

/* ── Phân trang ─────────────────────────────────────────────────────────────────────── */

.tc-pg { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px 0 8px; }
.tc-pg-i {
    /* Ô VUÔNG cố định căn giữa bằng flex — đúng chỗ bản mặc định của Laravel hỏng trên nhiều
       theme (bề rộng cố định + `line-height` của theme ⇒ con số trồi ra ngoài hình). */
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo-nho);
    background: var(--tc-nen);
    font-size: 14px; font-weight: 500;
}
.tc-pg-i:hover { background: var(--tc-nen-mo); }
.tc-pg-i.is-now { background: var(--tc-chinh); border-color: var(--tc-chinh); color: var(--tc-on-primary); }
.tc-pg-i.is-off { opacity: .4; cursor: default; }
.tc-pg-gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--tc-chu-mo); }

/* ── Khổ < 1024px: một cột, cột lọc thành bảng trượt từ đáy (KHI CÓ JS) ─────────────── */

@media (max-width: 1023.98px) {
    .tc-ds-luoi { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .tc-loc { position: static; }

    /* Không JS: cột lọc nằm thẳng trên danh sách, hai thẻ lọc + hỗ trợ xếp chồng. */

    /* CÓ JS: thu vào bảng trượt. */
    .tc-co-js .tc-loc {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1002;
        display: flex; flex-direction: column; gap: 0;
        max-height: 86vh; max-height: 86dvh;
        border-radius: var(--tc-bo-lon) var(--tc-bo-lon) 0 0;
        background: var(--tc-nen);
        box-shadow: 0 -12px 32px rgba(16, 24, 40, .18);
        transform: translateY(100%);
        visibility: hidden;
        /* `visibility` trễ đúng bằng thời gian trượt ⇒ lúc đóng vẫn thấy nó trượt xuống, xong
           mới biến khỏi thứ tự Tab (không để link vô hình bắt focus). */
        transition: transform .25s ease, visibility 0s linear .25s;
    }
    .tc-co-js .tc-loc.is-mo { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }

    .tc-co-js .tc-loc-dau { display: block; flex: 0 0 auto; padding: 12px 16px; border-bottom: 1px solid var(--tc-vien); }
    .tc-loc-keo { display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: var(--tc-vien-dam); }
    .tc-loc-dau-hang { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .tc-loc-dau-tieu { font-size: 16px; }
    .tc-wrap .tc-loc-dong {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; padding: 0; margin: 0 -8px 0 0;
        border: 0; border-radius: 50%; background: transparent; color: var(--tc-chu);
        cursor: pointer;
    }
    .tc-wrap .tc-loc-dong:hover { background: var(--tc-nen-mo); }

    .tc-co-js .tc-loc-than {
        flex: 1 1 auto; min-height: 0; overflow-y: auto;
        overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        padding: 8px 16px 16px;
    }
    /* Trong bảng trượt thì thẻ lọc không cần khung riêng — bảng đã là khung. */
    .tc-co-js .tc-loc-the { border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
    .tc-co-js .tc-loc-the-dau { display: none; }
    .tc-co-js .tc-loc-nhom { padding: 12px 0; }
    .tc-co-js .tc-loc-muc { min-height: 44px; }

    .tc-co-js .tc-loc-chan {
        display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--tc-vien);
        background: var(--tc-nen);
    }
    .tc-wrap .tc-loc-chan-xoa {
        display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
        border: 1.5px solid var(--tc-vien); border-radius: var(--tc-bo-nho);
        font-weight: 600; color: var(--tc-chu-mo);
    }
    .tc-wrap .tc-loc-chan-nut { flex: 1 1 auto; min-height: 44px; }

    .tc-co-js .tc-loc-nen {
        display: block; position: fixed; inset: 0; z-index: 1001;
        background: rgba(16, 24, 40, .45);
        opacity: 0; pointer-events: none;
        transition: opacity .25s ease;
    }
    .tc-co-js .tc-loc-nen.is-mo { opacity: 1; pointer-events: auto; }

    .tc-wrap.tc-co-js .tc-loc-mo {
        display: inline-flex; align-items: center; gap: 8px;
        /* Đứng TRÊN menu đáy của theme (nếu có); không có thì chừa vùng an toàn của iPhone. */
        position: fixed; left: 50%; bottom: calc(16px + max(var(--tc-day, 0px), env(safe-area-inset-bottom, 0px))); z-index: 1000;
        transform: translateX(-50%);
        min-height: 44px; padding: 0 20px; margin: 0;
        border: 1.5px solid var(--tc-vien-dam); border-radius: 999px;
        background: var(--tc-nen); color: var(--tc-chu);
        font: inherit; font-size: 14px; font-weight: 700; text-transform: none;
        box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
        cursor: pointer;
    }
    .tc-loc-mo-so {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px;
        background: var(--tc-chinh); color: var(--tc-on-primary);
        font-size: 12px; line-height: 1;
    }
    /* Chừa chỗ cho nút nổi ⇒ thẻ / phân trang cuối không bị nó che. */
    .tc-co-js .tc-ds-luoi { padding-bottom: 88px; }
}

@media (max-width: 767.98px) {
    .tc-hero { padding: 32px 0 80px; }
    .tc-hero-tieu { font-size: 24px; }
    .tc-hero-phu { font-size: 14px; }
    .tc-hero-ve { display: none; }

    .tc-tim { grid-template-columns: minmax(0, 1fr); padding: 8px; }
    .tc-wrap .tc-tim-nut { min-height: 48px; }

    .tc-lh { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px 4px; scrollbar-width: none; }
    .tc-lh::-webkit-scrollbar { display: none; }
    .tc-wrap .tc-lh-i { flex: 0 0 auto; }

    .tc-ds-dau { flex-direction: column; align-items: stretch; }
    .tc-sx { width: 100%; }
    .tc-luoi { gap: 16px; }
}

/* ── Ghi chú về NỀN TỐI ──────────────────────────────────────────────────────────────
   CỐ Ý KHÔNG khai `@media (prefers-color-scheme: dark)` ở đây.

   Không theme nào của dự án có chế độ nền tối, nên một khối như vậy hoặc là CODE CHẾT (bám vào
   một class không ai gắn), hoặc — tệ hơn — nó tự đổi màu phần vé vui chơi theo cài đặt hệ điều
   hành của khách trong khi cả trang còn lại vẫn nền trắng, tức một mảng tối lạc lõng giữa trang.

   Khi nào theme có nền tối thật thì đè lại mấy biến ở `.tc-wrap` là đủ — bố cục không phải sửa
   dòng nào. Đó là lý do mọi màu ở file này đều đi qua biến. */

/* =====================================================================================
   TRANG CHI TIẾT — bố cục theo khuôn luktrip (25/09/2026)
   Cột trái: gallery · dải 3 ô · thanh mục lục dính · gói vé · giới thiệu · hướng dẫn ·
   chính sách. Cột phải: hộp đặt vé dính theo cuộn (① ngày ② gói + số lượng ③ thông tin khách).
   Cùng luật với phần trên: chỉ class `.tc-*`, màu qua biến, khoảng cách bội số 4px.
   ===================================================================================== */

.tc-ct-dau { margin-bottom: 20px; }
.tc-ct-ten { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 800; color: var(--tc-chu); }
.tc-ct-nhan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.tc-nhan {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 999px;
    background: var(--tc-nen-mo);
    font-size: 13px; font-weight: 600; line-height: 20px; color: var(--tc-chu);
}
.tc-nhan.is-chinh {
    background: var(--tc-chinh-mo);
    background: color-mix(in srgb, var(--tc-chinh) 10%, #fff);
    color: var(--tc-chinh-chu);
}

.tc-ct-luoi {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    margin: 0 0 48px;
    align-items: start;
}
.tc-ct-trai { min-width: 0; }

/* ── Gallery ────────────────────────────────────────────────────────────────────────── */

.tc-gal { margin-bottom: 20px; }
.tc-gal-khung {
    position: relative;
    aspect-ratio: 16 / 9; max-height: 440px; width: 100%;
    border-radius: var(--tc-bo-lon);
    background: var(--tc-nen-mo);
    box-shadow: var(--tc-bong-nhe);
    overflow: hidden;
}
.tc-gal-khung:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: 2px; }
.tc-gal-anh { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mũi tên + bộ đếm + dải ảnh nhỏ chỉ có nghĩa khi có JS. */
.tc-gal-lui, .tc-gal-dem, .tc-gal-nho { display: none; }
.tc-co-js .tc-gal-dem {
    display: inline-block;
    position: absolute; right: 12px; bottom: 12px;
    padding: 4px 12px; border-radius: 999px;
    background: rgba(16, 24, 40, .64); color: #ffffff;
    font-size: 12.5px; font-weight: 600; line-height: 16px;
    font-variant-numeric: tabular-nums;
}
.tc-wrap.tc-co-js .tc-gal-lui {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; padding: 0; margin: 0;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--tc-chu);
    box-shadow: var(--tc-bong-nhe);
    cursor: pointer;
    transition: background .15s;
}
.tc-wrap.tc-co-js .tc-gal-lui:hover { background: #ffffff; }
.tc-wrap.tc-co-js .tc-gal-lui:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: 2px; }
.tc-gal-lui.is-truoc { left: 12px; }
.tc-gal-lui.is-sau { right: 12px; }

.tc-co-js .tc-gal-nho {
    display: flex; gap: 8px;
    margin-top: 12px; padding-bottom: 4px;
    overflow-x: auto; scrollbar-width: thin;
}
.tc-wrap .tc-gal-nho-i {
    flex: 0 0 auto;
    width: 96px; height: 64px; padding: 0; margin: 0;
    border: 0; border-radius: var(--tc-bo-nho);
    background: var(--tc-nen-mo);
    overflow: hidden; cursor: pointer;
    opacity: .72;
    /* Viền chọn vẽ bằng `outline` âm để không đẩy lệch kích thước ô. */
    outline: 2px solid transparent; outline-offset: -2px;
    transition: opacity .15s, outline-color .15s;
}
.tc-wrap .tc-gal-nho-i:hover { opacity: 1; }
.tc-wrap .tc-gal-nho-i.is-now { opacity: 1; outline-color: var(--tc-chinh); }
.tc-wrap .tc-gal-nho-i:focus-visible { outline-color: var(--tc-chinh); opacity: 1; }
.tc-gal-nho-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hỏng tới mức còn một ảnh ⇒ bỏ mọi điều khiển. */
.tc-gal.is-mot .tc-gal-lui, .tc-gal.is-mot .tc-gal-dem, .tc-gal.is-mot .tc-gal-nho { display: none; }

/* ── Dải 3 ô thông tin ──────────────────────────────────────────────────────────────── */

.tc-ct-tt {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
    margin-bottom: 24px;
}
.tc-tt-o {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px;
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen);
}
.tc-tt-o-ic {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--tc-bo);
    background: var(--tc-chinh-mo);
    background: color-mix(in srgb, var(--tc-chinh) 10%, #fff);
    color: var(--tc-chinh-chu);
}
.tc-tt-o-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-tt-o-nhan { font-size: 12.5px; color: var(--tc-chu-mo); }
.tc-tt-o-gt { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--tc-chu); overflow-wrap: anywhere; }
.tc-tt-o-phu { font-size: 12.5px; color: var(--tc-chu-mo); }
.tc-wrap .tc-tt-o-link { font-size: 12.5px; font-weight: 600; color: var(--tc-chinh-chu); }
.tc-wrap .tc-tt-o-link:hover { text-decoration: underline; }

/* ── Thanh mục lục dính ─────────────────────────────────────────────────────────────── */

.tc-tab {
    position: sticky; top: var(--tc-dinh, 0px);
    /* THẤP hơn header của theme (thường ≥ 100): lúc hai thứ chồng nhau thì header phải nằm
       trên — `ticket-chung.js` cũng dựa vào đó để đo đúng header. */
    z-index: 20;
    display: flex; gap: 4px;
    margin-bottom: 24px; padding: 4px;
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen);
    box-shadow: var(--tc-bong-nhe);
    overflow-x: auto; scrollbar-width: none;
}
.tc-tab::-webkit-scrollbar { display: none; }
.tc-wrap .tc-tab-i {
    flex: 1 0 auto;
    /* 8 + 8 + 24 = 40px */
    padding: 8px 16px; border-radius: var(--tc-bo-nho);
    text-align: center; white-space: nowrap;
    font-size: 14px; font-weight: 700; line-height: 24px; color: var(--tc-chu-mo);
    transition: background .15s, color .15s;
}
.tc-wrap .tc-tab-i:hover { color: var(--tc-chu); background: var(--tc-nen-mo); }
.tc-wrap .tc-tab-i.is-now { background: var(--tc-chinh); color: var(--tc-on-primary); }

/* ── Các mục nội dung ───────────────────────────────────────────────────────────────── */

.tc-muc {
    margin-bottom: 40px;
    /* Neo tới mục thì mép trên phải nằm DƯỚI header dính của theme + thanh mục lục. */
    scroll-margin-top: calc(var(--tc-dinh, 0px) + 72px);
}
.tc-muc-tieu { margin: 0 0 8px; font-size: 22px; line-height: 1.3; font-weight: 800; color: var(--tc-chu); }
.tc-muc-phu { margin: 0 0 16px; font-size: 14px; color: var(--tc-chu-mo); }
.tc-van { font-size: 14.5px; line-height: 1.7; }
.tc-van p { margin: 0 0 8px; }
.tc-van ul, .tc-van ol { margin: 0 0 8px; padding-left: 20px; }

/* Thẻ gói vé */
.tc-goi-ds { display: flex; flex-direction: column; gap: 16px; }
.tc-goi {
    padding: 20px;
    border: 1.5px solid var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen);
    box-shadow: var(--tc-bong-nhe);
    transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.tc-goi.is-chon { border-color: var(--tc-chinh); box-shadow: var(--tc-bong); }
.tc-goi.is-het { opacity: .6; }
.tc-goi-dau { display: flex; align-items: flex-start; gap: 12px; }
.tc-goi-ic {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--tc-bo);
    background: var(--tc-chinh-mo);
    background: color-mix(in srgb, var(--tc-chinh) 10%, #fff);
    color: var(--tc-chinh-chu);
}
/* `flex-basis: 0` — tên gói dài thì CO LẠI và xuống dòng bên trong, chứ không đẩy cả khối rớt
   xuống dưới biểu tượng (đo 390px: "Combo Vé Vào Cửa & Công Viên Ánh Sáng"). */
.tc-goi-chu { flex: 1 1 0; min-width: 0; }
.tc-goi-ten { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--tc-chu); overflow-wrap: anywhere; }
.tc-goi-gia { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.tc-goi-gia:empty { display: none; }
.tc-goi-gia-tu { font-size: 12.5px; color: var(--tc-chu-mo); }
.tc-goi-gia.is-het { font-size: 12.5px; color: var(--tc-chu-mo); }
.tc-goi-mo-ta { margin: 12px 0 0; font-size: 13.5px; color: var(--tc-chu-mo); }

.tc-lv-ds { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px dashed var(--tc-vien); }
.tc-lv-ds li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px dashed var(--tc-vien);
    font-size: 14px;
}
.tc-lv-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tc-lv-ten { font-weight: 600; overflow-wrap: anywhere; }
.tc-lv-thu { font-size: 12.5px; color: var(--tc-chu-mo); }
/* Giá chép từ khối giá AJAX — đẩy sang phải, rỗng thì không chiếm chỗ. */
.tc-lv-gia { margin-left: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 8px; white-space: nowrap; }
.tc-lv-gia:empty { display: none; }
.tc-lv-gia .tc-gia-so { font-size: 15px; }
.tc-lv-gia .tc-ve-don-vi { font-size: 12.5px; color: var(--tc-chu-mo); }
.tc-lv-gia.is-het { font-size: 12.5px; color: var(--tc-chu-mo); }

.tc-goi-chan { display: flex; justify-content: flex-end; margin-top: 16px; }
.tc-wrap .tc-goi-nut:disabled { opacity: .5; cursor: not-allowed; }
.tc-goi.is-chon .tc-goi-nut { background: var(--tc-chinh); color: var(--tc-on-primary); }

/* Hướng dẫn */
.tc-hd {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
    margin: 0; padding: 0; list-style: none;
}
.tc-hd-i {
    display: flex; flex-direction: column; gap: 8px;
    padding: 20px;
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen);
}
.tc-hd-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--tc-chinh-mo);
    background: color-mix(in srgb, var(--tc-chinh) 10%, #fff);
    color: var(--tc-chinh-chu);
}
.tc-hd-buoc { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--tc-chinh-chu); }
.tc-hd-chu { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tc-chu); }
.tc-hd-luu {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 16px; padding: 12px 16px;
    border-radius: var(--tc-bo);
    background: var(--tc-nen-mo);
    font-size: 13.5px; line-height: 1.6; color: var(--tc-chu);
}
.tc-hd-luu .tc-ic { flex: 0 0 auto; margin-top: 2px; color: var(--tc-chinh-chu); }

/* Chính sách */
.tc-bao.tc-cs-dau { margin: 0 0 16px; }
.tc-cs + .tc-cs { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--tc-nen-mo); }
.tc-cs-ten { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--tc-chu); }

/* ── Hộp đặt vé (cột phải, dính theo cuộn) ──────────────────────────────────────────── */

.tc-ct-phai {
    position: sticky; top: calc(var(--tc-dinh, 0px) + 16px);
    /* Hộp có thể cao hơn màn hình (4 gói + bước thông tin khách) — dính mà không cuộn được
       thì nút gửi nằm ngoài tầm với cho tới cuối trang. ⇒ cuộn BÊN TRONG cột. */
    max-height: calc(100vh - var(--tc-dinh, 0px) - 32px);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Chừa 4px cho bóng đổ của hộp khỏi bị cắt ở mép. */
    padding: 4px; margin: -4px;
    scroll-margin-top: calc(var(--tc-dinh, 0px) + 16px);
}
.tc-hop-dat {
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo-lon);
    background: var(--tc-nen);
    box-shadow: var(--tc-bong);
    overflow: hidden;
}
.tc-hop-dat-dau {
    padding: 16px 20px;
    background: var(--tc-chinh);
    background: linear-gradient(135deg, var(--tc-chinh), color-mix(in srgb, var(--tc-chinh) 72%, #000));
    color: var(--tc-on-primary);
}
.tc-hop-dat-tieu { margin: 0; color: inherit; font-size: 18px; font-weight: 800; line-height: 1.3; }
.tc-hop-dat-gia { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; }
.tc-hop-dat-gia-nhan { font-size: 13px; opacity: .88; }
.tc-hop-dat-gach { font-size: 13px; opacity: .75; }
.tc-hop-dat-gia-dong { display: inline-flex; align-items: baseline; gap: 4px; }
.tc-hop-dat-so { font-size: 24px; font-weight: 800; line-height: 1.2; }
.tc-hop-dat-dv { font-size: 13px; opacity: .88; }
.tc-ct-giam {
    padding: 0 8px; border-radius: 999px;
    background: var(--tc-do); color: #ffffff;
    font-size: 12px; font-weight: 700; line-height: 20px;
}
.tc-hop-dat-than { padding: 20px; }
/* Câu lỗi đứng đầu hộp: `.tc-bao` mặc định có lề TRÊN (đứng sau nội dung khác) — ở đây thì ngược lại. */
.tc-hop-dat-than > .tc-bao { margin: 0 0 16px; }
.tc-wrap .tc-hop-dat-cs {
    display: inline-block; margin-top: 16px;
    font-size: 13px; font-weight: 600; color: var(--tc-chinh-chu);
}
.tc-wrap .tc-hop-dat-cs:hover { text-decoration: underline; }

/* Nhãn bước ① ② ③ */
.tc-bn {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px;
    font-size: 14px; font-weight: 700; color: var(--tc-chu);
}
.tc-bn-so {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--tc-chinh); color: var(--tc-on-primary);
    font-size: 12px; font-weight: 800; line-height: 1;
}

/* Dưới hộp: ba dòng tin cậy */
.tc-tin { margin: 16px 0 0; padding: 0 4px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tc-tin li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--tc-chu-mo); }
.tc-tin .tc-ic { flex: 0 0 auto; color: var(--tc-chinh-chu); margin-top: 1px; }
.tc-wrap .tc-tin a { color: var(--tc-chinh-chu); font-weight: 700; }

/* ── Chọn ngày: MỘT ô ngày, bấm vào mở lịch tháng tự vẽ ─────────────────────────────────
   ⚠️ Mọi nút ở đây là <button> trần — reset font/màu/nền tường minh, vì theme nào cũng style
   `button` một kiểu (nền xám, viền 2px, chữ in hoa…).
   (Dải chip 4 ngày đã thử và bỏ 25/09/2026: cột 360px quá hẹp, chữ "Ngày khác" bị che.) */

.tc-lich { position: relative; margin-bottom: 20px; }

.tc-wrap .tc-ngay {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 48px; padding: 8px 12px; margin: 0;
    border: 1px solid var(--tc-vien-dam); border-radius: var(--tc-bo-nho);
    background: var(--tc-nen); color: var(--tc-chu);
    font: inherit; font-size: 15px; font-weight: 600; line-height: 1.4;
    text-align: left; text-transform: none; letter-spacing: normal;
    cursor: pointer;
    transition: border-color .15s;
}
.tc-wrap .tc-ngay:hover,
.tc-wrap .tc-ngay[aria-expanded="true"] { border-color: var(--tc-chinh); }
.tc-wrap .tc-ngay:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: 2px; }
.tc-ngay .tc-ic { flex: 0 0 auto; color: var(--tc-chu-mo); }
.tc-ngay-chu { flex: 1 1 auto; min-width: 0; }
.tc-ngay-mui { transition: transform .15s; }
.tc-ngay[aria-expanded="true"] .tc-ngay-mui { transform: rotate(180deg); }

.tc-lich-hop {
    position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
    min-width: 280px; padding: 12px;
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen); box-shadow: var(--tc-bong);
}
.tc-lich-dau {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 8px;
}
.tc-lich-thang { font-size: 15px; font-weight: 700; }
.tc-wrap .tc-lich-lui {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; margin: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--tc-chu);
    cursor: pointer;
}
.tc-wrap .tc-lich-lui:hover:not(:disabled) { background: var(--tc-nen-mo); }
.tc-wrap .tc-lich-lui:disabled { color: var(--tc-vien-dam); cursor: default; }
.tc-wrap .tc-lich-lui:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: 2px; }

.tc-lich-luoi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tc-lich-thu {
    padding: 4px 0; text-align: center;
    font-size: 12px; font-weight: 600; color: var(--tc-chu-mo);
}
.tc-wrap .tc-lich-ngay {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 40px; padding: 0; margin: 0;
    border: 0; border-radius: var(--tc-bo-nho);
    background: transparent; color: var(--tc-chu);
    font: inherit; font-size: 14px; line-height: 1;
    cursor: pointer;
}
.tc-wrap .tc-lich-ngay:hover:not(:disabled) { background: var(--tc-chinh-mo); }
.tc-wrap .tc-lich-ngay:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: 1px; }
.tc-wrap .tc-lich-ngay:disabled { color: var(--tc-vien-dam); cursor: default; }
/* Hôm nay: chấm nhỏ dưới số — không tô nền để khỏi lẫn với ngày đang chọn. */
.tc-wrap .tc-lich-ngay.is-hom-nay::after {
    content: ""; position: absolute; bottom: 6px; left: 50%;
    width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
    background: var(--tc-chinh);
}
.tc-wrap .tc-lich-ngay.is-chon {
    background: var(--tc-chinh); color: var(--tc-on-primary); font-weight: 700;
}
.tc-wrap .tc-lich-ngay.is-chon::after { background: var(--tc-on-primary); }

/* Khung chờ — phải CHỪA gần đúng chiều cao khối giá thật, nếu không hộp nhảy khi giá về. */
.tc-gia-cho { display: flex; flex-direction: column; gap: 12px; }
.tc-skel {
    border-radius: var(--tc-bo-nho);
    background: linear-gradient(90deg, var(--tc-nen-mo) 25%, #eef0f4 37%, var(--tc-nen-mo) 63%);
    background-size: 400% 100%;
    animation: tc-skel 1.3s ease-in-out infinite;
}
.tc-skel-dong { height: 56px; }
.tc-skel-nut  { height: 44px; }
@keyframes tc-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .tc-skel { animation: none; } }

/* ── Khối giá: gói (mở/gập) + dòng loại vé ──────────────────────────────────────────── */

.tc-ve-nhom { margin-bottom: 12px; }
/* Nhiều gói ⇒ mỗi gói là một khung viền bấm mở/gập. */
.tc-ve-nhom.is-nhieu {
    border: 1.5px solid var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen);
    transition: border-color .15s, box-shadow .15s;
}
.tc-ve-nhom.is-nhieu.is-mo { border-color: var(--tc-chinh); }
.tc-ve-nhom.is-nhay { box-shadow: 0 0 0 4px var(--tc-chinh-mo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc-chinh) 22%, transparent); }
@media (prefers-reduced-motion: reduce) { .tc-ve-nhom.is-nhieu { transition: none; } }

.tc-wrap .tc-ve-nhom-mo {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 56px; padding: 12px 16px; margin: 0;
    border: 0; background: transparent; color: var(--tc-chu);
    font: inherit; text-align: left; text-transform: none; letter-spacing: normal;
    cursor: pointer;
}
.tc-wrap .tc-ve-nhom-mo:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: -2px; border-radius: var(--tc-bo); }
.tc-ve-nhom-chu { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.tc-ve-nhom-tu { font-size: 12.5px; color: var(--tc-chu-mo); }
.tc-ve-nhom-tu b { color: var(--tc-chinh-chu); font-weight: 700; }
.tc-ve-nhom-da {
    flex: 0 0 auto;
    padding: 2px 8px; border-radius: 999px;
    background: var(--tc-chinh); color: var(--tc-on-primary);
    font-size: 12px; font-weight: 700; line-height: 16px;
}
.tc-ve-nhom-mui { flex: 0 0 auto; color: var(--tc-chu-mo); transition: transform .15s; }
.tc-ve-nhom-than { padding: 0 16px 8px; }
.tc-ve-nhom:not(.is-nhieu) .tc-ve-nhom-than { padding: 0; }
/* GẬP chỉ khi có JS và chỉ với gói không mở. ⚠️ Chỉ ẨN — ô số lượng vẫn nằm trong form. */
.tc-co-js .tc-ve-nhom.is-nhieu:not(.is-mo) .tc-ve-nhom-than { display: none; }
.tc-co-js .tc-ve-nhom.is-nhieu:not(.is-mo) .tc-ve-nhom-mui { transform: rotate(-90deg); }

.tc-ve-nhom-dau { margin-bottom: 4px; }
/* Nhãn nói khối chữ của hãng LÀ GÌ — tên gói của hãng có khi chỉ là mã kỹ thuật. */
.tc-ve-nhom-nhan {
    display: block; margin-bottom: 2px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
    color: var(--tc-chu-mo);
}
.tc-ve-nhom-ten { display: block; margin: 0; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.tc-mt-nhan { font-weight: 600; color: var(--tc-chu); }
.tc-ve-nhom-mo-ta { margin: 0 0 4px; font-size: 12.5px; color: var(--tc-chu-mo); }

/* Mô tả của hãng có khi dài cả trang (một lịch trình tour) ⇒ tóm 2 dòng, bản đầy đủ nằm
   trong hộp thoại "Xem chi tiết" (partial `detail.mo-ta`, `Support\TicketText`). */
.tc-cat {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere;
}
.tc-ve-mo-ta.tc-cat { margin: 0; }
.tc-wrap .tc-cat-nut {
    display: inline-flex; align-items: center; min-height: 24px; padding: 0; margin: 4px 0 0;
    border: 0; background: transparent; color: var(--tc-chinh-chu);
    font: inherit; font-size: 12.5px; font-weight: 600; text-transform: none;
    cursor: pointer;
}
.tc-wrap .tc-cat-nut:hover { text-decoration: underline; }
.tc-wrap .tc-cat-nut:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: 2px; }

/* Hộp thoại "Xem chi tiết" — ⚠️ `fit-content` không dùng được vì chữ dài sẽ đẩy hộp rộng hết
   màn; bề rộng cố định theo khổ đọc (~70 ký tự), co theo màn hẹp. */
.tc-mt-hop {
    width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
    padding: 0; margin: auto;
    border: 0; border-radius: var(--tc-bo);
    background: var(--tc-nen); color: var(--tc-chu);
    box-shadow: var(--tc-bong);
    overflow: hidden;
}
.tc-mt-hop[open] { display: flex; flex-direction: column; }
/* ⚠️ `::backdrop` không thừa kế biến CSS ở trình duyệt cũ ⇒ màu viết thẳng. */
.tc-mt-hop::backdrop { background: rgba(16, 24, 40, .6); }
.tc-mt-hop-dau {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 8px 8px 20px;
    border-bottom: 1px solid var(--tc-vien);
    font-size: 16px;
}
.tc-mt-hop-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-mt-hop-nhan {
    font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
    color: var(--tc-chu-mo);
}
.tc-mt-hop-nhan:empty { display: none; }
.tc-wrap .tc-mt-hop-dong {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 40px; height: 40px; padding: 0; margin: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--tc-chu);
    cursor: pointer;
}
.tc-wrap .tc-mt-hop-dong:hover { background: var(--tc-nen-mo); }
.tc-wrap .tc-mt-hop-dong:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: 2px; }
.tc-mt-hop-than {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 16px 20px 20px;
    font-size: 14.5px; line-height: 1.7;
}
.tc-mt-tieu {
    margin: 16px 0 4px; padding-left: 12px;
    border-left: 3px solid var(--tc-chinh);
    font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--tc-chu);
}
.tc-mt-tieu:first-child { margin-top: 0; }
.tc-mt-doan { margin: 0 0 8px; }
.tc-mt-ds { margin: 0 0 8px; padding-left: 20px; }
.tc-mt-ds li { margin: 0 0 4px; }

.tc-ve-dong {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tc-nen-mo);
}
.tc-ve-dong:last-child { border-bottom: 0; }
.tc-ve-chu { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tc-ve-ten { font-size: 14.5px; overflow-wrap: anywhere; }
.tc-ve-mo-ta { font-size: 12.5px; color: var(--tc-chu-mo); }
.tc-ve-luat { font-size: 12.5px; color: var(--tc-chinh-chu); }
.tc-ve-gia { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.tc-ve-gia .tc-gia-cu { width: 100%; }
.tc-ve-gia .tc-gia-so { font-size: 16px; }
.tc-ve-don-vi { font-size: 12.5px; color: var(--tc-chu-mo); }

.tc-sl { display: inline-flex; align-items: center; gap: 4px; justify-self: end; }
.tc-wrap .tc-sl-nut {
    /* 36px — trên ngưỡng vùng bấm 32px, và đủ to cho ngón tay trên di động. */
    width: 36px; height: 36px; padding: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--tc-vien); border-radius: var(--tc-bo-nho);
    background: var(--tc-nen);
    font: inherit; font-size: 18px; line-height: 1; cursor: pointer; color: var(--tc-chinh-chu);
    transition: border-color .15s, background .15s;
}
.tc-wrap .tc-sl-nut:hover { border-color: var(--tc-chinh); background: var(--tc-chinh-mo); }
.tc-wrap .tc-sl-nut:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: 2px; }
.tc-sl-o {
    width: 48px; height: 36px;
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo-nho);
    background: var(--tc-nen);
    text-align: center; font-size: 15px; font-weight: 700; color: inherit; font-family: inherit;
}

/* ── Thanh tổng + nút đặt ───────────────────────────────────────────────────────────── */

.tc-dat {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px dashed var(--tc-vien-dam);
}
.tc-dat-tong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.tc-dat-nhan { font-size: 13.5px; color: var(--tc-chu-mo); }
.tc-dat-so { margin-left: auto; font-size: 22px; font-weight: 800; color: var(--tc-chinh-chu); }
.tc-dat-phu { width: 100%; text-align: right; font-size: 13px; color: var(--tc-chu-mo); }
.tc-dat-ngay {
    margin: 8px 0 12px; padding: 8px 12px;
    border-radius: var(--tc-bo-nho);
    background: var(--tc-nen-mo);
    font-size: 13.5px;
}
.tc-wrap .tc-dat-nut { width: 100%; min-height: 48px; font-size: 15px; border-radius: var(--tc-bo); }
.tc-dat-hua { margin: 8px 0 0; font-size: 12.5px; color: var(--tc-chu-mo); text-align: center; }

/* ── Trạng thái không bán được ──────────────────────────────────────────────────────── */

.tc-ve-rong {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 24px 16px;
    border: 1px dashed var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen-mo);
    text-align: center; color: var(--tc-chu-mo);
}
.tc-ve-rong b { color: var(--tc-chu); font-size: 14.5px; font-weight: 600; }

/* ── Khu vui chơi khác ──────────────────────────────────────────────────────────────── */

.tc-lq { padding: 40px 0 56px; background: var(--tc-nen-mo); }
.tc-lq .tc-muc-tieu { margin-bottom: 20px; }

/* ── Thanh đáy dính (chỉ khổ hẹp) ───────────────────────────────────────────────────── */

.tc-thanh-day { display: none; }

@media (max-width: 1023.98px) {
    .tc-ct-luoi { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    /* ⚠️ Bỏ `sticky` + cuộn trong ở khổ hẹp: hộp đặt vé nằm SAU nội dung, dính lại là nó che
       mất phần khách đang đọc. */
    .tc-ct-phai { position: static; max-height: none; overflow: visible; padding: 0; margin: 0; }

    .tc-thanh-day {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        /* Nằm NGAY TRÊN menu đáy của theme (`--tc-day`) — ⚠️ đo thật Euphoria: menu đáy `z-index:
           999`, đặt thanh ở `bottom: 0` là bị nó che mất hoàn toàn. */
        position: fixed; left: 0; right: 0; bottom: var(--tc-day, 0px); z-index: 900;
        padding: 12px 16px calc(12px + max(0px, env(safe-area-inset-bottom, 0px) - var(--tc-day, 0px)));
        border-top: 1px solid var(--tc-vien);
        background: var(--tc-nen);
        box-shadow: 0 -8px 24px rgba(16, 24, 40, .10);
        transition: transform .2s ease;
    }
    .tc-thanh-day.is-an { transform: translateY(110%); }
    .tc-thanh-day-gia { display: flex; flex-direction: column; min-width: 0; }
    .tc-thanh-day-gia span { font-size: 12px; color: var(--tc-chu-mo); }
    .tc-thanh-day-gia b { font-size: 18px; font-weight: 800; color: var(--tc-chinh-chu); }
    .tc-wrap .tc-thanh-day .tc-btn { min-height: 44px; padding: 12px 28px; }
    /* Chừa chỗ cho thanh đáy ⇒ phần cuối trang không bị nó che. */
    .tc-ct.is-co-thanh { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .tc-thanh-day { transition: none; } }

@media (max-width: 767.98px) {
    .tc-ct-ten { font-size: 23px; }
    .tc-gal-khung { aspect-ratio: 4 / 3; border-radius: var(--tc-bo); }
    .tc-wrap .tc-gal-nho-i { width: 72px; height: 48px; }
    .tc-hd { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    /* Bước hướng dẫn: biểu tượng TRÁI, chữ PHẢI — ba khung cao 150px xếp chồng là một màn hình
       chỉ để nói ba câu. */
    .tc-hd-i { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 16px; }
    .tc-hd-ic { grid-row: 1 / span 2; }
    /* Dải 3 ô: gộp thành MỘT khung, các dòng ngăn bằng đường kẻ mảnh. */
    .tc-ct-tt { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--tc-vien); border-radius: var(--tc-bo); overflow: hidden; }
    .tc-tt-o { border: 0; border-radius: 0; padding: 12px 16px; }
    .tc-tt-o + .tc-tt-o { border-top: 1px solid var(--tc-nen-mo); }
    .tc-tt-o-ic { width: 36px; height: 36px; }
    .tc-muc-tieu { font-size: 19px; }
    .tc-goi { padding: 16px; }
    .tc-goi-dau { flex-wrap: wrap; }
    .tc-goi-gia { width: 100%; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 8px; padding-left: 52px; }
    .tc-goi-ic { width: 40px; height: 40px; }
    .tc-tab { margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: 0; border-right: 0; }
    .tc-wrap .tc-tab-i { flex: 0 0 auto; }
}

/* =====================================================================================
   PHA 5 — FORM ĐẶT VÉ + TRANG THANH TOÁN

   Vẫn đúng 6 luật ở đầu file: chỉ class `.tc-*`, màu bám `var(--primary-color)`, khoảng
   cách bội số 4px, vùng bấm ≥ 32px, không một `!important` nào.
   ===================================================================================== */

/* Dải cảnh báo — thêm hai sắc thái. `.tc-bao` mặc định là màu CẢNH BÁO (vàng). */
.tc-bao.is-xau  { border-color: var(--tc-do); background: #fdf2f1; color: var(--tc-do); }
.tc-bao.is-xau b { color: var(--tc-do); }
.tc-bao.is-tin  { border-color: var(--tc-vien); background: var(--tc-nen-mo); color: var(--tc-chu); }
.tc-bao-ds { margin: 0; padding-left: 20px; }
.tc-bao-ds li { margin: 2px 0; }

/* ── Bước 2 trên trang chi tiết: thông tin khách ────────────────────────────────────── */

.tc-khach {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--tc-vien);
}
.tc-khach-tieu { margin: 0 0 12px; font-size: 15px; font-weight: 700; }

.tc-o { display: block; margin-bottom: 12px; }
.tc-o-nhan { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.tc-o-nhan b { color: var(--tc-do); font-weight: 600; }
.tc-o-phu { display: block; margin-top: 4px; font-size: 12px; color: var(--tc-chu-mo); }

/* ⚠️ Khai THẲNG vào input/textarea bên trong `.tc-o` thay vì mượn `.form-control` của theme:
   mỗi theme style ô nhập một kiểu, nhiều rule kèm `!important`, nên cùng một markup ra 6 giao
   diện khác nhau và đều lỗi (3 vòng sửa ở thanh tìm kiếm của Voyage là vì chuyện này). */
.tc-o input,
.tc-o textarea {
    display: block; width: 100%;
    /* 10 + 10 + ~20 = 40px — trên sàn 32px của vùng bấm. */
    padding: 10px 12px;
    border: 1px solid var(--tc-vien-dam); border-radius: var(--tc-bo-nho);
    background: var(--tc-nen);
    color: var(--tc-chu);
    font-size: 14px; font-family: inherit; line-height: 1.4;
}
.tc-o input:focus,
.tc-o textarea:focus { outline: 2px solid var(--tc-chinh); outline-offset: 1px; border-color: var(--tc-chinh); }
.tc-o textarea { resize: vertical; min-height: 60px; }

.tc-wrap .tc-khach-nut { width: 100%; margin-top: 4px; }
.tc-wrap .tc-khach-nut:disabled { opacity: .6; cursor: progress; }
.tc-khach-luu { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--tc-chu-mo); }

/* ── Thanh các bước ─────────────────────────────────────────────────────────────────── */

.tc-buoc { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 0 4px; font-size: 13px; }
.tc-buoc span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--tc-vien); border-radius: 999px;
    color: var(--tc-chu-mo);
}
.tc-buoc i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 999px;
    background: var(--tc-nen-mo);
    font-size: 11px; font-style: normal; font-weight: 700;
}
.tc-buoc .is-dang { border-color: var(--tc-chinh); color: var(--tc-chu); font-weight: 600; }
.tc-buoc .is-dang i { background: var(--tc-chinh); color: var(--tc-on-primary); }
.tc-buoc .is-xong i { background: var(--tc-chinh-mo); }

/* ── Đồng hồ giữ chỗ ───────────────────────────────────────────────────────────────── */

.tc-dem-nguoc {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--tc-canh-vien); border-radius: var(--tc-bo);
    background: var(--tc-canh-nen);
    font-size: 14px;
}
/* Mốc ĐẾN TỪ HÃNG — chỉ ca này mới được phép nói "chỗ của bạn được giữ tới…". Xem blade. */
.tc-dem-nguoc.is-hang { border-color: var(--tc-chinh); background: var(--tc-chinh-mo); }
.tc-dem-so { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 16px; }
.tc-dem-nguoc.is-het { border-color: var(--tc-do); background: #fdf2f1; color: var(--tc-do); }

/* ── Lưới trang thanh toán ─────────────────────────────────────────────────────────── */

.tc-tt-luoi {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    padding: 16px 0 40px;
    align-items: start;
}
.tc-tt-phai { position: sticky; top: 16px; }

.tc-the-hop {
    padding: 20px;
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo);
    background: var(--tc-nen);
    box-shadow: var(--tc-bong-nhe);
}
.tc-tt-trai .tc-the-hop + .tc-the-hop { margin-top: 16px; }
.tc-the-tieu { margin: 0 0 16px; font-size: 17px; font-weight: 700; }

/* ── Chọn cổng thanh toán ──────────────────────────────────────────────────────────── */

.tc-gw-opt {
    margin-bottom: 8px;
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo-nho);
    background: var(--tc-nen);
    transition: border-color .15s ease, background .15s ease;
}
.tc-gw-opt.is-chon { border-color: var(--tc-chinh); background: var(--tc-chinh-mo); }
.tc-gw-opt > label {
    display: flex; align-items: center; gap: 10px;
    /* 12 + 12 + ~20 = 44px, và CẢ THẺ là vùng bấm chứ không chỉ cái radio 16px. */
    margin: 0; padding: 12px 16px;
    cursor: pointer;
    font-size: 14px; font-weight: 600;
}
.tc-gw-opt input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--tc-chinh); }
.tc-gw-mo-ta {
    padding: 0 16px 12px 42px;
    font-size: 13px; line-height: 1.6; color: var(--tc-chu-mo);
}
/* ⚠️ Ô tích điều khoản là partial DÙNG CHUNG (`Booking::…term-conditions`) — nó chỉ có lề DƯỚI
   (inline), còn `.tc-bao` chỉ có lề TRÊN ⇒ đứng ngay sau một dải thông báo là dính sát vào nhau.
   Chừa lề trên ở phía module, ⛔ không sửa partial chung (nó nằm trong luồng của mọi theme). */
.tc-gw .bc-terms { margin-top: 16px; }
/* Dải thông báo đứng đầu form: tiêu đề thẻ đã có lề dưới 16px, cộng thêm lề trên là hở 32px. */
.tc-gw .tc-bao.is-dau { margin-top: 0; }
.tc-wrap .tc-pay-nut { width: 100%; margin-top: 12px; font-size: 15px; }
.tc-wrap .tc-pay-nut:disabled { opacity: .6; cursor: progress; }

.tc-huy-hoan {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 8px 0 0;
    font-size: 12.5px; line-height: 1.6; color: var(--tc-chu-mo);
}
.tc-huy-hoan .tc-ic { flex: 0 0 auto; margin-top: 2px; }

/* ── Tóm tắt đơn ───────────────────────────────────────────────────────────────────── */

.tc-tt-khu { font-size: 15px; font-weight: 600; }
.tc-tt-dc  { margin-top: 2px; font-size: 13px; color: var(--tc-chu-mo); }

/* ⚠️ NGÀY SỬ DỤNG đứng riêng một khối và in ĐẬM: nó là bất biến của tấm vé, không sửa được
   sau khi giữ chỗ. Đặt nhầm ngày là mất tiền thật, nên nó không được lẫn vào dòng meta nhỏ. */
.tc-tt-ngay {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    margin: 12px 0;
    padding: 12px 16px;
    border: 1px solid var(--tc-chinh); border-radius: var(--tc-bo-nho);
    background: var(--tc-chinh-mo);
    font-size: 13px;
}
.tc-tt-ngay b { font-size: 16px; font-weight: 700; }

.tc-tt-dong { border-top: 1px solid var(--tc-vien); padding-top: 12px; }
.tc-tt-ve {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 8px;
    font-size: 13.5px;
}
.tc-tt-ve-chu b { display: block; font-weight: 600; }
.tc-tt-ve-chu span { display: block; margin-top: 2px; font-size: 12px; color: var(--tc-chu-mo); }
.tc-tt-ve-so { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.tc-tt-ve-so span { display: block; font-size: 12px; color: var(--tc-chu-mo); }

.tc-tt-cong { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tc-vien); font-size: 13.5px; }
.tc-tt-cong > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.tc-tt-cong small { font-weight: 400; color: var(--tc-chu-mo); }
.tc-tt-cong .is-tong {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--tc-vien);
    font-size: 16px; font-weight: 700;
}

.tc-tt-khach {
    margin-top: 16px; padding-top: 12px;
    border-top: 1px solid var(--tc-vien);
    font-size: 13px; line-height: 1.7; color: var(--tc-chu-mo);
}

/* Khối khoản đi kèm của `modules/CheckoutAddon` dùng class riêng `.cka-*` và tự mang CSS của
   nó. Ở đây chỉ tách nó khỏi khối bên dưới — ⛔ không style vào trong, đó là view của module
   khác và nó phải trông như nhau ở mọi dịch vụ. */
.tc-tt-trai .cka-panel { margin-bottom: 16px; }

@media (max-width: 920px) {
    .tc-tt-luoi { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    /* ⚠️ Bỏ `sticky` ở khổ hẹp: cột tóm tắt cao gần bằng màn hình nên dính lại là nó che mất
       phần khách đang đọc. Và ở một cột thì nó nằm SAU nút thanh toán — đó chính là lý do
       khối mã giảm giá phải nằm ở cột TRÁI. */
    .tc-tt-phai { position: static; }
    .tc-dem-so { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   PHA 6 — TRANG NHẬN VÉ: khối chờ (`.tc-cho-*`) và mặt vé (`.tc-mv-*`)

   ⚠️ Tiền tố `.tc-mv-` ("mặt vé") cố ý KHÁC `.tc-ve-` của trang chi tiết: bên đó `.tc-ve-dong`,
   `.tc-ve-chu`, `.tc-ve-gia` là DÒNG CHỌN LOẠI VÉ (hàng trên kệ), còn ở đây là TẤM VÉ ĐÃ XUẤT
   (hàng đã bán). Dùng chung tiền tố là hai nghĩa trong một tên, và sửa một bên sẽ lặng lẽ đổi
   giao diện bên kia.
   ⚠️ Chỉ class riêng của module, ⛔ không mượn class của theme — mỗi theme style `.row`,
   `.form-control`, `.col-md-*` một kiểu, nhiều rule kèm !important.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Nút viền (hành động phụ) ────────────────────────────────────────────────────────── */
.tc-wrap .tc-btn-vien {
    background: transparent;
    color: var(--tc-chinh-chu);
    border: 1px solid var(--tc-chinh);
}
.tc-wrap .tc-btn-vien:hover { background: var(--tc-chinh-mo); color: var(--tc-chinh-chu); filter: none; }

/* ── KHỐI CHỜ ────────────────────────────────────────────────────────────────────────
   ⚠️ Cố ý KHÔNG có vòng xoay tròn. Một vòng xoay không nói gì cả và vẫn xoay y như thế sau 10
   phút; khối này nói rõ đang chờ AI làm GÌ, kèm mốc thời gian thật. Vạch chạy chỉ là dấu hiệu
   "trang còn sống", và nó dừng hẳn khi đã chốt (`.is-dung`). */
.tc-cho {
    margin: 16px 0 0;
    padding: 16px;
    border: 1px solid var(--tc-canh-vien);
    background: var(--tc-canh-nen);
    border-radius: var(--tc-bo);
}
.tc-cho-dau { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.tc-cho-vach {
    flex: 0 0 auto;
    width: 32px; height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--tc-chinh) 0 40%, rgba(0, 0, 0, .08) 40% 100%);
    background-size: 250% 100%;
    animation: tc-chay 1.4s linear infinite;
}
@keyframes tc-chay { from { background-position: 100% 0; } to { background-position: -60% 0; } }
/* ⚠️ Người đã tắt hiệu ứng chuyển động trong hệ điều hành thì đứng im — vạch này chỉ là trang trí. */
@media (prefers-reduced-motion: reduce) { .tc-cho-vach { animation: none; } }
.tc-cho.is-dung .tc-cho-vach { animation: none; background: var(--tc-chu-mo); }
.tc-cho-mo  { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
.tc-cho-moc { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--tc-chu-mo); }

/* ── MẶT VÉ ───────────────────────────────────────────────────────────────────────────── */
.tc-mv-ds { margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; }

.tc-mv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--tc-vien);
    border-radius: var(--tc-bo);
    background: var(--tc-nen);
    box-shadow: var(--tc-bong-nhe);
}
.tc-mv-trai { min-width: 0; }
.tc-mv-loai { font-size: 14px; font-weight: 600; }
.tc-mv-loai span { font-weight: 400; color: var(--tc-chu-mo); }

/* ⭐ MÃ VÉ — hàng hoá. Chữ to, giãn ký tự, monospace: khách phải đọc được cho nhân viên cổng
   nghe qua điện thoại, và `word-break` để mã dài không tràn ra khỏi thẻ ở khổ điện thoại. */
.tc-mv-ma-hop { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tc-mv-ma {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: 19px; font-weight: 700; letter-spacing: 1px;
    word-break: break-all;
    padding: 4px 8px;
    border-radius: var(--tc-bo-nho);
    background: var(--tc-nen-mo);
    border: 1px dashed var(--tc-vien-dam);
}
.tc-mv-copy {
    /* Vùng bấm ≥ 32px — ngón tay, không phải con trỏ chuột. */
    min-height: 32px; padding: 4px 12px;
    font-size: 12.5px; line-height: 1.6;
    cursor: pointer;
    color: var(--tc-chinh-chu);
    background: transparent;
    border: 1px solid var(--tc-chinh);
    border-radius: var(--tc-bo-nho);
}
.tc-mv-copy:hover { background: var(--tc-chinh-mo); }
.tc-mv-copy:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: 2px; }

.tc-mv-meta { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--tc-chu-mo); }
.tc-mv-meta b { color: var(--tc-chu); font-weight: 600; }
.tc-mv-meta a { color: var(--tc-chinh-chu); }

/* Ảnh đại diện mặt vé = NGUYÊN tấm vé thu nhỏ.
   ⚠️⚠️ Iframe luôn dựng ở KHỔ GỐC 302×470 (= `TcTicket::MAT_VE_*`, đổi thì đổi cả hai nơi) rồi
   `transform: scale` — ⛔ đừng đặt width/height nhỏ hơn cho iframe: nội dung của hãng rộng cố định
   80mm nên sẽ bị CẮT (bản cũ 168×168 mất nửa QR + nửa dòng chữ, kèm hai thanh cuộn).
   `--tc-mv-rong` là số KHÔNG đơn vị để dùng được trong cả `width` lẫn `scale()`. */
.tc-wrap .tc-mv-qr {
    --tc-mv-rong: 148;
    position: relative; flex: 0 0 auto; display: block;
    /* Ô lưới kéo giãn con theo chiều cao ⇒ phá `aspect-ratio`. Chốt lại. */
    align-self: start;
    width: calc(var(--tc-mv-rong) * 1px);
    aspect-ratio: 302 / 470;
    padding: 0; margin: 0;
    border: 1px solid var(--tc-vien); border-radius: var(--tc-bo-nho);
    background: #ffffff;
    overflow: hidden;
    cursor: zoom-in;
    transition: border-color .15s, box-shadow .15s;
}
.tc-wrap .tc-mv-qr:hover { border-color: var(--tc-chinh); box-shadow: var(--tc-bong-nhe); }
.tc-wrap .tc-mv-qr:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: 2px; }
.tc-mv-qr-khung {
    position: absolute; top: 0; left: 0;
    width: 302px; height: 470px;
    border: 0; display: block;
    transform-origin: 0 0;
    transform: scale(calc(var(--tc-mv-rong) / 302));
    /* Cú bấm phải rơi vào NÚT bọc ngoài, không bị iframe nuốt. */
    pointer-events: none;
}
.tc-mv-qr-phong {
    position: absolute; right: 8px; bottom: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 999px;
    background: rgba(16, 24, 40, .72); color: #ffffff;
    font-size: 12px; line-height: 1.4;
}

/* ── Hộp phóng to mặt vé ──
   Tỉ lệ phóng do JS tính theo khung nhìn và ghi vào `--tc-mv-ti-le` (vừa màn hình, tối đa 2×). */
.tc-mv-phong {
    /* ⚠️ `fit-content`, ⛔ không `auto`: dialog modal nằm `position: fixed; inset: 0` nên `auto`
       kéo giãn nó ra gần hết màn hình, tấm vé lọt thỏm giữa một khoảng trắng mênh mông. */
    width: fit-content; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
    padding: 0; margin: auto;
    border: 0; border-radius: var(--tc-bo);
    background: var(--tc-nen); color: var(--tc-chu);
    box-shadow: var(--tc-bong);
    overflow: auto;
}
/* ⚠️ `::backdrop` không thừa kế biến CSS ở trình duyệt cũ ⇒ màu viết thẳng. */
.tc-mv-phong::backdrop { background: rgba(16, 24, 40, .6); }
.tc-mv-phong-dau {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 8px 8px 16px;
    border-bottom: 1px solid var(--tc-vien);
    font-size: 15px;
}
.tc-wrap .tc-mv-phong-dong {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; margin: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--tc-chu);
    cursor: pointer;
}
.tc-wrap .tc-mv-phong-dong:hover { background: var(--tc-nen-mo); }
.tc-wrap .tc-mv-phong-dong:focus-visible { outline: 2px solid var(--tc-chinh); outline-offset: 2px; }
.tc-mv-phong-san {
    --tc-mv-ti-le: 1;
    position: relative;
    width: calc(302px * var(--tc-mv-ti-le)); height: calc(470px * var(--tc-mv-ti-le));
    margin: 16px auto 0;
    overflow: hidden;
}
.tc-mv-phong-khung {
    position: absolute; top: 0; left: 0;
    width: 302px; height: 470px; border: 0; display: block;
    transform-origin: 0 0; transform: scale(var(--tc-mv-ti-le));
}
.tc-mv-phong-ma { margin: 12px 16px 16px; text-align: center; font-size: 14px; color: var(--tc-chu-mo); }
.tc-mv-phong-ma code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--tc-chu);
}

.tc-mv-nut { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 640px) {
    /* Khổ điện thoại: QR xuống dưới và nở rộng — ở 390px thì hai cột làm mã vé bị bóp còn
       một dải hẹp, đúng thứ khách cần đọc nhất. */
    .tc-mv { grid-template-columns: minmax(0, 1fr); }
    .tc-wrap .tc-mv-qr { --tc-mv-rong: 200; margin: 0 auto; }
}

/* ── IN VÉ ────────────────────────────────────────────────────────────────────────────
   Khách in ra mang tới cổng: bỏ mọi thứ không phải tấm vé. ⚠️ Không đụng tới layout của theme
   (header/footer của nó có class riêng) — chỉ ẩn phần của module. */
@media print {
    .tc-cho, .tc-mv-nut, .tc-buoc, .tc-mv-copy, .tc-mv-qr-phong, .tc-mv-phong { display: none !important; }
    /* Bản in: mặt vé đúng KHỔ GỐC 80mm để máy quét ở cổng đọc được QR. */
    .tc-wrap .tc-mv-qr { --tc-mv-rong: 302; border: 0; }
    .tc-mv { break-inside: avoid; box-shadow: none; }
    .tc-the-hop { box-shadow: none; border: 0; }
}

/* ── HUỶ ĐƠN (Pha 7) ──────────────────────────────────────────────────────────────────
   ⚠️ Nút huỷ CỐ Ý không dùng màu chính: nó không phải hành động ta mời khách làm. Nhưng cũng
   ⛔ không dùng nền đỏ đặc — một nút đỏ to bằng nút thanh toán là mời bấm nhầm ở đúng chỗ đắt
   nhất. Viền nhạt + chữ xám, chuyển sang đỏ khi rê/bấm: thấy được, mà không kéo mắt.
   ⚠️ Vùng bấm giữ nguyên 32px của `.tc-btn-nho` — ⛔ không thu nhỏ thêm "cho kín đáo". */
.tc-huy-khoi { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--tc-vien); }

.tc-wrap .tc-btn-huy {
    background: transparent;
    border: 1px solid var(--tc-vien-dam);
    color: var(--tc-chu-mo);
}
.tc-wrap .tc-btn-huy:hover {
    filter: none;
    border-color: var(--tc-do);
    color: var(--tc-do);
    background: transparent;
}
.tc-wrap .tc-btn-huy:focus-visible { outline: 2px solid var(--tc-do); outline-offset: 2px; }

.tc-huy-mo { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--tc-chu-mo); }

@media (max-width: 640px) {
    .tc-huy-khoi form { display: block; }
    .tc-wrap .tc-btn-huy { width: 100%; }
}

@media print { .tc-huy-khoi { display: none !important; } }