.hapo-expert-services{position:relative;isolation:isolate;box-sizing:border-box;overflow:hidden;padding:70px 24px 120px;background:#fff;color:#101010;font-family:Manrope,sans-serif}
.hapo-expert-services *{box-sizing:border-box}
.hapo-expert-services--full{left:50%;width:100vw;margin-left:-50vw}
.hapo-expert-services--container{width:100%}
.hapo-expert-services__inner{width:min(1440px,100%);margin:auto}
.hapo-expert-services__header{text-align:center}
.hapo-expert-services__eyebrow{margin:0 0 5px;color:#0cc467;font-size:clamp(25px,2vw,38px);font-weight:800;line-height:1.2}
.hapo-expert-services .hapo-expert-services__heading{margin:0;color:#101010;font-size:clamp(29px,2.3vw,43px);font-weight:800;letter-spacing:-1px;line-height:1.25}
.hapo-expert-services__rule{display:block;width:150px;height:4px;margin:22px auto 23px;background:#12c57b}
.hapo-expert-services__description{max-width:950px;margin:0 auto;color:#3c4641;font-size:17px;line-height:1.55}
.hapo-expert-services__rows{display:grid;gap:20px;margin:54px 0 0;padding:0;list-style:none}
.hapo-expert-services__row{display:grid;grid-template-columns:1fr 1fr;min-height:500px;overflow:hidden;background:#f4f7f4}
.hapo-expert-services__visual{position:relative;min-height:500px;overflow:hidden;background:#e8f3ee}
.hapo-expert-services__photo{display:block;width:100%;height:100%;min-height:500px;object-fit:cover;object-position:center;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hapo-expert-services__photo-placeholder{position:absolute;inset:0;overflow:hidden;background:linear-gradient(140deg,#d9efe3,#f4faf7 58%,#b7dec9)}
.hapo-expert-services__photo-placeholder::before{position:absolute;inset:12% 23% 0;border-radius:50% 50% 0 0;background:linear-gradient(155deg,rgba(23,138,85,.25),rgba(4,109,64,.08));content:""}
.hapo-expert-services__photo-placeholder span{position:absolute;bottom:-10%;width:32%;height:66%;border-radius:44% 44% 0 0;background:linear-gradient(140deg,rgba(8,125,76,.2),rgba(8,125,76,.04))}
.hapo-expert-services__photo-placeholder span:nth-child(1){left:10%;transform:rotate(-8deg)}
.hapo-expert-services__photo-placeholder span:nth-child(2){left:35%;height:78%;background:linear-gradient(140deg,rgba(8,125,76,.31),rgba(8,125,76,.07))}
.hapo-expert-services__photo-placeholder span:nth-child(3){right:8%;transform:rotate(8deg)}
.hapo-expert-services__panel{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;padding:66px 52px;background:linear-gradient(115deg,#009c67,#08bc81);color:#fff;transition:background .6s ease}
.hapo-expert-services__panel::before,.hapo-expert-services__panel::after{position:absolute;z-index:-1;width:170px;height:170px;background:#94ffc0;opacity:0;content:"";pointer-events:none;will-change:transform,opacity;animation:hapo-expert-services-square 11s ease-in-out infinite}
.hapo-expert-services__panel::before{top:-80px;right:-45px}
.hapo-expert-services__panel::after{right:50px;bottom:-100px;animation-delay:-5.5s}
.hapo-expert-services__panel h3{margin:0 0 28px;color:#fff;font-size:clamp(28px,2vw,38px);font-weight:800;letter-spacing:-.5px;line-height:1.2}
.hapo-expert-services__panel ul{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.hapo-expert-services__panel li{position:relative;padding-left:26px;color:#fff;font-size:18px;line-height:1.5}
.hapo-expert-services__panel li::before{position:absolute;top:8px;left:0;width:13px;height:13px;border:3px solid rgba(255,255,255,.95);border-radius:50%;content:""}
.hapo-expert-services__panel li strong{font-weight:700}
.hapo-expert-services__row:nth-child(even) .hapo-expert-services__visual{order:2}
.hapo-expert-services__row:nth-child(even) .hapo-expert-services__panel{order:1;background:linear-gradient(115deg,#0ac087,#009b68)}
@keyframes hapo-expert-services-square{0%,100%{transform:scale(.65);opacity:0}30%{opacity:.07}60%{transform:scale(1.4);opacity:.035}82%{transform:scale(1.65);opacity:0}}
@media(hover:hover) and (pointer:fine){.hapo-expert-services__row:hover .hapo-expert-services__photo{transform:scale(1.045)}.hapo-expert-services__row:hover .hapo-expert-services__panel{background:linear-gradient(115deg,#008f5f,#09bb7e)}}
@media(max-width:1000px){.hapo-expert-services__row,.hapo-expert-services__visual,.hapo-expert-services__photo{min-height:380px}.hapo-expert-services__panel{padding:45px 30px}.hapo-expert-services__panel li{font-size:16px}}
@media(max-width:700px){.hapo-expert-services{padding:70px 16px 90px}.hapo-expert-services__eyebrow{font-size:24px}.hapo-expert-services .hapo-expert-services__heading{font-size:30px}.hapo-expert-services__description{font-size:15px}.hapo-expert-services__rows{gap:18px;margin-top:38px}.hapo-expert-services__row{grid-template-columns:1fr}.hapo-expert-services__visual,.hapo-expert-services__photo{height:250px;min-height:250px}.hapo-expert-services__row:nth-child(even) .hapo-expert-services__visual,.hapo-expert-services__row:nth-child(even) .hapo-expert-services__panel{order:initial}.hapo-expert-services__panel{min-height:230px;padding:32px 24px}.hapo-expert-services__panel h3{margin-bottom:20px;font-size:27px}.hapo-expert-services__panel ul{gap:12px}.hapo-expert-services__panel li{font-size:15px}}
@media(prefers-reduced-motion:reduce){.hapo-expert-services__panel::before,.hapo-expert-services__panel::after{animation:none;opacity:.03;transform:none;will-change:auto}.hapo-expert-services__photo{transition:none}.hapo-expert-services__row:hover .hapo-expert-services__photo{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. */
.hapo-expert-services .hapo-expert-services__rows>li,.hapo-expert-services .hapo-expert-services__panel li{margin-left:0}
@media(max-width:700px){
.hapo-expert-services{padding:70px 16px 70px}
.hapo-expert-services__eyebrow{margin-bottom:4px;font-size:20px;line-height:1.4}
.hapo-expert-services .hapo-expert-services__heading{font-size:26px;letter-spacing:-.6px;line-height:1.3}
.hapo-expert-services__rule{width:80px;margin:20px auto 16px}
.hapo-expert-services__description{font-size:15px;line-height:1.35}
.hapo-expert-services__rows{gap:24px;margin-top:32px}
.hapo-expert-services__visual,.hapo-expert-services__photo{height:auto;min-height:0;aspect-ratio:343/241}
.hapo-expert-services__panel{min-height:0;padding:28px 24px 24px}
.hapo-expert-services__panel h3{margin-bottom:16px;font-size:24px}
.hapo-expert-services__panel li{padding-left:26px;font-size:16px;line-height:1.4}
.hapo-expert-services__panel li::before{top:3px;width:16px;height:16px;border:0;background:rgba(255,255,255,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h6.5M8.5 5l3 3-3 3' fill='none' stroke='%23079a65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.hapo-expert-services__panel li strong{font-weight:500}
}