/* Shared service page layer.
   Loaded after base theme CSS and before final template-system fixes. */

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) {
  --kp-service-section-y: 72px;
  --kp-service-section-y-mobile: 56px;
  --kp-service-gap: 22px;
  --kp-service-card-radius: 20px;
  --kp-service-hero-top-desktop: 96px;
  --kp-service-hero-gap-desktop: 40px;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) .container {
  max-width: var(--kp-max, 1280px) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) .section {
  padding-block: var(--kp-service-section-y) !important;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) .service-hero {
  align-items: center !important;
  min-height: 720px !important;
  overflow: hidden !important;
  isolation: isolate;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) .service-hero-grid {
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr) !important;
  gap: var(--kp-service-hero-gap-desktop) !important;
  align-items: center !important;
  padding-top: var(--kp-service-hero-top-desktop) !important;
  padding-bottom: 72px !important;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) .service-hero h1 {
  max-width: 780px !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) .answer-capsule {
  max-width: 740px !important;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) :is(.section-title, .section-subtitle) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) .section-title {
  max-width: 900px !important;
  line-height: 1.24 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) .section-subtitle {
  max-width: 780px !important;
  line-height: 1.7 !important;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) :is(
  .grid-3,
  .grid-3-clean,
  .problem-grid,
  .cost-grid,
  .portfolio-grid,
  .testimonial-grid,
  .process-grid,
  .related-grid,
  .cross-sell-grid,
  .intent-grid
) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--kp-service-gap) !important;
  align-items: stretch !important;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) :is(.grid-4, .grid-4-clean, .answer-grid, .trust-grid) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--kp-service-gap) !important;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) .trust-grid {
  gap: 0 !important;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) :is(
  .card,
  .service-card,
  .spec-card,
  .intent-card,
  .cost-card,
  .portfolio-card,
  .testimonial-card,
  .process-card,
  .related-card
) {
  min-width: 0 !important;
  height: 100% !important;
  border-radius: var(--kp-service-card-radius) !important;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) :is(.table-wrap, .compact-table) {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

body:is(
  .page-template-page-thi-cong-san-bong-co-nhan-tao,
  .page-template-page-thi-cong-san-vuon-co-nhan-tao,
  .page-template-page-thi-cong-san-bong-ro,
  .page-template-page-thi-cong-san-pickleball,
  .page-template-page-thi-cong-duong-chay-dien-kinh,
  .page-template-page-thi-cong-to-hop-san-the-thao,
  .page-template-page-bao-tri-san-co-nhan-tao
) :is(.quote-block, .mid-cta) {
  min-width: 0 !important;
}

@media (min-width: 721px) {
  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) .service-hero {
    align-items: flex-start !important;
  }
}

@media (max-width: 1100px) {
  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) .service-hero-grid {
    grid-template-columns: 1fr !important;
  }

  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) :is(
    .grid-3,
    .grid-3-clean,
    .grid-4,
    .grid-4-clean,
    .answer-grid,
    .problem-grid,
    .cost-grid,
    .portfolio-grid,
    .testimonial-grid,
    .process-grid,
    .related-grid,
    .cross-sell-grid,
    .intent-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) .quote-block {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) .container {
    padding-inline: 24px !important;
  }

  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) .section {
    padding-block: var(--kp-service-section-y-mobile) !important;
  }

  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) .service-hero {
    min-height: auto !important;
    align-items: flex-start !important;
  }

  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) .service-hero-grid {
    padding-top: var(--kp-mobile-service-hero-top, 96px) !important;
    padding-bottom: var(--kp-mobile-hero-bottom, 42px) !important;
    gap: 22px !important;
  }

  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) .service-hero h1 {
    font-size: clamp(31px, 8.4vw, 38px) !important;
    line-height: 1.12 !important;
  }

  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) :is(
    .grid-3,
    .grid-3-clean,
    .grid-4,
    .grid-4-clean,
    .answer-grid,
    .problem-grid,
    .cost-grid,
    .portfolio-grid,
    .testimonial-grid,
    .process-grid,
    .related-grid,
    .cross-sell-grid,
    .intent-grid,
    .warranty-box,
    .hero-panel-grid
  ) {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) .trust-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) :is(.hero-actions, .mid-cta, .quote-block) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body:is(
    .page-template-page-thi-cong-san-bong-co-nhan-tao,
    .page-template-page-thi-cong-san-vuon-co-nhan-tao,
    .page-template-page-thi-cong-san-bong-ro,
    .page-template-page-thi-cong-san-pickleball,
    .page-template-page-thi-cong-duong-chay-dien-kinh,
    .page-template-page-thi-cong-to-hop-san-the-thao,
    .page-template-page-bao-tri-san-co-nhan-tao
  ) :is(.hero-actions .btn, .mid-cta .btn, .quote-block .btn) {
    width: 100% !important;
    min-height: 48px !important;
  }
}