.hapo-expert-roster{position:relative;isolation:isolate;box-sizing:border-box;overflow:hidden;padding:116px 24px 145px;background:#fff;color:#101010;font-family:Manrope,sans-serif}
.hapo-expert-roster *{box-sizing:border-box}
.hapo-expert-roster--full{left:50%;width:100vw;margin-left:-50vw}
.hapo-expert-roster--container{width:100%}
.hapo-expert-roster::before,.hapo-expert-roster::after{position:absolute;z-index:0;width:240px;height:240px;background:#1cdb76;opacity:0;content:"";pointer-events:none;will-change:transform,opacity;animation:hapo-expert-roster-square 12s ease-in-out infinite}
.hapo-expert-roster::before{top:50px;right:-100px}
.hapo-expert-roster::after{bottom:50px;left:-100px;animation-delay:-6s}
.hapo-expert-roster__inner{position:relative;z-index:1;width:min(1360px,100%);margin:auto}
@keyframes hapo-expert-roster-square{0%,100%{transform:scale(.7);opacity:0}30%{opacity:.035}60%{transform:scale(1.45);opacity:.02}82%{transform:scale(1.7);opacity:0}}
.hapo-expert-roster .hapo-expert-roster__heading{margin:0;color:#101010;text-align:center;font-size:clamp(27px,2.1vw,39px);font-weight:800;line-height:1.25;letter-spacing:-1px}
.hapo-expert-roster__rule{display:block;width:150px;height:4px;margin:24px auto 30px;background:#15c47b}
.hapo-expert-roster__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.hapo-expert-roster__item{min-width:0}
.hapo-expert-roster__card{position:relative;isolation:isolate;height:430px;overflow:hidden;border-radius:12px;background:linear-gradient(135deg,#a3dac3 0%,#67c494 65%,#48b982 100%);box-shadow:0 3px 18px rgba(24,100,57,.1);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.hapo-expert-roster__card summary{position:absolute;z-index:2;inset:0;display:block;cursor:pointer;list-style:none;outline:none}
.hapo-expert-roster__card summary::-webkit-details-marker{display:none}
.hapo-expert-roster__card summary::marker{content:""}
.hapo-expert-roster__card summary:focus-visible{outline:3px solid #0a9f5c;outline-offset:-4px;border-radius:12px}
.hapo-expert-roster__art{position:absolute;inset:0;overflow:hidden}
.hapo-expert-roster__art i{position:absolute;display:block;width:75%;height:90%;background:rgba(255,255,255,.14);clip-path:polygon(0 0,100% 55%,0 100%)}
.hapo-expert-roster__art i:first-child{top:2%;left:-18%;transform:rotate(17deg)}
.hapo-expert-roster__art i:last-child{top:-13%;right:-42%;transform:rotate(-21deg)}
.hapo-expert-roster__portrait{position:absolute;bottom:42px;left:50%;width:auto;height:calc(100% - 52px);max-width:100%;object-fit:contain;object-position:bottom;transform:translateX(-50%);transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.hapo-expert-roster__caption{position:absolute;right:12px;bottom:12px;left:12px;display:flex;min-height:62px;flex-direction:column;align-items:center;justify-content:center;padding:8px 10px;border-radius:8px;background:#fff;text-align:center;box-shadow:0 6px 20px rgba(0,76,42,.13)}
.hapo-expert-roster__caption strong{color:#04aa5c;font-size:16px;font-weight:800;line-height:1.3}
.hapo-expert-roster__caption small{color:#737a76;font-size:11px;line-height:1.3}
.hapo-expert-roster__bio{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;align-items:flex-start;padding:30px 24px;background:linear-gradient(145deg,#02af6b,#047348);color:#fff;opacity:0;transform:scale(.965);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.hapo-expert-roster__bio strong{font-size:21px;font-weight:800;line-height:1.3}
.hapo-expert-roster__bio>span:not(.hapo-expert-roster__close){margin-top:5px;font-size:13px;line-height:1.35}
.hapo-expert-roster__bio p{margin:35px 0 0;color:#fff;font-size:14px;line-height:1.6}
.hapo-expert-roster__close{position:absolute;right:20px;bottom:16px;font-size:26px;line-height:1}
.hapo-expert-roster__card[open] .hapo-expert-roster__bio{opacity:1;transform:scale(1)}
.hapo-expert-roster__card[open] .hapo-expert-roster__portrait,.hapo-expert-roster__card[open] .hapo-expert-roster__caption,.hapo-expert-roster__card[open] .hapo-expert-roster__art{opacity:0}
@media(hover:hover) and (pointer:fine){.hapo-expert-roster__card:hover{transform:translateY(-7px);box-shadow:0 20px 40px rgba(12,96,58,.18)}.hapo-expert-roster__card:not([open]):hover .hapo-expert-roster__portrait{transform:translateX(-50%) scale(1.035)}}
@media(max-width:1000px){.hapo-expert-roster__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.hapo-expert-roster__card{height:390px}}
@media(max-width:700px){.hapo-expert-roster{padding:70px 16px 90px}.hapo-expert-roster__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hapo-expert-roster__card{height:clamp(260px,68vw,360px)}.hapo-expert-roster__portrait{bottom:42px;height:calc(100% - 47px)}.hapo-expert-roster__caption{right:7px;bottom:7px;left:7px;min-height:54px}.hapo-expert-roster__caption strong{font-size:13px}.hapo-expert-roster__caption small{font-size:9px}.hapo-expert-roster__bio{padding:18px 15px}.hapo-expert-roster__bio strong{font-size:16px}.hapo-expert-roster__bio>span:not(.hapo-expert-roster__close){font-size:11px}.hapo-expert-roster__bio p{margin-top:18px;font-size:11px}}
@media(max-width:390px){.hapo-expert-roster__grid{grid-template-columns:1fr 1fr}.hapo-expert-roster__card{height:270px}}
@media(prefers-reduced-motion:reduce){.hapo-expert-roster::before,.hapo-expert-roster::after{animation:none;opacity:.02;transform:none;will-change:auto}.hapo-expert-roster__card,.hapo-expert-roster__portrait,.hapo-expert-roster__bio{transition:none!important}}

/* 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-roster .hapo-expert-roster__grid>li{margin-left:0}
@media(max-width:700px){
.hapo-expert-roster{padding:80px 16px 80px}
.hapo-expert-roster::before,.hapo-expert-roster::after{display:none}
.hapo-expert-roster .hapo-expert-roster__heading{font-size:26px;letter-spacing:-.6px;line-height:1.3}
.hapo-expert-roster__rule{width:80px;margin:20px auto 32px}
.hapo-expert-roster__grid{gap:16px}
.hapo-expert-roster__card{height:auto;aspect-ratio:163/218}
.hapo-expert-roster__portrait{bottom:44px;height:calc(100% - 56px)}
.hapo-expert-roster__caption{right:6px;bottom:6px;left:6px;min-height:0;padding:7px 6px}
.hapo-expert-roster__caption strong{font-size:14px}
.hapo-expert-roster__caption small{font-size:12px;line-height:1.2}
}
@media(max-width:390px){.hapo-expert-roster__card{height:auto}}
@media(max-width:340px){.hapo-expert-roster__grid{gap:10px}.hapo-expert-roster__caption small{font-size:10px}}