.hapo-working-principles{position:relative;isolation:isolate;box-sizing:border-box;min-height:820px;overflow:hidden;padding:132px 24px 120px;background:#f4fff8;color:#0b0b0d;font-family:Manrope,sans-serif}
.hapo-working-principles *{box-sizing:border-box}
.hapo-working-principles--full{left:50%;width:100vw;margin-left:-50vw}
.hapo-working-principles--container{width:100%}
.hapo-working-principles__background{position:absolute;z-index:-1;inset:0;display:block;width:100%;height:100%;pointer-events:none;animation:hapo-principles-breathe 16s ease-in-out infinite alternate}
.hapo-working-principles__background img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hapo-working-principles__inner{position:relative;width:min(1440px,100%);margin:0 auto}
.hapo-working-principles__header{text-align:center}
.hapo-working-principles .hapo-working-principles__heading{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;font-weight:800;line-height:1.22;letter-spacing:-.035em}
.hapo-working-principles__heading span:first-child{color:#00be58;font-size:50px}
.hapo-working-principles__heading span:last-child{color:#09090b;font-size:40px}
.hapo-working-principles__rule{display:block;width:150px;height:4px;margin:25px auto 36px;background:#0bc66e}
.hapo-working-principles__cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px;margin:0;padding:0;list-style:none}
.hapo-working-principles .hapo-working-principles__card{display:flex;min-width:0;min-height:370px;flex-direction:column;align-items:center;margin:0;padding:40px 15px 32px;border-radius:10px;background:#fff;box-shadow:0 12px 32px rgba(9,59,34,.075);text-align:center;animation:hapo-principles-enter .75s cubic-bezier(.2,.7,.2,1) both;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.hapo-working-principles__card:nth-child(2){animation-delay:.1s}.hapo-working-principles__card:nth-child(3){animation-delay:.2s}.hapo-working-principles__card:nth-child(4){animation-delay:.3s}.hapo-working-principles__card:nth-child(5){animation-delay:.4s}
.hapo-working-principles__number{display:grid;width:60px;height:60px;flex:none;place-items:center;border-radius:50%;background:linear-gradient(135deg,#0bd47a,#03ad61);box-shadow:0 6px 18px rgba(1,183,99,.14);color:#fff;font-size:24px;font-weight:800;line-height:1;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.hapo-working-principles .hapo-working-principles__card h3{display:flex;min-height:70px;align-items:center;justify-content:center;margin:16px 0 0;color:#0b0b0d;font-size:22px;font-weight:800;line-height:1.3;letter-spacing:-.035em}
.hapo-working-principles__card-rule{display:block;width:65px;height:2px;flex:none;margin:17px auto 25px;background:#04bb60;transition:width .45s ease}
.hapo-working-principles .hapo-working-principles__card p{margin:0;color:#727272;font-size:16px;font-weight:400;line-height:1.5}
.hapo-working-principles__empty{text-align:center}
@media(hover:hover) and (pointer:fine){.hapo-working-principles .hapo-working-principles__card:hover{transform:translateY(-8px);box-shadow:0 22px 46px rgba(9,59,34,.14)}.hapo-working-principles__card:hover .hapo-working-principles__number{transform:scale(1.08);box-shadow:0 10px 25px rgba(1,183,99,.25)}.hapo-working-principles__card:hover .hapo-working-principles__card-rule{width:90px}}
@media(max-width:1200px){.hapo-working-principles{min-height:0;padding:95px 24px 105px}.hapo-working-principles__cards{gap:18px}.hapo-working-principles .hapo-working-principles__card{min-height:350px;padding:32px 12px}.hapo-working-principles .hapo-working-principles__card h3{font-size:18px}.hapo-working-principles .hapo-working-principles__card p{font-size:14px}}
@media(max-width:900px){.hapo-working-principles__cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:660px;margin:auto}.hapo-working-principles .hapo-working-principles__card{min-height:300px;padding:32px 22px}.hapo-working-principles__heading span:first-child{font-size:42px}.hapo-working-principles__heading span:last-child{font-size:32px}}
@media(max-width:600px){.hapo-working-principles{padding:74px 18px 84px}.hapo-working-principles__heading span:first-child{font-size:36px}.hapo-working-principles__heading span:last-child{font-size:27px}.hapo-working-principles__rule{margin:23px auto 32px}.hapo-working-principles__cards{grid-template-columns:1fr;gap:16px;max-width:390px}.hapo-working-principles .hapo-working-principles__card{min-height:0;padding:29px 25px 32px}.hapo-working-principles .hapo-working-principles__card h3{min-height:0;margin-top:16px;font-size:20px}.hapo-working-principles__card-rule{margin:20px auto}.hapo-working-principles .hapo-working-principles__card p{font-size:15px}}
@keyframes hapo-principles-breathe{from{transform:scale(1)}to{transform:scale(1.035)}}
@keyframes hapo-principles-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hapo-working-principles__background,.hapo-working-principles .hapo-working-principles__card{animation:none}.hapo-working-principles .hapo-working-principles__card,.hapo-working-principles__number,.hapo-working-principles__card-rule{transition: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-working-principles .hapo-working-principles__cards>li{margin-left:0}
@media(max-width:600px){
.hapo-working-principles{padding:70px 16px 70px}
.hapo-working-principles__heading span:first-child{font-size:26px;line-height:1.35}
.hapo-working-principles__heading span:last-child{font-size:clamp(17px,5.6vw,22px);line-height:1.35}
.hapo-working-principles__rule{margin:20px auto 32px}
.hapo-working-principles__cards{gap:24px;max-width:none}
.hapo-working-principles .hapo-working-principles__card{padding:24px 24px 26px}
.hapo-working-principles__number{width:40px;height:40px;font-size:16px}
.hapo-working-principles .hapo-working-principles__card h3{margin-top:12px;font-size:16px;line-height:1.35}
.hapo-working-principles__card-rule{width:64px;margin:12px auto}
.hapo-working-principles .hapo-working-principles__card p{font-size:14px;line-height:1.35}
}