/* Hiệu ứng dùng chung cho giao diện Học viện (23/10/2026): mọi kiểu trang chủ + trang con.
   Dùng :where() để quy tắc riêng của từng kiểu (v-*.css) luôn thắng; dùng thuộc tính translate/rotate/scale
   (không phải transform) để không đè vị trí sẵn có của phần tử. Tắt hết khi người xem chọn giảm chuyển động. */
@keyframes acFxFloat{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes acFxDrift{0%,100%{translate:0 0}50%{translate:12px 0}}
@keyframes acFxSpin{to{rotate:360deg}}
@keyframes acFxRing{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55),0 0 0 0 var(--ac-s,rgba(0,0,0,.12))}100%{box-shadow:0 0 0 18px rgba(255,255,255,0),0 0 0 34px rgba(0,0,0,0)}}
@keyframes acFxRise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes acFxDown{from{opacity:0;translate:0 -22px}to{opacity:1;translate:0 0}}

/* 1. Thẻ nâng lên + đổ bóng khi rê chuột (chỉ những thẻ mà v-*.css / pages.css chưa có hiệu ứng) */
:where(.ac) :where(.un-topic,.un-event,.un-campus__box,.on-member,.di-post,.cp-course,.cp-topic,.cp-event,.cp-serv__box,.cp-feat__card,
  .cc-course,.cc-post,.cc-member,.sk-post,.sk-event,.acp-entry,.acp-person,.acp-rpost){transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
:where(.ac) :where(.un-event,.un-campus__box,.di-post,.cp-course,.cp-topic,.cp-event,.cp-serv__box,.cp-feat__card,
  .cc-course,.cc-post,.cc-member,.sk-post,.acp-entry,.acp-person):hover{translate:0 -6px;box-shadow:0 18px 40px rgba(15,18,40,.12)}

/* 2. Ảnh trong thẻ phóng to nhẹ khi rê chuột (bổ sung cho thẻ chưa có) */
:where(.ac) :where(.un-campus__img,.di-course__img,.cc-course__img,.acp-rpost__img,.acp-mini__img,.cp-campus__img){overflow:hidden}
:where(.ac) :where(.un-campus__img,.di-course__img,.cc-course__img,.acp-rpost__img,.acp-mini__img,.cp-campus__img) img{transition:scale .7s cubic-bezier(.2,.7,.2,1)}
:where(.ac) :where(.un-campus__box,.di-course,.cc-course,.acp-rpost,.acp-mini,.cp-campus):hover img{scale:1.08}

/* 3. Biểu tượng trong thẻ lật khi rê chuột */
:where(.ac) :where(.un-campus__ico,.on-topic__ic,.di-why__ic,.cp-serv__ic,.cp-feat__ic,.cp-stat__ic,.cc-feat__ic,.sk-feat__ico,.ar-feat__ico,.acp-ico){transition:rotate .8s ease}
:where(.ac) :where(.un-campus__box,.on-topic,.di-why__card,.cp-serv__box,.cp-feat__card,.cp-stat,.cc-feat,.sk-feat,.ar-feat,.acp-card):hover
  :where(.un-campus__ico,.on-topic__ic,.di-why__ic,.cp-serv__ic,.cp-feat__ic,.cp-stat__ic,.cc-feat__ic,.sk-feat__ico,.ar-feat__ico,.acp-ico){rotate:y 360deg}

/* 4. Hình trang trí trôi nhẹ (chấm, vòng, tia, đốm) */
:where(.ac) :where(.un-deco,.un-dots,.un-circle,.un-swoosh,.on-about__dots,.on-about__ring,.on-cta__dots,.on-faq__dots,.on-faq__ring,.on-hero__dot,.on-hero__ring,.on-hero__chip,.on-hero__card,
  .ar-about__doodle,.ar-about__ring,.ar-cta__dots,.ar-hero__circle,.ar-hero__dots,.ar-hero__spark,.ar-vbox__blob,.ar-vbox__spark,.ar-vbox__seeds,.ar-voices__slash,
  .cc-hero__dots,.cc-hero__ring,.cc-about__badge,.cc-cta__badge,.sk-cat__blob,.di-hero__count,.acp-deco){animation:acFxFloat 6s ease-in-out infinite}
:where(.ac) :where(.on-hero__chip,.ar-hero__spark,.ar-vbox__spark,.cc-about__badge,.acp-deco:nth-child(2n)){animation-name:acFxDrift;animation-duration:7s}
:where(.ac) :where(.ar-hero__circle,.ar-about__ring,.on-faq__ring,.cc-hero__ring,.ar-vbox__loop){animation:acFxSpin 40s linear infinite}
:where(.ac) :where(.on-hero__card,.on-about__dots,.ar-cta__dots,.acp-deco:nth-child(3n)){animation-delay:-2.5s}

/* 5. Nút phát video có vòng sóng */
:where(.ac) :where(.ar-play,.ar-vbox__play,.cp-hero__play,.cp-video__play,.cp-playdot,.di-play,.on-play,.sk-play,.acp-play){animation:acFxRing 2.2s ease-out infinite}

/* 6. Chữ hero và banner trang con hiện dần khi tải trang */
:where(.ac) :where(.un-hero__text,.on-hero__text,.di-hero__in>div:first-child,.cp-hero__in,.cc-hero__text,.sk-hero__text,.ar-hero__text,.acp-banner__in)>*{animation:acFxRise .8s cubic-bezier(.2,.7,.2,1) both}
:where(.ac) :where(.un-hero__text,.on-hero__text,.di-hero__in>div:first-child,.cp-hero__in,.cc-hero__text,.sk-hero__text,.ar-hero__text,.acp-banner__in)>:nth-child(2){animation-delay:.12s}
:where(.ac) :where(.un-hero__text,.on-hero__text,.di-hero__in>div:first-child,.cp-hero__in,.cc-hero__text,.sk-hero__text,.ar-hero__text,.acp-banner__in)>:nth-child(3){animation-delay:.24s}
:where(.ac) :where(.un-hero__text,.on-hero__text,.di-hero__in>div:first-child,.cp-hero__in,.cc-hero__text,.sk-hero__text,.ar-hero__text,.acp-banner__in)>:nth-child(n+4){animation-delay:.36s}
:where(.ac) :where(.on-hero__pic,.cc-hero__media,.sk-hero__media,.ar-hero__media,.di-hero__media){animation:acFxDown 1s .2s cubic-bezier(.2,.7,.2,1) both}

/* 7. Hiện dần khi cuộn tới (fx.js chỉ gắn .ac-rv cho phần tử còn nằm dưới màn hình lúc tải) */
.ac .ac-rv{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0s)}
.ac .ac-rv.is-in{opacity:1;translate:0 0}

/* 8. Nút lên đầu trang */
.ac-top{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:var(--ac,#1a8fe3);color:#fff;box-shadow:0 10px 24px rgba(15,18,40,.22);opacity:0;translate:0 16px;pointer-events:none;transition:opacity .3s,translate .3s,background .2s}
.ac-top.is-on{opacity:1;translate:0 0;pointer-events:auto}
.ac-top:hover{background:var(--ac-d,#136fb0)}
.ac-top svg{width:20px;height:20px}

@media (prefers-reduced-motion:reduce){
  .ac *,.ac *::before,.ac *::after{animation:none!important;transition-duration:.01ms!important}
  .ac .ac-rv{opacity:1;translate:none}
}

/* 9. Trang 404 */
.ac .acp-404__box{max-width:640px;margin:0 auto;text-align:center;display:grid;gap:18px;justify-items:center}
.ac .acp-404__code{font-size:clamp(90px,16vw,160px);line-height:.9;font-weight:800;letter-spacing:-.04em;color:var(--ac);text-shadow:8px 8px 0 var(--ac-s);animation:acFxFloat 6s ease-in-out infinite}
.ac .acp-404__box h2{margin:0;font-size:clamp(22px,3vw,30px);color:var(--ink)}
.ac .acp-404__search{display:flex;gap:10px;width:100%;max-width:460px}
.ac .acp-404__search input{flex:1;min-width:0;height:48px;border:1px solid #dfe3ec;border-radius:8px;padding:0 16px;font:inherit;font-size:16px}
.ac .acp-404__search input:focus{outline:2px solid var(--ac);outline-offset:1px;border-color:transparent}
.ac .acp-404__links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* 10. Popup xem video */
.ac-vbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px;background:rgba(8,10,18,.88);opacity:0;transition:opacity .25s ease}
.ac-vbox.is-on{opacity:1}
.ac-vbox__in{position:relative;width:min(1100px,100%);scale:.94;transition:scale .3s cubic-bezier(.2,.7,.2,1)}
.ac-vbox.is-on .ac-vbox__in{scale:1}
.ac-vbox__frame{position:relative;aspect-ratio:16/9;max-height:calc(100vh - 110px);margin:0 auto;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ac-vbox__frame iframe,.ac-vbox__frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ac-vbox__x{position:absolute;right:0;top:-48px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center}
.ac-vbox__x:hover,.ac-vbox__x:focus-visible{background:var(--ac,#1a8fe3);outline:none}

/* 11. Lớp tiện ích cho các kiểu mới (24/10/2026): gắn thẳng vào phần tử trong view của kiểu */
.ac .ac-fx-float{animation:acFxFloat 6s ease-in-out infinite}
.ac .ac-fx-drift{animation:acFxDrift 7s ease-in-out infinite}
.ac .ac-fx-spin{animation:acFxSpin 40s linear infinite}
.ac .ac-fx-ring{animation:acFxRing 2.2s ease-out infinite}
.ac .ac-fx-lift{transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.ac .ac-fx-lift:hover{translate:0 -6px;box-shadow:0 18px 40px rgba(15,18,40,.12)}
.ac .ac-fx-zoom{overflow:hidden}
.ac .ac-fx-zoom img{transition:scale .7s cubic-bezier(.2,.7,.2,1)}
.ac .ac-fx-lift:hover .ac-fx-zoom img,.ac .ac-fx-zoom:hover img{scale:1.08}
.ac .ac-fx-rise>*{animation:acFxRise .8s cubic-bezier(.2,.7,.2,1) both}
.ac .ac-fx-rise>:nth-child(2){animation-delay:.12s}
.ac .ac-fx-rise>:nth-child(3){animation-delay:.24s}
.ac .ac-fx-rise>:nth-child(n+4){animation-delay:.36s}