/* =============================================================
   OPENHUMAN STUDIO — Premium Streetwear (Rovant brand demo)
   v3 — Builder-ready: CSS vars for theme + spacing
   ============================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
:root {
  /* === Theme: fonts (editable via Builder > Theme tab) === */
  --font-heading: 'Satoshi', 'Inter', sans-serif;
  --font-body: Arial, 'Helvetica Neue', sans-serif;
  --font-serif: 'Playfair Display', 'Cormorant Garamond', serif;
  /* === Type-scale tokens — gom 1 chỗ, chỉnh cỡ chữ không cần rải !important === */
  --fs-section-title: clamp(15px, 2vw, 25px);  /* tiêu đề section: COLLECTION / REVIEWS / LOOKBOOK / ABOUT / STANDARD */
  --fs-pd-body: 17px;                          /* đoạn mô tả trang sản phẩm (desktop) */
  /* === Theme: colors === */
  --color-page-bg: #ffffff;
  --color-section-bg: #f9f8f6;
  --color-heading: #111111;
  --color-body: #1a1a1a;
  --color-accent: #1E884F;
  /* Unified vertical rhythm — one spacing for every section below the hero */
  --sec-pad: clamp(76px, 8vw, 112px);
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-page-bg);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; font: inherit; border: none; background: none; color: inherit; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

/* =============================================================
   ROVANT HEADER — luxury minimal
   Top: 82px transparent overlay → scroll 68px white #FFFFFF
   Left: 2 menu | Center: ROVANT logo | Right: 2 line icons
   ============================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  height: 82px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.55s ease,
              color 0.4s ease,
              height 0.3s ease,
              border-color 0.55s ease,
              box-shadow 0.3s ease,
              transform 0.32s ease;
}

/* Hide on scroll down, reveal on scroll up (toggled by main.js initHeader) */
.header.header-hidden { transform: translateY(-100%); }

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 0 clamp(20px, 4vw, 56px);
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* LEFT cluster: hamburger (mobile) + nav (desktop) */
.header-left {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 36px);
  justify-content: flex-start;
}

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: -8px;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.menu-toggle svg { display: block; }

/* DESKTOP NAV */
.nav {
  display: flex;
  gap: clamp(22px, 2.4vw, 38px);
  align-items: center;
  flex-wrap: nowrap;
}
.nav-link,
.nav-trigger {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #fff;
  background: transparent;
  border: 0;
  padding: 6px 0;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s ease;
  text-decoration: none;
}

/* Underline hover: left → right, 1px */
.nav-link::after,
.nav-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.nav-link:hover::after,
.nav-trigger:hover::after,
.nav-item.has-dropdown.is-open .nav-trigger::after {
  transform: scaleX(1);
}

.nav-caret {
  display: inline-block;
  transition: transform 0.22s ease;
  margin-top: 1px;
}
.nav-item.has-dropdown.is-open .nav-caret { transform: rotate(180deg); }

/* DROPDOWN — white sheet, premium minimal */
.nav-item.has-dropdown {
  position: relative;
}
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  transform: translateY(8px);
  min-width: 200px;
  background: #fcfcfc;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.04);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease,
              transform 0.22s ease,
              visibility 0.22s ease;
  z-index: 60;
}
.nav-item.has-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.dropdown a {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #111111;
  text-transform: none;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
  transition: opacity 0.2s;
  width: max-content;
}
.dropdown a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: #111;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}
.dropdown a:hover::after { transform: scaleX(1); }

/* CENTER LOGO */
.logo {
  font-family: var(--font-heading);
  font-size: clamp(33px, 3.6vw, 45px);
  font-weight: 700;
  letter-spacing: 6px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  transition: color 0.3s ease, font-size 0.3s ease;
}

/* RIGHT TOOLS */
.header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(6px, 1vw, 14px);
  color: #fff;
}
.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: 0;
  position: relative;
  line-height: 0;
  transition: opacity 0.2s ease;
}
.icon-btn:hover { opacity: 0.72; }
.icon-btn svg { display: block; }

/* Cart badge — minimal pill */
.cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  background: #fcfcfc;
  color: #111;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 10px;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* =============================================================
   HEADER SCROLLED — white #FFFFFF + dark text
   ============================================================= */
.header.is-scrolled {
  height: 68px;
  background: #fcfcfc;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: none;
}
.header.is-scrolled .nav-link,
.header.is-scrolled .nav-trigger,
.header.is-scrolled .logo,
.header.is-scrolled .menu-toggle,
.header.is-scrolled .icon-btn { color: #111111; }
.header.is-scrolled .logo { font-size: clamp(30px, 3.2vw, 39px); }
.header.is-scrolled .cart-count {
  background: #111;
  color: #fff;
}

/* =============================================================
   MOBILE DRAWER — slide from left
   ============================================================= */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 90;
}
.drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: #fcfcfc;
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.32s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-drawer.is-open { transform: translateX(0); }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.drawer-logo {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 5px;
  color: #111;
  text-decoration: none;
}
.drawer-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #111;
  padding: 0;
  line-height: 0;
}
.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 18px 26px 32px;
  gap: 4px;
}
.drawer-link {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: #111;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 14px 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.drawer-link:hover { opacity: 0.72; }
.drawer-caret {
  transition: transform 0.22s ease;
}
.drawer-group.is-open .drawer-caret { transform: rotate(180deg); }
.drawer-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  display: flex;
  flex-direction: column;
}
.drawer-group.is-open .drawer-sub { max-height: 280px; }
.drawer-sub a {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: #111;
  text-decoration: none;
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  opacity: 0.78;
  transition: opacity 0.2s ease;
}
.drawer-sub a:hover { opacity: 1; }

@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; }
  .nav { display: none; }
  .header-inner { padding: 0 18px; }
  .logo { letter-spacing: 4px; }
}

/* =============================================================
   S1 — HERO BANNER (start from top, header overlay)
   ============================================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  margin-top: 0;              /* no announcement bar, hero starts from top */
}
body.has-transparent-header .hero { padding-top: 0; }

/* =============================================================
   HERO BANNER — diagonal overlay slider
   Layer stack: image (clipped) ▸ overlay ▸ content
   Animation: new slide enters from top-right via clip-path + translate,
   slides over the previous one without disturbing its layer.
   ============================================================= */
.hero-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  /* Hidden by default — only is-active or is-entering is visible. */
  visibility: hidden;
  z-index: 1;
}

/* Current (bottom) slide — always rendered, full coverage */
.hero-slide.is-active {
  visibility: visible;
  z-index: 1;
}

/* Incoming (top) slide — animates in from top-right.
   clip-path sweeps a diagonal mask while translate brings the image to centre.
   Total duration ≈ 900ms, easing cubic-bezier(0.76,0,0.24,1). */
.hero-slide.is-entering {
  visibility: visible;
  z-index: 2;
  animation: hero-diagonal-enter 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  will-change: transform, clip-path;
}

@keyframes hero-diagonal-enter {
  0% {
    clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
    transform: translate(8%, -8%) scale(1.04);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translate(0, 0) scale(1);
  }
}

/* Image fills slide */
.hero-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Ẩn tag/title/CTA khi rỗng — sẽ tự hiện lại khi nhập trong admin */
.hero-tag:empty,
.hero-title:empty,
.hero-cta:empty { display: none; }

/* Lớp phủ tối chỉ bật khi slide CÓ chữ (cho dễ đọc). Banner trống chữ thì
   tắt phủ để ảnh hiện trong trẻo, sáng đúng bản gốc — không bị làm tối. */
.hero-slide:not(:has(.hero-tag:not(:empty), .hero-title:not(:empty), .hero-cta:not(:empty))) .hero-overlay {
  display: none;
}

/* Dark overlay for text readability — kept light (15–25%) */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.15) 45%,
    rgba(0,0,0,0.30) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Content layer */
.hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
  padding: 0 clamp(24px, 6vw, 80px);
  max-width: 1280px;
  margin: 0 auto;
}

/* Text fade-up only when slide becomes the active one */
.hero-slide .hero-tag,
.hero-slide .hero-title,
.hero-slide .hero-cta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero-slide.is-active .hero-tag,
.hero-slide.is-active .hero-title,
.hero-slide.is-active .hero-cta {
  opacity: 1;
  transform: translateY(0);
}
.hero-slide.is-active .hero-title { transition-delay: 0.08s; }
.hero-slide.is-active .hero-cta   { transition-delay: 0.16s; }

.hero-tag {
  font-family: var(--font-heading);
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 4px;
  font-weight: 500;
  margin-bottom: 20px;
  opacity: 0.92;
}
.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 32px;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.hero-cta {
  display: inline-block;
  background: #fcfcfc;
  color: #000;
  padding: 16px 38px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
  border: 1px solid #fff;
}
.hero-cta:hover {
  background: transparent;
  color: #fff;
}

/* Respect reduced motion: instant swap, no diagonal sweep */
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-entering { animation: none; clip-path: none; transform: none; }
  .hero-slide .hero-tag,
  .hero-slide .hero-title,
  .hero-slide .hero-cta { transition: none; transform: none; opacity: 1; }
}
/* =============================================================
   S2 — CATEGORY BLOCKS
   ============================================================= */
.categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 2px;
  background: #fcfcfc;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 3vw, 32px);
}
.cat-block {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  display: block;
}
.cat-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.cat-block:hover img { transform: scale(1.05); }
.cat-block-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%);
  color: #fff;
}
.cat-block-sub {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 8px;
  opacity: 0.8;
}
.cat-block-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 12px;
}
.cat-block-cta {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 2px;
  border-bottom: 1px solid #fff;
  padding-bottom: 4px;
  width: max-content;
}

/* =============================================================
   GENERIC SECTION
   ============================================================= */
.section {
  padding: clamp(50px, 8vw, 90px) 0;
}
.section-header {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 60px);
}
.section-tag {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 3px;
  color: #888;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #111;
}

/* =============================================================
   S3 — MARQUEE NEW ARRIVALS
   ============================================================= */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 18px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: clamp(32px, 5vw, 60px);
}
.marquee-track {
  display: inline-flex;
  gap: 60px;
  animation: marquee-scroll 30s linear infinite;
  white-space: nowrap;
}
.marquee-track span {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: 4px;
  color: transparent;
  -webkit-text-stroke: 1.5px #111;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =============================================================
   COLLECTION SECTIONS — CORE / ATELIER / PRIVATE
   White bg, minimal cards, text overlay center, hover swap + quick CTA
   ============================================================= */
.collection-section {
  background: var(--color-page-bg);
  padding: clamp(72px, 9vw, 120px) 0;
}
.collection-section + .collection-section {
  padding-top: 0; /* tighter rhythm between sibling collections */
}

.collection-header {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.collection-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #111111;
  margin: 0 0 10px;
  line-height: 1.1;
}
.collection-sub {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: #666666;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.4;
}

/* Grid layouts per section */
.collection-grid {
  display: grid;
  gap: clamp(10px, 1.6vw, 22px);
}
/* CORE: desktop 4 cols × 2 rows (8) / mobile 2 cols × 3 rows */
.collection-grid-core    { grid-template-columns: repeat(4, 1fr); }
/* ATELIER: desktop 4 cols × up to 2 rows */
.collection-grid-atelier { grid-template-columns: repeat(4, 1fr); }
/* PRIVATE: desktop 4 cols × 1 row (3 products + 1 gift set) */
.collection-grid-private { grid-template-columns: repeat(4, 1fr); }
/* Dynamic collections (managed via admin Collection Catalogue) */
.collection-grid-dyn     { grid-template-columns: repeat(4, 1fr); } /* desktop 4 cột/hàng */

@media (max-width: 980px) {
  .collection-grid-core,
  .collection-grid-atelier,
  .collection-grid-private,
  .collection-grid-dyn { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile (homepage): ảnh áo product card to hơn ~20% — tăng chiều cao khung ảnh
   (4:5 → 4:6 ≈ +20% chiều cao). Desktop & trang Shop giữ nguyên. */
@media (max-width: 768px) {
  .feature-collection .product-image-wrap { aspect-ratio: 4 / 6; }
}

/* =============================================================
   FEATURE COLLECTION — independent sections, each editable via builder.
   Spacing / size driven by inline CSS vars (set by main.js from config).
   ============================================================= */
.feature-collection {
  background: var(--color-page-bg);
  padding: var(--fc-pt, var(--sec-pad)) 0 var(--fc-pb, var(--sec-pad));
}
.feature-collection .collection-header {
  margin-bottom: var(--fc-title-mb, clamp(36px, 5vw, 56px));
}
.feature-collection .collection-title {
  font-size: var(--fc-title-fs, clamp(24px, 3.4vw, 42px));
}
.feature-collection .collection-grid {
  gap: var(--fc-gap, clamp(10px, 1.6vw, 22px));
}
.feature-collection .collection-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8a8a8a;
  margin: 0 0 12px;
}

/* =============================================================
   PRODUCT CARD — text overlay center, hover swap, quick actions
   ============================================================= */
.product-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.product-image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f7f7f7;
  margin-bottom: 14px;
}
.product-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.36s ease, transform 0.6s ease;
  display: block;
}
/* secondary image hidden by default — dùng nth-of-type để badge (span) không
   làm lệch chỉ số ảnh (nếu dùng nth-child, có badge sẽ ẩn nhầm ảnh đầu) */
/* Ảnh hover: CROSSFADE + ZOOM NHẸ. Mờ chồng (opacity 0→1) đồng thời phóng nhẹ
   (scale 1→1.05) — mượt, cao cấp, kín đáo. */
.product-image-wrap img:nth-of-type(2) {
  opacity: 0;
  z-index: 2;
  transform: scale(1);
  transition: opacity .3s ease, transform .5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Overlay removed — meta sits below image now, no legibility dark layer needed */

/* Hover swap (desktop / thiết bị có chuột): IRIS mở từ tâm — ĐỒNG BỘ với mobile.
   Hover → vòng tròn nở 0→80% + zoom 1.05→1; rời chuột → thu về tâm (đối xứng). */
@media (hover: hover) and (pointer: fine) {
  .product-image-wrap img:nth-of-type(2) {
    opacity: 1;
    clip-path: circle(0% at 50% 50%);
    transform: scale(1.05);
    transition: clip-path 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.58s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .product-card:hover .product-image-wrap img:nth-of-type(2) {
    clip-path: circle(80% at 50% 50%);
    transform: scale(1);
  }
  /* Ảnh đơn (không có ảnh hover): phóng nhẹ khi hover */
  .product-card:hover .product-image-wrap img:only-of-type { transform: scale(1.04); }
}

/* Meta block — sits BELOW image, centered. Name on top, price under. */
.product-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8px;
  color: #111111;
}
.product-name {
  font-family: var(--font-heading);
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0 0 6px;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-price {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0;
  color: #111111; /* giá màu đen như tên sản phẩm */
}

/* Badge — keep top-left, minimal */
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #fcfcfc;
  color: #111;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 9px;
  z-index: 3;
  text-transform: uppercase;
}
.product-badge.sale { background: #111; color: #FFFFFF; }

/* Stock panel — sits at the bottom inside the image wrap.
   Hidden by default, slides up on hover. Mobile: never shown. */
.product-cta-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  z-index: 4;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}
/* Viên nang tồn kho: 1 hàng, căn giữa, sát chân ảnh */
.card-stock {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0;
  padding: 0;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.22));
}

/* =============================================================
   STOCK CAPSULE — dùng chung cho product card & product page.
   Viên nang bo tròn kiểu Dynamic Island, chia ĐÔI 2 màu thương hiệu:
   nửa ĐEN (Đã bán, chữ trắng) + nửa TRẮNG (Còn lại, chữ đen),
   chất liệu kính mờ nhẹ (backdrop-blur), 2 nửa bằng nhau.
   ============================================================= */
.stock-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* nhãn + số nằm CHÍNH GIỮA mỗi nửa pill */
  gap: 8px;
  padding: 8px 16px;
  font-family: Arial, 'Helvetica Neue', sans-serif;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
}
/* 2 nửa bằng nhau (cùng rộng & cao) */
.card-stock .stock-pill { width: 118px; }
.stock-pill i {
  font-style: normal;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 1; /* chữ trắng hẳn (Đã bán) / đen hẳn (Còn lại), không làm mờ */
}
.stock-pill b {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Nửa trái — đen mực, bo tròn đầu trái */
.stock-sold {
  background: rgba(15, 15, 17, 0.88);
  color: #fff;
  border: 1px solid #111;
  border-right: none;
  border-radius: 999px 0 0 999px;
}
/* Nửa phải — trắng xương, bo tròn đầu phải */
.stock-left {
  background: rgba(255, 255, 255, 0.90);
  color: #111;
  border: 1px solid #111;
  border-left: none;
  border-radius: 0 999px 999px 0;
}
.stock-out {
  background: rgba(15, 15, 17, 0.88);
  color: #fff;
  border: 1px solid #111;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 9px 20px;
  justify-content: center;
}

/* ============================================================
   SOLD OUT — dải băng phủ ngang giữa ảnh (card + trang sản phẩm)
   ============================================================ */
.soldout-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2.2vw, 20px) 8px;
  background: rgba(216, 216, 216, 0.74);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  pointer-events: none;
}
.soldout-band span {
  color: #2b2b2b;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: clamp(2px, 0.5vw, 5px);
  font-size: clamp(13px, 2.2vw, 30px);
  line-height: 1;
  white-space: nowrap;
}
/* Card hết hàng: ảnh xám lại nhẹ để nhấn trạng thái */
.product-card.is-soldout .product-image-wrap img { filter: grayscale(0.35); }

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-cta-overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}
@media (hover: none), (max-width: 980px) {
  .product-cta-overlay { display: none; }
}

/* =============================================================
   GIFT SET CARD (sits inside PRIVATE grid as last cell)
   Distinct via thin border; same shape & meta layout.
   ============================================================= */
.gift-card .product-image-wrap {
  background: #fcfcfc;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.gift-card .product-price { opacity: 0.7; }

/* On very narrow mobile, optional full-width gift card */
@media (max-width: 480px) {
  .collection-grid-private .gift-card {
    grid-column: 1 / -1; /* full width on smallest screens */
  }
}

/* =============================================================
   S5 — TRUST BANNER
   ============================================================= */
.trust-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: var(--trust-pad-top, var(--sec-pad)) 0 var(--trust-pad-bot, var(--sec-pad));
  color: #fff;
  overflow: hidden;
  /* Admin-editable via /admin/theme.php */
}
.trust-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,20,0.85), rgba(15,15,20,0.92));
  z-index: 1;
}
.trust-banner > .container { position: relative; z-index: 2; }

.trust-header { text-align: center; margin-bottom: var(--trust-title-mb, clamp(40px, 5vw, 60px)); }
.trust-tag {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 3px;
  opacity: 0.7;
  margin-bottom: 12px;
}
.trust-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--trust-gap, clamp(20px, 3vw, 40px));
}
.trust-item {
  text-align: center;
  padding: 24px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.trust-item:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-3px);
}
.trust-icon {
  font-size: 36px;
  margin-bottom: 16px;
  opacity: 0.9;
}
.trust-item h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.trust-item p {
  font-size: 13px;
  opacity: 0.75;
  line-height: 1.6;
}

/* =============================================================
   S6 — COLLECTIONS (4 cards)
   ============================================================= */
.collections-section {
  background: var(--color-section-bg);
  padding: var(--col-pad-top, var(--sec-pad)) 0 var(--col-pad-bot, var(--sec-pad));
  /* Admin-editable via /admin/theme.php — overrides .section default */
}
.collections-section .section-header {
  margin-bottom: var(--col-title-mb, clamp(32px, 4vw, 60px));
}
.collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--col-gap, clamp(16px, 2vw, 28px));
}
.collection-card {
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #1a1a1a;
}
.collection-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, opacity 0.4s;
}
.collection-card:hover img {
  transform: scale(1.06);
  opacity: 0.85;
}
.collection-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: #fff;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.65) 100%);
}
.collection-num {
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  opacity: 0.85;
}
.collection-info h3 {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.collection-info p {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}
.collection-cta {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 3px;
  width: max-content;
  transition: border-color 0.2s;
}
.collection-card:hover .collection-cta { border-color: #fff; }

/* =============================================================
   LOOKBOOK & VIBES — image-only marquee gallery
   Bg #FFFFFF · Title only, no subtext/CTA/arrows/dots
   Desktop: 5 ảnh @ 20vw · Tablet: 3 @ 33.33vw · Mobile: 2.25 @ 44vw
   gap: 0 · seamless loop via translateX(-50%) on duplicated set.
   ============================================================= */
.rovant-lookbook {
  background: var(--color-page-bg);
  padding: var(--sec-pad) 0 0;
  overflow: hidden;
}

.rl-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #111111;
  text-align: center;
  margin: 0 0 clamp(24px, 4vw, 48px);
  line-height: 1.05;
}

/* Marquee viewport — full width, no scrollbar */
.rl-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: var(--sec-pad);
}

.rl-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  /* --rl-duration is set per-site from admin builder (LOOKBOOK & VIBES → Tốc độ chạy).
     Higher value = slower. Default 60s (slower than the old 38s). */
  animation: rl-scroll-rtl var(--rl-duration, 60s) linear infinite;
  will-change: transform;
}

@keyframes rl-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* One set of images = half the track (the loop point) */
.rl-set {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 0;
}

/* Each image cell — sit flush (gap: 0) */
.rl-image {
  flex: 0 0 20vw;        /* desktop: 5 images per viewport */
  aspect-ratio: 1 / 1; height: auto; /* ảnh luôn vuông 1:1, crop từ tâm */
  margin: 0;
  overflow: hidden;
  position: relative;
  background: #f7f7f7;
}

.rl-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  backface-visibility: hidden;
}

/* No hover effect — images scroll undisturbed when the cursor is over them */

/* Product gallery curtain — sweeps across the stage during slide change */
.pd-curtain {
  position: absolute;
  inset: 0;
  background: #111;
  z-index: 5;
  pointer-events: none;
  transform: translateY(101%);
  will-change: transform;
}

/* Empty image slot (no src) — collapse so admin can leave slots blank */
.rl-image img:not([src]),
.rl-image img[src=""] {
  display: none;
}
.rl-image:has(img:not([src])),
.rl-image:has(img[src=""]) {
  display: none;
}

/* Tablet: 3 images @ 33.33vw */
@media (max-width: 1024px) {
  .rl-image {
    flex-basis: 33.3333vw;
    height: auto;
  }
  /* Admin --rl-duration wins everywhere; fallback keeps tablet a touch faster. */
  .rl-track { animation-duration: var(--rl-duration, 48s); }
}

/* Mobile: 2.25 images @ 44vw — reveals 25% of 3rd image */
@media (max-width: 640px) {
  .rl-image {
    flex-basis: 44vw;
    height: clamp(260px, 64vw, 360px);
  }
  .rl-track { animation-duration: var(--rl-duration, 40s); }
}

/* ============================================================
   VIBE GALLERY — center vibe square + converging card tracks
   Left cards slide right→center, right cards slide left→center.
   Cards alternate so the center image swaps each arrival.
   ============================================================ */
.vibe-gallery {
  background: var(--color-page-bg);
  padding: var(--sec-pad) 0;
}
.vg-stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  height: 460px;
  overflow: hidden;
}
/* ── Product cards ─────────────────────────────────────── */
.vg-card {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 14px;
  overflow: hidden;
  background: #fcfcfc;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  z-index: 1;
}
.vg-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Rest position: card edge just touches center box edge */
.vg-card.side-L {
  right: calc(50% + 134px); /* center_half(130) + gap(4) */
  animation: vg-from-left 9s linear infinite;
}
.vg-card.side-R {
  left: calc(50% + 134px);
  animation: vg-from-right 9s linear infinite;
}
/* Card vertical positions & animation delays — staggered so
   centre image swaps alternate: R, L, R, L, R, L every ~1.5s */
#vgcLT { top:   4px; animation-delay:    0s; }
#vgcRT { top:  36px; animation-delay: -1.53s; }
#vgcLM { top: 142px; animation-delay: -2.97s; }
#vgcRM { top: 174px; animation-delay:  -4.5s; }
#vgcLB { top: 266px; animation-delay: -6.03s; }
#vgcRB { top: 234px; animation-delay: -7.47s; }

@keyframes vg-from-left {
  0%   { transform: translateX(-120vw); opacity: 0; }
  60%  { opacity: 0; }
  72%  { opacity: 1; }
  82%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
@keyframes vg-from-right {
  0%   { transform: translateX(120vw); opacity: 0; }
  60%  { opacity: 0; }
  72%  { opacity: 1; }
  82%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

/* ── Center vibe box ────────────────────────────────────── */
.vg-center-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0,0,0,0.18);
  z-index: 2;
}
.vg-ci {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.vg-ci.active { opacity: 1; }

/* ── Tablet ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .vg-stage { height: 320px; }
  .vg-center-box { width: 190px; height: 280px; border-radius: 16px; }
  .vg-card { width: 95px; height: 95px; border-radius: 10px; }
  .vg-card.side-L { right: calc(50% + 99px); }
  .vg-card.side-R { left:  calc(50% + 99px); }
  #vgcLT { top:  0px; } #vgcRT { top:  23px; }
  #vgcLM { top: 96px; } #vgcRM { top: 119px; }
  #vgcLB { top:183px; } #vgcRB { top: 160px; }
}
/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .vg-stage { height: 220px; }
  .vg-center-box { width: 135px; height: 200px; border-radius: 12px; }
  .vg-card { width: 68px; height: 68px; border-radius: 8px; }
  .vg-card.side-L { right: calc(50% + 72px); }
  .vg-card.side-R { left:  calc(50% + 72px); }
  #vgcLT { top:  0px; } #vgcRT { top:  14px; }
  #vgcLM { display: none; } #vgcRM { display: none; }
  #vgcLB { top:124px; } #vgcRB { top: 109px; }
}

/* Marquee runs everywhere, including mobile and reduced-motion devices,
   per design requirement: continuous right-to-left loop. */

/* =============================================================
   S8 — CUSTOMER REVIEWS (slider 5 desk / 3 mobile + IG)
   ============================================================= */
.reviews-section {
  padding: var(--sec-pad) 0;
  background: var(--color-page-bg);
}
.reviews-slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}
.reviews-track {
  display: flex;
  gap: clamp(12px, 1.5vw, 18px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }

.review-card {
  flex: 0 0 calc((100% - 4 * clamp(12px, 1.5vw, 18px)) / 5);
  scroll-snap-align: start;
  background: #fcfcfc;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
  color: inherit;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.review-img {
  width: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  position: relative;
}
.review-ig {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s;
}
.review-card:hover .review-ig {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.review-info {
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.review-stars {
  color: #ffb800;
  font-size: 14px;
  letter-spacing: 1px;
}
.review-handle {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #111;
}
.review-text {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

.reviews-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fcfcfc;
  border: 1px solid #ddd;
  font-size: 22px;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 2;
  transition: all 0.2s;
}
.reviews-arrow:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Mobile: show 3 cards, hide arrows (swipe instead) */
@media (max-width: 768px) {
  .review-card {
    flex: 0 0 calc((100% - 2 * 12px) / 3);
  }
  .reviews-arrow { display: none; }
}
/* Very small screens: 2 cards */
@media (max-width: 480px) {
  .review-card {
    flex: 0 0 calc((100% - 12px) / 2);
  }
}

/* =============================================================
   S9 — ABOUT
   ============================================================= */
.about-section {
  padding: var(--sec-pad) 0;
  background: #fcfcfc;
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.about-image img {
  width: 100%;
  border-radius: 4px;
}
.about-content .section-tag,
.about-content .section-title {
  text-align: left;
  margin-bottom: 16px;
}
.about-content .section-title { margin-bottom: 28px; }
.about-lead {
  font-size: clamp(16px, 1.5vw, 18px);
  color: #222;
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 1.6;
}
.about-content p {
  font-size: 14px;
  color: #555;
  margin-bottom: 16px;
  line-height: 1.7;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 16px;
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.about-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.about-stats strong {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: #111;
  letter-spacing: 1px;
}
.about-stats span {
  font-size: 11px;
  color: #888;
  letter-spacing: 1.5px;
  margin-top: 4px;
  text-transform: uppercase;
}
.about-cta {
  display: inline-block;
  background: #111;
  color: #fff;
  padding: 14px 30px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  transition: background 0.25s;
  text-transform: uppercase;
}
.about-cta:hover { background: #ff5252; }

/* =============================================================
   BRAND BANNER (STREETWEAR BRAND LIMITED)
   ============================================================= */
/* Colors/speed/typography driven by admin builder via styles.brand_banner */
.brand-banner {
  background: var(--bb-bg, #000);
  color: var(--bb-text, #fff);
  padding: 30px 0;
  overflow: hidden;
  white-space: nowrap;
}
.brand-banner-track {
  display: inline-flex;
  gap: 60px;
  animation: marquee-scroll var(--bb-duration, 28s) linear infinite;
}
.brand-banner-track span {
  font-family: var(--font-heading);
  font-size: var(--bb-fs, clamp(20px, 2.5vw, 32px));
  font-weight: 700;
  letter-spacing: var(--bb-ls, 3px);
  text-transform: uppercase;
}

/* =============================================================
   S10 — FOOTER
   ============================================================= */
.footer {
  background: #0B0B0B;
  color: #ccc;
  padding: clamp(72px, 9vw, 120px) 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4vw, 64px);
  margin-bottom: clamp(56px, 7vw, 88px);
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}
.footer h4 {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3.5px;
  color: #6e6e74;
  margin-bottom: 22px;
  text-transform: uppercase;
}
.footer p, .footer li {
  font-size: 13px;
  line-height: 2.2;
  color: #b8b8bc;
  font-weight: 400;
}
.footer ul { list-style: none; }
.footer ul a { color: #b8b8bc; text-decoration: none; transition: color 0.2s ease; }
.footer ul a:hover { color: #fff; }
.footer-dim { color: #6e6e74; }

.footer-social {
  display: flex;
  gap: 8px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #333;
  border-radius: 50%;
  font-size: 14px;
  color: #ccc;
  transition: all 0.2s;
}
.footer-social a:hover {
  background: #fcfcfc;
  color: #000;
  border-color: #fff;
}

.footer-newsletter {
  display: flex;
  gap: 0;
  margin-top: 18px;
  border: 1px solid #333;
  border-radius: 2px;
  overflow: hidden;
  max-width: 280px;
}
.footer-newsletter input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  padding: 10px 12px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
}
.footer-newsletter button {
  background: #fcfcfc;
  color: #000;
  padding: 0 18px;
  font-weight: 700;
  font-size: 18px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 28px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #5a5a60;
}

/* =============================================================
   MOBILE DRAWER — see ROVANT HEADER block above (line ~245).
   Legacy `.mobile-drawer-panel / .mobile-nav-link` rules removed.
   ============================================================= */

/* =============================================================
   RESPONSIVE — header breakpoints (ROVANT)
   Primary mobile header rules live in the ROVANT HEADER block above.
   These breakpoints fine-tune small-screen sizing.
   ============================================================= */
@media (max-width: 980px) {
  /* 1fr auto 1fr: 2 cột bên bằng nhau → logo luôn nằm CHÍNH GIỮA header
     (auto 1fr auto cũ làm logo dạt trái, hở khoảng trống lớn trước icon) */
  .header-inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
  }
  .header-left { justify-self: start; }
  .header-inner > .logo { justify-self: center; }
  .header-tools { justify-self: end; }
}

@media (max-width: 768px) {
  .header { height: 64px; }
  .header.is-scrolled { height: 56px; }
  .header-inner { padding: 0 16px; }
  .logo { font-size: 20px; letter-spacing: 4px; }
  .hero { height: 80vh; min-height: 480px; }
  .hero-title { font-size: clamp(34px, 9vw, 56px); }
  .trust-banner { background-attachment: scroll; }
}

@media (max-width: 480px) {
  .logo { font-size: 18px; letter-spacing: 3px; }
  .announcement { font-size: 10px; padding: 8px; }
  .hero { height: 70vh; }
}


/* =============================================================
   SHOP PAGE — sidebar + product grid (added Jun 2026)
   Was missing: .shop-layout/.shop-sidebar/.shop-main/.product-grid
   had no desktop rules, so cards stacked full-width 1-col.
   ============================================================= */
.shop-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  padding: clamp(28px, 4vw, 56px) 0;
}
.shop-sidebar { position: sticky; top: 96px; }
.shop-filter-group { margin-bottom: 28px; }
.shop-filter-group h5 {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #111;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ececec;
}
.shop-filter-group ul { list-style: none; margin: 0; padding: 0; }
.shop-filter-group li {
  font-size: 13px;
  color: #555;
  padding: 6px 0;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}
.shop-filter-group li:hover,
.shop-filter-group li.active { color: #111; font-weight: 600; }
.shop-filter-group .count { color: #aaa; font-size: 11px; font-weight: 400; }

/* Size chips inline (S M L XL group) */
.shop-filter-group:nth-of-type(2) ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shop-filter-group:nth-of-type(2) li {
  border: 1px solid #ddd;
  padding: 6px 12px;
  font-size: 12px;
}
.shop-filter-group:nth-of-type(2) li:hover { border-color: #111; }

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ececec;
}
.shop-count {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: #666;
  margin: 0;
}
.shop-sort {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #111;
  background: #fcfcfc;
  border: 1px solid #ddd;
  padding: 8px 14px;
  cursor: pointer;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 1.6vw, 24px);
}

/* Tablet / mobile: stack sidebar above grid */
@media (max-width: 980px) {
  .shop-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .shop-sidebar {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
  }
  .shop-filter-group { margin-bottom: 8px; }
}


/* =============================================================
   NON-HERO PAGES (shop / product) — solid header + announcement
   + page-header. Header was position:fixed + transparent with no
   hero behind it, so it overlapped the announcement & page title.
   ============================================================= */

/* Announcement strip (top dark bar) */
.announcement {
  background: #111111;
  color: #ffffff;
  text-align: center;
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 16px;
}

/* On pages without a transparent-over-hero header, make it solid and
   sticky (stays in flow → no overlap), instead of fixed + transparent. */
body:not(.has-transparent-header) .header {
  position: sticky;
  background: #fcfcfc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body:not(.has-transparent-header) .header .nav a,
body:not(.has-transparent-header) .header .nav-link,
body:not(.has-transparent-header) .header .nav-trigger,
body:not(.has-transparent-header) .header .icon-btn,
body:not(.has-transparent-header) .header .logo,
body:not(.has-transparent-header) .header .auth-text,
body:not(.has-transparent-header) .header .icon,
body:not(.has-transparent-header) .header .menu-toggle,
body:not(.has-transparent-header) .header .lang { color: #111111; }
body:not(.has-transparent-header) .header .cart-count { background: #111; color: #fff; }

/* Page header — title + breadcrumb (shop / collection pages) */
.page-header {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px) 0;
  text-align: center;
}
.page-title {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #111111;
  margin: 0 0 8px;
}
.breadcrumb {
  font-size: 12px;
  letter-spacing: 1px;
  color: #999999;
  margin: 0;
}
.breadcrumb a { color: #999999; text-decoration: none; }
.breadcrumb a:hover { color: #111111; }

/* Language toggle (VI / EN) — was rendering as "VIEN" with no separator */
.lang {
  display: inline-flex;
  align-items: center;
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
}
.lang span {
  cursor: pointer;
  color: #aaaaaa;
  transition: color 0.2s ease;
}
.lang span.active { color: #111111; font-weight: 600; }
.lang span + span::before {
  content: "/";
  margin: 0 6px;
  color: #cccccc;
  font-weight: 400;
}


/* =============================================================
   MOBILE FIX PACK — openhuman Jun 2026
   ============================================================= */

/* Product grid: force 2-col on small screens (auto-fit min 220px 
   collapses to 1-col on 375px phones) */
@media (max-width: 639px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .product-name {
    font-size: 11px;
    min-height: unset;
    letter-spacing: 0.5px;
  }
  .product-price { font-size: 13px; }
  .product-image-wrap { margin-bottom: 8px; }
}

/* Collections: 2-col on mobile */
@media (max-width: 639px) {
  .collections-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .collection-info h3 { font-size: 14px; letter-spacing: 1px; }
  .collection-info p { display: none; }
  .collection-num { font-size: 22px; top: 10px; left: 10px; }
}

/* Section padding — tighter on mobile */
@media (max-width: 639px) {
  .section, .collections-section {
    padding-top: clamp(32px, 6vw, 60px);
    padding-bottom: clamp(32px, 6vw, 60px);
  }
  .section-title { font-size: clamp(24px, 7vw, 36px); }
  .section-tag { font-size: 10px; letter-spacing: 2px; }
}

/* Trust banner: single col on very small */
@media (max-width: 639px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .trust-item { padding: 16px 8px; }
  .trust-icon { font-size: 22px; }
  .trust-title { font-size: 11px; letter-spacing: 1px; }
  .trust-sub { font-size: 10px; }
}

/* Lookbook: 2-col on mobile */
@media (max-width: 639px) {
  .lookbook-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .vibe-label { font-size: 10px; }
}

/* About grid: stack on mobile */
@media (max-width: 639px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-img { display: none; }
  .about-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Container padding tighter on mobile */
@media (max-width: 639px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }
}



/* =============================================================
   ROVANT MARQUEE — LIMITED DROP · NO RESTOCK
   Editorial FOMO band: white bg, mix fill + outline, accent #25C4AF
   Seamless loop via translateX(-50%) with duplicated content groups.
   ============================================================= */
.rovant-marquee {
  position: relative;
  background: #fcfcfc;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  height: clamp(76px, 14vw, 160px);
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
}

.rovant-marquee-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: max-content;
  white-space: nowrap;
  animation: rovant-marquee-scroll 22s linear infinite;
  will-change: transform;
}

@keyframes rovant-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.rmq-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(20px, 2.5vw, 44px);
  padding-right: clamp(20px, 2.5vw, 44px);
}

.rmq-fill,
.rmq-outline,
.rmq-dot {
  font-family: var(--font-heading);
  font-size: clamp(38px, 7.5vw, 96px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 0.95;
  text-transform: uppercase;
  display: inline-block;
}

/* LIMITED DROP — solid fill */
.rmq-fill {
  color: #111111;
}

/* NO RESTOCK — outline */
.rmq-outline {
  color: transparent;
  -webkit-text-stroke: 1.4px #111111;
  text-stroke: 1.4px #111111;
}

/* · dot — accent #25C4AF, very subtle scale tweak */
.rmq-dot {
  color: #25C4AF;
  font-weight: 700;
  font-size: clamp(38px, 7.5vw, 96px);
  line-height: 0.95;
  /* nudge dot to vertical center of cap-height */
  transform: translateY(-0.08em);
  transition: color 0.3s ease;
}

/* Hover: dot fades to ink — soft luxury cue */
@media (hover: hover) and (pointer: fine) {
  .rovant-marquee:hover .rmq-dot { color: #111111; }
}

/* Screen-reader text — actual semantic content for a11y */
.rovant-marquee-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile: thinner stroke + shorter loop duration */
@media (max-width: 768px) {
  .rovant-marquee-track { animation-duration: 16s; }
  .rmq-outline { -webkit-text-stroke-width: 1.1px; text-stroke-width: 1.1px; }
  .rmq-group { gap: clamp(16px, 4vw, 26px); padding-right: clamp(16px, 4vw, 26px); }
}

/* Respect reduced-motion: pause animation, show static content */
@media (prefers-reduced-motion: reduce) {
  .rovant-marquee-track { animation: none; transform: translateX(0); }
}


/* =============================================================
   ROVANT STANDARD — editorial trust section
   Split layout 35/65 desktop · 1 col mobile · scroll-reveal fade-up
   ============================================================= */
.rovant-standard {
  background: #fcfcfc;
  padding: var(--sec-pad) 0;
}

.rs-layout {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

@media (max-width: 860px) {
  .rs-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* LEFT column */
.rs-text {
  display: flex;
  flex-direction: column;
}

.rs-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #111111;
  line-height: 1.05;
  margin: 0 0 16px;
}

.rs-sub {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  color: #555555;
  letter-spacing: 0.2px;
  line-height: 1.55;
  max-width: 560px;
  margin: 0 0 clamp(36px, 4vw, 48px);
}

.rs-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.6vw, 32px);
}

.rs-point {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: baseline;
}

.rs-num {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: #999999;
  line-height: 1.4;
}

.rs-point-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rs-point-title {
  font-family: var(--font-heading);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111111;
  margin: 0;
  line-height: 1.3;
}

.rs-point-desc {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 14px);
  color: #555555;
  line-height: 1.55;
  margin: 0;
  max-width: 460px;
}

/* RIGHT column — 2x2 image grid */
.rs-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 18px);
}

.rs-image {
  margin: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  background: #f7f7f7;
}

.rs-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.rs-image figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Hide caption automatically when its value is empty */
.rs-image figcaption:empty { display: none; }

/* Hover (desktop only) — gentle scale */
@media (hover: hover) and (pointer: fine) {
  .rs-image:hover img { transform: scale(1.025); }
}

@media (max-width: 480px) {
  .rs-images { gap: 10px; }
  .rs-point { grid-template-columns: 44px 1fr; gap: 14px; }
}

/* =============================================================
   GENERIC SCROLL-REVEAL — fade up on viewport enter (once)
   Used by .reveal-on-scroll containers and .reveal-item children.
   JS adds .is-visible when section crosses 12% viewport threshold.
   ============================================================= */
.reveal-on-scroll .reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay per item (max 12 — covers any reasonable section) */
.reveal-on-scroll.is-visible .reveal-item:nth-child(1)  { transition-delay: 0.00s; }
.reveal-on-scroll.is-visible .reveal-item:nth-child(2)  { transition-delay: 0.07s; }
.reveal-on-scroll.is-visible .reveal-item:nth-child(3)  { transition-delay: 0.14s; }
.reveal-on-scroll.is-visible .reveal-item:nth-child(4)  { transition-delay: 0.21s; }
.reveal-on-scroll.is-visible .reveal-item:nth-child(5)  { transition-delay: 0.28s; }
.reveal-on-scroll.is-visible .reveal-item:nth-child(6)  { transition-delay: 0.35s; }
.reveal-on-scroll.is-visible .reveal-item:nth-child(7)  { transition-delay: 0.42s; }
.reveal-on-scroll.is-visible .reveal-item:nth-child(8)  { transition-delay: 0.49s; }
.reveal-on-scroll.is-visible .reveal-item:nth-child(9)  { transition-delay: 0.56s; }
.reveal-on-scroll.is-visible .reveal-item:nth-child(10) { transition-delay: 0.63s; }

/* Image grid: stagger via grid descendants — each .rs-image inherits the figure's index */
.rovant-standard.reveal-on-scroll.is-visible .rs-images .rs-image:nth-child(1) { transition-delay: 0.30s; }
.rovant-standard.reveal-on-scroll.is-visible .rs-images .rs-image:nth-child(2) { transition-delay: 0.38s; }
.rovant-standard.reveal-on-scroll.is-visible .rs-images .rs-image:nth-child(3) { transition-delay: 0.46s; }
.rovant-standard.reveal-on-scroll.is-visible .rs-images .rs-image:nth-child(4) { transition-delay: 0.54s; }

/* Mobile: shorter delays so it doesn'''t feel slow */
@media (max-width: 768px) {
  .reveal-on-scroll .reveal-item { transition-duration: 0.5s; }
  .reveal-on-scroll.is-visible .reveal-item:nth-child(n) { transition-delay: 0.04s; }
  .reveal-on-scroll.is-visible .reveal-item:nth-child(1) { transition-delay: 0s; }
}

/* =============================================================
   FADE-UP khi cuộn (hiệu ứng #1) — DESKTOP. JS gắn .fu cho phần tử
   CHƯA vào tầm nhìn rồi thêm .fu-in khi nó xuất hiện. Phần tử đang
   thấy lúc tải KHÔNG bị ẩn (JS bỏ qua) → không chớp. Mobile có hệ
   trượt 2 bên riêng nên không dùng ở đây.
   ============================================================= */
@media (min-width: 769px) {
  .fu {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .fu.fu-in { opacity: 1; transform: none; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =============================================================
   PRODUCT PAGE — Rovant clean editorial layout
   Desktop: 3 cols 1:3:1 (20% / 60% / 20%)
   Mobile: 3 rows (image → buy → info)
   ============================================================= */
.pd-page {
  background: #fcfcfc;
  padding: clamp(96px, 12vw, 140px) 0 60px;  /* top space for fixed header */
}

.pd-page #product-detail,
.pd-page > .container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

.pd-grid {
  display: grid;
  grid-template-columns: 20fr 60fr 20fr;
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;          /* baseline of all 3 cols = top of media stage */
}

/* ============================================================
   COL 1 — LEFT: THÔNG TIN / CHI TIẾT
   ============================================================ */
.pd-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-body);
}

.pd-info-block {
  padding: 0 0 24px;
}
.pd-info-block + .pd-info-block {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 24px;
}

.pd-info-head {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: #111111;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px;
}

.pd-info-body {
  font-size: 13px;
  line-height: 1.6;
  color: #444;
  text-align: left;
}

/* Mobile XEM THÊM toggle (hidden on desktop) */
.pd-info-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #111;
  padding: 14px 0;
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 4px;
}
.pd-info-toggle:hover { opacity: 0.7; }

/* ============================================================
   COL 2 — CENTER: gallery stage + vertical thumbs
   ============================================================ */
.pd-media-wrap {
  display: grid;
  grid-template-columns: 1fr 56px;
  gap: 14px;
  align-items: start;
}
/* Center gallery starts higher than the two text columns (desktop) */
@media (min-width: 861px) {
  .pd-media-wrap { margin-top: -70px; }
}

.pd-stage {
  position: relative;
  /* Square frame crops the photos' large white margins so the product
     sits high in the layout instead of floating low in a tall 4:5 box */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f7f7f7;
  outline: none;
  /* Vuốt dọc trên ảnh = cuộn trang như bình thường (pan-y);
     chỉ vuốt ngang mới được JS bắt để chuyển ảnh */
  touch-action: pan-y;
}

.pd-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.pd-slide.is-active {
  visibility: visible;
  z-index: 1;
}
.pd-slide.is-entering {
  visibility: visible;
  z-index: 2;
  pointer-events: none;
}
.pd-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Thumbnails column (vertical) */
.pd-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 100%;
  align-self: start;
}

/* HALO RING (Option A): ảnh đang xem phóng nhẹ + vòng ring hở quanh viền
   (nảy lò xo khi chuyển); các ảnh khác mờ 50%. */
.pd-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  background: #fcfcfc;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity 0.3s ease,
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), /* spring bounce */
              outline-color 0.3s ease, box-shadow 0.3s ease;
  border-radius: 50%;
  outline: 2px solid transparent;
  outline-offset: 3px;
}
.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-thumb:hover { opacity: 0.8; }
.pd-thumb.is-active {
  opacity: 1;
  transform: scale(1.18);
  outline-color: #111111; /* mobile: thumbs nằm trên nền sáng → ring đen */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   COL 3 — RIGHT: BUY area
   ============================================================ */
.pd-buy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pd-name {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #111111;
  margin: 0;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
}

.pd-price {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.8vw, 26px);   /* = .pd-name */
  font-weight: 600;
  letter-spacing: 1px;
  color: #111111;
  margin: 0;
  text-align: center;
}

/* Size selector */
.pd-size {
  margin-top: 6px;
}
.pd-size-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.pd-size-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #111111;
  text-transform: uppercase;
}
.pd-size-guide-btn {
  background: transparent;
  border: 0;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: #1E884F;
  cursor: pointer;
  text-transform: uppercase;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: #1E884F;
  transition: color 0.2s ease;
}
.pd-size-guide-btn:hover { color: #166b3e; }

.pd-size-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pd-size-btn {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  background: #fcfcfc;
  color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.18);
  height: 44px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pd-size-btn:hover { border-color: #111111; }
.pd-size-btn.is-active {
  background: #111111;
  color: #FFFFFF;
  border-color: #111111;
}

/* Action buttons */
.pd-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.pd-btn {
  width: 100%;
  height: 52px;
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid #111111;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.35s ease, transform 0.3s ease, box-shadow 0.3s ease, letter-spacing 0.35s ease;
}
.pd-btn:hover {
  transform: translateY(-2px);
  letter-spacing: 3px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}
.pd-btn:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14); }
/* Cảm ứng (mobile): không có chuột → tắt hover lift/box-shadow để tránh "vệt đen"
   dính lại sau khi chạm. */
@media (hover: none) {
  .pd-btn:hover { transform: none; box-shadow: none; letter-spacing: 2px; }
  .pd-btn:active { box-shadow: none; }
}

/* PRIMARY (THÊM VÀO GIỎ) — gloss shine sweeps across the black surface */
.pd-btn-primary {
  background: #111111;
  color: #FFFFFF;
}
.pd-btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0.18) 55%,
    transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.pd-btn-primary:hover::before { left: 130%; }

/* SECONDARY (MUA NGAY) — ink fill sweeps in from the left, text flips white */
.pd-btn-secondary {
  background: #fcfcfc;
  color: #111111;
}
.pd-btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #111111;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.pd-btn-secondary:hover {
  color: #FFFFFF;
}
.pd-btn-secondary:hover::before { transform: scaleX(1); }

/* ============================================================
   SIZE GUIDE MODAL
   ============================================================ */
.pd-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pd-modal.is-open { display: flex; }
.pd-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.pd-modal-panel {
  position: relative;
  background: #fcfcfc;
  max-width: 760px;
  width: 100%;
  max-height: 88vh;
  overflow: auto;
  padding: 40px clamp(20px, 4vw, 56px);
}
.pd-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: #111111;
  cursor: pointer;
}
.pd-modal-close:hover { opacity: 0.6; }
.pd-modal-img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.pd-modal-fallback h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #111111;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 24px;
}
.pd-modal-fallback table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
  color: #111;
}
.pd-modal-fallback th,
.pd-modal-fallback td {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 12px 8px;
  text-align: center;
}
.pd-modal-fallback th {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 11px;
  color: #555;
}
.pd-modal-fallback p {
  margin-top: 18px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* ============================================================
   YOU MAY ALSO LIKE — uses .collection-grid pattern
   ============================================================ */
.pd-related {
  background: #fcfcfc;
  padding: clamp(64px, 8vw, 100px) 0 clamp(56px, 7vw, 90px);
}
.pd-related-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #111111;
  text-align: center;
  margin: 0 0 clamp(36px, 5vw, 56px);
}
.collection-grid-related { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .collection-grid-related { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   404-ish state
   ============================================================ */
.pd-notfound {
  text-align: center;
  padding: 80px 20px;
}
.pd-notfound h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.pd-notfound a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   MOBILE — 3 rows
   ============================================================ */
@media (max-width: 860px) {
  /* Header dạng sticky (không đè nội dung) nên chỉ cần đệm nhỏ —
     80–110px cũ tạo khoảng trống lớn giữa header và ảnh sản phẩm */
  .pd-page { padding: 16px 0 40px; }

  .pd-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* Mobile: tên + giá + viên pill tồn kho căn CHÍNH GIỮA */
  .pd-name, .pd-price { text-align: center; }
  .pd-stock-pills { justify-content: center; }

  /* DOM order on desktop: info → media → buy.
     Mobile spec order: media → buy → info. Use grid order. */
  .pd-media { order: 1; }
  .pd-buy   { order: 2; }
  .pd-info  { order: 3; }

  /* Media: image full width, thumbs row below */
  .pd-media-wrap {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pd-thumbs {
    flex-direction: row;
    overflow-x: auto;
    /* đệm trên/dưới để ring + scale của ảnh active không bị cắt */
    padding: 7px 0 9px;
    gap: 6px;
    scrollbar-width: none;
  }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  .pd-thumb {
    /* Cỡ tự co để 10 ảnh LUÔN vừa 1 hàng:
       (bề ngang màn − 40px lề container − 9 khe × 6px) / 10, trần 29px */
    --tsz: min(29px, calc((100vw - 94px) / 10));
    flex: 0 0 var(--tsz);
    width: var(--tsz);
    height: var(--tsz);
  }
  /* Ring gọn hơn ở cỡ nhỏ — không lấn sang ảnh bên cạnh */
  .pd-thumb.is-active {
    transform: scale(1.1);
    outline-width: 1.5px;
    outline-offset: 2px;
  }
  /* Ít hơn 10 ảnh → dải thumb căn GIỮA; đủ/tràn → tự về căn trái để cuộn đúng
     (margin:auto ở 2 đầu tự triệt tiêu khi nội dung tràn khung cuộn) */
  .pd-thumb:first-child { margin-left: auto; }
  .pd-thumb:last-child { margin-right: auto; }

  /* Buy area tighter */
  .pd-buy { gap: 18px; }
  .pd-size-options { gap: 6px; }
  .pd-size-btn { height: 42px; }
  .pd-btn { height: 50px; }

  /* Info always shown in full on mobile — no collapse, no "XEM THÊM" */
  .pd-info { position: relative; }
  .pd-info-toggle { display: none; }
}


/* =============================================================
   SIZE GUIDE MODAL (legacy class names — kept for OH.openSizeGuide())
   ============================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal-box {
  position: relative;
  background: #fcfcfc;
  max-width: 760px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 40px clamp(20px, 4vw, 56px);
  border-radius: 2px;
}
.modal-box h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #111111;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 16px;
}
.modal-box h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: #111;
}
.modal-box .modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: #111111;
  cursor: pointer;
}
.modal-box .modal-close:hover { opacity: 0.6; }
.size-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px;
  color: #111;
}
.size-table th,
.size-table td {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 10px 8px;
  text-align: center;
}
.size-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 11px;
  color: #555;
}
.size-note {
  margin-top: 20px;
  font-size: 12px;
  color: #555;
  line-height: 1.7;
  padding: 14px 16px;
  background: #fafaf8;
  border-left: 2px solid #111;
}

/* =============================================================
   SIZE GUIDE — Visual modal with SVG diagrams
   ============================================================= */
.sg-wrap {
  position: relative;
  background: #fcfcfc;
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 3px;
  padding: 48px 28px 32px;
  scrollbar-width: thin;
}
.sg-wrap .sg-close {
  position: absolute; top: 16px; right: 16px;
  width: 46px; height: 46px; border-radius: 50%;
  background: #111111; border: 1px solid #111111;
  color: #ffffff; cursor: pointer; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, transform .38s cubic-bezier(.22,1,.36,1);
}
.sg-wrap .sg-close svg { width: 20px; height: 20px; }
.sg-wrap .sg-close:hover { background: #000000; transform: rotate(90deg); }
.sg-header { text-align: center; margin-bottom: 28px; }
.sg-header h3 {
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 700;
  letter-spacing: 4px; color: #111;
  text-transform: uppercase; margin: 0 0 6px;
}
.sg-header p { font-size: 12px; color: #888; letter-spacing: 0.3px; margin: 0; }
.sg-section { margin-bottom: 32px; }
.sg-section-label {
  font-family: var(--font-heading);
  font-size: 10px; font-weight: 700;
  letter-spacing: 3px; color: #999;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8e8e8;
}
.sg-content {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: start;
}
.sg-diagram svg { width: 100%; height: auto; display: block; }
.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px; color: #111;
  margin-bottom: 14px;
}
.sg-table th {
  font-family: var(--font-heading);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: #444;
  padding: 7px 5px 8px;
  border-bottom: 2px solid #111;
  text-align: center;
  line-height: 1.4;
}
.sg-table td {
  padding: 8px 5px;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.sg-table tbody tr:hover { background: #f8f8f8; }
.sg-sz { font-weight: 700; font-size: 14px; }
.sg-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  font-size: 10px; font-weight: 800; color: #fff;
  background: var(--c, #333);
  vertical-align: middle; flex-shrink: 0;
}
.sg-legend { display: flex; flex-direction: column; gap: 7px; }
.sg-legend-item {
  font-size: 11px; color: #555; line-height: 1.4;
  display: flex; align-items: flex-start; gap: 7px;
}
.sg-tip {
  font-size: 12px; color: #555; line-height: 1.65;
  padding: 12px 16px;
  background: #f5f5f3;
  border-left: 3px solid #111;
  margin-top: 0;
}
@media (max-width: 540px) {
  .sg-wrap { padding: 44px 18px 24px; }
  .sg-content { grid-template-columns: 1fr; }
  .sg-diagram { max-width: 160px; margin: 0 auto 4px; }
}

/* =============================================================
   CART DRAWER — slide from right
   ============================================================= */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 900;
}
.cart-backdrop.active {
  opacity: 1;
  visibility: visible;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100vw;
  height: 100%;
  background: #fcfcfc;
  z-index: 901;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.cart-drawer.active {
  transform: translateX(0);
}
.cart-header {
  position: relative;
  padding: 16px 24px 20px;
}
.cart-header h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #111;
  margin-top: 28px;
}
.cart-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: #111;
  line-height: 1;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-close:hover { opacity: 0.55; }
.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px;
}
.cart-empty {
  padding: 16px 0 20px;
}
.cart-empty p {
  font-family: var(--font-body);
  font-size: 14px;
  color: #555;
}
.cart-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
}
.cart-item img {
  width: 72px;
  height: 90px;
  object-fit: cover;
  flex-shrink: 0;
}
.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-item-name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #111;
  text-transform: uppercase;
}
.cart-item-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: #777;
}
.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.cart-qty {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-qty button {
  background: none;
  border: 1px solid #ddd;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-qty span {
  font-family: var(--font-heading);
  font-size: 13px;
  min-width: 20px;
  text-align: center;
}
.cart-item-price {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: #111;
}
.cart-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 11px;
  color: #999;
  letter-spacing: 1px;
  text-align: left;
  padding: 0;
  margin-top: 6px;
}
.cart-item-remove:hover { color: #111; }
.cart-footer {
  padding: 0 24px 28px;
  border-top: 1px solid #e0e0e0;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: #111;
  text-transform: uppercase;
}
.cart-buttons {
  display: flex;
  gap: 8px;
}
.cart-checkout,
.cart-view-btn {
  flex: 1;
  background: #111;
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 15px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.cart-checkout:hover,
.cart-view-btn:hover { background: #333; }
@media (max-width: 480px) {
  .cart-drawer { width: 100vw; }
}

/* =============================================================
   CART PAGE — /cart.html (hades.vn style)
   ============================================================= */
.cartpage { padding: clamp(32px, 5vw, 60px) 0 clamp(60px, 8vw, 100px); }
.cartpage-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: #111;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.cartpage-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.cartpage-items { border-top: 1px solid #e8e8e8; }
.cp-item {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid #e8e8e8;
}
.cp-item img {
  width: 96px;
  height: 120px;
  object-fit: cover;
  flex-shrink: 0;
}
.cp-item-info { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cp-item-name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #111;
  text-decoration: none;
}
.cp-item-meta { font-size: 12px; color: #777; }
.cp-item-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.cp-qty { display: flex; align-items: center; border: 1px solid #ddd; }
.cp-qty button {
  background: none; border: none; width: 34px; height: 34px;
  cursor: pointer; font-size: 15px; color: #111;
  display: flex; align-items: center; justify-content: center;
}
.cp-qty button:hover { background: #f5f5f5; }
.cp-qty span {
  font-family: var(--font-heading); font-size: 13px;
  min-width: 34px; text-align: center;
}
.cp-item-price { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: #111; }
.cp-item-remove {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-heading); font-size: 11px;
  letter-spacing: 1px; color: #999; padding: 0; text-align: left; margin-top: 8px;
}
.cp-item-remove:hover { color: #111; text-decoration: underline; }
.cartpage-empty { text-align: center; padding: 40px 0 20px; }
.cartpage-empty p { font-size: 14px; color: #555; margin-bottom: 24px; }
.cp-continue-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #111; color: #fff; border: none; cursor: pointer;
  font-family: var(--font-heading); font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 15px 28px; text-decoration: none;
}
.cp-continue-btn:hover { background: #333; }
.cartpage-aside { position: sticky; top: 96px; }
.cp-continue-link {
  display: block; text-align: right; font-size: 13px; color: #555;
  text-decoration: none; margin-bottom: 12px;
}
.cp-continue-link:hover { color: #111; }
.cp-summary { border: 1px solid #e0e0e0; padding: 24px; background: #fcfcfc; }
.cp-summary h3 {
  font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  letter-spacing: 1px; color: #111; padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e8; margin-bottom: 16px;
}
.cp-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; color: #111; padding: 6px 0;
}
.cp-summary-row strong { font-family: var(--font-heading); font-size: 16px; }
.cp-summary-note { font-size: 12.5px; color: #777; line-height: 1.6; margin: 12px 0 18px; }
.cp-checkout-btn {
  display: block; width: 100%;
  background: #111; color: #fff; border: none; cursor: pointer;
  font-family: var(--font-heading); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 16px 10px; text-align: center; text-decoration: none;
  transition: background 0.2s;
}
.cp-checkout-btn:hover { background: #333; }
.cp-checkout-btn[disabled] { background: #bbb; cursor: not-allowed; }
@media (max-width: 900px) {
  .cartpage-layout { grid-template-columns: 1fr; }
  .cartpage-aside { position: static; }
}
@media (max-width: 480px) {
  .cp-item img { width: 76px; height: 96px; }
}

/* =============================================================
   CHECKOUT PAGE — /checkout.html (shopify/hades style)
   ============================================================= */
.co-topbar { border-bottom: 1px solid #e8e8e8; background: #fcfcfc; }
.co-topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.co-logo {
  font-family: var(--font-heading); font-size: 24px; font-weight: 700;
  letter-spacing: 6px; color: #111; text-decoration: none;
}
.co-back { font-size: 13px; color: #555; text-decoration: none; }
.co-back:hover { color: #111; }
.co-wrap {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 440px;
  min-height: calc(100vh - 63px);
}
.co-main { padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 48px) 60px 24px; }
.co-side {
  background: #fafafa; border-left: 1px solid #e8e8e8;
  padding: clamp(24px, 4vw, 40px) 24px 60px clamp(16px, 2.5vw, 36px);
}
.co-section-title {
  font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: #111;
  margin: 28px 0 14px;
}
.co-section-title:first-child { margin-top: 0; }
.co-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-field { margin-bottom: 12px; }
.co-field label { display: block; font-size: 12px; color: #777; margin-bottom: 5px; }
.co-field input, .co-field select, .co-field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid #d9d9d9; background: #fcfcfc;
  font-family: var(--font-body); font-size: 14px; color: #111;
  border-radius: 0; outline: none;
}
.co-field input:focus, .co-field select:focus, .co-field textarea:focus { border-color: #111; }
.co-field input.co-invalid, .co-field select.co-invalid { border-color: #c0392b; background: #fff7f6; }
.co-radio-group { border: 1px solid #d9d9d9; }
.co-radio {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; cursor: pointer;
  border-bottom: 1px solid #e8e8e8; font-size: 14px; color: #111;
}
.co-radio:last-child { border-bottom: 0; }
.co-radio input { margin-top: 3px; accent-color: #111; }
.co-radio .co-radio-desc { font-size: 13px; color: #777; margin-top: 3px; line-height: 1.5; }
.co-radio .co-radio-price { margin-left: auto; font-family: var(--font-heading); font-size: 13px; font-weight: 600; }
.co-submit {
  display: block; width: 100%; margin-top: 24px;
  background: #111; color: #fff; border: none; cursor: pointer;
  font-family: var(--font-heading); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; padding: 17px 10px;
  transition: background 0.2s;
}
.co-submit:hover { background: #333; }
.co-error-msg { color: #c0392b; font-size: 13px; margin-top: 12px; display: none; }
.co-item { display: flex; gap: 14px; align-items: center; padding: 10px 0; }
.co-item-thumb { position: relative; flex-shrink: 0; }
.co-item-thumb img {
  width: 64px; height: 80px; object-fit: cover;
  border: 1px solid #e0e0e0; background: #fcfcfc;
}
.co-item-qty {
  position: absolute; top: -8px; right: -8px;
  background: #555; color: #fff; border-radius: 50%;
  min-width: 22px; height: 22px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-family: var(--font-heading);
}
.co-item-name { font-size: 13px; color: #111; font-weight: 600; }
.co-item-size { font-size: 11.5px; color: #777; margin-top: 2px; }
.co-item-price { margin-left: auto; font-family: var(--font-heading); font-size: 13px; font-weight: 600; white-space: nowrap; }
.co-discount { display: flex; gap: 10px; margin: 18px 0; }
.co-discount input {
  flex: 1; padding: 12px 14px; border: 1px solid #d9d9d9;
  font-family: var(--font-body); font-size: 13.5px; outline: none; background:#fcfcfc;
}
.co-discount input:focus { border-color: #111; }
.co-discount button {
  background: #111; color: #fff; border: none; cursor: pointer;
  font-family: var(--font-heading); font-size: 11.5px; font-weight: 600;
  letter-spacing: 1px; padding: 0 20px;
}
.co-discount button:hover { background: #333; }
.co-discount-msg { font-size: 13px; margin: -8px 0 12px; display: none; }
.co-totals { border-top: 1px solid #e0e0e0; padding-top: 14px; margin-top: 6px; }
.co-total-row {
  display: flex; justify-content: space-between;
  font-size: 13.5px; color: #444; padding: 5px 0;
}
.co-total-row.grand {
  font-size: 15px; color: #111; font-weight: 700;
  border-top: 1px solid #e0e0e0; margin-top: 10px; padding-top: 14px;
}
.co-total-row.grand .amount { font-family: var(--font-heading); font-size: 20px; }
.co-empty-note { font-size: 13.5px; color: #777; padding: 20px 0; }
/* success overlay */
.co-success {
  position: fixed; inset: 0; background: rgba(255,255,255,0.98); z-index: 1000;
  display: none; align-items: center; justify-content: center; text-align: center; padding: 24px;
}
.co-success.show { display: flex; }
.co-success-box h2 {
  font-family: var(--font-heading); font-size: 26px; letter-spacing: 2px; color: #111; margin: 18px 0 10px;
}
.co-success-box p { font-size: 14px; color: #555; line-height: 1.7; }
.co-success-box .order-code { font-family: var(--font-heading); font-size: 16px; color: #111; letter-spacing: 1px; }
.co-success-box .icon { font-size: 44px; }
@media (max-width: 900px) {
  .co-wrap { grid-template-columns: 1fr; }
  .co-side { border-left: 0; border-top: 1px solid #e8e8e8; order: -1; }
  .co-main { padding: 28px 16px 60px; }
}

/* Header logo as image (set from admin builder → HEADER (LOGO)) */
.logo-img { display: block; width: auto; max-height: 64px; object-fit: contain; }

/* =============================================================
   CHECKOUT STEPS — luxury progress stepper (cart / checkout / done)
   ============================================================= */
.rv-steps {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(22px, 3.5vw, 38px) 20px 6px;
  display: flex;
  align-items: flex-start;
}
.rv-step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  animation: rv-step-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.rv-step:nth-child(1) { animation-delay: 0.05s; }
.rv-step:nth-child(2) { animation-delay: 0.18s; }
.rv-step:nth-child(3) { animation-delay: 0.31s; }
@keyframes rv-step-in {
  to { opacity: 1; transform: translateY(0); }
}

/* connector line between dots */
.rv-step:not(:first-child)::before,
.rv-step:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(-50% + 26px);
  width: calc(100% - 52px);
  height: 1px;
}
.rv-step:not(:first-child)::before { background: #e4e1dc; }
.rv-step:not(:first-child)::after {
  background: #111;
  transform: scaleX(0);
  transform-origin: left;
}
.rv-step.is-active:not(:first-child)::after,
.rv-step.is-done:not(:first-child)::after {
  animation: rv-line-fill 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.45s forwards;
}
@keyframes rv-line-fill { to { transform: scaleX(1); } }

/* dot */
.rv-step-dot {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 1px solid #d8d4cd;
  background: #fcfcfc;
  color: #b3aea6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 2;
  overflow: hidden;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
  animation: oh-cta-zoom 1.5s ease-in-out infinite;
}
/* Vệt sáng lướt qua đồng bộ với button CTA */
.rv-step-dot::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0.18) 55%,
    transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: oh-cta-sweep 1.5s linear infinite;
}
.rv-step-dot .rv-check {
  display: none;
  width: 15px;
  height: 15px;
  stroke: #fff;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* label */
.rv-step-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #b3aea6;
  transition: color 0.4s ease;
  white-space: nowrap;
}

/* ACTIVE — filled dot + soft luxury pulse */
.rv-step.is-active .rv-step-dot {
  background: #111;
  border-color: #111;
  color: #fff;
  animation: oh-cta-zoom 1.5s ease-in-out infinite, rv-pulse 2.4s ease-out 1s infinite;
}
.rv-step.is-active .rv-step-label { color: #111; }
@keyframes rv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.22); }
  65%  { box-shadow: 0 0 0 11px rgba(17, 17, 17, 0); }
  100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); }
}

/* DONE — check mark with stroke-draw animation, clickable */
.rv-step.is-done .rv-step-dot {
  background: #111;
  border-color: #111;
}
.rv-step.is-done .rv-step-num { display: none; }
.rv-step.is-done .rv-step-dot .rv-check {
  display: block;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: rv-check-draw 0.5s ease 0.55s forwards;
}
@keyframes rv-check-draw { to { stroke-dashoffset: 0; } }
.rv-step.is-done .rv-step-label { color: #555; }
a.rv-step.is-done:hover .rv-step-label { color: #111; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 560px) {
  .rv-steps { padding-top: 18px; }
  .rv-step-dot { width: 31px; height: 31px; font-size: 12px; }
  .rv-step:not(:first-child)::before,
  .rv-step:not(:first-child)::after { top: 15px; left: calc(-50% + 22px); width: calc(100% - 44px); }
  .rv-step-label { font-size: 9px; letter-spacing: 1.8px; }
}

/* Standard shipping price: crossed-out fee with "Miễn phí" below */
.co-price-free { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.co-price-free s { color: #b3aea6; font-weight: 400; font-size: 12px; }
.co-price-free em { font-style: normal; color: #1E884F; font-weight: 700; }

/* Contact buttons inside express-shipping option (links set by admin) */
.co-contact-row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.co-contact-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  font-family: var(--font-heading); font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
  color: #fff; transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.co-contact-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.co-contact-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
.co-contact-ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.co-contact-fb { background: #1877F2; }

/* Bank transfer panel — VietQR, revealed when "Chuyển khoản" is selected */
.co-bank-panel {
  display: none;
  gap: 20px;
  margin-top: 14px;
  padding: 16px;
  background: #fafaf8;
  border: 1px solid #e8e5df;
  animation: co-bank-in 0.35s ease;
}
.co-radio input:checked + span .co-bank-panel { display: flex; }
@keyframes co-bank-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.co-qr-box { flex-shrink: 0; }
.co-qr-box img {
  width: 170px; height: auto; display: block;
  border: 1px solid #e0e0e0; background: #fcfcfc; border-radius: 6px;
}
.co-bank-info { flex: 1; min-width: 0; }
.co-bank-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; color: #777; padding: 4px 0;
}
.co-bank-row strong { color: #111; font-weight: 600; text-align: right; }
.co-bank-code {
  font-family: var(--font-heading); letter-spacing: 1.5px;
  background: #111; color: #fff !important; padding: 2px 10px; border-radius: 4px;
}
.co-bank-note { font-size: 11.5px; color: #999; line-height: 1.6; margin-top: 10px; }
@media (max-width: 560px) {
  .co-bank-panel { flex-direction: column; align-items: center; }
  .co-bank-info { width: 100%; }
}

/* Inline field error (live phone validation) */
.co-field-err {
  display: none;
  color: #c0392b;
  font-size: 13px;
  margin-top: 5px;
}


/* Header scaled 150% — text, logo, icons */
.icon-btn { width: 48px; height: 48px; }
.icon-btn svg { width: 30px; height: 30px; }
.menu-toggle svg { width: 33px; height: 33px; }
.nav-caret { width: 13px; height: 13px; }
.cart-count {
  min-width: 22px;
  height: 22px;
  font-size: 13px;
  top: 2px;
  right: 0;
}
.co-logo { font-size: 36px; }

/* Back-to-top button — bottom right, home & product pages */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 80;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #333; transform: translateY(-3px); }
.back-to-top svg { width: 22px; height: 22px; }
/* Back-to-top on mobile: homepage only (desktop: home + product) */
@media (max-width: 860px) {
  .back-to-top { display: none; }
  .back-to-top.bt-home { display: flex; right: 16px; bottom: 18px; width: 46px; height: 46px; }
}

/* Success screen — clearer, larger text */
.co-success-box .co-success-row {
  font-size: 16px;
  color: #222;
  line-height: 1.8;
}
.co-success-box .order-code { font-size: 19px; }
.co-success-contact {
  display: block;
  max-width: 460px;
  margin: 16px auto 0;
  background: #f4f1ec;
  border: 1px solid #e3ddd2;
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 15px;
  color: #111;
  line-height: 1.6;
}
.co-success-contact strong { font-family: var(--font-heading); letter-spacing: 0.5px; }

/* Logo rotation — soft fade + drift swap every 5s */
.logo-img { transition: opacity 0.45s ease, transform 0.45s ease; }
.logo-img.is-swapping { opacity: 0; transform: translateY(8px) scale(0.92); }

/* =============================================================
   LEFT NAV — collapsed into a 2-line toggle with dropdown menu
   ============================================================= */
.header-left .nav { display: none !important; }
.menu-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.nav-menu-panel {
  position: absolute;
  top: 100%;
  left: clamp(12px, 3vw, 44px);
  min-width: 250px;
  background: #fcfcfc;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
  padding: 10px 0 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
  z-index: 70;
}
.nav-menu-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-menu-panel a,
.nav-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 13px 26px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #111;
  text-decoration: none;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.nav-menu-panel a:hover,
.nav-menu-panel button:hover {
  background: #f5f3ef;
  padding-left: 32px;
}
.nav-menu-label {
  padding: 14px 26px 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: #b3aea6;
  text-transform: uppercase;
  border-top: 1px solid #f0ede7;
  margin-top: 6px;
}
.nav-menu-panel .nav-menu-sub {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 1.5px;
  padding: 10px 26px 10px 38px;
  color: #444;
}

/* =============================================================
   SEARCH — Dynamic Island style: floating glass pill below header
   ============================================================= */
.search-overlay {
  position: fixed;
  top: 98px;
  left: 50%;
  width: min(660px, 92vw);
  z-index: 950;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-18px) scale(0.9);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s;
  pointer-events: none;
}
.search-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}
.search-form {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(17, 17, 17, 0.5);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 4px 56px 4px 24px;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.38);
}
.search-form::before {
  content: "";
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.7" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="16.2" y1="16.2" x2="21" y2="21"/></svg>') center / contain no-repeat;
  opacity: 0.85;
}
#search-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  padding: 14px 0;
}
#search-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.search-close {
  position: absolute;
  top: 11px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  color: #fff;
}
.search-close:hover { background: rgba(255, 255, 255, 0.24); }
.search-results {
  margin-top: 12px;
  background: rgba(17, 17, 17, 0.5);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.38);
  max-height: 56vh;
  overflow-y: auto;
  padding: 20px;
  display: none;
}
.search-hint {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.65);
  padding: 6px 0;
}
.search-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.search-grid .product-name { font-size: 11px; color: #fff; }
.search-grid .product-price { font-size: 11px; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 640px) {
  .search-overlay { top: 88px; }
  .search-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* =============================================================
   PREMIUM REFINEMENTS — container 1344, header 72, serif logo,
   refined Shop All layout & luxury product cards
   ============================================================= */
:root {
  --c-text: #111;
  --c-muted: #777;
  --c-border: #e5e5e5;
}
.container { max-width: 1344px; padding: 0 48px; }
@media (max-width: 640px) { .container { padding: 0 18px; } }

/* Header — 72px, padding 48px, serif wordmark */
.header { height: 72px; }
.header.is-scrolled { height: 64px; }
.header-inner { max-width: 1344px; padding: 0 48px; }
@media (max-width: 640px) { .header-inner { padding: 0 16px; } }
.logo {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: none;
}
.header.is-scrolled .logo { font-size: 30px; }
.nav-menu-panel a, .nav-menu-panel button {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* Shop page header */
.page-header { max-width: 1344px; padding: 48px 48px 0; text-align: left; }
.page-title {
  font-family: var(--font-heading);
  font-size: 42px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: 2px;
  margin: 0;
}
.breadcrumb { font-size: 12.5px; color: #777; margin-top: 12px; letter-spacing: 0.4px; }
@media (max-width: 640px) {
  .page-header { padding: 32px 18px 0; }
  .page-title { font-size: 30px; line-height: 36px; }
}

/* Shop layout — 220px sidebar + 40px gap */
.shop-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 40px 0 72px;
}
.shop-filter-group { margin-bottom: 36px; }
.shop-filter-group h5 {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #111;
  margin-bottom: 16px;
}
.shop-filter-group ul { list-style: none; }
.shop-filter-group li {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #555;
  padding: 5px 0;
  cursor: pointer;
  transition: color 0.15s;
}
.shop-filter-group li:hover, .shop-filter-group li.active { color: #111; font-weight: 600; }
.shop-filter-group li .count { color: #aaa; font-weight: 400; font-size: 12px; }
/* Size buttons 48x36 */
.shop-filter-group:nth-of-type(2) ul { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-filter-group:nth-of-type(2) li {
  width: 48px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #ddd; border-radius: 4px;
  font-size: 12px; font-weight: 500; color: #111;
  padding: 0; transition: border-color 0.15s, background 0.15s;
}
.shop-filter-group:nth-of-type(2) li:hover { border-color: #111; }

/* Toolbar */
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.shop-count {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; color: #111;
}
.shop-sort {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 13px; color: #111;
  border: 1px solid #e5e5e5; border-radius: 6px;
  padding: 8px 12px; background: #fcfcfc; cursor: pointer; outline: none;
}

/* Product grid: 4 / 3 / 2 */
.shop-main .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1100px) { .shop-main .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .shop-layout { grid-template-columns: 1fr; padding-top: 24px; }
  .shop-sidebar { display: none; }
  .shop-main .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ---- Luxury product card (Shop page only) ---- */
.product-desc, .product-swatches, .card-quickview { display: none; }
.shop-main .product-card {
  background: #fcfcfc;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.shop-main .product-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}
.shop-main .product-image-wrap { height: 360px; }
.shop-main .product-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.shop-main .product-card:hover .product-image-wrap img { transform: scale(1.04); }
@media (max-width: 860px) { .shop-main .product-image-wrap { height: 230px; } }
.shop-main .product-badge {
  top: 12px; left: 12px;
  height: 26px; padding: 0 10px;
  display: inline-flex; align-items: center;
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
  border-radius: 4px;
  background: #111; color: #fff;
}
.shop-main .product-meta { padding: 16px; text-align: left; }
.shop-main .product-name {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 15px; line-height: 22px; font-weight: 600;
  letter-spacing: 0.2px; color: #111; text-transform: none;
}
.shop-main .product-desc {
  display: block;
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 13px; color: #777; margin-top: 4px;
}
.shop-main .product-swatches { display: flex; gap: 8px; margin-top: 14px; }
.shop-main .swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.shop-main .product-price {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 16px; font-weight: 700; color: #111; margin-top: 14px;
}
.shop-main .card-quickview {
  display: flex; align-items: center; justify-content: center;
  height: 44px; width: 100%; margin-top: 18px;
  border: 1px solid #111; border-radius: 6px;
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.6px;
  color: #111; background: #fcfcfc;
  transition: background 0.2s, color 0.2s;
}
.shop-main .product-card:hover .card-quickview { background: #111; color: #fff; }

/* Footer per spec */
.footer { padding: 56px 0 32px; }
.footer h4 { font-family: Arial, 'Helvetica Neue', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; color: #999; }
.footer p, .footer li { font-family: Arial, 'Helvetica Neue', sans-serif; font-size: 14px; line-height: 24px; }
.footer-grid { margin-bottom: 48px; }

/* Ticker — airier */
.brand-banner { padding: 38px 0; }
.brand-banner-track { gap: 84px; }

/* =============================================================
   HOMEPAGE SECTION REFINEMENTS (spec v2)
   ============================================================= */

/* ---- TICKER (brand banner after hero) ----
   margin-top 68 / margin-bottom -44: chữ ticker nằm chính giữa
   khoảng cách (tính theo chữ) từ mép banner tới chữ tiêu đề CORE */
.brand-banner {
  margin-top: 68px;
  margin-bottom: -44px;
  height: 52px;
  padding: 0;
  display: flex;
  align-items: center;
}
.brand-banner-track span {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: var(--bb-fs, clamp(24px, 3.4vw, 42px)); /* = .collection-title */
  font-weight: 600;
  letter-spacing: var(--bb-ls, 1px);
  text-transform: uppercase;
}

/* ---- ROVANT STANDARD — header + 4 numbered cards ---- */
.rovant-standard { padding: 96px 0 !important; }
.rs-layout { display: block; }
.rs-text { max-width: none; }
.rs-label {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 13px;
  color: #777;
  margin-bottom: 10px;
}
.rs-title {
  font-size: 42px !important;
  line-height: 48px !important;
  /* Đồng bộ với mọi tiêu đề section khác (CORE/REVIEWS/LOOKBOOK): 700 / 6px */
  font-weight: 700 !important;
  letter-spacing: 6px;
}
.rs-sub {
  max-width: 520px;
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 15px !important;
  line-height: 24px !important;
  color: #666 !important;
  margin-top: 14px;
}
.rs-points {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
  list-style: none;
}
.rs-point {
  display: block !important;
  padding: 28px !important;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #fcfcfc;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rs-point:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}
.rs-num {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 12px !important;
  color: #999 !important;
  display: block;
  margin-bottom: 14px;
}
.rs-point-title {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #111;
  margin-bottom: 8px;
}
.rs-point-desc {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 14px !important;
  line-height: 22px !important;
  color: #777 !important;
}
.rs-images { display: none !important; }

/* ---- LOOKBOOK & VIBES — editorial masonry, no marquee ---- */
/* Lookbook = marquee chạy phải→trái, lặp vô hạn:
   desktop 5 ảnh/khung nhìn, mobile 3.5 ảnh; khách bấm/di chuột không tác động */
.rovant-lookbook { padding: 96px 0 !important; }
.rl-title { font-size: clamp(24px, 3.4vw, 42px) !important; letter-spacing: 6px; text-align: center; } /* = .collection-title */
.rovant-lookbook .container { max-width: 1344px; }
.rl-marquee {
  padding-bottom: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.rl-image img { transform: translateZ(0); }
@media (max-width: 640px) {
  .rl-image {
    flex-basis: 40vw; /* 100 / 2.5 ảnh */
    height: auto;
  }
}

/* ---- CUSTOMER REVIEWS ---- */
.reviews-section { padding: 80px 0 96px !important; background: var(--color-page-bg); }
/* gap tiêu đề → cards = 73px, đồng nhịp với các bộ sưu tập */
.reviews-section .section-header { margin-bottom: 73px; }
.reviews-section .section-title {
  font-size: clamp(32px, 3.2vw, 42px);
  font-weight: 600;
  margin: 0;
}
/* 5 thẻ trên 1 khung nhìn desktop (theo rule gốc), giữ viền bo */
.review-card {
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: #fcfcfc;
}
.review-info { padding: 24px !important; }
.review-handle { font-family: Arial, 'Helvetica Neue', sans-serif; font-size: 14px !important; font-weight: 600 !important; color: #111; }
.review-stars { font-size: 14px !important; }
.review-text {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 15px !important;
  line-height: 24px !important;
  color: #555;
}
.reviews-arrow {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  border: 1.5px solid #111 !important;
  background: #fcfcfc !important;
  color: #111 !important;
  font-size: 26px !important;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
}
.reviews-arrow:hover { background: #111 !important; color: #fff !important; }

/* ---- ABOUT ROVANT ---- */
.about-section { padding: 96px 0 112px !important; }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-image img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  border-radius: 12px;
}
.about-section .section-tag {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #777;
}
.about-section .section-title { font-size: 42px; line-height: 48px; font-weight: 600; }
.about-content p {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 28px;
  color: #555;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 32px 0 0;
}
.about-stats strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  color: #111;
}
.about-stats span {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #777;
}
.about-cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 26px;
  margin-top: 28px;
  background: #111;
  color: #fff;
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s;
}
.about-cta:hover { background: #333; }

/* ---- FOOTER metrics ---- */
.footer { padding: 64px 0 28px; }
.footer-grid { margin-bottom: 44px; }
.footer h4 { font-size: 13px; font-weight: 600; }
.footer p, .footer li { font-size: 14px; line-height: 24px; }
.footer-bottom { font-size: 12px; padding-top: 24px; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .container, .header-inner, .page-header { padding-left: 32px; padding-right: 32px; }
  .rs-points { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-image img { height: 420px; }
}
@media (max-width: 640px) {
  .container, .header-inner, .page-header { padding-left: 20px; padding-right: 20px; }
  .header { height: 64px; }
  .rs-title, .about-section .section-title, .reviews-section .section-title {
    font-size: 32px !important;
    line-height: 38px !important;
  }
  .rovant-standard, .rovant-lookbook { padding: 64px 0 !important; }
  .rs-points { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .about-image img { height: 320px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
}

/* Back-to-top micro-touch — dip, then fly up and fade while the page glides */
.back-to-top.bt-launch {
  animation: bt-launch 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes bt-launch {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  16%  { transform: translateY(7px) scale(0.92); opacity: 1; }
  100% { transform: translateY(-54px) scale(0.85); opacity: 0; }
}

/* Fade Reveal — white veil + hero zoom-settle on back-to-top */
.fade-reveal-overlay {
  position: fixed;
  inset: 0;
  background: #111;
  opacity: 0;
  pointer-events: none;
  z-index: 1200;
}
.hero.fade-reveal-zoom .hero-slide.is-active img {
  animation: fr-zoom 0.75s ease both;
}
@keyframes fr-zoom {
  from { transform: scale(1.045); }
  to   { transform: scale(1); }
}

/* =============================================================
   PRODUCT INFO COLUMN — luxury clean typography (Inter, readable)
   ============================================================= */
.pd-info-head {
  /* Same typography as the product name (.pd-name), at 75% scale */
  font-family: var(--font-heading) !important;
  font-size: clamp(15px, 1.35vw, 19.5px) !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  line-height: 1.25 !important;
  color: #111 !important;
  text-transform: uppercase;
  text-align: center !important;
  margin: 0 0 18px !important;
}
.pd-info-body {
  font-family: Arial, 'Helvetica Neue', sans-serif !important;
  font-size: var(--fs-pd-body) !important;
  line-height: 1.75 !important;
  color: #111 !important;
  letter-spacing: 0.1px;
  text-align: left !important;
}
.pd-info-body strong {
  font-weight: 700;
  color: #111;
}
.pd-info-block { padding: 0 0 28px !important; }
.pd-info-block + .pd-info-block {
  border-top: 1px solid #ece9e3 !important;
  padding-top: 28px !important;
}

/* Cart summary box — 50% larger, all text black */
.cartpage-layout { grid-template-columns: 1fr 480px; }
.cp-continue-link {
  font-size: 20px !important;
  color: #111 !important;
  margin-bottom: 16px !important;
}
.cp-summary { padding: 36px !important; }
.cp-summary h3 {
  font-size: 24px !important;
  color: #111 !important;
  padding-bottom: 22px !important;
  margin-bottom: 22px !important;
  font-family: var(--font-body) !important; /* Inter — dễ đọc hơn Satoshi */
}
.cp-summary-row {
  font-size: 21px !important;
  color: #111 !important;
  padding: 9px 0 !important;
}
.cp-summary-row strong { font-size: 24px !important; color: #111 !important; font-family: var(--font-body) !important; }
.cp-summary-note {
  font-size: 19px !important;
  color: #111 !important;
  line-height: 1.7 !important;
  margin: 18px 0 27px !important;
}
.cp-checkout-btn {
  font-size: 20px !important;
  padding: 24px 15px !important;
  letter-spacing: 3px !important;
}
@media (max-width: 900px) {
  .cartpage-layout { grid-template-columns: 1fr; }
}

/* =============================================================
   PD-STOCK — tồn kho trên trang sản phẩm (nền trắng, tối giản)
   ============================================================= */
.pd-stock { margin: 0 0 24px; }
.pd-stock-pills {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.14));
}
/* Trang chi tiết: viên nang to & rõ hơn card, 2 nửa BẰNG NHAU */
.pd-stock .stock-pill { width: 150px; padding: 11px 18px; }
.pd-stock .stock-pill i { font-size: 10px; letter-spacing: 2.2px; }
.pd-stock .stock-pill b { font-size: 15px; }
.pd-stock-bar {
  height: 3px;
  background: rgba(17, 17, 17, 0.1);
  border-radius: 3px;
  overflow: hidden;
}
.pd-stock-bar i {
  display: block;
  height: 100%;
  background: #111;
  border-radius: 3px;
  transition: width 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =============================================================
   FOOTER MOBILE — accordion gọn (tham khảo tinh thần Hades)
   ============================================================= */
@media (max-width: 768px) {
  .footer { padding: 24px 0 28px; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-grid > div {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .footer-grid h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 17px 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }
  .footer-grid h4::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 12px;
  }
  .footer-grid > div.is-open h4::after { transform: rotate(225deg); }
  /* Chiều cao thật do JS đo (scrollHeight) → nhịp mở/đóng đều, không khựng */
  .footer-grid ul {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    opacity: 0;
    transition:
      max-height 0.45s cubic-bezier(0.65, 0, 0.35, 1),
      padding-bottom 0.45s cubic-bezier(0.65, 0, 0.35, 1),
      opacity 0.3s ease;
  }
  .footer-grid > div.is-open ul {
    opacity: 1;
    padding-bottom: 16px;
  }
  /* Từng dòng trượt xuống + hiện dần, so le 45ms cho cảm giác mềm */
  .footer-grid ul li {
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .footer-grid > div.is-open ul li {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 45ms + 80ms);
  }
  .footer-bottom { padding-top: 20px; }
}

/* Footer mobile — tinh chỉnh theo ảnh chụp máy thật:
   bớt khoảng trống thừa, dòng bản quyền không bị nút mũi tên che */
@media (max-width: 768px) {
  .about-section { padding-bottom: 64px !important; }
  .footer .footer-grid { margin-bottom: 8px; }
  .footer-bottom {
    font-size: 11px;
    letter-spacing: 1px;
    padding: 16px 56px 0;
    line-height: 1.7;
  }
}

/* =============================================================
   NHỊP KHOẢNG CÁCH MOBILE — 2 tầng: 73px trong cụm bộ sưu tập,
   ~96px giữa các khối lớn (lookbook / reviews / about)
   ============================================================= */
@media (max-width: 768px) {
  .brand-banner { margin-bottom: 0; }                  /* ticker → CORE: 29 → 73 */
  .rovant-lookbook { padding: 20px 0 16px !important; } /* PRIVATE → lookbook: 140 → 96; lookbook → reviews: 144 → 96 */
  .reviews-section { padding: 80px 0 24px !important; } /* reviews → about: 225 → ~96 */
  .about-section { padding-top: 40px !important; }
}

/* =============================================================
   ĐỒNG BỘ FONT TOÀN SITE — Satoshi cho tiêu đề/tên SP, Inter cho nội dung
   ============================================================= */
/* Tên + giá trên product card: một chuẩn duy nhất ở mọi trang (home/shop/search) */
.product-card .product-name {
  font-family: var(--font-heading) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.product-card .product-price {
  font-family: Arial, 'Helvetica Neue', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
/* Tiêu đề section 42px: thống nhất độ đậm 700 như CORE/LOOKBOOK */
.reviews-section .section-title,
.about-section .section-title,
.page-title { font-weight: 700 !important; }
/* Tiêu đề cột footer: Satoshi như mọi tiêu đề khác (trước đây là Inter) */
.footer h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* =============================================================
   REVIEWS — tiêu đề & nhịp cân như các bộ sưu tập phía trên
   ============================================================= */
.reviews-section .section-title {
  font-size: clamp(24px, 3.4vw, 42px) !important; /* = .collection-title */
  letter-spacing: 6px;
}
/* Desktop: lookbook → tiêu đề reviews = 73px (37 + 36), bằng gap dưới tiêu đề.
   Mobile giữ nhịp 96px đã căn riêng. */
@media (min-width: 769px) {
  .rovant-lookbook { padding-bottom: 37px !important; }
  .reviews-section { padding-top: 36px !important; }
}

/* =============================================================
   LOOKBOOK & VIBES — căn TIÊU ĐỀ vào chính giữa khoảng trắng THẬT:
   tính theo mép cuối của dòng chữ giá phía trên và mép đầu của ảnh
   phía dưới (KHÔNG theo padding của section). Giữ nguyên vị trí ảnh
   để phần dưới trang không bị xô lệch.
   Trên = (feature-collection padding-bottom 112) + (lookbook padding-top).
   ============================================================= */
@media (min-width: 769px) {
  /* Khoảng trên chữ (giá → chữ) = 60px do builder/section quy định; đặt khoảng
     dưới (chữ → ảnh) = 60px để tiêu đề nằm CHÍNH GIỮA khoảng trắng thật. */
  .rovant-lookbook .rl-title { margin-top: 0 !important; margin-bottom: 60px !important; }
}

/* =============================================================
   NỚI RỘNG 3 SECTION FEATURE COLLECTION + ĐÁNH GIÁ KHÁCH HÀNG
   Mặc định bị giới hạn max-width 1344px → màn rộng (>1344) trống 2 bên.
   Nâng cap lên 1840px: màn nhỏ vẫn full, màn lớn phủ gần full nhưng
   vẫn căn giữa, có lề khung hợp lý. Card vẫn chia đều 4 cột.
   ============================================================= */
@media (min-width: 1345px) {
  /* Co giãn theo bề ngang màn hình: phủ ~96% trên mọi màn lớn (1440 → 4K),
     chừa lề khung đều 2 bên; cap 2200px để card không phóng quá khổ trên 4K. */
  .feature-collection > .container,
  .reviews-section > .container { max-width: min(2200px, 96vw); }
}

/* =============================================================
   S9 — BANNER PHỤ: slider tối đa 3 ảnh
   Desktop: lăn chuột trên ảnh → wipe dọc (trang đứng yên)
   Mobile: vuốt ngang → wipe ngang (vuốt dọc cuộn trang)
   ============================================================= */
.sub-banner { padding: 0 0 72px; }
.sb-stage {
  position: relative;
  width: 100%;
  height: clamp(340px, 42vw, 600px);
  overflow: hidden;
  background: #f7f7f7;
  touch-action: pan-y;
}
.sb-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.sb-slide.is-active,
.sb-slide.is-entering { visibility: visible; }
.sb-slide.is-entering { z-index: 2; will-change: clip-path, transform; }
.sb-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Ô ảnh để trống trong quản trị → slide tự ẩn */
.sb-slide img[src=""], .sb-slide img:not([src]) { display: none; }
.sb-slide:has(img[src=""]), .sb-slide:has(img:not([src])) { display: none; }

.sb-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.sb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.22);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.65, 0, 0.35, 1), background 0.3s ease;
}
.sb-dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: #111;
}
@media (max-width: 768px) {
  .sub-banner { padding: 72px 0 48px; } /* giữ nhịp 96px sau reviews mobile */
  .sb-stage { height: clamp(220px, 58vw, 340px); }
  .sb-dots { margin-top: 14px; }
}

/* Reviews — sao, tên, nội dung căn giữa */
.review-info {
  align-items: center;
  text-align: center;
}

/* =============================================================
   NÚT GIỎ HÀNG / THANH TOÁN — đồng bộ hiệu ứng với 2 nút product page:
   nâng nhẹ + giãn chữ + bóng đổ + vệt sáng gloss quét ngang (pd-btn-primary).
   Áp cho: drawer giỏ hàng (mọi trang), trang giỏ hàng, trang thanh toán.
   ============================================================= */
.cart-checkout, .cart-view-btn,
.cp-continue-btn, .cp-checkout-btn,
.co-submit, .co-discount button {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, letter-spacing 0.35s ease;
}
.cart-checkout::before, .cart-view-btn::before,
.cp-continue-btn::before, .cp-checkout-btn::before,
.co-submit::before, .co-discount button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0.18) 55%,
    transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.cart-checkout:hover, .cart-view-btn:hover,
.cp-continue-btn:hover, .cp-checkout-btn:not([disabled]):hover,
.co-submit:hover, .co-discount button:hover {
  background: #111;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}
.cart-checkout:hover::before, .cart-view-btn:hover::before,
.cp-continue-btn:hover::before, .cp-checkout-btn:not([disabled]):hover::before,
.co-submit:hover::before, .co-discount button:hover::before { left: 130%; }
.cart-checkout:hover, .cart-view-btn:hover { letter-spacing: 2.5px; }
.cp-continue-btn:hover { letter-spacing: 2.5px; }
.co-submit:hover { letter-spacing: 3px; }
.cp-checkout-btn:not([disabled]):hover { letter-spacing: 4px !important; }
.cart-checkout:active, .cart-view-btn:active,
.cp-continue-btn:active, .cp-checkout-btn:not([disabled]):active,
.co-submit:active, .co-discount button:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}
/* Nút thanh toán bị khoá (giỏ trống): không hiệu ứng */
.cp-checkout-btn[disabled] { transform: none; box-shadow: none; }
.cp-checkout-btn[disabled]::before { display: none; }

/* =============================================================
   MOBILE — 2 nút CTA (THANH TOÁN ở giỏ hàng + HOÀN TẤT ĐƠN HÀNG ở
   thanh toán) không có :hover nên tự chạy vệt sáng lướt qua + zoom nhẹ
   theo vòng lặp để thu hút. Desktop đã có hiệu ứng hover → giữ nguyên.
   ============================================================= */
/* Vòng lặp 1.5s; vệt sáng quét hết trong 1s (0→66.67%), nghỉ 0.5s rồi lặp. */
@keyframes oh-cta-sweep {
  0%      { left: -80%; }
  66.67%  { left: 130%; }
  100%    { left: 130%; }
}
@keyframes oh-cta-zoom {
  0%      { transform: scale(1); }
  33%     { transform: scale(1.03); }
  66.67%  { transform: scale(1); }
  100%    { transform: scale(1); }
}
/* Áp dụng CẢ mobile lẫn desktop (trước đây chỉ mobile). Desktop vẫn giữ
   hiệu ứng hover sẵn có (giãn chữ); vệt sáng + zoom giờ tự chạy ở mọi màn hình. */
.cp-checkout-btn:not([disabled]),
.co-submit:not([disabled]),
.cart-checkout:not([disabled]),
.pd-btn-primary {
  animation: oh-cta-zoom 1.5s ease-in-out infinite;
}
.cp-checkout-btn:not([disabled])::before,
.co-submit:not([disabled])::before,
.cart-checkout:not([disabled])::before,
.pd-btn-primary::before {
  animation: oh-cta-sweep 1.5s linear infinite;
}

/* =============================================================
   MOBILE TYPE SCALE 75% — mọi cỡ chữ trên mobile = 75% bản gốc.
   Sinh tự động từ phép đo cỡ chữ thực tế trên từng trang (390px).
   ============================================================= */
@media (max-width: 768px) {
  .active { font-size: 9.0px !important; }
  .amount { font-size: 15.0px !important; }
  .breadcrumb { font-size: 9.4px !important; }
  .card-quickview { font-size: 12.0px !important; }
  .cart-checkout { font-size: 9.0px !important; }
  .cart-close { font-size: 18.0px !important; }
  .cart-count { font-size: 9.8px !important; }
  .cart-item-meta { font-size: 9.0px !important; }
  .cart-item-name { font-size: 9.8px !important; }
  .cart-item-price { font-size: 9.8px !important; }
  .cart-item-remove { font-size: 8.2px !important; }
  .cart-view-btn { font-size: 9.0px !important; }
  .cartpage-title { font-size: 16.5px !important; }
  .co-back { font-size: 9.8px !important; }
  .co-bank-code { font-size: 9.8px !important; }
  .co-bank-note { font-size: 8.6px !important; }
  .co-contact-btn { font-size: 9.0px !important; }
  .co-empty-note { font-size: 10.1px !important; }
  .co-error-msg { font-size: 9.8px !important; }
  .co-field-err { font-size: 9.8px !important; }
  .co-item-name { font-size: 9.8px !important; }
  .co-item-price { font-size: 9.8px !important; }
  .co-item-qty { font-size: 8.2px !important; }
  .co-item-size { font-size: 8.6px !important; }
  .co-radio-desc { font-size: 9.8px !important; }
  .co-radio-price { font-size: 9.8px !important; }
  .co-section-title { font-size: 12.0px !important; }
  .co-submit { font-size: 9.8px !important; }
  .co-success-contact { font-size: 10.5px !important; }
  .co-success-row { font-size: 12.0px !important; }
  .collection-sub { font-size: 9.8px !important; }
  .collection-title { font-size: 18.0px !important; }
  .count { font-size: 9.0px !important; }
  .cp-checkout-btn { font-size: 15.0px !important; }
  .cp-continue-btn { font-size: 9.0px !important; }
  .cp-continue-link { font-size: 15.0px !important; }
  .cp-item-meta { font-size: 9.0px !important; }
  .cp-item-name { font-size: 10.5px !important; }
  .cp-item-price { font-size: 11.2px !important; }
  .cp-item-remove { font-size: 8.2px !important; }
  .cp-summary-note { font-size: 13.5px !important; }
  /* Hộp tóm tắt đơn hàng (mobile): thu nhỏ tiêu đề + tổng tiền cho cân đối,
     tránh chữ tràn dòng. (Bản gốc 24px/21px được set ở rule "50% larger") */
  .cp-summary { padding: 22px !important; }
  .cp-summary h3 { font-size: 16px !important; padding-bottom: 16px !important; margin-bottom: 16px !important; }
  .cp-summary-row { font-size: 14px !important; padding: 7px 0 !important; }
  .cp-summary-row strong { font-size: 15px !important; }
  #cp-total { font-size: 17px !important; }
  .drawer-link { font-size: 10.5px !important; }
  .drawer-logo { font-size: 16.5px !important; }
  .footer-bottom { font-size: 8.2px !important; }
  .footer-dim { font-size: 10.5px !important; }
  .hero-cta { font-size: 9.8px !important; }
  .hero-tag { font-size: 8.2px !important; }
  .hero-title { font-size: 26.3px !important; }
  .icon { font-size: 33.0px !important; }
  .logo { font-size: 27.0px !important; }
  .mobile-drawer-close { font-size: 12.0px !important; }
  .mobile-nav-caret { font-size: 12.0px !important; }
  .mobile-nav-link { font-size: 12.0px !important; }
  .nav-link { font-size: 13.5px !important; }
  .order-code { font-size: 14.2px !important; }
  .page-cta { font-size: 9.8px !important; }
  .page-title { font-size: 22.5px !important; }
  .pd-btn { font-size: 9.4px !important; }
  .pd-info-body { font-size: 12.8px !important; }
  .pd-ship-panel, .pd-ship-panel p { font-size: 12.8px !important; }   /* khớp đoạn mô tả (.pd-info-body); thắng rule chung p{11.2} */
  .pd-info-head { font-size: 11.2px !important; }
  .pd-info-toggle { font-size: 9.0px !important; }
  .pd-name { font-size: 15.0px !important; }
  .pd-price { font-size: 15.0px !important; }   /* = .pd-name (mobile) */
  .pd-related-title { font-size: 18.0px !important; }
  .pd-size-btn { font-size: 9.8px !important; }
  .pd-size-guide-btn { font-size: 8.2px !important; }
  .pd-size-label { font-size: 9.0px !important; }
  .product-badge { font-size: 7.5px !important; }
  .product-desc { font-size: 12.0px !important; }
  .product-name { font-size: 11.2px !important; }
  .product-price { font-size: 10.5px !important; }
  .review-handle { font-size: 10.5px !important; }
  .review-stars { font-size: 10.5px !important; }
  .review-text { font-size: 11.2px !important; }
  .reviews-arrow { font-size: 19.5px !important; }
  .rl-title { font-size: 18.0px !important; }
  .rmq-dot { font-size: 28.5px !important; }
  .rmq-fill { font-size: 28.5px !important; }
  .rmq-outline { font-size: 28.5px !important; }
  .rovant-marquee-sr { font-size: 12.0px !important; }
  .rs-label { font-size: 9.8px !important; }
  .rs-num { font-size: 9.0px !important; }
  .rs-point-desc { font-size: 10.5px !important; }
  .rs-point-title { font-size: 13.5px !important; }
  .rs-sub { font-size: 11.2px !important; }
  .rs-title { font-size: 24.0px !important; }
  .rv-step-label { font-size: 6.8px !important; }
  .rv-step-num { font-size: 9.0px !important; }
  .section-title { font-size: 18.0px !important; }
  .shop-count { font-size: 9.8px !important; }
  .static-page-sub { font-size: 12.0px !important; }
  a { font-size: 10.5px !important; }
  b { font-size: 9.8px !important; }
  button { font-size: 10.5px !important; }
  em { font-size: 9.8px !important; }
  h2 { font-size: 19.5px !important; }
  h3 { font-size: 12.0px !important; }
  h4 { font-size: 9.8px !important; }
  h5 { font-size: 9.0px !important; }
  i { font-size: 7.1px !important; }
  label { font-size: 9.0px !important; }
  li { font-size: 10.5px !important; }
  option { font-size: 9.8px !important; }
  p { font-size: 11.2px !important; }
  s { font-size: 9.0px !important; }
  span { font-size: 10.5px !important; }
  strong { font-size: 12.8px !important; }
  /* Brand banner dùng biến --bb-fs từ builder → nhân 0.75 thay vì cố định */
  .brand-banner-track span { font-size: calc(var(--bb-fs, 16px) * 0.75) !important; }
  /* Số trong pill tồn kho trang chi tiết to hơn card (15px → 11.2px) */
  .pd-stock .stock-pill b { font-size: 11.2px !important; }
  .pd-stock .stock-pill i { font-size: 7.5px !important; }
  /* Tên/giá trên product card có rule !important specificity cao hơn → đè lại */
  .product-card .product-name { font-size: 11.2px !important; }
  .product-card .product-price { font-size: 10.5px !important; }
  .product-card .product-desc { font-size: 9.8px !important; }
}

/* =============================================================
   PDP GALLERY — thumbnail tròn ĐÈ LÊN trong ảnh chính (desktop).
   Bỏ cột thumbnail riêng → ảnh chính mở rộng chiếm trọn phần đó;
   dải thumb giữ nguyên vị trí (mép phải, xếp dọc từ trên) nhưng
   nổi trên ảnh, độ mờ 85%.
   ============================================================= */
@media (min-width: 861px) {
  .pd-media-wrap {
    grid-template-columns: 1fr; /* trước: 1fr 56px — ảnh nuốt luôn cột thumb */
    position: relative;
  }
  .pd-thumbs {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
  }
  .pd-thumb {
    width: 28px;  /* 50% của 56px — chỉ desktop, mobile giữ nguyên */
    height: 28px;
    opacity: 0.5;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    border-color: rgba(255, 255, 255, 0.6);
  }
  .pd-thumb:hover { opacity: 0.85; }
  /* Desktop: thumbs nổi TRÊN ẢNH → ring trắng (như mockup Option A) */
  .pd-thumb.is-active {
    opacity: 1;
    outline-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  }
  .pd-thumbs { gap: 10px; padding: 5px; }
  .pd-thumb:hover { opacity: 1; }
  .pd-thumb.is-active { opacity: 1; }
}

/* =============================================================
   MOBILE UPGRADE — Option 1 (scroll reveal toàn trang + parallax hero)
   Chỉ áp dụng ≤768px. Class được JS gắn (OH.enhanceMobileHome) nên
   không có JS = không có hiệu ứng, nội dung luôn hiển thị bình thường.
   ============================================================= */
/* Section tự reveal (không có .reveal-item con) — reviews, sub-banner, lookbook */
.reveal-on-scroll.reveal-item-self {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.reveal-item-self.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  /* Hero stage được JS parallax — báo trước cho trình duyệt */
  .hero-stage { will-change: transform; }
}

/* =============================================================
   PILL "ĐÃ BÁN" TRÊN CARD — homepage mobile, phía trên tên sản phẩm.
   Mini capsule cùng ngôn ngữ Dynamic Island với pill tồn kho.
   Desktop & trang khác: ẩn (desktop đã có capsule trong overlay hover).
   ============================================================= */
.card-sold-m { display: none; }
@media (max-width: 768px) {
  .feature-collection .card-sold-m {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(15, 15, 17, 0.88);
    color: #fff;
    border-radius: 999px;
    padding: 4px 11px;
    margin: 0 0 7px;
    font-family: Arial, 'Helvetica Neue', sans-serif;
    line-height: 1;
  }
  .feature-collection .card-sold-m i {
    font-style: normal;
    font-weight: 500;
    font-size: 7.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    opacity: 0.65;
  }
  .feature-collection .card-sold-m b {
    font-weight: 700;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }
}

/* =============================================================
   MOBILE SLIDE-IN 2 BÊN — homepage ≤768px (OH.enhanceMobileHome).
   Phần tử ẩn trượt từ trái/phải về vị trí gốc; reset khi ra khỏi
   màn hình nên vuốt lên hay xuống đều thấy hiệu ứng.
   ============================================================= */
@media (max-width: 768px) {
  body { overflow-x: clip; } /* chặn tràn ngang khi phần tử đang trượt vào */
  .srv {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
  }
  .srv-l { transform: translateX(-46px); }
  .srv-r { transform: translateX(46px); }
  .srv.srv-in { opacity: 1; transform: translateX(0); }
}

/* =============================================================
   MOBILE HOVER-PEEK — card ở GIỮA màn hình tự đổi sang ảnh hover
   rồi trả lại khi cuộn tiếp (OH.initMobileHoverPeek).
   Hiệu ứng IRIS: ENTER nở vòng tròn từ tâm (0→80%) + zoom dịu 1.05→1;
   LEAVE thu vòng tròn về tâm (80→0%) = ĐẢO NGƯỢC của enter (đối xứng, không
   giật vì gốc ở tâm). Nhịp: mở 0.5s · giữ 0.8s · đóng 0.5s.
   ============================================================= */
@media (max-width: 768px) {
  .product-card .product-image-wrap img:nth-of-type(2) {
    opacity: 0;
    clip-path: circle(0% at 50% 50%);      /* ẩn: vòng tròn = 0 ở tâm */
    transform: scale(1.05);
    transition: opacity 0.3s ease, clip-path 0s linear 0.3s, transform 0s linear 0.3s;
  }
  .product-card.hov-m .product-image-wrap img:nth-of-type(2) {
    opacity: 1;
    clip-path: circle(80% at 50% 50%);     /* mở: vòng tròn phủ kín khung */
    transform: scale(1);
    transition: opacity 0s, clip-path 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.58s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  /* LEAVE = thu tròn về tâm (đảo ngược enter) → ảnh chính lộ lại từ ngoài vào. */
  .product-card.hov-leaving .product-image-wrap img:nth-of-type(2) {
    opacity: 1;
    clip-path: circle(0% at 50% 50%);
    transform: scale(1.05);
    transition: opacity 0s, clip-path 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.58s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* ============================================================
   PREMIUM ADD-ONS (freeship bar / trust badges / sticky ATC / skeleton)
   ============================================================ */

/* --- Freeship progress bar (giỏ hàng drawer + trang giỏ) --- */
.oh-freeship { margin-bottom: 16px; font-family: Arial, 'Helvetica Neue', sans-serif; }
.oh-freeship-txt { font-size: 12.5px; color: #555; margin-bottom: 7px; line-height: 1.45; }
.oh-freeship-txt b { color: #111; font-weight: 600; }
.oh-freeship-txt .oh-fs-done { color: #1E884F; font-weight: 600; }
.oh-freeship-bar { height: 6px; border-radius: 99px; background: #ece9e3; overflow: hidden; }
.oh-freeship-fill { height: 100%; background: linear-gradient(90deg, #1E884F, #43c47e); border-radius: 99px; transition: width .55s cubic-bezier(.22,1,.36,1); }

/* --- Trust badges (trang sản phẩm) --- */
.pd-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #ece9e3; }
.pd-trust-item { display: flex; align-items: center; gap: 9px; font-family: Arial, 'Helvetica Neue', sans-serif; font-size: 12px; color: #333; line-height: 1.3; }
.pd-trust-item svg { width: 19px; height: 19px; flex-shrink: 0; stroke: #1E884F; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 768px) { .pd-trust { gap: 10px; } .pd-trust-item { font-size: 11.5px; } }

/* --- Skeleton shimmer cho ảnh sản phẩm (tải mượt) --- */
.product-image-wrap:not(.imgok) {
  background: #efedea;
  background-image: linear-gradient(100deg, #efedea 30%, #f7f6f4 50%, #efedea 70%);
  background-size: 200% 100%;
  animation: oh-shimmer 1.25s ease-in-out infinite;
}
@keyframes oh-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============================================================
   FX: 3D carousel (lookbook) · footer particles · text distortion
   ============================================================ */

/* --- Lookbook 3D carousel --- */
.lb3d-scene { width: 100%; max-width: 1000px; margin: 0 auto; height: clamp(380px, 56vh, 540px);
  perspective: 1500px; position: relative; cursor: grab; touch-action: pan-y; }
.lb3d-scene:active { cursor: grabbing; }
.lb3d-ring { position: absolute; top: 50%; left: 50%; width: 230px; height: 330px;
  margin-left: -115px; margin-top: -165px; transform-style: preserve-3d; }
.lb3d-card { position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
  backface-visibility: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.42);
  border: 1px solid rgba(0,0,0,.06); display: block; }
.lb3d-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.lb3d-hint { text-align: center; font-family: Arial, 'Helvetica Neue', sans-serif; font-size: 11px;
  letter-spacing: 2.5px; color: #aaa; margin-top: 14px; text-transform: uppercase; }
@media (max-width: 768px) {
  .lb3d-scene { height: clamp(320px, 50vh, 430px); }
  .lb3d-ring { width: 168px; height: 240px; margin-left: -84px; margin-top: -120px; }
}

/* --- Footer gravity particles --- */
.footer { position: relative; overflow: hidden; }
#footer-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9; }
.footer .container { position: relative; z-index: 1; }

/* Tiêu đề collection: KHÔNG hiệu ứng méo khi hover (đồng nhất mọi section) */

/* ============================================================
   IMPROVE: hero CTA · home trust strip · collection view-all
   ============================================================ */
/* Hero CTA cố định (luôn hiện trên mọi slide) */
.hero-shop-cta {
  position: absolute; left: 50%; bottom: clamp(26px, 6vh, 60px); transform: translateX(-50%);
  z-index: 5; background: #fff; color: #111;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; text-decoration: none; padding: 15px 34px; border-radius: 99px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, letter-spacing .25s ease;
}
.hero-shop-cta:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.32); letter-spacing: 3px; }
@media (max-width: 768px) { .hero-shop-cta { font-size: 11.5px; padding: 13px 26px; bottom: 20px; } }

/* Trust strip trang chủ (gồm cam kết + freeship) */
.home-trust { background: #0b0b0b; color: #fff; padding: clamp(22px, 3vw, 34px) 0; }
.home-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.home-trust .ht-item { display: flex; align-items: center; justify-content: center; gap: 11px;
  font-family: Arial, 'Helvetica Neue', sans-serif; font-size: 13px; letter-spacing: .3px; }
.home-trust .ht-item svg { width: 22px; height: 22px; flex: 0 0 auto; stroke: #c9a96e; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 768px) {
  .home-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
  .home-trust .ht-item { flex-direction: column; text-align: center; gap: 8px; font-size: 11.5px; }
}

/* "XEM TẤT CẢ" cuối mỗi feature collection */
.fc-viewall-wrap { text-align: center; margin-top: clamp(20px, 3vw, 36px); }
.fc-viewall { font-family: Arial, 'Helvetica Neue', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: #111; text-decoration: none; border-bottom: 1px solid #111; padding-bottom: 4px;
  transition: letter-spacing .25s ease, opacity .2s ease; }
.fc-viewall:hover { letter-spacing: 2.5px; opacity: .7; }

/* ============================================================
   STARRY SKY — nền bầu trời sao cho trang chủ (body.starry)
   ============================================================ */
body.starry { background: radial-gradient(ellipse at 50% -10%, #141828 0%, #0a0c16 55%, #05060c 100%); }
#sky-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
/* Các khu nội dung trong suốt để lộ trời sao */
body.starry .feature-collection,
body.starry .reviews-section,
body.starry .rovant-lookbook,
body.starry .home-trust,
body.starry .brand-banner { background: transparent !important; }
/* Chữ sáng trên nền tối */
body.starry .collection-title,
body.starry .rl-title,
body.starry .reviews-section .section-title,
body.starry .product-name,
body.starry .product-price,
body.starry .brand-banner-track span { color: #ECECEE !important; }
body.starry .collection-sub,
body.starry .product-desc,
body.starry .review-text,
body.starry .review-handle,
body.starry .lb3d-hint,
body.starry .fc-viewall { color: #b9bcc6 !important; }
/* Card ảnh: viền mềm để "nổi" trên nền sao */
body.starry .product-image-wrap { box-shadow: 0 10px 34px rgba(0,0,0,.45); border-radius: 8px; }

/* ============================================================
   BOTTOM MARQUEE — hàng chữ chạy dưới cùng (giống Hades)
   ============================================================ */
.bottom-marquee { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: #0b0b0b; overflow: hidden; white-space: nowrap; padding: 13px 0;
  box-shadow: 0 -4px 18px rgba(0,0,0,.25); }
/* Chừa chỗ để thanh cố định không che nội dung/footer (chỉ trang chủ) */
body.has-transparent-header { padding-bottom: 46px; }
.bm-track { display: inline-flex; gap: 46px; padding-left: 46px; animation: marquee-scroll 32s linear infinite; will-change: transform; }
.bm-track span { font-family: var(--font-heading); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.bm-track .bm-accent { color: #1E884F; }
@media (max-width: 768px) { .bm-track { gap: 30px; padding-left: 30px; } .bm-track span { font-size: 11.5px; } }

/* ============================================================
   VÒNG TRÒN — 9 ảnh 1:1 xoay quanh tâm; ảnh tới 12h → model hiện giữa
   ============================================================ */
/* CIRCLE → MARQUEE: 10 ảnh vuông chạy phải→trái, loop liền mạch */
.circle-section { padding: clamp(30px, 5vw, 70px) 0; overflow: hidden; }
.circle-stage { position: relative; width: 100%; overflow: hidden; }
.circle-track { display: flex; gap: 0; width: max-content; will-change: transform;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  animation: circle-scroll var(--circle-dur, 45s) linear infinite; }
.circle-track:hover { animation-play-state: paused; }
.circle-cell { flex: 0 0 auto; width: clamp(220px, 30vw, 340px); aspect-ratio: 1 / 1;
  border-radius: 0; overflow: hidden; background: #f3f3f3; }
.circle-cell img { width: 100%; height: 100%; object-fit: cover; display: block;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
@keyframes circle-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(var(--circle-shift,-50%),0,0); } }
@media (max-width: 768px) {
  .circle-cell { width: 210px; }
}
@media (max-width: 480px) {
  .circle-cell { width: 168px; }
}

/* ============================================================
   GIẢM CỠ CHỮ NỘI DUNG HOMEPAGE (DESKTOP) — Arial trông to hơn Inter
   hôm qua nên thu nhỏ ~1–2px cho khớp cảm giác cũ. Chỉ ≥769px, không
   đụng mobile (đã có type-scale riêng) và không đổi layout.
   ============================================================ */
@media (min-width: 769px) {
  .collection-sub        { font-size: 12px !important; }
  .product-card .product-desc { font-size: 14px !important; }
  .rs-sub                { font-size: 14px !important; }
  .rs-point-title        { font-size: 16px !important; }
  .rs-point-desc         { font-size: 13px !important; }
  .review-text           { font-size: 14px !important; }
  .review-handle         { font-size: 13px !important; }
  .about-content p       { font-size: 14px !important; }
  .home-trust .ht-item   { font-size: 12px !important; }
  .footer p, .footer li  { font-size: 13px !important; }
  .fc-viewall            { font-size: 12px !important; }
  /* #7 — Đồng bộ cỡ MỌI tiêu đề section qua 1 token (--fs-section-title) */
  .collection-title,
  .feature-collection .collection-title,
  .rl-title,
  .rs-title,
  .reviews-section .section-title,
  .about-section .section-title { font-size: var(--fs-section-title) !important; }
}



/* =============================================================
   STATIC DOC PAGES (menu drop): rovant-standard / shipping-returns /
   contact / become-a-member. Tiêu đề trang + heading nội dung căn
   GIỮA, cỡ & font giống ATELIER ở homepage. Nút back đen góc phải
   trên về trang chủ. (breadcrumb + subtitle đã gỡ khỏi HTML.)
   ============================================================= */
.static-doc .page-header { position: relative; text-align: center; }
.static-doc .page-title {
  font-family: var(--font-heading);
  font-size: var(--fs-section-title);      /* = ATELIER (~25px) */
  font-weight: 700;
  letter-spacing: 6px;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
}
.static-doc .static-page h3 {           /* vd ABOUT US — giống ATELIER, căn giữa */
  font-family: var(--font-heading);
  font-size: var(--fs-section-title);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 42px;
}
/* Nút back đen, góc phải trên */
.page-back {
  position: absolute;
  top: clamp(16px, 3.2vw, 30px);
  right: clamp(18px, 4vw, 56px);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #111111; color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 6;
  transition: background .25s ease, transform .25s ease;
}
.page-back:hover { background: #000000; transform: translateX(-3px); }
.page-back svg { width: 20px; height: 20px; }
/* Chỉ hiện ở desktop — mobile ẩn (tránh đè lên tiêu đề); mobile đã có nút back trình duyệt */
@media (max-width: 768px) { .page-back { display: none; } }


/* =============================================================
   SHIPPING & RETURN — gom trust badge thành 1 nút xổ. Nút dùng nền
   .pd-btn (cùng cỡ/viền/typography với THÊM GIỎ / MUA NGAY) để đồng bộ.
   ============================================================= */
.pd-ship { margin-top: 10px; }   /* cách đều 10px như giữa 2 nút trong .pd-actions, bỏ gạch ngang */
.pd-btn-ship {
  background: #ffffff; color: #111111;          /* trắng tinh, viền đen (kế thừa .pd-btn) */
  display: flex; align-items: center; justify-content: center;   /* chữ căn GIỮA ô */
  padding: 0 18px; position: relative;
}
.pd-btn-ship:hover { background: #ffffff; }      /* giữ trắng khi hover */
/* mũi tên neo mép phải tuyệt đối → không lệch chữ khỏi tâm */
.pd-ship-chev { position: absolute; right: 18px; top: 50%; width: 18px; height: 18px;
  transform: translateY(-50%); transition: transform .4s cubic-bezier(.22,1,.36,1); }
.pd-btn-ship[aria-expanded="true"] .pd-ship-chev { transform: translateY(-50%) rotate(180deg); }
/* Đóng/mở MƯỢT bằng grid-rows (co giãn đúng chiều cao thật, không khựng như max-height) */
.pd-ship-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .46s cubic-bezier(.22,1,.36,1), opacity .34s ease;
  /* đồng bộ size & font với đoạn mô tả (.pd-info-body) */
  font-family: Arial, 'Helvetica Neue', sans-serif; font-size: var(--fs-pd-body); color: #111; line-height: 1.75;
}
.pd-ship-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.pd-ship-inner { overflow: hidden; min-height: 0; }
.pd-ship-panel.is-open .pd-ship-inner { padding-top: 14px; }
.pd-ship-panel { text-align: left; }
.pd-ship-panel p { margin: 0 0 16px; }
.pd-ship-panel p:last-child { margin-bottom: 0; }
/* label tách dòng riêng + giãn nhẹ cho gọn đẹp */
.pd-ship-panel strong { display: block; margin-bottom: 4px; color: #111111; font-weight: 700; }