.hapo-service-hero {
  --hapo-hero-accent: #00c14a;
  --hapo-hero-text: #09090b;
  --hapo-hero-subtext: #727272;
  --hapo-hero-cta-start: #0cd885;
  --hapo-hero-cta-end: #08945b;
  position: relative;
  isolation: isolate;
  min-height: 1080px;
  width: 100%;
  overflow: hidden;
  padding: 60px 24px 0;
  background: #fff;
}

.hapo-service-hero--width-full {
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
}

.hapo-service-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 1280px);
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0 auto;
  text-align: center;
}

.hapo-service-hero__title,
.hapo-service-hero__subheading,
.hapo-service-hero__description,
.hapo-service-hero__cta {
  font-family: "Manrope", sans-serif;
}

.hapo-service-hero__title {
  max-width: 1280px;
  margin: 0;
  color: var(--hapo-hero-text);
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -1.62px;
  line-height: 82px;
  text-transform: uppercase;
}

.hapo-service-hero__title strong {
  color: var(--hapo-hero-accent);
  font-size: 72px;
}

.hapo-service-hero__subheading {
  display: flex;
  flex-direction: column;
  color: var(--hapo-hero-text);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.32px;
  line-height: 1.5;
  text-transform: uppercase;
}

.hapo-service-hero__subheading strong {
  color: var(--hapo-hero-accent);
  font-weight: inherit;
}

.hapo-service-hero__divider {
  display: block;
  width: 145px;
  height: 4px;
  margin-top: 0;
}

.hapo-service-hero__description {
  width: min(100%, 1100px);
  margin: 0;
  color: var(--hapo-hero-subtext);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.5;
}

.hapo-service-hero__cta {
  min-height: 54px;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--hapo-hero-cta-start) 0 89.35%, var(--hapo-hero-cta-end) 100%);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.hapo-service-hero__cta--inactive {
  cursor: not-allowed;
}

.hapo-service-hero__zalo-icon {
  display: block;
  width: 30px;
  height: 30px;
}

.hapo-service-hero__visual {
  position: absolute;
  z-index: 0;
  bottom: -188px;
  left: 50%;
  width: 2276px;
  transform: translateX(-50%);
  pointer-events: none;
}

.hapo-service-hero__visual picture,
.hapo-service-hero__team-image {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1440px) {
  .hapo-service-hero {
    min-height: min(1080px, 56.25vw);
  }

  .hapo-service-hero__title {
    font-size: clamp(40px, 3.75vw, 54px);
    line-height: 1.28;
  }

  .hapo-service-hero__title strong {
    font-size: clamp(54px, 5vw, 72px);
  }

  .hapo-service-hero__subheading {
    font-size: clamp(24px, 2.22vw, 32px);
  }

  .hapo-service-hero__description {
    font-size: clamp(16px, 1.39vw, 20px);
  }

  .hapo-service-hero__visual {
    width: 118.54vw;
  }
}

@media (max-width: 767px) {
  .hapo-service-hero {
    min-height: clamp(640px, 185.6vw, 696px);
    padding: 60px 16px 0;
  }

  .hapo-service-hero__content {
    gap: 24px;
  }

  .hapo-service-hero__title {
    width: 100%;
    font-size: clamp(22px, 6.4vw, 24px);
    letter-spacing: -0.72px;
    line-height: 1.32;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .hapo-service-hero__title strong {
    font-size: clamp(28px, 8vw, 30px);
  }

  .hapo-service-hero__subheading {
    width: 100%;
    font-size: clamp(14px, 4vw, 16px);
    letter-spacing: -0.2px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .hapo-service-hero__divider {
    width: 110px;
    height: auto;
  }

  .hapo-service-hero__description {
    max-width: 34rem;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1.5;
  }

  .hapo-service-hero__cta {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 14px;
  }

  .hapo-service-hero__zalo-icon {
    width: 24px;
    height: 24px;
  }

  .hapo-service-hero__visual {
    bottom: -37px;
    width: clamp(929px, 257.87vw, 967px);
    height: clamp(276px, 76.53vw, 287px);
  }

  .hapo-service-hero__team-image {
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}
.hapo-service-hero__actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.hapo-service-hero--seo-page{min-height:800px;padding:165px 24px 80px;background:#007a50 url('../images/hapo-seo-page/hero-background.jpg') center/cover no-repeat;color:#fff}
.hapo-service-hero--seo-page .hapo-service-hero__content{width:min(1440px,100%);align-items:flex-start;text-align:left;gap:18px}
.hapo-service-hero--seo-page .hapo-service-hero__title{max-width:650px;color:#fff;font-size:72px;line-height:1.08}
.hapo-service-hero--seo-page .hapo-service-hero__title strong{color:#fff;font-size:inherit}
.hapo-service-hero--seo-page .hapo-service-hero__subheading{font-size:30px;color:#fff;line-height:1.3}
.hapo-service-hero--seo-page .hapo-service-hero__subheading strong{color:#fff}
.hapo-service-hero--seo-page .hapo-service-hero__divider{display:none}
.hapo-service-hero--seo-page .hapo-service-hero__description{width:min(620px,100%);font-size:18px;color:#fff}
.hapo-service-hero--seo-page .hapo-service-hero__actions{justify-content:flex-start}
.hapo-service-hero--seo-page .hapo-service-hero__cta{background:#ffdd00;color:#111;padding:12px 25px}
.hapo-service-hero--seo-page .hapo-button--secondary{min-height:54px;padding:12px 25px;border-radius:100px;background:#fff;color:#008453;font-size:18px;font-weight:700}
.hapo-service-hero--seo-page .hapo-service-hero__visual{left:auto;right:max(8%,calc((100vw - 1440px)/2));bottom:0;width:500px;transform:none}
.hapo-service-hero--seo-page .hapo-service-hero__team-image{width:100%;height:auto}
@media(max-width:1100px){.hapo-service-hero--seo-page .hapo-service-hero__visual{right:1%;width:42%}.hapo-service-hero--seo-page .hapo-service-hero__content{width:100%}.hapo-service-hero--seo-page .hapo-service-hero__description{max-width:52%}}
@media(max-width:767px){.hapo-service-hero--seo-page{min-height:690px;padding:65px 16px 0;background-position:center}.hapo-service-hero--seo-page .hapo-service-hero__content{align-items:flex-start;gap:12px}.hapo-service-hero--seo-page .hapo-service-hero__title{font-size:30px;line-height:1.18}.hapo-service-hero--seo-page .hapo-service-hero__title strong{font-size:30px}.hapo-service-hero--seo-page .hapo-service-hero__subheading{font-size:18px}.hapo-service-hero--seo-page .hapo-service-hero__description{max-width:100%;font-size:13px}.hapo-service-hero--seo-page .hapo-service-hero__actions{gap:8px}.hapo-service-hero--seo-page .hapo-service-hero__cta,.hapo-service-hero--seo-page .hapo-button--secondary{min-height:42px;padding:9px 13px;font-size:12px}.hapo-service-hero--seo-page .hapo-service-hero__visual{left:auto;right:0;bottom:0;width:82%;height:auto}.hapo-service-hero--seo-page .hapo-service-hero__team-image{height:auto;object-fit:contain}}

/* Ambient background, 2026-10-20 (trial; revert this block, the markup and the SVG to remove).
   Layers: drifting mint aurora wash, an inline "ecosystem" network on both sides with signals
   travelling along a few links, and a soft breathing glow behind the team cut-out.
   Decorative only; it fades in after first paint, animates transform/opacity/stroke-dashoffset,
   and stops under reduced motion. The network is hidden on mobile. */
.hapo-service-hero__ambient {
  position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none;
  opacity: 0; animation: hapo-hero-ambient-in 1.2s ease-out .4s forwards;
}
.hapo-service-hero__aurora {
  position: absolute; border-radius: 50%; will-change: transform;
}
.hapo-service-hero__aurora--left {
  top: -32%; left: -14%; width: 62vw; max-width: 1180px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(28, 202, 103, .12) 0, rgba(28, 202, 103, .05) 38%, rgba(28, 202, 103, 0) 66%);
  animation: hapo-hero-aurora-a 26s ease-in-out infinite alternate;
}
.hapo-service-hero__aurora--right {
  top: -26%; right: -16%; width: 56vw; max-width: 1060px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(12, 216, 133, .10) 0, rgba(12, 216, 133, .04) 40%, rgba(12, 216, 133, 0) 68%);
  animation: hapo-hero-aurora-b 32s ease-in-out infinite alternate;
}
.hapo-service-hero__team-glow {
  position: absolute; bottom: -12%; left: 50%; width: 92%; height: 58%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(28, 202, 103, .16) 0, rgba(28, 202, 103, .06) 45%, rgba(28, 202, 103, 0) 72%);
  transform: translateX(-50%); animation: hapo-hero-glow 9s ease-in-out infinite alternate;
}
.hapo-hero-net {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 18%, transparent 36%, transparent 64%, #000 82%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 18%, transparent 36%, transparent 64%, #000 82%, #000 100%);
}
.hapo-hero-net__side { animation: hapo-hero-net-float 18s ease-in-out infinite alternate; }
.hapo-hero-net__side--right { animation-duration: 22s; animation-direction: alternate-reverse; }
.hapo-hero-net__links line { stroke: rgba(0, 170, 70, .26); stroke-width: 1.3; stroke-dasharray: 4 6; }
.hapo-hero-net__nodes circle { fill: #fff; stroke: rgba(0, 170, 70, .55); stroke-width: 1.5; }
.hapo-hero-net__signal {
  fill: none; stroke: #1cca67; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 9 140; stroke-dashoffset: 9; opacity: .85;
  animation: hapo-hero-signal 10.8s linear infinite;
}
.hapo-hero-net__ping {
  fill: rgba(28, 202, 103, .18); stroke: rgba(28, 202, 103, .5); stroke-width: 1;
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: hapo-hero-ping 10.8s ease-out infinite;
}
.hapo-hero-net__signal--2, .hapo-hero-net__ping--2 { animation-delay: 1.8s; }
.hapo-hero-net__signal--3, .hapo-hero-net__ping--3 { animation-delay: 3.6s; }
.hapo-hero-net__signal--4, .hapo-hero-net__ping--4 { animation-delay: 5.4s; }
.hapo-hero-net__signal--5, .hapo-hero-net__ping--5 { animation-delay: 7.2s; }
.hapo-hero-net__signal--6, .hapo-hero-net__ping--6 { animation-delay: 9s; }
@keyframes hapo-hero-ambient-in { to { opacity: 1; } }
@keyframes hapo-hero-aurora-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(7vw, 5vh, 0) scale(1.1); } }
@keyframes hapo-hero-aurora-b { 0% { transform: translate3d(0, 0, 0) scale(1.05); } 100% { transform: translate3d(-6vw, 7vh, 0) scale(.95); } }
@keyframes hapo-hero-glow { 0% { opacity: .7; } 100% { opacity: 1; } }
@keyframes hapo-hero-net-float { 0% { transform: translate3d(0, -6px, 0); } 100% { transform: translate3d(0, 8px, 0); } }
@keyframes hapo-hero-signal { 0% { stroke-dashoffset: 9; } 14%, 100% { stroke-dashoffset: -100; } }
@keyframes hapo-hero-ping { 0%, 12% { opacity: 0; transform: scale(.4); } 14% { opacity: 1; transform: scale(.6); } 24%, 100% { opacity: 0; transform: scale(1.6); } }
@media (max-width: 767px) {
  .hapo-hero-net { display: none; }
  .hapo-service-hero__aurora--left { top: -12%; left: -40%; width: 120vw; }
  .hapo-service-hero__aurora--right { top: 6%; right: -50%; width: 110vw; }
  .hapo-service-hero__team-glow { bottom: -6%; width: 140%; height: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .hapo-service-hero__ambient { opacity: 1; animation: none; }
  .hapo-service-hero__aurora, .hapo-service-hero__team-glow, .hapo-hero-net__side { animation: none; }
  .hapo-hero-net__signal, .hapo-hero-net__ping { display: none; animation: none; }
}