/* Tối ưu sâu /store · sản phẩm · chi nhánh · giỏ hàng — Lucian UX/UI Prompt (MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/)
   #037 menu mở từ nút · #024 histogram giá · #049 banner nhiều lớp · #060/#061 ảnh sản phẩm · #044 FAQ · #018 số lăn · #087 xe tải miễn ship · #042 các bước · #005 gửi.
   Chỉ animate transform/opacity. JS đi kèm: lx-deep.js. */
:root { --ld-ease: cubic-bezier(.2,.8,.2,1); --ld-spring: cubic-bezier(.34,1.45,.64,1); }

/* ── Menu thả xuống (ngôn ngữ, sắp xếp, thương hiệu…) mở bật từ nút (#037) ── */
body .dropdown-menu.show { animation: ld-menu .45s var(--ld-spring); transform-origin: 50% 0; }
@keyframes ld-menu { from { opacity: 0; transform: translateY(-8px) scale(.94); } }
body .dropdown-item { transition: background-color .2s, transform .35s var(--ld-spring), color .2s; }
@media (hover: hover) { body .dropdown-item:hover { transform: translateX(4px); } }

/* ── Thanh lọc /store (sfb) ── */
body .sfb-pill { transition: transform .35s var(--ld-spring), box-shadow .3s var(--ld-ease), background-color .2s, color .2s, border-color .2s; }
body .sfb-pill:active { transform: scale(.95); }
body .sfb-pill[aria-expanded="true"] { box-shadow: 0 12px 22px -14px rgba(17,17,17,.5); }
body .sfb-menu-item .sfb-ci { transition: transform .45s var(--ld-spring), opacity .25s; }
body .sfb-menu-item--on .sfb-ci { animation: ld-pop .5s var(--ld-spring); }
body .sfb-check-row .sfb-check-box { transition: transform .35s var(--ld-spring), background-color .2s, border-color .2s; }
body .sfb-check-row:active .sfb-check-box { transform: scale(.8); }
@keyframes ld-pop { 40% { transform: scale(1.35); } }
.ld-hist { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin: 12px 2px 0; }
.ld-hist i { flex: 1; min-width: 3px; height: 100%; border-radius: 3px 3px 0 0; background: #111; transform-origin: 50% 100%; transform: scaleY(var(--h, .1)); opacity: 1; transition: transform .5s var(--ld-spring), background-color .25s, opacity .25s; }
.ld-hist i.out { background: #d8d8d8; transform: scaleY(calc(var(--h, .1) * .55)); opacity: .8; }
.ld-hist-cap { display: flex; justify-content: space-between; margin: 4px 2px 0; font-size: 11px; font-weight: 700; color: #777; }
.ld-hist-cap b { color: #111; font-variant-numeric: tabular-nums; }

/* ── Banner lifestyle (#049): ảnh nền lệch lớp, chữ nổi lên ── */
.lb-item { overflow: hidden; }
.lb-item__bg { transition: transform 1.2s var(--ld-ease); will-change: transform; }
.lb-item__body { transition: transform .7s var(--ld-spring); }
@media (hover: hover) { .lb-item:hover .lb-item__bg { transform: scale(1.08) translate(var(--bx, 0px), var(--by, 0px)); } .lb-item:hover .lb-item__body { transform: translateY(-8px); } }
body .trust-item { transition: transform .45s var(--ld-spring); }
@media (hover: hover) { body .trust-item:hover { transform: translateY(-3px); } }
body .trust-item__icon { transition: transform .5s var(--ld-spring), background-color .25s, color .25s; }
@media (hover: hover) { body .trust-item:hover .trust-item__icon { transform: rotate(-10deg) scale(1.15); } }
body .brand-chip, body .cat-info-bar a, body .cat-info-bar .chip { transition: transform .35s var(--ld-spring), background-color .2s, color .2s; }

/* ── Trang sản phẩm: zoom ảnh theo con trỏ, thumb, FAQ, routine, gửi đánh giá ── */
.pdp-main-img-wrap .swiper-slide { overflow: hidden; }
.pdp-main-img-wrap .swiper-slide img { transition: transform .5s var(--ld-ease); transform-origin: var(--zx, 50%) var(--zy, 50%); will-change: transform; }
@media (hover: hover) { .pdp-main-img-wrap.ld-zoom .swiper-slide-active img { transform: scale(1.9); cursor: zoom-in; transition-duration: .25s; } }
.pdp-thumb-item { transition: transform .4s var(--ld-spring), box-shadow .3s, opacity .25s; }
@media (hover: hover) { .pdp-thumb-item:hover { transform: translateX(3px) scale(1.04); } }
.pdp-thumb-item.active { box-shadow: 0 0 0 2px #111; }
.pf-item { transition: box-shadow .35s var(--ld-ease), border-color .3s; }
.pf-item:has(.collapse.show), .pf-item:has(.collapsing) { box-shadow: 0 18px 30px -24px rgba(0,0,0,.4); }
.pf-item__arrow { transition: transform .5s var(--ld-spring), color .25s; }
.pf-item__q[aria-expanded="true"] .pf-item__arrow { transform: rotate(180deg); }
.pf-item__q { transition: background-color .25s; }
.routine-card { transition: transform .5s var(--ld-spring), box-shadow .4s var(--ld-ease); }
@media (hover: hover) { .routine-card:hover { transform: translateY(-4px); box-shadow: 0 24px 38px -26px rgba(0,0,0,.45); } .routine-card:hover .routine-card__cta { transform: rotate(90deg) scale(1.12); } .routine-card:hover .routine-card__img img { transform: scale(1.08); } }
.routine-card__cta { transition: transform .5s var(--ld-spring), background-color .2s; }
.routine-card__img img { transition: transform .8s var(--ld-ease); }
.rv-submit-btn .ld-plane { display: inline-block; margin-right: 6px; transition: transform .8s var(--ld-ease), opacity .4s; }
.rv-submit-btn.ld-go .ld-plane { transform: translate(60px,-34px) rotate(-14deg) scale(.6); opacity: 0; }

/* ── Giỏ hàng: tóm tắt đơn, xe tải miễn ship, nút thanh toán ── */
body .order-summary { border-radius: 18px; box-shadow: 0 0 0 1px rgba(17,17,17,.07), 0 24px 44px -32px rgba(17,17,17,.5); }
body .os-val { font-variant-numeric: tabular-nums; }
body .btn-checkout-main { position: relative; overflow: hidden; transition: transform .35s var(--ld-spring), box-shadow .3s var(--ld-ease); }
body .btn-checkout-main .btn-checkout-arrow { display: inline-block; transition: transform .45s var(--ld-spring); }
@media (hover: hover) { body .btn-checkout-main:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgba(17,17,17,.6); } body .btn-checkout-main:hover .btn-checkout-arrow { transform: translateX(6px); } }
body .btn-checkout-main:active { transform: scale(.97); }
.ld-truck { position: relative; height: 34px; margin: 6px 2px 8px; }
.ld-truck .tr { position: absolute; left: 0; right: 0; top: 24px; height: 3px; border-radius: 2px; background: #e4e4e4; }
.ld-truck .tr i { position: absolute; inset: 0; border-radius: inherit; background: #111; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 1s cubic-bezier(.5,0,.2,1); }
.ld-truck .tk { position: absolute; left: 0; top: 0; width: 34px; height: 26px; margin-left: -17px; transform: translateX(var(--x, 0px)); transition: transform 1s cubic-bezier(.5,0,.2,1); }
.ld-truck .tk svg { display: block; width: 34px; height: 26px; }
.ld-truck.moving .tk svg { animation: ld-bump .25s ease-in-out infinite; }
.ld-truck.free .tr i { background: #00a650; }
@keyframes ld-bump { 50% { transform: translateY(-2px) rotate(-1deg); } }
.ld-truck .fl { position: absolute; right: 0; top: 14px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #00a650; color: #fff; font-size: 10px; transform: scale(0); transition: transform .5s var(--ld-spring) .3s; }
.ld-truck.free .fl { transform: none; }

/* ── Chi nhánh: giá, thông tin, Flash Booking ── */
.branch-price-card, .branch-info-item { transition: transform .5s var(--ld-spring), box-shadow .4s var(--ld-ease); }
@media (hover: hover) { .branch-price-card:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -28px rgba(0,0,0,.4); } .branch-info-item:hover { transform: translateX(4px); } }
.fb-overlay.is-open .fb-panel { animation: ld-panel .55s var(--ld-spring); }
@keyframes ld-panel { from { opacity: 0; transform: translateY(24px) scale(.94); } }
.fb-input { transition: box-shadow .35s var(--ld-ease), border-color .2s; border-radius: 12px; }
.fb-input:focus { border-color: #111; box-shadow: 0 0 0 4px rgba(17,17,17,.08); outline: none; }
.fb-dots { display: flex; gap: 6px; margin: 0 0 12px; }
.fb-dots i { flex: 1; height: 3px; border-radius: 2px; background: #e4e4e4; position: relative; overflow: hidden; }
.fb-dots i::after { content: ""; position: absolute; inset: 0; background: #111; transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s var(--ld-ease); }
.fb-dots i.on::after { transform: scaleX(1); }
.flash-booking-cta { transition: transform .35s var(--ld-spring), box-shadow .3s; }
@media (hover: hover) { .flash-booking-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -14px rgba(208,2,27,.6); } }
.flash-booking-cta:active, .branch-nearby-btn:active { transform: scale(.96); }
.branch-nearby-btn { transition: transform .35s var(--ld-spring), box-shadow .3s; }

@media (prefers-reduced-motion: reduce) {
  .dropdown-menu.show, .fb-overlay.is-open .fb-panel { animation: none !important; }
  .ld-hist i, .ld-truck .tr i, .ld-truck .tk { transition-duration: .001ms; }
  .pdp-main-img-wrap.ld-zoom .swiper-slide-active img { transform: none; }
}