/* ===================================================================
   home.css — CHỈ trang chủ (Default.aspx nạp riêng)
   Không nhét style trang chủ vào 4 file CSS dùng chung, và ngược lại.

   Nhịp bố cục cố ý luân phiên 5 khuôn để trang không đọc như template:
     S1 slider tràn viền → S2 dải ngang → S3 bảng → S4 slider thẻ lớn
     → S5 lưới thẻ → S6 split 2 cột lệch → S7 danh sách đánh số nền tối
     → S8 lưới thẻ bài → S9 dải CTA (layout.css)
   =================================================================== */

/* ============================================================
   S1 · HERO — slider + form đặt xe nhanh
   ============================================================ */

/* overflow:hidden để dải chéo ở ::after (tràn ±2% ra hai bên) không kéo dài
   scrollWidth của cả trang. Không dựa vào body{overflow-x:hidden} để giấu:
   nó chặn được thanh cuộn nhưng scrollWidth vẫn sai và ảnh chụp toàn trang
   (Playwright, PageSpeed) vẫn rộng hơn khung nhìn. */
.hero {position: relative;overflow: hidden;background: var(--c-primary-darker);}

.hero-slider { position: relative; }
.hero-slide {
    position: relative;
    min-height: clamp(720px, 62vh, 620px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Overlay bằng CSS chứ không nhờ mô hình làm tối ảnh: đổi ảnh sau này
   thì chữ vẫn đọc được mà không phải sinh lại ảnh. */
.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
                rgba(15, 58, 92, .92) 0%,
                rgba(15, 58, 92, .74) 38%,
                rgba(15, 58, 92, .28) 68%,
                rgba(15, 58, 92, .12) 100%);
}
.hero-slide-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: clamp(660px, 62vh, 620px);
    padding-block: var(--sp-7);
}
/* Khách yêu cầu 03/09/2026: chữ và nút trong banner phải to hẳn lên.
   Khối chữ nới theo (700 -> 840px), nếu không tiêu đề cỡ mới xuống 4 dòng. */
.hero-content {max-width: 840px;color: rgba(255, 255, 255, .9);}
.hero-kicker {
    margin-bottom: var(--sp-4);
    padding: 13px 26px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: capitalize;
    color: #fff;
    background: var(--c-accent);
    border-radius: 30px;
    font-family: "Inter", sans-serif;
    display: inline-block;
}
.hero-title {
    margin: 0 0 var(--sp-4);
    /* To hơn --fs-hero một bậc: banner là chỗ duy nhất chữ được phép lớn hơn
       thang chung, cỡ này chỉ dùng ở đây nên không đưa vào tokens.css. */
    font-size: clamp(2.4rem, 5.6vw, 3.7rem);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}
.hero-desc {
    margin: 0 0 var(--sp-6);
    font-size: clamp(1.08rem, 1.5vw, 1.28rem);
    color: rgba(255, 255, 255, 1);
    max-width: 34em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Nút banner to hơn nút thường: .btn-lg không ăn vào .btn-tel (khai sau trong
   components.css nên thắng), phải viết riêng cho cả hai kiểu nút. */
.hero-actions .btn-tel,
.hero-actions .btn-outline,
.hero-actions .btn-book,
.hero-actions .btn-surface {
    padding: 1.1rem 2.3rem;
    font-size: 1.22rem;
    font-weight: var(--fw-bold);
    border-radius: var(--radius);
}
.hero-actions i { font-size: 1.05em; }

/* Số phụ ở banner — trắng trên ảnh, để nút hotline đỏ vẫn là nút nổi bật nhất.
   Không dùng .btn-surface vì .btn-tel cần font chữ số của --font-num. */
.hero-actions .btn-tel-alt {
    color: var(--c-primary-dark);
    background: var(--c-white);
    box-shadow: var(--shadow-sm);
}
.hero-actions .btn-tel-alt:hover { color: var(--c-accent); background: #fff; }

@media (max-width: 575.98px) {
    .hero-actions .btn-tel,
    .hero-actions .btn-outline,
    .hero-actions .btn-book,
    .hero-actions .btn-surface { padding: .95rem 1.6rem; font-size: 1.08rem; }
}

/* Dải chéo trắng ở đáy hero — motif hình khối chéo của nhận diện in sẵn,
   đồng thời nối hero xuống dải cam kết mà không cần đường kẻ. */
.hero::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -1px;
    height: 42px;
    background: var(--c-bg);
    transform: skewY(-1.1deg);
    transform-origin: bottom left;
    z-index: 2;
    pointer-events: none;
    display: none;
}

/* ---- Form đặt xe nhanh ----
   Nằm NGOÀI slider: Swiper nhân bản slide khi loop, form trong slide sẽ
   bị nhân bản theo và id bị trùng. */
.hero-booking {
    position: relative;
    z-index: 3;
    margin-top: -100px;
    padding-bottom: var(--sp-6);
}
.booking-panel {
    padding: var(--sp-5);
    background: var(--c-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border-top: var(--rule) solid var(--c-accent);
}
.booking-head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}
.booking-head h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    font-family: "Josefin Sans", sans-serif;
}
.booking-head h2 i {color: var(--c-accent);margin-right: .4em;display: none;}
.booking-head p {margin: 0;font-size: var(--fs-sm);}

.booking-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-3);
    align-items: end;
}
.booking-grid .bf-pickup   { grid-column: span 3; }
.booking-grid .bf-dropoff  { grid-column: span 3; }
.booking-grid .bf-cartype  { grid-column: span 2; }
.booking-grid .bf-date     { grid-column: span 2; }
.booking-grid .bf-time     { grid-column: span 2; }
.booking-grid .bf-trip     { grid-column: span 4; }
.booking-grid .bf-name     { grid-column: span 3; }
.booking-grid .bf-phone    { grid-column: span 3; }
.booking-grid .bf-submit   { grid-column: span 2; }
.booking-grid .form-field  { margin-bottom: 0; }
.booking-submit { width: 100%; }

/* Ô "tuyến khác": chỉ hiện khi chọn giá trị OTHER ở ô Điểm đến. */
.bf-other { display: none; grid-column: span 3; }
.bf-other.is-on { display: block; }

@media (max-width: 991.98px) {
    .booking-grid .bf-pickup,
    .booking-grid .bf-dropoff,
    .booking-grid .bf-name,
    .booking-grid .bf-phone,
    .booking-grid .bf-other  { grid-column: span 6; }
    .booking-grid .bf-cartype,
    .booking-grid .bf-date,
    .booking-grid .bf-time   { grid-column: span 4; }
    .booking-grid .bf-trip   { grid-column: span 6; }
    .booking-grid .bf-submit { grid-column: span 6; }
}
@media (max-width: 575.98px) {
    .hero-booking { margin-top: var(--sp-5); }
    .booking-panel { padding: var(--sp-4); }
    .booking-grid > * { grid-column: span 12 !important; }
    .hero-slide, .hero-slide-inner { min-height: 380px; }
    .hero::after { height: 26px; }
}

/* ============================================================
   S2 · DẢI CAM KẾT
   Dải ngang, KHÔNG phải thẻ card — đây là chỗ nghỉ giữa hero và
   bảng giá, càng phẳng càng tốt.
   ============================================================ */

.usp-strip { background: var(--c-primary-mist); padding-block: var(--sp-6); }
.usp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
}
.usp-item {display: block;align-items: flex-start;gap: var(--sp-3);text-align: center;}
.usp-item + .usp-item {border-left: 1px solid rgba(30, 104, 178, .16);padding-left: var(--sp-4);}
.usp-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 1.15rem;
    color: var(--c-accent);
    background: var(--c-white);
    border: 2px solid var(--c-accent);
    border-radius: 50%;
}
.usp-icon img { width: 24px; height: 24px; object-fit: contain; }
.usp-title {margin: 0 0 .16rem;font-size: 1rem;font-weight: var(--fw-black);color: var(--c-ink);margin-top: 15px;}
.usp-desc { margin: 0; font-size: var(--fs-sm); color: var(--c-body); }

@media (max-width: 991.98px) {
    .usp-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
    .usp-item + .usp-item { border-left: 0; padding-left: 0; }
}
@media (max-width: 575.98px) { 
    .usp-grid {grid-template-columns: 1fr 1fr;gap: 26px 10px;} 
    .usp-desc{
    font-size: 13px;
    line-height: 18px;
    }
}

/* ============================================================
   S3 · BẢNG GIÁ
   ============================================================ */

.price-section { background: var(--c-bg); }
.price-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}

/* ============================================================
   S4 · ĐỘI XE — slider thẻ lớn
   ============================================================ */

.fleet-section { background: var(--c-bg-soft); }

.fleet-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);
}
.fleet-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.fleet-media {position: relative;aspect-ratio: 4 / 3;overflow: hidden;background: var(--c-primary-mist);}
.fleet-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.fleet-card:hover .fleet-media img { transform: scale(1.06); }
.fleet-media-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; font-size: 2.4rem; color: var(--c-primary-soft);
}
.fleet-seats {
    position: absolute;
    right: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .28rem .7rem;
    font-family: var(--font-num);
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: #fff;
    background: var(--c-primary);
    border-radius: var(--radius-xs);
}
.fleet-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--sp-5); }
.fleet-title { margin: 0 0 .45rem; font-size: 1.15rem; font-weight: var(--fw-black); }
.fleet-title a { color: var(--c-ink); }
.fleet-card:hover .fleet-title a { color: var(--c-primary); }
.fleet-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;
}
.fleet-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px dashed var(--c-line);
}
.fleet-actions > * { flex: 1 1 0; }

/* ============================================================
   S5 · DỊCH VỤ
   ============================================================ */

.services-section { background: var(--c-bg); }
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
}
@media (max-width: 991.98px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .services-grid { grid-template-columns: 1fr; } }

/* ============================================================
   S6 · VÌ SAO CHỌN — split 2 cột lệch
   ============================================================ */

.whyus { background: var(--c-primary-mist); overflow: hidden; }
.whyus-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.whyus-media { position: relative; }
.whyus-media img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
/* Khối màu lệch phía sau ảnh — nhắc lại motif chéo mà không cần thêm ảnh. */
.whyus-media::before {
    content: "";
    position: absolute;
    left: -18px;
    bottom: -18px;
    width: 62%;
    height: 58%;
    background: var(--c-accent);
    opacity: .12;
    border-radius: var(--radius-lg);
    z-index: -1;
}

.whyus-list { margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.whyus-item { display: flex; gap: var(--sp-4); padding-block: var(--sp-4); }
.whyus-item + .whyus-item { border-top: 1px solid rgba(30, 104, 178, .16); }
.whyus-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    font-size: 25px;
    color: var(--c-primary);
    background: var(--c-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.whyus-icon img {width: 35px;height: 35px;object-fit: contain;}
.whyus-item h3 { margin: 0 0 .2rem; font-size: 1.05rem; font-weight: var(--fw-bold); }
.whyus-item p { margin: 0; font-size: var(--fs-sm); color: var(--c-body); }

@media (max-width: 991.98px) {
    .whyus-grid { grid-template-columns: 1fr; }
    .whyus-media { max-width: 420px; }
}

/* ============================================================
   S7 · QUY TRÌNH ĐẶT XE — danh sách đánh số, nền tối, full-width
   ============================================================ */

.process { position: relative; overflow: hidden; }
.process::before {
    content: "";
    position: absolute;
    inset: -30% 58% -30% -10%;
    background: rgba(255, 255, 255, .035);
    transform: skewX(-14deg);
    pointer-events: none;
}
.process > .container { position: relative; z-index: 1; }

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
    margin-top: var(--sp-6);
}
.process-step {position: relative;padding-top: 60px;}
/* Đường kẻ nối giữa các bước — chỉ desktop, và không vẽ sau bước cuối. */
.process-step::before {
    content: "";
    position: absolute;
    left: 0;
    right: -23px;
    top: 25px;
    height: 1px;
    background: rgba(255, 255, 255, .18);
}
.process-step:last-child::before { right: 50%; }
.process-step:first-child::before { left: 50%; }
.process-num {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-family: var(--font-num);
    font-size: 24px;
    font-weight: var(--fw-normal);
    color: #fff;
    background: var(--c-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 5px var(--c-primary-darker);
}
.process-step-body { text-align: center; padding-top: var(--sp-3); }
.process-step h3 {margin: 0 0 .7rem;font-size: 1.32rem;font-weight: var(--fw-bold);color: #fff;}
.process-step p { margin: 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, .72); }

@media (max-width: 767.98px) {
    .process-grid { grid-template-columns: 1fr; gap: 0; margin-top: var(--sp-5); }
    .process-step { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0 var(--sp-4) 0; text-align: left; }
    .process-step::before {
        left: 15px; right: auto; top: 44px; bottom: 0;
        width: 1px; height: auto;
    }
    .process-step:last-child::before { display: none; }
    .process-step:first-child::before { left: 15px; }
    .process-num { position: static; transform: none; flex: 0 0 auto; box-shadow: none; }
    .process-step-body { text-align: left; padding-top: 0; }
}

/* ============================================================
   S8 · CẨM NANG
   ============================================================ */

.news-section { background: var(--c-bg); }
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
}
@media (max-width: 991.98px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .news-grid { grid-template-columns: 1fr; } }