/* ===================================================================
   components.css — thành phần dùng lại ở nhiều trang
   Nạp SAU layout.css. KHÔNG chứa style riêng của trang chủ (home.css)
   hay của trang con (pages.css).

   Tên class ở đây là HỢP ĐỒNG với các helper C# trong App_Code/Help
   (FrontendPostCard, FrontendSidebar, FrontendProductCard...). Đổi tên
   class mà không sửa helper là mất style, không có lỗi nào báo ra.
   =================================================================== */

/* ============================================================
   NÚT
   ============================================================ */

.btn-book,
.btn-outline,
.btn-surface,
.btn-pill,
.btn-whatsapp,
.btn-addcart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .78rem 1.5rem;
    font-family: var(--font-base);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    text-align: center;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-book:hover,
.btn-outline:hover,
.btn-surface:hover,
.btn-pill:hover,
.btn-whatsapp:hover,
.btn-addcart:hover { transform: translateY(-1px); }

/* Nút hành động chính — ĐỎ. Mỗi khung nhìn chỉ nên có một nút đỏ. */
.btn-book, .btn-addcart {
    color: #fff;
    background: var(--c-accent);
    border-color: var(--c-accent);
    box-shadow: var(--shadow-accent);
}
.btn-book:hover, .btn-addcart:hover {
    color: #fff;
    background: var(--c-accent-dark);
    border-color: var(--c-accent-dark);
}

/* Nút phụ — viền xanh, nền trong. */
.btn-outline {
    color: var(--c-primary);
    background: transparent;
    border-color: var(--c-primary);
}
.btn-outline:hover { color: #fff; background: var(--c-primary); }

/* Nút trên nền tối/ảnh. */
.btn-surface {
    color: var(--c-ink);
    background: var(--c-white);
    border-color: var(--c-white);
}
.btn-surface:hover { color: var(--c-accent); background: #fff; }

/* Nút viền trên NỀN TỐI. Thiếu một selector ở đây là nút chữ xanh trên nền xanh —
   vẫn bấm được nhưng không ai nhìn thấy, và không có lỗi nào báo ra.
   Danh sách phải phủ MỌI khối nền tối: section tối, dải CTA chân trang,
   hero, khối gọi cuối bài, hộp đặt xe ở sidebar, cột thông tin trang liên hệ. */
.section-dark .btn-outline,
.footer-cta .btn-outline,
.hero .btn-outline,
.article-cta .btn-outline,
.sidebar-booking .btn-outline,
.contact-info-box .btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, .6);
}
.section-dark .btn-outline:hover,
.footer-cta .btn-outline:hover,
.hero .btn-outline:hover,
.article-cta .btn-outline:hover,
.sidebar-booking .btn-outline:hover,
.contact-info-box .btn-outline:hover { background: #fff; color: var(--c-primary-darker); border-color: #fff; }

.btn-pill { border-radius: var(--radius-pill); }
.btn-primary-pill { color: #fff; background: var(--c-primary); border-color: var(--c-primary); }
.btn-primary-pill:hover { color: #fff; background: var(--c-primary-dark); }

/* Màu nhận diện của bên thứ ba — không thuộc bảng màu thương hiệu. */
.btn-whatsapp { color: #fff; background: #25d366; border-color: #25d366; }
.btn-whatsapp:hover { color: #fff; background: #1da851; border-color: #1da851; }

.btn-lg { padding: .95rem 1.9rem; font-size: 1rem; }
.btn-sm {padding: .58rem 1rem;font-size: var(--fs-xs);}
.btn-block { width: 100%; }

/* Link "xem thêm" có mũi tên trượt. */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-primary);
}
.btn-link i { transition: transform var(--dur) var(--ease); }
.btn-link:hover { color: var(--c-accent); }
.btn-link:hover i { transform: translateX(3px); }

/* Nút gọi có số — dùng ở CTA, sidebar, thẻ xe. */
.btn-tel {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .78rem 1.4rem;
    font-family: var(--font-num);
    font-size: 1.05rem;
    font-weight: var(--fw-normal);
    letter-spacing: .01em;
    color: #fff;
    background: var(--c-accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-accent);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-tel:hover { color: #fff; background: var(--c-accent-dark); transform: translateY(-1px); }

/* ============================================================
   TIÊU ĐỀ SECTION
   ============================================================ */

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
}
.section-heading-main { max-width: 720px; }
.section-heading h2 {
    margin: 0;
    font-weight: var(--fw-black);
    font-family: "Josefin Sans", sans-serif;
    text-transform: capitalize;
}
.section-heading h2::after {
    content: "";
    display: block;
    width: var(--rule-w);
    height: var(--rule);
    margin-top: var(--sp-2);
    background: var(--c-accent);
}
.section-heading-desc {
    margin: var(--sp-3) 0 0;
    font-size: 14px;
    color: var(--c-muted);
}
.section-heading-more { flex: 0 0 auto; padding-bottom: .35rem; }

/* Biến thể canh giữa — dùng cho section bảng giá. */
.section-heading.is-center { flex-direction: column; align-items: center; text-align: center; }
.section-heading.is-center h2::after { margin-inline: auto; }
.section-heading.is-center .kicker { justify-content: center; }

@media (max-width: 767.98px) {
    .section-heading { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
    .section-heading-more { padding-bottom: 0; }
}

/* ============================================================
   THẺ BÀI VIẾT — FrontendPostCard.RenderCard  (.news-card)
   ============================================================ */

.news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: transparent;
}
.news-card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--c-primary-mist);
}
.news-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s var(--ease);
}
.news-card:hover .news-card-thumb img { transform: scale(1.05); }
.news-card-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    font-size: 2rem;
    color: var(--c-primary-soft);
    background: var(--c-primary-mist);
}
.news-card-cat {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: .22rem .6rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: #fff;
    background: var(--c-accent);
    border-radius: var(--radius-xs);
}
.news-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.news-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: .5rem;
    font-size: var(--fs-xs);
    color: var(--c-muted);
}
.news-card-date { display: inline-flex; align-items: center; gap: .4em; }
.news-card-title {
    margin: 0 0 .55rem;
    font-size: 1.075rem;
    font-weight: var(--fw-bold);
    line-height: 1.38;
}
.news-card-title a { color: var(--c-ink); }
.news-card:hover .news-card-title a { color: var(--c-primary); }
.news-card-desc {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-body .btn-link { margin-top: auto; }

/* ============================================================
   THẺ DỊCH VỤ — FrontendPostCard.RenderServiceCard  (.service-card)
   ============================================================ */

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.service-card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: var(--rule);
    background: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
    z-index: 2;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card:hover::before { transform: scaleX(1); }

.service-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--c-primary-mist);
}
.service-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.service-card:hover .service-thumb img { transform: scale(1.05); }

.service-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--sp-5);
}
.service-title {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
    line-height: 1.35;
}
.service-title a { color: var(--c-ink); }
.service-card:hover .service-title a { color: var(--c-primary); }
.service-desc {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.service-highlights {
    margin: 0 0 var(--sp-4);
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}
.service-highlights li {
    position: relative;
    padding-left: 1.35rem;
    margin-bottom: .32rem;
}
.service-highlights li::before {
    content: "\f00c";              /* fa-check */
    position: absolute;
    left: 0;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .78em;
    color: var(--c-success);
}
/* ⚠️ FrontendPostCard.RenderServiceCard đặt .service-arrow BÊN TRONG .service-thumb
   (nút tròn đè lên ảnh), KHÔNG phải ở cuối thân thẻ. Style nó như một link
   "xem thêm" thì nút vẫn bấm được nhưng vô hình — đúng loại lỗi không báo gì.
   Kiểm bằng cách xem .service-card > .service-thumb > .service-arrow trong DOM. */
.service-arrow {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--c-accent);
    border-radius: 50%;
    box-shadow: var(--shadow-accent);
    transform: translateY(6px);
    opacity: 0;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.service-card:hover .service-arrow,
.service-card:focus-within .service-arrow { opacity: 1; transform: translateY(0); }
.service-arrow:hover { color: #fff; background: var(--c-accent-dark); }

/* Không có ảnh thì .service-thumb không render -> nút mũi tên rơi vào thân thẻ.
   Trả nó về dạng link thường để không lơ lửng ở góc thẻ. */
.service-body > .service-arrow {
    position: static;
    width: auto;
    height: auto;
    margin-top: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    color: var(--c-primary);
    opacity: 1;
    transform: none;
}

/* ============================================================
   THẺ TUYẾN / TOUR — FrontendPostCard.RenderTourCard  (.tour-card)
   Dùng cho các bài "Thuê xe Sài Gòn đi ..."
   ============================================================ */

.tour-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tour-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tour-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-primary-mist); }
.tour-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.tour-card:hover .tour-media img { transform: scale(1.06); }
.tour-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(15, 58, 92, .8), transparent);
}
.tour-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    padding: .25rem .65rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: var(--c-primary-darker);
    background: #fff;
    border-radius: var(--radius-xs);
}
.tour-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--sp-5); }
.tour-title { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: var(--fw-bold); line-height: 1.35; }
.tour-title a { color: var(--c-ink); }
.tour-card:hover .tour-title a { color: var(--c-primary); }
.tour-summary {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tour-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px dashed var(--c-line);
}
/* .tour-foot chỉ chứa MỘT phần tử (.tour-cta) — RenderTourCard không sinh gì khác,
   nên justify-content: space-between không có tác dụng gì. Cho link chiếm cả hàng
   và trông như một nút để nó không lửng lơ bên trái chân thẻ. */
.tour-cta {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    padding: .55rem 1rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-primary);
    background: var(--c-primary-mist);
    border-radius: var(--radius);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tour-cta i { transition: transform var(--dur) var(--ease); }
.tour-card:hover .tour-cta { color: #fff; background: var(--c-accent); }
.tour-card:hover .tour-cta i { transform: translateX(3px); }

/* ============================================================
   THẺ BÀI NHỎ (sidebar, bài liên quan) — .post-mini
   ============================================================ */

/* Markup do FrontendPostCard.RenderCompact sinh ra là <a> bọc <img>/<span> — TOÀN
   thẻ span, không có h3/p và không có <a> lồng trong tiêu đề. Selector phải bám
   đúng hình dạng đó: title/date là span nên KHÔNG tự xuống dòng, và ảnh là chính
   .post-mini-thumb chứ không phải con của nó. */
.post-mini {
    display: flex;
    align-items: flex-start; /* không stretch, nếu không aspect-ratio của ảnh bị ghi đè */
    gap: var(--sp-3);
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--c-line-soft);
    color: inherit;
    text-decoration: none;
}
.post-mini:first-child { padding-top: 0; }
.post-mini:last-child { border-bottom: 0; padding-bottom: 0; }
.post-mini-thumb {
    flex: 0 0 82px;
    width: 82px;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-primary-mist);
    object-fit: cover; /* .post-mini-thumb LÀ thẻ <img>; thiếu dòng này ảnh 16:9 bị bóp méo */
}
/* Nhánh không có ảnh: <span class="post-mini-thumb"><i class="fa-image"></i></span> */
span.post-mini-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary-soft);
}
.post-mini-body { flex: 1 1 auto; min-width: 0; }
.post-mini-title {
    display: block;
    margin: 0 0 .22rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    color: var(--c-ink);
}
.post-mini:hover .post-mini-title { color: var(--c-primary); }
.post-mini-date {
    display: block;
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

/* ============================================================
   BẢNG GIÁ — thành phần quan trọng nhất của site
   Bảng do CKEditor sinh trong CategoryTranslations.Description,
   nên style bám vào .price-table đặt ở phần tử bao ngoài.
   ============================================================ */

.price-table-wrap {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.price-table-wrap .table-scroll { margin: 0; }

/* --font-num (Inter) chỉ chứa CHỮ SỐ — mọi ký tự khác tự rơi về Be Vietnam Pro
   trong danh sách dự phòng. Nhờ đó tên tuyến vẫn là Be Vietnam Pro, còn cột giá
   được chữ số đều bề rộng. Xem chú thích ở tokens.css. */
.price-table {
    width: 100%;
    /* Khách yêu cầu 03/09/2026: chữ trong bảng giá to lên. min-width phải tăng
       theo cỡ chữ, giữ 720px là 6 cột bị bóp lại và tên tuyến xuống hai dòng. */
    min-width: 800px;
    margin: 0;
    border-collapse: collapse;
    font-family: var(--font-num);
    font-size: 1.0625rem;
}
.price-table thead th {
    padding: 1rem .95rem;
    font-size: .9375rem;
    font-weight: var(--fw-black);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--c-primary);
    text-align: right;
    white-space: nowrap;
    border: 0;
}
.price-table thead th:first-child { text-align: left; }
.price-table thead th small {
    display: block;
    font-size: .92em;
    font-weight: var(--fw-normal);
    letter-spacing: 0;
    text-transform: none;
    opacity: .8;
}
.price-table tbody td {
    padding: .95rem .95rem;
    text-align: right;
    border-bottom: 1px solid var(--c-line-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.price-table tbody td:first-child {
    text-align: left;
    font-weight: var(--fw-bold);
    color: var(--c-ink);
    white-space: normal;
}
.price-table tbody tr:nth-child(odd) { background: var(--c-primary-mist); }
.price-table tbody tr:hover { background: var(--c-accent-soft); }
.price-table tbody tr:last-child td { border-bottom: 0; }

/* Con số là thứ khách quét mắt tìm — đỏ, đậm, thẳng cột. */
.price-table .p {color: var(--c-accent);font-weight: var(--fw-black);font-size: 1.02em;}
.price-table .p-contact {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    font-weight: var(--fw-bold);
    color: var(--c-primary);
}
.price-table .p-contact::before {
    content: "\f095";              /* fa-phone */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .82em;
}
.price-table .p-contact:hover { color: var(--c-accent); }

.price-note {
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-bg-soft);
    border-top: 1px solid var(--c-line);
    font-size: 18px;
    color: var(--c-muted);
    font-weight: 500;
}
.price-note ul { margin: 0; padding-left: 1.1rem; }
.price-note li { margin-bottom: .3rem; }
.price-note li:last-child { margin-bottom: 0; }
.price-note strong { color: var(--c-ink); }

/* Dưới 576px bảng 6 cột không đọc được → mỗi tuyến một "vé".
   Nhãn cột lấy từ data-label mà seed SQL gắn sẵn vào từng <td>. */
@media (max-width: 575.98px) {
    /* ⚠️ Phải viết `.rich-text .price-table` chứ không chỉ `.price-table`:
       base.css có `.rich-text table { min-width: 640px }` (0,1,1) THẮNG
       `.price-table` (0,1,0). Chỉ ghi một lớp thì bảng vẫn rộng 640px trong
       khung 375px, thẻ "vé" hiện đúng nhãn cột nhưng CON SỐ nằm ngoài màn hình —
       trông như bảng giá bị mất giá. Đo bằng: getBoundingClientRect().width của <td>.
       display:block cho cả table/tbody để bố cục thẻ không rơi về hộp bảng ẩn danh. */
    .rich-text .price-table,
    .price-table {
        min-width: 0;
        display: block;
        width: 100%;
    }
    .price-table tbody { display: block; }
    .price-table thead { display: none; }
    .price-table tbody tr {
        display: block;
        margin: var(--sp-4);
        background: var(--c-white) !important;
        border: 1px solid var(--c-line);
        border-left: var(--rule) solid var(--c-accent);
        border-radius: var(--radius);
        overflow: hidden;
    }
    .price-table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-3);
        padding: .5rem .85rem;
        text-align: right;
        white-space: normal;
    }
    .price-table tbody td:first-child {
        background: var(--c-primary-mist);
        font-size: 1.1rem;
        padding-block: .7rem;
    }
    .price-table tbody td[data-label]::before {
        content: attr(data-label);
        flex: 1 1 auto;
        text-align: left;
        font-size: .875rem;
        font-weight: var(--fw-medium);
        color: var(--c-muted);
    }
}

/* ============================================================
   FORM
   ============================================================ */

.form-field { margin-bottom: var(--sp-4); }
.form-label {
    display: block;
    margin-bottom: .35rem;
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: #222222;
}
.form-label .req { color: var(--c-accent); }

.form-control,
input[type="text"].form-control,
input[type="tel"].form-control,
input[type="email"].form-control,
input[type="date"].form-control,
input[type="time"].form-control,
select.form-control,
textarea.form-control {
    display: block;
    width: 100%;
    padding: 12px 20px;
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 1.45;
    color: var(--c-ink);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control:focus {
    outline: 0;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(30, 104, 178, .14);
}
.form-control::placeholder { color: #9aa8b6; }
textarea.form-control {min-height: 100px;resize: vertical;}
select.form-control {
    appearance: none;
    padding-right: 2.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7a8a' d='M8 11.2 3.2 6.4l1.1-1.1L8 9l3.7-3.7 1.1 1.1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 15px;
}
.form-control.is-invalid { border-color: var(--c-danger); background: var(--c-danger-soft); }

.form-radio-group { display: flex; gap: var(--sp-2); }
.form-radio-group label {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    padding: .62rem .5rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-body);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.form-radio-group input { position: absolute; opacity: 0; pointer-events: none; }
.form-radio-group input:checked + span,
.form-radio-group label:has(input:checked) {
    color: #fff;
    background: var(--c-primary);
    border-color: var(--c-primary);
}

/* Ô mật ong chống spam — FrontendSpamGuard.RenderHoneypotHtml().
   Giấu bằng clip-path chứ KHÔNG bằng left:-9999px: đẩy ra ngoài màn hình làm
   phần tử vẫn chiếm chỗ về phía trái và kéo dài scrollWidth của cả trang.
   Không dùng display:none — nhiều bot bỏ qua trường ẩn hẳn, và bẫy mất tác dụng. */
.hp-field {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Thông báo kết quả gửi form.
   Tên lớp trạng thái do main.js quyết (showMessage → is-success / is-error /
   is-info). Đổi tên ở đây mà quên sửa main.js là mất hẳn thông báo. */
.booking-msg,
.form-message,
.form-msg {
    display: none;
    margin-top: var(--sp-3);
    padding: .7rem .95rem;
    font-size: var(--fs-sm);
    border-radius: var(--radius);
}
.booking-msg.is-success, .form-message.is-success, .form-msg.is-success {
    display: block; color: var(--c-success); background: var(--c-success-soft);
}
.booking-msg.is-error, .form-message.is-error, .form-msg.is-error {
    display: block; color: var(--c-danger); background: var(--c-danger-soft);
}
.booking-msg.is-info, .form-message.is-info, .form-msg.is-info {
    display: block; color: var(--c-primary); background: var(--c-info-soft);
}

.booking-submit[disabled] { opacity: .6; cursor: progress; }

/* Form đặt xe rút gọn (sidebar, cuối bài).

   FrontendSidebar.AppendInput sinh THẲNG <input class="form-control"> — KHÔNG bọc
   .form-field như form lớn ở trang chủ. Vì thế giãn cách phải đặt trên chính khung
   form (gap), không đặt trên .form-field: quy tắc .form-field bên dưới không khớp
   phần tử nào và các ô dính khít vào nhau.

   Dùng gap thay margin để không phải quan tâm thứ tự/số lượng ô: thêm trường mới
   trong C# là tự có khoảng cách. Ô mật ong .hp-field là position:absolute nên bị
   loại khỏi luồng flex — không sinh ra khoảng trống thừa. */
.booking-form-sm {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
/* Đã có gap của khung form, giữ margin-top nữa là dôi đôi khi hiện thông báo. */
.booking-form-sm .booking-msg { margin-top: 0; }
.booking-form-sm .form-field { margin-bottom: var(--sp-3); }
.booking-form-sm .form-label { font-size: 11px; }

/* ============================================================
   SIDEBAR TRANG CON — FrontendSidebar.Build
   ============================================================ */

.sidebar-box {
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
}
.sidebar-box:last-child { margin-bottom: 0; }
.sidebar-title {
    margin: 0 0 var(--sp-4);
    font-size: 1rem;
    font-weight: var(--fw-black);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--c-ink);
}
.sidebar-title::after {
    content: "";
    display: block;
    width: 30px;
    height: var(--rule);
    margin-top: .5rem;
    background: var(--c-accent);
}

/* Hộp đặt xe trong sidebar — nền tối để nổi khỏi cột nội dung. */
.sidebar-booking {
    background: linear-gradient(160deg, var(--c-primary-darker), var(--c-primary));
    border-color: transparent;
    color: rgba(255, 255, 255, .86);
}
.sidebar-booking .sidebar-title {color: #fff;font-family: "Josefin Sans", sans-serif;}
.sidebar-booking-sub { margin: -.5rem 0 var(--sp-4); font-size: var(--fs-sm); }
.sidebar-booking .form-label { color: rgba(255, 255, 255, .7); }
.sidebar-hotline {
    display: flex;
    margin-top: var(--sp-3);
    font-family: var(--font-num);
    font-size: 1.25rem;
    font-weight: var(--fw-medium);
    color: #fff;
    text-align: center;
    font-family: "Josefin Sans", sans-serif;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.sidebar-hotline:hover { color: var(--c-accent-soft); }

/* Thẻ hỗ trợ (khối nội dung) */
.support-card {
    padding: var(--sp-5);
    background: var(--c-accent-soft);
    border-radius: var(--radius-lg);
    text-align: center;
}
.support-desc { font-size: var(--fs-sm); color: var(--c-body); margin-bottom: var(--sp-3); }
.support-hotline {
    display: inline-block;
    font-family: var(--font-num);
    font-size: 1.35rem;
    font-weight: var(--fw-black);
    color: var(--c-accent);
}

/* ============================================================
   PHÂN TRANG
   ============================================================ */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
    margin: var(--sp-7) 0 0;
    padding: 0;
    list-style: none;
}
.page-item { display: block; }
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: .6rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-body);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
}
.page-link:hover { color: var(--c-primary); border-color: var(--c-primary); background: var(--c-primary-mist); }
.page-item.primary .page-link,
.page-item.active .page-link {
    color: #fff;
    background: var(--c-accent);
    border-color: var(--c-accent);
}
.page-item.disabled .page-link { opacity: .45; pointer-events: none; }

/* ============================================================
   KHỐI NỘI DUNG TRONG BÀI VIẾT
   (notice-box / incex / itinerary — do FrontendArticleFormatter sinh)
   ============================================================ */

.notice-box {
    margin-block: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-info-soft);
    border-left: var(--rule) solid var(--c-primary);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.notice-title {
    margin: 0 0 .5rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--c-primary);
}
.notice-list { margin: 0; padding-left: 1.1rem; font-size: var(--fs-sm); }
.notice-list li { margin-bottom: .3rem; }

/* "Giá đã gồm / chưa gồm" — hai cột đối xứng, dùng ở bài tuyến xe. */
.incex {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-4);
    margin-block: var(--sp-5);
}
.incex > div {
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
}
.incex-title {
    margin: 0 0 .6rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.incex > div:first-child .incex-title { color: var(--c-success); }
.incex > div:last-child .incex-title { color: var(--c-danger); }
.incex-list { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.incex-list li { position: relative; padding-left: 1.4rem; margin-bottom: .35rem; }
.incex-list li::before {
    position: absolute;
    left: 0;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .8em;
    top: .18em;
}
.incex > div:first-child .incex-list li::before { content: "\f00c"; color: var(--c-success); }
.incex > div:last-child .incex-list li::before { content: "\f00d"; color: var(--c-danger); }

/* Lịch trình theo mốc thời gian */
.itinerary { margin-block: var(--sp-5); }
.itinerary-day { margin-bottom: var(--sp-5); }
.itinerary-day-title {
    margin: 0 0 var(--sp-3);
    font-size: 1.05rem;
    font-weight: var(--fw-black);
    color: var(--c-primary);
}
.itinerary-step {
    position: relative;
    display: flex;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
}
.itinerary-step::before {
    content: "";
    position: absolute;
    left: 46px;
    top: 1.4em;
    bottom: 0;
    width: 1px;
    background: var(--c-line);
}
.itinerary-step:last-child::before { display: none; }
.itinerary-time {
    flex: 0 0 54px;
    font-family: var(--font-num);
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    color: var(--c-accent);
    text-align: right;
}
.itinerary-text { flex: 1 1 auto; font-size: var(--fs-sm); }

/* ============================================================
   THẺ SẢN PHẨM — module SẢN PHẨM đang TẮT ở site này.
   Giữ style tối thiểu để nếu ai bật lại module thì trang không vỡ.
   ============================================================ */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-5);
}
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.product-card:hover { box-shadow: var(--shadow); }
.product-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-primary-mist); }
.product-card-img,
.product-card-img-hover { width: 100%; height: 100%; object-fit: cover; }
.product-card-img-hover { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur) var(--ease); }
.product-card:hover .product-card-img-hover { opacity: 1; }
.product-card-noimg {
    display: flex; align-items: center; justify-content: center;
    height: 100%; font-size: 2rem; color: var(--c-primary-soft);
}
.product-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--sp-4); }
.product-card-brand { font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.product-card-title { margin: .2rem 0 .5rem; font-size: 1rem; font-weight: var(--fw-bold); }
.product-card-title a { color: var(--c-ink); }
.product-card-desc { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-3); }
.product-badges { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; flex-direction: column; gap: .3rem; }
.product-badge { padding: .2rem .55rem; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #fff; border-radius: var(--radius-xs); }
.product-badge-new { background: var(--c-primary); }
.product-badge-sale { background: var(--c-accent); }
.product-badge-best { background: var(--c-star); color: var(--c-ink); }
.product-badge-out { background: var(--c-muted); }
.product-price { margin-top: auto; font-family: var(--font-num); }
.product-price-now { font-size: 1.15rem; font-weight: var(--fw-black); color: var(--c-accent); }
.product-price-old { margin-left: .4em; font-size: var(--fs-sm); color: var(--c-muted); text-decoration: line-through; }
.product-price-prefix,
.product-price-unit,
.product-price-note { font-size: var(--fs-xs); color: var(--c-muted); }
.product-price-contact { font-size: 1.05rem; font-weight: var(--fw-bold); color: var(--c-primary); }

/* ============================================================
   SWIPER — ghi đè mặc định
   ============================================================ */

/* Swiper để .swiper-pagination là position:absolute qua selector
   .swiper-horizontal > .swiper-pagination-bullets — muốn đổi PHẢI viết
   đúng selector đó, không thắng specificity bằng .swiper-pagination. */

/* ⚠️ BẪY ĐÃ GẶP: Swiper 14 KHÔNG còn cắt tràn bằng rule một lớp `.swiper`.
   Nó dùng một selector HAI LỚP (thêm lúc init, ví dụ .swiper.swiper-horizontal)
   nên rule `.swiper { overflow: hidden }` của mình THUA specificity — kết quả là
   các slide ngoài khung vẫn chiếm chỗ và kéo dài scrollWidth của cả trang
   (đo được 2063px trên khung nhìn 1440px). Phải viết HAI LỚP như dưới đây.
   Đo lại bằng: document.documentElement.scrollWidth so với clientWidth. */
.swiper { overflow: hidden; }
.swiper.js-hero-swiper,
.swiper.js-fleet-swiper {overflow: hidden;height: 100%;}

/* Slider chứa thẻ có bóng đổ + hiệu ứng nâng: overflow:hidden của Swiper
   cắt mất bóng, nên phải chừa padding bao quanh. */
.swiper-cards { padding: 6px 6px 44px; margin: -6px -6px -6px; }

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-cards {
    bottom: 8px;
}
.swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: var(--c-primary);
    opacity: .28;
    transition: all var(--dur) var(--ease);
}
.swiper-pagination-bullet-active { opacity: 1; width: 26px; border-radius: 5px; background: var(--c-accent); }

.swiper-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--c-primary);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.swiper-nav-btn:hover { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
.swiper-nav-btn.swiper-button-disabled { opacity: .4; pointer-events: none; }
.swiper-nav { display: flex; gap: .45rem; }

/* Fancybox: nền tối hơn để ảnh xe nổi lên. */
.fancybox__backdrop { background: rgba(10, 22, 33, .93); }