/* ===================================================================
   Trang chủ — Nhà xe Bích Trâm 86
   Dùng biến màu/khoảng cách khai báo ở site.css
   =================================================================== */

/* ------------------------- Khung section chung ------------------------- */
.section { padding-block: var(--section-pad); }
.section-soft { background: var(--c-bg-soft); }

.section-heading { text-align: center; max-width: 720px; margin: 0 auto 36px; }

.section-title {
    position: relative;
    text-transform: uppercase;
    color: var(--c-primary);
    padding-bottom: 14px;
    margin-bottom: .5rem;
    font-size: 32px;
    font-weight: 700;
}

/* Gạch chân 2 màu: xanh navy + đỏ */
.section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 72px;
    height: 5px;
    background: linear-gradient(90deg, var(--c-primary) 50%, var(--c-accent) 50%);
    border-radius: 3px;
}

.section-desc { color: var(--c-muted); }
.section-desc p:last-child { margin-bottom: 0; }

/* ------------------------- Hero (slider ảnh) ------------------------- */
.hero { position: relative; background: var(--c-bg-soft); }

/* Ảnh banner hiển thị trọn bề ngang, chiều cao theo tỉ lệ gốc của ảnh */
.hero-slide { width: 100%; height: auto; }

.hero .swiper-pagination-bullet { background: #ffffff; opacity: .6; }
.hero .swiper-pagination-bullet-active { background: var(--c-accent); opacity: 1; }

/* ------------------------- Form đặt xe nhanh ------------------------- */
.booking { margin-top: -60px; position: relative; z-index: 5; padding-bottom: var(--section-pad); }

.booking-card {
    background: var(--c-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
}

.booking-head { margin-bottom: 20px; }
.booking-title {color: var(--c-primary);text-transform: uppercase;margin-bottom: .25em;font-size: 23px;}
.booking-sub {color: var(--c-muted);margin-bottom: 0;font-size: 14px;}

.booking-form .form-label { font-size: .8125rem; font-weight: 600; color: var(--c-text); margin-bottom: 6px; }
.booking-form .form-label i { color: var(--c-accent); margin-right: 4px; }
.booking-form .req { color: var(--c-accent); }

.booking-form .form-control {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    height: 47px;
    font-size: 14px;
}

.booking-form .form-control:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(1, 24, 59, .08);
}

.booking-submit {width: 100%;justify-content: center;border: 0;height: 47px;}

.booking-msg { margin: 16px 0 0; font-size: .875rem; font-weight: 600; }
.booking-msg:empty { margin: 0; }
.booking-msg.is-success { color: #157347; }
.booking-msg.is-error { color: var(--c-accent); }
.booking-msg.is-info { color: var(--c-muted); }

.booking-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--c-border);
    font-size: .875rem;
    color: var(--c-muted);
}

.booking-notes li { display: inline-flex; align-items: center; gap: 8px; }
.booking-notes i { color: #157347; }

/* ------------------------- Tuyến đường ------------------------- */
.route-card {
    height: 100%;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
}

.route-badge {
    display: inline-block;
    padding: 7px 20px;
    border-radius: 57px 0;
    background: var(--c-accent);
    color: #ffffff;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.route-title {color: var(--c-primary);margin: 12px 0 20px;font-size: 20px;text-align: right;margin-top: -33px;}

/* Sơ đồ chặng: các chấm nối nhau bằng đường kẻ ngang */
.route-stops {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
    margin-bottom: 20px;
    padding: 0;
    list-style: none;
    margin-top: 50px;
}

.route-stop {
    position: relative;
    flex: 1 1 0;
    /* min-width: 74px; */
    text-align: center;
}

/* Đường nối giữa 2 chấm liền kề */
.route-stop:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 28px;
    left: 19px;
    width: 100%;
    background: repeating-linear-gradient(90deg, var(--c-border) 0 6px, transparent 6px 10px);
    height: 2px;
}

.route-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-bg-soft);
    color: var(--c-accent);
    font-size: 20px;
}

.route-stop:first-child .route-dot,
.route-stop:last-child .route-dot { background: var(--c-accent); color: #ffffff; }
.route-stop:first-child .route-dot{background-color: var(--c-primary);}
.route-stop-name {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.3;
}

/* Bảng giờ chạy (HTML soạn trong Admin) */
.route-meta {
    background: var(--c-bg-soft);
    border-radius: var(--radius-sm);
    padding: 14px 8px;
    margin-bottom: 20px;
    font-size: .875rem;
    color: var(--c-muted);
}

.route-meta p { margin-bottom: 2px; }
.route-meta strong {color: var(--c-accent);font-size: 16px;}
.route-cta {justify-content: center;width: 100%;height: 47px;}

/* ------------------------- Điểm đón - trả khách ------------------------- */
.pickup-card {
    height: 100%;
    background: var(--c-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.pickup-thumb { aspect-ratio: 4 / 3; overflow: hidden; }

.pickup-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.pickup-card:hover .pickup-thumb img { transform: scale(1.06); }

.pickup-body {padding: 20px 15px;}
.pickup-title { font-size: 1rem; color: var(--c-primary); margin-bottom: .35em; }

.pickup-address {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    font-size: .8125rem;
    color: var(--c-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.pickup-address i {color: var(--c-accent);margin-top: 4px;margin-right: 8px;}

/* Nút điều hướng Swiper dùng chung */
.pickups .swiper,
.gallery .swiper {padding-bottom: 0;}

.swiper-button-prev,
.swiper-button-next { color: var(--c-primary); }
.swiper-button-prev::after,
.swiper-button-next::after { font-size: 1.25rem; font-weight: 700; }
.swiper-pagination-bullet-active { background: var(--c-accent); }

/* ------------------------- Vì sao chọn ------------------------- */
.reason-card {
    height: 100%;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
    background-color: #c400150d;
}

.reason-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.reason-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--c-accent);
    font-size: 2rem;
    /* border: 2px solid var(--c-accent); */
}

.reason-icon img {max-width: 53px;max-height: 53px;object-fit: contain;}
.reason-title { font-size: 1.0625rem; color: var(--c-primary); }
.reason-desc { color: var(--c-muted); font-size: .875rem; }
.reason-desc p:last-child { margin-bottom: 0; }

/* ------------------------- Hình ảnh xe ------------------------- */
.gallery-item {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.08); }

.gallery-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 24, 59, .45);
    color: #ffffff;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity .25s ease;
}

.gallery-item:hover .gallery-zoom { opacity: 1; }

/* ------------------------- Đánh giá khách hàng ------------------------- */
.testimonials .swiper { padding-bottom: 44px; }

.testimonial-card {
    height: 100%;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 24px;
}

.testimonial-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

.testimonial-avatar {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.25rem;
}

.testimonial-name { font-size: 1rem; margin-bottom: 2px; color: var(--c-primary); }
.testimonial-place { font-size: .8125rem; color: var(--c-muted); margin-bottom: 4px; }
.testimonial-stars { margin-bottom: 0; color: #f6a609; font-size: .8125rem; }
.testimonial-stars .is-off { color: var(--c-border); }
.testimonial-text { color: var(--c-muted); font-size: .9375rem; }
.testimonial-text p:last-child { margin-bottom: 0; }

/* ------------------------- FAQ + Bạn cần đặt vé ------------------------- */
.faq-accordion .accordion-item {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
}
.faq-accordion .accordion-item:last-child{margin-bottom: 0;}
.faq-accordion .accordion-button {
    font-weight: 600;
    color: var(--c-primary);
    background: var(--c-bg);
    box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) { color: var(--c-accent); background: var(--c-bg); }
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: var(--c-border); }
.faq-accordion .accordion-body { color: var(--c-muted); font-size: .9375rem; }
.faq-accordion .accordion-body p:last-child { margin-bottom: 0; }

.help-card {
    height: 100%;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 17px;
    text-align: center;
    box-shadow: var(--shadow);
    position: relative;
    padding-right: 40%;
}
.help-card .btn-book, .help-card .btn-zalo{font-size: 13px;font-weight: 500;}
.help-image {height: 270px;width: auto;margin: 0 auto 16px;position: absolute;bottom: -15px;right: 10px;}
.help-title {color: var(--c-primary);font-size: 24px;margin-top: 39px;}
.help-desc { color: var(--c-muted); font-size: .9375rem; }
.help-desc p:last-child { margin-bottom: 0; }

.help-hotline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 19px 0 18px;
    color: var(--c-accent);
    font-size: 1.5rem;
    font-weight: 800;
}

.help-hotline:hover { color: var(--c-accent-dark); }
.help-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }