/* Trang con: sản phẩm · tin tức · chi nhánh · đơn hàng/tài khoản — Lucian UX/UI Prompt (MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/)
   #039 thanh tab/neo trượt · #040 menu tài khoản · #022 tim nổ · #008 nút sao chép đổi thành dấu tick · #012 pháo giấy · #027 ô tìm lọc tức thì · #018 số chạy · #067 trạng thái mở/đóng.
   JS đi kèm: lx-sub.js. Chỉ animate transform/opacity. */
:root { --ls-ease: cubic-bezier(.2,.8,.2,1); --ls-spring: cubic-bezier(.34,1.45,.64,1); }

/* ── Sản phẩm: thanh neo + mua nhanh (ghim dưới header) ── */
.lxs-ph { margin: 0; }
.lxs-bar { z-index: 90; display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(17,17,17,.08), 0 20px 36px -24px rgba(17,17,17,.5); border-radius: 0 0 18px 18px; opacity: 0; transform: translateY(-14px); pointer-events: none; transition: opacity .35s var(--ls-ease), transform .5s var(--ls-spring); }
.lxs-bar.lxs-fix { position: fixed; opacity: 1; transform: none; pointer-events: auto; }
.lxs-tabs { position: relative; display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lxs-tabs::-webkit-scrollbar { display: none; }
.lxs-tabs a { position: relative; z-index: 1; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #555 !important; text-decoration: none !important; white-space: nowrap; transition: color .3s var(--ls-ease); }
.lxs-tabs a.on { color: #fff !important; }
.lxs-knob { position: absolute; z-index: 0; top: 0; left: 0; border-radius: 999px; background: #111; pointer-events: none; box-shadow: 0 10px 18px -10px rgba(0,0,0,.6); transition: transform .5s var(--ls-spring), width .5s var(--ls-spring), height .5s var(--ls-spring), opacity .3s; }
.lxs-buy { display: flex; align-items: center; gap: 10px; flex: none; }
.lxs-buy img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #f2f2f2; }
.lxs-buy .nm { max-width: 190px; font-size: 12.5px; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lxs-buy .pr { font-size: 14px; font-weight: 800; color: #d0021b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lxs-buy button { height: 40px; padding: 0 18px; border: 0; border-radius: 12px; background: #111; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; position: relative; overflow: hidden; transition: transform .35s var(--ls-spring), box-shadow .3s; }
.lxs-buy button:hover { transform: translateY(-2px); box-shadow: 0 14px 22px -12px rgba(0,0,0,.6); } .lxs-buy button:active { transform: scale(.95); }
.lxs-nudge { animation: lxs-no .5s var(--ls-ease); } 
@keyframes lxs-no { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@media (max-width: 767px) { .lxs-bar, .lxs-ph { display: none !important; } }
.pdp-main-img-wrap { position: relative; }
.lxs-count { position: absolute; right: 12px; bottom: 12px; z-index: 5; padding: 4px 11px; border-radius: 999px; background: rgba(17,17,17,.75); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; backdrop-filter: blur(4px); pointer-events: none; }
.lxs-count b { display: inline-block; }
.lxs-count.bump b { animation: lxs-up .45s var(--ls-spring); }
@keyframes lxs-up { from { transform: translateY(60%); opacity: 0; } }
/* tim nổ (#022) */
.pdp-btn-wish { position: relative; overflow: visible !important; }
.lxs-burst { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 99995; }
.lxs-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c, #e5484d); opacity: 0; }
.lxs-burst::before { content: ""; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #e5484d; opacity: 0; animation: lxs-ring .6s var(--ls-ease); }
@keyframes lxs-ring { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.pdp-btn-wish.lxs-pop i, .pdp-btn-wish.lxs-pop svg { animation: lxs-heart .6s var(--ls-spring); color: #e5484d; }
@keyframes lxs-heart { 0% { transform: scale(1); } 25% { transform: scale(.7); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* sao chép (#008) */
.lxs-copy { position: relative; }
.lxs-copy .ck { display: inline-grid; place-items: center; width: 0; height: 16px; overflow: hidden; margin-left: 0; vertical-align: -3px; color: #00a650; transition: width .35s var(--ls-spring), margin .35s var(--ls-spring); }
.lxs-copy .ck svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; }
.lxs-copy.done .ck { width: 16px; margin-left: 6px; } .lxs-copy.done .ck svg { stroke-dashoffset: 0; transition: stroke-dashoffset .4s var(--ls-ease) .1s; }
.lxb-anchor { position: absolute; left: -34px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border: 0; padding: 0; border-radius: 8px; background: #f0f0f0; color: #555; display: grid; place-items: center; cursor: pointer; opacity: 0; transform: scale(.7); transition: opacity .25s, transform .4s var(--ls-spring), background-color .2s; }
.lxb-anchor svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.blog-content :is(h2, h3, h4):hover > .lxb-anchor, .lxb-anchor:focus-visible, .lxb-anchor.done { opacity: 1; transform: none; }
.lxb-anchor.done { background: #00a650; color: #fff; }
@media (max-width: 991px) { .lxb-anchor { display: none; } }
.blog-content :is(h2, h3, h4)[id] { position: relative; scroll-margin-top: 110px; }

/* ── Chi nhánh: trạng thái mở/đóng, thanh hành động mobile, ô tìm lọc ── */
.lxs-open { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 10px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 800; white-space: nowrap; background: rgba(0,166,80,.12); color: #00803d; }
.lxs-open::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: lxs-pulse 1.8s ease-in-out infinite; }
.lxs-open.soon { background: rgba(240,165,0,.16); color: #a16a00; } .lxs-open.off { background: rgba(0,0,0,.07); color: #777; } .lxs-open.off::before { animation: none; }
@keyframes lxs-pulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 0 5px transparent; opacity: .6; } }
.lxs-find { position: relative; max-width: 460px; margin: 0 auto 18px; }
.lxs-find input { width: 100%; height: 48px; padding: 0 46px 0 46px; border: 0; border-radius: 999px; background: #f2f2f2; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .3s var(--ls-ease), background-color .25s; }
.lxs-find input:focus { background: #fff; box-shadow: inset 0 0 0 2px #111, 0 0 0 5px rgba(17,17,17,.08); outline: none; }
.lxs-find > i { position: absolute; left: 18px; top: 50%; margin-top: -8px; color: #888; pointer-events: none; }
.lxs-find .n { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 800; color: #888; font-variant-numeric: tabular-nums; }
.lxs-empty { grid-column: 1 / -1; width: 100%; padding: 40px 10px; text-align: center; color: #888; font-weight: 600; }
.lxs-hide { opacity: 0 !important; transform: scale(.94); pointer-events: none; transition: opacity .25s, transform .3s var(--ls-ease); }
#branch-list .row > .col { transition: opacity .3s var(--ls-ease), transform .4s var(--ls-spring); }

/* ── Tài khoản & đơn hàng ── */
.account-menu-list { position: relative; }
.account-menu-list li a { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; transition: color .3s var(--ls-ease), transform .4s var(--ls-spring); }
.account-menu-list li a i { transition: transform .5s var(--ls-spring); }
@media (hover: hover) { .account-menu-list li a:hover i { transform: scale(1.2) rotate(-8deg); } .account-menu-list li a:hover { transform: translateX(4px); } }
.account-menu-list.lxs-js li a.active { color: #fff !important; background: transparent !important; }
.account-menu-list .lxs-knob { border-radius: 12px; }
.order-filter { position: relative; }
.order-filter .status-chip { position: relative; z-index: 1; border-radius: 14px; transition: color .3s var(--ls-ease), transform .4s var(--ls-spring); }
.order-filter .status-chip i { transition: transform .5s var(--ls-spring); }
@media (hover: hover) { .order-filter .status-chip:hover i { transform: translateY(-3px) scale(1.15); } }
.order-filter.lxs-js .status-chip.active { color: #fff !important; } .order-filter.lxs-js .status-chip.active .count { background: #fff; color: #111; }
.order-filter .status-chip .count { animation: lxs-up .6s var(--ls-spring) backwards; }
.order-filter .lxs-knob { border-radius: 16px; }
.lxs-st { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #f0f0f0; color: #555; white-space: nowrap; }
.lxs-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lxs-st.s0 { background: rgba(240,165,0,.15); color: #a16a00; } .lxs-st.s1 { background: rgba(26,115,232,.12); color: #1a60c8; } .lxs-st.s2 { background: rgba(0,166,80,.12); color: #00803d; } .lxs-st.s9 { background: rgba(208,2,27,.1); color: #b00018; }
#example tbody tr { transition: background-color .2s; } #example tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #111; }
.btn-icon { transition: transform .35s var(--ls-spring), background-color .2s, color .2s !important; } .btn-icon:hover { transform: translateY(-2px) scale(1.06); } .btn-icon:active { transform: scale(.9); }

/* ── Pháo giấy trang đặt hàng thành công (#012) ── */
.lxs-conf { position: fixed; left: 0; top: 0; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; z-index: 99990; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) { .lxs-bar, .lxs-knob { transition-duration: .001ms !important; } .lxs-open::before { animation: none; } }

/* ── Chi tiết đơn / giỏ: dòng sản phẩm vào lần lượt, ảnh zoom nhẹ ── */
.product-item { animation: lxs-up .6s var(--ls-spring) backwards; }
.product-item:nth-child(2) { animation-delay: .06s; } .product-item:nth-child(3) { animation-delay: .12s; } .product-item:nth-child(n+4) { animation-delay: .18s; }
.product-item td.image img { transition: transform .7s var(--ls-ease); }
@media (hover: hover) { .product-item:hover td.image img { transform: scale(1.08); } }
.cart-total-table td.text-right { font-variant-numeric: tabular-nums; }