.hapo-delivery-process {
  --hapo-process-green: #00c14a;
  --hapo-process-orange: #ffa51f;
  --hapo-process-ink: #09090b;
  --hapo-process-muted: #737373;
  width: 100%;
  padding: 80px 32px;
  background: #f8f8f8;
  color: var(--hapo-process-ink);
  font-family: "Manrope", sans-serif;
}

.hapo-delivery-process--width-full {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
}

.hapo-delivery-process__header {
  max-width: 1200px;
  margin: 0 auto 60px;
  text-align: center;
}

.hapo-delivery-process__eyebrow {
  display: inline-flex;
  margin: 0 0 22px;
  padding: 5px 28px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 18%, #fff 82%, rgba(255,255,255,0));
  color: var(--hapo-process-green);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
}

.hapo-delivery-process__header h2,
.hapo-delivery-process__header h3 {
  margin: 0;
  font-size: clamp(32px, 2.35vw, 46px);
  font-weight: 800;
  letter-spacing: -1.3px;
  line-height: 1.2;
  text-transform: uppercase;
}

.hapo-delivery-process__header > span {
  display: block;
  width: 150px;
  height: 4px;
  margin: 26px auto 24px;
  background: var(--hapo-process-green);
}

.hapo-delivery-process__description {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.hapo-delivery-process__layout {
  display: grid;
  max-width: 1360px;
  grid-template-columns: minmax(420px, 650px) minmax(0, 1fr);
  gap: 78px;
  align-items: stretch;
  margin: 0 auto;
}

.hapo-delivery-process__media {
  min-height: 720px;
  overflow: hidden;
}

.hapo-delivery-process__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hapo-delivery-process__steps {
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hapo-process-step;
}

.hapo-delivery-process__step {
  position: relative;
  display: grid;
  grid-template-columns: 42px 66px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  counter-increment: hapo-process-step;
}

.hapo-delivery-process__step:not(:last-child)::before {
  position: absolute;
  top: calc(50% + 24px);
  bottom: calc(-50% + 24px);
  left: 20px;
  border-left: 1px dashed var(--hapo-process-orange);
  content: "";
}

.hapo-delivery-process__number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--hapo-process-orange);
  color: #fff;
  font-size: 21px;
  font-weight: 700;
}

.hapo-delivery-process__number::before {
  content: counter(hapo-process-step);
}

.hapo-delivery-process__icon {
  display: block;
  width: 65px;
  height: 65px;
  object-fit: contain;
}

.hapo-delivery-process__copy h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.35px;
  line-height: 1.3;
}

.hapo-delivery-process__copy p {
  margin: 0;
  color: var(--hapo-process-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.hapo-delivery-process__empty {
  padding: 24px;
  border: 1px dashed #aaa;
  color: var(--hapo-process-muted);
}

@media (max-width: 1100px) {
  .hapo-delivery-process__layout {
    grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr);
    gap: 42px;
  }
}

@media (max-width: 767px) {
  .hapo-delivery-process {
    padding: 64px 16px;
  }

  .hapo-delivery-process__header {
    margin-bottom: 36px;
  }

  .hapo-delivery-process__eyebrow {
    margin-bottom: 16px;
    padding-inline: 14px;
    font-size: 14px;
  }

  .hapo-delivery-process__header h2,
  .hapo-delivery-process__header h3 {
    font-size: 28px;
    letter-spacing: -.8px;
  }

  .hapo-delivery-process__header > span {
    width: 110px;
    height: 3px;
    margin: 18px auto;
  }

  .hapo-delivery-process__description {
    font-size: 15px;
  }

  .hapo-delivery-process__layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hapo-delivery-process__media {
    min-height: 0;
    aspect-ratio: 4 / 4.4;
  }

  .hapo-delivery-process__steps {
    grid-template-rows: none;
    gap: 26px;
  }

  .hapo-delivery-process__step {
    grid-template-columns: 38px 54px minmax(0, 1fr);
    gap: 14px;
  }

  .hapo-delivery-process__step:not(:last-child)::before {
    top: calc(50% + 21px);
    bottom: calc(-50% + 21px);
    left: 18px;
  }

  .hapo-delivery-process__number {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .hapo-delivery-process__icon {
    width: 54px;
    height: 54px;
  }

  .hapo-delivery-process__copy h3 {
    font-size: 18px;
  }

  .hapo-delivery-process__copy p {
    font-size: 14px;
  }
}
.hapo-delivery-process--seo .hapo-delivery-process__layout{align-items:start}
.hapo-delivery-process--seo .hapo-delivery-process__media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.hapo-delivery-process--seo .hapo-delivery-process__media>*{width:100%;height:auto;aspect-ratio:300/384;object-fit:cover;border-radius:0}
.hapo-delivery-process--seo .hapo-delivery-process__media>*:last-child{grid-column:1/-1;aspect-ratio:630/383}
.hapo-delivery-process__placeholder{display:grid;place-items:center;min-height:200px;background:linear-gradient(135deg,#e7f4ee,#d1e9dd);color:#38775b;font-weight:700}
.hapo-delivery-process--seo .hapo-delivery-process__icon{display:none}
.hapo-delivery-process--seo{background:#fff}
.hapo-delivery-process--seo .hapo-delivery-process__eyebrow{padding:8px 30px;border-radius:999px;background:#f2fbf5}
.hapo-delivery-process--seo .hapo-delivery-process__header h2,.hapo-delivery-process--seo .hapo-delivery-process__header h3{color:#09090b}
.hapo-delivery-process--seo .hapo-delivery-process__layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:60px;align-items:start}
.hapo-delivery-process--seo .hapo-delivery-process__steps{grid-column:1;grid-row:1;grid-template-rows:none;gap:20px}
.hapo-delivery-process--seo .hapo-delivery-process__step{grid-template-columns:76px minmax(0,1fr);gap:24px;align-items:start;min-height:90px}
.hapo-delivery-process--seo .hapo-delivery-process__copy{padding-top:4px}
.hapo-delivery-process--seo .hapo-delivery-process__media{grid-column:2;grid-row:1;min-height:0}
.hapo-delivery-process--seo .hapo-delivery-process__number{width:76px;height:30px;border-radius:999px;background:var(--hapo-process-green);font-size:16px;line-height:1;white-space:nowrap}
.hapo-delivery-process--seo .hapo-delivery-process__number::before{content:"Bước " counter(hapo-process-step)}
.hapo-delivery-process--seo .hapo-delivery-process__step:not(:last-child)::before{top:15px;bottom:auto;left:37px;width:2px;height:calc(100% + 20px);border:0;background:var(--hapo-process-green)}
.hapo-delivery-process--seo .hapo-delivery-process__copy h3{font-size:18px;color:var(--hapo-process-green)}
@media(max-width:767px){.hapo-delivery-process--seo .hapo-delivery-process__layout{grid-template-columns:1fr;gap:26px}.hapo-delivery-process--seo .hapo-delivery-process__steps{grid-column:1;grid-row:1}.hapo-delivery-process--seo .hapo-delivery-process__media{grid-column:1;grid-row:2;aspect-ratio:auto;gap:12px}.hapo-delivery-process--seo .hapo-delivery-process__step{grid-template-columns:68px minmax(0,1fr);gap:14px;min-height:0}.hapo-delivery-process--seo .hapo-delivery-process__number{width:68px;height:28px;font-size:13px}.hapo-delivery-process--seo .hapo-delivery-process__step:not(:last-child)::before{top:14px;left:33px;height:calc(100% + 26px)}.hapo-delivery-process--seo .hapo-delivery-process__eyebrow{padding:7px 16px}}

/* Mobile, from the supplied 375px design (2026-10-20): white pill eyebrow, two-line title,
   full-bleed 375x211 photo, and a timeline of 32px numbers with a dashed connector and the icon
   above each step title. Default variant only; the --seo variant keeps its own layout. */
@media (max-width: 767px) {
  .hapo-delivery-process:not(.hapo-delivery-process--seo) { padding: 60px 16px 84px; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__header { margin: 0 -4px 60px; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__eyebrow { margin: 0 0 12px; padding: 5px 24px; border-radius: 999px; background: #fff; color: #3589fd; font-size: 15px; font-weight: 500; line-height: 20px; text-transform: none; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__header h2,
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__header h3 { max-width: 300px; margin: 0 auto; font-size: 25.5px; letter-spacing: 0; line-height: 34px; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__header > span { width: 80px; height: 4px; margin: 13px auto 9px; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__description { color: #080808; font-size: 15.5px; line-height: 22px; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__layout { gap: 35px; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__media { margin: 0 -16px; aspect-ratio: 375 / 211; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__steps { gap: 27px; padding-left: 4px; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step { grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: start; margin: 0; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__number { grid-column: 1; grid-row: 1 / span 2; width: 32px; height: 32px; font-size: 16px; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__icon { grid-column: 2; grid-row: 1; width: 40px; height: 40px; margin-top: 2px; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__copy { grid-column: 2; grid-row: 2; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__copy h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: 0; line-height: 1.35; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__copy p { color: #717171; font-size: 14px; line-height: 18px; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:not(:last-child)::before { top: 33px; bottom: -28px; left: 15px; width: 2px; border: 0; background: repeating-linear-gradient(to bottom, rgba(255, 165, 31, .5) 0 8px, transparent 8px 16px); }
}

/* Background motion, 2026-10-20 (trial; revert this block to remove).
   A light travels down the timeline connector step by step (1.2s per step, 7.2s cycle).
   Each number sends out a ring and its icon lifts slightly as the light arrives, and a faint
   mint glow drifts behind the steps. CSS only, default variant only, off under reduced motion. */
.hapo-delivery-process:not(.hapo-delivery-process--seo) { position: relative; isolation: isolate; overflow: hidden; }
.hapo-delivery-process:not(.hapo-delivery-process--seo) > * { position: relative; z-index: 1; }
.hapo-delivery-process:not(.hapo-delivery-process--seo)::before {
  position: absolute; z-index: 0; top: 30%; right: 4%; width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 193, 74, .075) 0, rgba(0, 193, 74, .03) 40%, rgba(0, 193, 74, 0) 70%);
  content: ""; pointer-events: none; animation: hapo-process-glow 26s ease-in-out infinite alternate;
}
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:not(:last-child)::after {
  position: absolute; top: calc(50% + 21px); bottom: calc(-50% + 21px); left: 19.5px; width: 3px; border-radius: 3px;
  background: linear-gradient(to bottom, rgba(255, 165, 31, 0), #ffa51f 50%, rgba(255, 165, 31, 0)) 0 -56px / 100% 56px no-repeat;
  content: ""; pointer-events: none; animation: hapo-process-flow 7.2s linear infinite;
}
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__number::after {
  position: absolute; inset: 0; border: 2px solid #ffa51f; border-radius: inherit; content: ""; opacity: 0;
  pointer-events: none; animation: hapo-process-ring 7.2s ease-out infinite;
}
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__icon { animation: hapo-process-lift 7.2s ease-out infinite; }
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(2) > * , .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(2)::after { animation-delay: 1.2s; }
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(3) > * , .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(3)::after { animation-delay: 2.4s; }
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(4) > * , .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(4)::after { animation-delay: 3.6s; }
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(5) > * , .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(5)::after { animation-delay: 4.8s; }
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(6) > * , .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(6)::after { animation-delay: 6s; }
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(2) .hapo-delivery-process__number::after { animation-delay: 1.2s; }
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(3) .hapo-delivery-process__number::after { animation-delay: 2.4s; }
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(4) .hapo-delivery-process__number::after { animation-delay: 3.6s; }
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(5) .hapo-delivery-process__number::after { animation-delay: 4.8s; }
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:nth-child(6) .hapo-delivery-process__number::after { animation-delay: 6s; }
@keyframes hapo-process-flow { 0% { background-position: 0 -56px; } 16.667%, 100% { background-position: 0 calc(100% + 56px); } }
@keyframes hapo-process-ring { 0% { opacity: .55; transform: scale(1); } 12% { opacity: 0; transform: scale(1.75); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes hapo-process-lift { 0% { transform: translateY(0); } 4% { transform: translateY(-3px); } 11%, 100% { transform: translateY(0); } }
@keyframes hapo-process-glow { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-90px, 70px) scale(1.12); } }
@media (max-width: 767px) {
  .hapo-delivery-process:not(.hapo-delivery-process--seo)::before { top: 42%; right: -45%; width: 520px; height: 520px; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:not(:last-child)::after { top: 32px; bottom: -27px; left: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hapo-delivery-process:not(.hapo-delivery-process--seo)::before,
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__icon { animation: none; }
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step::after,
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__number::after { display: none; animation: none; }
}

/* Continuous connector, 2026-10-20 (from the owner's desktop crop): a 2px orange dashed line
   (9px dash, 12px gap) running from the bottom of each number to the top of the next one. */
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step { margin: 0; }
.hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:not(:last-child)::before {
  top: calc(50% + 21px); bottom: calc(-50% + 21px); left: 20px; width: 2px; border: 0;
  background: repeating-linear-gradient(to bottom, #f5a845 0 9px, transparent 9px 21px);
}
@media (max-width: 767px) {
  .hapo-delivery-process:not(.hapo-delivery-process--seo) .hapo-delivery-process__step:not(:last-child)::before { top: 32px; bottom: -27px; left: 15px; background: repeating-linear-gradient(to bottom, rgba(255, 165, 31, .5) 0 8px, transparent 8px 16px); }
}

/* Extra ambient layer, 2026-10-20 (trial): a warm glow drifting opposite the mint one, plus a
   very faint green dot grid that fades toward the edges and pans slowly. Transform-only. */
.hapo-delivery-process:not(.hapo-delivery-process--seo)::after {
  position: absolute; z-index: 0; inset: -80px; content: ""; pointer-events: none;
  background:
    radial-gradient(circle at 16% 82%, rgba(255, 165, 31, .09) 0, rgba(255, 165, 31, .035) 18%, rgba(255, 165, 31, 0) 34%),
    radial-gradient(circle, rgba(0, 150, 60, .13) 1.2px, transparent 1.6px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 62% 50%, #000 0, rgba(0, 0, 0, .55) 45%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 55% at 62% 50%, #000 0, rgba(0, 0, 0, .55) 45%, transparent 80%);
  animation: hapo-process-drift 32s ease-in-out infinite alternate;
}
@keyframes hapo-process-drift { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(52px, -39px, 0); } }
@media (prefers-reduced-motion: reduce) {
  .hapo-delivery-process:not(.hapo-delivery-process--seo)::after { animation: none; }
}