/* Hiệu ứng toàn trang (18/10/2026) — dẫn mắt tới nút "Đặt sách". Đi cùng assets/js/hieu-ung.js.
   Khách tắt chuyển động (prefers-reduced-motion) → không có chuyển động nào ở file này. */

/* Nút đặt dính đáy: trượt xuống ẩn khi khách đang thấy nút đầu trang hoặc đang ở form */
.nut-dinh { transition: translate .35s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.nut-dinh.nut-dinh-an { translate: 0 calc(100% + var(--k-6)); opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  /* 1. Nội dung trồi lên khi cuộn tới; --tre cho từng mục nối tiếp nhau */
  .hu-cho { opacity: 0; translate: 0 24px; }
  .hu { transition: opacity .6s ease var(--tre, 0ms), translate .7s cubic-bezier(.2,.8,.2,1) var(--tre, 0ms); }
  /* 6 tầng thác: đổ từ trên xuống như nước tràn — trồi từ cao xuống thay vì từ dưới lên */
  .sau-tang li.hu-cho { translate: 0 -28px; }
  .sau-tang li.hu-cho img { filter: saturate(.4) brightness(.8); }
  .sau-tang img { transition: filter .8s ease var(--tre, 0ms); }

  /* 2. Nút chính: vệt sáng lướt qua mỗi 5 giây + nhấc nhẹ khi rê chuột */
  .nut-chinh { overflow: hidden; isolation: isolate; transition: background .15s, translate .2s, box-shadow .2s; }
  .nut-chinh:not(.nut-dinh) { position: relative; } /* nút dính đáy giữ position: fixed */
  .nut-dinh { transition: translate .35s cubic-bezier(.2,.8,.2,1), opacity .25s, background .15s; }
  .nut-chinh::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; translate: -110% 0;
    background: linear-gradient(105deg, transparent 35%, color-mix(in oklch, var(--o-nhap-nen) 55%, transparent) 50%, transparent 65%);
    animation: hu-vet-sang 5s ease-in-out 1.5s infinite; }
  .nut-chinh:disabled::after { animation: none; }
  @media (hover: hover) { .nut-chinh:not(:disabled):hover { translate: 0 -2px; box-shadow: 0 10px 24px -10px color-mix(in oklch, var(--nut-nen) 80%, transparent); } }

  /* 3. Nút "Đặt sách" ở form sáng lên 1 lần khi vừa bấm được (sau khi kiểm "người thật" xong) */
  .nut-dat:enabled { animation: hu-sang-len 1.2s ease-out 1; }

  /* 4. Đầu trang: bìa sách bồng bềnh nhẹ, lời khen của độc giả bật vào sau 0,8 giây */
  .hero-anh .bia { animation: hu-bong-benh 6s ease-in-out infinite; }
  .hero-anh .bl-dau { animation: hu-bat-vao .6s cubic-bezier(.2,1.3,.4,1) .8s both; }

  /* 5. Hỏi đáp: câu trả lời mờ dần vào khi mở */
  details[open] > p { animation: hu-mo-dan .35s ease both; }

  /* 6. Dấu tích cam kết dưới nút đặt nảy nhẹ lần lượt khi cuộn tới */
  .cam-ket:not(.hu-cho) li svg { animation: hu-nay .5s cubic-bezier(.2,1.4,.4,1) both; }
  .cam-ket li:nth-child(2) svg { animation-delay: .12s; }
  .cam-ket li:nth-child(3) svg { animation-delay: .24s; }
}

/* Ô nhập đã điền đúng (sau khi khách rời ô): viền vàng báo "ổn rồi" — cả khi tắt chuyển động */
.nhom .o :is(input, select):user-valid:not([aria-invalid='true']) { border-color: var(--mau-nhan-dam); }

@keyframes hu-vet-sang { 0%, 70% { translate: -110% 0; } 100% { translate: 110% 0; } }
@keyframes hu-sang-len { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--nut-nen) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
@keyframes hu-bong-benh { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes hu-bat-vao { from { opacity: 0; scale: .85; translate: 0 12px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes hu-mo-dan { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@keyframes hu-nay { from { scale: 0; } to { scale: 1; } }