/* utnu.vn — lớp chuyển động FX (file rời, không inline, tương thích CSP chặt)
   Tông: xanh logo #0f7a3e, điểm nhấn vàng #ffd400. Tôn trọng prefers-reduced-motion. */

/* ── Hero: các khối vào trang so le (CSS thuần, không cần JS) ── */
@keyframes fxRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.mo-dau h1 { animation: fxRise .6s cubic-bezier(.22,.9,.3,1) both; }
.mo-dau .phu { animation: fxRise .6s cubic-bezier(.22,.9,.3,1) .08s both; }
.mo-dau .hang-nut { animation: fxRise .6s cubic-bezier(.22,.9,.3,1) .16s both; }
.mo-dau .so-lieu { animation: fxRise .6s cubic-bezier(.22,.9,.3,1) .24s both; }
.mo-dau .khung > img { animation: fxRise .7s cubic-bezier(.22,.9,.3,1) .1s both, fxFloat 7s ease-in-out 1s infinite; filter: drop-shadow(0 10px 22px rgba(10,90,45,.25)); }
@keyframes fxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ── Nút chính: Liquid Glass xanh + vệt sáng quét ── */
.nut { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .3s ease, background .25s ease, border-color .25s ease; }
.nut-chinh { box-shadow: 0 8px 20px rgba(15,122,62,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.nut-chinh::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.5) 46%, rgba(255,255,255,.05) 56%, transparent 72%);
  transform: translateX(-130%); animation: fxSheen 5.5s ease-in-out infinite;
}
@keyframes fxSheen { 0%,58% { transform: translateX(-130%); } 88%,100% { transform: translateX(130%); } }
.nut:hover { transform: translateY(-1px); }
.nut-chinh:hover { box-shadow: 0 12px 26px rgba(15,122,62,.42), inset 0 1px 0 rgba(255,255,255,.4); }
.nut:active { transform: scale(.97); }
.nut-phu:hover { background: var(--xanh-nhat); }

/* ── Ripple khi chạm ── */
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 62%);
  transform: scale(0); animation: fxRipple .6s ease-out forwards;
}
.nut-phu .fx-ripple, .goi-nhanh a .fx-ripple { background: radial-gradient(circle, rgba(15,122,62,.35) 0%, rgba(15,122,62,0) 62%); }
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }
.goi-nhanh a { position: relative; overflow: hidden; }

/* ── Hiện dần khi cuộn tới (JS gắn .fx-in; không JS thì vẫn hiện bình thường) ── */
.fx-pre { opacity: 0; transform: translateY(22px); }
.fx-in { opacity: 1; transform: translateY(0); transition: opacity .65s cubic-bezier(.22,.9,.3,1), transform .65s cubic-bezier(.22,.9,.3,1); }

/* ── Thẻ nội dung: nâng + ảnh phóng nhẹ + viền sáng theo chuột ── */
.the { transition: transform .35s cubic-bezier(.22,.9,.3,1), box-shadow .35s ease, border-color .35s ease; position: relative; }
.the img { transition: transform .8s cubic-bezier(.22,.9,.3,1); }
@media (hover: hover) and (pointer: fine) {
  .the:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(10,40,22,.16); border-color: var(--xanh); }
  .the:hover img { transform: scale(1.045); }
  .the::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(15,122,62,.10), transparent 65%);
  }
  .the:hover::after { opacity: 1; }
}

/* ── Logo nhà máy: nâng nhẹ khi rê chuột ── */
.logo-nm li { transition: transform .3s ease, box-shadow .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .logo-nm li:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(10,40,22,.13); }
}

/* ── Menu: gạch chân chạy ── */
.menu a { position: relative; }
.menu a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--xanh); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,.9,.3,1);
}
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }

/* ── Ô số liệu hero: viền sáng khi rê chuột ── */
.so-lieu div { transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.so-lieu div:hover { border-color: var(--xanh); box-shadow: 0 8px 18px rgba(10,40,22,.10); transform: translateY(-2px); }

/* ── Thanh gọi nhanh mobile: vệt sáng chậm trên nút Gọi ── */
@media (max-width: 760px) {
  .goi-nhanh a:first-child::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
    transform: translateX(-130%); animation: fxSheen 6s ease-in-out infinite;
  }
}

/* ── Chi tiết hỏi đáp: mở êm ── */
.hoi-dap details { transition: border-color .3s ease, box-shadow .3s ease; }
.hoi-dap details[open] { border-color: var(--xanh); box-shadow: 0 8px 20px rgba(10,40,22,.08); }

/* ── Tắt chuyển động theo cài đặt người dùng ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fx-pre { opacity: 1; transform: none; }
}