.ka-product-cat-archive .ka-cat-main,
.entry-content .ka-cat-main {
	padding-top: 8px !important;
}

.ka-custom-product-grid {
	row-gap: 18px !important;
}

.ka-custom-product-grid .ka-product-cat {
	display: none !important;
}

.ka-custom-product-grid .ka-product-title {
	min-height: 52.5px !important;
	margin: 0 0 7px !important;
	overflow: hidden !important;
}

.ka-custom-product-grid .ka-product-title a {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 3 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.25 !important;
	max-height: 3.75em !important;
}

.ka-cat-heading-text h1 {
	margin: 0 0 6px !important;
	font-size: 18px !important;
	line-height: 1.25 !important;
}

.ka-cat-heading-text .ka-cat-heading-subtitle {
	margin: 0 0 4px !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
}

.ka-cat-heading-text .ka-cat-intro p {
	margin: 0 0 4px !important;
}

/* Sequential catalogue order: search → products → models → filters → support → commitments. */
.ka-cat-sequential { max-width: 1220px; margin: 0 auto; padding: 26px 12px 42px; }
.ka-cat-sequential .ka-cat-layout { display: block; }
.ka-cat-search-section { margin: 0 0 28px; }
.ka-cat-product-search { width: 80%; max-width: 860px; margin: 0 auto; padding: 16px; border: 1px solid #e1e1e1; border-radius: 10px; background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.ka-cat-product-search label { display: block; margin-bottom: 10px; color: #b40000; font-size: 14px; font-weight: 800; }
.ka-cat-product-search > div { display: flex; gap: 9px; }
.ka-cat-product-search input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid #ddd; border-radius: 5px; font-size: 15px; }
.ka-cat-product-search button { min-width: 145px; border: 0; border-radius: 5px; background: #b40000; color: #fff; font-weight: 800; }
.ka-cat-products-section, .ka-cat-models-section, .ka-cat-filter-section, .ka-cat-support-section { margin-top: 32px; }
.ka-cat-products-section .ka-cat-heading { display: block; }
.ka-cat-products-section .ka-cat-heading h1 { font-size: 22px; }
.ka-cat-products-section .ka-cat-heading-subtitle { font-size: 18px !important; }
.ka-cat-models-section > h2, .ka-cat-filter-section .ka-filter-head { font-size: 18px; font-weight: 900; }
.ka-cat-filter-section { width: 80%; max-width: 860px; margin-left: auto; margin-right: auto; }
.ka-cat-support-section { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ka-cat-support-section .ka-zalo-card, .ka-cat-support-section .ka-why-card { margin: 0 !important; }
.ka-cat-sequential .ka-red-benefits { margin-top: 32px; }

/* The original view switcher controls desktop (3 or 4 columns). Two columns are mobile only. */
@media (max-width: 549px) {
  .ka-cat-sequential { padding: 18px 12px 30px; }
  .ka-cat-product-search, .ka-cat-filter-section { width: 100%; }
  .ka-cat-product-search > div { display: block; }
  .ka-cat-product-search input, .ka-cat-product-search button { display: block; width: 100%; }
  .ka-cat-product-search button { height: 44px; margin-top: 9px; }
  .ka-cat-support-section { grid-template-columns: 1fr; }
  .ka-cat-sequential .ka-custom-product-grid > .col,
  .ka-cat-sequential .ka-custom-product-grid.ka-view-grid-3 > .col,
  .ka-cat-sequential .ka-custom-product-grid.ka-view-grid-4 > .col,
  .ka-cat-sequential .ka-custom-product-grid.ka-view-compact > .col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .ka-cat-products-section, .ka-cat-models-section, .ka-cat-filter-section, .ka-cat-support-section { margin-top: 24px; }
}

/* Smart devices only: all KhoiAuto catalogue blocks use 95% viewport width. */
@media (max-width: 1024px) {
  .ka-cat-sequential {
    width: 95% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ka-cat-sequential .ka-cat-search-section,
  .ka-cat-sequential .ka-cat-products-section,
  .ka-cat-sequential .ka-cat-models-section,
  .ka-cat-sequential .ka-cat-filter-section,
  .ka-cat-sequential .ka-cat-support-section,
  .ka-cat-sequential .ka-red-benefits,
  .ka-cat-sequential .ka-pagination-demo {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ka-cat-sequential .ka-cat-product-search,
  .ka-cat-sequential .ka-filter-card,
  .ka-cat-sequential .ka-zalo-card,
  .ka-cat-sequential .ka-why-card {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Desktop catalogue: 3/12 sidebar + 9/12 catalogue content. */
@media (min-width: 1025px) {
  /* Search stays available on tablet/mobile, but is not part of the desktop catalogue layout. */
  .ka-cat-sequential > .ka-cat-search-section {
    display: none !important;
  }

  .ka-cat-sequential > .row.ka-cat-desktop-layout {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .ka-cat-sequential > .row.ka-cat-desktop-layout > .col.ka-cat-sidebar {
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: 25% !important;
    padding: 0 24px 0 0 !important;
  }

  .ka-cat-sequential > .row.ka-cat-desktop-layout > .col.ka-cat-content {
    flex: 0 0 75% !important;
    width: 75% !important;
    max-width: 75% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .ka-cat-sequential > .row.ka-cat-desktop-layout > .col > .col-inner {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Mobile/tablet catalogue only. Desktop continues to use the 4/12 + 8/12 layout above. */
.ka-cat-mobile-layout { display: none; }

@media (max-width: 1024px) {
  .ka-cat-sequential {
    width: 98% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 18px 0 32px !important;
  }

  .ka-cat-sequential > .ka-cat-desktop-layout {
    display: none !important;
  }

  .ka-cat-sequential > .ka-cat-mobile-layout {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Match the compact search treatment used by the single-product page. */
  .ka-cat-sequential > .ka-cat-search-section {
    display: block !important;
    width: 80% !important;
    max-width: 80% !important;
    margin: 0 auto 22px !important;
  }

  .ka-cat-sequential > .ka-cat-search-section .ka-cat-product-search {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
  }

  .ka-cat-sequential > .ka-cat-search-section label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }

  .ka-cat-sequential > .ka-cat-search-section .ka-cat-product-search > div {
    display: block !important;
    height: 100% !important;
  }

  .ka-cat-sequential > .ka-cat-search-section input[type="search"] {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 60px 0 14px !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  .ka-cat-sequential > .ka-cat-search-section button {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 0 !important;
  }

  .ka-cat-sequential > .ka-cat-search-section button::after {
    content: "⌕";
    color: #fff;
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
  }

  .ka-cat-mobile-layout > .ka-cat-products-section,
  .ka-cat-mobile-layout > .ka-cat-models-section,
  .ka-cat-mobile-layout > .ka-cat-filter-section,
  .ka-cat-mobile-layout > .ka-cat-support-section,
  .ka-cat-mobile-layout > .ka-red-benefits {
    width: 100% !important;
    max-width: none !important;
    margin: 24px 0 0 !important;
    clear: both !important;
  }

  .ka-cat-mobile-layout .ka-custom-product-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    width: calc(100% + 12px) !important;
    max-width: none !important;
    margin: 14px -6px 0 !important;
  }

  .ka-cat-mobile-layout .ka-custom-product-grid > .col {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding: 0 6px 12px !important;
  }

  .ka-cat-mobile-layout .ka-product-card { height: 100% !important; }
  .ka-cat-mobile-layout .ka-product-text { padding: 10px !important; }
  .ka-cat-mobile-layout .ka-product-title { min-height: 54px !important; margin-bottom: 8px !important; }

  /* Keep the price and Zalo CTA on separate, full-width rows. */
  .ka-cat-mobile-layout .ka-card-action-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
  }

  .ka-cat-mobile-layout .ka-card-price,
  .ka-cat-mobile-layout .ka-card-zalo {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .ka-cat-mobile-layout .ka-card-price { align-items: center !important; }
  .ka-cat-mobile-layout .ka-card-zalo { box-sizing: border-box !important; }

  .ka-cat-mobile-layout > .ka-cat-filter-section .ka-filter-card,
  .ka-cat-mobile-layout > .ka-cat-support-section .ka-zalo-card,
  .ka-cat-mobile-layout > .ka-cat-support-section .ka-why-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
    box-sizing: border-box !important;
  }

  .ka-cat-mobile-layout > .ka-cat-support-section {
    display: block !important;
  }
}