/* =========================================================
   Landing Tuyển sinh – hiệu ứng riêng (chỉ tải ở trang landing)
   Dùng kèm style.css (các khối kp-*) và assets/js/landing.js
   ========================================================= */
.lp-main { position: relative; z-index: 0; }

/* ---------- Phần đầu: nền đốm màu chuyển động + hình vẽ bay ---------- */
.kp-hero { isolation: isolate; overflow: visible; }
.lp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.lp-hero-bg i { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .6; animation: lp-blob 18s ease-in-out infinite alternate; }
.lp-hero-bg i:nth-child(1) { width: 440px; height: 440px; left: -140px; top: -160px; background: #ffd29b; }
.lp-hero-bg i:nth-child(2) { width: 380px; height: 380px; right: 8%; bottom: -170px; background: #c3eeb9; animation-duration: 23s; animation-delay: -7s; }
.lp-hero-bg i:nth-child(3) { width: 300px; height: 300px; left: 38%; top: 12%; background: #ffbf9c; opacity: .38; animation-duration: 27s; animation-delay: -13s; }
@keyframes lp-blob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, -40px) scale(1.18); } 100% { transform: translate(-50px, 36px) scale(.94); } }

.lp-deco, .lp-band__deco { position: absolute; inset: 0; pointer-events: none; }
.lp-deco { z-index: 3; }
.lp-band__deco { z-index: 0; }
.lp-deco__i { position: absolute; display: block; width: 76px; transition: translate .5s cubic-bezier(.2, .8, .2, 1); animation: lp-float 7s ease-in-out infinite; }
.lp-deco__i:nth-child(2n) { animation-duration: 9s; animation-delay: -3s; }
.lp-deco__i:nth-child(3n) { animation-duration: 6s; animation-delay: -1.5s; }
.lp-deco__i--sm { width: 40px; }
.lp-deco__i svg { display: block; width: 100%; height: auto; color: var(--yellow); }
@keyframes lp-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(6deg); } }

/* Tiêu đề phần đầu: từng từ bay lên */
.kp-hero__text > h2.lp-split { animation: none; }
.lp-split .lp-w { display: inline-block; }
.kp-hero h2 .lp-w { animation: lp-word .85s cubic-bezier(.2, .9, .25, 1.12) both; animation-delay: calc(.12s + var(--i) * 95ms); }
@keyframes lp-word { from { opacity: 0; transform: translateY(.6em) rotate(7deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.kp-hero mark::after { animation-delay: 1s !important; }

/* Nút "hút" theo chuột */
[data-magnetic] { transition: translate .3s cubic-bezier(.2, .8, .2, 1), transform .2s, box-shadow .2s, background .2s; }

/* ---------- Tiêu đề các phần: từng từ hiện ra khi cuộn tới ---------- */
.kp-head.reveal h2 .lp-w, h3.lp-split.reveal .lp-w { opacity: 0; transform: translateY(.7em) rotate(5deg); filter: blur(5px); transition: opacity .6s ease, transform .75s cubic-bezier(.2, .9, .25, 1.15), filter .6s ease; transition-delay: calc(.12s + var(--i) * 70ms); }
.kp-head.reveal.is-in h2 .lp-w, h3.lp-split.reveal.is-in .lp-w { opacity: 1; transform: none; filter: none; }
.kp-head .eyebrow { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.kp-head.reveal:not(.is-in) .eyebrow { transform: scale(.6) rotate(-8deg); }

/* ---------- Nghiêng 3D theo chuột ---------- */
[data-tilt].is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) !important; transition: transform .12s ease-out, box-shadow .25s !important; }
[data-tilt].is-tilting::selection { background: transparent; }

/* ---------- Dải nền cho phần xen kẽ ---------- */
.lp-band { position: relative; margin-top: 4em; padding: 3.4em 0 3.6em; }
.lp-band::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: radial-gradient(rgba(242, 97, 34, .08) 1.5px, transparent 2px) 0 0 / 24px 24px, linear-gradient(180deg, #fffaf1, #fff2e1); }
.lp-band--green::before { background: radial-gradient(rgba(26, 162, 69, .08) 1.5px, transparent 2px) 0 0 / 24px 24px, linear-gradient(180deg, #f3fbf0, #e5f5df); }
.lp-band + .kp-block, .lp-band + .kp-cta { margin-top: 3.4em; }
.lp-band .kp-head, .lp-band .kp-worries, .lp-band .lp-steps { position: relative; z-index: 1; }
.lp-band__deco .lp-deco__i { width: 70px; opacity: .9; }
.lp-band__deco .lp-deco__i--sm { width: 38px; }

/* ---------- Ảnh khối giáo viên trôi nhẹ khi cuộn ---------- */
.lp-parallax { overflow: hidden; border-radius: 24px; }
.prose .lp-parallax img { display: block; margin: 0; border-radius: 0; transform: scale(1.12); transition: translate .1s linear; }

/* ---------- Thủ tục: đường nối các bước tự vẽ khi cuộn ---------- */
.lp-steps { position: relative; padding-top: 34px; margin-top: 1.2em; }
.lp-steps__line { position: absolute; z-index: 0; top: 32px; left: calc(50% / var(--n, 4)); right: calc(50% / var(--n, 4)); height: 5px; border-radius: 5px; background: rgba(26, 162, 69, .14); }
.lp-steps__line i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-k), var(--yellow), var(--orange)); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.prose .lp-steps ol.kp-steps { position: relative; z-index: 1; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: 0; }
.prose .lp-steps .kp-steps li { padding: 44px 20px 22px; text-align: center; }
.prose .lp-steps .kp-steps li::before { top: -27px; left: 50%; width: 54px; height: 54px; margin-left: -27px; border: 5px solid #fff; background: #cfc8bd; font-size: 1.3rem; box-shadow: 0 4px 12px rgba(60, 40, 20, .15); transition: background .4s, transform .5s cubic-bezier(.3, 1.7, .5, 1); }
.prose .lp-steps .kp-steps li.is-lit::before { background: var(--orange); transform: scale(1.12); }
.prose .lp-steps .kp-steps li.is-lit:last-child::before { background: var(--green-k); }

/* ---------- Hỏi đáp: mở/đóng mượt ---------- */
.kp-faq details { overflow: hidden; }
.prose .lp-faq__a p { margin: 0; }
.kp-faq summary { transition: color .2s; }
.kp-faq summary:hover { color: var(--orange-d); }

/* ---------- Voucher quà tặng ---------- */
.prose .kp-gifts li.lp-gift { padding-left: 16px; gap: 12px; }
.prose .kp-gifts li.lp-gift::before { display: none; }
.lp-gift__ic { flex: 0 0 42px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--orange-l); color: var(--orange); transition: transform .4s cubic-bezier(.3, 1.7, .5, 1); }
.lp-gift__ic .icon { width: 21px; height: 21px; }
.lp-gift:hover .lp-gift__ic { transform: rotate(-12deg) scale(1.12); }
.lp-gift__name { flex: 1; min-width: 0; }
.lp-gift--star .lp-gift__ic, .lp-gift--sun .lp-gift__ic, .lp-gift--award .lp-gift__ic { background: #fff6e0; color: #c98200; }
.lp-gift--music .lp-gift__ic, .lp-gift--palette .lp-gift__ic { background: var(--lilac-l); color: var(--lilac); }
.lp-gift--smile .lp-gift__ic, .lp-gift--leaf .lp-gift__ic, .lp-gift--check .lp-gift__ic { background: var(--green-l); color: var(--green-d); }
.lp-gift--book .lp-gift__ic, .lp-gift--camera .lp-gift__ic, .lp-gift--globe .lp-gift__ic { background: var(--blue-l); color: var(--blue); }
.lp-gift--heart .lp-gift__ic { background: #ffecec; color: #e5484d; }
.kp-gifts__total.is-done strong { animation: lp-bump .7s cubic-bezier(.3, 1.8, .5, 1); }
.kp-gifts__total.is-done::before { animation: lp-shake .9s ease, kp-bob 3s ease-in-out 1s infinite; }
@keyframes lp-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes lp-shake { 0%, 100% { transform: rotate(0); } 15%, 45%, 75% { transform: rotate(-16deg) scale(1.1); } 30%, 60%, 90% { transform: rotate(16deg) scale(1.1); } }
.lp-confetti { position: absolute; inset: 0; z-index: 4; overflow: hidden; border-radius: inherit; pointer-events: none; }
.lp-confetti i { position: absolute; top: -16px; display: block; width: 9px; height: 15px; border-radius: 2px; }

/* ---------- Phiếu ưu đãi: màu theo lựa chọn trong quản trị, lật vào khi cuộn ---------- */
.kp-deals .kp-deal.kp-deal--orange { --dc: linear-gradient(160deg, #ff7a3d, var(--orange-d)); }
.kp-deals .kp-deal.kp-deal--green { --dc: var(--green-k); }
.kp-deals .kp-deal.kp-deal--blue { --dc: var(--blue); }
.kp-deals .kp-deal.kp-deal--lilac { --dc: var(--lilac); }
.kp-deals .kp-deal.kp-deal--yellow { --dc: #d99000; }
.reveal--flip { transform: perspective(800px) rotateX(-75deg) translateY(26px); transform-origin: 50% 0; }
.kp-deal .kp-deal__value { transition: letter-spacing .3s; }
.kp-deal:hover .kp-deal__value { letter-spacing: .03em; }

/* ---------- Lời mời cuối trang ---------- */
.kp-cta { position: relative; overflow: hidden; isolation: isolate; }
.lp-cta__deco svg { position: absolute; z-index: -1; width: 64px; opacity: .3; color: #fff; animation: lp-float 7s ease-in-out infinite; }
.lp-cta__s1 { left: 6%; top: 16%; }
.lp-cta__s2 { right: 7%; top: 20%; width: 44px !important; animation-delay: -2s !important; }
.lp-cta__s3 { left: 14%; bottom: 12%; width: 40px !important; animation-delay: -4s !important; }
.kp-cta::after { content: ""; position: absolute; z-index: -1; inset: -50%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, .16) 80%, transparent 90%); animation: lp-spin 9s linear infinite; }
@keyframes lp-spin { to { transform: rotate(1turn); } }

/* ---------- Số liệu: nảy nhẹ khi rê chuột ---------- */
.kp-fact { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.kp-fact:hover { transform: translateY(-5px); box-shadow: 0 9px 0 var(--line); }

@media (max-width: 1199px) {
  .lp-steps__line { display: none; }
  .prose .lp-steps ol.kp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 46px; }
}
@media (max-width: 991px) {
  .lp-deco__i:nth-child(n+4) { display: none; }
}
@media (max-width: 640px) {
  .lp-deco__i { width: 54px; }
  .lp-deco__i:nth-child(n+3) { display: none; }
  .lp-deco__i--sm { width: 30px; }
  .lp-band { padding: 2.6em 0 2.8em; }
  .lp-band__deco { display: none; }
  .lp-steps { padding-top: 0; }
  .lp-steps__line { display: block; top: 30px; bottom: 30px; left: 33px; right: auto; width: 5px; height: auto; }
  .lp-steps__line i { transform-origin: center top; transform: scaleY(var(--p, 0)); }
  .prose .lp-steps ol.kp-steps { grid-template-columns: 1fr; row-gap: 14px; }
  .prose .lp-steps .kp-steps li { padding: 18px 18px 18px 74px; text-align: left; }
  .prose .lp-steps .kp-steps li::before { top: 14px; left: 9px; margin-left: 0; width: 50px; height: 50px; }
  .kp-cta::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero-bg i, .lp-deco__i, .kp-hero h2 .lp-w, .lp-cta__deco svg, .kp-cta::after, .kp-gifts__total.is-done strong, .kp-gifts__total.is-done::before { animation: none !important; }
  .kp-head.reveal h2 .lp-w, h3.lp-split.reveal .lp-w { opacity: 1; transform: none; filter: none; }
  .lp-steps__line i { transform: none; }
}

/* Dải báo "Bản xem trước" (xem trước từ trang quản trị) */
.lp-preview-bar { position: fixed; z-index: 200; left: 50%; top: 10px; transform: translateX(-50%); padding: 8px 18px; border-radius: 999px; background: #2c2833; color: #fff; font-size: .88rem; font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); white-space: nowrap; }
@media (max-width: 640px) { .lp-preview-bar { left: 10px; right: 10px; transform: none; white-space: normal; text-align: center; border-radius: 14px; } }

/* Nút "Ưu đãi" trên thanh mục lục: hộp quà đỏ rung nhẹ */
.prose .kp-toc a.lp-toc-gift { display: inline-flex; align-items: center; gap: 7px; }
.lp-toc-gift__ic { display: inline-grid; place-items: center; color: #e5383b; animation: lp-gift-wiggle 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
.lp-toc-gift__ic .icon { width: 19px; height: 19px; stroke-width: 2.4; }
.prose .kp-toc a.lp-toc-gift:hover .lp-toc-gift__ic, .prose .kp-toc a.lp-toc-gift.is-active .lp-toc-gift__ic { color: #ffe066; }
@keyframes lp-gift-wiggle { 0%, 70%, 100% { transform: rotate(0) scale(1); } 75% { transform: rotate(-14deg) scale(1.15); } 80% { transform: rotate(12deg) scale(1.15); } 85% { transform: rotate(-8deg) scale(1.1); } 90% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .lp-toc-gift__ic { animation: none; } }