/* Hiệu ứng hover, chuyển động và hiện dần khi cuộn cho trang giới thiệu. Xóa file này (và dòng link trong index.html) để tắt toàn bộ hiệu ứng. */

/* Thanh điều hướng: gạch chân chạy ra khi rê chuột */
.nav nav a:not(.btn) { position: relative; padding: 6px 0; transition: color .2s; }
.nav nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav nav a:not(.btn):hover::after { transform: scaleX(1); }

/* Nút: nảy lên, bóng sáng quét qua, icon xoay nhẹ */
.btn { position: relative; overflow: hidden; transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background .2s, border-color .2s, color .2s; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary:hover { box-shadow: 0 16px 36px color-mix(in srgb, var(--brand) 55%, transparent); }
.btn-primary::before { content: ""; position: absolute; top: 0; bottom: 0; width: 60%; left: -80%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.btn-primary:hover::before { left: 130%; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); box-shadow: 0 12px 30px rgba(37, 99, 235, .15); }
.btn svg { transition: transform .25s ease; }
.btn:hover svg { transform: scale(1.18) rotate(-6deg); }

/* Hero: chữ chuyển màu chạy, icon nổi lơ lửng, huy hiệu tỏa sáng */
.grad { background-image: linear-gradient(90deg, #2563eb, #7c9cff, #2563eb); background-size: 200% 100%; animation: gradMove 5s ease-in-out infinite alternate; }
@keyframes gradMove { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.float { animation: floaty 6s ease-in-out infinite; transition: box-shadow .25s; }
.float.b { animation-duration: 7.5s; animation-delay: -2s; }
.float.c { animation-duration: 6.8s; animation-delay: -4s; }
.float:hover { box-shadow: 0 20px 44px rgba(37, 99, 235, .3), 0 0 0 1px var(--brand); }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.pill { animation: pillGlow 3.5s ease-in-out infinite; }
@keyframes pillGlow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 14%, transparent); } }
.pill svg { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Thẻ: nâng lên, viền sáng và đốm sáng đi theo con trỏ chuột */
.card, .stat, .step { position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; }
.card::after, .stat::after, .step::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%); }
.card:hover, .stat:hover, .step:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: 0 22px 44px rgba(37, 99, 235, .16); }
.card:hover::after, .stat:hover::after, .step:hover::after { opacity: 1; }
.card .ico { transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .3s, color .3s; }
.card:hover .ico { transform: rotate(-8deg) scale(1.15); background: var(--brand); color: var(--brand-ink); }
.step::before { transition: transform .3s, box-shadow .3s; }
.step:hover::before { transform: scale(1.18); box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 18%, transparent); }
.stat b { transition: color .25s; }
.stat:hover b { color: var(--brand); }

/* Ảnh giao diện: nổi lên, phóng nhẹ, thanh tiêu đề ba chấm màu */
.shot { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
.shot:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 34px 80px rgba(37, 99, 235, .22), 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent); }
.shot .bar i:nth-child(1) { background: #ff5f57; }
.shot .bar i:nth-child(2) { background: #febc2e; }
.shot .bar i:nth-child(3) { background: #28c840; }
.shot img { transition: transform .6s ease; }
.shot:hover img { transform: scale(1.025); }
.ticks li { transition: transform .2s, color .2s; }
.ticks li:hover { transform: translateX(6px); color: var(--ink); }
.ticks li::before { transition: transform .25s, background .25s, color .25s; }
.ticks li:hover::before { transform: scale(1.2); background: var(--brand); color: var(--brand-ink); }

/* Cài đặt, khung tải về, hỏi đáp */
.install ol li::before { transition: transform .3s, background .3s, color .3s; }
.install ol li:hover::before { transform: scale(1.15) rotate(-8deg); background: var(--brand); color: var(--brand-ink); }
.dl { transition: transform .3s, box-shadow .3s; box-shadow: 0 20px 50px rgba(37, 99, 235, .3); }
.dl:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(37, 99, 235, .45); }
.dl .btn:hover { background: #eef3ff; }
details { transition: border-color .25s, box-shadow .25s, transform .25s; }
details:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); transform: translateX(4px); }
details[open] { box-shadow: 0 14px 34px rgba(37, 99, 235, .12); border-color: var(--brand); }
summary::after { transition: transform .3s; }
details[open] summary::after { transform: rotate(180deg); }
details[open] p { animation: fadeDown .35s ease; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
pre.code button { transition: background .2s, transform .2s, color .2s; }
pre.code button:hover { background: var(--brand); color: #fff; transform: scale(1.06); }

/* Hiện dần khi cuộn tới (lớp .rv do effects.js thêm vào, nên không có JS thì mọi thứ vẫn hiện bình thường) */
.rv { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.card.rv.in:hover, .stat.rv.in:hover, .step.rv.in:hover { transform: translateY(-8px); transition-delay: 0s; }
.shot.rv.in:hover { transform: translateY(-8px) scale(1.015); transition-delay: 0s; }
details.rv.in:hover { transform: translateX(4px); transition-delay: 0s; }
.dl.rv.in:hover { transform: translateY(-6px); transition-delay: 0s; }

/* Thanh tiến độ cuộn trang ở mép trên */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: var(--p, 0%); background: linear-gradient(90deg, #2563eb, #7c3aed); z-index: 50; pointer-events: none; }

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