/* Bổ sung cho các phần nối API hệ thống (assets/js/ega-store.js) trên giao diện EGA */

/* Gợi ý tìm kiếm */
.ega-suggest-group + .ega-suggest-group { margin-top: var(--spacing-3); }
.ega-suggest-title { margin-bottom: var(--spacing-1); color: var(--color-neutral-300); font-size: 1.3rem; text-transform: uppercase; }
.ega-suggest-item:hover { background: var(--color-neutral-50); }
.ega-suggest-item img { width: 4.8rem; height: 4.8rem; flex: 0 0 4.8rem; object-fit: contain; border: 1px solid var(--color-neutral-50); border-radius: var(--rounded-sm); background: #fff; }
.ega-suggest-item .price { color: var(--color-price); font-weight: 600; }
.ega-suggest-item .compare-price { color: var(--color-price-compare); }
.ega-suggest-all { margin-top: var(--spacing-3); display: flex; justify-content: center; }

/* Ngăn kéo giỏ hàng đang tải */
#cart-drawer.loading .cart-left,
#cart-drawer.loading .cart-right { opacity: .5; pointer-events: none; transition: opacity .2s; }
#cart-drawer .cart-item__image img { width: 100%; height: 100%; }
#cart-drawer .custom-number-input input::-webkit-inner-spin-button,
#cart-drawer .custom-number-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#cart-drawer .custom-number-input input { -moz-appearance: textfield; }

/* Nút thêm giỏ đang xử lý (add-to-cart.js) */
.addtocart-btn.is-loading .loading-icon { display: flex; }
.addtocart-btn.is-loading .loading-icon + span { display: none; }

/* Nút so sánh đã chọn (product-actions.js) */
.add-compare.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Nội dung popup xem nhanh (Catalog/Views/Product/ProductOverview.cshtml) */
#quick-view-product .block-quickview > .row { display: grid; grid-template-columns: 1fr; gap: var(--spacing-6); }
@media (min-width: 768px) {
  #quick-view-product .block-quickview > .row { grid-template-columns: 1fr 1fr; }
}
#quick-view-product .block-quickview img { max-width: 100%; height: auto; }
#quick-view-product #thumblist_quickview { display: flex; gap: var(--spacing-2); margin-top: var(--spacing-3); overflow-x: auto; }
#quick-view-product #thumblist_quickview li { flex: 0 0 6.4rem; border: 1px solid var(--color-neutral-50); border-radius: var(--rounded-sm); overflow: hidden; }
#quick-view-product #thumblist_quickview li.active { border-color: var(--color-primary); }
#quick-view-product .d-none { display: none !important; }
#quick-view-product h2, #quick-view-product h1 { font-size: var(--font-size-h5); font-weight: 600; margin-bottom: var(--spacing-3); }
#quick-view-product .price, #quick-view-product [data-qv-price] { color: var(--color-price); font-size: 2rem; font-weight: 700; }
#quick-view-product .btn-add-cart, #quick-view-product .btn-cart {
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  padding: 1.2rem 2.4rem; border-radius: var(--rounded-button); background: var(--color-primary); color: #fff; font-weight: 600; margin-top: var(--spacing-4);
}

/* Hotline trên header (layout) */
.header-hotline { display: none; color: inherit; white-space: nowrap; }
@media (min-width: 1280px) { .header-hotline { display: flex; } }
.header-hotline__icon { width: 3.6rem; height: 3.6rem; border-radius: 9999px; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.header-hotline__text { display: flex; flex-direction: column; line-height: 1.2; }
.header-hotline__text b { color: var(--color-primary); font-size: 1.6rem; }
.header-hotline__text small { font-size: 1.1rem; opacity: .75; }

/* Logo dạng chữ khi chưa tải logo trong Admin > Thông tin website */
.logo-text { display: inline-block; max-width: 24rem; font-weight: 900; font-size: 2rem; line-height: 1.15; text-transform: uppercase; color: var(--color-primary); letter-spacing: -.01em; }
footer .logo-text { font-size: 2.2rem; }
@media (max-width: 767px) { .logo-text { font-size: 1.6rem; max-width: 16rem; } }

/* ===== Mega menu dạng cột (Menu/Default + Menu/Mobile): tiêu đề cột, dòng có biểu tượng + mô tả ngắn, thẻ chip ===== */
.mega-rich { --mega-accent: #0B2D66; --mega-chip-bg: #EEF3FB; --mega-chip-line: #CFDCF0; }
.navigation-horizontal .submenu.mega-rich { padding: 0; box-shadow: 0 2.4rem 4.8rem rgba(11, 45, 102, .12); border-top: 1px solid var(--color-neutral-50); }
.mega-rich__cols { list-style: none; margin: 0; padding: 3.2rem 0 3.6rem; display: grid; grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr)); gap: 4rem; max-height: min(64rem, calc(100vh - 14rem)); overflow-y: auto; }
.mega-rich__heading { display: block; margin: 0 0 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid #e6eaf0; font-weight: 700; font-size: 1.6rem; letter-spacing: .02em; text-transform: uppercase; color: var(--brand-navy, #0B2D66); }
a.mega-rich__heading:hover { color: var(--color-primary); }
.mega-rich__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mega-rich__item { display: flex; align-items: flex-start; gap: 1.6rem; padding: 1.2rem 1.4rem; border-radius: 1.2rem; color: #12161c; transition: background .2s; }
.mega-rich__item:hover { background: #EEF3FB; }
.mega-rich__icon { flex: 0 0 2.8rem; height: 2.8rem; display: flex; align-items: center; justify-content: center; color: var(--mega-accent, #0B2D66); margin-top: .1rem; }
.mega-rich__icon .menu-icon { width: 2.6rem; height: 2.6rem; }
.mega-rich__icon img.menu-icon { object-fit: contain; }
.mega-rich__text { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.mega-rich__name { font-weight: 700; font-size: 1.7rem; line-height: 1.3; }
.mega-rich__item:hover .mega-rich__name { color: var(--mega-accent, #0B2D66); }
.mega-rich__item:hover .mega-rich__icon { color: var(--brand-orange, #F26522); }
.mega-rich__desc { font-size: 1.4rem; line-height: 1.45; color: #5f6b7a; font-weight: 400; }
.mega-rich__tags { display: flex; flex-wrap: wrap; gap: .8rem; padding: 0 1.4rem 1rem calc(1.4rem + 2.8rem + 1.6rem); }
.mega-rich__tag { display: inline-flex; align-items: center; min-height: 3.2rem; padding: 0 1.2rem; border-radius: .8rem; border: 1px solid var(--mega-chip-line, #CFDCF0); background: var(--mega-chip-bg, #EEF3FB); color: var(--mega-accent, #0B2D66) !important; font-weight: 600; font-size: 1.3rem; transition: background .2s, border-color .2s; }
.mega-rich__tag:hover { background: var(--brand-orange-soft, #FFEFE6); border-color: var(--brand-orange, #F26522); color: var(--brand-orange-dark, #D9501A) !important; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .mega-rich__cols { gap: 2.4rem; }
  .mega-rich__name { font-size: 1.5rem; }
}

/* Trong ngăn kéo menu mobile: xếp 1 cột */
.mega-rich-mobile { --mega-accent: #0B2D66; --mega-chip-bg: #EEF3FB; --mega-chip-line: #CFDCF0; }
.mega-rich-mobile .mega-rich__heading { font-size: 1.3rem; margin-bottom: .8rem; padding-bottom: .8rem; }
.mega-rich-mobile .mega-rich__item { padding: 1rem .4rem; gap: 1.2rem; }
.mega-rich-mobile .mega-rich__name { font-size: 1.5rem; }
.mega-rich-mobile .mega-rich__desc { font-size: 1.3rem; }
.mega-rich-mobile .mega-rich__tags { padding: 0 .4rem .8rem calc(.4rem + 2.8rem + 1.2rem); }
.mega-rich-mobile .submenu__col + .submenu__col { margin-top: 1.2rem; }

/* =====================================================================
   Thanh điều hướng nhanh mobile (_Layout: nav.mbar) - Menu / Thuê xe / Gọi ngay / Zalo / Đặt lịch
   ===================================================================== */
:root { --mbar-height: 6.4rem; }
.mbar { display: none; }
@media (max-width: 767px) {
  :root { --cro-height: calc(var(--mbar-height) + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(var(--mbar-height) + env(safe-area-inset-bottom)); }
  .mbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid #eceff3; box-shadow: 0 -.6rem 2rem rgba(11, 45, 102, .08);
  }
  .mbar__inner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; height: var(--mbar-height); padding: 0 .4rem; }
  .mbar__cell { display: block; height: 100%; }
  .mbar__item {
    position: relative; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    padding: .6rem .2rem; border: 0; background: none; color: #4b5563; text-decoration: none; cursor: pointer;
    font: inherit; -webkit-tap-highlight-color: transparent; transition: color .2s;
  }
  .mbar__item:active { transform: scale(.94); }
  .mbar__icon { width: 2.6rem; height: 2.6rem; display: block; }
  .mbar__icon .menu-icon, .mbar__fab .menu-icon { display: block; width: 100%; height: 100%; stroke-width: 2; }
  .mbar__label { font-size: 1.15rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mbar__item.is-active { color: var(--color-primary); }
  .mbar__item.is-active::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 2.4rem; height: .3rem; margin-left: -1.2rem;
    border-radius: 0 0 .3rem .3rem; background: var(--color-primary);
  }
  /* Nút giữa: Gọi ngay - nổi tròn */
  .mbar__item--main { justify-content: flex-end; color: var(--color-button-primary); padding-bottom: .8rem; }
  .mbar__fab {
    position: absolute; top: -2.2rem; left: 50%; transform: translateX(-50%);
    width: 5.6rem; height: 5.6rem; padding: 1.4rem; border-radius: 50%;
    background: var(--color-button-primary); color: #fff; border: .4rem solid #fff;
    box-shadow: 0 .8rem 2rem rgba(242, 101, 34, .45);
    animation: mbar-ring 2.4s ease-in-out infinite;
  }
  @keyframes mbar-ring {
    0%, 100% { box-shadow: 0 .8rem 2rem rgba(242, 101, 34, .45), 0 0 0 0 rgba(242, 101, 34, .35); }
    50% { box-shadow: 0 .8rem 2rem rgba(242, 101, 34, .45), 0 0 0 1rem rgba(242, 101, 34, 0); }
  }
  @media (prefers-reduced-motion: reduce) { .mbar__fab { animation: none; } }
}
@media (max-width: 767px) {
  /* Nút liên hệ nổi + lên đầu trang nằm trên thanh .mbar */
  .addThis_listSharing { bottom: calc(var(--cro-height) + 6.4rem) !important; }
  .backtop { bottom: calc(var(--cro-height) + 1.2rem) !important; }
}

/* =====================================================================
   Slide danh sách (sản phẩm / xe / đánh giá): 4 thẻ mỗi lượt trên desktop, 2 thẻ trên tablet & điện thoại.
   Áp cho: .product-list (trang chủ "Cho thuê xe", sản phẩm liên quan / mua kèm / đã xem),
   .rp-slider (Catalog _RentalCarSlider: xe tương tự, cùng phân khúc, xe đã xem), .sd-quotes-slider (đánh giá khách hàng).
   Ghi đè độ rộng [&>div]:w-1/5 của template. Embla cuộn theo trang (slidesToScroll: auto) -> mỗi lượt đi trọn 4 / 2 thẻ.
   ===================================================================== */
carousel-slider .embla__viewport { overflow: hidden; }
carousel-slider .embla__container.product-list,
.rp-slider .embla__container,
.sd-quotes-slider .embla__container { display: flex; margin-left: -1.6rem !important; }
carousel-slider .embla__container.product-list > *,
.rp-slider .embla__container > .embla__slide,
.sd-quotes-slider .embla__container > .embla__slide {
  flex: 0 0 25% !important; width: 25% !important; max-width: 25% !important; min-width: 0;
  padding-left: 1.6rem !important; margin-left: 0 !important; display: flex;
}
carousel-slider .embla__container.product-list > * > *,
.rp-slider .embla__slide > .rp-car,
.sd-quotes-slider .embla__slide > .sd-quote { width: 100%; }
.rp-slider .embla__button:disabled,
.sd-quotes-slider .embla__button:disabled { opacity: 0; pointer-events: none; }
.rp-slider-section .heading-bar { position: relative; }
.rp-slider__more { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--color-primary); }
.rp-slider .rp-car__foot { flex-wrap: wrap; row-gap: .6rem; }
.rp-slider .rp-car__detail { white-space: nowrap; }
@media (max-width: 991px) {
  carousel-slider .embla__container.product-list,
  .rp-slider .embla__container,
  .sd-quotes-slider .embla__container { margin-left: -1rem !important; }
  carousel-slider .embla__container.product-list > *,
  .rp-slider .embla__container > .embla__slide,
  .sd-quotes-slider .embla__container > .embla__slide { flex-basis: 50% !important; width: 50% !important; max-width: 50% !important; padding-left: 1rem !important; }
  .sd-quotes-slider .sd-quote { flex-direction: column; }
  .sd-quotes-slider .sd-quote img { width: 100%; height: 14rem; flex-basis: auto; }
}
@media (max-width: 575px) {
  .rp-slider__more { position: static; transform: none; display: inline-block; margin-top: .4rem; }
  .rp-slider .rp-car__body { padding: 1rem; gap: .6rem; }
  .rp-slider .rp-car__name { font-size: 1.4rem; }
  .rp-slider .rp-car__current { font-size: 1.6rem; }
  .rp-slider .rp-car__meta li:nth-child(n+3), .rp-slider .rp-car__note { display: none; }
  .rp-slider .rp-car__foot { flex-direction: column; align-items: stretch; }
  .rp-slider .rp-car__book { justify-content: center; padding: .8rem 1rem; font-size: 1.3rem; }
  .rp-slider .rp-car__detail { text-align: center; font-size: 1.3rem; }
  .sd-quotes-slider .sd-quote blockquote { font-size: 1.25rem; -webkit-line-clamp: 6; }
}

/* =====================================================================
   Logo header (_LogoPartial): cỡ theo CHIỀU CAO để logo tải lên (kể cả ảnh nhiều khoảng trắng) luôn rõ, không bị co trong hàng flex
   ===================================================================== */
.header .logo-wrapper { flex: 0 0 auto; max-width: none; display: inline-flex; align-items: center; }
.header .header-logo,
.header .header-logo-transparent { height: 6.4rem; width: auto; max-width: 26rem; object-fit: contain; }
.header .logo-text { font-size: 2.6rem; }
@media (max-width: 1023px) {
  .header .header-logo, .header .header-logo-transparent { height: 5rem; max-width: 20rem; }
}
@media (max-width: 575px) {
  .header .header-logo, .header .header-logo-transparent { height: 4.4rem; max-width: 16rem; }
}

/* Không bán hàng (chỉ cho thuê xe & dịch vụ): ẩn mọi nút giỏ hàng / mua ngay còn sót ở giao diện sản phẩm thường */
.btn-add-cart, .btn-buy-now, .addtocart-btn, [data-product-add], [data-product-buy], [data-product-quantity], .cart-count, .header-cart { display: none !important; }

/* =====================================================================
   Header cố định khi cuộn (defer-scripts.js updateStickyHeader) - trượt xuống mượt
   ===================================================================== */
.header { z-index: 1000; }
.header.active {
  position: sticky; position: -webkit-sticky; top: 0;
  background-color: var(--color-header-bg, #fff);
  box-shadow: 0 .6rem 2.4rem rgba(11, 45, 102, .12) !important;
  -webkit-animation: header-slide-down .45s cubic-bezier(.22, 1, .36, 1) both;
  animation: header-slide-down .45s cubic-bezier(.22, 1, .36, 1) both;
  will-change: transform;
}
@keyframes header-slide-down {
  from { transform: translateY(-100%); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .header.active { animation: none; }
}

/* =====================================================================
   Menu chính: mục đang xem (MenuViewComponent đánh dấu .active, kể cả trang chi tiết theo breadcrumb)
   ===================================================================== */
.navigation-horizontal > .menu-item > .menu-item__link { position: relative; transition: color .2s; }
.navigation-horizontal > .menu-item > .menu-item__link:hover { color: var(--brand-orange, #F26522); }
.navigation-horizontal > .menu-item.active > .menu-item__link { color: var(--brand-orange, #F26522); background-size: 0 0; }
.navigation-horizontal > .menu-item.active > .menu-item__link::after {
  content: ""; position: absolute; left: 50%; bottom: -.6rem; width: 2.4rem; height: .3rem; border-radius: .3rem;
  background: var(--brand-orange, #F26522); transform: translateX(-50%);
}
#menu-drawer .menu-item.active > a, #menu-drawer .menu-item.active > div > a { color: var(--brand-orange, #F26522); font-weight: 700; }

/* Khoảng cách giữa nội dung và footer để slide / khối cuối trang không dính sát footer */
main { padding-bottom: 6rem; }
@media (max-width: 767px) { main { padding-bottom: 3.2rem; } }