/* ==========================================================================
   VIETTA — Giao diện mobile theo prototype v3
   (feedback/new_ui_mobile/project/VIETTA Mobile Prototype v3.dc.html)

   File này nạp 1 lần trong layouts/theme.bwt (SAU vietta-theme.css) nên áp mọi trang.
   - Toàn bộ rule bọc trong @media (max-width: 991px / 767px) → KHÔNG đổi desktop.
   - Tái dùng token có sẵn: --primary-color, --text-color, --text-secondary-color,
     --border-color, --secondary-color. Không hardcode màu đỏ mới.
   - ẢNH: giữ bo góc (border-radius + overflow:hidden ở khung), chỉ dùng object-fit
     khi khung có tỉ lệ cố định; cover cho thumbnail (khớp prototype), contain cho
     logo — KHÔNG ép width+height làm méo ảnh.
   CSS riêng từng trang nằm trong file CSS của trang đó (vietta-product.css,
   vietta-collection.css, vietta-collection-all.css, vietta-khach-hang.css).
   ========================================================================== */

@media (max-width: 991px) {

  /* ======================================================================
     1. HEADER — hamburger (trái) · logo (giữa) · icon gọi đỏ (phải), cao 56px
     ====================================================================== */
  .ega-header .header-wrap {
    height: 56px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 0;
    padding: 0 8px;
  }
  .ega-header .toggle-nav {
    width: 44px;
    height: 44px;
    margin: 0 !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 !important;
    box-sizing: border-box;
  }
  /* 3 thanh bằng nhau, giãn cách đều (đè width:86% của thanh giữa) */
  .ega-header .toggle-nav .bar,
  .ega-header .toggle-nav .bar:nth-child(2) {
    width: 22px !important;
    height: 2px;
    background: var(--text-color, #221f1c);
    border-radius: 2px;
  }
  .ega-header .header-wrap #logo { text-align: center; }
  .ega-header .logo-wrapper .logo-img { height: 30px; max-width: 168px; }
  /* chỉ còn icon gọi điện ở góc phải; ẩn nút CTA chữ để nhường chỗ logo giữa */
  .header-contact-mobile { margin-right: 0; gap: 0; }
  .header-contact-mobile .header-cta-btn--mobile { display: none !important; }
  .header-call-icon { width: 40px; height: 40px; border: 0; font-size: 1.1rem; }
  .ega-header .header-wrap .header-right { justify-content: flex-end; }

  /* ======================================================================
     2. THANH HÀNH ĐỘNG ĐÁY — Chỉ đường | Zalo | Gọi ngay (đỏ, rộng hơn)
     ====================================================================== */
  .mobile-action-bar {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0));
    background: #fff;
    border-top: 1px solid var(--border-color, #ebe5dd);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.06);
  }
  .mobile-action-bar__item {
    flex: 1 1 0;
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: var(--text-color, #221f1c);
    font-size: 0.75rem;
    font-weight: 600;
    gap: 2px;
    padding: 4px 6px;
  }
  .mobile-action-bar__item--primary {
    flex: 1.4 1 0;
    background: var(--primary-color, #DC143C);
    color: #fff;
    font-size: 0.95rem;
  }
  .mobile-action-bar__item--zalo { color: #0068ff; }
  .mobile-action-bar__icon { font-size: 1.1rem; }
  /* cao đúng 72px → chừa chỗ để thanh đáy không che nội dung */
  body:has(.mobile-action-bar) { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0)); }

  /* ======================================================================
     3. DRAWER MENU — rộng 84%, mục cấp 1 cao ≥48px
     ====================================================================== */
  #mobile-menu { width: 84%; max-width: 360px; }
  #mobile-menu .navigation .list-group-item > a { min-height: 48px; padding: 12px 16px; }
  #mobile-menu .user-menu { padding: 14px 16px; }
  #mobile-menu .mobile-menu-footer a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ======================================================================
     4. FOOTER — giữ accordion sẵn có, chỉ chỉnh kích thước cho mobile
     ====================================================================== */
  .footer-vietta .footer-cols-row { padding: 28px 0 8px; }
  .footer-vietta .footer-title { font-size: 1rem; margin-bottom: 10px; }
  .footer-vietta .follow_option .link {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ======================================================================
     5. QUY TẮC CHUNG
     ====================================================================== */
  /* Form "Nhận tư vấn": mobile ẩn các trường tùy chọn sau nút "Thêm ghi chú" */
  .rr-extra { display: none; }
  .rr-extra.is-open { display: block; }
  .rr-more-toggle {
    width: 100%;
    min-height: 44px;
    margin-bottom: 14px;
    border: 1px dashed var(--border-color, #d9d1c6);
    border-radius: 8px;
    background: #fff;
    color: var(--primary-color, #DC143C);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
  }
  /* lề ngang 20px theo prototype v3 */
  .container { padding-left: 20px; padding-right: 20px; }
  /* nút/liên kết bấm được cao tối thiểu 44px */
  .slider-overlay__btn { min-height: 44px; }
}

/* ========================================================================
   TRANG CHỦ — section theo prototype v3
   ======================================================================== */
@media (max-width: 991px) {

  /* ---- 5.1 Hero: ảnh banner FULL-WIDTH (không cắt) + chữ BÊN DƯỚI ảnh ---- */
  .vietta-hero-mobile { display: block; padding: 0 0 8px; }
  .page-homepage .section-section_slider:has(.vietta-hero-mobile) .home-slider { display: none !important; }
  .vietta-hero-mobile .container { display: flex; flex-direction: column; }
  .vietta-hero-mobile__img {
    order: 1;
    width: calc(100% + 40px);
    max-width: none;
    margin-left: -20px;
    height: auto;
    display: block;
    border-radius: 0;
    margin-bottom: 16px;
  }
  .vietta-hero-mobile__title {
    order: 2;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-color, #221f1c);
  }
  .vietta-hero-mobile__subtitle {
    order: 3;
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary-color, #4a443e);
  }
  .vietta-hero-mobile__actions { order: 4; display: flex; flex-direction: column; gap: 8px; }
  .vietta-hero-mobile__actions .vc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
  }
  /* fallback style khi trang không nạp vietta-collection.css (vd trang chủ) */
  .vietta-hero-mobile__actions .vc-btn--solid {
    background: var(--primary-color, #DC143C);
    color: #fff;
    border: 1px solid var(--primary-color, #DC143C);
  }
  .vietta-hero-mobile__actions .vc-btn--outline {
    background: #fff;
    color: var(--text-color, #221f1c);
    border: 1px solid #d9d1c6;
  }

  /* VIETTA 2026-10-02 (bản chốt trang chủ): hero gộp 1 khối chữ (.vietta-hero__copy, có H1 duy nhất) — trên mobile
     xếp DƯỚI ảnh giống thiết kế .vietta-hero-mobile cũ (khối cũ vẫn dùng ở landing nhu cầu nên giữ nguyên CSS ở trên). */
  .vietta-hero .vietta-hero__copy.slider-overlay {
    position: static;
    display: block;
    padding: 16px 20px 8px;
    pointer-events: auto;
  }
  .vietta-hero .vietta-hero__copy .slider-overlay__inner {
    max-width: 100%;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
  .vietta-hero .vietta-hero__copy .slider-overlay__eyebrow {
    margin: 0 0 6px;
    font-size: 0.78rem;
    color: var(--primary-color, #DC143C);
  }
  .vietta-hero .vietta-hero__copy .slider-overlay__title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--text-color, #221f1c);
  }
  .vietta-hero .vietta-hero__copy .slider-overlay__subtitle {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary-color, #4a443e);
  }
  .vietta-hero .vietta-hero__copy .slider-overlay__actions { flex-direction: column; gap: 8px; }
  .vietta-hero .vietta-hero__copy .slider-overlay__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
  }
  .vietta-hero .vietta-hero__copy .slider-overlay__btn--secondary {
    background: #fff;
    color: var(--text-color, #221f1c);
    border: 1px solid #d9d1c6;
  }
  .vietta-hero .vietta-hero__copy .slider-overlay__btn--secondary:hover { color: var(--text-color, #221f1c); }

  /* ---- 5.2 Cam kết: 3 cột, ẩn mục 4-5 (prototype chỉ hiện 3) ---- */
  .page-homepage .usp-bar { padding: 12px 0; }
  .page-homepage .usp-bar__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-homepage .usp-bar__item {
    flex: none;
    flex-direction: column;
    text-align: center;
    gap: 4px;
    padding: 4px 6px;
    border-left: 0;
    border-top: 0;
  }
  .page-homepage .usp-bar__item:nth-child(n + 4) { display: none; }
  /* VIETTA 2026-10-02: mục bảo hành có thẻ <a class="usp-bar__link"> bọc ngoài -> xếp dọc giống 2 mục còn lại */
  .page-homepage .usp-bar__link { flex-direction: column; text-align: center; gap: 4px; width: 100%; }
  .page-homepage .usp-bar__icon img { width: 28px; height: 28px; }
  .page-homepage .usp-bar__title { font-size: 0.78rem; text-transform: none; line-height: 1.3; }
  .page-homepage .usp-bar__desc { font-size: 0.72rem; line-height: 1.35; }

  /* ---- 5.3 Chọn xe theo nhu cầu: card NGANG, cả card là link + chevron ---- */
  .page-homepage .user-segment-col,
  .vcall .user-segment-col { margin-bottom: 10px; }
  .page-homepage .user-segment-card,
  .vcall .user-segment-card {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 8px 14px 8px 8px;
    border: 1px solid #ebe5dd;
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
  }
  .page-homepage .user-segment-card:hover { transform: none; box-shadow: none; }
  .page-homepage .user-segment-card__img-wrap,
  .vcall .user-segment-card__img-wrap { flex: 0 0 88px; width: 88px; }
  .page-homepage .user-segment-card__img-wrap > img,
  .vcall .user-segment-card__img-wrap > img {
    width: 88px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
  }
  /* badge icon nhỏ gọn, không trồi ra ngoài khung */
  .page-homepage .user-segment-card__badge,
  .vcall .user-segment-card__badge { display: none; }
  .page-homepage .user-segment-card__body,
  .vcall .user-segment-card__body { padding: 0; text-align: left; }
  .page-homepage .user-segment-card__heading,
  .vcall .user-segment-card__heading { font-size: 0.95rem; font-weight: 700; margin: 0 0 2px; }
  .page-homepage .user-segment-card__desc,
  .vcall .user-segment-card__desc { font-size: 0.83rem; margin: 0; line-height: 1.45; }
  /* biến link CTA thành lớp phủ cả card (stretched-link) + ẩn chữ, thêm chevron */
  .page-homepage .user-segment-card__cta,
  .vcall .user-segment-card__cta {
    position: absolute;
    inset: 0;
    z-index: 3;
    font-size: 0;
    margin: 0;
    padding: 0;
    color: transparent;
    background: transparent;
  }
  .page-homepage .user-segment-card__cta i,
  .vcall .user-segment-card__cta i { display: none; }
  .page-homepage .user-segment-card::after,
  .vcall .user-segment-card::after {
    content: "";
    flex: none;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid #b3aaa0;
    border-bottom: 2px solid #b3aaa0;
    transform: rotate(-45deg);
  }

  /* ---- 5.4 Mẫu xe nổi bật: rail cuộn ngang, card 82% ---- */
  .page-homepage .product-showcase-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding: 0 16px 8px;
    margin: 0 -16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-homepage .product-showcase-row::-webkit-scrollbar { display: none; }
  .page-homepage .product-showcase-col {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
    margin-bottom: 0;
  }
  .page-homepage .product-showcase-card__img-wrap img { height: auto; aspect-ratio: 1 / 1; }
  .page-homepage .product-showcase-card__btn--secondary { display: none; }
  .page-homepage .product-showcase-card__actions { justify-content: stretch; }

  /* ---- 5.5 Vì sao chọn VIETTA: danh sách dọc icon + tiêu đề + mô tả ---- */
  .page-homepage .specs-grid-row { display: block; }
  .page-homepage .specs-grid-col {
    flex: none;
    max-width: 100%;
    width: 100%;
    margin-bottom: 14px;
  }
  .page-homepage .specs-grid-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    padding: 0;
    text-align: left !important;
  }
  .page-homepage .specs-grid-item__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    font-size: 1rem;
  }
  .page-homepage .specs-grid-item__icon-img { width: 24px; height: 24px; }
  .page-homepage .specs-grid-item__title { grid-column: 2; grid-row: 1; font-size: 0.95rem; margin: 0; }
  /* mô tả chỉ hiện trên mobile */
  .page-homepage .specs-grid-item__desc { grid-column: 2; grid-row: 2; font-size: 0.86rem; line-height: 1.5; display: block; }

  /* ---- 5.6 Khách hàng nói gì: rail ngang, card 84% ---- */
  .page-homepage .testimonial-grid-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 12px;
    padding: 0 16px 8px;
    margin: 0 -16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-homepage .testimonial-grid-row::-webkit-scrollbar { display: none; }
  .page-homepage .testimonial-col {
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: start;
    margin-bottom: 0;
  }
  .page-homepage .testimonial-card__content { -webkit-line-clamp: unset; }

  /* ---- 5.8 Kiến thức: list (chữ trái, ảnh 96×72 phải) ---- */
  .page-homepage .blog-hscroll { overflow: visible; }
  .page-homepage .blog-hscroll__btn { display: none !important; }
  .page-homepage .blog-hscroll__track {
    display: block;
    overflow: visible;
    gap: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  .page-homepage .blog-hscroll__track > .col-12 {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 14px 0;
    border-top: 1px solid var(--border-color, #ebe5dd);
  }
  .page-homepage .blogwp.only-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 14px;
    align-items: center;
  }
  .page-homepage .blogwp.only-title .image-blog { grid-column: 2; grid-row: 1; order: 2; margin: 0; }
  .page-homepage .blogwp.only-title .image-blog img {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
  }
  .page-homepage .blogwp.only-title .content_blog { grid-column: 1; grid-row: 1; order: 1; display: block; min-width: 0; }
  .page-homepage .blogwp.only-title .short-summary,
  .page-homepage .blogwp.only-title .button_custome_35 { display: none !important; }
  /* VIETTA: thu gọn dòng ngày + phút đọc để list không bị cao/lộ khoảng trống */
  .page-homepage .blogwp.only-title .dated-post { margin: 0; }
  .page-homepage .blogwp.only-title .art-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    font-size: 0.72rem;
    line-height: 1.3;
  }
  .page-homepage .blogwp.only-title .art-info svg { width: 12px; height: 12px; }
  .page-homepage .blogwp.only-title .reading-time { font-size: 0.72rem; display: inline-flex; align-items: center; gap: 4px; }
  .page-homepage .blogwp.only-title h3 { font-size: 0.95rem; margin-bottom: 6px; }
  .page-homepage .blogwp.only-title .art-info { font-size: 0.78rem; }
}

/* Trang "Tất cả sản phẩm" (/collections/all) cũng dùng section_specs:
   cho "VÌ SAO CHỌN VIETTA?" thành danh sách dọc có mô tả giống trang chủ. */
@media (max-width: 991px) {
  .vcall .specs-grid-row { display: block; }
  .vcall .specs-grid-col { flex: none; max-width: 100%; width: 100%; margin-bottom: 14px; }
  .vcall .specs-grid-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    padding: 0;
    text-align: left !important;
  }
  .vcall .specs-grid-item__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    font-size: 1rem;
  }
  .vcall .specs-grid-item__icon-img { width: 24px; height: 24px; }
  .vcall .specs-grid-item__title { grid-column: 2; grid-row: 1; font-size: 0.95rem; margin: 0; }
  .vcall .specs-grid-item__desc { grid-column: 2; grid-row: 2; font-size: 0.86rem; line-height: 1.5; display: block; }
}

/* Trang chủ — Showroom: ẩn bản đồ (prototype chỉ có ảnh + địa chỉ + nút Chỉ đường),
   vừa khớp thiết kế vừa nhẹ trang hơn. */
@media (max-width: 767px) {
  .page-homepage .showroom-map-col { display: none; }
}

/* ==========================================================================
   VIETTA (prototype v3) — MOBILE DESIGN PASS
   Đồng bộ với prototype: tiêu đề CĂN TRÁI cỡ 22px màu chữ đậm (không in hoa,
   không gạch chân đỏ), card phẳng viền #ebe5dd, nhịp section đều 32px, chữ
   trong card thống nhất. Chỉ mobile.
   ========================================================================== */
@media (max-width: 991px) {

  /* ---- Tiêu đề section: căn trái, 22px, đậm, màu chữ chính ---- */
  .page-homepage .heading-bar__title,
  .vietta-coll .heading-bar__title,
  .vietta-coll__title,
  .vietta-coll__title--red,
  .section_blog .title_module_main .heading-bar__title,
  .section_blog .heading-bar__title,
  .vietta-khtt .heading-bar__title,
  .vietta-product .vietta-title,
  .vietta-product .vietta-block__title,
  .vietta-product .vietta-related-title,
  .vietta-product [data-section="product-videos"] .heading-bar__title,
  .vietta-cta-banner__title {
    text-align: left !important;
    text-transform: none !important;
    font-size: 1.32rem !important;
    line-height: 1.32 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: var(--text-color, #221f1c) !important;
    margin: 0 0 16px !important;
  }
  .vietta-coll__title--red::after { display: none !important; }

  /* phụ đề / ghi chú dưới tiêu đề: căn trái, nhỏ */
  .page-homepage .heading-bar__subtitle,
  .vietta-coll__compare-note {
    text-align: left !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: var(--text-secondary-color, #6f6861) !important;
    margin: -4px 0 16px !important;
  }

  /* ---- Hàng tiêu đề có nút "Xem tất cả"/"Tất cả" bên phải: 2 đầu, cân baseline ---- */
  .section_blog .title_module_main,
  .vietta-khtt-section .title_module_main,
  .section_customer_videos .title_module_main {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px;
    text-align: left !important;
    margin-bottom: 16px;
  }
  .section_blog .title_module_main .heading-bar__title,
  .vietta-khtt-section .title_module_main .heading-bar__title { margin: 0 !important; }
  /* nút "Xem tất cả" thành link chữ đỏ gọn, bỏ gạch chân .btn-style1 */
  .title_module_main .btn,
  .title_module_main .btn-style1,
  .heading-bar__all {
    position: static !important;
    transform: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--primary-color, #DC143C) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-transform: none !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none;
    white-space: nowrap;
  }
  .title_module_main .btn-style1::before { display: none !important; }

  /* ---- Nhịp dọc section đều hơn ---- */
  .page-homepage > .section { padding-top: 28px !important; padding-bottom: 28px !important; }
  .page-homepage > .section-section_slider,
  .page-homepage > .section-section_home_policies { padding-top: 0 !important; }
  .page-homepage > .section-section_home_policies { padding-bottom: 8px !important; }
  .vietta-coll > section { padding-top: 24px !important; padding-bottom: 24px !important; }
  /* bỏ khoảng trắng thừa đầu trang: breadcrumb + hero sát nhau, không padding */
  .vietta-coll > .bread-crumb { padding: 0 !important; margin: 0 !important; }
  .vietta-coll > .bread-crumb .breadcrumb { padding: 6px 0 !important; }
  .vietta-coll > .vietta-coll__hero-sec { padding-top: 0 !important; padding-bottom: 8px !important; margin: 0 !important; }
  .vietta-product .vietta-section { padding-top: 24px !important; padding-bottom: 24px !important; }

  /* ---- Nền section xen kẽ: xám kem #f7f3ee ---- */
  .page-homepage .section_product_showcase,
  .page-homepage .section_testimonials { background: #f7f3ee !important; }

  /* ---- Card PHẲNG: bỏ bóng, viền #ebe5dd, bo 12px ---- */
  .page-homepage .user-segment-card,
  .page-homepage .product-showcase-card,
  .page-homepage .testimonial-card,
  .vietta-coll__pcard,
  .vietta-coll__rcard,
  .vietta-coll .blog-card,
  .vietta-khtt .blog-card,
  .vietta-khtt .testimonial-card,
  .vietta-product .vietta-related__card {
    box-shadow: none !important;
  }
  .page-homepage .product-showcase-card,
  .page-homepage .testimonial-card,
  .page-homepage .blog-card,
  .vietta-coll__pcard,
  .vietta-coll__sr-card,
  .vietta-coll .blog-card,
  .vietta-coll .testimonial-card,
  .vietta-khtt .blog-card,
  .vietta-khtt .testimonial-card {
    border: 1px solid #ebe5dd !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  .page-homepage .testimonial-card { padding: 16px; }

  /* ---- Typography trong card thống nhất theo prototype ---- */
  .page-homepage .product-showcase-card__body { text-align: left; }
  .page-homepage .product-showcase-card__actions { justify-content: stretch; }
  .page-homepage .product-showcase-card__btn { min-width: 0; }
  .page-homepage .product-showcase-card__name { font-size: 1.05rem; text-transform: none; }
  .page-homepage .product-showcase-card__desc { font-size: 0.875rem; line-height: 1.5; }
  .page-homepage .testimonial-card__content { font-size: 0.9rem; line-height: 1.65; }
  .vietta-coll__pcard-name { font-size: 1.05rem; }
  .vietta-coll__pcard-desc { font-size: 0.875rem; line-height: 1.5; }
  .vietta-video-rail .blog-card__title,
  .vietta-khtt .blog-card__title { font-size: 0.9rem; }

  /* ---- Khoảng cách giữa các card trong rail ---- */
  .page-homepage .product-showcase-row,
  .page-homepage .testimonial-grid-row,
  .vietta-coll .vietta-video-rail,
  .vietta-coll__product-grid { gap: 12px !important; }
}

/* VIETTA — form + hero căn trái trên mobile (prototype) */
@media (max-width: 991px) {
  .ride-register__head { text-align: left !important; }
  .ride-register__subtitle { margin-left: 0 !important; margin-right: 0 !important; text-align: left; }
  .vietta-khtt__hero { padding: 20px 0 16px; text-align: left; }
  .vietta-khtt__title { text-align: left; font-size: 1.5rem; margin: 0 0 8px; }
  .vietta-khtt__intro { margin-left: 0; text-align: left; }
}