/* ==================== Header (bar 90px, đè lên hero) ==================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-2);
  transition: background var(--duration-fast) var(--ease-out),
    backdrop-filter var(--duration-fast) var(--ease-out);
}

/* Hover header → nền TRẮNG ĐỤC (kính mờ): trắng bán trong + blur nền phía sau.
   Icon/logo/lang chuyển tối để đọc được trên nền sáng. */
.site-header:hover {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
/* Trang chủ cuộn qua hero (`.is-stuck`): CHỈ đổi icon/logo/lang sang tối, KHÔNG
   thêm nền — header freeze các trang khác cũng trong suốt, để đồng bộ. */
/* `body` để thắng các override theo trang (vd .page-dress đặt hamburger màu kem) —
   không có nó, hover đổi nền sang trắng mà vạch vẫn kem → mất nút. */
body .site-header:hover .nav-toggle span,
body .site-header.is-stuck .nav-toggle span {
  background: var(--color-text);
}
.site-header:hover .site-logo,
.site-header.is-stuck .site-logo {
  opacity: 1;
  color: var(--color-text);
}
.site-header:hover .lang-switch,
.site-header.is-stuck .lang-switch {
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .site-header {
    height: calc(90 * var(--u));
    padding: 0 calc(50 * var(--u));
  }
  .nav-toggle {
    width: calc(16 * var(--u));
    gap: calc(8 * var(--u));
  }
  .nav-toggle span {
    width: calc(16 * var(--u));
  }
  .nav-toggle span:first-child {
    width: calc(10 * var(--u));
  }
  .site-logo {
    font-size: calc(32 * var(--u));
  }
  .lang-switch {
    font-size: calc(14 * var(--u));
    gap: calc(6 * var(--u));
  }
}

/* Hamburger: 3 vạch rộng 10/16/16px, gap 8, màu kem trên hero tối */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 16px;
  padding: 3px 0;
}

.nav-toggle span {
  display: block;
  height: 1px;
  width: 16px;
  background: var(--color-bg);
  transition: width var(--duration-fast) var(--ease-out);
}

.nav-toggle span:first-child {
  width: 10px;
}

/* Hover: vạch ngắn (10px) chạy từ trên xuống giữa — Figma 0.2s EASE_OUT */
.nav-toggle:hover span:first-child {
  width: 16px;
}

.nav-toggle:hover span:nth-child(2) {
  width: 10px;
}

.nav-toggle--dark span {
  background: var(--color-text);
}

/* Logo SOLEIL căn giữa — Figma để opacity 0 ở trang chủ nên ẩn */
.site-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-body); /* Manrope (theo yêu cầu) */
  font-weight: 700; /* in đậm SOLEIL — Figma Design(Final): Manrope 700 */
  font-size: 32px;
  letter-spacing: 0.02em;
  color: var(--color-bg);
  opacity: 0;
  pointer-events: none;
}

/* VNI / ENG — Manrope 14px, kem */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-bg);
}

.lang-switch button {
  color: inherit;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.lang-switch button[aria-current="true"],
.lang-switch button:hover {
  opacity: 1;
}

/* Ngôn ngữ đang chọn: in đậm (feedback KH) */
.lang-switch button[aria-current="true"] {
  font-weight: 600;
}

/* ==================== Menu sidebar (387px, nền kem, trượt từ trái) ==================== */
.nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: min(387px, 86vw);
  height: 100vh;
  height: 100dvh;
  z-index: 200;
  background: var(--color-bg);
  padding: 38px 50px;
  transform: translateX(-100%);
  transition: transform 0.5s linear; /* Figma: 0.5s LINEAR */
  overflow-y: auto;
}

.nav-panel.is-open {
  transform: translateX(0);
}

.nav-panel .nav-toggle {
  margin-bottom: 52px; /* hamburger → nav list = 52px (Figma) */
}

.nav-panel__nav {
  display: flex;
  flex-direction: column;
  gap: 48px; /* khoảng cách 2 nhóm */
}

.nav-panel__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-panel__group--other {
  gap: 20px;
}

.nav-panel__group a,
.nav-panel__group .nav-label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: opacity var(--duration-fast) var(--ease-out);
}

/* Nhãn "Collections" — chỉ là tiêu đề nhóm, KHÔNG click được */
.nav-panel__group .nav-label {
  display: inline-block;
  cursor: default;
}

/* Hover: nhấn nhẹ bằng text-shadow thay vì font-weight:600 — font-weight làm chữ
   rộng thêm gây reflow/"giật" (đặc biệt mục "Collections"). text-shadow giữ layout. */
.nav-panel__group a:hover {
  text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

/* Lớp bắt click ngoài để đóng menu (Figma không có nền tối → để rất nhẹ) */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(16, 16, 16, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
    visibility 0s linear var(--duration-base);
}

/* Khoá cuộn nền (menu, overlay ảnh). Thanh cuộn biến mất → khung nhìn rộng ~15px;
   bù lại bằng --sbw (main.js đo trước khi khoá) để trang không "giật": padding
   cho luồng thường, margin cho header (fixed, không ăn padding của body). */
body.is-scroll-locked {
  overflow: hidden;
  padding-right: var(--sbw, 0px);
}

body.is-scroll-locked .site-header {
  margin-right: var(--sbw, 0px);
}

.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-base) var(--ease-out);
}

/* Menu trượt co giãn theo tỉ lệ Figma ở dải desktop */
@media (min-width: 1024px) {
  .nav-panel {
    width: min(calc(387 * var(--u)), 86vw);
    padding: calc(38 * var(--u)) calc(50 * var(--u));
  }
  .nav-panel .nav-toggle {
    margin-bottom: calc(52 * var(--u));
  }
  .nav-panel__nav {
    gap: calc(48 * var(--u));
  }
  .nav-panel__group {
    gap: calc(12 * var(--u));
  }
  .nav-panel__group--other {
    gap: calc(20 * var(--u));
  }
  .nav-panel__group a,
  .nav-panel__group .nav-label {
    font-size: calc(14 * var(--u));
    line-height: calc(26 * var(--u));
  }
}

/* ==================== Hero ==================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-dark);
}

/* Hero slideshow — các slide xếp chồng, crossfade (Figma: ảnh flashback tự đổi) */
.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease-standard);
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 var(--space-2) var(--space-4);
}

@media (min-width: 1024px) {
  .hero__content {
    padding: 0 calc(64 * var(--u)) calc(64 * var(--u));
  }
}

/* Title + credit đều là SVG xuất trực tiếp từ Figma (fill #fdfcf8 baked sẵn) —
   nét căng ở mọi cỡ, vị trí không bao giờ lệch khi scale. */
.hero__titlewrap {
  position: relative;
  width: 100%;
  /* Scale full 100% chiều ngang ở MỌI cỡ màn (bỏ trần 1369 của Figma) + canh giữa */
  margin-inline: auto;
}

.hero__title {
  margin: 0;
  line-height: 0;
}

.hero__title img {
  display: block;
  width: 100%;
  height: auto;
}

/* Credit "collection by Soleil Bridal" — toạ độ lấy chính xác từ Figma,
   đặt theo % nên luôn khớp: trên góc phải, ngay trên chữ "ow". */
.hero__credit {
  position: absolute;
  top: 12.5%;
  right: 2.05%;
  width: 12.2%;
  height: auto;
}

/* ==================== Filmstrip carousel ==================== */
/* Figma: card 327px, gap 10px, padding-left 50px, nền cream, cách hero 116px */
/* Bọc filmstrip để đặt 2 nút ‹ › (kiểu nút dùng chung với Dress Detail) */
.filmstrip-wrap {
  position: relative;
}

.filmstrip {
  display: flex;
  gap: 10px;
  margin-top: var(--space-5);
  padding: 0 var(--space-2);
  overflow-x: auto;
  cursor: grab;
  background: var(--color-bg);
}

@media (min-width: 1024px) {
  .filmstrip {
    gap: calc(10 * var(--u));
    margin-top: calc(116 * var(--u)); /* khoảng cách hero → filmstrip đúng Figma */
    padding: 0 calc(50 * var(--u));
  }
}

.filmstrip.is-dragging {
  cursor: grabbing;
}

.filmstrip::-webkit-scrollbar {
  display: none;
}

.filmstrip {
  scrollbar-width: none;
}

.filmstrip__item {
  flex: 0 0 78%;
  position: relative;
  overflow: hidden;
}

@media (min-width: 600px) {
  .filmstrip__item {
    flex-basis: 45%;
  }
}

@media (min-width: 1024px) {
  .filmstrip__item {
    flex-basis: calc(327 * var(--u)); /* card 327px Figma, co theo tỉ lệ */
  }
  .filmstrip__name {
    font-size: calc(28 * var(--u));
    line-height: calc(42 * var(--u));
  }
}

.filmstrip__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 327 / 480; /* tỉ lệ card Figma */
  object-fit: cover;
  pointer-events: none;
  /* Hover: ảnh cao 480→498px (~+3.7%), 800ms EASE_IN — phóng nhẹ theo chiều dọc */
  transform-origin: center top;
  transition: transform var(--anim-slow) var(--ease-in);
}

.filmstrip__item:hover img {
  transform: scale(1.037);
}

/* Tên look CHỈ hiện khi hover (theo yêu cầu khách): trượt lên + hiện dần. */
.filmstrip__name {
  position: absolute;
  left: 11%;
  bottom: 6%;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 28px;
  line-height: 42px;
  letter-spacing: 0.03em;
  color: #fdfcf8;
  text-shadow: 0 1px 12px rgba(16, 16, 16, 0.45);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--anim-slow) var(--ease-out),
    transform var(--anim-slow) var(--ease-out);
  pointer-events: none;
}

.filmstrip__item:hover .filmstrip__name {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== From Sketch to Dream (Section 2) ==================== */
/* Figma: 2 ảnh ~650px cạnh nhau (gap 20), heading phủ giữa phía trên.
   Toạ độ: images y0, content y75 tính từ đỉnh section. */

/* --u (đơn vị co giãn) khai báo ở :root trong base.css, dùng chung toàn site. */
.sketch__inner {
  position: relative;
}

/* Head cũng đi TỪ TRÊN XUỐNG (ghi đè hướng mặc định translateY(24px) từ dưới) */
.sketch__inner[data-reveal] {
  transform: translateY(-24px);
}

.sketch__inner[data-reveal].is-visible {
  transform: translateY(0);
}

.sketch__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--u));
  align-items: start;
}

/* Ảnh "unveil" từ trên xuống (Figma Section 2 reveal, LINEAR) */
.sketch__img {
  width: 100%;
  object-fit: cover;
  /* Reveal TỪ TRÊN XUỐNG: che từ đáy (bottom 100%) → mở dần xuống */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 2.6s linear;
}

/* Đặt khung ĐÚNG tỉ lệ ảnh gốc (left 1300×1314, right 1300×1442) → object-fit:cover
   không cắt, hiện đủ toàn bộ chân/đuôi váy. */
.sketch__img--left {
  aspect-ratio: 1300 / 1314;
}

.sketch__img--right {
  aspect-ratio: 1300 / 1442;
}

.sketch__inner.is-visible .sketch__img {
  clip-path: inset(0 0 0 0);
}

.sketch__inner.is-visible .sketch__img--right {
  transition-delay: 0.25s;
}

/* Heading phủ giữa, cách đỉnh 75px như Figma (605px rộng, canh giữa).
   Scrim kem mờ phía sau chữ: bản Figma dùng ảnh sáng ở dải này, ảnh dự án lại
   tối một nửa (đo được luma ~41 bên phải) nên chữ #101010 sẽ chìm. Lớp nền kem
   nhẹ đảm bảo đọc được mà vẫn giữ đúng bố cục chữ đè ảnh của Figma. */
.sketch__head {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(660 * var(--u)), 88%);
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  text-align: center;
  padding: calc(28 * var(--u)) calc(40 * var(--u));
}

.sketch__head .section-subtext {
  max-width: calc(455 * var(--u));
}

/* Chữ đè co giãn theo tỉ lệ Figma trong dải desktop (≥1024).
   Dưới 1024 giữ cỡ chữ responsive mặc định để không bị nhỏ quá. */
@media (min-width: 1024px) {
  .sketch__head .section-heading {
    font-size: calc(36 * var(--u));
    line-height: 1.22;
  }
  .sketch__head .section-subtext {
    font-size: calc(14 * var(--u));
    line-height: 1.86;
  }
}

/* ==================== Our Collections (Section 3) ==================== */
/* Figma: trái = text (439px) + prev/next; phải = list card 553×737 cuộn ngang.
   Container align vertical center, lề trái 50px, phải 60px, gap 10. */
/* Pin: cao thêm --coll-scroll (JS đặt) để tạo quãng cuộn; stage ghim giữa màn */
.collections__pin {
  position: relative;
}

.collections__stage {
  display: grid;
  gap: 40px;
  align-items: center;
  padding-left: var(--space-2);
}

@media (min-width: 1024px) {
  .collections__stage {
    grid-template-columns: calc(439 * var(--u)) 1fr;
    gap: calc(10 * var(--u));
    padding-left: calc(50 * var(--u));
    padding-right: 0;
  }
  .collections__pin.is-pinning .collections__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    align-content: center;
  }
}

.collections__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: var(--space-2);
  max-width: 439px;
}

@media (min-width: 1024px) {
  .collections__text {
    padding-right: calc(40 * var(--u));
    gap: calc(12 * var(--u));
    max-width: calc(439 * var(--u));
  }
  .collections__text .section-heading {
    font-size: calc(36 * var(--u));
    line-height: 1.22;
  }
}

.collections__text .section-subtext {
  max-width: 338px;
}

/* Prev/next: 2 nút tròn viền mảnh, gap 40 (Figma) */
.collections__nav {
  display: none; /* Ẩn 2 nút ←/→ theo yêu cầu (vẫn cuộn ngang bằng scroll/pin) */
}

/* Nút = icon vector Figma (36×36), không viền */
.arrow-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  transition: opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.arrow-btn img {
  width: 36px;
  height: 36px;
  display: block;
}

.arrow-btn:hover {
  opacity: 0.55;
}

.arrow-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

/* Override fluid (đặt SAU base để đúng thứ tự cascade) cho subtext/nav/nút mũi tên */
@media (min-width: 1024px) {
  .collections__text .section-subtext {
    max-width: calc(338 * var(--u));
  }
  .collections__nav {
    gap: calc(40 * var(--u));
    margin-top: calc(12 * var(--u));
  }
  .arrow-btn,
  .arrow-btn img {
    width: calc(36 * var(--u));
    height: calc(36 * var(--u));
  }
}

/* List card cuộn ngang, mỗi card 553×737 (Figma) */
/* Viewport cắt phần tràn; track dịch ngang theo tiến độ cuộn (JS) */
.collections__viewport {
  overflow: hidden;
}

.collections__track {
  display: flex;
  gap: 10px;
  will-change: transform;
  padding-right: var(--space-2);
}

/* Chưa pin (mobile / chưa init JS): cho cuộn ngang bằng tay */
@media (max-width: 1023px) {
  .collections__viewport {
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .collections__viewport::-webkit-scrollbar {
    display: none;
  }
}

.collection-card {
  position: relative;
  flex: 0 0 78%;
  scroll-snap-align: start;
  overflow: hidden;
  aspect-ratio: 553 / 737;
  color: var(--color-bg);
}

@media (min-width: 600px) {
  .collection-card {
    flex-basis: 46%;
  }
}

@media (min-width: 1024px) {
  .collection-card {
    flex-basis: calc(664 * var(--u)); /* +20% so với 553px Figma (theo yêu cầu: to hơn) */
  }
  /* Ảnh cao bằng chiều cao section (stage = 100vh khi pin); bề rộng vẫn fluid,
     object-fit:cover lấp đầy không méo. Ghi đè aspect-ratio 553/737 mặc định. */
  .collections__viewport {
    height: 100vh;
  }
  .collections__track {
    height: 100%;
  }
  .collection-card {
    height: 100%;
  }
}

/* Hover = crossfade sang ảnh thứ 2 của bộ sưu tập, 0.8s EASE_OUT_BACK (Figma) */
.collection-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--anim-slow) var(--ease-out-back);
}

.collection-card__img--hover {
  opacity: 0;
}

.collection-card:hover .collection-card__img--hover {
  opacity: 1;
}

/* Gradient đáy 100px + tên bộ sưu tập (Cormorant 500 36/42 ls 1.08) */
.collection-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 160px;
  background: linear-gradient(to top, rgba(16, 16, 16, 0.55), transparent);
  pointer-events: none;
}

.collection-card__name {
  position: absolute;
  left: 36px;
  bottom: 29px;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: 0.03em;
  color: #fdfcf8;
}

/* Tên bộ sưu tập CHỈ hiện khi hover (theo yêu cầu khách): trượt lên + hiện dần.
   Gradient đáy cũng ẩn theo để card sạch khi chưa hover. Trên thiết bị chạm
   (không hover) giữ hiện sẵn để vẫn đọc được tên. */
@media (hover: hover) {
  .collection-card__name,
  .collection-card::after {
    opacity: 0;
    transition: opacity var(--anim-slow) var(--ease-out),
      transform var(--anim-slow) var(--ease-out);
  }
  .collection-card__name {
    transform: translateY(16px);
  }
  .collection-card:hover .collection-card__name,
  .collection-card:hover::after {
    opacity: 1;
  }
  .collection-card:hover .collection-card__name {
    transform: translateY(0);
  }
}

/* Track gap + gradient + tên card co giãn theo tỉ lệ Figma (dải desktop) */
@media (min-width: 1024px) {
  .collections__track {
    gap: calc(10 * var(--u));
  }
  .collection-card::after {
    height: calc(160 * var(--u));
  }
  .collection-card__name {
    left: calc(36 * var(--u));
    bottom: calc(29 * var(--u));
    font-size: calc(36 * var(--u));
    line-height: calc(42 * var(--u));
  }
}

/* ==================== Made with Care (Section 4) ==================== */
/* Figma: khối canh giữa, rộng 889px; text (gap16) → images (gap56); 2 ảnh 440×607. */
.care {
  position: relative;
}

/* Hoa trang trí — nằm SAU nội dung (z-index 0), lấp ló mép section.
   Toạ độ đúng Figma: trái x0–275 top -282; phải w411 mép phải top +339. */
.care__flower {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  height: calc(573 * var(--u));
  pointer-events: none;
}

.care__flower img {
  display: block;
  height: 100%;
  width: calc(498 * var(--u));
  max-width: none;
}

.care__flower--left {
  left: 0;
  top: calc(-282 * var(--u));
  width: calc(274 * var(--u));
}

.care__flower--left img {
  margin-left: calc(-224 * var(--u)); /* lộ phần phải bông hoa, phần trái tràn mép trái */
}

.care__flower--right {
  right: 0;
  top: calc(339 * var(--u));
  width: calc(411 * var(--u));
}

@media (max-width: 1023px) {
  .care__flower {
    display: none; /* dưới 1024px ẩn để tránh đè nội dung khi lề co lại */
  }
}

.care__inner {
  position: relative;
  z-index: 1; /* nội dung luôn trên hoa */
  max-width: 889px;
  margin-inline: auto;
  padding-inline: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 1024px) {
  .care__inner {
    max-width: calc(889 * var(--u));
    gap: calc(56 * var(--u));
    padding-inline: 0;
  }
  .care__head {
    gap: calc(16 * var(--u));
  }
  .care__head .section-subtext {
    max-width: calc(482 * var(--u));
  }
  .care__images {
    gap: calc(10 * var(--u));
  }
}

.care__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.care__head .section-subtext {
  max-width: 482px;
}

.care__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.care__images img {
  width: 100%;
  aspect-ratio: 440 / 607;
  object-fit: cover;
}

/* ==================== Our Story (Section 5) ==================== */
/* Figma: text 666px canh giữa (gap84) → sân khấu: ảnh giữa 540×688,
   hai cột marquee 263px hai mép cuộn dọc. */
.story__head {
  max-width: 666px;
  margin-inline: auto;
  padding-inline: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.story__subtext {
  max-width: 612px;
}

/* Pin container: cao thêm --story-scroll (JS đặt) để tạo quãng cuộn ghim */
.story__pin {
  margin-top: 40px;
  position: relative;
}

@media (min-width: 1024px) {
  .story__pin {
    margin-top: calc(84 * var(--u));
  }
  .story__head {
    max-width: calc(666 * var(--u));
    gap: calc(20 * var(--u));
  }
  .story__subtext {
    max-width: calc(612 * var(--u));
  }
}

/* Stage ghim dính đỉnh viewport suốt quãng cuộn của pin */
.story__stage {
  position: relative;
  height: 520px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .story__pin.is-pinning .story__stage {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}

/* Ảnh trung tâm 540×688, luôn ở giữa (không cuộn) */
.story__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, 62%);
  height: min(688px, 84%);
  z-index: 1;
}

.story__center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cột 263px hai mép; track dịch dọc theo tiến độ cuộn (JS điều khiển) */
.story__marquee {
  position: absolute;
  top: 0;
  width: 263px;
  max-width: 22%;
  height: 100%;
  overflow: hidden;
}

.story__marquee--left {
  left: 0;
}

.story__marquee--right {
  right: 0;
}

.story__track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  will-change: transform;
}

.story__track img {
  width: 100%;
  aspect-ratio: 263 / 320;
  object-fit: cover;
}

@media (max-width: 767px) {
  .story__marquee {
    display: none;
  }
  .story__center {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    margin-inline: auto;
  }
  .story__stage {
    height: auto;
  }
}

/* Sân khấu story co giãn theo tỉ lệ Figma NGAY TỪ 768px (đúng mốc bắt đầu ghim).
   Nếu để mốc 1024, khoảng 768–1023 ảnh giữa dùng cỡ dự phòng 62% + 2 cột 22% =
   106% → ảnh giữa ĐÈ lên 2 cột. Dùng tỉ lệ --u (ảnh giữa ~37.5%, cột ~18%) để
   không bao giờ chồng lấn. */
@media (min-width: 768px) {
  .story__center {
    width: min(calc(540 * var(--u)), 62%);
    height: min(calc(688 * var(--u)), 84%);
  }
  .story__marquee {
    width: calc(263 * var(--u));
  }
  .story__track {
    gap: calc(20 * var(--u));
  }
}

/* ==================== Our Brides (Section 6) ==================== */
/* Figma: heading (gap84) → card 1440×872: BG ảnh, ảnh cô dâu 714 (trái),
   nội dung phải (name/quote/sketch/VIEW STORY), counter dọc mép phải. */
/* --u khai báo ở :root (base.css). */
.brides-section .section-heading {
  margin-bottom: 40px;
}

@media (min-width: 1024px) {
  .brides-section .section-heading {
    margin-bottom: calc(84 * var(--u));
  }
}

.brides {
  position: relative;
}

.brides__stack {
  position: relative;
}

/* Mobile: card xếp thường, chỉ hiện card đang chọn */
.brides__card {
  position: relative;
}

.brides__card:not(.is-active) {
  display: none;
}

/* Desktop: 4 panel xếp chồng tuyệt đối, cắt ngoài khung để panel trượt vào/ra */
@media (min-width: 768px) {
  .brides {
    overflow: hidden;
    height: 100vh; /* cao bằng chiều cao màn hình client (như collections) */
  }
  .brides__stack {
    height: 100%;
  }
  .brides__card {
    position: absolute;
    inset: 0;
    display: block; /* luôn hiện diện để trượt; JS ẩn bằng visibility */
    transition: transform 0.5s var(--ease-in);
    will-change: transform;
  }
  .brides__card:not(.is-active) {
    display: block;
  }
}

/* Nền panel (ảnh maroon/texture) — mỗi panel tự phủ kín khi trượt */
.brides__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.brides__container {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5) var(--space-2);
}

@media (min-width: 768px) {
  .brides__container {
    grid-template-columns: 1fr 1fr; /* full-bleed: ảnh trái lấp đầy tới mép */
    gap: 0;
    padding: 0;
    height: 100vh; /* cao bằng chiều cao màn hình client (như collections) */
    max-width: none;
    margin-inline: 0;
  }
}

.brides__photos {
  position: relative;
  aspect-ratio: 714 / 872;
}

@media (min-width: 768px) {
  .brides__photos {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* Ảnh xếp chồng, crossfade khi tự đổi (Figma SMART_ANIMATE ~0.8s) */
.brides__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--ease-standard);
}

.brides__photo.is-active {
  opacity: 1;
}

.brides__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .brides__content {
    width: calc(369 * var(--u));
    margin-inline: auto; /* khối căn giữa trong nửa phải, nhưng text canh trái */
    align-items: flex-start;
    gap: calc(16 * var(--u));
  }
}

.brides__text {
  text-align: center;
}

.brides__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0.02em;
  text-align: left;
}

.brides__name em {
  font-style: italic;
  font-weight: 400;
}

.brides__quote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.02em;
  text-align: center;
  margin-top: 4px;
}

.brides__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .brides__actions {
    align-items: flex-start;
  }
}

/* Canh trái toàn bộ text bên phải (desktop) */
@media (min-width: 768px) {
  .brides__text,
  .brides__quote {
    text-align: left;
  }
  .brides__actions {
    align-items: flex-start;
  }
}

/* Phác thảo ĐÃ có khung (ảnh export gồm cả mount từ Figma).
   Đặt sẵn aspect-ratio để RESERVE chiều cao → content căn giữa đúng ngay cả khi
   ảnh chưa tải (không còn nhảy layout / lệch xuống). */
.brides__sketch {
  width: 238px;
  max-width: 100%;
  aspect-ratio: 568 / 776;
  margin: 0;
}

.brides__sketch img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* VIEW STORY — link gạch chân + mũi tên nhún lò xo (Figma CUSTOM_SPRING) */
.link-arrow {
  position: relative;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
}

/* Gạch chân ngắn → dài ra full khi hover (Figma: Line 2 6px→full, CUSTOM_SPRING) */
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text);
  transform: scaleX(0.14);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-spring);
}

.link-arrow:hover::after {
  transform: scaleX(1);
}

/* Mũi tên: hover thì chạy sang phải & mất, một mũi tên khác vào lại từ trái */
.link-arrow__icon {
  position: relative;
  display: inline-block;
  width: 1.4em;
  height: 1em;
  margin-left: 2px;
  overflow: hidden;
  vertical-align: -0.12em;
}

.link-arrow__a {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  transition: transform 0.5s var(--ease-out);
}

.link-arrow__a:nth-child(2) {
  transform: translateX(-180%);
}

.link-arrow:hover .link-arrow__a:nth-child(1) {
  transform: translateX(180%);
}

.link-arrow:hover .link-arrow__a:nth-child(2) {
  transform: translateX(0);
}

/* Counter dọc mép phải: ↑ / 01–04 / ↓ */
.brides__counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .brides__counter {
    position: absolute;
    top: 68%; /* dời xuống 1/3 dưới thay vì giữa */
    right: 50px;
    transform: translateY(-50%);
    margin-top: 0;
    z-index: 5; /* luôn trên các panel đang trượt */
  }
}

.brides__nav {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--color-text);
  transition: transform var(--duration-fast) var(--ease-out);
}

/* Mũi tên ↑/↓ nét bo tròn (SVG stroke-linecap/linejoin round) — không khung */
.brides__nav svg {
  width: 24px;
  height: 24px;
  display: block;
}

.brides__nav:hover {
  transform: scale(1.2);
}

/* Ẩn hẳn mũi tên ở biên (JS set [hidden]); cần rule này vì display:grid ở trên
   thắng rule mặc định [hidden]{display:none} của trình duyệt. */
.brides__nav[hidden] {
  display: none;
}

.brides__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0.02em;
}

.brides__count b {
  font-weight: 700;
}

.brides__count i {
  width: 1px;
  height: 18px;
  background: var(--color-text);
}

.brides__count span {
  font-weight: 400;
}

/* Các item trong brides co giãn theo tỉ lệ Figma trong dải desktop (≥768).
   Đặt SAU base để thắng cascade. Scale liên tục nên không bị nhảy bậc ở 1024. */
@media (min-width: 768px) {
  .brides__name {
    font-size: calc(20 * var(--u));
    line-height: calc(32 * var(--u));
  }
  .brides__quote {
    font-size: calc(16 * var(--u));
    line-height: calc(26 * var(--u));
    margin-top: calc(4 * var(--u));
  }
  .brides__actions {
    gap: calc(32 * var(--u));
    margin-top: calc(16 * var(--u));
  }
  .brides__sketch {
    width: calc(238 * var(--u));
  }
  .brides__actions .link-arrow {
    font-size: calc(14 * var(--u));
  }
  .brides__counter {
    right: calc(50 * var(--u));
    gap: calc(12 * var(--u));
  }
  .brides__nav,
  .brides__nav svg {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }
  .brides__count {
    font-size: calc(20 * var(--u));
    line-height: calc(32 * var(--u));
    gap: calc(9 * var(--u));
  }
  .brides__count i {
    height: calc(18 * var(--u));
  }
}

/* ==================== CTA ==================== */
.cta {
  text-align: center;
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-inline: var(--space-2);
}

@media (min-width: 1024px) {
  .cta__inner {
    gap: calc(84 * var(--u));
  }
}

/* Tiêu đề CTA — Cormorant 400 in nghiêng, 40px/48, ls 0.80 (~0.02em) */
.cta__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .cta__title {
    font-size: calc(40 * var(--u));
    line-height: calc(48 * var(--u));
    /* hộp rộng đúng bằng dòng dài nhất → mỗi dòng (tách bởi <br>) nằm trọn 1 hàng
       = đúng 2 dòng như Figma, không rớt chữ xuống dòng 3 */
    width: max-content;
    max-width: 100%;
  }
}

/* Primary button: khung VUÔNG (góc vuông, theo yêu cầu), mũi tên hai bên + chữ
   Manrope 20/32. Hover: nền tối quét vào, chữ + mũi tên đổi màu (600ms). */
.primary-btn {
  position: relative;
  isolation: isolate; /* để mix-blend chỉ tính trong nút */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Viền vẽ bằng inset box-shadow thay cho border: Mac/WebGL retina hay clip mất 1px
     border khi overflow:hidden — box-shadow không bị clip, luôn đủ 4 cạnh.
     padding bù thêm 1px (15/25 thay 14/24) để hình học giữ nguyên như khi có border. */
  padding: 15px 25px;
  box-shadow: inset 0 0 0 1px var(--color-text);
  border-radius: 0; /* góc vuông, không bo */
  overflow: hidden;
  background: var(--color-bg);
}

/* Dải đen quét vào rồi rút ra LẶP theo chu kỳ khi hover (không đứng yên tô đen) */
.primary-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-text);
  transform: scaleX(0);
  transform-origin: left center;
}

.primary-btn:hover::before {
  animation: cta-cycle 1.6s linear;
}

@keyframes cta-cycle {
  0% { transform: scaleX(0); transform-origin: left center; }
  45% { transform: scaleX(1); transform-origin: left center; }
  50% { transform: scaleX(1); transform-origin: right center; }
  95% { transform: scaleX(0); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

/* Chữ + mũi tên nổi trên nền quét, mix-blend để LUÔN đọc được (đen↔trắng) */
.primary-btn__label,
.primary-btn__arrow {
  position: relative;
  z-index: 1;
  color: #fdfcf8;
  mix-blend-mode: difference;
}

.primary-btn__label {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 0.02em;
}

@media (min-width: 1024px) {
  .primary-btn {
    gap: calc(12 * var(--u));
    padding: calc(15 * var(--u)) calc(25 * var(--u));
  }
  .primary-btn__label {
    font-size: calc(20 * var(--u));
  }
}

.primary-btn__arrow {
  font-size: 18px;
  line-height: 1;
}

@media (min-width: 1024px) {
  .primary-btn__arrow {
    font-size: calc(18 * var(--u));
  }
}

/* ==================== Footer (khớp component Figma) ==================== */
.site-footer {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--space-5) var(--space-2) var(--space-3);
}

.footer__inner {
  /* Full-bleed: luôn đầy bề ngang màn hình; canh giữa & tỉ lệ nhờ lề ngang % */
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .site-footer {
    /* dọc scale theo màn (uncapped); ngang 3.5% (~50px @1440) tự canh giữa & tỉ lệ */
    padding: calc(64 * var(--uf)) 3.5% calc(24 * var(--uf));
  }
}

/* Toàn bộ text footer: Manrope 14px/26, letter-spacing ~0.02em */
.footer__top,
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 0.02em;
}

/* Mobile: xếp dọc để không tràn ngang khi hẹp */
@media (max-width: 640px) {
  .footer__top {
    flex-direction: column;
    gap: var(--space-3);
  }
}

.footer__contact {
  font-style: normal; /* <address> mặc định italic */
}

.footer__contact p + p {
  margin-top: 8px;
}

.footer__contact a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__links {
  display: flex;
  gap: var(--space-3);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-transform: uppercase;
}

.footer__col a {
  transition: text-shadow var(--duration-fast) var(--ease-out);
}

/* Đậm lên khi hover bằng text-shadow thay vì font-weight:600 — font-weight làm
   chữ rộng thêm ~1.3px gây reflow/"giật". text-shadow không đổi layout nên mượt. */
.footer__col a:hover {
  text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

/* Wordmark SOLEIL = SVG vector từ Figma (fill #101010), gần full-width */
.footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  margin-block: var(--space-3);
}

.footer__bottom {
  text-transform: uppercase;
  color: var(--color-text);
}

/* Footer full-bleed: scale theo màn hình (uncapped --uf) để luôn full-size mọi bề rộng */
@media (min-width: 1024px) {
  .footer__top,
  .footer__bottom {
    gap: calc(40 * var(--uf));
    font-size: calc(14 * var(--uf));
    line-height: calc(26 * var(--uf));
  }
  .footer__contact p + p {
    margin-top: calc(8 * var(--uf));
  }
  .footer__links {
    gap: calc(24 * var(--uf));
  }
  .footer__col {
    gap: calc(8 * var(--uf));
  }
  .footer__wordmark {
    margin-block: calc(24 * var(--uf));
  }
}

/* ==================== Trang Collections ==================== */
/* Header đè lên hero nền KEM (không phải hero tối như trang chủ) → icon/logo/lang
   dùng màu chữ tối, logo SOLEIL hiện (Figma opacity 1). */
.page-collections .nav-toggle span {
  background: var(--color-text);
}

.page-collections .site-logo {
  opacity: 1;
  color: var(--color-text);
  pointer-events: auto;
}

.page-collections .lang-switch {
  color: var(--color-text);
}

/* Hero: Figma 1440×758 — trái là chữ trên nền kem, phải là ảnh 829px full-height.
   Mobile: ảnh trên, chữ dưới. */
.coll-hero {
  position: relative;
  background: var(--color-bg);
  padding-top: 90px; /* chừa header absolute */
}

.coll-hero__media {
  width: 100%;
  aspect-ratio: 4 / 5;
}

.coll-hero__media img,
.coll-hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coll-hero__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px var(--space-2) 8px;
}

.coll-hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.coll-hero__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .coll-hero {
    min-height: 100svh; /* full chiều cao màn hình giống hero homepage */
    padding-top: 0;
  }
  .coll-hero__media {
    position: absolute;
    top: 0;
    bottom: 0; /* trải hết chiều cao hero (an toàn với min-height) */
    right: 0;
    width: 57.57%; /* 829/1440 */
    aspect-ratio: auto;
  }
  .coll-hero__text {
    position: absolute;
    left: calc(50 * var(--u));
    bottom: calc(90 * var(--u)); /* Figma: text box cách đáy hero 90px */
    width: calc(450 * var(--u));
    max-width: 40%;
    padding: 0;
    gap: calc(26 * var(--u)); /* Figma itemSpacing title→tagline */
  }
  .coll-hero__title {
    font-size: calc(64 * var(--u));
    line-height: calc(77.5 * var(--u));
  }
}

/* Lưới váy: max 1440, lề 50px, 4 cột (gap ngang 10, gap dọc 56 — Figma).
   Card 328×500, hàng cuối 2 card tự canh trái. */
.dress-grid-section {
  margin-top: 72px;
}

@media (min-width: 1024px) {
  .dress-grid-section {
    margin-top: 116px;
  }
}

.dress-grid {
  max-width: var(--frame-w);
  margin-inline: auto;
  padding-inline: var(--space-2);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 40px;
}

/* Bỏ cap 1440 và dùng ĐÚNG padding của .site-header (50*u desktop / 16px mobile)
   → mép lưới thẳng hàng hamburger bên trái và VNI/ENG bên phải ở mọi bề rộng. */
@media (min-width: 1024px) {
  .dress-grid {
    max-width: none;
    grid-template-columns: repeat(4, 1fr);
    column-gap: calc(10 * var(--u));
    row-gap: calc(56 * var(--u));
    padding-inline: calc(50 * var(--u));
  }
}

.dress-card {
  position: relative;
  aspect-ratio: 328 / 500;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.dress-card__slides {
  position: absolute;
  inset: 0;
}

/* Lớp link phủ ảnh → Dress Detail (z-index 1: trên ảnh, DƯỚI thanh nút ←/→ z-index 2
   nên bấm mũi tên vẫn lật ảnh, bấm vào ảnh thì sang trang chi tiết váy) */
.dress-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Ảnh xếp chồng (gradient đáy đã baked sẵn trong ảnh export từ Figma → chữ/mũi tên
   kem đọc được). Chuyển ảnh = Figma SMART_ANIMATE 500ms EASE_OUT: ảnh MỚI mờ dần
   ĐÈ LÊN ảnh cũ (z-index), ảnh cũ giữ nguyên opacity 1 rồi mới tắt hẳn — nếu cho cả
   hai fade cùng lúc thì giữa chừng tổng opacity < 1, lộ nền card → chớp. */
.dress-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0s 0.5s; /* ảnh cũ: đợi ảnh mới phủ xong rồi tắt, không fade */
}

.dress-card__img.is-active {
  opacity: 1;
  z-index: 1;
  transition: opacity 0.5s var(--ease-out);
}

/* Slide bar đáy: ← tên → (Figma: y455, arrow x24/x280, tên giữa) */
.dress-card__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13px; /* 500 - 455 - 32 */
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 2;
}

.dress-card__arrow {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--color-bg);
  transition: transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

/* Mũi tên nét bo tròn (stroke-linecap/linejoin round trong SVG) — không khung */
.dress-card__arrow svg {
  width: 24px;
  height: 24px;
  display: block;
}

.dress-card__arrow:hover {
  transform: scale(1.15);
}

/* Hết dải ảnh thì ẩn hẳn mũi tên (visibility chứ không display:none — giữ chỗ để
   tên váy vẫn nằm chính giữa thanh). */
.dress-card__arrow:disabled {
  visibility: hidden;
}

/* Tên + mũi tên CHỈ hiện khi hover card (theo yêu cầu khách). Thiết bị chạm
   (không có hover) giữ hiện sẵn để vẫn đọc tên & lật ảnh được. */
@media (hover: hover) {
  .dress-card__arrow,
  .dress-card__name {
    opacity: 0;
  }
  .dress-card:hover .dress-card__arrow,
  .dress-card:hover .dress-card__name {
    opacity: 1;
  }
}

.dress-card__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0.02em;
  color: var(--color-bg);
  text-align: center;
  text-shadow: 0 1px 8px rgba(16, 16, 16, 0.35);
  transition: opacity var(--duration-base) var(--ease-out);
}

/* Thanh điều khiển dress-card co giãn theo tỉ lệ Figma ở dải desktop */
@media (min-width: 1024px) {
  .dress-card__bar {
    bottom: calc(13 * var(--u));
    height: calc(32 * var(--u));
    padding: 0 calc(24 * var(--u));
  }
  .dress-card__arrow,
  .dress-card__arrow svg {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }
  .dress-card__name {
    font-size: calc(20 * var(--u));
    line-height: calc(32 * var(--u));
  }
}

/* ==================== Trang Brides Story (about.html) ==================== */
/* Trang tạm dựng theo phong cách site (chờ thiết kế/nội dung thật của khách). */
.stories {
  padding-top: 90px; /* chừa header absolute */
}

@media (min-width: 1024px) {
  .stories {
    padding-top: calc(90 * var(--u));
  }
}

.stories__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}

.stories__intro .section-heading {
  font-size: 40px;
}

@media (min-width: 1024px) {
  .stories__intro .section-heading {
    font-size: calc(56 * var(--u));
  }
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 16px;
  margin-top: 56px;
}

@media (min-width: 900px) {
  .stories-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .stories-grid {
    gap: calc(56 * var(--u)) calc(24 * var(--u));
    margin-top: calc(72 * var(--u));
  }
}

.story-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.story-card__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.story-card__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: italic;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.story-card__quote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

/* ==================== Trang nội dung nền KEM (header tối) ==================== */
/* Header đè lên nền sáng → icon/logo/lang màu tối, logo SOLEIL hiện (như collections). */
.page-interior .nav-toggle span {
  background: var(--color-text);
}

.page-interior .site-logo {
  opacity: 1;
  color: var(--color-text);
  pointer-events: auto;
}

.page-interior .lang-switch {
  color: var(--color-text);
}

/* ===== Freeze header: cố định trên cùng, nền trong suốt ===== */
/* 4 trang nội bộ + các trang collections + homepage: header "trôi" cố định khi
   cuộn — nội dung chạy bên dưới, chỉ còn hamburger / SOLEIL / VNI-ENG.
   Homepage: icon kem sẽ chìm trên các section sáng → rời hero thì JS bật
   `.is-stuck` (nền kính mờ + icon tối, giống state hover). */
.page-home .site-header,
.page-interior .site-header,
.page-collections .site-header {
  position: fixed;
}

/* Bride Story: section full che luôn header → header trong suốt, nổi trên ảnh
   (hover/is-stuck vẫn cho nền kính mờ khi cần đọc rõ). */

/* Dress Detail (layout mới): ảnh lớn tối bên TRÁI, nội dung trên nền kem bên PHẢI.
   Logo + VNI/ENG nằm bên phải (nền kem) → tối. Hamburger nằm bên trái (trên ảnh
   tối) → để màu kem cho đọc được.
   PHẢI giới hạn trong .site-header: nếu không, rule này (đặt sau) cũng đè
   .nav-toggle--dark của hamburger TRONG menu trượt → kem trên nền kem = mất nút. */
.page-dress .site-header .nav-toggle span {
  background: var(--color-bg);
}

/* ==================== Bride Story — lưới thẻ cô dâu (Figma 1483:3436) ==================== */
/* Figma: list 1340 (lề 50), card 440×750, gap ngang 10, gap dọc 20, tên phủ đáy ảnh. */
/* Full section: lưới chạy từ sát mép trên, ảnh CHUI DƯỚI header (che luôn header) */
.bs-section {
  padding-bottom: 40px;
}

/* Full-bleed: 3 cột gần full màn (KHÔNG chặn 1440) để ảnh lớn như Figma */
.bs-grid {
  padding-inline: var(--space-2);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 12px;
}

@media (min-width: 1024px) {
  .bs-section {
    padding-bottom: calc(40 * var(--uf));
  }
  .bs-grid {
    grid-template-columns: repeat(3, 1fr);
    /* --uf (không chặn 1440): full-bleed nên gap/lề phóng theo màn ở mọi cỡ */
    column-gap: calc(10 * var(--uf));
    row-gap: calc(20 * var(--uf));
    /* lề 2 bên = đúng lề header (hamburger / VNI-ENG) — chặn trần 50px như header */
    padding-inline: calc(50 * var(--u));
  }
}

.bs-card {
  position: relative;
  display: block;
  aspect-ratio: 440 / 750;
  overflow: hidden;
  background: var(--color-bg-alt);
}

/* Copy hiệu ứng hover từ collection-card: gradient tối ở đáy hiện dần khi hover */
.bs-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 160px;
  background: linear-gradient(to top, rgba(16, 16, 16, 0.55), transparent);
  pointer-events: none;
  z-index: 1;
}
@media (hover: hover) {
  .bs-card::after {
    opacity: 0;
    transition: opacity var(--anim-slow) var(--ease-out);
  }
  .bs-card:hover::after {
    opacity: 1;
  }
}
@media (min-width: 1024px) {
  .bs-card::after {
    height: calc(160 * var(--uf));
  }
}

/* KHÔNG phóng ảnh khi hover — ảnh giữ nguyên */
.bs-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tên: canh trái ~30% (133/440), nghỉ cách đáy 6%. KHÔNG mask riêng — dùng chính
   .bs-card (overflow:hidden) cắt ở ĐÁY ẢNH, nên chữ trượt lên đúng từ mép đáy ảnh. */
.bs-card__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  z-index: 2;
  text-align: center; /* canh giữa ngang */
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.21;
  letter-spacing: 0.02em;
  color: #fdfcf8;
  text-shadow: 0 2px 6px rgba(16, 16, 16, 0.55);
}

.bs-card__name-i {
  display: block;
  transform: translateY(0); /* thiết bị chạm (không hover): hiện sẵn */
}

/* Thiết bị có hover: chữ ẩn hẳn XUỐNG DƯỚI đáy ảnh (bị .bs-card cắt);
   hover → trượt lên, xuất hiện từ mép đáy ảnh (không mờ dần). */
@media (hover: hover) {
  .bs-card__name-i {
    transform: translateY(250%);
    transition: transform var(--anim-slow) var(--ease-out);
  }
  .bs-card:hover .bs-card__name-i {
    transform: translateY(0);
  }
}

@media (min-width: 1024px) {
  .bs-card__name {
    font-size: calc(36 * var(--uf)); /* phóng theo màn (đồng bộ với ảnh full-bleed) */
  }
}

/* ==================== Our Brides — heading lớn + lưới ảnh (Figma 1416:3504) ==================== */
/* Figma: title "OUR BRIDES" Cormorant 128/155; lưới 4 cột, card 328×460, gap 10/112. */
.ob-section {
  /* Thời gian "mở mắt" của chữ. Figma là 0.4s nhưng KH thấy nhanh quá → kéo dài.
     Chỉnh 1 số này thôi, các mốc sau (lưới trồi, chữ chuyển xám) tự dời theo. */
  --ob-reveal: 1.2s;
  padding-top: 130px;
  padding-bottom: 56px;
}

.ob-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.21;
  letter-spacing: 0.02em;
  text-align: center;
  color: #000;
  margin-bottom: 48px;
}

/* Animation MỞ TRANG (Figma prototype: AFTER_TIMEOUT 0.4s → SMART_ANIMATE 0.4s):
   chữ "OUR BRIDE" khổng lồ wipe mở từ dải mảnh (cao ~3px) ra full rồi nhích lên.
   Tự chạy khi tải trang, không phụ thuộc scroll. Delay 0.4s đúng timeout Figma. */
/* Chuỗi mở trang (3 state Figma, mỗi bước AFTER_TIMEOUT 0.4s + SMART_ANIMATE):
   1→2: chữ "OUR BRIDE" reveal ; 2→3: lưới ảnh chạy từ DƯỚI LÊN vào khung.
   Bước 2 (grid) chờ bước 1 (chữ) xong: delay = 0.4 (timeout) + reveal + 0.4. */
@media (prefers-reduced-motion: no-preference) {
  .ob-title {
    animation: ob-title-reveal var(--ob-reveal) 0.4s cubic-bezier(0.33, 0, 0.2, 1) both;
  }
  .ob-grid {
    animation: ob-grid-rise 0.7s calc(0.8s + var(--ob-reveal)) cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/* Mở mắt: chữ lộ ra từ 1 khe ngang mảnh giữa (Figma: Text wrap cao 3px → 157px)
   nở đều lên/xuống. Chỉ clip (không translate) để không phá position:sticky. */
@keyframes ob-title-reveal {
  from {
    clip-path: inset(calc(50% - 1.5px) 0); /* Figma state 1: khe cao đúng 3px */
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Figma state 3: chữ tụt còn opacity 0.10 khi lưới đã lên chỗ. KH xin ~20% →
   xám nhạt = đen 20%. Chạy nối ngay sau ob-grid-rise (0.9 + 0.7 = 1.6s). */
@keyframes ob-title-dim {
  to {
    color: rgba(0, 0, 0, 0.2);
  }
}

/* Lưới ảnh chạy TỪ DƯỚI LÊN (Figma: Bride List relY 856 → 90). Khoảng cách trồi
   lấy từ biến --ob-rise: mobile ~140px; desktop = cả màn hình (đè lên chữ). */
@keyframes ob-grid-rise {
  from {
    opacity: 0;
    transform: translateY(var(--ob-rise, 140px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ob-grid {
  --ob-rise: 140px;
  padding-inline: var(--space-2); /* = padding header mobile → thẳng mép hamburger */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 40px;
}

.ob-item {
  display: block;
  aspect-ratio: 328 / 460;
  overflow: hidden;
  /* Scroll vô cực nhân bản item liên tục → hàng trăm ảnh trong DOM. content-visibility
     cho trình duyệt BỎ QUA layout/paint/decode của ô nằm ngoài màn hình (ô vẫn giữ
     chỗ đúng nhờ aspect-ratio) → cuộn mượt, đỡ tốn RAM ảnh đã decode. */
  content-visibility: auto;
  background: var(--color-bg-alt);
  /* item là <button> (mở overlay xem ảnh, không dẫn đi đâu) → reset style mặc định */
  border: 0;
  padding: 0;
  cursor: pointer;
}

.ob-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--anim-slow) var(--ease-out-back);
}

/* Ảnh NGANG (admin đánh dấu "Ngang" — image.is_landscape): vẫn chiếm 1 ô 328×460
   để lưới thẳng hàng, nhưng ảnh bên trong CỐ ĐỊNH 3:2 và căn giữa → khoảng trống
   trên/dưới luôn bằng nhau, (460 − 328/1.5)/2 ≈ 120px. Ô để trống, không tô nền. */
.ob-item--land {
  display: grid;
  place-items: center;
  background: none;
}

.ob-item--land img {
  height: auto;
  aspect-ratio: 3 / 2;
}

.ob-item:hover img {
  transform: scale(1.04);
}

@media (min-width: 1024px) {
  /* Section chứa 2 lớp chồng: chữ (nền) + lưới (trên). overflow hidden để cắt
     lưới lúc còn nằm dưới màn hình (translateY cả viewport). */
  .ob-section {
    position: relative;
    padding-top: 0;
    padding-bottom: calc(120 * var(--uf));
    min-height: 100svh;
  }
  /* Chữ "OUR BRIDE" = LỚP NỀN FREEZE: position sticky → dính đỉnh, đứng yên làm
     nền trong khi lưới cuộn đè lên; tự nhả ở cuối section (không đè lên footer). */
  .ob-title {
    position: sticky;
    top: 0;
    height: 100svh;
    margin: 0;
    display: grid;
    place-items: center;
    z-index: 0;
    font-size: calc(128 * var(--uf));
  }
  /* Lưới = LỚP TRÊN (z-index 1), kéo lên đè qua chữ nền bằng margin âm 1 màn hình */
  /* Lưới = LỚP TRÊN (z-index 1), kéo lên đè qua chữ nền bằng margin âm 1 màn hình.
     Full-bleed: padding trái/phải = 50*--u ĐÚNG BẰNG .site-header → mép lưới thẳng
     hàng với hamburger và VNI/ENG (feedback KH). Không max-width/margin auto nữa. */
  .ob-grid {
    --ob-rise: 100svh; /* Figma state 2→3: Bride List relY 856 → 90 ≈ cả màn hình */
    position: relative;
    z-index: 1;
    margin-top: -100svh; /* đè lên lớp chữ sticky (chữ làm nền phía sau) */
    grid-template-columns: repeat(4, 1fr);
    padding-top: calc(90 * var(--uf)); /* mép trên lưới ~y=90 như Figma state 3 */
    padding-inline: calc(50 * var(--u));
    column-gap: calc(10 * var(--u));
    row-gap: calc(112 * var(--uf)); /* Figma Bride List gridRowGap = 112 */
    will-change: transform;
  }
}

/* Desktop: chữ REVEAL "mở mắt" (0.4s@0.4s) rồi TỰ chuyển xám nhạt 20% ngay khi
   lưới lên xong (Figma state 3 = opacity 0.10). Bỏ hẳn kiểu xám-theo-scroll cũ. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .ob-title {
    animation: ob-title-reveal var(--ob-reveal) 0.4s cubic-bezier(0.33, 0, 0.2, 1) both,
      ob-title-dim 0.5s calc(1.5s + var(--ob-reveal)) linear both; /* = sau khi lưới lên xong */
  }
}

/* Click item → mở overlay xem ảnh, nền = chính ảnh đó (blur). Figma: OVERLAY
   MOVE_IN 0.3s. Nút ‹ › chuyển item (feedback "button chuyển item"). */
.ob-focus {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  /* Nền ĐỤC hẳn: trước đây bán trong nên header kính mờ ló qua mép = vệt trắng
     ngang giống navbar (feedback KH). */
  background: #101010;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out);
}
.ob-focus[hidden] {
  display: none;
}
.ob-focus.is-open {
  transform: translateY(0);
}
/* inset âm (không phải scale) để mép blur nằm NGOÀI màn hình — blur fade dần về
   trong suốt ở biên element, scale 1.12 không đủ bù → lộ trang phía sau.
   opacity .78 thay cho brightness: nền sáng hơn, bớt đen (feedback KH). */
.ob-focus__bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.78;
  filter: blur(16px);
}
.ob-focus__img {
  position: relative;
  z-index: 1;
  max-width: min(94vw, 1180px); /* rộng đủ cho ảnh NGANG; ảnh dọc vẫn bị max-height chặn */
  max-height: 90vh;
  width: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ob-focus__nav,
.ob-focus__close {
  position: absolute;
  z-index: 2;
  color: #fdfcf8;
  line-height: 1;
  opacity: 0.75;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.ob-focus__nav:hover,
.ob-focus__close:hover {
  opacity: 1;
}
.ob-focus__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 44px;
  padding: 20px;
}
.ob-focus__nav--prev { left: 1%; }
.ob-focus__nav--next { right: 1%; }
.ob-focus__nav[hidden] { display: none; }
.ob-focus__close {
  top: 24px;
  right: 32px;
  font-size: 34px;
}
/* ==================== Dress Detail (Figma 1575:3019 — layout mới) ==================== */
/* Trái (Left Container 603×780, overflow=VERTICAL_SCROLLING): dải ảnh của MẪU ĐANG XEM,
   mỗi ảnh cao đúng 1 màn, cuộn DỌC trong khung.
   Phải (Right Container 665×780): label + title italic + 2 đoạn + "Next dress",
   rồi "Dress list" = ảnh các mẫu KHÁC trong bộ, cuộn NGANG (có mũi tên ‹ ›).
   Hoa trang trí góc trên-phải, tràn mép phải. Header: hamburger kem, logo/lang tối. */
.dd-section {
  --dd-push: 15svh; /* đẩy panel phải xuống thêm so với Figma (feedback KH) */
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* cắt phần hoa tràn mép phải */
}

/* Cột ảnh bên trái */
.dd-hero {
  margin: 0;
}

.dd-hero__item {
  margin: 0;
  aspect-ratio: 603 / 780;
  overflow: hidden;
}

.dd-hero__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Panel phải */
.dd-panel {
  position: relative;
  padding: 40px var(--space-2);
}

.dd-panel__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dd-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 450px;
}

.dd-info__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dd-info__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Label nhỏ "The Painted Vow" — Cormorant 500 14/26 */
.dd-eyebrow {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* Title "Penelope dress" — Cormorant 500 ITALIC 32/38.75 */
.dd-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: italic;
  font-size: 32px;
  line-height: 1.21;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.dd-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dd-content p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* "Next dress" — Manrope 600 */
.dd-next {
  align-self: flex-start;
  margin-top: 8px;
  font-weight: 600;
}

/* Dải váy khác trong bộ (215×300), cuộn ngang: kéo chuột / lăn chuột / mũi tên */
.dd-thumbs-wrap {
  position: relative;
  min-width: 0;
}

.dd-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}

.dd-thumbs.is-dragging {
  cursor: grabbing;
}

.dd-thumbs::-webkit-scrollbar {
  display: none;
}

.dd-thumb {
  margin: 0;
  flex: 0 0 auto;
  display: block;
  width: 150px;
  aspect-ratio: 215 / 300;
  overflow: hidden;
}

.dd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Mũi tên điều hướng dải váy (ẩn khi hết đường cuộn) */
.dd-thumbs__nav,
.filmstrip__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-text);
  background: rgba(253, 252, 248, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity var(--duration-fast) var(--ease-out);
}

.dd-thumbs__nav--prev,
.filmstrip__nav--prev {
  left: 8px;
}

.dd-thumbs__nav--next,
.filmstrip__nav--next {
  right: 8px;
}

.dd-thumbs__nav:hover,
.filmstrip__nav:hover {
  opacity: 0.7;
}

.dd-thumbs__nav:disabled,
.filmstrip__nav:disabled {
  opacity: 0;
  pointer-events: none;
}

/* Hoa trang trí (chỉ desktop) */
.dd-flower {
  display: none;
}

@media (min-width: 1024px) {
  /* Section = ĐÚNG 1 màn hình; mọi thứ cuộn bên trong (Figma frame 1440×780) */
  .dd-section {
    flex-direction: row;
    align-items: stretch;
    height: 100svh;
  }

  /* Cột trái 603px cao full màn, cuộn dọc qua từng ảnh (mỗi ảnh = 1 màn) */
  .dd-hero {
    flex: 0 0 auto;
    width: calc(603 * var(--uf));
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    /* KHÔNG dùng scroll-snap: nó chặn cả `hero.scrollTop = …` của JS, làm mất
       tính năng lăn chuột ở panel phải (initDressWheel) — đã đo, snap kéo về 0. */
  }
  .dd-hero::-webkit-scrollbar {
    display: none;
  }
  .dd-hero__item {
    height: 100%;
    aspect-ratio: auto;
  }

  /* Panel phải: Figma top=130 (header 90 + 40), cộng thêm --dd-push theo feedback KH */
  .dd-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding-left: calc(122 * var(--uf));
    padding-right: calc(50 * var(--uf));
    padding-top: calc(130 * var(--uf) + var(--dd-push));
    padding-bottom: calc(61 * var(--uf));
  }
  .dd-panel__inner {
    width: calc(665 * var(--uf));
    max-width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    gap: calc(37 * var(--uf)); /* nút "Next dress" → dải váy = 37px (Figma 1575:3019) */
  }
  .dd-info {
    flex: 0 0 auto;
    gap: calc(12 * var(--uf));
    max-width: calc(450 * var(--uf));
  }
  .dd-info__content {
    gap: calc(8 * var(--uf));
  }
  .dd-info__title {
    gap: calc(4 * var(--uf));
  }
  .dd-eyebrow {
    font-size: calc(14 * var(--uf));
    line-height: calc(26 * var(--uf));
  }
  .dd-title {
    font-size: calc(32 * var(--uf));
  }
  .dd-content {
    gap: calc(4 * var(--uf));
  }
  .dd-content p {
    font-size: calc(14 * var(--uf));
    line-height: calc(26 * var(--uf));
  }
  .dd-next {
    margin-top: calc(8 * var(--uf));
  }
  /* Dải váy LUÔN đúng size Figma 215×300, KHÔNG co theo độ dài đoạn text
     (feedback KH). Hết chỗ thì khối chữ .dd-info thu nhỏ lại — initDressInfoFit
     trong main.js đặt `zoom` cho vừa. */
  .dd-thumbs-wrap {
    flex: 0 0 auto;
    height: calc(300 * var(--uf));
  }
  .dd-thumbs {
    height: 100%;
    gap: calc(10 * var(--uf));
  }
  .dd-thumb {
    height: 100%;
    width: auto;
  }
  .dd-thumbs__nav,
  .filmstrip__nav {
    width: calc(36 * var(--uf));
    height: calc(36 * var(--uf));
  }
  .dd-flower {
    display: block;
    position: absolute;
    top: calc(117 * var(--uf));
    right: calc(-40 * var(--uf));
    width: calc(283 * var(--uf));
    height: auto;
    z-index: 0;
    pointer-events: none;
    transform: scaleX(-1); /* hoa ngược: lật ngang (feedback KH) */
  }
}

/* ==================== Bride Story Detail (Figma 1437:3320) ==================== */
/* Figma: hero (text + phác thảo trái, chân dung 714×872 phải) → gallery cuộn ngang → CTA. */
.bsd {
  padding-top: 90px;
}

/* Mobile mặc định: panel + dải ảnh xếp DỌC, cuộn xuống. Desktop (≥1024):
   CẢ dải (panel + ảnh + CTA) cuộn NGANG full màn (media query dưới). */
.bsd-stage,
.bsd-track {
  display: block;
}

.bsd-stage {
  position: relative;
}

/* Nền hoa văn nổi (Figma BG 1440×872) — phủ FULL màn, đứng yên khi dải trượt */
.bsd-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Panel tên + quote + phác thảo (tấm đầu của dải) */
.bsd-panel {
  position: relative;
  padding: 24px var(--space-2);
}

.bsd-panel__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bsd-hero__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bsd-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #000;
}

.bsd-name em {
  font-style: italic;
  font-weight: 400;
}

.bsd-quote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic; /* Figma: CormorantGaramond-Italic */
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.02em;
  color: #000;
  max-width: 440px;
}

/* Phác thảo trong khung gỗ (Figma: Dress Sketch 238×304) */
.bsd-sketch {
  margin: 0;
  width: 238px;
  max-width: 70%;
}

.bsd-sketch img {
  width: 100%;
  height: auto;
  display: block;
}

/* Chân dung — mobile xếp dọc full ngang */
.bsd-portrait {
  position: relative;
  margin: 24px 0 0;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.bsd-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ảnh gallery — mobile xếp dọc; tỉ lệ 685×872 (item fix 685, feedback KH) */
.bsd-gallery__item {
  display: block;
  width: 100%;
  aspect-ratio: 685 / 872;
  object-fit: cover;
  margin-top: 24px;
}

/* Sketch & CTA khép câu chuyện */
.bsd-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 40px;
  padding-inline: 40px;
  text-align: center;
}

.bsd-cta__sketch {
  margin: 0;
  width: 200px;
  aspect-ratio: 280 / 318;
}

.bsd-cta__sketch img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bsd-cta__line {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.21;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.bsd-cta__link {
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .bsd {
    padding-top: 0;
  }
  /* Stage = khung đúng 1 màn hình. Chưa ghim (dự phòng): cuộn ngang tay. */
  .bsd-stage {
    position: relative;
    height: 100svh;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bsd-stage::-webkit-scrollbar {
    height: 0;
  }
  .bsd.is-pinning .bsd-stage {
    position: sticky;
    top: 0;
    overflow: hidden;
  }

  /* Panel text = tấm ĐẦU của dải, trượt cùng cả màn (Figma Content Right 613×872) */
  .bsd-panel {
    flex: 0 0 calc(613 * var(--uf));
    height: 100%;
    margin-right: calc(29 * var(--uf)); /* Figma: panel → chân dung cách 113 (= gap 84 + 29) */
    padding-left: calc(180 * var(--uf)); /* feedback KH: padding 180 */
    padding-top: calc(224 * var(--uf));
    padding-right: 0;
    padding-bottom: 0;
  }
  .bsd-panel__inner {
    gap: calc(32 * var(--uf));
  }
  .bsd-hero__head {
    gap: calc(12 * var(--uf));
  }
  .bsd-name {
    font-size: calc(20 * var(--uf));
    line-height: calc(32 * var(--uf));
  }
  .bsd-quote {
    font-size: calc(16 * var(--uf));
    line-height: calc(26 * var(--uf));
    max-width: calc(440 * var(--uf));
  }
  .bsd-sketch {
    width: calc(238 * var(--uf));
    max-width: none;
  }

  /* Dải cuộn ngang — chứa CẢ panel text (Figma "Our bride card" scroll ngang full màn) */
  .bsd-track {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100svh;
    gap: calc(84 * var(--uf));
    will-change: transform;
  }
  .bsd-portrait {
    flex: 0 0 auto;
    width: calc(714 * var(--uf));
    height: calc(760 * var(--uf));
    aspect-ratio: auto;
    margin: 0;
  }
  /* Ảnh DỌC: giữ khổ 685 cố định (feedback KH). Ảnh NGANG: PHP gắn inline
     width:auto + aspect-ratio thật để nở rộng ra (Figma Gallery có rect 1440×872),
     không bị cắt về khổ dọc. */
  .bsd-gallery__item {
    flex: 0 0 auto;
    width: calc(685 * var(--uf));
    max-width: none; /* thắng img{max-width:100%} toàn cục (bị flexbox kẹp lại) */
    height: calc(760 * var(--uf));
    aspect-ratio: auto;
    object-fit: cover;
    margin-top: 0;
  }
  /* Tấm cuối cao 632 trên khung Figma 872 → nếu vẫn scale theo --uf (chỉ tính bề RỘNG)
     thì trên màn rộng-mà-thấp (iMac) card cao vượt màn hình, mất nút + dòng chữ 2.
     --cf = thang nhỏ hơn giữa chiều rộng và chiều cao → luôn lọt 1 màn, canh giữa. */
  .bsd-cta {
    --cf: min(var(--uf), calc(100svh / 872));
    flex: 0 0 auto;
    margin-top: 0;
    margin-left: calc(32 * var(--uf)); /* Figma: gallery → CTA cách 116 (= gap 84 + 32) */
    gap: calc(28 * var(--cf));
    /* Chừa 180 mép phải (Figma). Flexbox bỏ padding-right/margin của item cuối khỏi
       scrollWidth → phải là padding CỦA chính tấm cuối thì mới tính vào quãng trượt. */
    padding-inline: 0 calc(180 * var(--uf));
  }
  /* Phác thảo khép chuyện: Figma SMART_ANIMATE 2s — mờ + nhỏ (280×318) → hiện + full (425×484) */
  .bsd-cta__sketch {
    width: calc(427 * var(--cf));
    aspect-ratio: 427 / 486;
  }
  .bsd.is-pinning .bsd-cta__sketch img {
    opacity: 0;
    transform: scale(0.658);
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
  }
  .bsd-cta.is-in .bsd-cta__sketch img,
  .bsd-cta:hover .bsd-cta__sketch img {
    opacity: 1;
    transform: none;
  }
  .bsd-cta__line {
    font-size: calc(28 * var(--cf));
  }

  /* Animation item: ảnh mờ + trồi nhẹ, hiện khi trượt vào khung (chỉ khi ghim) */
  .bsd.is-pinning .bsd-anim {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  .bsd.is-pinning .bsd-anim.is-in {
    opacity: 1;
    transform: none;
  }
}