.hapo-faq{box-sizing:border-box;width:100%;padding:110px 32px 120px;background:#fff;color:#09090b;font-family:Manrope,sans-serif;overflow:hidden}
.hapo-faq *{box-sizing:border-box}
.hapo-faq--width-full{position:relative;left:50%;width:100vw;margin-left:-50vw}
.hapo-faq__header{margin:0 auto 58px;text-align:center}
.hapo-faq__header h2,.hapo-faq__header h3{margin:0;color:#09090b;font-size:clamp(32px,2.15vw,42px);font-weight:800;line-height:1.2;text-transform:uppercase}
.hapo-faq__header>span{display:block;width:150px;height:4px;margin:28px auto 0;background:#00c968}
.hapo-faq__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:1250px;margin:0 auto;padding:0;list-style:none}
.hapo-faq__item{position:relative;min-width:0;min-height:398px;padding:25px 24px;border:1px solid transparent;border-radius:12px;background:linear-gradient(120deg,#08bd79,#079966);color:#fff;box-shadow:0 9px 24px rgb(0 0 0 / .055);outline:none;transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,background .26s ease,border-color .26s ease}
.hapo-faq__item:nth-child(even){background:#fff;color:#111;box-shadow:0 8px 25px rgb(0 0 0 / .065)}
.hapo-faq__item h3{margin:0 0 14px;color:inherit;font-size:20px;font-weight:800;line-height:1.32}
.hapo-faq__item p{margin:0;color:inherit;font-size:15px;font-weight:500;line-height:1.48}
.hapo-faq__item:nth-child(even) p{color:#747474}
.hapo-faq__item:focus-visible{outline:3px solid #035e4e;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.hapo-faq__item:hover{z-index:1;transform:translateY(-8px);background:linear-gradient(120deg,#06c985,#058557);box-shadow:0 24px 45px rgb(0 127 83 / .25)}.hapo-faq__item:nth-child(even):hover{border-color:#19c278;background:#fafffc;box-shadow:0 22px 42px rgb(0 127 83 / .15)}}
.hapo-faq__item:focus-visible{box-shadow:0 18px 36px rgb(0 127 83 / .22)}
.hapo-faq__empty{max-width:1250px;margin:0 auto;padding:30px;border:1px dashed #b8b8b8;border-radius:12px;text-align:center}
@media(max-width:1050px){.hapo-faq__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hapo-faq__item{min-height:300px}}
@media(max-width:650px){.hapo-faq{padding:68px 18px 76px}.hapo-faq__header{margin-bottom:38px}.hapo-faq__header>span{width:110px;margin-top:20px}.hapo-faq__grid{grid-template-columns:1fr;gap:18px}.hapo-faq__item{min-height:0;padding:24px}.hapo-faq__item h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){.hapo-faq__item{transition:none}.hapo-faq__item:hover{transform:none}}

/* Background motion, 2026-10-20 (trial; Builder toggle "Background motion", default on).
   Faint Q&A line art at two corners draws in and fades (12s, staggered), a mint glow sits
   behind the title, and a light sheen sweeps across the green cards in order (11s cycle).
   CSS only; transform/opacity/stroke-dashoffset; off under reduced motion. */
.hapo-faq--motion{position:relative;isolation:isolate}
.hapo-faq--motion>.hapo-faq__header,.hapo-faq--motion>.hapo-faq__grid{position:relative;z-index:1}
.hapo-faq__decor{position:absolute;z-index:0;inset:0;pointer-events:none}
.hapo-faq__halo{position:absolute;top:20px;left:50%;width:min(760px,90vw);height:260px;border-radius:50%;background:radial-gradient(ellipse,rgb(0 201 104 / 10%) 0,rgb(0 201 104 / 3%) 45%,transparent 70%);transform:translateX(-50%);animation:hapo-faq-halo 8s ease-in-out infinite alternate}
.hapo-faq__art{position:absolute;width:250px;height:auto;fill:none;stroke:#00b765;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.14;animation:hapo-faq-float 9s ease-in-out infinite alternate}
.hapo-faq__art circle{fill:#00b765;stroke:none;animation:hapo-faq-dot 12s ease-in-out infinite}
.hapo-faq__art path{stroke-dasharray:1;stroke-dashoffset:1;animation:hapo-faq-draw 12s ease-in-out infinite}
.hapo-faq__art--question{top:70px;left:max(24px,calc(50% - 900px));transform:rotate(-10deg)}
.hapo-faq__art--bubble{right:max(24px,calc(50% - 900px));bottom:60px;animation-delay:-4.5s}
.hapo-faq__art--bubble path,.hapo-faq__art--bubble circle{animation-delay:6s}
.hapo-faq--motion .hapo-faq__item:nth-child(odd){overflow:hidden}
.hapo-faq--motion .hapo-faq__item:nth-child(odd)>*{position:relative;z-index:1}
.hapo-faq--motion .hapo-faq__item:nth-child(odd)::after{position:absolute;top:-10%;bottom:-10%;left:0;width:45%;background:linear-gradient(100deg,transparent 0,rgb(255 255 255 / 0) 20%,rgb(255 255 255 / 22%) 50%,rgb(255 255 255 / 0) 80%,transparent 100%);content:"";pointer-events:none;transform:translateX(-130%) skewX(-14deg);animation:hapo-faq-sheen 11s cubic-bezier(.4,0,.2,1) infinite}
.hapo-faq--motion .hapo-faq__item:nth-child(3)::after{animation-delay:.6s}
.hapo-faq--motion .hapo-faq__item:nth-child(5)::after{animation-delay:1.2s}
.hapo-faq--motion .hapo-faq__item:nth-child(7)::after{animation-delay:1.8s}
.hapo-faq--motion .hapo-faq__item:nth-child(9)::after{animation-delay:2.4s}
.hapo-faq--motion .hapo-faq__item:nth-child(11)::after{animation-delay:3s}
@keyframes hapo-faq-draw{0%{stroke-dashoffset:1;opacity:0}6%{opacity:1}30%,62%{stroke-dashoffset:0;opacity:1}80%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hapo-faq-dot{0%,24%{opacity:0;transform:scale(.4)}32%,62%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(1)}}
@keyframes hapo-faq-float{0%{translate:0 -6px}100%{translate:0 6px}}
@keyframes hapo-faq-halo{0%{opacity:.75}100%{opacity:1}}
@keyframes hapo-faq-sheen{0%{transform:translateX(-130%) skewX(-14deg)}9%,100%{transform:translateX(330%) skewX(-14deg)}}
.hapo-faq__art circle{transform-box:fill-box;transform-origin:center}
@media(max-width:1200px){.hapo-faq__art{display:none}}
@media(prefers-reduced-motion:reduce){.hapo-faq__halo,.hapo-faq__art,.hapo-faq__art path,.hapo-faq__art circle{animation:none}.hapo-faq__art path{stroke-dashoffset:0}.hapo-faq--motion .hapo-faq__item::after{display:none}}

/* Mobile reference correction — 2026-10-20 (Đội ngũ chuyên gia.jpg, 375×18333). Shared element: also applies to other pages on mobile. */
.hapo-faq .hapo-faq__grid>li{margin-left:0}
@media(max-width:650px){
.hapo-faq{padding:70px 16px 70px}
.hapo-faq__header{margin-bottom:32px}
.hapo-faq__header h2,.hapo-faq__header h3{font-size:26px}
.hapo-faq__header>span{width:80px;margin-top:20px}
.hapo-faq__grid{gap:16px}
.hapo-faq__item,.hapo-faq__item:nth-child(even){padding:16px;border-radius:10px;background:#fff;color:#09090b;box-shadow:0 4px 20px rgb(0 0 0 / .07)}
.hapo-faq__item h3{margin-bottom:6px;font-size:14px;line-height:1.35}
.hapo-faq__item p,.hapo-faq__item:nth-child(even) p{color:#747474;font-size:13px;line-height:1.4}
.hapo-faq--motion .hapo-faq__item:nth-child(odd)::after{display:none}
}