/* Lớp giao diện Lucian UX/UI Prompt cho website — MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/
   Mẫu: #006 nút ink-ripple · #027 ô tìm kiếm · #048 tab gạch chân trượt · #050 card spotlight · #018 stepper số lăn · #019 chip size · #042 thanh bước · #051 bay vào giỏ.
   Giữ nguyên phong cách đen–trắng–đỏ của 4RAU; chỉ thêm chuyển động/phản hồi. Chỉ animate transform/opacity (không gây dịch bố cục → không ảnh hưởng CLS).
   Selector có tiền tố `body` để thắng CSS inline của từng view. JS đi kèm: lx-shop.js. */
:root { --lx-ease: cubic-bezier(.2,.8,.2,1); --lx-spring: cubic-bezier(.34,1.45,.64,1); --lx-ink: #111; --lx-red: #d0021b; --lx-ring: rgba(17,17,17,.1); }

/* ── Nút ───────────────────────────────────────────────────── */
body .pdp-btn, body .btn-ecom, body .rv-submit-btn, body .pca-btn { transition: transform .35s var(--lx-spring), box-shadow .3s var(--lx-ease), background-color .2s, border-color .2s, color .2s, opacity .2s; }
body .pdp-btn, body .btn-ecom, body .rv-submit-btn { position: relative; overflow: hidden; }
@media (hover: hover) {
  body .pdp-btn:not(:disabled):hover, body .btn-ecom:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 14px 24px -14px rgba(17,17,17,.55); }
  body .pca-btn:not(:disabled):hover { transform: translateY(-2px) scale(1.06); }
}
body .pdp-btn:not(:disabled):active, body .btn-ecom:not(:disabled):active, body .rv-submit-btn:not(:disabled):active, body .pca-btn:active, body .btn:not(:disabled):active { transform: scale(.96); }
body .btn { transition: transform .3s var(--lx-spring), background-color .2s, border-color .2s, color .2s, box-shadow .25s; }
.lx-rip { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22; transform: translate(-50%,-50%) scale(0); animation: lx-rip .65s var(--lx-ease) forwards; }
@keyframes lx-rip { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--lx-ink); outline-offset: 3px; }

/* ── Ô tìm kiếm trên header (#027) ─────────────────────────── */
body #site-search { transition: box-shadow .35s var(--lx-ease), border-color .25s, background-color .25s; }
body #site-search:focus { border-color: var(--lx-ink) !important; box-shadow: 0 0 0 4px rgba(17,17,17,.08); outline: none; background: #fff; }
body .search-btn { transition: transform .35s var(--lx-spring), color .2s; }
body .search-btn:hover { transform: scale(1.15) rotate(-8deg); }

/* ── Thanh danh mục: gạch chân trượt (#048) ────────────────── */
.cat-nav__scroll { position: relative; }
.cat-nav__scroll.lx-js .cat-nav__item.active { border-bottom-color: transparent !important; }
.lx-ul { position: absolute; left: 0; top: 0; height: 2px; border-radius: 2px; background: var(--lx-ink); pointer-events: none; transition: transform .5s var(--lx-spring), width .5s var(--lx-spring), background-color .3s; }
.cat-nav__item { transition: color .25s var(--lx-ease); }

/* ── Thẻ sản phẩm (#050): ảnh zoom nhẹ, vệt sáng theo con trỏ, nút nổi lên ─ */
.product-card .product-thumb img, .pc .pc__img { transition: transform .9s var(--lx-ease); will-change: transform; }
.product-card .product-thumb::after, .pc .pc__thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 70%); }
@media (hover: hover) {
  .product-card:hover .product-thumb img, .pc:hover .pc__img { transform: scale(1.05); }
  .product-card:hover .product-thumb::after, .pc:hover .pc__thumb::after { opacity: 1; }
  body .product-card, body .pc { transition: transform .5s var(--lx-spring), box-shadow .4s var(--lx-ease); }
  body .product-card:hover, body .pc:hover { transform: translateY(-4px); }
}
.product-card-actions .pca-btn { transition-delay: 0s; }
.product-card:hover .product-card-actions .pca-btn:nth-child(2) { transition-delay: .05s; }
.pc__thumb { position: relative; overflow: hidden; }

/* ── PDP: chip size (#019), ô số lượng (#018) ──────────────── */
body .pdp-size-radio label { border-radius: 999px; position: relative; overflow: hidden; transition: transform .35s var(--lx-spring), background-color .25s, border-color .25s, color .25s, box-shadow .3s; }
body .pdp-size-radio label:active { transform: scale(.93); }
body .pdp-size-radio input:checked + label { box-shadow: 0 10px 18px -10px rgba(17,17,17,.6); animation: lx-pop .4s var(--lx-spring); }
@keyframes lx-pop { 40% { transform: scale(1.1); } }
body .pdp-qty-box, body .qty-ctrl { border-radius: 999px !important; border-color: transparent !important; box-shadow: 0 0 0 1.5px #e4e4e4 inset, 0 12px 22px -18px rgba(17,17,17,.5); background: #fff; position: relative; }
body .pdp-qty-btn, body .qty-ctrl .btn-minus, body .qty-ctrl .btn-plus { border-radius: 50% !important; transition: transform .4s var(--lx-spring), background-color .2s !important; }
body .pdp-qty-box .pdp-qty-btn { width: 36px; height: 36px; margin: 0 3px; }
body .pdp-qty-btn:active, body .qty-ctrl .btn-minus:active, body .qty-ctrl .btn-plus:active { transform: scale(.84); }
body .pdp-qty-input, body .qty-ctrl .qty-input { border-left: 0 !important; border-right: 0 !important; background: transparent !important; }
.lx-roll-on input { color: transparent !important; caret-color: #111; text-shadow: none; }
.lx-roll { position: absolute; top: 0; left: 0; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; pointer-events: none; font-weight: 800; font-variant-numeric: tabular-nums; color: #111; }
.lx-roll .col { display: flex; flex-direction: column; transition: transform .5s var(--lx-spring); }
.lx-roll .col span { display: block; text-align: center; }
.lx-step-no { animation: lx-no .42s var(--lx-ease); }
@keyframes lx-no { 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
body .pdp-addon-card { transition: box-shadow .3s var(--lx-ease), border-color .25s, transform .4s var(--lx-spring); }
body .pdp-addon-card:active { transform: scale(.985); }

/* ── Giỏ hàng: bay vào giỏ (#051) + badge nảy ──────────────── */
.lx-fly { position: fixed; z-index: 100000; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 16px; background: #fff center/cover no-repeat; box-shadow: 0 14px 30px -10px rgba(0,0,0,.45); pointer-events: none; will-change: transform, opacity; }
.lx-bump { animation: lx-bump .6s var(--lx-spring); }
@keyframes lx-bump { 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(.92) rotate(4deg); } }
.mhdr-cart-count, [class*="cart-count"], .mini-cart .item-count { transition: transform .3s var(--lx-spring); }

/* ── Thanh bước thanh toán (#042) ──────────────────────────── */
body .ck-step__dot { transition: transform .45s var(--lx-spring), background-color .35s, box-shadow .35s, color .35s; }
body .ck-step--active .ck-step__dot { transform: scale(1.12); animation: lx-ring 2.4s ease-in-out infinite; }
@keyframes lx-ring { 0%, 100% { box-shadow: 0 0 0 3px rgba(17,17,17,.18); } 50% { box-shadow: 0 0 0 7px rgba(17,17,17,.06); } }
body .ck-step__line { position: relative; overflow: hidden; background: #e6e6e6; }
body .ck-step--done + .ck-step__line::after { content: ""; position: absolute; inset: 0; background: #111; transform-origin: 0 50%; animation: lx-line .9s var(--lx-ease) .15s backwards; }
@keyframes lx-line { from { transform: scaleX(0); } }
body .ck-step--done .ck-step__dot i { animation: lx-pop .5s var(--lx-spring) .1s backwards; }
body #form-payment .form-control { border-radius: 12px; transition: border-color .2s, box-shadow .35s var(--lx-ease), background-color .2s; }
body #form-payment .form-control:focus { border-color: #111; box-shadow: 0 0 0 4px rgba(17,17,17,.08); }

/* ── Hiện dần khi cuộn (chỉ phần tử dưới màn hình đầu tiên) ──── */
.lx-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--lx-ease), transform .8s var(--lx-ease); transition-delay: var(--d, 0s); }
.lx-rv.lx-in { opacity: 1; transform: none; }

/* ── Select (#031) trên website: hợp phong cách đen–trắng ───── */
body .lx-sel-btn { border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d6; min-height: 46px; }
body .lx-sel-btn:hover { box-shadow: inset 0 0 0 1px #999; }
body .lx-sel-btn:focus-visible, body .lx-sel.is-open .lx-sel-btn { box-shadow: inset 0 0 0 2px #111, 0 0 0 5px rgba(17,17,17,.08); }
body .lx-sel-btn:disabled { background: #eef0f2; }
.lx-sel-list .lx-sel-hl { background: #f3f3f3; }
.lx-sel-list .lx-sel-o[aria-selected="true"] { color: #111; }
.lx-sel-list .lx-sel-ck { stroke: #111; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .lx-rv { opacity: 1; transform: none; }
}