/* ===== Trang Về chúng tôi ===== */
.ab-title{margin-bottom:24px;font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;line-height:1.1}
.main section{margin-bottom:60px}

/* giới thiệu */
.ab-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center}
.ab-hero__tag{display:inline-block;padding:2px 16px;font-weight:800;background:#fff;border:3px solid var(--ink);border-radius:999px;transform:rotate(-2deg)}
.ab-hero__title{margin:12px 0;font-size:clamp(2.4rem,7vw,4rem);font-weight:800;line-height:1.1}
.ab-hero__brand{display:inline-block;padding:0 16px;color:#fff;background:var(--pink);border:4px solid var(--ink);border-radius:20px;box-shadow:var(--shadow);transform:rotate(-2deg)}
.ab-hero__desc{max-width:42ch}
.ab-hero__art{position:relative;display:grid;place-items:center;width:100%;max-width:340px;aspect-ratio:1;margin:auto;background:radial-gradient(circle,#fff6c4 0 55%,var(--sun) 56%);border:var(--line);border-radius:50%;box-shadow:var(--shadow)}
.ab-hero__mascot{font-size:min(30vw,8rem);animation:ab-bounce 1.6s ease-in-out infinite}
.ab-float{position:absolute;font-size:2.2rem;line-height:1;animation:ab-float 3s ease-in-out infinite alternate}
.ab-float--1{top:2%;left:6%}
.ab-float--2{top:6%;right:2%;animation-delay:-1s}
.ab-float--3{bottom:8%;left:0;animation-delay:-2s}
.ab-float--4{right:4%;bottom:2%;animation-delay:-.5s}
@media(max-width:760px){.ab-hero{grid-template-columns:1fr;text-align:center}.ab-hero__desc{margin-inline:auto}}

/* cô giáo */
.teacher__card{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:center;padding:30px;background:linear-gradient(135deg,#fff,#ffe3ef);border:var(--line);border-radius:32px;box-shadow:var(--shadow)}
.teacher__side{text-align:center}
.teacher__frame{position:relative;width:240px;height:240px;margin:14px auto 22px}
.teacher__frame::before{content:'';position:absolute;inset:-14px;background:conic-gradient(#ff5fa2,#ffd23f,#3dd56d,#2eb8ff,#8e5cf5,#ff5fa2);border-radius:50%;animation:ab-spin 10s linear infinite}
.teacher__face{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:#fff3b8;border:5px solid var(--ink);border-radius:50%}
.teacher__emoji{font-size:7.5rem;line-height:1;animation:ab-bounce 2s ease-in-out infinite}
.teacher__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.teacher__name{display:inline-block;padding:4px 28px;font-size:1.6rem;font-weight:800;color:#fff;background:var(--pink);border:4px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg)}
.teacher__role{margin-top:10px;font-weight:700}
.teacher__bubble{position:relative;padding:30px 30px 26px 36px;background:#fff;border:var(--line);border-radius:28px;box-shadow:6px 6px 0 var(--ink)}
.teacher__bubble::before{content:'';position:absolute;top:50%;left:-26px;border-top:16px solid transparent;border-right:26px solid var(--ink);border-bottom:16px solid transparent;transform:translateY(-50%)}
.teacher__bubble::after{content:'';position:absolute;top:50%;left:-16px;border-top:12px solid transparent;border-right:20px solid #fff;border-bottom:12px solid transparent;transform:translateY(-50%)}
.teacher__quote{position:absolute;top:-6px;left:14px;font-family:Georgia,serif;font-size:5rem;line-height:1;color:var(--pink)}
.teacher__msg{position:relative;margin-top:14px;font-size:1.25rem;font-weight:700;line-height:1.55}
.teacher__sign{margin:14px 0;font-size:1.2rem;font-weight:800;text-align:right;color:var(--grape)}
.teacher__say{display:block;margin:0 auto}
.teacher__deco{position:absolute;font-size:2rem;line-height:1;animation:ab-float 3s ease-in-out infinite alternate}
.teacher__deco--1{top:10px;left:14px}
.teacher__deco--2{top:12px;right:18px;animation-delay:-1s}
.teacher__deco--3{right:30px;bottom:10px;animation-delay:-2s}
.is-in .teacher__bubble{animation:ab-pop .7s .2s cubic-bezier(.2,1.4,.4,1) both}
@media(max-width:820px){
  .teacher__card{grid-template-columns:1fr;gap:34px;padding:22px 18px}
  .teacher__bubble::before{top:-26px;left:50%;border:0;border-right:16px solid transparent;border-bottom:26px solid var(--ink);border-left:16px solid transparent;transform:translateX(-50%)}
  .teacher__bubble::after{top:-16px;left:50%;border:0;border-right:12px solid transparent;border-bottom:20px solid #fff;border-left:12px solid transparent;transform:translateX(-50%)}
}

/* có gì */
.ab-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.ab-feature{text-align:center;transition:transform .2s}
.ab-feature:hover{transform:translateY(-6px) rotate(-1.5deg)}
.ab-feature--pink{background:var(--pink)}
.ab-feature--sky{background:var(--sky)}
.ab-feature--green{background:var(--grass)}
.ab-feature--sun{background:var(--sun)}
.ab-feature__icon{display:inline-block;font-size:3.6rem;line-height:1.2;animation:ab-bounce 2s ease-in-out infinite}
.ab-feature:nth-child(2) .ab-feature__icon{animation-delay:-.5s}
.ab-feature:nth-child(3) .ab-feature__icon{animation-delay:-1s}
.ab-feature:nth-child(4) .ab-feature__icon{animation-delay:-1.5s}
.ab-feature__name{margin-bottom:4px;font-size:1.5rem;font-weight:800}

/* các bước */
.ab-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px 18px;padding:0;list-style:none}
.ab-step{position:relative;padding:28px 14px 16px;font-weight:800;text-align:center;background:#fff;border:var(--line);border-radius:24px;box-shadow:4px 4px 0 var(--ink)}
.ab-step__num{position:absolute;top:-18px;left:50%;display:grid;place-items:center;width:38px;height:38px;color:#fff;background:var(--grape);border:3px solid var(--ink);border-radius:50%;transform:translateX(-50%)}
.ab-step__icon{display:block;font-size:2.8rem;line-height:1.2}

/* phụ huynh */
.ab-parents{background:linear-gradient(135deg,#fff3b8,#fff)}
.ab-parents__title{margin-bottom:10px;font-size:1.6rem;font-weight:800}
.ab-parents__list{padding-left:1.4rem}
.ab-parents__list li{margin-bottom:4px}

/* hiện dần khi cuộn tới */
.has-js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.has-js [data-reveal].is-in{opacity:1;transform:none}

@keyframes ab-bounce{50%{transform:translateY(-12px) rotate(-4deg)}}
@keyframes ab-float{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-14px) rotate(8deg)}}
@keyframes ab-spin{to{transform:rotate(360deg)}}
@keyframes ab-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}