/* Chuyển động phản hồi thao tác; giữ nguyên chuyển động cảnh trang chủ. */
:root { --unit-ease: cubic-bezier(.2,.7,.2,1); }
/* Điều hướng vẫn dùng MVC và lịch sử trình duyệt, không chặn liên kết. */
@view-transition { navigation: auto; }
.unit-header { view-transition-name: unit-header; }
body[data-shop-page=true] #main { view-transition-name: unit-shop-page; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
::view-transition-old(unit-header), ::view-transition-new(unit-header) { animation: none; mix-blend-mode: normal; }
::view-transition-old(unit-shop-page) { animation: unit-page-out 140ms ease-in both; }
::view-transition-new(unit-shop-page) { animation: unit-page-in 240ms var(--unit-ease) both; }
@keyframes unit-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes unit-page-out { to { opacity: 0; } }
.unit-cart-flight { position: fixed; z-index: 120; width: 56px; height: 70px; object-fit: cover; border: 1px solid #ffffffb3; border-radius: 4px; box-shadow: 0 8px 24px #102d4b30; pointer-events: none; }
.cart-feedback { min-height: 1.5em; color: #245e72; font-size: .88rem; margin: 10px 0 18px; }
.product-purchase-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.product-purchase-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.product-purchase-buttons .button { min-width: 0; padding-inline: 12px; gap: 0; }
.product-purchase-form .cart-feedback { margin: 0; min-height: 0; }
.product-purchase-form .cart-feedback:empty { display: none; }
@media (max-width: 400px) { .product-purchase-buttons { grid-template-columns: minmax(0, 1fr); } }
.is-submitting .button[aria-busy=true]::after { content: ''; width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-left: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: unit-submit-spin 700ms linear infinite; }
@keyframes unit-submit-spin { to { transform: rotate(360deg); } }
.detail-image img { transform-origin: center; }
.product-card { transition: box-shadow 260ms var(--unit-ease); border-radius: 5px; }
.product-image { border-radius: 5px; }
.product-image img { transition: transform 550ms var(--unit-ease); }
.product-card:focus-within { box-shadow: 0 10px 26px #102d4b14; }
.quick-view { transition: transform 280ms var(--unit-ease); }
.button { position: relative; isolation: isolate; overflow: hidden; transition: background 180ms ease, box-shadow 240ms ease, transform 180ms var(--unit-ease); }
.button:not(:disabled):active { transform: scale(.975); }
.button:focus-visible, .coupon-copy:focus-visible { outline: 3px solid #5b9edf; outline-offset: 4px; }
.unit-button-wave { position: absolute; z-index: -1; border-radius: 50%; background: currentColor; opacity: .18; pointer-events: none; }
.variant { transition: background 180ms ease, border-color 180ms ease, color 180ms ease; }
.variant:hover { border-color: var(--blue); background: #edf3fa; }
.variant.selected:hover { background: var(--ink); }
.header-icon svg { transition: transform 220ms var(--unit-ease); }

/* Vé ưu đãi: đường xé, dấu cắt và ánh sáng đi qua một lần khi xuất hiện. */
.promotion-code { position: relative; isolation: isolate; overflow: hidden; gap: 18px; padding: 0; border: 1px solid #c7e4ff; border-radius: 12px; background: linear-gradient(115deg,#f3f9ff,#d6eafa); color: #102d4b; box-shadow: 0 12px 30px #00162930; }
.promotion-code::before { content: ''; position: absolute; z-index: -1; inset: -80% -30%; background: linear-gradient(110deg,transparent 40%,#fff9 50%,transparent 60%); transform: translateX(-80%); pointer-events: none; }
.promotion-code::after { content: ''; position: absolute; right: 125px; top: 0; bottom: 0; border-left: 1px dashed #718da6; pointer-events: none; }
.promotion-code:has(.coupon-copy[hidden])::after { display: none; }
.coupon-text { padding: 15px 20px; min-width: 0; flex: 1; }
.promotion-code .coupon-text span { display: block; color: #42647e; font-size: .75rem; margin-bottom: 3px; }
.promotion-code strong { display: block; color: #102d4b; font-size: 1.35rem; letter-spacing: .06em; user-select: all; }
.coupon-copy { align-self: stretch; min-width: 126px; min-height: 54px; border: 0; padding: 14px; background: transparent; color: #102d4b; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background 200ms ease; }
.coupon-copy[hidden] { display: none; }
.coupon-copy svg { width: 18px; height: 18px; flex: none; }
.promotion-code .coupon-copy span { color: inherit; font-size: .78rem; font-weight: 700; }
.coupon-copy:hover { background: #ffffff70; }
.coupon-copy:focus-visible { outline-offset: -5px; }
.coupon-copy:disabled { cursor: wait; }
.promotion-code.is-copied { border-color: #a9dfcc; background: #e7f6ef; }
.promotion-code.is-copied .coupon-copy { color: #17664a; }
.promotion-copy > p.coupon-status { min-height: 1.4em; margin: 8px 0 0; font-size: .8rem; color: #e0f2ff; }
.coupon-spark { position: absolute; z-index: 3; width: 5px; height: 8px; border-radius: 2px; pointer-events: none; background: #2269aa; }
.promotion-time { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; background: #ffffff24; pointer-events: none; }
.promotion-time > span { display: block; height: 100%; background: #c6e5ff; transform: scaleX(0); transform-origin: left; }
.promotion-dots button span { transition: width 220ms var(--unit-ease), background 180ms ease; }
.promotion-dots button[aria-pressed=true] span { width: 22px; }
.promotion-controls button { transition: background 180ms ease, transform 180ms var(--unit-ease); }
.promotion-controls button:not(:disabled):active { transform: scale(.94); }
@keyframes unit-coupon-sheen { to { transform: translateX(80%); } }
@media (hover:hover) and (pointer:fine) {
    .product-card:hover { box-shadow: 0 12px 30px #102d4b16; }
    .product-image:hover img { transform: scale(1.06); }
    .header-icon:hover svg { transform: translateY(-2px); }
}
@media (prefers-reduced-motion:no-preference) {
    .promotion-code.coupon-enter::before { animation: unit-coupon-sheen 900ms ease-out both; }
}
@media (min-width:701px) {
    .lookbook-promotions .promotion-copy > p.coupon-status { grid-column: 2; grid-row: 5; }
}
@media (max-width:700px) {
    .promotion-code { display: flex; width: 100%; gap: 0; }
    .coupon-text { padding: 13px 12px; }
    .promotion-code strong { font-size: 1.05rem; }
    .coupon-copy { min-width: 104px; padding: 10px; }
    .promotion-code::after { right: 104px; }
}
@media (prefers-reduced-motion:reduce) {
    @view-transition { navigation: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .unit-cart-flight { display: none; }
    .is-submitting .button[aria-busy=true]::after { animation: none; }
    .product-card, .product-image img, .variant, .button, .quick-view { transition: none; }
    .product-image:hover img, .header-icon:hover svg, .button:not(:disabled):active, .promotion-controls button:not(:disabled):active { transform: none; }
    .unit-button-wave, .coupon-spark, .promotion-time { display: none; }
}
@media print { .coupon-copy, .coupon-status, .coupon-spark, .promotion-time { display: none; } }
/* Dải thông điệp tự chạy, giữ nguyên bảng màu UNIT. */
.unit-announcement.shop-announcement { gap: 14px; min-height: 42px; padding-block: 0; }
.shop-ticker-viewport { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.shop-ticker-track { display: flex; width: max-content; }
.shop-ticker-group { display: flex; flex: none; align-items: center; width: max-content; }
.shop-ticker-item { display: inline-flex; align-items: center; flex: none; padding: 10px 30px 10px 0; white-space: nowrap; }
.shop-ticker-item + .shop-ticker-item::before { content: ''; width: 4px; height: 4px; margin-right: 30px; background: #9bccef; border-radius: 50%; }
.shop-announcement.is-running .shop-ticker-viewport { overflow: hidden; }
.shop-ticker-pause { flex: 0 0 60px; align-self: stretch; padding: 0 12px; border: 0; border-left: 1px solid #ffffff36; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.shop-ticker-pause:hover { background: #ffffff12; }
.shop-ticker-pause:focus-visible { outline: 2px solid #badfff; outline-offset: -3px; }
.shop-announcement > a { flex: none; }
@media(max-width:600px) {
    .unit-announcement.shop-announcement { min-height: 40px; gap: 0; padding-inline: 12px; font-size: .72rem; }
    .shop-ticker-pause { flex-basis: 48px; padding-inline: 8px; }
}