/* Hiệu ứng nhẹ cho trang chủ (thêm 26/10/2026). Ai bật "giảm chuyển động" thì tắt hết. */

/* thanh tiến độ đọc trang */
.read-bar{position:fixed;left:0;top:0;z-index:100;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#6B3A86,#F2B705);pointer-events:none}

.hero-pic{display:block}

/* gạch chân vàng dưới tiêu đề mục (chạy ra khi cuộn tới) */
h2.reveal[style*="text-align: center"]::after{content:"";display:block;width:72px;height:5px;margin:14px auto 0;border-radius:3px;background:linear-gradient(90deg,#F2B705,#6B3A86);transform-origin:50% 50%}

/* nút vàng có vệt sáng */
.cta-shine{position:relative;overflow:hidden}
.cta-shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);pointer-events:none}

@media (prefers-reduced-motion: no-preference){
  .shimmer{background:linear-gradient(100deg,#6B3A86 30%,#c48a1a 45%,#F2B705 50%,#c48a1a 55%,#6B3A86 70%);background-size:250% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:hfShimmer 6s ease-in-out infinite}
  .hero-pic{animation:hfFloat 7s ease-in-out 1s infinite}
  .js h2.reveal[style*="text-align: center"]::after{transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.8,.2,1) .25s}
  .js h2.reveal.in[style*="text-align: center"]::after{transform:scaleX(1)}
  .cta-shine::after{animation:hfSweep 4s ease-in-out infinite}
  /* thẻ khoá học hiện ra kiểu phóng nhẹ */
  .js #khoa-hoc .reveal.card-hover{transform:translateY(26px) scale(.94)}
  .js #khoa-hoc .reveal.in.card-hover{transform:none}
  .js #khoa-hoc .reveal.in.card-hover:hover{transform:translateY(-6px)}
  /* biểu tượng tròn vàng nhún khi rê chuột vào thẻ */
  .card-hover:hover > div:first-child > svg{animation:hfWiggle .6s ease}
  /* ngôi sao trang trí lấp lánh */
  .deco:has(path[d^="M12 1"]){animation:hfTwinkle 3.2s ease-in-out infinite}
  .deco:has(path[d^="M12 1"]):nth-of-type(2n){animation-duration:4.4s;animation-delay:-1.5s}
}
@keyframes hfShimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes hfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hfSweep{0%,60%{left:-60%}100%{left:130%}}
@keyframes hfWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) scale(1.1)}60%{transform:rotate(10deg) scale(1.1)}}
@keyframes hfTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.7) rotate(45deg);opacity:.6}}
@media (prefers-reduced-motion: reduce){.read-bar{display:none}}