/* v346G — Move Home Main services line-art down into the lower white space.
   Fix: v345G placed the Vietnam landmark drawing too high behind the title/cards.
   This override keeps the drawing full viewport width, but anchors it below the cards. */

.home-page .home-service-routes{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #fff !important;
  padding-bottom: clamp(320px, 43vw, 760px) !important;
}

.home-page .home-service-routes::before{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(12px, 2.4vw, 42px) !important;
  width: 100vw !important;
  height: clamp(270px, 38vw, 690px) !important;
  transform: translateX(-50%) !important;
  background-image: url('/assets/img/home-service-routes-vietnam-line-bg-v345G.png') !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 100% auto !important;
  opacity: .72 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.home-page .home-service-routes::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: clamp(285px, 40vw, 720px) !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 24%, rgba(255,255,255,.46) 100%) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.home-page .home-service-routes > .container{
  position: relative !important;
  z-index: 1 !important;
}

.home-page .home-service-routes .home-route-grid{
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 980px){
  .home-page .home-service-routes{
    padding-bottom: clamp(250px, 47vw, 500px) !important;
  }

  .home-page .home-service-routes::before{
    bottom: clamp(10px, 2vw, 24px) !important;
    height: clamp(230px, 40vw, 430px) !important;
    background-size: 100% auto !important;
    opacity: .66 !important;
  }

  .home-page .home-service-routes::after{
    height: clamp(245px, 42vw, 460px) !important;
  }
}

@media (max-width: 640px){
  .home-page .home-service-routes{
    padding-bottom: clamp(145px, 42vw, 235px) !important;
  }

  .home-page .home-service-routes::before{
    bottom: 4px !important;
    height: clamp(135px, 38vw, 215px) !important;
    background-size: 100% auto !important;
    opacity: .56 !important;
  }

  .home-page .home-service-routes::after{
    height: clamp(145px, 42vw, 235px) !important;
  }
}