/**
 * Live BN2-safe overlay — does NOT replace index-BN2ZtJyR.css.
 * v2: fill center banner (kill 420px cap gap) + denser right cards + tighter col height.
 */

/* —— Header logo enlarge —— */
@media (min-width: 1024px) {
  #site-sticky-header {
    --header-nav-logo-size: clamp(4.75rem, 3.8vw + 2.6rem, 5.75rem) !important;
  }
}
@media (min-width: 1536px) {
  #site-sticky-header {
    --header-nav-logo-size: 6.5rem !important;
  }
}

/* —— Utility / contact text —— */
#site-sticky-header [aria-label="Cam kết dịch vụ"] ul,
#site-sticky-header [aria-label="Cam kết dịch vụ"] li,
#site-sticky-header [aria-label="Cam kết dịch vụ"] span {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}
#site-sticky-header [aria-label="Cam kết dịch vụ"] svg {
  width: 1rem !important;
  height: 1rem !important;
}
#site-sticky-header .text-\[12px\],
#site-sticky-header [class*="text-[12px]"] {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

/*
 * Hero column height: JS sets --home-hero-col-h:645px (overshoots category content).
 * Override the three columns directly so Danh mục / banner / cards share a tighter height.
 * 11 L1 ≈ header+rows+footer ~560–575; leave slight room without big empty gaps.
 */
@media (min-width: 1024px) {
  .grid:has([data-home-category-sidebar]) > [data-home-category-sidebar],
  .grid:has([data-home-category-sidebar]) > div:nth-child(2),
  .grid:has([data-home-category-sidebar]) > div:nth-child(3) {
    height: 560px !important;
    min-height: 560px !important;
    max-height: 560px !important;
  }
}

/* —— Center banner: beat HeroSection embedded lg:h-[420px] max-h-[420px] —— */
@media (min-width: 1024px) {
  .grid:has([data-home-category-sidebar]) > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
  }
  .grid:has([data-home-category-sidebar]) > div:nth-child(2) > section,
  .grid:has([data-home-category-sidebar]) > div:nth-child(2) > * {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
  }
}

/* —— Right cards denser (beat BN2 1.25rem titles) —— */
#main-content [class*="lg:grid-rows-4"] {
  gap: 0.25rem !important;
  padding: 0.25rem !important;
}
#main-content [class*="lg:grid-rows-4"] button[class*="min-h-[84px]"] {
  min-height: 0 !important;
  padding: 0.3rem 0.55rem !important;
}
#main-content [class*="lg:grid-rows-4"] button[class*="min-h-[84px]"] p:first-child {
  font-size: 0.5625rem !important; /* 9px */
  line-height: 0.75rem !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
}
#main-content [class*="lg:grid-rows-4"] button[class*="min-h-[84px]"] p:last-of-type {
  margin-top: 0.05rem !important;
  font-size: 0.75rem !important; /* 12px */
  line-height: 1.05rem !important;
  font-weight: 600 !important;
}
#main-content [class*="lg:grid-rows-4"] button[class*="min-h-[84px]"] svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
}

/* Left category nav: don’t leave a flex void above “Xem tất cả” */
@media (min-width: 1024px) {
  [data-home-category-sidebar] > div.relative.flex {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
  }
  [data-home-category-sidebar] nav {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: space-between !important;
  }
  [data-home-category-sidebar] nav > * {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* —— Cert strip thumbs —— */
section:has(#home-dealer-certs-title) ul[aria-label="Danh sách chứng nhận đại lý"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  overflow-x: auto !important;
  align-items: stretch !important;
}
section:has(#home-dealer-certs-title) ul[aria-label="Danh sách chứng nhận đại lý"] > li {
  flex: 0 0 calc((100% - 4rem) / 5) !important;
  width: calc((100% - 4rem) / 5) !important;
  max-width: calc((100% - 4rem) / 5) !important;
  min-width: 0 !important;
}
@media (max-width: 767px) {
  section:has(#home-dealer-certs-title) ul[aria-label="Danh sách chứng nhận đại lý"] > li {
    flex-basis: calc((100% - 0.75rem) / 2) !important;
    width: calc((100% - 0.75rem) / 2) !important;
    max-width: 11rem !important;
  }
}
section:has(#home-dealer-certs-title) ul[aria-label="Danh sách chứng nhận đại lý"] > li > button {
  width: 100% !important;
  max-width: 100% !important;
}
section:has(#home-dealer-certs-title) ul[aria-label="Danh sách chứng nhận đại lý"] > li > button > div {
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  max-height: 8.5rem !important;
}
section:has(#home-dealer-certs-title) ul[aria-label="Danh sách chứng nhận đại lý"] > li img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 8.5rem !important;
  object-fit: contain !important;
}