/* Hiệu ứng giao diện công khai (xem js/effects.js). Chỉ dùng transform/opacity. */
.js [data-reveal] { opacity: 0; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.js [data-reveal="up"], .js [data-reveal=""] { transform: translateY(28px); }
.js [data-reveal="zoom"] { transform: scale(.94); }
.js [data-reveal="left"] { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal].is-done { will-change: auto; transition-delay: 0ms; }

/* Slider: Ken Burns + thanh tiến trình */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.04); } }
.slide-move__item.active .slide-move__item-img { animation: kenburns 7s ease-out both; transform-origin: 50% 50%; }
.slide.is-paused .slide-move__item.active .slide-move__item-img,
.slide.is-paused .slide-progress { animation-play-state: paused; }
.slide-progress-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.25); pointer-events: none; z-index: 2; }
.slide-progress { height: 100%; width: 0; background: linear-gradient(90deg, #fff, #ffb3b6); transform-origin: left; }
@keyframes slide-progress { from { width: 0; } to { width: 100%; } }
.slide-progress.run { animation: slide-progress 6s linear forwards; }
.slide-up, .slide-back { transition: color .2s, transform .2s; }
.slide-up:hover, .slide-back:hover { color: #e4050f; transform: scale(1.12); }

/* Tiêu đề khối: gạch chân chạy */
.product-heading__title { position: relative; display: inline-block; }
.product-heading__title::after { content: ''; display: block; height: 3px; width: 56px; margin: 10px auto 0; background: #e4050f; border-radius: 2px; transform: scaleX(0); transition: transform .7s cubic-bezier(.2,.7,.2,1) .25s; }
.product-heading.is-in .product-heading__title::after,
.no-js-fallback .product-heading__title::after { transform: scaleX(1); }
html:not(.js) .product-heading__title::after { transform: scaleX(1); }

/* Thẻ sản phẩm */
.product-item, .product-item__btn { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.product-item { position: relative; overflow: hidden; }
.product-item__img { transition: transform .5s ease; }
.product-item::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-130%); pointer-events: none; }
@media (hover: hover) {
  .product:hover .product-item, .product:hover .product-item__btn { transform: translateY(-4px); }
  .product:hover .product-item { box-shadow: 0 12px 24px -10px rgba(0,0,0,.35); }
  .product:hover .product-item__img { transform: scale(1.05); }
  .product:hover .product-item::after { transform: translateX(260%); transition: transform .9s ease; }
}
@keyframes sale-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.product-item__sale { display: inline-block; animation: sale-pop 2.4s ease-in-out infinite; transform-origin: center; }

/* Nút: ánh sáng quét + vòng sáng nhẹ */
.see-all-link { display: inline-block; position: relative; padding: 4px 2px; transition: opacity .2s; }
.see-all-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.see-all-link:hover::after { transform: scaleX(1); }
.product-item__btn { overflow: hidden; }
.product-item__btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%); transform: translateX(-120%); animation: btn-shine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes btn-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Thương hiệu */
.look-book-item { transition: transform .3s ease; }
.look-book-image { transition: transform .4s ease, filter .3s; }
@media (hover: hover) {
  .look-book-item:hover { transform: translateY(-4px); }
  .look-book-item:hover .look-book-image { transform: scale(1.06); }
}

/* Thanh tiến độ cuộn + header */
#scroll-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 70; background: linear-gradient(90deg, #e4050f, #ff7a45); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.header { transition: box-shadow .3s, background-color .3s; }
.header.is-scrolled { box-shadow: 0 8px 22px -12px rgba(0,0,0,.35); background-color: rgba(255,255,255,.96); }
.btntop-img { transition: transform .3s; }
.btntop:hover .btntop-img { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .slide-move__item.active .slide-move__item-img, .slide-progress.run, .product-item__sale, .product-item__btn::after { animation: none !important; }
  .slide-progress-wrap { display: none; }
  .product-item::after, .product-item__btn::after { display: none; }
  .product-heading__title::after { transform: scaleX(1); transition: none; }
  .product:hover .product-item, .product:hover .product-item__btn, .product:hover .product-item__img, .look-book-item:hover, .look-book-item:hover .look-book-image { transform: none !important; }
}

/* ---- Slide vừa khung với phần sản phẩm bên dưới (cùng .grid.wide) ---- */
.grid.wide.slide-frame { margin-top: 32px; margin-bottom: 8px; }
.slide-frame .slide { border-radius: 16px; box-shadow: 0 10px 28px -14px rgba(0,0,0,.4); background: #f3f3f3; }
.slide-frame .slide-move__item-img { border-radius: 16px; display: block; float: none; }
@media (max-width: 1023px) { .grid.wide.slide-frame { margin-top: 0; } .slide-frame .slide { border-radius: 0 0 14px 14px; } .slide-frame .slide-move__item-img { border-radius: 0 0 14px 14px; } }

/* ---- Thương hiệu: băng chuyền chạy liên tục, rê chuột để dừng ---- */
.brand-marquee { overflow: hidden; padding: 6px 0 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.brand-marquee__track { display: flex; width: max-content; animation: brand-scroll var(--brand-time, 40s) linear infinite; will-change: transform; }
.brand-marquee:hover .brand-marquee__track, .brand-marquee:focus-within .brand-marquee__track { animation-play-state: paused; }
.brand-marquee__item { flex: 0 0 auto; width: 200px; margin: 0 12px; padding: 14px 12px 10px; background: #fff; border: 1px solid #eee; border-radius: 12px; text-decoration: none; transition: transform .3s, box-shadow .3s; }
.brand-marquee__item:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -14px rgba(0,0,0,.35); }
.brand-marquee__item .look-book-image { display: block; width: 100%; height: 110px; object-fit: contain; margin-bottom: 8px; }
@keyframes brand-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 739px) { .brand-marquee__item { width: 140px; margin: 0 8px; } .brand-marquee__item .look-book-image { height: 80px; } }
@media (prefers-reduced-motion: reduce) { .brand-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .brand-marquee__track { animation: none; } }