.hapo-expert-collaboration{--hapo-collaboration-size:clamp(150px,10.78125vw,207px);position:relative;isolation:isolate;box-sizing:border-box;min-height:1219px;overflow:hidden;padding:177px 0 120px;background:#fff;color:#09090b;font-family:Manrope,sans-serif}
.hapo-expert-collaboration *{box-sizing:border-box}
.hapo-expert-collaboration--full{left:50%;width:100vw;margin-left:-50vw}
.hapo-expert-collaboration--container{--hapo-collaboration-size:clamp(120px,9vw,160px);width:100%}
.hapo-expert-collaboration__background{position:absolute;z-index:0;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.18;pointer-events:none}
.hapo-expert-collaboration__background img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.hapo-expert-collaboration::before{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.2) 38%,rgba(255,255,255,.42) 64%,#fff 100%);content:"";pointer-events:none}
.hapo-expert-collaboration__inner{position:relative;z-index:2;width:100%;margin:auto;text-align:center}
.hapo-expert-collaboration .hapo-expert-collaboration__heading{margin:0;color:#09090b;font-size:46px;font-weight:800;letter-spacing:-1.6px;line-height:1.25}
.hapo-expert-collaboration__rule{display:block;width:150px;height:4px;margin:22px auto 60px;background:#09c76b}
.hapo-expert-collaboration__flow{position:relative;isolation:isolate;display:flex;align-items:center;width:calc(var(--hapo-collaboration-size)*7.73);max-width:100%;height:var(--hapo-collaboration-size);margin:auto}
.hapo-expert-collaboration__flow::before{position:absolute;z-index:0;top:50%;left:calc((100% - 100vw)/2);width:100vw;height:2px;background:repeating-linear-gradient(90deg,#0ccc71 0 11px,transparent 11px 22px);content:"";transform:translateY(-50%)}
.hapo-expert-collaboration__steps{position:relative;z-index:1;display:flex;width:calc(var(--hapo-collaboration-size)*6.17);height:100%;flex:none;align-items:stretch;margin:0;padding:0;list-style:none}
.hapo-expert-collaboration .hapo-expert-collaboration__step{position:relative;display:flex;width:calc(var(--hapo-collaboration-size)*1.469);height:100%;flex:none;flex-direction:column;align-items:center;justify-content:center;margin:0 0 0 clamp(-90px,-4.6875vw,-65px);padding:10px calc(var(--hapo-collaboration-size)*.09) 10px calc(var(--hapo-collaboration-size)*.43);border-radius:0 999px 999px 0;background:#f7fff9 url('../images/hapo-expert-collaboration/step-shape.svg') center/100% 100% no-repeat;transition:filter .35s ease,transform .35s ease}
.hapo-expert-collaboration .hapo-expert-collaboration__step:first-child{z-index:7;width:var(--hapo-collaboration-size);margin-left:0;padding:16px;border:1px solid #a5edbc;border-radius:50%;background:#eafff1}
.hapo-expert-collaboration__step:nth-child(2){z-index:6}.hapo-expert-collaboration__step:nth-child(3){z-index:5}.hapo-expert-collaboration__step:nth-child(4){z-index:4}.hapo-expert-collaboration__step:nth-child(5){z-index:3}.hapo-expert-collaboration__step:nth-child(6){z-index:2}
.hapo-expert-collaboration__step strong{display:block;max-width:100%;color:#0b2216;font-size:calc(var(--hapo-collaboration-size)*.087);font-weight:800;line-height:1.18}
.hapo-expert-collaboration__step small{display:block;max-width:100%;margin-top:9px;color:#121d17;font-size:calc(var(--hapo-collaboration-size)*.075);line-height:1.25}
.hapo-expert-collaboration__arrow{position:relative;z-index:1;display:grid;width:calc(var(--hapo-collaboration-size)*.56);height:100%;flex:none;place-items:center;color:#00c455;font-size:calc(var(--hapo-collaboration-size)*.15);line-height:1}
.hapo-expert-collaboration__outcome{position:relative;z-index:1;display:flex;width:var(--hapo-collaboration-size);height:var(--hapo-collaboration-size);flex:none;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--hapo-collaboration-size)*.13);border-radius:50%;background:#08c461;box-shadow:0 0 0 22px rgba(32,211,118,.1),0 0 0 45px rgba(32,211,118,.055);color:#fff}
.hapo-expert-collaboration__outcome strong{color:#fff;font-size:calc(var(--hapo-collaboration-size)*.108);font-weight:800;line-height:1.2}
.hapo-expert-collaboration__outcome small{margin-top:9px;color:#fff;font-size:calc(var(--hapo-collaboration-size)*.073);line-height:1.22}
@media(hover:hover) and (pointer:fine){.hapo-expert-collaboration__step:hover{filter:brightness(1.035);transform:translateY(-4px)}}
@media(max-width:1500px){.hapo-expert-collaboration .hapo-expert-collaboration__heading{font-size:clamp(30px,3vw,46px)}.hapo-expert-collaboration__outcome{box-shadow:0 0 0 14px rgba(32,211,118,.1),0 0 0 28px rgba(32,211,118,.055)}}
@media(max-width:1180px){.hapo-expert-collaboration{min-height:0;padding:90px 24px 120px}.hapo-expert-collaboration__rule{margin-bottom:48px}.hapo-expert-collaboration__flow{width:min(800px,100%);height:auto;flex-direction:column}.hapo-expert-collaboration__flow::before{display:none}.hapo-expert-collaboration__steps{display:grid;width:100%;height:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hapo-expert-collaboration .hapo-expert-collaboration__step,.hapo-expert-collaboration .hapo-expert-collaboration__step:first-child{width:100%;height:auto;min-height:140px;margin:0;padding:20px;border:1px solid #b9eccb;border-radius:32px;background:rgba(234,255,241,.88)}.hapo-expert-collaboration__step strong{font-size:17px}.hapo-expert-collaboration__step small{font-size:13px}.hapo-expert-collaboration__arrow{width:auto;height:80px;transform:rotate(90deg);font-size:30px}.hapo-expert-collaboration__outcome{width:190px;height:190px;padding:25px}.hapo-expert-collaboration__outcome strong{font-size:20px}.hapo-expert-collaboration__outcome small{font-size:13px}}
@media(max-width:600px){.hapo-expert-collaboration{padding:72px 18px 95px}.hapo-expert-collaboration .hapo-expert-collaboration__heading{font-size:clamp(26px,7vw,34px);letter-spacing:-.8px}.hapo-expert-collaboration__rule{margin:23px auto 38px}.hapo-expert-collaboration__steps{grid-template-columns:1fr;gap:10px}.hapo-expert-collaboration .hapo-expert-collaboration__step,.hapo-expert-collaboration .hapo-expert-collaboration__step:first-child{min-height:96px;padding:16px 22px;border-radius:28px}.hapo-expert-collaboration__step strong{font-size:16px}.hapo-expert-collaboration__step small{margin-top:5px;font-size:12px}.hapo-expert-collaboration__outcome{width:170px;height:170px}.hapo-expert-collaboration__outcome strong{font-size:19px}}
@media(prefers-reduced-motion:reduce){.hapo-expert-collaboration__step{transition:none}.hapo-expert-collaboration__step:hover{transform:none}}

/* Mobile reference correction — 2026-10-20 (Đội ngũ chuyên gia.jpg, 375×18333). Measured from the supplied mobile frame; local values, not shared tokens. */
@media(max-width:600px){
.hapo-expert-collaboration{padding:72px 16px 90px}
.hapo-expert-collaboration .hapo-expert-collaboration__heading{font-size:26px;letter-spacing:-.6px;line-height:1.3}
.hapo-expert-collaboration__rule{width:80px;margin:20px auto 36px}
.hapo-expert-collaboration__steps{display:flex;flex-direction:column;align-items:center;gap:0}
.hapo-expert-collaboration .hapo-expert-collaboration__step,.hapo-expert-collaboration .hapo-expert-collaboration__step:first-child{width:206px;height:200px;min-height:0;margin:-44px 0 0;padding:58px 16px 14px;border:1px solid #a9e9c1;border-radius:103px;background:linear-gradient(180deg,#f4fdf7 0%,#e9faef 100%);box-shadow:0 10px 22px rgba(10,120,62,.05)}
.hapo-expert-collaboration .hapo-expert-collaboration__step:first-child{height:206px;margin-top:0;padding:16px;border-radius:50%;background:#eafff1}
.hapo-expert-collaboration__step strong{max-width:150px;font-size:17px;line-height:1.3}
.hapo-expert-collaboration__step small{max-width:160px;margin-top:8px;font-size:15px;line-height:1.3}
.hapo-expert-collaboration__arrow{height:auto;margin:22px 0 14px;transform:rotate(90deg);font-size:26px}
.hapo-expert-collaboration__outcome{width:207px;height:207px;padding:24px;box-shadow:0 0 0 22px rgba(32,211,118,.1),0 0 0 46px rgba(32,211,118,.055);margin-bottom:46px}
.hapo-expert-collaboration__outcome strong{font-size:22px}
.hapo-expert-collaboration__outcome small{font-size:14px}
}
/* Desktop correction — 2026-10-20 (user screenshot 1920px): the mobile pass's li margin reset removed the
   negative overlap between capsules on desktop; reset removed. Titles wrap in balanced two-line groups as in the design. */
@media(min-width:1181px){
.hapo-expert-collaboration__step strong,.hapo-expert-collaboration__step small{max-width:calc(var(--hapo-collaboration-size)*.8);text-wrap:balance}
.hapo-expert-collaboration__outcome strong{max-width:calc(var(--hapo-collaboration-size)*.62);text-wrap:balance}
}