/* lp-motion.css — hiệu ứng "có hồn" (FE 20/10/2026, theo design/hieu-ung/SPEC.md, gốc từ nguyên mẫu PD lp-fx.css).
   Nạp SAU lp.css/lp-home.css. Đi cặp với lp-motion.js. Chỉ animate transform/opacity.
   TẮT TOÀN BỘ CHUYỂN ĐỘNG: thêm class "lp-no-motion" vào <html> (hoặc mở trang với ?motion=0, bật lại ?motion=1).
   Khi tắt: chạy như prefers-reduced-motion — Lùn đứng yên đúng chỗ, không trồi/nảy/bay/hạt, không hiện dần khi cuộn.
   Gỡ hẳn: xoá thẻ <link lp-motion.css>, <script lp-motion.js> và <img class="fx-peek"> (bản cũ: *.bak-hieuung-20261020). */
:root{--fx-out:cubic-bezier(.22,1,.36,1);--fx-pop:cubic-bezier(.34,1.56,.64,1);--fx-io:cubic-bezier(.65,0,.35,1);--fx-step:70ms}

/* ---------- Tĩnh (luôn áp, không phụ thuộc JS → không CLS) ---------- */
/* E1 Lùn ló đầu sau mép thẻ "Đặt lịch spa": chừa chỗ cố định phía trên 2 lối vào */
.lp-hero-doors{position:relative;margin-top:30px}
.lp-hero-doors>.lp-doors{position:relative;z-index:1}
.fx-peek{position:absolute;z-index:0;top:-42px;right:14px;width:56px;height:auto;aspect-ratio:160/127;pointer-events:none;user-select:none;-webkit-user-select:none;transform-origin:50% 100%}
/* QC-FX6: màn nhỏ ≤375px bớt chỗ cho Lùn để dòng Pet Hotel không trượt dưới dock */
@media (max-width:375px){.lp-hero-doors{margin-top:20px}.fx-peek{top:-32px;right:12px;width:44px}}
@media (min-width:1024px){.lp-hero-v4 .lp-hero-doors{margin-top:56px}.fx-peek{top:-50px;right:22px;width:68px}}
/* E9 bóng thoại Bắp (/tiktok) */
.lp-tt-hi{position:relative}
.fx-bubble{position:absolute;z-index:2;min-width:64px;padding:5px 10px;border-radius:14px 14px 14px 4px;background:#fff;color:var(--lp-brown);font:700 13px/1.25 var(--lp-f-body);white-space:nowrap;box-shadow:0 6px 16px -8px rgba(62,31,20,.45);pointer-events:none}
.fx-bubble:empty{visibility:hidden}
/* E7 ảnh bay vào giỏ + E11/E12 hạt mừng */
.fx-fly{position:fixed;left:0;top:0;z-index:1000;pointer-events:none}
.fx-fly img{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 6px 16px -6px rgba(62,31,20,.5)}
.fx-burst{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:3}
.fx-burst i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:2px}
.fx-burst i.h{width:14px;height:13px;border-radius:0;background:none!important}
.fx-burst svg{display:block;width:100%;height:100%}
.checkout-gift,.booking-result-dialog .booking-code{position:relative}
.fx-cheer{display:block;width:64px;height:64px;margin:4px auto 8px;object-fit:contain;transform-origin:50% 100%;pointer-events:none}
.fx-cheer.is-bap{border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 8px 18px -10px rgba(62,31,20,.5)}

/* ---------- Chuyển động (chỉ khi khách không bật giảm chuyển động và chưa tắt bằng .lp-no-motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* E1 Lùn trồi lên rồi thở + nghiêng đầu; dừng khi ra khỏi màn (.is-off) hoặc tab ẩn (.fx-hidden).
     fx-appear: Lùn chỉ hiện khi thẻ spa đã rõ hẳn (600ms), tránh nhìn xuyên qua thẻ đang mờ dần (E2) */
  html:not(.lp-no-motion) .fx-peek{animation:fx-peek-in .62s var(--fx-pop) .7s both,fx-appear .01s linear .6s both,fx-idle 6.5s ease-in-out 1.6s infinite}
  html:not(.lp-no-motion) .fx-peek.is-off,html.fx-hidden .fx-peek{animation-play-state:paused}
  /* E2 (bỏ 21/10): ô lối vào, dòng Pet Hotel, dải tin cậy và lựa chọn /tiktok HIỆN NGAY khi tải — không mờ/trượt (khách TikTok lướt nhanh, CMO đo thấy 4–7s mới rõ). */
  html:not(.lp-no-motion) .lp-tt-choice:nth-child(2){animation-delay:70ms}
  html:not(.lp-no-motion) .lp-tt-choice:nth-child(3){animation-delay:140ms}
  /* E9–E10 /tiktok: Bắp nghiêng đầu chào; sau bóng thoại 3 nút nảy 1 lần; mũi tên nút đầu đập 4 nhịp, chạm là dừng */
  html:not(.lp-no-motion) .lp-tt-hi>img{animation:fx-tilt 1.1s var(--fx-out) .45s both;transform-origin:50% 85%}
  html:not(.lp-no-motion) .fx-bubble{animation:fx-bubble-in .32s var(--fx-pop) both}
  html:not(.lp-no-motion) .fx-nudge .lp-tt-choice{animation:fx-tap .38s var(--fx-out) calc(var(--fx-i,0)*120ms) backwards}
  .fx-nudge .lp-tt-choice:nth-child(2){--fx-i:1}.fx-nudge .lp-tt-choice:nth-child(3){--fx-i:2}
  html:not(.lp-no-motion) .fx-nudge .lp-tt-choice:first-child .lp-tt-go{animation:fx-beat 1.3s ease-in-out .6s 4}
  html.fx-quiet .lp-tt-go{animation:none!important}
  /* E3 hiện dần khi cuộn: JS chỉ gắn .fx-wait cho khối NẰM DƯỚI màn lúc tải → không chớp, không JS thì không ẩn gì */
  html:not(.lp-no-motion) .fx-wait{opacity:0;transform:translateY(20px)}
  html:not(.lp-no-motion) .fx-wait.fx-in{opacity:1;transform:none;transition:opacity .45s var(--fx-out),transform .56s var(--fx-out);transition-delay:calc(var(--fx-i,0)*var(--fx-step))}
  /* E4 phản hồi chạm: nhấn lún 120ms, thả về 180ms (thẻ lớn giữ transition cũ khi thả) */
  html:not(.lp-no-motion) body.lp :is(.lp-btn,.button,.add-product,.lp-pcard-add,.lp-combo-buy,.lp-dock a,.fb-btn,.filters button,.lp-icon-btn,.cart-quantity button,.lp-tt-cart){transition:transform .18s var(--fx-out),background-color .2s,border-color .2s,color .2s,box-shadow .2s,opacity .2s}
  html:not(.lp-no-motion) body.lp :is(.lp-btn,.button,.add-product,.lp-combo-buy,.lp-dock a,.fb-btn,.filters button):active{transform:scale(.96);transition-duration:.12s}
  html:not(.lp-no-motion) body.lp :is(.lp-pcard-add,.lp-icon-btn,.cart-quantity button,.lp-tt-cart):active{transform:scale(.88);transition-duration:.12s}
  html:not(.lp-no-motion) body.lp :is(.lp-pcard,.lp-strip-card,.lp-combo,.lp-reel,.lp-policies a,.lp-door,.lp-tt-choice):active{transform:scale(.98);transition:transform .12s var(--fx-out)}
  /* E5 chọn gói / cân nặng / thanh toán: ô vừa chọn nảy 1 lần */
  html:not(.lp-no-motion) .fx-pop{animation:fx-pop .3s var(--fx-pop)}
  /* E6 combo: "Được chọn nhiều" ánh sáng lướt 3 lần; "Tiết kiệm x%" lắc 1 lần; điện thoại: thẻ nhích gợi ý vuốt */
  html:not(.lp-no-motion) .lp-combo-badge{position:relative;overflow:hidden}
  html:not(.lp-no-motion) .lp-combo-badge::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-120%);animation:fx-sweep 5s var(--fx-io) .5s 3 paused;pointer-events:none}
  html:not(.lp-no-motion) .lp-combo-save{animation:fx-wiggle .6s var(--fx-out) .7s backwards paused}
  html:not(.lp-no-motion) .fx-seen .lp-combo-badge::after,html:not(.lp-no-motion) .fx-seen .lp-combo-save{animation-play-state:running}
  @media (max-width:767px){html:not(.lp-no-motion) .fx-seen:is(.lp-combos,.lp-tt-strip,.lp-tt-reels)>li{animation:fx-swipe 1s var(--fx-io) .9s 1}}
  /* E7 số giỏ nảy + icon giỏ lắc */
  html:not(.lp-no-motion) .fx-bump{animation:fx-bump .38s var(--fx-pop)}
  html:not(.lp-no-motion) .fx-shake{animation:fx-shake .36s var(--fx-out)}
  /* E8 skeleton: dải sáng lướt thay nhịp mờ */
  html:not(.lp-no-motion) .lp-skel{position:relative;overflow:hidden;animation:none}
  html:not(.lp-no-motion) .lp-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-100%);animation:fx-skel 1.25s linear infinite}
  /* E13 hộp thoại mở mềm (bỏ qua dialog dự phòng .is-dialog-fallback vì nó tự canh giữa bằng transform) */
  html:not(.lp-no-motion) :is(#spa-dialog,#hotel-dialog,#checkout-dialog,.booking-result-dialog,#spa-cancel-dialog)[open]:not(.is-dialog-fallback){animation:fx-dialog .28s var(--fx-out)}
  html:not(.lp-no-motion) :is(#spa-dialog,#hotel-dialog,#checkout-dialog,.booking-result-dialog,#spa-cancel-dialog)[open]::backdrop{animation:fx-fade .22s ease-out}
  /* E12 thành công: Bắp/Lùn nhảy mừng */
  html:not(.lp-no-motion) .fx-cheer{animation:fx-hop .95s var(--fx-out) .15s both}
  /* E13 thanh KM: tia sáng đầu dòng xoay 1 lần */
  html:not(.lp-no-motion) .lp-promo-bar .lp-promo-ic:first-child{animation:fx-spin .9s var(--fx-out) .5s both}
  /* P2-2 dock "Đặt lịch spa": icon lịch lắc 1 lần (JS gắn .fx-ring sau 12s nếu khách chưa chạm dock) */
  html:not(.lp-no-motion) .fx-ring .lp-ic-svg{animation:fx-ring .5s var(--fx-out) 2;transform-origin:50% 20%}
  /* P2-6 thẻ clip: ảnh bìa phóng nhẹ khi vào giữa màn (dùng transition .35s sẵn có của .lp-reel img) */
  html:not(.lp-no-motion) .lp-reel.fx-near img{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  /* Giữ đổi độ mờ/màu, bỏ quãng di chuyển */
  html:not(.lp-no-motion) .fx-wait{opacity:0}
  html:not(.lp-no-motion) .fx-wait.fx-in{opacity:1;transition:opacity .2s linear}
  html:not(.lp-no-motion) .fx-bump{animation:fx-flash .5s ease}
  html:not(.lp-no-motion) .fx-bubble{animation:fx-fade .2s both}
}
@keyframes fx-peek-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes fx-idle{0%,28%,56%,100%{transform:none}14%,42%{transform:scaleY(1.035)}68%{transform:rotate(-7deg)}76%{transform:rotate(5deg)}83%{transform:rotate(-2deg)}88%{transform:none}}
@keyframes fx-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fx-tap{50%{transform:scale(1.025)}}
@keyframes fx-beat{0%,40%,100%{transform:none}12%{transform:scale(1.14)}24%{transform:scale(1.06)}}
@keyframes fx-tilt{0%{transform:none}25%{transform:rotate(-9deg)}50%{transform:rotate(7deg)}72%{transform:rotate(-3deg)}100%{transform:none}}
@keyframes fx-bubble-in{from{opacity:0;transform:translateY(6px) scale(.85)}to{opacity:1;transform:none}}
@keyframes fx-pop{40%{transform:scale(.97)}75%{transform:scale(1.02)}}
@keyframes fx-sweep{0%{transform:translateX(-120%)}18%,100%{transform:translateX(260%)}}
@keyframes fx-wiggle{0%{transform:none}20%{transform:rotate(-6deg) scale(1.08)}45%{transform:rotate(5deg) scale(1.08)}70%{transform:rotate(-2deg)}100%{transform:none}}
@keyframes fx-swipe{0%,100%{transform:none}40%,55%{transform:translateX(-36px)}}
@keyframes fx-bump{0%{transform:none}35%{transform:scale(1.4)}65%{transform:scale(.9)}100%{transform:none}}
@keyframes fx-shake{25%{transform:rotate(-12deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}
@keyframes fx-ring{25%{transform:rotate(-10deg)}60%{transform:rotate(8deg)}85%{transform:rotate(-3deg)}}
@keyframes fx-skel{to{transform:translateX(100%)}}
@keyframes fx-dialog{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-appear{from{opacity:0}to{opacity:1}}
@keyframes fx-hop{0%{transform:translateY(8px);opacity:0}18%{transform:none;opacity:1}34%{transform:translateY(-18px) scaleY(1.04)}50%{transform:scale(1.06,.94)}64%{transform:translateY(-8px)}80%{transform:scale(1.03,.97)}100%{transform:none}}
@keyframes fx-spin{from{transform:rotate(-90deg)}to{transform:none}}
@keyframes fx-flash{50%{opacity:.35}}